PhilFlash

• Accueil
• Flash
• Flex
• Liens
• Actualités

Flex 4.5 Mobile - Sauver/Restaurer la position dans une List

Traduire/Translate (by Google) : English - Espagnol - Deutsch

listSaveRestorePosition.fxp (projet Flex 4.5)

En Flex 4.5, vous pouvez utiliser des listes avec une vue Détail pour afficher la vue détaillée d'un élément.

Mais, lorsque vous revenez à la liste, vous allez "perdre" l'élément sélectionné.

En effet, dans Flex mobile, une View est construite à chaque affichage de la vue. Ce mécanisme par défaut repositionne donc la liste sur les premiers éléments visibles de la liste (et pas sur l'élément que vous aviez préalablement sélectionné).

Ce problème est connu. Par exemple, sur le blog de Flexponential, vous trouverez un article permettant de restaurer la position des barres de scroll. Mais, si vous modifier le mode landscape/portrait de votre téléphone/tablette, ceci ne fonctionne plus.

Voici une méthode qui va permettre de visualiser l'élément sélectionné en première position.

La méthode s'inspire de l'article de Flexponential. Lors de la création d'une nouvelle vue, la vue précédente est détruite. Cependant, la propriété data n'est pas détruite. Elle va être utilisée pour sauver des informations.

On va donc utiliser cette propriété data pour sauver l'indice de l'élément sélectionné avec la méthode viewDeactivate. Lors du retour à la liste, on va utiliser la méthode creationComplete de la vue pour restaurer l'élément sélectionné.

On pourrait utiliser ensureIndexIsVisible pour rendre visible un élément. Mais généralement, celui-ci se trouve en fin de liste. Le code suivant positionne l'élément sélectionné au début de la liste.

Ce code fonctionne pour des listes verticales.

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; GeSHi has a deprecated constructor in /home/inway/www/philflash/iwgeshi/geshi.php on line 259

Deprecated: Function create_function() is deprecated in /home/inway/www/philflash/iwgeshi/geshi.php on line 4716

Source code
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="List Position"
		initialize="onInitialize()"
		viewDeactivate="savePosition()"
		creationComplete="restorePosition()"
		>
	<fx:Declarations>
		<s:ArrayCollection id="dataAC" />
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import model.Customer;
			import model.IwModel;
			import mx.effects.AnimateProperty;
			import spark.components.DataGroup;
			import spark.events.IndexChangeEvent;
 
			private function onInitialize():void
			{
				dataAC.source = IwModel.instance.customers.source;
			}
			protected function list_changeHandler(event:IndexChangeEvent):void
			{
				navigator.pushView(DetailView, list.selectedItem);
			}
 
			private function savePosition():void 
			{
				if (data == null) data = new Object();
				data.selectedIndex = list.selectedIndex;
			}
			private function restorePosition():void 
			{
				if (data == null) return;
				var selectedIndex:int = data.selectedIndex as int;
				if (selectedIndex >= 0) 
				{
					// use callLater for a bug of List
					// For no animation, use callLater(scrollToIndex, [selectedIndex,0]);
					callLater(scrollToIndex, [selectedIndex]);
				}
			}
 
			private function scrollToIndex(index:int, animationDuration:int = 500):void 
			{
				if (!list.layout) return;
				var dataGroup:DataGroup = list.dataGroup;
				if (index != -1)
				{
					var spDelta:Point = list.dataGroup.layout.getScrollPositionDeltaToElement(index);
					if (spDelta == null)
					{
						// top of list
						var bounds:Rectangle = dataGroup.layout.getElementBounds(index);
						spDelta = new Point(bounds.x, bounds.y);
						if (dataGroup.contentHeight < dataGroup.scrollRect.height)
						{
							spDelta.y = 0;
						}
						else if (spDelta.y > (dataGroup.contentHeight - dataGroup.scrollRect.height))
						{
							spDelta.y = dataGroup.contentHeight - dataGroup.scrollRect.height;
						}
					}
					else if ((spDelta != null) && (spDelta.y != 0)) 
					{			
						if (spDelta.y > 0 &&  (spDelta.y + dataGroup.scrollRect.height - dataGroup.layout.getElementBounds(index).height) <= dataGroup.contentHeight)
						{
							var newY:Number = spDelta.y + dataGroup.scrollRect.height - dataGroup.layout.getElementBounds(index).height;
							// bottom of list
							if (newY > (dataGroup.contentHeight - dataGroup.scrollRect.height))
							{
								newY = dataGroup.contentHeight - dataGroup.scrollRect.height;
							}
							spDelta.y = newY;
						}
					}
					if (animationDuration <= 0)
					{
						dataGroup.verticalScrollPosition = dataGroup.verticalScrollPosition + spDelta.y;
					}
					else
					{
						// Animate the verticalScrollPosition value
						var animation:AnimateProperty = new AnimateProperty(dataGroup);
						animation.property = "verticalScrollPosition";
						animation.duration = animationDuration;
						animation.toValue = dataGroup.verticalScrollPosition + spDelta.y;
						animation.play();
					}						
				}
			}
		]]>
	</fx:Script>
	<s:List id="list" width="100%" height="100%" dataProvider="{dataAC}" change="list_changeHandler(event)">
		<s:itemRenderer>
			<fx:Component>
				<s:IconItemRenderer labelFunction="getLabel" messageFunction="getMessage" opaqueBackground="0xffffff">
					<fx:Script>					
						<![CDATA[
							import model.Customer;
							protected function getLabel(o:Customer):String
							{
								return o.id + " " + o.firstname + " " + o.lastname;
							}
							protected function getMessage(o:Customer):String
							{
								return o.city;
							}
						]]>
					</fx:Script>
				</s:IconItemRenderer>
			</fx:Component>
		</s:itemRenderer>
	</s:List>
</s:View>

listSaveRestorePosition.fxp (projet Flex 4.5)