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
