Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Layout – Types de Containers (Canvas, Form, Box, Grid …)

Chaque type de conteneur présent dans le framework Flex a un ensemble de règles qui définissent la manière dont il arrange ses children. Flex utilise ces règles pour mesurer l'espace disponible pour les enfants, et pour décider où les enfants sont positionnés.

Un conteneur VBox, par exemple, arrange ses children de manière verticale, en plaçant chaque item par ligne. De manière similaire, un conteneur HBox arrange ses enfants de manières horizontale. Chaque conteneur a été conçu pour un usage spécifique.

Savoir quand utiliser un conteneur en particulier est crucial lorsque vous voulez développer une application.

Diagramme de classe de composants conteneurs:

Les différents types de containers Flex:

• Application: Ce container spécial est la racine d'une application Flex. Par défaut, elle se comporte comme une VBox. La propriété layout contrôle la manière selon laquelle les éléments sont arrangés. les valeurs possibles sont ContainerLayout.ABSOLUTE, ContainerLayout.VERTICAL et ContainerLayout.HORIZONTAL. Fixer la propriété layout en ABSOLUTE fait que ce container se comporte comme un Canvas, et permet de spécifier des positions absolues pour chaque enfant. Fixer la valeur à HORIZONTAL et VERTICAL fait ce container se comporter comme une HBox ou une VBox respectivement.
• Box: Typiquement, vous n'allez pas utiliser ce container directement, mais il est important de bien comprendre comment il fonctionne car de nombreux containers basent leurs règles de positionnement sur celle de Box. Ce conteneur arrange ses enfants, les uns à la suite des autres, sur une simple colonne (ou ligne), suivant la valeur de la propriété "direction". Par défaut, le contenu est arrangé verticalement. Les valeurs possibles pour la propriété "direction" sont BoxDirection.VERTICAL et Box.Direction.HORIZONTAL. Box est la base de l'implémentation de Application, VBox, HBox, ControlBar, HDividedBox, VDividedBox, NavBar, Panel et TitleWindow.
• Canvas: Ce container est dédié au positionnement absolu (avec contraintes). Les children sont arrangés en utilisant les propriétés x et y, et les propriétés top, bottom, right, left, verticalCenter et horizontalCenter sont utilisées pour fixer les contraintes.
• ControlBar: Ce conteneur est utilisé pour fournir une région réservée au bas d'un conteneur Panel ou TitleWindow afin d'une placer des composants enfant. Ce conteneur arrange ses enfants de la même manière qu'une HBox.
• DividedBox: Ce conteneur arrange ses enfants de la même manière qu'une Box, sauf qu'il place un barre de division entre chaque enfant. Ce conteneur est idéal pour séparer des régions différentes d'une application en permettant à l'utilisateur de redimensionner ces régions en déplaçant la barre de division. Comme pour une Box, les enfants peuvent être arrangés de manière horizontale ou verticale.
• Form: Ce conteneur spécial est prévu pour présenter des formulaires. Il permet de positionner facilement les labels et les contrôles d'input utilisateur (TextInput, TextArea …).
• Grid: Ce conteneur permet de positionner des enfants selon par lignes/colonnes. Le comportement de ce composant est proche de celui d'une table HTML.
• HBox: Ce conteneur est dérivé de Box avec la propriété "direction" fixée à BoxDirection.HORIZONTAL.
• HDividedBox: Ce conteneur est dérivé de DividedBox avec la propriété "direction" fixée à BoxDirection.HORIZONTAL par défaut.
• Panel: Ce conteneur contient une bordure avec une région pour le titre. La partie du contenu se comporte comme une VBox. La propriété layout contrôle la manière par laquelle les children sont arrangés, la valeur par défaut est ContainerLayout.VERTICAL. Fixer la propriété layout en ABSOLUTE fait que ce container se comporte comme un Canvas. Fixer la valeur à HORIZONTAL et VERTICAL fait ce container se comporter comme une HBox ou une VBox respectivement.
• Tile: Ce conteneur arrange les children en grille, et par défaut, elle essaie de garder le nombre de ligne et de colonnes égal. Si les propriétés width ou height du conteneur sont spécifiées, le conteneur va essayer de combler l'espace disponible. Le conteneur Tile a une propriété "direction", qui par défaut est fixée à VERTICAL. Les valeurs possibles sont TileDirection.VERTICAL et TileDirection.HORIZONTAL.
• TitleWindow: Idéal pour les fenêtres pop-up, la TitleWindow hérite de Panel, avec en plus un bouton dans la barre de titre qui permet à l'utilisateur de fermer la fenêtre.
• VBox: Ce conteneur est dérivé de Box avec la propriété "direction" fixée à BoxDirection.VERTICAL.
• VDividedBox: Ce conteneur est dérivé de DividedBox avec la propriété "direction" fixée à BoxDirection.VERTICAL par défaut.