Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les conteneurs Spark DataGroup et Spark SkinnableDataContainer

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 juin 2011

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Présentation

Les conteneurs Spark DataGroup et Spark SkinnableDataContainer peuvent avoir comme enfants, n'importe quels composants qui implémentent l'interface IVisualElement et qui sont des sous-classes de la classe DisplayObject. Cependant, ces conteneurs sont principalement utilisés pour contenir comme enfants, des éléments de données. Les éléments de données peuvent être de simples chaines de caractères et des valeurs numériques, ou des éléments de données plus complexes comme des objets ou des noeuds XML.

Un rendu d'élément défini la représentation visuelle de l'élément de donnée dans le conteneur. Le rendu d'élément converti l'élément de données dans un format qui peut-être affiché par le conteneur. Vous pouvez utiliser un rendu d'élément sur les conteneurs DataGroup ou SkinnableDataContainer.

Les différences principales entre les conteneurs DataGroup et SkinnableDataContainer sont:

  • SkinnableDataContainer peut-être personnalisé graphiquement. Le conteneur DataGroup est conçu pour sa simplicité et sa mise en œuvre minimale, et il n'est pas personnalisable graphiquement.
  • DataGroup peut-être un enfant du contrôle Scroller pour supporter les barres de défilement. Pour ajouter des barres de défilement à un conteneur SkinnableDataContainer, il faut créer une skin.

La classe par défaut de mise en page du conteneur DataGroup est BasicLayout. La classe par défaut de mise en page du conteneur SkinnableDataContainer est VerticalLayout. Pour plus d'informations, regardez |http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/.

Création d'un conteneur Spark DataGroup et d'un conteneur Spark SkinnableDataContainer

Vous utilisez les balise <s:DataGroup> et <s:SkinnableDataContainer> pour définir des conteneurs DataGroup et SkinnableDataContainer . Spécifiez une valeur à la propriété id si vous souhaitez utiliser votre contrôle ailleurs dans une balise MXML ou dans un bloc ActionScript.

Les conteneurs DataGroup et SkinnableDataContainer sont des exemples de composants de données. Des composants de données requièrent des données pour l'affichage et les interactions utilisateurs. Pour fournir des données, vous devez assigner une collection, qui implémente l'interface Ilist, telle que des objets ArrayList, ArrayCollection, ou XMLListCollection, à la propriété dataProvider du conteneur. Pour plus d'informations sur les fournisseurs de données, regardez Data providers and collections.

La propriété dataProvider prend un tableau d'enfants comme le montre l'exemple suivant:

<s:DataGroup itemRenderer=...>  
	<s:dataProvider>  
		<mx:ArrayList> 
			<fx:String>Dave Jones</fx:String> 
			<fx:String>Mary Davis</fx:String> 
			<fx:String>Debbie Cooper</fx:String> 
		</mx:ArrayList>  
	</s:dataProvider>  
</s:DataGroup>

Si vous utilisez des composants Flex comme enfants du conteneur, vous devez les spécifier comme le montre l'exemple suivant:

<s:DataGroup itemRenderer=...>  
	<s:dataProvider>  
		<mx:ArrayList> 
			<s:Button/> 
			<s:Button/> 
			<s:Button/> 
		</mx:ArrayList>  
	</s:dataProvider>  
</s:DataGroup>

Parce que dataProvider est la propriété par défaut des containers DataGroup et SkinnableDataContainer, vous n'avez pas à spécifier une balise <s:dataProvider>. Par conséquent, vous pouvez écrire l'exemple donné ci-dessous:

<s:DataGroup itemRenderer=...> 
	<mx:ArrayList> 
		<fx:String>Dave Jones</fx:String> 
		<fx:String>Mary Davis</fx:String> 
		<fx:String>Debbie Cooper</fx:String> 
	</mx:ArrayList> 
</s:DataGroup>

Vous pouvez mélanger différents types de données dans le conteneur, ou mélanger des types de données et des composants Flex. Par exemple, vous pouvez mélanger des données de type String, Object et XML dans le même conteneur. Cependant, vous devez définir une fonction de rendu d'élément pour appliquer le rendu correct de l'enfant. Pour plus d'informations, regardez Using an item renderer function with a Spark container.

Vous pouvez personnaliser graphiquement le conteneur SkinnableDataContainer de la même façon que pour le conteneur SkinnableContainer. Pour un exemple de personnalisation, regardez Les conteneurs Spark Group et Spark SkinnableContainer.

Utilisation d'un rendu d'élément par défaut avec un conteneur Spark

Les conteneurs DataGroup et SkinnableDataContainer requièrent un rendu d'élément pour dessiner chaque conteneur enfant à l'écran. Par défaut, les conteneurs DataGroup et SkinnableDataContainer ne définissent pas de rendu d'élément. Vous pouvez configurer les conteneurs pour utiliser les rendus d'éléments fournis avec Flex, ou définir vos propres rendus d'éléments.

Flex propose deux rendus d'éléments:

  • spark.skins.spark.DefaultItemRenderer Convertit les données de l'élément en une seule chaîne de caractères pour un affichage dans un contrôle Spark Label. Il est utile lors de l'affichage de données scalaires, comme une chaîne ou un nombre, qui peuvent être facilement convertie en String.
  • spark.skins.spark.DefaultComplexItemRenderer Affiche un composant Flex dans un conteneur Group. Chaque composant est englobé dans son propre conteneur Group. Par conséquent, c'est très utile lorsque les enfants du conteneur sont des éléments visuels, tels que les composants Flex.

L'exemple suivant utilise un rendu par défaut, DefaultItemRenderer, avec un conteneur DataGroup:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkDataGroupContainerDefaultRenderer.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:s="library://ns.adobe.com/flex/spark" width="150" height="150">
 
	<s:DataGroup itemRenderer="spark.skins.spark.DefaultItemRenderer"> 
		<s:layout>
			<s:VerticalLayout/>
		</s:layout> 
		<mx:ArrayList>
			<fx:String>Dave Jones</fx:String>
			<fx:String>Mary Davis</fx:String>
			<fx:String>Debbie Cooper</fx:String>
		</mx:ArrayList>
	</s:DataGroup> 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Chaque élément de donnée du conteneur est une chaîne de caractères. Comme vous utilisez la classe DefaultItemRenderer, chaque chaîne apparaît dans un contrôle Label à l'intérieur du conteneur.

Si le type de données est de type Object ou s'il s'agit d'un type de données qui n'est pas facilement convertible en chaîne de caractères, alors vous devez le convertir en une chaîne, ou définir un rendu d'élément personnalisé pour l'afficher. Pour plus d'informations, regardez Passing data to a Spark item renderer.

L'exemple suivant montre un conteneur DataGroup ou tous ses enfants sont des composants Flex. La classe DataGroup utilise la classe DefaultComplexItemRenderer pour afficher ses enfants:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkDataGroupContainerSimpleVisual.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:s="library://ns.adobe.com/flex/spark" width="150" height="150">
 
	<s:DataGroup itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"> 
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<mx:ArrayList>
			<s:Button/>
			<s:Button/>
			<s:Button/>
			<s:Button/>
		</mx:ArrayList>           
	</s:DataGroup> 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Comme vous utilisez la classe DefaultComplexItemRenderer avec le conteneur, tous les contrôles Button apparaissent dans le conteneur en étant imbriqué dans leur propre conteneur Group. En englobant chaque contrôle dans un conteneur Group, le rendu d'élément supporte la mise en surbrillance pour les enfants lors de la sélection individuelle. Cependant, si vous ne souhaitez pas que les contrôles apparaissent dans leur propre conteneur Group, définissez la propriété itemRenderer sur null, comme indiqué ci-dessous:

<s:DataGroup itemRenderer="{null}">

Note: Si vous n'affichez que des éléments visuels dans un conteneur DataGroup ou SkinnableDataContainer, vous devriez plutôt utiliser les conteneurs Group ou SkinnableContainer.

Vous pourriez être en mesure de créer votre application en utilisant seulement les classes DefaultItemRenderer et DefaultComplexItemRenderer. Cependant, vous définissez généralement un rendu d'élément personnalisé si vos objets de données ne sont pas des valeurs simples, ou si vous voulez plus de contrôle sur l'apparence des enfants du conteneur. Pour plus d'informations sur la création d'un rendu d'élément personnalisé, regardez Define a custom Spark item renderer.

Ajout et suppression d'enfants à l'exécution

Pour modifier les enfants des conteneurs DataGroup et SkinnableDataContainer à l'exécution, vous devez modifier la propriété dataProvider. L'exemple suivant utilise des écouteurs d'événements pour ajouter ou supprimer des enfants d'un conteneur en appelant les méthodes addItem() et removeItemAt() sur la propriété dataProvider.

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkDataGroupContainerAddRemoveChild.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:s="library://ns.adobe.com/flex/spark" width="150" height="200">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
 
	<fx:Script>
		<![CDATA[
 
			private function addDGChild():void {
				var newChild:String = "new child";
				myDG.dataProvider.addItem(newChild);
 
				addDG.enabled = false;
				removeDG.enabled = true;
			}
 
			private function removeDGChild():void {
				myDG.dataProvider.removeItemAt(3);
 
				addDG.enabled = true;
				removeDG.enabled = false;
			}
		]]>
	</fx:Script>
 
	<s:DataGroup id="myDG" 
				 itemRenderer="spark.skins.spark.DefaultItemRenderer"> 
		<s:layout>
			<s:VerticalLayout/>
		</s:layout> 
		<mx:ArrayList>
			<fx:String>Dave Jones</fx:String>
			<fx:String>Mary Davis</fx:String>
			<fx:String>Debbie Cooper</fx:String>
		</mx:ArrayList>
	</s:DataGroup>
 
	<s:Button id="addDG" label="Add Child" 
			  click="addDGChild();"/> 
	<s:Button id="removeDG" label="Remove Child"
			  enabled="false" 
			  click="removeDGChild();"/> 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour plus d'informations sur les fournisseurs de données, regardez Data providers and collections.

Utilisation de la virtualisation avec les conteneurs Spark DataGroup et Spark SkinnableDataContainer

Un conteneur DataGroup ou SkinnableDataContainer peut représenter n'importe quelle nombre d'enfants. Cependant, chaque enfant requiert une instance d'un rendu d'élément. Si le conteneur a beaucoup d'enfants, vous remarquerez peut-être une dégradation des performances lors de l'ajout d'autres enfants dans le conteneur. Au lieu de créer un rendu d'élément pour chaque enfant, vous pouvez configurer le conteneur pour qu'il utilise une mise en page virtuelle. Avec une mise en page virtuelle, le conteneur réutilise les rendus d'éléments ainsi il ne les crée que pour ses enfants visibles. Quand un enfant est déplacé hors de l'écran, en faisant défiler le conteneur, un nouvel enfant en cours de défilement sur ​​l'écran peut réutiliser son rendu d'élément.

Pour configurer un conteneur afin qu'il utilise une mise en page virtuelle, définissez la propriété useVirtualLayout, de la mise en page associée au conteneur, sur true. Seuls les conteneurs DataGroup ou SkinnableDataContainer avec les mises en page VerticalLayout, HorizontalLayout, et TileLayout supportent la mise en page virtuelle.

Note: Si vous définissez une itemRendererFunction pour déterminer le rendu d'élément pour chaque élément de donnée, Flex ne réutilisera pas les rendus d'éléments. La fonction itemRendererFunction doit examiner chaque élément de donnée et créer les rendus d'éléments nécessaires pour les types de données spécifiques. Pour plus d'informations, regardez Creating a recyclable item renderer for virtual layout.

Il y a quelques différences entre la façon dont travaille une classe de mise en page lorsque la mise en page virtuelle est activée et lorsqu'elle ne l'est pas:

Je ne savais pas comment traduire le passage ci-dessous donc je l'ai laissé à son état original. N'hésitez pas à le traduire.
  • A layout with virtual layout enabled does not support the layout’s major axis percent size property. This axis corresponds to the percentHeight property for the VerticalLayout class, and the percentWidth property for the HorizontalLayout class.
  • Un container utilisant un mise en page virtuelle contenant peu d'enfants mais avec des différences de tailles importantes, peut avoir une dégradation de performance lors du défilement en utilisant la vignette de la barre de défilement. Par contre, cette dégradation de performance n'apparaît pas si on utilise les curseurs de défilement ou si on clique directement sur la piste. La réactivité augmente lorsque les variations de tailles diminues ou lorsque le nombre d'enfants augmente.

Utilisez la mise en page virtuelle quand le coût de création ou de dimensionnement d'un DataGroup est excessif en raison du nombre d'éléments de données ou de la complexité des rendus d'élément.

Pour plus d'informations sur la création d'un rendu d'élément personnalisé, regardez Define a custom Spark item renderer.