Adobe^® Flex^™ Tutorial

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

Un des principaux aspects de Flex 4 et le workflow entre designers et développeurs. Pour cela, le framework apporte une séparation claire entre le visuel et le comportement d'un composant. Dans Flex 3, le code d'un composant comprenait son comportement, sa mise en page et ses changements visuels. Dans Flex 4, les composants sont séparés en différentes classes, chacune traitant d'un comportement spécifique.

Une nouvelle architecture autour du FXG

Comme spécifié dans le document officiel Gumbo Architecture Document:

La classe principale du composants, celle dont le nom correspond au tag MXML du composant, encapsule le comportement principal du composant. Cela comprend la définition des évènements propagés par le composant, la donnée que le composant représente, la liaison avec des sous-composants, la gestion et le suivi de l'état interne du composant.

On couple avec cette classe de composant, une classe de skin qui gère tout ce qui est lié à l'apparence visuelle du composant dont les éléments graphiques, la mise en page, la représentation de la data, le changement d'apparence entre les différents States et les transitions entre ces State. Dans le modèle Halo, les skins Flex étaient des éléments graphiques responsable seulement de l'aspect graphique du composant. Changer n'importe quel autre aspect de l'apparence d'un composant, comme la mise en page ou la visualisation des states obligeait à créer une sous-classe du composant et à éditer le code ActionScript directement. Dans le modèle Gumbo, tout cela est définit déclarativement dans une classe de skin, principalement à l'aide des tags graphiques FXG.

Voir les spécifications du format FXG 1.0

Pour illustrer cette nouvelle architecture, on va regarder le code de la classe spark.components.Button. Cette classe ne contient que la logique du comportement du bouton. Tous ce qui concerne le visuel du composant est défini dans la classe spark.skins.default.ButtonSkin.

Pour des raisons de performance, Flex 4 donne aux développeurs des briques qu'ils peuvent utiliser pour construire la fonctionnalité dont ils ont besoin. Des fonctionnalités lourdes telles que le scroll ou la virtualisation qui ne sont pas nécessaires à toutes les applications ne sont pas appliquées par défaut.

Namespaces et packages dans Flex 4

Les classes de Flex 4 sont dans les mêmes packages mx.*. Flex 4 introduit le package spark.* pour les composants et les classes de base, effects, filters, layouts, primitives, skins et utils.

Flex 4 apporte un nouvel ensemble de composants et d'effets ayant le même nom que ceux de Flex 3. Pour éviter les conflits MXML, Flex 4 comprend 4 namespaces différents: MXML 2006, MXML 2009, Spark et Halo.

• MXML 2006: Le namespace MXML de base utilisé dans les versions précédentes de Flex. Les applications Flex 3 compilées avec Flex 4 peuvent continuer à utiliser ce namespace.
  • URI: http://www.adobe.com/2006/mxml
  • Préfixe: mx
• MXML 2009: Le nouveau namespace MXML. C'est purement un namespace de langage, ce tag ne contient aucun composant
  • URI: http://ns.adobe.com/mxml/2009
  • Préfixe: fx
• Spark: Ce namespace contient tous les composants Spark. il doit être utilisé en conjonction avec le namespace MXML 2009
  • URI: library://ns.adobe.com/flex/spark
  • Préfixe: s
• Halo: Ce namespace inclut tous les composants Halo. Il doit être utilisé en conjonction avec le namespace MXML 2006
  • URI: library://ns.adobe.com/flex/halo
  • Préfixe: mx

Voici un petit exemple qui utilise les namespace MXML 2009, Spark et Halo pour créer une simple application Flex 4. Cet exemple utilise un DateChooser Halo et un Button Spark:

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

    <mx:DateChooser id="main_calendar" x="20" y="20"/>
    <s:Button label="submit" x="220" y="20"/>

</s:Application>

Flex 4 ajoute aussi le support de multiples namespaces dans le CSS. Si vous utiliser les namespace MXML 2009, Spark et Halo avec les Type Selector, vous devrez définir ces namespaces dans votre CSS pour éviter les conflits.

Voici un exemple de CSS qui utilise les CSS à la fois pour les composants Halo et Spark:

<fx:Style>

    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";

    s|Button {
        color: #FF0000;
    }

    mx|DateChooser {
        color: #FF0000;
    }

</fx:Style>

Composants non-visuels et tag Declarations

Avant Flex 4, Flex autorisait le tag Application à inclure des composants visuels et non-visuels. Les composants visuels étaient ajoutés à Application par addChild() alors que les composants non-visuels étaient traités comme des déclarations de propriétés. A partir de Flex4, la déclaration de composant non-visuels n'est pas autorisée comme enfant d'Application. Vous pouvez utiliser ces enfants non-visuels au sein d'un tag <fx:Declarations>. Cela inclut les enfants non-visuels tels que les effects, les validators, les déclarations de donnée et les classes RPC. Voici un exemple simple:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Declarations>
        <s:Fade id="fadeEffect" target="{targetButton}" alphaFrom="1" alphaTo="0" />
    </fx:Declarations>
    <s:Button id="targetButton" />
    <s:Button label="play effect" click="fadeEffect.play()" x="80" />
</s:Application>

• Flex 4 – Différences entre Flex 3 et Flex 4 (1-Migration vers 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 (5-Layout et Effects)
• Flex 4 – Le lien "Données" entre Skin et Composant
• Flex 4 – Création d’une Skin de bouton Flex 4