AIR Mobile – Application Sales Dashboard d'exemple (sources) : Charting, renderers, …
Adobe partage une application nommée "Sales dashboard" créée par @renaun, Adobe evangelist. Celle-ci se décline en une application Web et une application Mobile (Android pour le moment).
Cette application utilise plusieurs fonctionnalités avancées du SDK vous permettant d'afficher des graphiques (charts) ou bien de vous adapter aux DPI du device. Voici les éléments mis en place dans cette application:
- ViewNavigatorApplication
- MultiDPIBitmapSource
- SkinnablePopUpContainer
- RuntimeDPIProvider
- Charting Components
- LabelItemRenderer
Vous pouvez télécharger les sources (FXP) de cet exemple sur cette page:
http://www.adobe.com/devnet/flex/samples/sales-dashboard-application.html
Perso, je n'ai pas trouvé l'application très impressionnante ni pratique mais cela peut vous donner des snippets de code pour votre développement Flex 4.5 
.
AdvancedDataGrid, Charting et OLAPDataGrid (datavisualization.swc) enfin GRATUIT!
En voilà une excellente nouvelle de la part d'Adobe (non, pas la sortie de Flash Player 10.1 
), la mise à disposition du SWC datavisualization.swc dans le SDK Open Source et sans restriction de licence.
Il y a 9 mois, je vous annonçais l'open-sourcing du Flex Data Visualization mais ici on parle bien de l'aspect gratuit de cette librairie. En effet, Open source ne veut pas forcement dire gratuit.
La nouvelle responsable produit sur Flex (Deepa Subramaniam) en a fait l'annonce lors du 360|Flex:
Flex advanced data visualization components now part of the FREE open source Flex SDK!
Pour résumer, vous n'aurez plus besoin d'une licence Flex Builder Professionnal pour utiliser les composants de la librairie datavisualization.swc. Parmi eux, on peut trouver:
- AdvancedDataGrid: Composant qui va bien au delà de la DataGrid, avec de nouvelle possibilités d'itemRenderer, de bilan et de groupement (et bien d'autres)
- Charting: Tous les graphiques possibles avec Flex (histogramme, bulles, etc.)
- OLAPDataGrid: Peut servir pour des besoins spécifiques d'agrégation de données.
Je viens de vérifier sur le dernier "nightly build" de Flex 4, le swc est bien là dans le SDK Open Source:
Télécharger le dernier build du Flex 4 SDK
Voila donc une excellente nouvelle pour la communauté Flex, puisque l'on peut maintenant réellement créer l'ensemble des applications entreprise que l'on souhaite sans débourser un sou (pour rappel, le SDK est gratuit, seul Flex Builder est payant). Le prix d'entrée pour un développeur se trouve du coup largement réduit. Pour rappel, voici la grille des prix Adobe:
- Flex Builder 3 standard: 249$
- Flex Builder 3 professional: 699$
Bon maintenant, on peut se demander à quoi va servir une licence Flex Builder Pro par rapport à une licence Flex standard. Pour l'instant je ne vois que le profiler et peut-être les wizards (même pas sûr et puis qui utilise les wizards ?^^). En regardant les derniers build Flex 3 SDK, on dirait que ce n'est que pour le SDK Flex 4. Mais bon, on peut compiler des applications Flex 3 avec le Flex 4 SDK donc peu importe.
Bref, vivement que Flex 4 et Flex Builder 4 sortent, il se font vraiment attendre maintenant
Flex Chart – Utilisation des fills, des stroke et des fillFunction dans les Charts
Tutorial écrit par Serge Boujo
Agir sur le choix des couleurs dans les Charts
J’ai eu à agrémenter des résultats de graphiques, pour lesquels je souhaitais utiliser des couleurs autres que celles proposées en standard par Flex.
Du fait d’une lecture incomplète de la documentation, j’ai utilisé une FillFunction sans chercher plus loin : j’arrivais à fixer les couleurs pour le graphe, mais non pour la légende.
Flex Source Code Download: Télécharger le code source complet de l'application
La démarche à proscrire
J’ai utilisé une fillFunction pour afficher mes secteurs en rouge et en vert.
Lors de la déclaration de la Legend, ayant spécifié mon Chart en tant que dataProvider, j’étais persuadé que les couleurs affichées dans la Legend suivraient.
La lecture du code de la fonction confirme l’inadéquation de la solution : on remarque que le paramètre item n’est pas utilisé, mais surtout que le résultat renvoyé dépend uniquement du rang de la valeur au sein de la série, trahissant l’esprit d’une fillFunction.
Un petit rappel de la doc:
The signature of the fillFunction is as follows:
function_name(element:ChartItem, index:Number):IFill { ... }
The following table describes the arguments:
- element: The chart item for which the fill is created; type ChartItem.
- index: The index of the chart item in the series's data provider; type Number.
L’exemple de fillFunction ci-dessus fixe en même temps teinte et alpha de la SolidColor, mais il est tout à fait possible de n’intervenir que sur l’un des deux. Le code deviendrait alors, si l’on ne voulait jouer que sur l’opacité.
private function myFillFunc(item:PieSeriesItem, index:Number) : IFill {
var coul: SolidColor = new SolidColor(0xDDDDDD);
if (index == 0){
coul.alpha = 1.0
}else {
coul.alpha = 0.4;
}
return coul;
}
Utilisation correcte des fills, des stroke et des fillFunctions dans les Charts
Les erreurs que j’ai commises et décrites dans mon précédent tuto m’ont incité à creuser la question ; une relecture soigneuse et approfondie de la documentation de Flex m’a permis d’y voir un peu plus clair.
La démarche correcte consiste en l’abandon de cette fillFunction et en l’utilisation de fills.
Pour ceux qui veulent approfondir, on peut également fixer des stroke différents pour le tour et pour les séparations des pies.
Flex Modules – Communication Module vers Application
Dans l'article précédent, on a vu comment communiquer entre une application Flex et un module. Voyons maintenant comment créer une communication entre un module et l'application qui le charge.
Les modules peuvent accéder aux propriétés et aux méthodes de l'application parente en utilisant une référence vers la propriété "parentApplication".
L'exemple suivant accède à la propriété "expenses" de l'application parente au chargement du module. Le module utilise ensuite cette propriété, un ArrayCollection, comme source pour la donnée du graphique. Quand l'utilisateur clique sur le bouton, le module appelle la méthode getNewData() de l'application parente qui renvoie un nouvel ArrayCollection pour le Chart:
Le code du module
<?xml version="1.0"?>
<!-- modules/ChartChildModule.mxml -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="100%"
creationComplete="getDataFromParent()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expenses:ArrayCollection;
// Access properties of the parent application.
private function getDataFromParent():void {
expenses = parentApplication.expenses;
}
]]>
</mx:Script>
<mx:ColumnChart id="myChart"
dataProvider="{expenses}">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{expenses}"
categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField="Month"
yField="Profit"
displayName="Profit"/>
<mx:ColumnSeries xField="Month"
yField="Expenses"
displayName="Expenses"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
<mx:Button id="b1"
click="expenses = parentApplication.getNewData();"
label="Get New Data"/>
</mx:Module>
L'application parente qui va être appelée
DataFilterLib – Filtrer plusieurs vues en utilisant le DataBinding
Voici un nouvel exemple de la DataFilterLib qui montre simplement comment on peut mettre à jour plusieurs vues avec un seul filtre. Dans cet exemple, j'ai 4 composants qui ont tous comme dataProvider, la même ArrayCollection. J'ai ainsi une DataGrid, une TileList, une List et un Chart qui affichent ma donnée (donnée d'exemples avec des appareils photo).
Pour effectuer mon filtrage, j'utilise un filtre de type INTERVAL, que vous pouvez configurer à votre guise. Cet article explique le fonctionnement des DataFilterInterval en détail. Grâce au mécanisme de Data Binding entre mes vues et mon model, toutes les vues vont se mettre à jour pendant la modification du filtrage.
Démonstration en ligne (onglet "Filter multiple views")
Mes projets (Open Source)
Autres
