L'initialisation graphique des applications Flex/AS3 est le moment où l'on détermine la taille idéale de tous vos composants et containeurs pour qu'ils puissent tous être affichés, ou consultables via une scollbar le cas échéant si on manque de place.

Une initilisation en trois phases

1. Une phase d'initilisation de tous les composants graphiques en leur affectant toutes leurs propriétés. Cette phase part de l'élément le plus externe <s:Application> vers les éléments feuilles.

2. Une phase de mesure en partant des éléments feuilles vers les conteneurs de plus haut niveau. Ainsi, sauf contraintes explicites, la taille d'un conteneur dépendra de son contenu.

3. Une phase de disposition qui, forte des deux premières phases, sera capable de déterminer les positionnements précis de chacun des éléments graphiques.

Tout ceci est automatiquement géré par le framwork flex !

Les événements en présence

Comme toute cette initialisation est gérée automatiquement par le Framework, ce dernier notifie l'application via des événements de type FlexEvent. Ainsi le développeur peut savoir où on en est de ces trois phases. Il sera possible pour cela d'écouter des sources d'événements différents sur nos composants graphiques.

Pour la phase 1 : preinitialize Pour la phase 2 : initialialize et contentCreationComplete (disponible uniquement sur Application) Pour la phase 3 : creationComplete, updateComplete et applicationComplete (disponible uniquement sur Application)

Un exemple pour illustrer le tout

Prenons une application avec un Panel dans lequel on place 2 boutons et pour chacun de ces éléments, nous nous mettons à l'écoute des événements comme suit :

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           minWidth="955" minHeight="600"
                           preinitialize="common(event,'Application')"
                           initialize="common(event,'Application')"
                           contentCreationComplete="common(event,'Application')"
                           creationComplete="common(event,'Application')"
                           applicationComplete="common(event,'Application')"
                           updateComplete="common(event,'Application')">
        
        <fx:Script>
                <![CDATA[
                        import mx.events.FlexEvent;
                        
                        private function common(event:FlexEvent,comp:String):void{
                                trace(event.type.toString()+"\t"+comp);
                        }

                ]]>
        </fx:Script>
        
        <s:Panel preinitialize="common(event,'Panel')"
                         initialize="common(event,'Panel')"
                         creationComplete="common(event,'Panel')"
                         updateComplete="common(event,'Panel')">
                
                <s:Button preinitialize="common(event,'Button1')"
                                  initialize="common(event,'Button1')"
                                  creationComplete="common(event,'Button1')"
                                  updateComplete="common(event,'Button1')"/>
                
                <s:Button preinitialize="common(event,'Button2')"
                                  initialize="common(event,'Button2')"
                                  creationComplete="common(event,'Button2')"
                                  updateComplete="common(event,'Button2')"/>
        </s:Panel>

</s:Application>

Nous obtenons le résultat suivant sur la console :

preinitialize   Application
preinitialize   Panel
preinitialize   Button1
initialize      Button1

preinitialize   Button2
initialize      Button2

initialize      Panel
contentCreationComplete Application
initialize      Application

creationComplete        Button1
updateComplete  Button1

creationComplete        Button2
updateComplete  Button2

creationComplete        Panel
updateComplete  Panel

creationComplete        Application
applicationComplete     Application
updateComplete  Application