Video sur les Charting Components

13 11 2008

playvideomichael

L’équipe d’Adobe TV m’a demandé d’enregistrer une vidéo de présentation des Charting Components. En quelques minutes, je montre comment afficher une courbe et un histogramme à partir de données dans un tableau. Dernière touche: l’insertion d’un tag SeriesInterpolate pour exprimer le changement entre deux états. Voici les sources du projet que j’ai réalisé pour cette vidéo:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #B3DDFA]">
    <mx:Script source="as/data.as"/>
    <mx:SeriesInterpolate duration="500" id="myInter"/>
    <mx:Panel height="500" layout="absolute" title="Dashboard" left="10" top="10" right="10">
        <mx:ColumnChart y="0" showDataTips="true" id="columnchart1" dataProvider="{phoneSales06}" right="10" left="100">
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries displayName="Europe" yField="EMEA" showDataEffect="{myInter}">
                    <mx:fill>
                        <mx:LinearGradient>
                            <mx:GradientEntry color="0x007dac" ratio="0"/>
                            <mx:GradientEntry color="0x08a2db" ratio="0.66"/>
                            <mx:GradientEntry color="0x01384c" ratio="1"/>
                        </mx:LinearGradient>
                    </mx:fill>
                </mx:ColumnSeries>
                <mx:LineSeries  form="curve" displayName="Asia" yField="APAC"  showDataEffect="{myInter}">
                    <mx:lineStroke>
                        <mx:Stroke color="0xb3ce00" weight="3"/>
                    </mx:lineStroke>

                </mx:LineSeries>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{columnchart1}"/>
        <mx:Button x="93" y="408" label="2006" click="{columnchart1.dataProvider=phoneSales06}"/>
        <mx:Button x="169" y="408" label="2007" click="{columnchart1.dataProvider=phoneSales07}"/>

    </mx:Panel>
</mx:Application>

Et voici le dataProvider:

[Bindable]
private var phoneSales07:Array = [
{Month: "January",     EMEA:885202,     APAC: 184454  },
{Month: "February",     EMEA:683392,     APAC: 345385  },
{Month: "March",     EMEA:638820,     APAC: 442383  },
{Month: "April",     EMEA:949932,     APAC: 841201  },
{Month: "May",     EMEA:704302,     APAC: 400449  },
{Month: "June",     EMEA:704302,     APAC: 700449   },
{Month: "July",     EMEA:453552,     APAC: 393039  },
{Month: "August",     EMEA:387254,     APAC: 746652  },
{Month: "September",     EMEA:537254,     APAC: 263652 },
{Month: "October",     EMEA:686254,     APAC: 472652  },
{Month: "November",     EMEA:820254,     APAC: 246652},
{Month: "December",     EMEA:800254,     APAC: 826652}
];
[Bindable]
private var phoneSales06:Array = [
{Month: "January",     EMEA:782202,     APAC: 124454  },
{Month: "February",     EMEA:553392,     APAC: 905385  },
{Month: "March",     EMEA:508820,     APAC: 402383  },
{Month: "April",     EMEA:809932,     APAC: 801201  },
{Month: "May",     EMEA:684302,     APAC: 557449  },
{Month: "June",     EMEA:684302,     APAC: 507449   },
{Month: "July",     EMEA:393552,     APAC: 303039  },
{Month: "August",     EMEA:227254,     APAC: 706652  },
{Month: "September",     EMEA:407254,     APAC: 303652 },
{Month: "October",     EMEA:506254,     APAC: 532652  },
{Month: "November",     EMEA:700254,     APAC: 506652},
{Month: "December",     EMEA:750254,     APAC: 906652}
];

Actions

Information

7 responses

15 11 2008
switcherdav

Vraiment sympa, c’est avec ces composants que j’ai pu faire acheter une licence à ma boite.

Certes, des bibliothèques javascript, PHP et autres permettent d’en faire autant, mais pas aussi rapidement et facilement.

Et c’est là le plus important pour une entreprise, proposer un produit fonctionnel très rapidement et pouvoir facilement le « customiser » et lui ajouter des fonctionnalité.

Et cet IDE, quel bonheur ….

Je prend un plaisir particulier de développer devant les utilisateurs avec Flex, au bout de 10 minutes, ils veulent tous devenir développeurs.

Merci Adobe, merci Flex et merci Mickael

16 11 2008
michael chaize

Je suis d’accord avec toi. Flex a un très fort taux d’adoption et d’affectif. Je pense que la communauté de développeurs d’applications web attendaient un langage et un IDE dédiés à la production d’interfaces.

16 11 2008
Pierre

Top cool ta présentation, l’effet interpolate est absolument génial.

Seule remarque : la courbe démarre à coté de de la colonne, pour une question de visibilité il aurait été, je pense, plus intéressant de la faire démarrer au milieu de de la colone et ainsi n’a voir qu’une colone unique pour chaque mois.
Ainsi chaque mois ne serait plus sudiviser entre Europe et Asie sur le graphique

Exemple pour le mois de Janvier

Avant :
——
– –
– –
– –
– –
– – +
– –
——

APRES
——
– –
– –
– –
– –
– + –
– –
——

Cordialement

18 11 2008
Clément

Félicitation !

Je vois que ton blog ne prend pas les trackback car http://www.dator.fr/videos-sur-les-composants-graphiques-de-flex-presente-par-le-francais-michael-chaize-sur-adobetv/ !

Très bonne vidéos et merci encore😉

Clément

19 11 2008
Christian Fauré

Bonne vidéo, bravo Michaël

21 11 2008
Tres Colores Zunea

Merci pour le message subliminal vers le site Sexy People (situé dans la barre de favoris) !

21 11 2008
michael chaize

lol. Bien vu. Il est trop marrant ce site… un peu moqueur quand même :
http://www.sexypeople-blog.com/

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s




%d blogueurs aiment cette page :