Flex AdvancedDataGrid – Utiliser un dataProvider XML (sous forme XMLList)
Dans les exemples sur les Flex AdvancedDataGrid, on utilisait un ArrayCollection car c'est assez pratique et compact pour notre donnée. Mais vous pouvez bien sur peupler votre dataProvider avec de la donnée XML, un retour XML serveur par exemple.
On va utiliser la classe HierarchicalData. En passant notre XML (XMLList en fait) dans le constructeur d'un HierarchicalData, la conversion se fera toute seule, comme si vous lui aviez donné un ArrayCollection.
Voici un exemple de code utilisant un XMLList pour peupler une AdvancedDataGrid:
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.collections.HierarchicalData; import mx.collections.XMLListCollection; ]]> </mx:Script> <mx:XMLList id="dpHierarchyXML" > <Region Region="Southwest"> <Region Region="Arizona"> <Territory_Rep Territory_Rep="Barbara Jennings" Actual="38865" Estimate="40000"/> <Territory_Rep Territory_Rep="Dana Binn" Actual="29885" Estimate="30000"/> </Region> <Region Region="Central California"> <Territory_Rep Territory_Rep="Joe Smith" Actual="29134" Estimate="30000"/> </Region> <Region Region="Nevada"> <Territory_Rep Territory_Rep="Bethany Pittman" Actual="52888" Estimate="45000"/> </Region> <Region Region="Northern California"> <Territory_Rep Territory_Rep="Lauren Ipsum" Actual="38805" Estimate="40000"/> <Territory_Rep Territory_Rep="T.R. Smith" Actual="55498" Estimate="40000"/> </Region> <Region Region="Southern California"> <Territory_Rep Territory_Rep="Alice Treu" Actual="44985" Estimate="45000"/> <Territory_Rep Territory_Rep="Jane Grove" Actual="44913" Estimate="45000"/> </Region> </Region> </mx:XMLList> <mx:AdvancedDataGrid width="100%" height="100%" dataProvider="{new HierarchicalData(dpHierarchyXML)}"> <mx:columns> <mx:AdvancedDataGridColumn dataField="@Region" headerText="Region"/> <mx:AdvancedDataGridColumn dataField="@Territory_Rep" headerText="Territory Rep"/> <mx:AdvancedDataGridColumn dataField="@Actual" headerText="Actual"/> <mx:AdvancedDataGridColumn dataField="@Estimate" headerText="Estimate"/> </mx:columns> </mx:AdvancedDataGrid> </mx:Application>
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 Tree – Utiliser une filterFunction en récursif sur des noeuds XML
Lorsque vous utiliser un dataProvider dans un composant Flex d'affichage de data (DataGrid, List, Tree, ...), vous pouvez utiliser plusieurs types de dataProvider (XMLList, ArrayCollection par exemple) qui seront ensuite convertis par derrière par Flex pour qu'il puisse effectuer ses opérations et afficher la data. De base, toute votre donnée sera affichée, ou tout du moins celle qui peut être affichée dans une liste par exemple.
Quand vous aurez beaucoup de data, vous voudrez souvent la filtrer selon un critère. Par exemple, laisser l'utilisateur taper le nom qu'il cherche et n'afficher que la data contenant ce texte. Pour cela, il faut utiliser une filterFunction. Celle-ci va être appelée par Flex automatiquement pour chaque élément pour savoir si la data doit être affichée ou non.
La signature d'une filterFunction est simple, elle prend un item de type Object en argument et renvoie un Boolean (true ou false donc). Flex va donc passer tous les objets du dataProvider dans cette fonction et suivant le Boolean retourné par la fonction, il va l'afficher ou non. Voici la tête d'une filterFunction:
public function myFilterFunction(item:Object):Boolean{
// ...vérifications sur item
return true ou false suivant si on veux afficher ce résultat;
}
Seulement, si vous essayez avec un Tree, vous verrez que cela ne fonctionne pas. Le filtre est seulement appliqué aux nœuds de plus haut niveau de la collection, il n'est pas appliqué de manière récursive sur les nœuds enfants.
Flex Chart – Ajouter des Series depuis une lecture XML e4x
Dans les exemples précédents, on a vu comment créer un Chart Flex en ActionScript et comment ajouter des Series à la volée en AS3. On va maintenant prendre un XML de data en entrée pour créer nos séries de manières dynamique, en fonction de la data.
On va utiliser la syntaxe e4x pour extraire les données uniques de notre data (ici, des noms). A l'issue de cette extraction, on aura un tableau de nom (Array). On va ensuite itérer sur ce tableau de nom pour construire une LineSeries pour chaque nom.
Flex Localization – Compilation de ressources dans une application Flex
Après avoir crée des fichiers ressource .properties, vous pouvez soit compiler ces ressources dans des "bundles" dans votre application, soit le compiler en tant que "module" pour qu'ils soient chargé à l'exécution.
- Si vous compilez ces ressources dans l'application, le compilateur mxmlc va les convertir en sous-classe de la classe ResourceBundle, et les ajouter à votre application à la compilation.
- Si vous compilez ces ressources dans des "Resources Modules", le compilateur va les compiler en fichier SWF que vous pourrez charger à la volée
Nous verrons la compilation de Resources Module dans un prochain tuto Flex, penchons nous plutôt sur la compilation de Resource Bundles.
Compiler des ressources dans l'application en ligne de commande
Avec le compilateur mxmlc
- Spécifiez une ou plusieurs "locale" à compiler dans votre application, avec l'option -locale du compilateur. La valeur de cette option est utilisée par l'option -source-path pour trouver le fichier contenant les ressources. L'option -library-path utilise aussi cette valeur pour inclure un framework localisé
- Spécifiez l'emplacement de la ressource avec l'option -source-path. Vous pouvez ajouter des ressources pour plus d'un langage national en utilisant le token {locale}
- Fixez la velur de l'option -allow-source-path-overlap à true. C'est optionnel mais si vous ne le faîtes pas, vous pourriez obtenir un warning indiquant que le source path est un sous-repertoire du source path du projet.
Voici un exemple de ligne de commande pour mxmlc. Ici, l'application LocalizedForm.mxml utilise une ressource pour un seul langage national, en_US:
mxmlc -locale=en_US -source-path=c:\myapp\locale\{locale} -allow-source-path-overlap=true c:\myapp\LocalizedForm.mxml
Vous pouvez spécifier les locale dans le fichier flex-config.xml utilisé par le compilateur mxmlc. Spécifiez les locales en utilisant le tag <locale> comme dans cet exemple:
<locale>
<localeElement>en_US</localeElement>
</locale>
Pour ajouter des entrées à votre source-path dans le fichier de config, utilisez le tag <source-path> comme ceci:
<source-path>
<path-element>locale/{locale}</path-element>
</source-path>
Le tag <source-path> est commenté par défaut
Mes projets (Open Source)
Autres
