Adobe^® Flex^™ Tutorial

Traduction de l'article Differences between Flex 3 and Flex 4 beta de Joan Lafferty.

Modifications apportées sur les Effect en Flex 4

De nombreuses améliorations ont été faites sur l'architecture des Effect dans Flex 4. Les effets Halo (Flex 3) ne fonctionnaient que sur les composants basés sur UIComponent. Les effets Spark (Flex 4) peuvent agir sur n'importe quelle cible, même les primitives graphiques du framework. Tous ces effets se trouvent dans le package spark.effects.*.

Puisque ces effets fonctionnent sur les composants Halo, les composants Spark et les primitives graphiques, Adobe recommande l'utilisation des effets Spark pour toutes vos futures applications.

Voir l'article de Chet Hasse sur Effects in Adobe Flex 4 SDK beta

Modifications apportées sur le Layout (mise en page)

Dans les versions précédentes de Flex, la mise en page des composants et des conteneurs était définie dans chaque composant. C'est pourquoi on avait des composants tels que List, TileList et HorizontalList, qui apportaient tous les mêmes fonctionnalités sauf que leur mise en page était différente.

Dans Flex 4, la mise en page a été découplée des composants. Maintenant, les composants Spark tels que Application, List, ButtonBar et Panel peuvent définir leur mise en page de manière déclarative. Dans tous les composants, cela est géré par la classe Group et la mise en page des enfants de Group est laissé à un objet "layout" associé. Cette mise en page supporte à la fois les composants Spark et Halo en plus des primitives graphiques FXG. La mise en page peut même être changée à l'exécution.

En tant que développeur, vous pourrez facilement écrire des "layout" personnalisées et basculer de layout directement dans votre composant. Voici un exemple qui définit une liste verticale, une liste horizontale et une tiled list (en grille):

Vertical List (layout par défaut)

<s:List />

Horizontal List

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

Tiled List

<s:List>
    <s:layout>
        <s:TileLayout />
    </s:layout>
</s:List>

Virtualization et scrolling

L'architecture de Flex 4 donne aux développeurs des briques sur lesquelles ils peuvent construire la fonctionnalité qu'ils souhaitent. Par défaut, la "virtualization" et le défilement (scrolling) sont désactivés. La "virtualization" s'apparente à l'utilisation des item renderer (recyclage des éléments pour éviter d'instancier des éléments non affichés).

Pour ajouter l'option d'avoir des scrollbar sur un Group et activer la "virtualization", vous devrez:

1. Fixer la propriété "useVirtualLayout" à true sur l'objet "s:layout"
2. Ajouter un composant Scroller à votre Group

Voici un exemple utilisant ces deux fonctionnalités Flex 4:

<s:Panel title="Horizontal Panel" width="300" height="220" left="20" top="20">
    <s:Scroller width="100%" height="100%">
        <s:Group>
           <s:layout>
               <s:HorizontalLayout useVirtualLayout="true" />
           </s:layout>
           <s:TextInput />
           <s:Button label="clear" />
           <mx:DateChooser />
           <s:Button label="submit" />
        </s:Group>
    </s:Scroller>
</s:Panel>

Voir les spécifications sur le Layout Flex 4

• Flex 4 – Différences entre Flex 3 et Flex 4 (3-Nouveaux composants et container)
• Flex 4 – Différences entre Flex 3 et Flex 4 (2-Nouvelle architecture Flex 4)
• Flex 4 – Différences entre Flex 3 et Flex 4 (1-Migration vers Flex 4)
• Flex Effect: Démarrer un effet avec un trigger (flex trigger event)
• Flex DefaultListEffect et DefaultTileListEffect – Appliquer un effet à une List/TileList à chaque modification de son dataProvider