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

Composant Flex – Interface de Pagination générique

Dans votre application Flex, vous pouvez être amené à afficher un gros volume de données. Pour une application de reporting par exemple, vous pourriez avoir des milliers voire des dizaines de milliers d'enregistrements.

Si vous essayez de les afficher tous à la fois dans une AdvancedDataGrid par exemple, votre application va devenir inutilisable car le composant AdvancedDataGrid n'est pas fait pour afficher autant de données. De plus, l'utilisateur aura beaucoup de mal à lire ces résultats, ne serait-ce que pour arriver à prendre la minuscule Scrollbar .

La solution la plus commune dans ce genre de cas est de créer une pagination, c'est-à-dire de séparer votre donnée en plusieurs pages. Je reviendrai plus tard sur ce blog sur la manière par laquelle gérer la pagination des AdvancedDataGrid / DataGrid.

En attendant, vous avez peut-être déjà votre propre système de pagination au niveau serveur et vous voulez l'implémenter au niveau client.

Voici donc un composant Flex qui va bien vous rendre service. Il permet de créer simplement une interface pour choisir la page à charger. Ce composant est entièrement configurable et peut être facilement modifié à votre guise (on va le voir plus loin).

Voici les paramètres que l'on peut configurer dans le composant Flex de base:

• itemsPerPage: Nombre d'éléments par page (pour pouvoir calculer le nombre de pages)
• rangeCount: Nombre de boutons de sélection de page à afficher à l'écran
• itemsTotal: Nombre total d'éléments (cumul de toutes les pages)
• selectedIndex: Page sélectionnée (automatique au clic sur le bouton mais il est aussi possible de le setter)

Deux évènements sont dispatchés par ce composant et notamment l'évènement "pageChanged" qui va vous permettre de savoir quand l'utilisateur a demandé une nouvelle page et ainsi de demander la nouvelle donnée.

Voir la page officielle de l'auteur du Paginator

Exemple d'application Flex utilisant le WAIPaginator

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

Modification du composant Flex Paginator

Comme je le disais plus haut, ce composant est facilement réutilisable et extensible. Pour mon application, j'ai ajouté deux boutons, qui permettent de naviguer plus rapidement dans les pages. En effet, les boutons Next et Prev ne modifie que d'une la page courante, ce qui peut être assez long quand on a des dixaines de pages.

Voici les modification que j'ai apporté:

• Ajout d'une propriété "fastStep" avec les getters/setters correspondants permettant d'indiquer au composant quel est le nombre de pages à sauter:

private var _fastStep			:int = 4;

• Création de deux boutons et assignation de leur évènement click  à la méthode nudgeHandler:

fastBackBtn.addEventListener(MouseEvent.CLICK, nudgeHandler);
fastFwdBtn.addEventListener(MouseEvent.CLICK, nudgeHandler);

• On effectue ensuite une simple vérification d'index pour éviter de sortir de l'intervalle lors de la modification du selectedIndex:

case fastBackBtn:
	if (selectedIndex > _fastStep){
		selectedIndex = selectedIndex - _fastStep;
	} else {
		selectedIndex = 0;
	}
	break;
case fastFwdBtn:
	if (selectedIndex < arr.length - 1 - _fastStep){
		selectedIndex = selectedIndex + _fastStep;
	} else {
		selectedIndex = arr.length - 1;
	}
	break;

Télécharger le composant modifié par flex-tutorial.fr

Exemple d'application avec le composant modifié (pagination rapide)

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