Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

7jan/110

[Offre d'emploi] – Développeur Flex / PHP sur Coignières (78)

Développeur Flex / PHP (Coignières 78310 Saint quentin en Yvelines) – Offre d'emploi

  • Titre: Développeur Flex / PHP
  • L'entreprise: Flash-Attitude.com (http://www.flash-attitude.com) Développement d'applications internet : site web, extranet, e-commerce, etc. et applications métier Flex. Hébergement, sauvegarde de données, E-marketing, référencement et web design. Jeune société en pleine croissance avec une forte valeur ajoutée technologique.

Profil Recherché

  • Profil recherché:
    • Débutant recherchant projet professionnel intéressant et motivant.
  • Compétences Techniques Requises:
    • Connaissances en Flash, Flex, PHP, MySQL, et XML.
    • Linux serait un plus.
  • Expérience Requise: -
  • Disponibilité: Immédiate

Conditions d'embauche

  • Lieu : Coignières 78310 (Saint quentin en Yvelines)
  • Rémunération: A débattre
  • Contrat: CDI

Pour postuler

  • Contact:
    • Faire parvenir un mail avec CV et lettre de motivation à Laurent Jugeau laurent(at)flash-attitude.com.
1juil/097

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

This movie requires Flash Player 11

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.

28juin/091

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.

28avr/0910

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.

2avr/0910

Flex Tips – Remplir un Model à partir d'un fichier de configuration XML automatiquement

Je viens de lire un article sur un blog qui je pense va intéresser la plupart des Flexeurs ici. Je ne connaissais pas ce mécanisme de Reflection et d'introspection. Vous verrez une fois que vous aurez compris le fonctionnement, la puissance de cette classe qui va vous faire économiser beaucoup de temps!

Le constat est que souvent, pour des applications Flex qui deviennent assez conséquentes,  vous allez vouloir externaliser votre configuration afin de ne pas avoir à compiler à chaque fois pour juste modifier des paramètres. Il y a bien sûr bien d'autres raisons qui pourront vous poussez à externaliser votre config, qui est une bonne pratique. Vous allez souvent préférer un fichier de configuration XML, pour sa facilité de modification et de parcours grâce à e4x.

Ensuite, vous allez charger ce fichier XML et le "mapper" avec une classe Model de votre application. C'est à dire que vous allez faire la correspondance entre les paramètres de votre fichier XML et les variables membre de votre classe.

Voici par exemple, un exemple de configuration que vous pourriez avoir à charger:

<menu>
    <icecream name="Rocky Road" chunksPerSpoonful="12" color="#E9E8CB"/>
    <icecream name="Coffee" chunksPerSpoonful="0" color="#8F6B43"/>
</menu>

Ou vous pouvez aussi choisir de ne pas utiliser des attributs, mais plutôt des noeuds enfants (child):

<menu>
    <icecream>
        <name>Rocky Road</name>
        <chunksPerSpoonful>12</chunksPerSpoonful>
        <color>#E9E8CB</color>
    </icecream>
    <icecream>
        <name>Coffee</name>
        <chunksPerSpoonful>0</chunksPerSpoonful>
        <color>#8F6B43</color>
    </icecream>
</menu>