Flex/AdvancedDataGrid

Cette page a été rédigée il y a fort fort longtemps, et n'a pas tellement été mise à jour.

 

Vous savez, moi je ne crois pas qu'il y ait de bonne ou de mauvaise page. Moi, si je devais résumer mon wiki aujourd'hui avec vous, je dirais que c'est d'abord des rencontres. Des gens qui m'ont tendu la main, peut-être à un moment où je ne pouvais pas, où j'étais seul chez moi. Et c'est assez curieux de se dire que les hasards, les rencontres forgent une destinée... Parce que quand on a le goût de la chose, quand on a le goût de la chose bien faite, le beau geste, parfois on ne trouve pas l'interlocuteur en face je dirais, le miroir qui vous aide à avancer. Alors ça n'est pas mon cas, comme je disais là, puisque moi au contraire, j'ai pu ; et je dis merci au wiki, je lui dis merci, je chante le wiki, je danse le wiki... je ne suis qu'amour ! Et finalement, quand des gens me disent « Mais comment fais-tu pour avoir cette humanité ? », je leur réponds très simplement que c'est ce goût de l'amour, ce goût donc qui m'a poussé aujourd'hui à entreprendre une construction logicielle... mais demain qui sait ? Peut-être simplement à me mettre au service de la communauté, à faire le don, le don de soi.

L’AdvancedDataGrid étend les possibilités du composant standard DataGrid, afin d’améliorer la visualisation des données. Les caractéristiques de ce composant sont les suivantes :

  • Tri multi-colonnes

  • Fonction de style sur les lignes et les colonnes

  • Affichage des données de façon hierarchique ou groupée

  • Groupe de colonnes

  • ItemRenderer avancé

Premier exemple

L’AdvancedDataGrid s’utilise comme un DataGrid. La différence se voit essentiellement à l’affichage, notamment au niveau du header avec une zone spécifique pour le tri. L’exemple ci-dessous affiche des produits (libellé en première colonne) et leur catégorie associée (code et libellé respectivement en deuxième et troisième colonne).

<mx:AdvancedDataGrid designViewDataType="flat" dataProvider="{_acProduits}">
  <mx:columns>
    <mx:AdvancedDataGridColumn headerText="Produit" dataField="libelle"/>
    <mx:AdvancedDataGridColumn headerText="Code catégorie" dataField="code"/>
    <mx:AdvancedDataGridColumn headerText="Libellé catégorie" dataField="libelle"/>
  </mx:columns>
</mx:AdvancedDataGrid>

Colonnes groupées

L’idée des colonnes groupées consiste à créer un header commun pour des champs qui possèdent un lien entre eux. Reprenons ainsi l’exemple précédent de façon à grouper les colonnes relatives à la catégorie (notez que l’on définit maintenant les colonnes avec l’élément groupedColumns et non plus columns) :

<mx:AdvancedDataGrid designViewDataType="flat" dataProvider="{_acData}">
  <mx:groupedColumns>
    <mx:AdvancedDataGridColumn headerText="Produit" dataField="libelle"/>
    <mx:AdvancedDataGridColumnGroup headerText="Catégorie">
      <mx:AdvancedDataGridColumn headerText="Code" dataField="code"/>
      <mx:AdvancedDataGridColumn headerText="Libellé" dataField="libelle"/>
    </mx:AdvancedDataGridColumnGroup>
  </mx:groupedColumns>
</mx:AdvancedDataGrid>

Supprimer la zone d’affichage du tri dans le header

L’AdvancedDataGrid utilise un header renderer par défaut qui affiche une zone pour le tri. Si on souhaite une table sans tri, cette zone devient gênante car elle prend de la place inutilement dans le header. Pour supprimer la zone, il suffit de redéfinir le header renderer de la table : pour cela, il faut d’une part créer un composant renderer (dans notre exemple un label), et d’autre part positionner l’attribut headerRenderer=classe_du_composant au niveau de la data grid.

  • Code du header renderer

public class SimpleHeaderRenderer extends Label
{
  public function SimpleHeaderRenderer()
  {
    setStyle('fontWeight', 'bold');
    setStyle('textAlign', 'center');
  }
}

  • Code d’affichage de la data grid

<mx:AdvancedDataGrid designViewDataType="flat" dataProvider="{_acData}" headerRenderer="SimpleHeaderRenderer" sortableColumns="false">
  <mx:groupedColumns>
    <mx:AdvancedDataGridColumn headerText="Produit" dataField="libelle"/>
    <mx:AdvancedDataGridColumnGroup headerText="Catégorie">
      <mx:AdvancedDataGridColumn headerText="Code" dataField="code"/>
      <mx:AdvancedDataGridColumn headerText="Libellé" dataField="libelle"/>
    </mx:AdvancedDataGridColumnGroup>
  </mx:groupedColumns>
</mx:AdvancedDataGrid>