Adobe Flex Tutorial - Adobe Flex Tutorial

4nov/0915

Composant Flex – Interface de Pagination générique (exemple)

Il y a quelques semaines, je présentais sur Adobe Flex Tutorial un composant Flex nommé Paginator qui était une interface de pagination générique pour vos applications. Pour rappel, la pagination sert à présenter la donnée par bouts (pages) afin de ne pas noyer l'utilisateur. Dans un commentaire, CapoeiraDance demandait à voir un exemple d'application de ce composant. Voici donc un exemple que j'ai concocté moi-même.

Dans cet exemple, on a une donnée sur les états américains avec quelques valeurs. J'ai choisi de n'afficher que 8 éléments pas page pour montrer le fonctionnement de l'interface de pagination. La vraie pagination (au niveau de la data) se fait par une "filterFunction" sur le dataProvider (ArrayCollection). Ainsi, on va regarder l'index de l'item dans la donnée pour savoir s'il est dans la page courante. Le code n'est sûrement pas optimal mais cela donne une idée.

Attention, pour indiquer le nombre total d'éléments au paginator, on utilise bien la propriété "length" de la "source" de l'ArrayCollection et pas la "length" de l'ArrayCollection. En effet, si on utilise directement statesData.length, les résultats seront erronés car la fonction de filtre va modifier cette longueur.

J'aurai pu être chauvin et utiliser la DataFilterLib pour créer cette pagination mais gardons les choses simples pour l'instant .

Un peu de code pour commencer

 [Bindable]
  private var statesData:ArrayCollection = new ArrayCollection([...]);

  ...

  // variables utilisées par la fonction de filtre
  private var _startIdx:int = 0;
  private var _endIdx:int = 1000;

  private function init():void{
	// on donne une fonction de filtre à la donnée pour n'afficher que les résultats courants
	statesData.filterFunction = paginateFilterFunction;
	statesData.refresh();
  }

  private function pageChangeHandler(e:PaginateEvent):void{
	// affichage du nombre de résultats courant
	var page:int = e.index;

	var startIndex:int = (page * e.itemsPerPage) + 1;
	var endIndex:int = Math.min((startIndex + e.itemsPerPage -1), e.itemsTotal);
	_startIdx = startIndex - 1;
	_endIdx = endIndex;

	txt.text = "Results: " + String(startIndex) + " - " + String(endIndex) + " of " + e.itemsTotal;
	// filtrage de la donnée par page
	statesData.refresh();
  }

  private function paginateFilterFunction(item:Object):Boolean{
	var itemIdx:int = statesData.getItemIndex(item);
	return (itemIdx >= _startIdx && itemIdx < _endIdx) || itemIdx == statesData.source.length;
  }

  ...

  <local:PageSelector id="paginator"
					  itemsPerPage="{8}"
					  rangeCount="6"
					  itemsTotal="{statesData.source.length}"
					  selectedIndex="0"
					  pageChange="pageChangeHandler(event)" />

L'application en ligne

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

This movie requires Flash Player 11

Remplis sous: DataGrid, Exemple 15 Commentaires

4nov/094

DataFilterLib – Utilisation des jokers /wildcards sur les filtres (v1.0.2)

La DataFilterLib voit aujourd'hui l'arrivée des jokers (wildcards) pour le paramétrage des filtres. Après avoir voulu utiliser la librairie que j'ai crée dans une véritable application professionnelle, j'ai vite compris que cette fonctionnalité était indispensable afin de pouvoir correctement filtrer sa donnée à l'aide d'un composant de choix ComboBox.

Prenons l'exemple d'un choix de type d'équipement. Dans notre donnée, on pourrait avoir différents types:

"home"
"auto"
"computers"
"electro"

On stocke ces éléments dans un ArrayCollection que l'on affiche dans une DataGrid. Pour une meilleure expérience utilisateur, vous laissez votre utilisateur filtrer la donnée affichée suivant le type. Ainsi, s'il choisit "electro" dans une liste de choix, il n'aura que les équipements électriques. Vous pouvez facilement réaliser cela avec les filtres de base qui étaient présents dans la DataFilterLib (voir les exemples).

Seulement, une fois que votre une fois que votre utilisateur a choisi un élément dans la ComboBox, il ne peut plus revenir à la vue initiale avec tous les éléments. L'idée est donc de rajouter un élément à votre liste appelé "Tous les types", que l'utilisateur pourra sélectionner pour ne plus filtrer selon le type. On aura donc dans notre liste:

"Tous les types"
"home"
"auto"
"computers"
"electro"

Vous êtes maintenant face à un problème. Si l'utilisateur choisit "Tous les types", le Binding fait que on va filtrer tous les éléments dont le type est "Tous les types", ce qui ne retournera aucun élément. Dans ce cas, la valeur "Tous les types" est notre joker (wildcard).

Dans la version 1.0.2, vous verrez donc l'arrivée d'une propriété "filterJokers" sur la classe "DataFilterParameters". Celle-ci prend soit une valeur, soit un tableau de valeurs. Le principe est celui exposé au dessus. Si on essaie de filtrer selon une valeur "joker", on ne filtre pas l'élément.

L'implémentation des filterJokers dans le code

<filter:DataFilterSet id="filterSet" data="{productData}">
	<filter:dataFilterParameters>
	  <filter:DataFilterParameters id="tstMultiValueParameter"
				filterType="{DataFilterType.SINGLE_VALUE}"
				filterKeys="productType"
				filterOperator="{DataFilterSingleValueOperator.EQUALS_TO}"
				filterValues="{typeChooserCB.selectedItem}"
				filterJokers="Any Type"/>
	</filter:dataFilterParameters>
</filter:DataFilterSet>

...

<mx:ComboBox id="typeChooserCB">
  <mx:dataProvider>
	<mx:Array>
	  <mx:String>Any Type</mx:String>
	  <mx:String>home</mx:String>
	  <mx:String>computers</mx:String>
	  <mx:String>auto</mx:String>
	  <mx:String>electro</mx:String>
	</mx:Array>
  </mx:dataProvider>
</mx:ComboBox>

Application en ligne (onglet Using Jokers)

Voici un petit exemple d'application. Si l'onglet Using Jokers n'est pas présent dans l'application, videz votre cache navigateur

This movie requires Flash Player 11

Remplis sous: ComboBox, DataFilterLib, DataGrid 4 Commentaires

4nov/097

Flex Builder 3 et SVN – Installer Subversive sur Flex Builder

Dans le tutorial précédent, on a vu comment installer Subclipse sous Flex Builder 3. On va voir ici comment installer un autre client SVN, plus puissant et pratique selon moi que j'utilise en environnement professionnel, Subversive.

Installer Subversive sur Flex Builder 3 (Eclipse 3.3)

Installation de JDT

Avant d'installer Subversive, vous devrez télécharger et installer JDT. Comme pour Subclipse, démarrer Flex Builder puis dans le menu Help > Software Updates > Find And install:

subversion-1 Cliquez ensuite sur "New Remote Site".

Si vous essayez d'installer directement Subversive, vous aurez un message d'erreur:

Subversive SVN JDT Ignore Extensions (Optional) (Incubation) (0.7.8.I20091023-1300) requires plug-in "org.eclipse.jdt.core"

Vous devez installer l'extension JDT avant d'installer Subversive. Dans la fenêtre Find And Install, choisissez "Europa Discovery Site" puis Finish. Choisissez "Eclipse Java Development Tools 3.3.2r33x_r20080129-.." dans "Java Development":

jdt-1