Flash Builder 4 Débutant ? Découvrez Flex 4 et Adobe® Flash® Builder™ 4

Archive pour le tag 'layout'

02
avr

Flex 4 – Layout Mirroring pour texte right-to-left (Hébreu, Arabe, …)

Par fnicollet 1 Commentaire
Categories: ActionScript, Flex 4, Fonts, Label, MXML, Text, TextArea and TextInput Tags: , , .

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.

Mirroring layouts in Flex

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".

Télécharger la release Flex SDK 4.1.0.15132

Télécharger les dernières versions de Flex 4 SDK

01
sept

Flex 4 – Différences entre Flex 3 et Flex 4 (5-Layout et Effects)

Par fnicollet 1 Commentaire
Categories: Effect, Flex 4, HorizontalList, Item Renderer and TileList Tags: , , , .

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>

Lire la suite: 'Flex 4 – Différences entre Flex 3 et Flex 4 (5-Layout et Effects)'

Bientôt sur flex-tutorial.fr …

  • - Tutoriaux BlazeDS
  • - Composants Flex

tutorial flex tutorial flex

flex Adobe Air AFCS Data Filter Lib ToasterLib librairies AS3 Flex livres AS3 Flex

 

septembre 2010
L Ma Me J V S D
« août    
 12345
6789101112
13141516171819
20212223242526
27282930  

Catégories