Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Flex 4 en un jour - Le nouveau moteur de mise en page

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 09 décembre 2010

Cet article est une traduction d'un mini livre nommé Flex 4 in a Day de Mihai Corlan.

Adobe a donné son accord concernant la traduction de ce mini-livre.

Dans Flex 3, la mise en page était fortement couplée avec le conteneur à l'intérieur des contrôles. Chaque type de conteneur exposait un comportement de mise en page. Les composants partageant les mêmes fonctionnalités étaient dupliqués dans le but d'atteindre des comportements de mise en page différents. Ainsi, il était difficile de créer des composants travaillant avec des collections et présentant leurs enfants de différentes manières.

Dans Flex 4, cette problématique est résolue par la séparation de la mise en page et du composant. Les composants Spark définissent leur mise en page de façon déclarative. La mise en page peut supporter à la fois des composants Spark et Halo en plus des primitives graphiques FXG. La mise en page peut être modifiée à l'exécution.

Il ya quelques fonctionnalités supplémentaires à la disposition des développeurs:

  1. La logique de mise en page est définie dans une classe séparée qui hérite de la classe LayoutBase (la classe mère);
  2. L'interface ILayoutElement a été crée pour autoriser les classes de mise en page à gérer le conteneur auquel elles sont appliquées;
  3. Les conteneurs de données Spark possèdent une mise en page virtuelle héritée de la classe mère DataGroup. La virtualisation est destinée à minimiser les ressources et le temps de démarrage pour les conteneurs avec un grand nombre d'éléments. Quand vous utilisez la virtualisation, le calcul des dimensions du conteneur DataGroup est approximativement basé sur les dimensions de mise en page du premier élément de la propriété itemRendered ou sur les dimensions d'un élément “représentatif” des autres et spécifié via la propriété typicalItem.
  4. Pour les conteneurs Spark, l'ordre d'affichage est dissocié de l'ordre des enfants.

Conséquence directe de ces fonctionnalités, les mises en page supportent les transformations 2D et un défilement fluide pixel par pixel. Les développeurs peuvent aussi modifier les positions des éléments après la mise en page, sans pour autant l'altérer. En outre, des mises en page personnalisées peuvent être créées très facilement, y compris en utilisant des transformations 3D.

Les mises en page Spark prédéfinies

Flex propose plusieurs classes de mise en page prédéfinies qui peuvent être utilisées avec les conteneurs Spark. Les classes de mise en page sont définies dans le package spark.layout.

BasicLayout

La classe BasicLayout utilise le positionnement absolu. L'enfant peut être positionné soit en utilisant des coordonnées, soit en utilisant des contraintes.

Cette mise en page n'est pas supportée par les contrôles Spark de type liste. Il ne faut pas utiliser cette mise en page avec le contrôle Spark List ni l'une de ses sous-classes (comme ButtonBar, ComboBox, DropDownList ou TabBar). La classe BasicLayout ne supporte la mise en page virtuelle.

Voici un exemple d'utilisation de BasicLayout:

<Group>
	<layout>
		<BasicLayout/>
	</layout>
	<Label text="content" baseline="40"/>
</Group>

HorizontalLayout

La classe HorizontalLayout dispose ses enfants les uns à coté des autres, de gauche à droite, avec un espace optionnel entre eux et un espace optionnel autour d'eux.

Durant l'exécution de la méthode de calcul des dimensions (measure()), la taille par défaut du conteneur est calculé en cumulant les dimensions préférées des éléments et les espacements.

Voici un exemple d'utilisation de HorizontalLayout:

<s:List dataProvider="{objectsList}" itemRenderer="components.CustomerRendered" width="200">
	<s:layout>
		<s:HorizontalLayout clipAndEnableScrolling="true" />
	</s:layout>
</s:List>

TileLayout

La classe TileLayout dispose ses enfants en lignes et en colonnes, dans des cellules de dimensions égales. La classe TileLayout utilise un certain nombre de propriétés qui contrôlent l'orientation, le nombre, la taille, l'écart et la justification des colonnes et des lignes, ainsi que l'alignement des éléments dans les cellules.

Voici un exemple d'utilisation de TileLayout:

<s:List dataProvider="{objectsList}" itemRenderer="components.CustomerRendered" width="200" height="50">
	<s:layout>
		<s:TileLayout />
	</s:layout>
</s:List>

VerticalLayout

La classe VerticalLayout dispose ses enfants les uns sous les autres, de haut en bas, avec un espace optionnel entre eux et un espace optionnel autour d'eux.

Durant l'exécution de la méthode de calcul des dimensions (measure()), la taille par défaut du conteneur est calculé en cumulant les dimensions préférées des éléments et les espacements.

Voici un exemple d'utilisation de VerticalLayout:

<s:List dataProvider="{objectsList}" itemRenderer="components.CustomerRendered">
	<s:layout>
		<s:VerticalLayout gap="15" />
	</s:layout>
</s:List>

Création d'une mise en page Spark personnalisée

Afin de créer une mise en page Spark personnalisée, on doit hériter de la classe de base LayoutBase et surcharger au moins une méthode - la méthode updateDisplayList.

Quand une mise en page est assignée à un conteneur, la propriété target de la mise en page reçoit une référence au conteneur. La mise en page personnalisée peut décider sur le positionnement et la taille des éléments à l'intérieur du conteneur. Pour un tel scénario, une attention particulière doit être accordée au type du conteneur. Si le conteneur supporte la virtualisation, la recherche d'un élément dans le conteneur est réalisable grâce à la méthode getVirtualElementAt de l'objet cible tandis que pour les conteneurs ne supportant pas la virtualisation, la méthode getElementAt doit être utilisée.

Le redimensionnement et positionnement des éléments est assez simple grâce à l'utilisation de l'API ILayoutElement.

public class Horizontal3DLayout extends LayoutBase
{
	override public function updateDisplayList(width:Number, height:Number):void
	{
		var numElements:int = target.numElements;
		var targetWidth:Number = target.width;
		var middleHeight:Number = target.height / 2;
		for (var i : int = 0; i < numElements; i++)
		{
			var element:ILayoutElement = target.getVirtualElementAt(i);
			element.setLayoutBoundsSize(NaN, NaN, false);
			var elWidth:Number = NaN;
			var elHeight:Number = NaN;
			if (i < numElements/2)
			{
				element.setLayoutMatrix(new Matrix(1.6, 0, 0, 1.6, 0, 0), true);
				elWidth = element.getLayoutBoundsWidth(true);
				elHeight = element.getLayoutBoundsHeight(false);
				element.setLayoutBoundsPosition(i * elWidth , middleHeight + elHeight, true);
			}
			else
			{
				element.setLayoutMatrix(new Matrix(0.9, 0, 0, 0.9, 0, 0), true);
				elWidth = element.getLayoutBoundsWidth(true);
				elHeight = element.getLayoutBoundsHeight(false);
				element.setLayoutBoundsPosition(targetWidth - i * elWidth , middleHeight - elHeight, true);
			}
		}
	}
}

En savoir plus

La documentation en ligne est un bon endroit pour commencer, spécialement les références dédiées aux moteurs de rendu, skins, LayoutBase, ILayoutElement, GroupBase, DataGroup et la virtualisation. Voyez aussi les ressources suivantes:







Page précédente | Sommaire | Page suivante