Blog Xebia France The novelties of Flex 4 Print

The novelties of Flex 4

Posted By Ell ne Dijoux One on Wednesday, August 19th, 2009 10:26 IN RIA 2 Comments

Some time ago the version silly billy of Flex 4 went out. Known also under the name of Gumbo, this new version does not any more have got nothing to do with previous: possibility of customising its components, simplification of notations... We will see in this ticket some novelties of Flex 4 and the reasons of such a radical change of bookshops.

To show examples Flex 4 ci underneath, it will be necessary you to instal Flash Player 10.

Effects

A notable difference with the previous version of Flex is the management of states which is distinctly simpler now.
In Flex, it is possible to describe several states linked to a component. These states define, for a component, elements to be added, styles or properties to be applied. Indeed, it is a matter to manipulate of AddChild, of SetProperty or else of SetStyle who can become very quickly heavy to manage. To include better, let us take as a model:
We are going to accomplish an application on 2 states, the state blueState who is going to colour the quality-label helloLabel in blue and the state redState who is going to colour him in red. In order to do that, with Flex 3, we use beacons SetStyle who allow to change style color of the quality-label and to put it in required colour.

<? xml version = "1.0" encoding = "Utf-8"?>
<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml " layout = " Absolute " minWidth = "300 " minHeight = "300 ">

  <mx:states>
    <mx:State name = "BlueState">
      <mx:SetStyle target =" {HelloLabel} "name = " Colour " been worth = "Blue"/>
    </mx:State>
    <mx:State name = "RedState">
      <mx:SetStyle target =" {HelloLabel} "name = " Colour " been worth = "Red"/>
    </mx:State>
  </mx:states>

  <mx:HBox>
    <mx:Label text = "Good morning!" idem = "HelloLabel"/>
    <mx:Button quality-label = "Blue" idem = " Blue " click = "currentState ='blueState'"/>
    <mx:Button quality-label = "Red" idem = " Red " click = "currentState ='redState'"/>
  </mx:HBox>
</mx:Application>

With Flex 4, it is not any more a matter to define of SetStyle or SetProperty in components. Everything is made in the attributes which can decline according to states as this: styleOuPropriete.monEtat. So color.blueState colour will take blue when they will be in this state. Of other one attributes also appear in graphic components as includeIn or else excludeFrom to allow to exclude or to include a component according to the common state. Besides, Flex takes now by default the first state when several people for a component are defined with it. It is the reason for which we added defaultState as state by default. With Flex 4, our previous example gives this therefore:

<? 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" width = "300 " height = "300 ">

  <s:states>
    <mx:State name = "DefaultState"/>
    <mx:State name = "BlueState"/>
    <mx:State name = "RedState"/>
  </s:states>

  <mx:Label text = "Good morning!" colour = " Black " colour.blueState = " Blue " colour.redState = "Red"/>
  <s:Button quality-label = click "Red" = "currentState ='redState'"/>
  <s:Button quality-label = click "Blue" = "currentState ='blueState'"/>

  <s:layout>
    <s:HorizontalLayout/>
  </s:layout>

</s:Application>

Certainly, it is about a small example. But it could simplify the management of states on applications more worked out.

Draw a button me with spark.

New bookshops came into the world in Flex 4. Let us begin with the bookshop spark, present since May, 2009. She gives the whole new generation of components from whom architecture apparently differs from its precursor halo. This last offered graphic components on which it was possible only to change colours and style of the text: Flex Style to Explore is a good example.
The spark bookshop, for his/her part, offers a new type of composing "Skinnable", that is we have on the one hand the drawing representing a button and of other one the object button. Besides, spark includes the FXG bookshop which gives all components allowing to make vectorial drawings.
To include better functioning, nothing better than example:
We create Skin first under the name of component.CustomSkin.

<? xml version = "1.0" encoding = "Utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com / flex / spark"
xmlns:mx = "library://ns.adobe.com / flex / halo" height = "300 " width = "300 ">

  <fx:Metadata>
    [HostComponent ("spark.components. Button")]
  </fx:Metadata>

  <s:states>
    <mx:State name = "Up"/>
    <mx:State name = "Over"/>
    <mx:State name = "Down"/>
  </s:states>

  <s:Ellipse height = "86 " width = "96 " verticalCenter = "0 " horizontalCenter = "0 ">
    <s:fill>
     <mx:SolidColor colour = "# FF0000" colour.over = " Red " colour.up = "Blue"/>
     </s:fill>
  </s:Ellipse>

  <s:layout>
    <s:BasicLayout/>
  </s:layout>
</s:Skin>

We define the behaviour of this component thanks to the metatag HostComponent, here it is therefore about a button. We add states then by looking in material, we can see that Button have states: up, over, down and disabled. Let us content ourselves with first three states for this example. Finally, they end up drawing a button which will be arranged in a layout who must be defined in any spark component. It skin is then linked to a button in main application.

<? 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"
  minWidth = "1024 " minHeight = "768"
  xmlns:component = "component. *">
  <fx:Script>
    <! [CDATA [
      import mx.controls. Alert;
      component import. MYBUTTON;
    ]]>
  </fx:Script>
  <fx:Style source = "TestFlex4"/>
  <s:Button skinClass = "component. CustomSkin" click = "Alert.show ('I am a button!')"/>
</s:Application>

And here is the return:

Other novelties of Flex 4

Support in ASDOC of files MXML
SDK of Flex 3 generated only the material linked to code ActionScript 3. It is possible now in SDK 4 to generate of ASDOC for components MXML.

Dated him binding in both directions
Currently, the link of data in a component with Flex is made in the following way:

<? xml version = "1.0" encoding = "Utf-8"?>
<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml ">
<mx:TextInput idem = "MyText1"/>
<mx:TextInput idem = text "MyText2" =" {MyText1.text} "/>
</mx:Application>

In this example, edition in myText1 change fields myText2 but the opposite is not made. To link them both it would be necessary to change myText1 as this:

<mx:TextInput idem = text "MyText1" =" {MyText2.text} "/>

With new notation that offers Flex 4, it is enough to make as this:

<? 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" minWidth = "1024 " minHeight = "768 ">
  <s:TextInput idem = "MyText1"/>
  <s:TextInput idem = text "MyText2" = "{MyText1.text}"/>
  <s:layout>
    <s:VerticalLayout/>
  </s:layout>
</s:Application>

And automatically both components are linked.

Conclusion

All these novelties offered by Adobe are aimed:

to improve the productiveness of the developer by simplifying language,
to have more freedom on design.

The bookshop spark offer components radically different from what it is currently possible to use in Flex 3, but it is however possible to use the components of the ancient bookshop called halo. The repeat customers will not therefore get lost there.
But then why so much change? Reason is very simple and is called Flash Catalyst. is capable of generating code Flex from drawings accomplished by the Creative range Continuation 4.
Flex 4 is always in silly billy currently, a release is envisaged for last quarter 2009.

To go farther

Article printed from Blog Xebia France:

URL to article: / 2009 / 08 / 19 / les-nouveautes-de-flex-4 /

click here to print.