Binding in flex 3 magic in curly brackets

A lot of things have been said about binding (read basics). But to really understad what is going on behind the scenes lets do some experiments… First to mention is, the curly brackets magic does not work as BindingUtils does. BindingUtils lets you bind only one setter, but curly brackets lets you bind whole logic.

  • test1 – notice constant C1 in (binding constants is valid, and is working without Binding meta tag) and some plus inside expression “Working: {C1 + ‘ ‘ + v2}”
  • test2 – you can use more curly brackets expressions within one attribute “Working: {C1} {v2.toUpperCase()}”
  • test3 – even if you expect function result from your bindable variable it will work “Working: {C1} {uberFunc(v2)}”
  • test4 – notice some math functions here “Working: {v3 + v3}, {Math.pow(v3, 2)}”
  • test5 – simple Object and Array is not working (nor ArrayCollection using brackets) “Not working: {v4.v}, {v5[0]}, {v6[0]}”
  • test6 – getItemAt() on ArrayCollection works just smooth “Working: {v6.getItemAt(0)}”
  • test7 – once you use curly brackets you can not remove binding, but binding can be unbinded when binded by BindingUtils. (both getter and setter in bindProperty must be public!)
  • test8 – binding works when correct event is dispatched “{foo.gimmeSometing()}”
  • test9 – binding with ternary operator is super powerful “{v2 == ‘world’ ? ‘is world’ : ‘not world’}”

Read the rest of this entry »

Quick tip: embedding in Flex

In Flex application, you can embed your assets into 3 places: ActionScript, MXML, CSS. To embed into ActionScript use following syntax:

[Embed(source="assets/image.png")]
public var imageClass:Class;

[Embed(source="assets/library.swf", symbol="symbol1")]
public var symbol1Class:Class;

// flash library symbol alternative
[Embed(source="assets/library.swf#symbol2")]
public var symbol2Class:Class;

To embed into MXML use:

<mx:Image source="@Embed('assets/image.png')"/>
<mx:Image source="@Embed('assets/library.swf', symbol='symbol1')"/>
<mx:Image source="@Embed('assets/library.swf#symbol2')"/>
<mx:Button skin="{null}"/>

To embed asset into CSS file use syntax:

Button 
{
    upSkin: Embed(source="assets/image.png");
    overSkin: Embed(source="assets/library.swf", symbol="symbol1");
    downSkin: Embed(source="assets/library.swf#symbol2");
    selectedUpSkin:ClassReference(null);
}

@font-face 
{
    font-family: Copacetix;
    src: url("assets/copacetix.ttf");
    unicode-range:
        U+0020-U+0040, /* Punctuation, Numbers */
        U+0041-U+005A, /* Upper-Case A-Z */
        U+005B-U+0060, /* Punctuation and Symbols */
        U+0061-U+007A, /* Lower-Case a-z */
        U+007B-U+007E; /* Punctuation and Symbols */
}

Embedding font to .as (.mxml):

[Embed(source="../arial.ttf", fontFamily="myArial")] 
public static const FONT_ARIAL:Class;
public static const FONT_ARIAL_NAME:String = "myArial";

[Embed(source="../fonts.swf", fontName="myCourier", fontWeight="bold|normal") ]
public static const FONT_COURIER:Class;
Font.registerFont(FONT_COURIER);

public function Test()
{
    var format:TextFormat = new TextFormat();
    format.font	= FONT_ARIAL_NAME;
    						
    var tf:TextField = new TextField();
    tf.embedFonts = true;
    tf.defaultTextFormat = format;
}

Read more about embedding assets into ActionScript best practices here. Read basics about embedding here.