Adobe Flex 3. Training from the Source. Jeff Tapper Michael Labriola Matthew Boles avec James Talbot

Transcription

1 Adobe Flex 3 Training from the Source Jeff Tapper Michael Labriola Matthew Boles avec James Talbot Avant-propos de Matt Chotin, responsable produit Flex

2 LEÇON 19 Ce que vous allez apprendre Dans cette leçon, vous allez : travailler avec graphiques à secteurs, en colonnes et en lignes ; apprendre à fournir des données à vos graphiques ; spécifier des axes de graphiques ; gérer des événements de graphiques ; animer des graphiques lorsque les données sont définies ; appliquer des styles aux graphiques. Temps approximatif Cette leçon prend environ 1 heure 30 minutes. Fichiers de leçon Fichiers multimédias : Lesson19/assets/TypeChart.mxml Lesson19/assets/ComparisonChart.mxml Lesson19/assets/SalesChart.mxml Fichiers de départ : Lesson19/start/Dashboard.mxml Fichiers terminés : Lesson19/complete/Dashboard.mxml Lesson19/complete/views/dashboard/ComparisonChart.mxml Lesson19/complete/views/dashboard/SalesChart.mxml Lesson19/complete/views/dashboard/TypeChart.mxml

3 LEÇON 19 Visualiser des données Le fait de pouvoir visualiser des données sous forme de graphique ou de diagramme peut simplifier considérablement leur interprétation pour les utilisateurs. Au lieu d afficher un simple tableau de données numériques, vous pouvez proposer un graphique à barres ou à secteurs avec des couleurs, des légendes et une représentation bidimensionnelle de vos données. La visualisation des données permet de présenter les informations en simplifiant l interprétation des données et des relations qu elles entretiennent les unes avec les autres. La représentation graphique fait partie des types de visualisations par projection bidimensionnelle des données. Flex prend en charge la plupart des graphiques bidimensionnels classiques (graphiques à barres, à colonnes et à secteurs) et permet de contrôler précisément leur apparence. Un graphique simple est un graphique qui présente une unique série de données autrement dit, un groupe de points de données liés. Une série de données peut ainsi être des résultats de ventes mensuels ou des taux d occupation journaliers d un hôtel. Le graphique suivant présente une série de données qui correspond aux ventes d une entreprise sur plusieurs mois : L application Dashboard affiche des graphiques interactifs riches des ventes de l entreprise. 533

4 534 Adobe Flex 3 Explorer les composants graphiques de Flex Parmi les nombreux outils puissants de Flex figure un robuste jeu de composants de graphiques grâce auquel il est possible de créer certains des types de graphiques les plus courants et de contrôler précisément leur apparence. Une fois que vous avez compris l API pour les graphiques, il devient très simple d ajouter des graphiques interactifs riches à vos applications. Dans cette leçon, vous allez ajouter des graphiques à l application Dashboard, afin de permettre à l utilisateur de mieux visualiser les informations de ventes de l entreprise FlexGrocer. Les nouvelles fonctionnalités pour graphiques de Flex 3 se concentrent principalement sur les interactions utilisateur riches. Parmi ces nouvelles fonctionnalités, on peut citer notamment : De nouvelles options pour sélectionner les données dans les graphiques. L utilisateur peut maintenant sélectionner plusieurs points, faire glisser un cadre de sélection autour des points et faire glisser des données entre des graphiques et vers d autres composants. Plus de flexibilité avec les couleurs de remplissage. Les développeurs peuvent créer de la logique conditionnelle pour modifier les couleurs d un élément de graphique de manière programmatique en fonction de conditions de données. De nouvelles améliorations pour les étiquettes et les gestionnaires d affichage des axes, qui offrent un meilleur contrôle sur la personnalisation des graphiques. Types de graphiques Flex propose un certain nombre de types de graphiques, dont les suivants : Area Bar Bubble Candlestick Column HighLowOpenClose Line Plot Ces différents types de graphiques sont utilisés dans la section Charting de l explorateur de composants de Flex 3 : Packaging des graphiques Si les composants de graphique Flex sont disponibles pour toutes les versions de Flex Builder, ils ne sont cependant pas inclus gratuitement. Flex Builder 3 Standard inclut une version d évaluation limitée des composants de graphiques et Flex Builder 3 Professional inclut la version complète et un autre package qui rend ces composants disponibles pour les développeurs qui utilisent le SDK Flex.

5 LEÇON 19 : Visualiser des données 535 Parties des graphiques Tous les composants de graphique Flex possèdent une API similaire. Dès que vous aurez appris à travailler avec l un des types de graphiques, il devrait donc être très simple de passer aux autres. Plusieurs balises différentes sont utilisées pour définir un graphique particulier mais, en général, la plupart des graphiques respectent la structure suivante : <ChartType> <!-- Define the axes. --> <mx:horizontalaxis> <mx:axistype/> </mx:horizontalaxis> <mx:verticalaxis> <mx:axistype/> </mx:verticalaxis> <mx:series> <mx:seriesname/> </mx:series> <!-- Style the axes and ticks. --> <mx:horizontalaxisrenderer/> <mx:verticalaxisrenderer/> <!-- Add grid lines and other elements to the chart. --> <mx:annotationelements/> <mx:backgroundelements/> </mx:charttype> <mx:legend/> Dans ce pseudo-code, vous pouvez remarquer qu un graphique peut contenir un type de graphique, une ou plusieurs séries, un ou plusieurs axes, des gestionnaires d affichage des axes et d autres éléments. La balise <ChartType> est la balise racine de chaque graphique. Elle est obligatoire et sert à déterminer le type de graphique à utiliser (LineChart, ColumnChart, PieChart, etc.). Cette balise peut également être utilisée pour personnaliser des éléments du graphique, comme les données à afficher, l affichage d infobulles en cas de survol des éléments, etc. Les séries définissent un tableau de classes Series qui sont utilisées pour spécifier les données à afficher dans le graphique. Pour chaque série de données, des styles spécifiques (comme le remplissage, le trait, etc.) peuvent être utilisés pour personnaliser l affichage des données. Puisqu un tableau de Series est fourni, le graphique peut contenir plusieurs jeux de données. Ce sera le cas plus loin dans cette leçon lorsque vous implémenterez le graphique de

6 536 Adobe Flex 3 comparaison, en représentant à la fois les ventes nettes et les ventes brutes. Chaque graphique doit avoir une série définie pour que des données puissent être affichées. Chaque type de graphique possède sa propre classe Series. La série pour un <mx:columnchart> est ainsi <mx:columnseries>, tandis que la série pour un <mx:piechart> est <mx:pieseries>. La classe Axis est requise pour tous les graphiques rectangulaires à deux dimensions (appelés graphiques cartésiens) car elle spécifie les données à afficher pour les axes horizontal et vertical du graphique. Les sous-classes Axis permettent de spécifier si l axe est numérique (LinearAxis) ou créé avec des chaînes (CategoryAxis). Un AxisRenderer peut aussi être utilisé pour décrire de quelle manière les axes horizontal et vertical du graphique doivent être affichés. Par exemple, l axe est chargé d afficher des étiquettes, des marques d unité et un titre. L AxisRenderer peut spécifier des éléments comme des CSS, des propriétés texte, une rotation des étiquettes et un espacement (avec la possibilité, par exemple, de ne pas afficher certaines étiquettes afin de mieux ajuster l axe). Parmi les autres éléments de graphique disponibles figurent encore annotationelements et backgroundelements, deux sous-classes de la classe ChartElement. La sous-classe backgroundelements permet d ajouter des images d arrière-plan et la sous-classe annotation- Elements permet d ajouter des éléments liés à la description du graphique, comme des repères (gridlines). Disposition des graphiques initiaux Dans ce premier exercice, vous allez utiliser les composants de graphique pour disposer les fondations de trois types de graphiques : un graphique de types, un graphique de ventes et un graphique de comparaison. Les fichiers squelettes des trois graphiques sont inclus dans le répertoire Lesson19/assets. Pour l instant, chaque fichier squelette ne contient qu un seul composant DataGrid avec des données liées aux produits vendus. Vous allez maintenant ajouter des graphiques pour visualiser ces données. 1 Ouvrez TypeChart.mxml dans le dossier Lesson19/assets et enregistrez-le dans votre répertoire flexgrocer/src/views/dashboard. 2 Dans le premier <mx:vbox> à l intérieur du <mx:viewstack>, ajoutez un <mx:piechart>, avec une hauteur (height) et une largeur (width) de 100 % et un dataprovider lié à dp. <mx:viewstack id="chartstack" width="100%" height="100%"> <mx:vbox width="100%" height="100%">

7 LEÇON 19 : Visualiser des données 537 <mx:piechart id="chart" width="100%" height="100%" dataprovider="{dp}"> </mx:piechart> </mx:vbox> <mx:vbox width="100%" height="100%"> <mx:datagrid id="chartdata" dataprovider="{dp}"> </mx:viewstack> Il s agit du squelette d un graphique à secteurs, qui requiert que vous spécifiiez une ou plusieurs séries avant qu il ne soit affiché. Vous allez le faire au prochain exercice. 3 Enregistrez TypeChart.mxml. Comme nous l indiquions précédemment, plusieurs éléments sont nécessaires pour qu un graphique s affiche. Si vous exécutez l application maintenant, aucun graphique n apparaît. Vous devez fournir d autres informations, ce sera le but du prochain exercice. Le fichier doit maintenant ressembler au fichier TypeChart_initial du dossier intermediate. 4 Ouvrez SalesChart.mxml dans le dossier Lesson19/assets et enregistrez-le dans votre répertoire flexgrocer/src/views/dashboard. 5 Dans la première balise <mx:vbox> à l intérieur de la balise <mx:viewstack>, ajoutez une balise <mx:linechart> avec un dataprovider lié à dp et une hauteur (height) et une largeur (width) de 100 %. <mx:vbox width="100%" height="100%"> <mx:linechart id="chart" dataprovider="{dp}" height="100%" width="100%"/> </mx:vbox> Il s agit du squelette d un graphique à lignes. Avant qu il ne fonctionne correctement, il lui faut une ou plusieurs séries ainsi qu un axe. Vous vous chargerez de cela lors du prochain exercice. 6 Enregistrez SalesChart.mxml. Le fichier doit ressembler à ce point au fichier SalesChart_initial dans le répertoire intermediate. 7 Ouvrez ComparisonChart.mxml dans le dossier Lesson19/assets et enregistrez-le dans votre répertoire flexgrocer/src/views/dashboard.

8 538 Adobe Flex 3 8 Dans la première balise <mx:vbox> à l intérieur de la balise <mx:viewstack>, ajoutez une balise <mx:columnchart> avec une hauteur (height) et une largeur (width) de 100 % et un dataprovider lié à dp. <mx:vbox> <mx:columnchart id="chart" dataprovider="{dp}" width="100%" height="100%"/> </mx:vbox> Il s agit du squelette d un graphique à barres, qui requiert que vous spécifiiez une ou plusieurs séries ainsi qu un axe vertical avant de fonctionner. Vous le ferez au prochain exercice. 9 Enregistrez ComparisonChart.mxml. Si vous exécutez l application à ce moment, aucun graphique n apparaît, car vous devez fournir d autres informations, comme les séries et les données d axe. Le fichier doit à ce point ressembler au fichier ComparisonChart_initial dans le dossier intermediate. Remplir des graphiques Selon le type de graphique, une ou plusieurs étapes sont nécessaires avant que le graphique ne soit dessiné. Tous les graphiques, quel que soit leur type, requièrent que vous spécifiiez une ou plusieurs séries de données. Les graphiques cartésiens requièrent également que vous spécifiiez les axes horizontal ou vertical. Une série est un ensemble de données fourni à un graphique. Différentes classes Series peuvent être utilisées selon le type de graphique. Classes Series Nom de la classe Series AreaSeries AreaSet BarSeries BarSet Description La classe AreaSeries définit une série de données pour un contrôle AreaChart. La classe AreaSet est un jeu de groupements qui peut être utilisé pour empiler des AreaSeries dans n importe quel graphique. La classe BarSeries définit une série de données pour un contrôle BarChart. La classe BarSet est un jeu de groupements qui peut être utilisé pour empiler ou rassembler des BarSeries dans n importe quel graphique.

9 LEÇON 19 : Visualiser des données 539 Nom de la classe Series BubbleSeries CandleStickSeries ColumnSeries ColumnSet HLOCSeries LineSeries PieSeries PlotSeries Description Classes Series (suite) La classe BubbleSeries définit une série de données pour un contrôle BubbleChart. La classe CandleStickSeries représente des données financières sous la forme d une série de chandelles représentant les valeurs supérieure, inférieure, d ouverture et de fermeture d une série de données. La classe ColumnSeries définit une série de données pour un contrôle ColumnChart. ColumnSet est un jeu de regroupements qui peut être utilisé pour empiler ou rassembler des ColumnSeries dans n importe quel graphique. La classe HLOCSeries représente des données financières sous la forme d une série d éléments représentant les valeurs supérieure, inférieure, d ouverture (facultative) et de fermeture d une série de données. La classe LineSeries définit une série de données pour un contrôle LineChart. La classe PieSeries définit la série de données pour un contrôle PieChart. La classe PlotSeries définit une série de données pour un contrôle PlotChart. Même si ce n est pas très courant, plusieurs graphiques vous permettent d assortir différentes séries dans le même graphique, par exemple en superposant un graphique à lignes et un graphique à barres. Spécifier les séries des graphiques Dans cette section, vous allez rendre les graphiques fonctionnels en ajoutant les éléments de série requis. 1 Ouvrez Dashboard.mxml et remplacez <v:chartpod id="sales"> par <v:saleschart id="sales">. Changez la balise <v:chartpod id="type"> en la remplaçant par <v:typechart id="type"> et remplacez <v:chartpod id="comp"> par <v:comparisonchart id="comp">. Conservez le reste des attributs en l état. <v:saleschart id="sales" width="100%" height="100%" title="sales Chart" maximize="this.currentstate='fullsales'" restore="this.currentstate=''"> </v:saleschart> <mx:vbox id="rightcharts" width="100%" height="100%"> <v:typechart id="type"

10 540 Adobe Flex 3 width="100%" height="100%" title="category Chart" maximize="this.currentstate='fulltype'" restore="this.currentstate=''"> </v:typechart> <v:comparisonchart id="comp" width="100%" height="100%" title="comparison Chart" maximize="this.currentstate='fullcomp'" restore="this.currentstate=''"> </v:comparisonchart> </mx:vbox> Vous allez commencer à rendre les graphiques fonctionnels, mais vous devrez les appeler depuis l application Dashboard afin de les voir fonctionner. 2 Ajoutez un nouvel attribut aux balises <v:saleschart> et <v:typechart>, en liant la propriété selection.data du grossornetgroup à la propriété grossornet. <v:saleschart id="sales" width="100%" height="100%" title="sales Chart" grossornet="{grossornetgroup.selection.data}" maximize="this.currentstate='fullsales'" restore="this.currentstate=''"> </v:saleschart> <mx:vbox id="rightcharts" width="100%" height="100%"> <v:typechart id="type" width="100%" height="100%" title="category Chart" grossornet="{grossornetgroup.selection.data}" maximize="this.currentstate='fulltype'" restore="this.currentstate=''"> </v:typechart> </mx:vbox> Ce code passe la chaîne GROSS ou la chaîne NET, selon la valeur que l utilisateur sélectionne avec les boutons radio dans les composants SalesChart et TypeChart. Vous n avez pas besoin de passer cette chaîne au ComparisonChart, car ce dernier affichera les ventes nettes et les ventes brutes à la fois. 3 Ouvrez TypeChart.mxml dans le dossier flexgrocer/src/views/dashboard. Vous pouvez aussi ouvrir TypeChart_initial dans le dossier intermediate et l enregistrer sous le nom TypeChart.mxml dans votre répertoire flexgrocer/src/views/dashboard.

11 LEÇON 19 : Visualiser des données Entre les balises <mx:piechart>, ajoutez une paire de balises <mx:series>. Dans la balise <mx:series>, créez une balise <mx:pieseries> avec l attribut field lié à grossornet. <mx:piechart id="chart" width="100%" height="100%" dataprovider="{dp}"> <mx:series> <mx:pieseries field="{grossornet}"> </mx:pieseries> </mx:series> </mx:piechart> Lorsque vous utilisez <mx:pieseries>, vous devez spécifier la propriété à afficher dans le graphique. En liant cette propriété à grossornet, le graphique affiche les ventes brutes ou nettes en fonction du bouton radio que l utilisateur a sélectionné dans l application principale. Enregistrez et testez l application Dashboard. À présent, le graphique à secteurs devrait être fonctionnel. 5 Ajoutez un attribut labelposition à la balise <mx:pieseries>, en spécifiant la valeur insidewithcallout. <mx:pieseries labelposition="insidewithcallout" field="{grossornet}"> La position de l étiquette (labelposition) indique comment afficher les étiquettes. Les valeurs possibles sont les suivantes : "none". N affiche pas d étiquette. Il s agit de la valeur par défaut. "outside". Affiche des étiquettes autour du contour du graphique à secteurs.

12 542 Adobe Flex 3 "callout". Affiche des étiquettes dans deux piles verticales des deux côtés du graphique à secteurs. Le graphique se rétrécit s il le faut pour donner de la place aux étiquettes. "inside". Affiche des étiquettes à l intérieur du graphique, en les centrant approximativement à 7/10 e de chaque secteur. Les étiquettes sont réduites afin de ne pas interférer les unes avec les autres. Si les étiquettes rétrécissent en dessous de la propriété calloutpointsize, Flex les supprime. Lorsque deux étiquettes se chevauchent, Flex donne la priorité aux étiquettes des plus gros secteurs. "insidewithcallout". Affiche des étiquettes à l intérieur du graphique à secteurs, mais si les étiquettes sont réduites jusqu à devenir illisibles Flex les convertit en étiquettes extérieures. Enregistrez et testez l application à nouveau. Vous remarquerez que les étiquettes affichent la valeur, mais pas le nom de la catégorie, comme on s y attendrait. 6 Dans le bloc <mx:script>, créez une nouvelle fonction appelée renderlabel(), qui prend quatre arguments et renvoie un String. La fonction doit renvoyer item.category. private function renderlabel(item:object, field:string, index:int, pct:number):string{ return item.category; } Vous allez utiliser cette fonction d étiquette pour indiquer au graphique le champ à afficher pour l étiquette. Pour un PieSeries, la fonction d étiquette se voit automatiquement passer quatre arguments : item. Contient l objet représenté dans le graphique. Dans votre graphique à secteurs, pour afficher le nom de la catégorie, vous devez renvoyer item.category.

13 LEÇON 19 : Visualiser des données 543 field. Une chaîne contenant le champ (NET ou GROSS dans votre application) qui est représenté dans le graphique. index. Le numéro de l élément qui est tracé dans le graphique. pct. Le pourcentage du secteur de cet élément. 7 Spécifiez l attribut labelfunction du <mx:pieseries> en lui attribuant la valeur renderlabel. <mx:pieseries labelposition="insidewithcallout" field="{grossornet}" labelfunction="renderlabel"> Enregistrez et testez l application. Les étiquettes devraient maintenant s afficher correctement. Ce fichier doit ressembler au fichier TypeChart_labels.mxml du dossier intermediate. 8 Ouvrez SalesChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez aussi récupérer open SalesChart_initial.mxml dans le dossier intermediate et l enregistrer sous le nom SalesChart.mxml dans votre répertoire flexgrocer/src/ views/dashboard. 9 Après la balise <mx:linechart> d ouverture, ajoutez une balise <mx:series>. Dans la balise <mx:series>, ajoutez une balise <mx:lineseries> dont l attribut yfield est lié à grossornet. <mx:linechart id="chart" dataprovider="{dp}" height="100%" width="100%"> <mx:series> <mx:lineseries yfield="{grossornet}"> </mx:lineseries> </mx:series> </mx:linechart>

14 544 Adobe Flex 3 Vous indiquez ainsi au LineChart que la propriété sélectionnée (gross ou net) correspond au champ qui définit la valeur pour l axe y. 10 Enregistrez SalesChart.mxml et exécutez l application. Le graphique s affiche. Vous remarquerez cependant que les étiquettes le long de l axe n ont aucun rapport avec les données qu elles représentent. Vous allez régler cela au cours du prochain exercice, lorsque vous spécifierez les axes horizontal et vertical. Ce fichier doit ressembler à SalesChart_labels.mxml dans le répertoire intermediate. 11 Ouvrez ComparisonChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez aussi récupérer la fonction ComparisonChart_initial.mxml dans le dossier intermediate et l enregistrer sous le nom ComparisonChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. 12 Spécifiez deux séries de colonnes l une avec un yfield valant GROSS et l autre avec un yfield valant NET. <mx:columnchart id="chart" dataprovider="{dp}" width="100%" height="100%"> <mx:series> <mx:columnseries yfield="gross"> </mx:columnseries>

15 LEÇON 19 : Visualiser des données 545 <mx:columnseries yfield="net"> </mx:columnseries> </mx:series> </mx:columnchart> Ce graphique prend deux séries différentes : l une pour afficher les ventes brutes d un jour. L autre pour afficher les profits du jour (ventes nettes). 13 Enregistrez ComparisonChart.mxml et exécutez l application. Le graphique à colonnes affiche à présent des colonnes pour les ventes brutes et nettes. Vous remarquerez que par défaut les étiquettes le long de l axe horizontal affichent des numéros d index et non les dates que l on s attendrait à voir. Vous allez régler cela au prochain exercice, en spécifiant l axe horizontal. Ce fichier devrait ressembler maintenant au fichier ComparisonChart_labels.mxml du dossier intermediate. Ajouter des axes aux graphiques à lignes et à colonnes Une fois que les données ont été fournies aux graphiques, vous pouvez ajuster l affichage des étiquettes des axes à l aide des balises <mx:horizontalaxis> et <mx:verticalaxis>. Ces balises peuvent être utilisées pour spécifier des plages valides pour le graphique mais aussi pour mapper les données sur le graphique. Flex prend en charge quatre types d axes : CategoryAxis. Mappe une propriété particulière des objets du graphique sur l axe. Par exemple, un graphique qui affiche le total des inscriptions dans une école internationale en fonction de la population étudiante pourrait utiliser un CategoryAxis pour mapper la propriété de nationalité des étudiants sur l axe horizontal.

16 546 Adobe Flex 3 LinearAxis. Mappe des données numériques sur les points d un axe. Permet de spécifier aisément des plages numériques valides, des nombres à ignorer, etc. LogAxis. Mappe des données logarithmiques sur un axe. L axe logarithmique possède des étiquettes pour chaque puissance de 10 (1, 10, 100, 1000, etc.). DateTimeAxis. Mappe des valeurs temporelles sur un axe. Peut également être utilisé pour définir le format pour les étiquettes. Cet axe permet aussi de désactiver des dates particulières qui ne doivent pas être affichées, par exemple afin de créer un axe qui n affiche que les jours ouvrés ou les week-ends. ASTUCE : Il est maintenant possible d avoir plusieurs axes pour un graphique donné, afin de pouvoir créer plusieurs jeux de données à afficher les uns à côté des autres. Pour cela, vous devez créer des axes supplémentaires dans une série, comme ceci : <mx:linechart id="linechart" dataprovider="{mydata}"> <mx:horizontalaxis> <mx:categoryaxis id="cataxis" categoryfield="categoryfieldname"/> </mx:horizontalaxis> <mx:verticalaxis> <mx:linearaxis id= "v1"/> </mx:verticalaxis> <mx:verticalaxisrenderers> <mx:axisrenderer axis = "{v1}"/> <mx:axisrenderer axis = "{v2}"/> <mx:axisrenderer axis = "{v3}"/> </mx:verticalaxisrenderers> <mx:series> <mx:lineseries yfield="fieldname" form="curve" displayname="display Name" itemrenderer="mx.charts.renderers.circleitemrenderer"> </mx:lineseries> <mx:lineseries yfield="anotherfieldname" form="curve" displayname="another Display Name" itemrenderer="mx.charts.renderers.circleitemrenderer"> <mx:verticalaxis> <mx:linearaxis id = "v2" /> </mx:verticalaxis> </mx:lineseries> <mx:lineseries yfield="yetanotherfieldname" form="curve" displayname="yet Another Field Name" itemrenderer= "mx.charts.renderers.circleitemrenderer"> <mx:verticalaxis> <mx:linearaxis id = "v3" /> </mx:verticalaxis> </mx:lineseries>

17 LEÇON 19 : Visualiser des données 547 </mx:series> </mx:linechart> Flex part du principe que tout axe qui n est pas spécifiquement défini mappe un champ numérique sur l axe. Voilà pourquoi, dans le dernier exercice, l axe horizontal affichait le numéro d index de l élément au lieu de la date. 1 Ouvrez SalesChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez également récupérer SalesChart_labels.mxml dans le dossier intermediate et l enregistrer sous le nom SalesChart.mxml dans votre répertoire flexgrocer/src/ views/dashboard. 2 Ajoutez une paire de balises <mx:horizontalaxis> dans la balise <mx:linechart>. Dans les balises <mx:horizontalaxis>, ajoutez un <mx:categoryaxis> en attribuant la valeur DTSALE à l attribut categoryfield. <mx:linechart id="chart" dataprovider="{dp}" height="100%" width="100%"> <mx:horizontalaxis> <mx:categoryaxis categoryfield="dtsale" id="cataxis"/> </mx:horizontalaxis> <mx:series> <mx:lineseries yfield="{grossornet}"> </mx:lineseries> </mx:series> </mx:linechart> Vous indiquez maintenant au graphique les données à tracer le long de l axe horizontal. En spécifiant un CategoryAxis et la valeur DTSALE pour l attribut categoryfield, vous mappez la propriété DTSALE sur l axe x. Il est aussi possible d utiliser un DateTimeAxis au lieu du CategoryAxis. Par exemple, si vous aviez plus de données de date que vous ne souhaitez en représenter dans le graphique, vous pourriez utiliser DateTimeAxis et spécifier une date de début et une date de fin. Comme vous souhaitez ici afficher toutes les données renvoyées par le serveur, le CategoryAxis est plus approprié. 3 Enregistrez SalesChart.mxml et exécutez l application. Les dates s affichent maintenant en bas du graphique. Vous remarquerez cependant qu elles sont trop nombreuses pour que l on puisse lire correctement les étiquettes. Si vous changez les dates dans l ApplicationControlBar (en haut de l application Dashboard) afin de limiter la recherche à une semaine de données, vous verrez plus clairement que le problème tient en partie à ce que les étiquettes sont trop longues et assez peu conviviales.

18 548 Adobe Flex 3 4 Dans le bloc <mx:script>, ajoutez une fonction appelée renderdate() qui applique un format de date aux étiquettes sur l axe horizontal. private function renderdate(value:object, previousvalue:object, axis:categoryaxis, item:object):string{ return mmddyyyy.format(value); } La fonction d étiquette pour un CategoryAxis se voit automatiquement passer quatre arguments : value. La valeur de la propriété pour l objet affiché. Ici, cette valeur est la propriété DTSALE, qui contient la date. previousvalue. La valeur de la propriété pour la colonne précédente. axis. Une référence à l axe. item. L objet de données complet.

19 LEÇON 19 : Visualiser des données 549 Dans votre cas, il vous suffit de renvoyer la version formatée de la date sous forme de String. Vous pouvez utiliser le DateFormatter nommé mmddyyyy, qui est déjà présent dans ce fichier. Si vous utilisez la fonctionnalité de remplissage automatique du code, l instruction import pour CategoryAxis est automatiquement ajoutée. Sinon vous devez l ajouter explicitement : import mx.charts.categoryaxis; 5 Spécifiez renderdate comme fonction d étiquette (labelfunction) pour le CategoryAxis. <mx:categoryaxis categoryfield="dtsale" id="cataxis" labelfunction="renderdate"/> Ce paramètre indique à l axe qu il doit utiliser la fonction renderdate() lors de la création des étiquettes. 6 Enregistrez SalesChart.mxml et exécutez l application. Les dates s affichent maintenant correctement. Elles sont encore trop nombreuses, mais vous allez régler cela sous peu, en découvrant les AxisRenderers. Ce fichier doit maintenant ressembler au fichier SalesChart_labelFunction.mxml dans le répertoire intermediate.

20 550 Adobe Flex 3 7 Ouvrez ComparisonChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez aussi trouver ComparisonChart_labels.mxml dans le dossier intermediate et l enregistrer sous le nom ComparisonChart.mxml dans votre répertoire flexgrocer/ src/views/dashboard. 8 Ajoutez une paire de balises <mx:horizontalaxis> dans la balise <mx:columnchart>. À l intérieur des balises <mx:horizontalaxis>, ajoutez un <mx:categoryaxis> en attribuant la valeur DTSALE à l attribut categoryfield. <mx:columnchart id="chart" dataprovider="{dp}" width="100%" height="100%"> <mx:horizontalaxis> <mx:categoryaxis id="hcataxis" categoryfield="dtsale"/> </mx:horizontalaxis> </mx:columnchart> Comme le graphique à lignes, le graphique à colonnes utilisera le champ DTSALE pour son axe horizontal. Vous avez déjà vu qu il fallait une fonction d étiquette. Ajoutons-en une pour l axe horizontal. 9 Dans le bloc <mx:script>, ajoutez une fonction nommée renderdate() qui attribue un format de date aux étiquettes sur l axe horizontal. private function renderdate(value:object, previousvalue:object, axis:categoryaxis, item:object):string{ return mmddyyyy.format(value); } Comme vous avez le graphique à lignes, vous utilisez cette fonction pour appliquer un format de date à DTSALE. Si vous utilisez la fonctionnalité de remplissage automatique du code, l instruction import est automatiquement ajoutée pour CategoryAxis. Sinon vous devez l ajouter explicitement. 10 Spécifiez renderdate comme fonction d étiquette (labelfunction) pour le CategoryAxis. <mx:categoryaxis id="hcataxis" categoryfield="dtsale" labelfunction="renderdate"/> Cet attribut indique à l axe qu il doit utiliser la fonction renderdate lors de la création des étiquettes. 11 Enregistrez ComparisonChart.mxml et exécutez l application.

21 LEÇON 19 : Visualiser des données 551 Le graphique de comparaison affiche correctement les dates. Vous allez ensuite ajouter une fonction d étiquette ( labelfunction ) pour l axe vertical également. 12 Juste après la balise </mx:horizontalaxis>, ajoutez une paire de balises <mx:verticalaxis>. À l intérieur, ajoutez une balise <mx:linearaxis> afin de spécifier une fonction d étiquette (labelfunction) nommée renderdollars. <mx:horizontalaxis> <mx:categoryaxis id="hcataxis" dataprovider="{dp}" categoryfield="dtsale" labelfunction="renderdate"/> </mx:horizontalaxis> <mx:verticalaxis> <mx:linearaxis id="vlinaxis" labelfunction="renderdollars"/> </mx:verticalaxis> Un LinearAxis convient bien pour la colonne verticale car les valeurs sont toutes numériques. À l étape suivante, vous allez créer la fonction renderdollars(). 13 Dans le bloc <mx:script>, créez une fonction appelée renderdollars() qui prend trois arguments : value, previousvalue et Axis. private function renderdollars(value:number, previousvalue:number, axis:linearaxis):string{ return dollars.format(value); } La fonction d étiquette pour un LinearAxis se voit automatiquement passer trois arguments : la valeur, la valeur précédente et une référence à l axe. Si vous utilisez la fonctionnalité de remplissage automatique du code, l instruction import pour LinearAxis est automatiquement ajoutée. Sinon vous devez l ajouter explicitement.

22 552 Adobe Flex 3 14 Enregistrez ComparisonChart.mxml et exécutez l application. Le graphique de comparaison affiche maintenant les dates et les dollars correctement. Le fichier doit maintenant ressembler au fichier ComparisonChart_labelFunctions.mxml du dossier intermediate. Ajouter des légendes aux graphiques Il est très facile d ajouter une légende à un graphique Flex. La balise <mx:legend> ne requiert qu un argument, dataprovider, qui est lié au graphique. Vous pouvez utiliser plusieurs autres attributs pour personnaliser la légende. Voici les deux attributs les plus couramment utilisés : labelplacement. Comme le labelplacement d une case à cocher ou d un bouton radio, indique si l étiquette doit se trouver à gauche, à droite, au-dessus ou en dessous du carré coloré qui identifie les données. direction. Indique si les éléments dans la légende doivent être disposés horizontalement ou verticalement. 1 Ouvrez ComparisonChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez aussi récupérer ComparisonChart_labelFunctions.mxml dans le dossier intermediate et l enregistrer sous le nom ComparisonChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. 2 Dans le <mx:vbox>, avant la balise <mx:columnchart>, ajoutez une balise <mx:legend> dont l attribut direction vaut horizontal et l attribut dataprovider est lié à chart. <mx:vbox> <mx:legend direction="horizontal" dataprovider="{chart}"/> <mx:columnchart id="chart" dataprovider="{dp}"

23 LEÇON 19 : Visualiser des données 553 width="100%" height="100%"> </mx:vbox> Ce code crée une légende placée horizontalement qui apparaît avant le graphique à l intérieur du <mx:vbox>. 3 Trouvez la balise <mx:columnseries> pour la colonne GROSS. Ajoutez un attribut displayname avec la valeur Gross. Trouvez la balise <mx:columnseries> pour la colonne NET. Ajoutez un attribut displayname avec la valeur Net. <mx:series> <mx:columnseries yfield="gross" displayname="gross"> </mx:columnseries> <mx:columnseries yfield="net" displayname="net"> </mx:columnseries> </mx:series> Le displayname indique ce qui doit être affiché dans la légende. 4 Enregistrez et exécutez l application. Une légende doit apparaître au-dessus du graphique de comparaison. Le fichier devrait maintenant ressembler au fichier ComparisonChart_legend.mxml dans le dossier intermediate. Limiter les étiquettes affichées sur un axe Lors de la représentation de grands ensembles de données, il est fréquent que les données soient trop nombreuses pour que chaque élément puisse être signalé avec sa propre étiquette sur l axe. Un AxisRenderer peut cependant être utilisé pour vous aider à personnaliser l affichage de l axe.

24 554 Adobe Flex 3 Voici à quoi ressemble la syntaxe d un AxisRenderer : <mx:horizontalaxisrenderers> <mx:axisrenderer id="{axisid}" candroplabels="true false" canstagger="true false" showlabels="true false" showline="true false" ticklength="default depends on axis" tickplacement="inside outside cross none" title="no default"/> </mx:horizontalaxisrenderers> NOTE : Il ne s agit ici que d un sous-ensemble des éléments qui peuvent être définis pour un AxisRenderer. 1 Ouvrez ComparisonChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez aussi ouvrir ComparisonChart_legend dans le dossier intermediate et l enregistrer sous le nom ComparisonChart.mxml dans votre répertoire flexgrocer/src/ views/dashboard. 2 Entre la balise <mx:columnchart> d ouverture et la première balise <mx:horizontalaxis>, ajoutez une paire de balises <mx:horizontalaxisrenderer>. Dans la paire, ajoutez une balise <mx:axisrenderer> avec un candroplabels égal à true. <mx:columnchart id="chart" dataprovider="{dp}" width="100%" height="100%"> <mx:horizontalaxisrenderers> <mx:axisrenderer candroplabels="true" axis="{hcataxis}"/> </mx:horizontalaxisrenderers> <mx:horizontalaxis> <mx:categoryaxis id="hcataxis" dataprovider="{dp}" categoryfield="dtsale" labelfunction="renderdate"/> </mx:horizontalaxis> </mx:columnchart> Ce code indique à l axe horizontal que, s il n y a pas de place pour toutes les étiquettes, il suffit d afficher les étiquettes qui tiennent. Les étiquettes sont affichées à intervalles réguliers (une étiquette sur deux, une sur trois, etc.). 3 Enregistrez et testez l application. À présent, quel que soit le nombre de jours, de semaines ou de mois de données affiché, les étiquettes s affichent de manière lisible.

25 LEÇON 19 : Visualiser des données 555 Interagir avec des graphiques Comme tous les éléments dans le lecteur Flash, les graphiques possèdent un jeu complet d interactions qui peuvent être intégrées dans l application. Vous pouvez ainsi aisément afficher des infobulles lorsque l utilisateur survole des éléments des graphiques, mais encore permettre aux utilisateurs de cliquer sur des éléments du graphique pour provoquer d autres modifications dans l application. Événements de survol Les événements de survol sont très utiles et très simples à implémenter. Tous les graphiques prennent en charge une propriété appelée showdatatips. Lorsque vous lui attribuez la valeur true pour un graphique, une infobulle apparaît afin d afficher des données concernant l élément que l utilisateur survole. Événements de clic L autre type d interaction facile à implémenter est l événement click. Dans cet exercice, vous allez ajouter des infobulles aux graphiques de types et de ventes et permettre aux utilisateurs de filtrer les gras de types et de comparaison par catégorie lorsque l utilisateur clique sur un secteur du graphique à secteurs. Événements de sélection En plus de la possibilité de cliquer sur des éléments individuels des graphiques, Flex 3 inclut un framework pour sélectionner plusieurs éléments, en maintenant la touche Ctrl enfoncée (ou la touche Commande sur Mac) lors de la sélection des éléments ou en traçant un cadre de sélection autour d un certain nombre de points dans le graphique.

26 556 Adobe Flex 3 Ajouter des événements de graphique Grâce aux événements, vous pourrez rendre vos graphiques plus interactifs. 1 Ouvrez SalesChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez aussi ouvrir le fichier SalesChart_labelFunction.mxml du dossier intermediate et l enregistrer sous le nom SalesChart.mxml dans votre répertoire flexgrocer/src/ views/dashboard. 2 SDéfinissez l attribut showdatatips de la balise <mx:linechart> en lui attribuant la valeur true et l attribut datatipfunction en lui attribuant la valeur rendertips. <mx:linechart id="chart" dataprovider="{dp}" height="100%" width="100%" showdatatips="true" datatipfunction="rendertips"> Ces paramètres indiquent au graphique qu il doit afficher une infobulle lorsqu un élément est survolé et utiliser la fonction rendertips() pour déterminer ce qui doit être affiché. Vous allez créer rendertips() à la prochaine étape. 3 Dans le bloc <mx:script>, créez une fonction nommée rendertips() qui prend un unique argument appelé hd de type HitData et renvoyez un String. private function rendertips(hd:hitdata):string { var item:object = hd.item; return "<b>"+mmddyyyy.format(item.dtsale)+"</b><br>" + dollars.format(item[grossornet]); } Si vous utilisez la fonctionnalité de remplissage automatique du code, l instruction import pour HitData est ajoutée automatiquement. Sinon vous devez l ajouter explicitement. 4 Enregistrez et testez l application. Vous remarquerez que, lorsque vous survolez les éléments du graphique à lignes, des infobulles agréablement mises en forme s affichent. Le fichier complet doit maintenant ressembler au fichier SalesChart_dataTips.mxml du dossier intermediate.

27 LEÇON 19 : Visualiser des données Ouvrez TypeChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez aussi ouvrir le fichier TypeChart_labels.mxml du dossier intermediate et l enregistrer sous le nom TypeChart.mxml dans votre répertoire flexgrocer/src/views/ dashboard. 6 Définissez l attribut showdatatips de la balise <mx:piechart> en lui attribuant la valeur true et l attribut datatipfunction en lui attribuant la valeur rendertips(). <mx:piechart id="chart" dataprovider="{dp}" height="100%" width="100%" showdatatips="true" datatipfunction="rendertips"> Vous allez créer rendertips() à l étape suivante. 7 Dans le bloc <mx:script>, créez une fonction nommée rendertips() qui prend un unique argument nommé data de type HitData et renvoie un String. private function rendertips(data:hitdata):string{ var gross:number = data.item.gross; var net:number = data.item.net; return "Total Sales: " + dollars.format(gross)+ '\n' + "Total Profit: " + dollars.format(net); }

28 558 Adobe Flex 3 N oubliez pas d importer explicitement la classe mx.charts.hitdata si elle ne l a pas été automatiquement. Ici, la fonction rendertips() prend un objet HitData, trouve la valeur pour les propriétés gross et net et crée une chaîne en formatant le résultat avant de le renvoyer. 8 Enregistrez et testez l application. Vous remarquerez que, lorsque vous survolez des éléments dans le graphique à secteurs, des infobulles agréablement mises en forme s affichent (voir la figure suivante). Vous allez ensuite réagir aux événements click dans le graphique à secteurs. 9 Dans la balise <mx:piechart>, spécifiez un attribut itemclick de manière à appeler une fonction nommée broadcasttypechange() en lui passant event.hitdata.item en argument. <mx:piechart id="chart" width="100%" height="100%" dataprovider="{dp}" showdatatips="true" datatipfunction="rendertips" itemclick="broadcasttypechange(event.hitdata.item)"> itemclick est invoquée lorsque l utilisateur clique sur un élément dans le graphique. Dans ce cas, un objet ChartItemEvent est créé qui possède une propriété hitdata. La propriété hitdata est un objet décrivant le clic. La propriété item de hitdata contient une référence à l élément sur lequel l utilisateur a cliqué. À l étape suivante, vous allez écrire la fonction broadcasttypechange(), afin qu un événement soit réparti vers l application principale lorsque l utilisateur clique sur une catégorie de ce graphique. 10 Dans le bloc <mx:script>, créez une fonction nommée broadcasttypechange() qui prend un argument appelé item de type Object et renvoie void. Cette fonction créera une instance de la classe ObjectDataEvent et la répartira.

29 LEÇON 19 : Visualiser des données 559 private function broadcasttypechange(item:object):void{ var o:objectdataevent= new ObjectDataEvent("typeChange", item.category); this.dispatchevent(o); } ObjectDataEvent est un événement écrit précédemment qui possède une propriété personnalisée appelée data de type Object. 11 Déclarez un événement nommé typechange de type events.objectdataevent dans une balise <mx:metadata> en haut du composant TypeChart.mxml. <v:maxrestorepanel xmlns:mx=" xmlns:v="views.*"> <mx:metadata> [Event(name="typeChange", type="events.objectdataevent")] </mx:metadata> </v:maxrestorepanel> 12 Enregistrez TypeChart.mxml. Vous devez apporter une modification à Dashboard.mxml avant de pouvoir tester cette dernière modification. TypeChart.mxml devrait maintenant ressembler au fichier Type- Chart_events.mxml du dossier intermediate. 13 Ouvrez Dashboard.mxml dans votre répertoire flexgrocer/src. Il s agit de l application qui instancie les trois graphiques. 14 Trouvez l emplacement où TypeChart est instancié. Ajoutez un attribut pour gérer l événement typechange et appelez la fonction dotypechange() que nous allons écrire sous peu. <v:typechart id="type" width="100%" height="100%" title="sales By Type" grossornet="{grossornetgroup.selection.data}" typechange="dotypechange(event)" maximize="this.currentstate='fulltype'" restore="this.currentstate=''"/> Lorsque TypeChart répartit un événement de changement de type, le reste de l application doit réagir et se mettre à jour en fonction. 15 Dans le bloc <mx:script>, créez une fonction nommée dotypechange() qui prend un argument de type ObjectDataEvent. Cette fonction doit utiliser la méthode statique presetcombo() de la classe Util pour configurer le contrôle ComboBox dans le conte-

30 560 Adobe Flex 3 neur ApplicationControlBar. Ensuite, la propriété selectedtype doit être définie avec event.data.tostring(). Pour finir, la fonction doit envoyer le service web dashboardws. getsalesdata. private function dotypechange(event:objectdataevent):void{ Util.presetCombo(catCombo,"name",event.data.toString()); selectedtype = event.data.tostring(); dashboardws.getsalesdata.send(); } Lorsqu un ObjectDataEvent est diffusé, il faut que le contrôle ApplicationControl- Bar reflète le type actuellement sélectionné pour que vous puissiez utiliser la fonction presetcombo(). Comme vous l avez vu à la Leçon 18, Accéder à des objets côté serveur, la méthode de service web getsalesdata prend trois arguments : startdate, enddate et selectedtype. Pour que le service renvoie les bonnes données, vous devez donc d abord définir selectedtype puis envoyer le service. N oubliez pas que les classes utils.util et events.objectdataevent doivent toutes deux être importées. 16 Enregistrez et exécutez l application. Lorsque les graphiques sont tracés et que vous cliquez sur un secteur du graphique des types, le contrôle ComboBox se met à jour avec de nouvelles données chargées depuis le serveur de manière à n afficher que les ventes pour ce type de produit.

31 LEÇON 19 : Visualiser des données 561 Ajouter des animations aux graphiques Les graphiques dans Flex peuvent être personnalisés de manière presque illimitée. Vous pouvez notamment animer des données dans les graphiques ou appliquer des couleurs et des dégradés aux éléments qui les composent. Trois types d animations intégrées peuvent s appliquer aisément aux graphiques. Elles sont créées sous forme de sous-classes de la classe mx.charts.effects.serieseffect. Elles peuvent être utilisées avec une série showdataeffect ou un attribut hidedataeffect. Voici la liste de ces classes : SeriesInterpolate. L effet SeriesInterpolate déplace le graphique qui représente les données existantes d une série vers les nouveaux points d une nouvelle série. Au lieu d effacer le graphique et de le remplir à nouveau, elle crée une animation fluide entre les points de données d origine et les nouveaux points. L effet SeriesInterpolate ne s utilise qu avec un déclencheur d effet showdataeffect. Il n a aucun effet s il est défini avec un hidedataeffect. SeriesSlide. L effet SeriesSlide fait glisser une série de données dans et hors des limites du graphique. La propriété direction spécifie l emplacement à partir duquel la série doit glisser. Si vous utilisez SeriesSlide avec un déclencheur d effet hidedataeffect, la série glisse de sa position courante à l écran vers une position hors écran dans la direction indiquée. Si vous utilisez SeriesSlide avec showdataeffect, la série glisse depuis l extérieur de l écran vers une position dans l écran, dans la direction indiquée. SeriesZoom. L effet SeriesZoom opère un zoom avant ou arrière sur les données de graphique autour du point focal spécifié. Comme avec l effet SeriesSlide, l effet opère un zoom avant ou arrière selon qu il est attribué aux déclencheurs d effet showdataeffect ou hidedataeffect. 1 Ouvrez TypeChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez aussi ouvrir le fichier TypeChart_events.mxml du dossier intermediate et l enregistrer sous le nom TypeChart.mxml dans votre répertoire flexgrocer/src/views/ dashboard. 2 Juste avant la balise <mx:viewstack>, ajoutez une balise <mx:seriesinterpolate> dont l attribut id vaut interpolate et l attribut elementoffset vaut 5. <mx:seriesinterpolate id="interpolate" elementoffset="5"/> L attribut elementoffset spécifie un certain nombre de millisecondes de délai avant de déclencher l effet.

32 562 Adobe Flex 3 3 Trouvez la balise <mx:pieseries> et ajoutez un attribut showdataeffect="interpolate". <mx:pieseries field="{grossornet}" labelposition="insidewithcallout" labelfunction="renderlabel" showdataeffect="interpolate" > Cet attribut indique à la série que les données doivent être animées lorsqu elles sont ajoutées au graphique. 4 Enregistrez et exécutez l application. Observez les effets lorsque les données s affichent dans le graphique à secteurs ou lorsque les données changent. Le fichier complet doit maintenant ressembler au fichier Type- Chart_interpolate.mxml du dossier intermediate. Personnaliser l apparence des graphiques avec des styles Vous pouvez mettre en forme un certain nombre d éléments dans le graphique, par exemple en appliquant des couleurs aux lignes, en définissant des couleurs de remplissage, en appliquant des dégradés de remplissage, des valeurs alpha, etc. Ces styles se définissent souvent pour chacun des Series d un graphique. Comme vous l avez vu dans cette leçon, Flex procède à l affichage des éléments et opère un choix automatique des couleurs lorsque aucun style n est défini. Si vous souhaitez contrôler plus précisément les couleurs, vous pouvez spécifier des choix aussi précis que vous le souhaitez. Voici la structure à respecter pour spécifier des couleurs de remplissage pour un Series : <mx:columnseries displayname="net" yfield="net"> <mx:fill> <mx:lineargradient> <mx:entries> <mx:gradiententry color="#0000ff" ratio="0" alpha="1"/> <mx:gradiententry color="#0000dd" ratio=".1" alpha="1"/> <mx:gradiententry color="#000022" ratio=".9" alpha="1"/> <mx:gradiententry color="#000000" ratio="1" alpha="1"/> </mx:entries> </mx:lineargradient> </mx:fill> </mx:columnseries>

33 LEÇON 19 : Visualiser des données 563 Dans cet exemple, un remplissage en dégradé à quatre couleurs est appliqué à une série de colonnes dans un graphique à colonnes. Vous remarquerez qu un remplissage de dégradé prend un tableau d éléments GradientEntry, chacun avec un attribut color, ratio et alpha (que l on appelle des entrées ou entries). Dans cet exercice, vous allez appliquer un remplissage de dégradé au graphique à secteurs. 1 Ouvrez TypeChart.mxml dans votre répertoire flexgrocer/src/views/dashboard. Vous pouvez aussi ouvrir le fichier TypeChart_interpolate.mxml du dossier intermediate et l enregistrer sous le nom TypeChart.mxml dans votre répertoire flexgrocer/src/ views/dashboard. 2 Enregistrez les balises <mx:pieseries>, ajoutez une balise <mx:fills>. <mx:pieseries field="{grossornet}" labelposition="insidewithcallout" labelfunction="renderlabel" showdataeffect="interpolate" > <mx:fills> </mx:fills> </mx:pieseries> À l étape suivante, vous allez spécifier six dégradés différents à utiliser pour les données dans le graphique à secteurs. 3 Dans les balises <mx:fills> que vous venez de créer, spécifiez six dégradés circulaires, chacun avec deux couleurs. Le premier possède un ratio égal à 0 et le second, un ratio égal à 1, comme l indique le tableau suivant. Couleur 1 Ratio couleur 1 Couleur 2 Ratio couleur 2 #EF #994C34 1 #E9C836 0 #AA #6FB35F 0 #497B54 1 #A1AECF 0 #47447A 1 # # # #