Flex 4 – Différences entre Flex 3 et Flex 4 (3-Nouveaux composants et container)
Traduction de l'article Differences between Flex 3 and Flex 4 beta de Joan Lafferty.
Flex 4 introduit de nouvelles classes de composants qui utilisent la nouvelle architecture Flex 4, qui va rentre le skinning et la personnalisation de composant plus simple. Voici un comparatif entre les composants Flex 3 Halo et leur équivalent Flex 4 Spark:
- mx.controls.Button -> spark.components.Button
- mx.controls.ButtonBar -> spark.components.ButtonBar
- mx.controls.CheckBox -> spark.components.CheckBox
- mx.controls.ComboBox -> spark.components.DropDownList (w/o editability)
- mx.controls.HorizontalList -> spark.components.List (with a HorizontalLayout)
- mx.controls.HRule -> spark.primitives.Line
- mx.controls.HScrollBar -> spark.components.HScrollBar
- mx.controls.HSlider -> spark.components.HSlider
- mx.controls.Image -> spark.primitives.BitmapImage
- mx.controls.LinkBar -> spark.components.ButtonBar (with a custom skin)
- mx.controls.LinkButton -> spark.components.Button (with a custom skin)
- mx.controls.List -> spark.components.List
- mx.controls.NumericStepper -> spark.components.NumericStepper
- mx.controls.RadioButton -> spark.components.RadioButton
- mx.controls.RadioButtonGroup -> spark.components.RadioButtonGroup
- mx.controls.TextArea -> spark.components.TextArea
- mx.controls.TextInput -> spark.components.TextInput
- mx.controls.TileList -> spark.components.List (with a TileLayout)
- mx.controls.ToggleButtonBar -> spark.components.ButtonBar
- mx.controls.VideoDisplay -> spark.components.VideoPlayer
- mx.controls.VRule -> spark.primitives.Line
- mx.controls.VScrollBar -> spark.components.VScrollBar
- mx.controls.VSlider -> spark.components.VSlider
- mx.core.Application -> spark.components.Application
- mx.core.Window -> spark.components.Window
- mx.core.WindowedApplication -> spark.components.WindowedApplication
- mx.containers.Canvas -> spark.components.Group
- mx.containers.HBox -> spark.components.HGroup
- mx.containers.Panel -> spark.components.Panel
- mx.containers.Tile -> spark.components.Group (with a TileLayout)
- mx.containers.VBox -> spark.components.VGroup
Adobe encourage l'utilisation des composants et des conteneurs Halo avec les composants Spark. Adobe continue de créer des composants sur la même base (UIComponent), il devrait donc y avoir interopérabilité totale entre Spark et Halo.
Flex 4 – Différences entre Flex 3 et Flex 4 (2-Nouvelle architecture Flex 4)
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.
Mes projets (Open Source)
Autres
