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

Flex Item Renderer – Item Renderer utilisant des composants personnalisés MXML (Inline)

Bien que les item renderer de type Drop-In soient très simples à implédmenter, ils sont aussi limités dans leur utilisation en termes de configuration. Par exemple, dans l'exemple de l'article: Flex Item Renderer - Item Renderer utilisant les composants Flex standard (Drop-In), vous pouvez afficher une CheckBox dans la colonne d'une DataGrid Flex, mais vous ne pourrez pas changer les propriétés du composant utilisé comme item renderer.

Les ItemRenderer Inline sont mieux que les Drop-In Renderer adns le sens que vous pouvez configurez les paramètres du composant utilisé pour l'affichage. Par exemple, vous pouvez utiliser un inline item renderer pour fixer la propriété "enabled" de la CheckBox pour la désactiver  afin que l'utilisateur ne puisse pas cocher/décocher la CheckBox.

Les Item Renderer inline requièrent que vous leur spécifiez la valeur de "itemRenderer" en utilisant des blocs MXML imbriqués plutôt que des attributs. Vous devez ensuite insérer le tag mx:Component à l'intérieur du tag mx:itemrenderer pour créer votre composant utilisable comme itemRenderer.

L'exemple suivant spécifie une CheckBox, et désactive cette CheckBox pour que l'utilisateur ne puisse plus la cocher/décocher:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:VBox>
		<mx:DataGrid editable="false">
			<mx:columns>
				<mx:DataGridColumn headerText="Titre" dataField="title"/>
				<mx:DataGridColumn headerText="Artist" dataField="artist"/>
				<mx:DataGridColumn headerText="Dans les Favoris ?" dataField="inFavorites">
					<mx:itemRenderer>
						<mx:Component>
							<mx:CheckBox label="Favoris?" enabled="false"/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
			<mx:dataProvider>
				<mx:ArrayCollection>
					<mx:Array>
						<mx:Object songId="0" title="Astronaut" artist="David Byrne" inFavorites="true"/>
						<mx:Object songId="1" title="Rio" artist="Duran Duran"/>
						<mx:Object songId="2" title="Enjoy The Silence" artist="Depeche Mode"/>
						<mx:Object songId="3" title="Mesopotamia" artist="B-52s" inFavorites="true"/>
					</mx:Array>
				</mx:ArrayCollection>
			</mx:dataProvider>
		</mx:DataGrid>
	</mx:VBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Le tag mx:Component est un tag MXML puissant. Il crée un nouveau scopeà l'intérieur du document MXML. Ce qui veut dire que ses variables deviennent locales. Le code à l'intérieur d'un tag Component est essentiellement du MXML, et les règles applicables au MXML sont applicables au tag Component. Vous pouvez seulement avoir un noeud root, et à l'intérieur de ce noeud root, vous pouvez utiliser Style et Script, et tous les tags MXML standards utilisés dans un document MXML classique.

Puisque le tag mx:Component crée son propre scope, vous n'avez pas à vous soucier des conflits entre le document et ce qui est à l'intérieur du tag. Cependant, cela veut aussi dire que vous ne pouvez pas référencer directement de la data issue du document MXML principal.

Par exemple, le code suivant va provoquer une erreur de compilation :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
	<mx:Script>
		<![CDATA[
			private var maximumCount:uint = 5;
		]]>
	</mx:Script>

	<mx:List>
		<mx:itemRenderer>
			<mx:Component>
				<mx:NumericStepper maximum="{maximumCount}"/>
			</mx:Component>
		</mx:itemRenderer>
	</mx:List>
</mx:Application>

1120: Accès à la propriété non définie maximumCount.

Cette erreur se produit car maximumCount est défini dans le document MXML, mais il est mis en référence dans le composant Component, qui a un scope différent. Bien que le tag mx:Component soit puissant, il est recommandé pour l'utiliser dans des cas encore simple, comme l'exemple précédent où on définit un label et enabled. Si vous devez créer des composants plus sophistiqués, il est bien mieux de les définir dans de nouveaux composants MXML ou ActionScript (prochain article).

Notez que pour résoudre le problème de l'exemple précédent, vous pouvez utiliser la propriété outerDocument dans un tag Component pour référencer le document MXML contenant le tag Component. Vous pouvez ainsi référencer toute propriété public ou internal comme dans cet exemple:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
	<mx:Script>
		<![CDATA[
			internal var maximumCount:uint = 5;
		]]>
	</mx:Script>

	<mx:List>
		<mx:itemRenderer>
			<mx:Component>
				<mx:NumericStepper maximum="{outerDocument.maximumCount}"/>
			</mx:Component>
		</mx:itemRenderer>
	</mx:List>
</mx:Application>