Tout d'abord il existe 3 types de layout en Flex :

  • Absolute
  • Horizontal
  • Vertical

Il n'y a que 4 composants qui proposent un layout absolue, le Canvas, le Panel, le TitleWindow et l'Application. Ainsi ce sont les seuls à proposer un placement ou les enfants peuvent être fixer avec des valeurs absolues.

Les autres conteneurs proposent soit un layout horizontal soit vertical. C'est à dire que les enfants "s'empilent" de cette façon.

Listons les conteneurs :

  • Application: Par défaut, layout vertical, il est cependant possible de spécifié un autre layout avec les constantes ContainerLayout.VERTICAL, ContainerLayout.ABSOLUTE, et ContainerLayout.HORIZONTAL.
  • Canvas: layout absolue, on positionne les enfants par les propriétés x et y, ou par les propriétés de contraintes top, left, bottom, right, horizontalCenter et/ou verticalCenter.
  • Box: Box est le composant de base de beaucoup de conteneur Flex. A savoir: Application, VBox, HBox, ControlBar, HDividedBox, VDividedBox, NavBar, Panel et TitleWindow. Il est peu ou pas utiliser "directement" à proprement parlé.
  • DividedBox: idem que Box du point de vue du layout. il propose une division déplacable entre chaque enfant.
  • HBox: hérite du conteneur Box avec pour direction le layout horizontal.
  • HDividedBox: idem que HBox du point de vue du layout. il propose une division déplacable entre chaque enfant.
  • VBox: hérite du conteneur Box avec pour direction le layout vertical.
  • VDividedBox: idem que VBox du point de vue du layout. il propose une division déplacable entre chaque enfant.
  • Grid: empile les enfants à la façon d'un tableau, succession de ligne et de colonnes. Ce qui peut revenir à avoir plusieurs HBox dans une grande VBox ou inversement plusieurs VBox dans une grande HBox.
  • Panel: les enfants se comporte comme une VBox par défaut, cependant vous pouvez contrôler le type de layout comme pour Application. Ce composant permet d'ajouter un entête pour un titre façon fenêtre.
  • TitleWindow: il hérite de Panel, il dispose donc des mêmes capacités en terme de layout. il ajoute cependant d'ajouter la mécanique de fermeture des fenêtres grâce à un bouton situé dans l'entête, très pratique pour les popups notamment.
  • Tile: il empile les enfants en grille. Si vous fixer les propriétés width ou height il se comporte de façon à occuper au maximum l'espace disponible. Par défaut, l'empilement se fait de façon vertical il est possible de le changer avec : TileDirection.VERTICAL et TileDirection.HORIZONTAL.
  • ControlBar: il se comporte comme une HBox. Il permet d'ajouter un espace en bas des fenêtres Panel Et TitleWindow. Souvent utilisé avec les boutons de d'action sur un formulaire par exemple.
  • Form: ce conteneur est spécifique aux formulaire il permet de présenter facilement des éléments classique d'un formulaire TextInput, TextArea, DateChooser, ComboBox, ... il empile les enfants de façon vertical, avec le composant FormItem.

Petite astuce, récemment demandée, pour fixer l'espace entre les enfants d'un conteneur au layout vertical ou horizontal, il faut utiliser les propriété de Gap: horizontalGap et verticalGap ;)

Si vous avez des questions spécifique, les commentaires sont la pour vous.