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>
Et voila le code de l'itemRenderer ChartRenderer qui va afficher le PieChart:
<?xml version="1.0"?>
<mx:VBox height="200" width="100%" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:PieChart dataProvider="{data.detail}"
width="100%"
height="100%"
showDataTips="true">
<mx:series>
<mx:PieSeries labelPosition="callout" field="amount" />
</mx:series>
</mx:PieChart>
</mx:VBox>
Flex Source Code Download: Télécharger le code source complet de l'application
Vous pouvez aussi mettre ce PieChart uniquement dans une colonne. Pour cela, liez votre itemRenderer avec la propriété dataField:
<mx:columns> <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/> <mx:AdvancedDataGridColumn dataField="total" headerText="Total"/> <mx:AdvancedDataGridColumn dataField="detail" headerText="Detail"/> </mx:columns> <mx:rendererProviders> <mx:AdvancedDataGridRendererProvider dataField="detail" renderer="ChartRenderer" columnIndex="2"/> </mx:rendererProviders>
Articles similaires
- Flex AdvancedDataGrid – Utiliser un renderer pour remplir une colonne
- Flex AdvancedDataGrid – Utiliser un dataProvider XML (sous forme XMLList)
- Flex AdvancedDataGrid – Utiliser treeColumn pour définir la colonne qui va contenir le Tree
- Flex AdvancedDataGrid – Utiliser le champ GroupLabel pour nommer une colonne créée avec Grouping
- Flex AdvancedDataGrid – Utilisation d'itemRenderer simples (column, depth et columnSpan)
Aucun trackbacks pour l'instant
Mes projets (Open Source)
Autres
22 février 2011
Bonjour,
Merci encore pour ces tutoriaux, vraiment tres utile..
De la meme maniere j'ai une ADG qui affiche une nouvelle ligne lorsque l'on clique sur l'un des items. La seule difference etant que je fais cela avec AS3 (et non pas dans ma declaration MXML).
J'utilise donc la propriete rendererProviders avec un item renderer passé a une ClassFactory.
Tout va bien, ma ligne de detail s'affiche bien.
Probleme, mon ADG possede de nombreuse colonnes et lorsque je veux faire defiler mes colonnes avec une horizontal scroll bar, un bug d'affichage fait disparaître toutes mes donnes.
Ce bug semble etre connu, mais les solutions apportées a ce bug sont sans effet dans mon cas (proprieté horizontalScrollPolicy = 'auto' sur chaque colonne).
Apres moulte debuggage la ligne provoquant le bug semble vraiment venir de la mise a jour de la propriete renderersProvider. Ex :
.
Dans la classe AdvancedDataGrid.as, le setter de cette propriete, en plus de mettre a jour la valeur bien sur appelle deux fonctions :
Apparemment quelque chose se passe mal ici (meme en appelant this.validateNow(); juste apres).
D'autre part si je n'ajoute pas la ligne :
Une erreur survient.
En esperant que mon probleme soit comprehensible et que cela eveillera quelques lumieres chez certains.
Merci!
22 février 2011
Salut,
En effet, c'est un sujet assez avancé !
En espérant que cela aide d'autres utilisateurs, merci d'avoir posté du code
Fabien
24 mai 2011
Bonjour,
Est-il possible d'insérer une autre AdvancedDataGrid dans une première à l'aide de cette technique?
Merci Quentin
24 mai 2011
Oui
Fabien
24 mai 2011
J'ai effectué plusieurs essais à l'aide de différents exemples et j'obtient toujours une même erreur à la compilation. Par exemple, quand j'essaie de mettre en place ton code ci-dessus, j'obtient :
Erreur: La définition ChartRenderer est introuvable
Pourtant mon fichier ChartRenderer.mxml est bien dans le même dossier que le fichier de base qui en contient l'appel.
C'est sûrement une simple erreur mais je débute en flex et je ne trouve pas la solution.
Merci de l'attention !
Quentin
24 mai 2011
Salut,
Alors ca dépend d'ou est placé le fichier d'appel. Si tu met directement ChartRenderer, cela signifie que tes classes sont dans le src directement. Sinon il faut préciser le package complet. Le plus simple est de commencer a taper le nom de la classe et faire ctrl espace dans flash builder
Fabien
24 mai 2011
Je ne dispose pas de flashbuilder faute de licence mais j'ai résolu mon erreur. Elle venait bien du fait que mon ChartRenderer.mxml n'était pas au bon endroit car je travaille sur une base qui définit un autre emplacement pour ces fichiers.
Merci beaucoup.
Quentin