Flex 4 – Schémas explicatif pour conteneurs et Layout
Une des points les plus différents entre Flex 3 et Flex 4 est sûrement la séparation entre conteneur et Layout qui est faîte en Flex 4.
Pour rappel, avec Flex 3, c'était le conteneur qui décidait de la disposition des éléments "enfant". Pour changer la disposition, il fallait le plus souvent changer de composant ce qui n'était pas le must (passage d'une VBox à une TileLayout par exemple).
Avec Flex 4, le conteneur ne décide pas tout seul de la disposition de ses éléments, et on doit lui donner un objet Layout. Ces changements ont introduit une batterie de conteneurs tels que Group, SkinnableContainer, NavigatorContent (…) et de nombreux Layout (TileLayout, VerticalLayout, …).
Il est parfois difficile de s'y retrouver mais les gens de chez http://flexlayouts.org/ ont tenté de résumer le comportement de ces composants en quelques PDF. C'est grâce à un post sur le DevGirl's blog que j'ai découvert ces documents:
Using Flex Containers – Tips and Reference
Cet article donne pas mal d'informations sur quel composant préférer pour quelle situation, etc. Voici un petit exemple de récap bien pratique:
Sur flexlayout, vous pouvez retrouver ces informations avec des démonstrations interactives de chaque Layout:
Bonne lecture!
Flex 4 – Layout Mirroring pour texte right-to-left (Hébreu, Arabe, …)
Avant de partir en vacances une petite dizaine de jours (pas de blog donc ^^), voici une petite news de la part de la team Adobe Flex SDK.
La nouvelle Product Manager sur Flex, Deepa Subramaniam vient d'annoncer sur son blog une des nouveautés qui va arriver avec les prochaines release de Flex 4 (et oui, ils continuent à travailler dessus 
). Cette nouvelle fonctionnalité est nommée "Layout Mirroring".
Elle sert à faire un effet "miroir" (pas un effet réflexion web 2.0) vertical pour les applications utilisant une mise en page qui doit être adaptée au texte qui s'écrivent de droite à gauche comme l'Hébreu ou l'Arabe.
Dans la pratique, cet effet miroir se traduit par une nouvelle propriété de style "layoutDirection" sur UIComponent. Celle-ci est par défaut à "ltr" (left-to-right, le standard Français / Anglais) mais vous pouvez la passer à "rtl". Notez que comme les autres propriétés de style, celle-ci se "cascade" dans votre application. C'est-à-dire qu'il suffit de mettre votre Application en layout "rtl" pour que cela se propage à tous les composants UIComponent de votre Application.
Toute cette manipulation se fait grâce au nouveau moteur de texte "Flash Text Engine" introduit dans Flex 4. Pour que toute votre application puisse avoir cet disposition miroir, il faut donc que tous vos composants utilisent ce FTE. Pour cela, il suffit de préciser dans les propriétés de compilation de votre projet Flex 4 "Use Flash Text Engine in Flex Components".
Spécifications sur le Layout Mirroring
Si vous voulez tester, il vous faut un des derniers build de Flex 4.1 disponible sur le site d'Adobe. En effet, vous aurez accès à cette fonctionnalité à partir de la release "4.1.0.15132".
Flex 4 – Différences entre Flex 3 et Flex 4 (5-Layout et Effects)
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>
Mes projets (Open Source)
Autres
