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

Flex Item Renderer – Utiliser la propriété itemEditor pour la mise à jour

Quand les composants sont éditables, ils utilisent des champs texte standard pour l'édition des valeurs. Par exemple, le code suivant crée une mx:List éditable simplement en fixant la propriété "editable" à true. Mais l'utilisateur peut seulement éditer les valeurs avec un champ text par défaut quand il clique sur un item:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:List editable="true" width="200" labelField="rating">
		<mx:dataProvider>
			<mx:ArrayCollection>
				<mx:Array>
					<mx:Object songId="0" title="Astronaut" artist="David Byrne" rating="0"/>
					<mx:Object songId="1" title="Rio" artist="Duran Duran" rating="2"/>
					<mx:Object songId="2" title="Enjoy The Silence" artist="Depeche Mode" rating="1"/>
					<mx:Object songId="3" title="Mesopotamia" artist="B-52s" inFavorites="true" rating="4"/>
				</mx:Array>
			</mx:ArrayCollection>
		</mx:dataProvider>
	</mx:List>
</mx:Application>

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

Vous pouvez personnaliser la manière par laquelle un utilisateur peut éditer une valeur en utilisant un item editor. Pour assigner un "item editor", il faut utiliser la propriété itemEditor, comme vous le faîtes pour la propriété itemRenderer. Vous devez aussi spécifier une valeur à la propriété editorDataField pour dire au composant quel propriété de l'item renderer doit être liée au data provider. Dans l'exemple suivant, on a modifié le tag mx:List pour qu'il utilise un Numeric Stepper plutôt qu'un champ texte lorsqu'on passe en mode édition. Notez que l'on spécifie "value" comme editorDataField car "value" est le nom de la propriété du NumericStepper qui doit être liée au dataProvider.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:List editable="true" width="200" labelField="rating"
		itemEditor="mx.controls.NumericStepper" editorDataField="value">
		<mx:dataProvider>
			<mx:ArrayCollection>
				<mx:Array>
					<mx:Object songId="0" title="Astronaut" artist="David Byrne" rating="0"/>
					<mx:Object songId="1" title="Rio" artist="Duran Duran" rating="2"/>
					<mx:Object songId="2" title="Enjoy The Silence" artist="Depeche Mode" rating="1"/>
					<mx:Object songId="3" title="Mesopotamia" artist="B-52s" inFavorites="true" rating="4"/>
				</mx:Array>
			</mx:ArrayCollection>
		</mx:dataProvider>
	</mx:List>
</mx:Application>

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

Maintenant, vous pourriez vous demander pourquoi quand on travaille avec un item editor, on ne pourrait pas simplement utiliser un item renderer. Par exemple, il est possible de faire une liste de NumberStepper comme itemRenderer dans l'exemple précédent. L'utilisateur pourrait mettre à jour la valeur du NumericStepper utilisé comme itemRenderer. Cependant, le fait est qu'un itemRenderer fait simplement le rendu de la data. Ils ne créent pas de data binding avec le dataProvider. C'est pourquoi, changer la valeur d'un NumericStepper utilisé comme itemRenderer ne va pas affecter le data provider, alors que le data provider sera bien mis à jour si on l'utilise en tant qu' itemEditor.

Cependant, vous pouvez indiquer à un composant d'utiliser l'itemRenderer comme un itemEditor en fixant la propriété rendererIsEditor à true:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:List editable="true" width="200" labelField="rating"
		itemRenderer="mx.controls.NumericStepper" rendererIsEditor="true" editorDataField="value">
		<mx:dataProvider>
			<mx:ArrayCollection>
				<mx:Array>
					<mx:Object songId="0" title="Astronaut" artist="David Byrne" rating="0"/>
					<mx:Object songId="1" title="Rio" artist="Duran Duran" rating="2"/>
					<mx:Object songId="2" title="Enjoy The Silence" artist="Depeche Mode" rating="1"/>
					<mx:Object songId="3" title="Mesopotamia" artist="B-52s" inFavorites="true" rating="4"/>
				</mx:Array>
			</mx:ArrayCollection>
		</mx:dataProvider>
	</mx:List>
</mx:Application>

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

Tous les composants que vous utilisez comme itemRenderer peuvent être utilisés comme itemEditor. Il faut seulement que le composant ait un getter/setter indiqué comme Bindable, et vous devez spécifier la valeur de editorDataField pour le composant utilisant l'itemEditor. Dans l'exemple suivant, le getter/setter est fait sur la propriété "data", c'est donc elle qu'il faut mettre en tant qu' editorDataField.

Voici la modification de l'exemple qui vous avez pu trouver dans l'article sur les itemRenderer en composants MXML:

Composant Rating.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
	import mx.containers.Canvas;

	private var _data:Object;

	[Bindable]
	override public function set data(value:Object):void{
		// on conserve la valeur dans une variable private
		// pour pouvoir la renvoyer dans le get
		_data = value;
		draw();
	}

	override public function get data():Object{
		return _data;
	}

	public function onClick(event:MouseEvent):void{
		// on stocke la valeur du composant cliqué dans l'objet _data, à la propriété rating
		_data.rating = uint(event.currentTarget.name);
		// on met à jour le renderer
		draw();
	}

	private function draw():void{
		// on prend la valeur de rating de l'Object value corrsespondant à la ligne
		var rating:uint = uint(_data.rating);
		// on enlève les composants qui pourraient être la avant
		// dans la cas d'un refresh par exemple
		removeAllChildren();
		var canvas:Canvas;
		for (var i:uint = 0; i < 5 ; i++){
			canvas = new Canvas;
			// définition de la couleur du canvas
			canvas.setStyle("backgroundColor", i< rating ? 0xFF0000 : 0x0000FF);
			canvas.width = 10;
			canvas.height = 10;
			canvas.name = String (i + 1);
			canvas.addEventListener(MouseEvent.CLICK, onClick);
			addChild(canvas);
		}
	}
	]]>
	</mx:Script>
</mx:HBox>

Et voici l'application Flex qui utilise maintenant Rating comme itemEditor. Cliquez sur les carrés pour modifier la valeur du rating (qui sera aussi modifiée dans le data provider:

<?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="Artiste" dataField="artist"/>
				<mx:DataGridColumn headerText="Vote" dataField="rating"
								itemRenderer="Rating" rendererIsEditor="true"
								editorDataField="data"/>
			</mx:columns>
			<mx:dataProvider>
				<mx:ArrayCollection>
					<mx:Array>
						<mx:Object songId="0" title="Astronaut" artist="David Byrne" inFavorites="true" rating="5"/>
						<mx:Object songId="1" title="Rio" artist="Duran Duran" rating="3"/>
						<mx:Object songId="2" title="Enjoy The Silence" artist="Depeche Mode" rating="4"/>
						<mx:Object songId="3" title="Mesopotamia" artist="B-52s" inFavorites="true" rating="5"/>
					</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