Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex 4 – Différences entre Flex 3 et Flex 4 (1-Migration vers Flex 4)

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

Flex 4 (nom de code Gumbo) représente un changement majeur par rapport à Flex 3. Flex 4 introduit en effet une nouvelle architecture de composants et de skinning. En tant que développeur Flex 3, vous ne devriez cependant par rencontrer trop de difficultés pour compiler vos applications Flex 3 avec le SDK Flex 4, car la compatibilité descendante (backwards compatibility) avec Flex 3 est conservée.

Dans cette série d'articles, je vais donner d'ensemble des objectifs principaux de Flex 4, des différences d'architecture ainsi qu'une introduction aux changements de composants, de mise en pages mais aussi l'utilisation des States et des effets. On verra aussi comment compiler votre application Flex 3 avec le SDK Flex 4. Cet article ne couvre pas les nouvelles fonctionnalités de Flex 4.

Tout au long de cette série d'articles, le terme de "Composants Halo"  réfère aux composants inclus dans Flex 3. Le terme "Composants Spark" réfère au nouvel ensemble de composant de Flex 4.

Migration d'applications vers Flex 4

Pour une migration d'application Flex 3 vers Flex 4, vous n'aurez que peu de choses à modifier. A part quelques résolutions de bugs et un changement du thème par défaut, attendez-vous à ce que votre application fonctionne de la même manière (voire mieux) qu'elle le faisait en Flex 3. Cependant, voici quelques points sur lequels vous devriez être attentifs.

Dépendance à Flash Player 10

Compilez bien pour Flash Player 10. Flex 4 impose la compilation en FP10.

Les Type Selector (style) ont besoin d'un namespace

Un type selector CSS lie une classe Flex à un style. Par exemple, les sélecteurs CSS suivant agissent sur Button et DateField:

Button {
    cornerRadius: 10;
}
DateField {
   color: #780800;
}

Dans Flex 4, quand une application utilise des Type Selector, un namespace est requis. Si vous utilisez uniquement le namespace MXML 2006 dans votre application Flex, ajouter la déclaration de namespace par défaut à votre CSS:

<mx:Style>

@namespace "http://www.adobe.com/2006/mxml";
…
</mx:Style>

Si vous utilisez plusieurs namespaces dans votre application, vous devrez les indiquer dans votre CSS (voir plus loin).

De plus, si votre application utilise une méthode comme StyleManager.getStyleDeclaration("Button"), le type selector devra inclure le package. Par exemple, l'appel à getStyleDeclaration() deviendrait StyleManager.getStyleDeclaration("mx.controls.Button")

Changement de theme

Le theme par défaut des composant Flex 3 (Halo) est maintenant le theme Spark. C'est pourquoi le look et les tailles de votre application pourraient être différent en utilisant Flex 3. Si vous voulez tout de même utiliser le look Flex 3, vous le pouvez car Flex 4 inclut toujours le thème  Halo de Flex 3. Pour compiler en utilisant le thème Halo, utilise le flag -compatibility-version=3.0 dans les arguments du compilateur ou bien le flag -theme. Pour cela, dans Flash Builder 4, vous devez modifier le paramètre Additional Compiler Arguments dans la section Flex Compiler du panel de propriétés. Si vous utilisez ces arguments, assurez vous que le répertoire framework/themes/Halo est bien dans votre Source Path.

compc -include-file corporate_styles.css ../assets/themes/corporate.css -include-file background.jpg ../assets/themes/background.jpg -o corporate.swc

compc -include-file corporate_styles.css ../assets/themes/corporate.css -include-classes com.company.styles.ButtonSkin com.company.styles.ToolTipSkin