Flex 4 – (3) Différence entre éléments graphiques et éléments visuels (IVisualElement et DisplayObject) - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3. On commence ici à mettre les mains dans Flex 4 .
Avant de se lancer dans du développement Flex 4, il est primordial de comprendre ce qui a changé par rapport à Flex 3 pour faciliter la migration. Si vous n’avez jamais utilisé Flex 3 et que vous vous lancez dans Flex 4, il est indispensable de comprendre ce qui se passe derrière votre code. On va commencer par un point pas si facile à comprendre mais qui est la base du DOM (Document Object Model) de Flex 4. Sans avoir compris ce point, vous aurez du mal à comprendre pourquoi il est plus facile de créer des skins et des composants avec Flex 4 qu’avec Flex 3.
Dans cet article, on va donc parler du DOM Tree alias Display List qui est en fait l’organisation hiérarchique de vos éléments. Plusieurs articles en anglais peuvent vous aider à comprendre ce nouveau modèle DOM: Pour vous faciliter la vie, je vais essaie d’expliquer au mieux, même si c’est parfois laborieux, accrochez-vous Elements et Children Pourquoi avoir des Element ?
Flex 4 – (4) Structure des composants Flex 4 et comparaison avec Flex 3 - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3. La hiérarchie interne des composants Flex a légèrement changé.
Parfois, certains noms ont changé, et parfois, on va exposer ce qui vous était auparavant caché. Le cas des composants Prenons par exemple, l’instanciation d’un bouton en Flex: Lorsque vous instanciez un bouton, plus d’un objet sera crée. Voici schématiquement ce qui sera crée d’un point de vue Layout: Note: Dans ce schéma, TextBox est en fait Label. Un fichier Skin sera instancié et mis dans la liste d’affichage du Button. <s:Skin xmlns:fx=" xmlns:s=" minWidth="23" minHeight="23"><fx:Metadata> [HostComponent("mx.components.Button")] </fx:Metadata><s:states><s:State name="up" /><s:State name="over" /><s:State name="down" /><s:State name="disabled" /></s:states><!
Même si dans votre code MXML, on dirait que votre composant est tout en bas de la hiérarchie, à travers sa skin, d’autres composants enfants seront créés. MyButton.skin.getElementAt(2) ou myButton.skin.labelDisplay Le cas des conteneurs Prenons un exemple sur un Panel: Flex 4 – (5) Utilisation de Group pour le rendu des IVisualElement - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3. Dans les articles précédents de ce fil rouge Flex 4, on a vu comment différencier les Child des Element et comment est organisée la structure des composants Flex 4.
On va maintenant parler des différences de rendu entre les Child et les Element. Notamment, lorsque l’on essaie d’utiliser un mix entre les composants Flex 3 et les composants Flex 4. L’utilisation du composant Spark Group Prenons un projet Flex 4 avec un conteneur Spark Panel (Flex 4), qui comprend plusieurs Child et plusieurs Element (Flex 4 donc): Tout va bien, l’application compile correctement et nous montre bien notre Panel avec nos composants. Prenons maintenant un projet Flex 4 avec un conteneur MX Panel (Flex 3), qui comprend plusieurs Child et plusieurs Element: On sauvegarde, et là, le compilateur nous donne une erreur dans la vue Problems: Transitioning from Flex 3 to Flex 4 - InsideRIA.