Flex Chart – Utiliser un fichier XML comme dataProvider
Vous pouvez définir votre donnée dans un fichier XML structuré. L'exemple suivant montre le contenu d'un fichier nommé data.xml:
<data> <result month="Jan-04"> <apple>81768</apple> <orange>60310</orange> <banana>43357</banana> </result> <result month="Feb-04"> <apple>81156</apple> <orange>58883</orange> <banana>49280</banana> </result> </data>
Vous pouvez charger ce fichier directement comme source d'un mx:Model comme dans l'exemple suivant:
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html"> <mx:Model id="results" source="data.xml"/> <mx:Panel title="Line Chart"> <mx:LineChart id="myChart" dataProvider="{results.result}" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series> <mx:LineSeries yField="banana" displayName="Banana"/> <mx:LineSeries yField="apple" displayName="Apple"/> <mx:LineSeries yField="orange" displayName="Orange"/> </mx:series> </mx:LineChart> <mx:Legend dataProvider="{myChart}"/> </mx:Panel> </mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Vous pouvez utiliser des XML plus complexes pour définir la data de votre dataProvider. Par exemple, un dataProvider XML peut avoir plusieurs noeuds imbriqués. Dans ce cas, cependant, vous devez avoir une dataFunction pour définir les champs que le Chart doit utiliser.
Flex Chart – Mettre à jour la donnée (ArrayCollection) en temps réel
Dans le tutorial précédent, vous avez vu comment utiliser un ArrayCollection comme dataProvider d'un Chart. L'avantage de l'utilisation d'une Collection et pas d'un tableau statique est qu'il peut être mis à jour en temps réel. L'exemple suivant crée un objet avec le temps écoulé et l'utilisation mémoire chaque seconde. On fait ensuite un push (ajout) de ce nouvel objet dans l'ArrayCollection qui est utilisé comme dataProvider pour un LineChart. Au final, le Chart lui-même se met à jour chaque seconde, montrant l'utilisation mémoire de Flash Player ou d'Adobe Air au cours du temps.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initTimer()" viewSourceURL="srcview/index.html">
<mx:Script><![CDATA[
import flash.utils.Timer;
import flash.events.TimerEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var memoryUsage:ArrayCollection = new ArrayCollection();
public function initTimer():void {
// The first parameter in the Timer constructor
// is the interval, in milliseconds.
// The second parameter is how many times to run (0 is
// infinity).
var myTimer:Timer = new Timer(1000, 0);
// Add the listener for the timer event.
myTimer.addEventListener("timer", timerHandler);
myTimer.start();
}
public function timerHandler(event:TimerEvent):void {
var o:Object = new Object();
// Get the number of milliseconds since Flash Player or AIR started.
o.time = getTimer();
// Get the total memory Flash Player or AIR is using.
o.memory = flash.system.System.totalMemory;
trace(o.time + ":" + o.memory);
// Add new object to the ArrayCollection, which is bound
// to the chart's data provider.
memoryUsage.addItem(o);
}
]]></mx:Script>
<mx:LineChart id="chart" dataProvider="{memoryUsage}" showDataTips="true">
<mx:horizontalAxis>
<mx:LinearAxis/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis minimum="5000000"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries yField="memory"/>
</mx:series>
</mx:LineChart>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Les Collections de data peuvent être paginées, ce qui veut dire que la donnée est envoyée au client par morceaux (chunk) quand l'application le demander. Mais les Charts Flex affiche toute la data tout le temps par défaut. C'est pourquoi, quand vous utilisez des data collections avec des Charts, vous devriez toujours désactiver les fonctionnalités de paging, ou utiliser les vues non-paginées de la data collection.
Interview – Gregory Tappero, fondateur d'Edoboard
Il y a peu, je vous présentais l'application Edoboard, permettant de donner des cours à distance. Edoboard est une plateforme de soutien scolaire en ligne, une sorte de whiteboard avancé spécialisé pour l'enseignement des maths à distance. Pour son développement, ils se sont tournés vers la Flash Platform, et notamment vers AFCS, ce qui mérite d'être souligné.
Voici donc quelques Q&R avec son concepteur, Gregory j'Tappero:
Salut Gregory, tout d'abord pourrais-tu présenter l'équipe derrière Edoboard
Bonjour Fabien.
A la base nous sommes deux ingénieurs Clément et Greg tous les deux 26 ans. Nous avons démarré la startup ensemble l'été dernier après un mastère a HEC. Avant ce mastère, j'ai étudié les sciences de l'informatique(Comp. Science) a Sydney pendant cinq ans, n'ayant pas choisi cette voie par hasard je m'occupe donc du développement de la plate-forme Flex et Web.
Mon associé co-fondateur clément, en plus de donner un coup de main de temps en temps sur le code gère les nombreuses autres tâches nécessaires pour faire d'Edoboard un vrai service.
Depuis peu Vincent stagiaire en dernière année d'Epita est venu renforcer l'équipe pour s'occuper de la partie Flex
Quelles technologies / frameworks ont été utilisés pour concevoir Edoboard ?
La plate-forme e-learning d'Edoboard est donc en Flex. Nous utilisons AFCS pour certains de ses modules "pods" tels que le chat et le partage de fichiers.
AFCS gère aussi, en plus des flux audio/videos, la synchronisation des données entre les utilisateurs utile pour le partage du tableau blanc.
Du côté Web c'est du Django une puissante framework web en Python que j'évangélise. Django se marie très bien avec le Flex, communiquant ensemble via PyAmf sans encombre.
Un détail intéressant est l'utilisation du rendu LaTeX qui se fait avec un service Web, lui aussi en Python.
Au final cela fait d'Edoboard un bon exemple de Mashup Technologique.
Edoboard était-il ta première expérience avec Flex?
A part une animation de fusée faite avec flash il y a 10 ans j'avais banni Flash et ActionScript de mon vocabulaire.
Edoboard était donc ma première expérience avec Flex et je dois avouer que j'ai été agréablement surpris, même s'il reste encore quelques bugs par ci par là, ceux-ci sont connus et contournables. ActionScript 3 a était une belle évolution pour flash et fait de Flex un framework de premier choix pour du RIA web ou desktop.
Qu'est-ce qui vous a poussé à choisir AFCS pour la partie communication temps réel, avez-vous envisagé des solutions alternatives ?
Mes projets (Open Source)
Autres
