2010-03-18 7 views
4

Je suis en train de créer un composant personnalisé Flex en utilisant le framework de composants Flex:Flex - Composante sur mesure - Pourcentage largeur/hauteur

http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html.

Tous les bons composants vous permettent de définir leurs dimensions en utilisant des valeurs de pourcentage en utilisant:

MXML:

TextInput width = "100%"

ou

Actionscript lors de l'exécution:

textinp.percentWidth = 100;

Ma question est de savoir comment implémenter le pourcentage largeur/hauteur dans la méthode measure() de votre composant personnalisé? Plus précisément, ces pourcentages sont convertis en valeurs de pixels à un moment donné, comment cela se fait-il?

Répondre

6

La façon dont la mise en page Flex fonctionne consiste à laisser chaque composant disposer ses enfants selon la taille spécifiée par le parent. "Children" inclut les enfants habituels - getChildren(), numChildren - et aussi les composants qui composent les bordures, les poignées, etc., qui sont appelés "chrome" et font partie de getRawChildren().

La structure Flex effectue désormais deux boucles sur tous les composants (qui font en fait partie de l'arborescence d'affichage). La première est ascendante (les éléments imbriqués les plus profonds en premier) et appelle la méthode measure(). Il devrait calculer combien d'espace (largeur/hauteur) le composant prendrait s'il peut avoir autant d'espace qu'il le souhaite, sans limites (think: scrollbars) et le placer dans les propriétés measuredWidth et measuredHeight. Deuxièmement, il calcule combien d'espace il veut avoir comme un minimum absolu, mis en measureMinHeight/measuredMinWidth. Pour calculer ceci, l'épaisseur de la bordure, le chrome et les enfants normaux sont interrogés sur leurs tailles en utilisant getExplicitOrMeasuredHeight()/Width(), et additionnés ensemble. C'est pourquoi c'est la profondeur d'abord.

La deuxième boucle consiste à effectuer la mise en page réelle. Cela commence en haut de l'arbre, et updateDisplayList est appelée, avec des paramètres x/y indiquant au composant la taille qu'il a réellement. Sur la base de ces informations, le composant dira à ses enfants directs où ils devraient être (par rapport à leurs parents) et quelle devrait être leur taille - child.move (x, y) et child.setActualSize (w, h)

c'est en fait le conteneur parent qui prend en compte les tailles relatives. Votre composant déclare qu'il est idéal (taille minimale pour que tout puisse être affiché) et que les tailles minimales soient dans measure() et qu'il traite tout ce qu'il obtient dans son updateDisplayList(). Le composant parent prend l'espace disponible dont il dispose, s'assure que chaque composant a sa taille minimale et distribue ensuite le reste à tous les composants. Dans cette phase, il examinera les propriétés percentWidth/Height de ses enfants. Par conséquent, si vous souhaitez placer votre composant dans un conteneur Flex standard tel que HBox, vous n'avez rien de spécial à faire pour que les pourcentages puissent fonctionner.