Adobe Flex Tutorial - Adobe Flex Tutorial

30mai/102

Flex 4 – (3) Différence entre éléments graphiques et éléments visuels (IVisualElement et DisplayObject)

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. C'est un point primordial car pour retrouver vos composants, il va falloir savoir comment ils sont organisés.

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

Avec Flex 3, tous les enfants d'un conteneur étaient des "children". Pour parcourir tous les composants d'un conteneur, pas de souci, il suffit d'utiliser les méthodes getChildren() ou getChildAt(idx:int). Pour ajouter un composant, il suffisait d'appeler la méthode addChild(do:DisplayObject) sur le conteneur pour lui ajouter un compoant.

Avec Flex 4, vous pourrez voir que vous avez une nouvelle méthode: addElement(element:IVisualElement).

Alors quelle est la différence entre un Element et un Child?

Un Element est un objet qui implémente IVisualElement
Un Child est un objet qui hérite de DisplayObject

Alors comment savoir si un composant est un Element ou un Child (ou les deux)?

Tout d'abord, la classe UIComponent hérite de DisplayObject, donc tous les UIComponent sont des DisplayObject et sont donc des Child.

La classe UIComponent implémente aussi IVisualElement donc tous les UIComponents sont considérés comme des Element.

Cependant, cela ne signifie pas que tous les DisplayObject sont des Element. En effet, c'est bien UIComponent qui implémente IVisualElement et pas DisplayObject:
Peu de composants sont en fait seulement des Element et pas des Child. Principalement, on retrouve les primitives Spark telles que Rect, Ellipse et Path. Ces 3 classes héritent de FilledElement et donc de GraphicElement qui implémente IVisualElement.
Dans le language utilisé dans les docs, ces Element "purs" (Rect, Path, Bitmap) sont appelés "graphic element". Les "visual element" comportent, eux, les composants (Flex 3/4) et les "graphic element". Comme l'un contient l'autre, il est rapide de se mélanger les pinceaux

Pourquoi avoir des Element ?

Alors pourquoi ce classes n'héritent pas de DisplayObject, on aurait ainsi uniquement des Child, pas besoin de se pré-occuper des Element? Et bien la réponse vient en fait de la partie Skinning. En effet, comme on va le voir par la suite, un Element n'est pas un DisplayObject, mais il a besoin d'un DisplayObject pour se dessiner. Cela va se faire sans même que vous vous en rendiez compte. L'avantage de cette technique vient du fait que plusieurs Element peuvent partager un même DisplayObject de rendu (c'est Flash Player qui décide). On a ainsi moins d'instanciations, moins de parcours et donc de meilleures performances.

A première vue, vous pensez peut-être que vous n'allez jamais utiliser de Rect, Path ou Ellipse car vous avez besoin de composants de haut niveau (DataGrid, ComboBox, …) mais ces primitives sont utilisées pour le dessin des skins de composant. Vous allez donc en utiliser sans le savoir .

On en parle dans la prochaine partie de ce fil rouge Flex 4.