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
Composant Flex – AdvancedDataGrid Auto Resizable (ajustement des colonnes)
Avec le composant AdvancedDataGrid de base, vous pouvez redimensionner les colonnes par un drag and drop des séparateurs de colonnes. Mais dans de nombreuses applications, comme par exemple l'Explorateur Windows ou le File Explorer d'Ubuntu, vous pouvez faire un double-clic sur un de ces séparateurs qui va agrandir la colonne pour qu'elle puisse afficher le plus grand élément. Ce comportement n'est pas disponible dans une AdvancedDataGrid par défaut.
La solution est comme souvent de créer un composant qui va hériter d'AdvancedDataGrid et de redéfinir certaines de ses méthodes.
Sameer Bhatt de la Adobe Flex Team a fait ces modifications et a crée pour cela un composant baptisé AutoResizableADG.
Voir la page officielle de l'auteur
Télécharger le composant AutoResizableADG.as
Exemple d'application
Flex Source Code Download: Télécharger le code source complet de l'application
Flex AdvancedDataGrid – ItemRenderer couvrant une ligne complète (PieChart)
Dans l'exemple Flex précédent, on utilisait un itemRenderer pour afficher une donnée calculée dans une colonne spécifique. Dans cet exemple, on va voir comment couvrir toutes les colonnes avec un itemRenderer. On va ainsi afficher un composant Flex PieChart pour afficher la donnée du champ "detail" de notre donnée. Chaque ligne contient des informations détaillées sur les ventes de chaque représentant, qui est représenté par une part du PieChart.
Voici le code de l'application Flex principale:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpHierarchy:ArrayCollection= new ArrayCollection([
{name:"Barbara Jennings", region: "Arizona", total:70, children:[
{detail:[{amount:5},{amount:10},{amount:20},{amount:45}]}]},
{name:"Dana Binn", region: "Arizona", total:130, children:[
{detail:[{amount:15},{amount:25},{amount:35},{amount:55}]}]},
{name:"Joe Smith", region: "California", total:229, children:[
{detail:[{amount:26},{amount:32},{amount:73},{amount:123}]}]},
{name:"Alice Treu", region: "California", total:230, children:[
{detail:[{amount:159},{amount:235},{amount:135},{amount:155}]}
]}
]);
]]>
</mx:Script>
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
variableRowHeight="true">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
<mx:AdvancedDataGridColumn dataField="total" headerText="Total"/>
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
dataField="detail"
renderer="ChartRenderer"
columnIndex="0"
columnSpan="0"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</mx:Application>
Flex AdvancedDataGrid – Utiliser un renderer pour remplir une colonne
L'exemple Flex suivant montre le résultat de l'utilisation d'un itemRenderer utilisé pour calculé la valeur de la colonne Difference du composant AdvancedDataGrid:
Cet exemple définit une colonne ayant l'id "diffCol" qui n'est pas associée avec un dataField (champ) du dataProvider. Au lieu de cela, on va utiliser la propriété rendererProvider pour assigner un itemRenderer à la colonne. L'itemRenderer va calculer la différence entre les valeurs "Actual" et "Estimate", et ensuite afficher une message différent si cette valeur est positive ou non.
Voici le code de l'application Flex principale:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
{Region:"Southwest", children: [
{Region:"Arizona", children: [
{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
{Region:"Central California", children: [
{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
{Region:"Nevada", children: [
{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
{Region:"Northern California", children: [
{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
{Region:"Southern California", children: [
{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}
]);
]]>
</mx:Script>
<mx:AdvancedDataGrid id="adg" width="100%" height="100%" creationComplete="adg.expandAll()">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
<mx:AdvancedDataGridColumn id="diffCol"
headerText="Difference"/>
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider column="{diffCol}"
depth="3" renderer="mycomponents.SummaryRenderer"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</mx:Application>
Et le code de l'itemRenderer SummaryRenderer (dans le package mycomponents):
Mes projets (Open Source)
Autres
