La plupart des containers utilisent deux grands types de règles de positionnement: Box et Canvas. Ces règles définissent comment les conteneurs implémentent le positionnement des children en interne ainsi que leur tailles. Comprendre ces différentes règles vous permettra de comprendre les règles de layout Flex et de mettre en place des mise en page plus rapidement.
Ces règles sont exécutées quand les enfants d'un conteneur sont initialement instanciés, quand un enfant est ajouté ou supprimé, ou dès qu'un conteneur est redimensionné. Le seul cas ou cela n'arrive pas est le cas où la propriété autoLayout est fixée à false. Dans ce cas, les règles sont appliquées uniquement à l'initialisation et quand les enfants sont ajoutés/supprimés. Cette option est utile si vous voulez un composant fixe car cela peut sauver des ressources processeur.
Lorsque les règles sont exécutées, elles suivent deux grandes étapes. En premier, le conteneur mesure l'espace nécessaire à chaque enfant. Cela permet au container de décider combien de place il a besoin pour rentrer tous ses enfants. Pendant ce processus, si la propriété includeInLayout d'un enfant est fixée à false, l'enfant sera ignoré et ne sera pas pris en compte dans le positionnement. Ensuite, le conteneur place et redimensionne les enfants comme il le faut.
Les conteneurs de type Box
Les conteneurs HBox, VBox, HDividedBox, VDividedBox, ApplicationControlBar, et ControlBar basent leur règles de mise en page sur celles du conteneur Box. La mise en page de Box indique que chaque enfant occupe sa propre ligne ou colonne, suivant la direction de la règle. Les deux directions supportées sont horizontales et verticales. Tous ces conteneurs implémentent la propriété "direction", et la valeur par défaut de "direction" dépend du conteneur. Vous pouvez fixer la valeur de la propriété direction en utilisant les constantes BoxDirection.HORIZONTAL et BoxDirection.VERTICAL. Par défaut, la direction par défaut de Box est vertical, chaque enfant occupant sa propre ligne, et les enfants sont empilés les uns sur les autres.
Si la largeur d'un conteneur n'est pas spécifiée, le conteneur la détermine en identifiant l'enfant le plus large et en ajustant sa propre largeur pour pouvoir l'afficher sans clipping (découpage). Si une largeur est fixée, le conteneur va se fixer à cette valeur et si la largeur des objets enfants excèdent la valeur spécifiée, par défaut les objets seront clipped (une partie non visible) et une scrollbar sera affichée. Et de la même manière pour la hauteur.
Changer le nombre d'enfants ou leur hauteur/largeur à l'exécution va marquer le conteneur comme invalid, ce qui va faire que les règles de mise en page seront appliquées et les enfants seront automatiquement repositionnés/redimensionnés.
Pour réduire le nombre de redraw (dessin du composant), qui peut nuire au performance de l'application, Flex marque les composants qui ont besoin d'être redessinés comme "invalid".
Avec ce type de conteneurs, la taille du conteneur dépend de plusieurs facteurs:
- Si le container à une hauteur/largeur fixe, ces valeurs sont utilisées pour fixer la taille
- Si la taille est fixée plus petite que l'espace requis pour l'affichage des enfants, une scrollbar (barre de défilement) sera automatiquement affichée sauf si le paramètre scrollPolicy est fixé à ScrollPolicy.OFF
- Si aucune taille n'est précisée, le conteneur s'étend autant qu'il le faut dans l'espace disponible. S'il n'y a pas assez d'espace disponible, une scrollbar est affichée pour permettre à l'utilisateur d'accéder au contenu.
