Flash Builder 4 beta features

23 07 2009

Today, I made my first sample application in Flash Builder 4 beta.

The first thing that caught my eye is that when you place the mouse cursor over syntax a tooltip/popup containing document reference appears. This is really helpful.

fb4_doc_reference

The Canvas component has been discontinued and instead we have a Group component. I wanted to give a background color to the Group component, which turned out to be quite a painful experience. I had to add a Rect component and give it a fill. Check the code below:

<s:Group width="220" height="250">

<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">

<s:fill>

<mx:LinearGradient>

<mx:entries>

<mx:GradientEntry color="0xeedd33"/>

</mx:entries>

</mx:LinearGradient>

</s:fill>

</s:Rect>

</s:Group>

I like the way states are handled now. Much better. No need to do the addchild, removechild routine. Just declare the states and for each UI component specify the state(s) in which the component has to be included. Check this:

<s:DropDownList width="90%" dataProvider="{_ar}" includeIn="st1" left="10" top="50" />

<s:states>

<mx:State name="st1"/>

<mx:State name="st2"/>

</s:states>

Also, if you notice we have a mix of Spark (namespace s) and Halo (namespace mx) components.  Here is the complete code for the sample app I created.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/halo"

applicationComplete="init()">

<s:layout>

<s:VerticalLayout horizontalAlign="center"/>

</s:layout>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var _ar:ArrayCollection;

private function init():void

{

_ar = new ArrayCollection(["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8"])

}

]]>

</fx:Script>

<s:Group width="220" height="250" contentBackgroundColor="#CCEE00" y.st1="0" x.st1="0" fontFamily.st1="Courier New" color.st1="#0068DC" y.st2="0" x.st2="0">

<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">

<s:fill>

<mx:LinearGradient>

<mx:entries>

<mx:GradientEntry color="0xeedd33"/>

</mx:entries>

</mx:LinearGradient>

</s:fill>

</s:Rect>

<s:SimpleText text="Initial State - st1" text.st2="New State - st2" fontSize.st2="24" left="10" top="10"/>

<s:Line width="100%" includeIn="st2"/>

<s:List dataProvider="{_ar}" width="90%" left="10" top="50" includeIn="st2">

<s:layout>

<s:HorizontalLayout useVirtualLayout="true"/>

</s:layout>

</s:List>

<s:DropDownList width="90%" dataProvider="{_ar}" includeIn="st1" left="10" top="50" />

<s:Button label="Change" click="{currentState = currentState == 'st1' ? 'st2' : 'st1'}"

left="70" bottom="5" label.st2="Back"/>

</s:Group>

<s:states>

<mx:State name="st1"/>

<mx:State name="st2"/>

</s:states>

</s:Application>

fb4_app_1


fb4_app_2

Advertisements

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: