Adobe^® Flex^™ Tutorial

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.

Si vous choisissez d'utiliser le thème Spark, notez que de nombreux style qui fonctionnaient avec le thème Halo ne fonctionneront pas avec le thème Spark. Le thème Spark supporte un nombre limité de styles comme baseColor, color, contentBackgroundColor, focusColor, symbolColor, selectionColor et rollOverColor. Pour changer des éléments visuels tels que les border ou les coins arrondis sur un composant Spark, vous devrez créer une skin personnalisée. Flex 4 a aussi ajoutée une skin "Wireframe" qui a été crée pour être utilisée pour des prototypages rapide (mock-up).

Modification du preloader par défaut

En plus du changement de theme, le preloader par défaut a été remplacé par mx.preloaders.SparkDownloadProgressBar pour les application Flex 4. Ce preloader très léger devrait raccourcir légèrement le temps de démarrage. Si vous voulez utiliser le preloader Flex 3, vous ne devez changer qu'une ligne de code. Dans votre tag Application, ajoutez:

preloader="mx.preloaders.DownloadProgressBar"

Si vous migrez une application Flex 3 vers Flex 4, je ne vous recommande pas de remplacer chaque composant Halo par son composant Spark correspondant, ce ne serait pas un bon investissement de votre temps. Au lieu de cela, passez à flex 4 pour vos nouvelles applications.

• 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 (3-Nouveaux composants et container)
• Flex Styles: Utilisation du StyleManager et setStyleDeclaration
• Flex 4 – Différences entre Flex 3 et Flex 4 (5-Layout et Effects)
• Flex Item Renderer – Optimiser les performances des ItemRenderer