Un petit moment s'est passé depuis mon dernier article. La reprise des cours, les projets qui tombent sur le dos et parfois le manque de motivation sont responsables de ce passage à vide. Mais rassurez-vous, ce blog n'est pas mort et j'espère le mettre à jour plus souvent dans les semaines qui viennent.
J'ai eu l'idée de faire cet article à cause d'un projet sur lequel je travail avec mon pote nono. Il s'agit en fait d'un quizz interactif , animé par un présentateur grâce à une webcam (utilisation de Red5 pour le streaming et l'envoi/réception des questions/réponses), où les joueurs vont pouvoir répondre à des questions grâce à une WiiMote.
Nous voulions afficher les réponses possibles chez le joueur sous forme de croix :
Dans le même temps, nous voulions que l'application soit redimensionnable, sans perdre le layout d'origine.
La première idée fut de créer une Grid de 3x3 et de disposer les boutons à l'interieur. Mais au moment de la compilation, le compilateur indique que le composant Grid est 'deprecated' dans Flex 3 et qu'il faut utiliser à la place les propriétés constraintRows et constraintColumns.
Ne connaissant pas ces nouvelles propriétés, un tour dans la doc s'est alors imposé.
Ces propriétés permettent en fait de subdiviser en colonnes et rangées un composant qui utilise le positionnement absolu comme Canvas,Panel, Module ou encore Application. L'interêt de ce découpage? Cela permet de construire des layouts redimensionnable dans les containers qui utilisent le positionnement absolu, manipulation très difficile à réaliser dans Flex 2.
Pour créer ces subdivisions, on peut passer soit par le code, soit directement par la vue Design si on utilise Flex Builder.
Un example : Un canvas dispose de 2 colonnes. La première utilise 30% de l'espace. Le bouton 'btn' doit toujours de trouver 10 pixels à droite de la première colonne :
Actionscript:
-
<mx:Canvas>
-
<mx:constraintColumns>
-
<mx:ConstraintColumn id="col1" width="30%"/>
-
<mx:ConstraintColumn id="col2"/>
-
</mx:constraintColumns>
-
<mx:Button id="btn" left="col1:10" />
-
</mx:Canvas>
Si je reprends l'exemple des 4 boutons en croix, un découpage en 4 du Canvas est suffisant : 2 colonnes et 2 rangées qui font chacune 50% du total de l'espace. Le bouton A est alors centré horizontalement par rapport au canvas et centré verticalement dans la première rangée. Même raisonnement ensuite pour les 3 autres boutons :
Actionscript:
-
<mx:Canvas width="100%" height="100%">
-
<mx:constraintRows>
-
<mx:ConstraintRow id="Canvas1_row1" height="50%"/>
-
<mx:ConstraintRow id="Canvas1_row2" height="50%"/>
-
</mx:constraintRows>
-
<mx:constraintColumns>
-
<mx:ConstraintColumn id="Canvas1_col1" width="50%"/>
-
<mx:ConstraintColumn id="Canvas1_col2" width="50%"/>
-
</mx:constraintColumns>
-
<mx:Button label="En attente des suggestions" id="repA" horizontalCenter="0" verticalCenter="Canvas1_row1:0"/>
-
<mx:Button label="En attente des suggestions" id="repB" verticalCenter="0" horizontalCenter="Canvas1_col1:0"/>
-
<mx:Button label="En attente des suggestions" id="repC" horizontalCenter="Canvas1_col2:0" verticalCenter="0"/>
-
<mx:Button label="En attente des suggestions" id="repD" horizontalCenter="0" verticalCenter="Canvas1_row2:0"/>
-
-
</mx:Canvas>
Il est souvent plus facile de créer ces découpages directement dans la vue Design. Une règle horizontale et une verticale se place alors automatiquement au-dessus du container autorisant ces 'Enhanced Constraints'. Il suffit alors de placer la souris sur ces règles et de cliquer pour que le code soit automatiquement généré.
absolute positionning, Enhanced Constraints, positionnement absolu
Souscrire
