Archives pour la catégorie Formatter

FlexFormatter – Formatter du code AS3 / MXML avec le plugin Flex Formatter pour Eclipse / Flex Builder

De base, Flex Builder ne fournit pas d’outil pour formatter et indenter le code. Heureusement, la plate-forme Eclipse est extensible et permet d’ajouter des plugins facilement. Il existe un plugin pour formatter le code de vos projet Flex nommé FlexFormatter.
Cet outil est OpenSource et gratuit. Pour le télécharger, rendez-vous sur la page sourceforge du projet:

Télécharger FlexFormatter (plugin Eclipse / Flex Builder)

Installer FlexFormatter dans Flex Builder 3 / Eclipse

Pour installer FlexFormatter, c’est très simple. Tout d’abord, dézippez l’archive que vous venez de télécharger. Vous devriez avoir 3 fichier JAR:

flexfm-1

Copiez ces 3 fichiers jars directement dans le répertoire « plugins » de votre installation d’Eclipse ou de Flex Builder:

flexfm-2
Lire la suite →

Flex AdvancedDataGrid – Utiliser un Formatter dans une colonne

La classe AdvancedDataGridColumn contient une propriété « formatter » à laquelle vous pouvez passer une instance d’une classe de type Formatter, ou un instance d’une classe héritant de Formatter. La classe Formatter va convertir la donnée en une chaîne personnalisée.
Par exemple, vous pouvez utiliser la classe CurrencyFormatter pour préfixer les valeurs de la colonne de prix avec le signe $ ou €.

Vous pouvez utiliser une classe Formatter en même temps qu’une callback pour la labelFunction et pour la styleFunction. Le fomatter sera appelé après ces fonctions de callback.

L’exemple suivant modifie l’exemple sur l’application de styles aux lignes et ajoute un CurrencyFormatter à la colonne de prix pour lui ajouter le signe €:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
		// Include the data for the AdvancedDataGrid control.
		include "StyleData.as"
		// Artist name to highlight.
		protected var artistName:String;
		// Event handler to set the selected artist's name
		// based on the selected Button control.
		public function setArtistName(event:Event):void{
			artistName=Button(event.currentTarget).label;
			// Refresh row display.
			myADG.invalidateList();
		}
		// Callback function that highlights in red
		// all rows for the selected artist.
		public function myStyleFunc(data:Object, col:AdvancedDataGridColumn):Object{
			if (data["Artist"] == artistName){
				return {color:0xFF0000};
			}
			// Return null if the Artist name does not match.
			return null;
		}
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		dataProvider="{dpADG}"
		styleFunction="myStyleFunc">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn dataField="Price">
				<mx:formatter>
					<mx:CurrencyFormatter currencySymbol="€" alignSymbol="right"/>
				</mx:formatter>
			</mx:AdvancedDataGridColumn>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<mx:HBox>
		<mx:Button label="Pavement" click="setArtistName(event);"/>
		<mx:Button label="Saner" click="setArtistName(event);"/>
		<mx:Button label="The Doors" click="setArtistName(event);"/>
	</mx:HBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l’application

This movie requires Flash Player 11

Livre Flex – Flex Conception, développement et mise en oeuvre d’applications professionnelles

Une première sur Flex Tutorial, voici l’analyse d’un livre sur Flex, en Français. Ce livre, est intitulé « Flex – Conception, développement et mise en œuvre d’applications professionnelles » aux éditions ENI. Il a été écrit par Olivier CHOQUET, Ingénieur conseil et formateur Flex / AS3 s’il on en croit son CV.

Au sommaire de ce livre, on peut trouver:

  • Flex et la programmation objet
  • La création de composants personnalisés
  • Travailler avec les données
  • Valider et formater les données
  • La gestion du glissé-déposé
  • Les animations et effets
  • Les interfaces multi-écrans
  • Personnalisation des interfaces
  • Utiliser des ressources externes
  • La localisation des applications
  • Les composants Flex Charting
  • Échanges de données avec des serveurs
  • Utilisation de la passerelle AMFPHP
  • Utilisation de la micro-architecture Cairngorm

J’ai donc lu ce gros bébé de 450 pages (disponible aussi à la vente au format PDF) et je dois avouer que je suis assez déçu de la qualité de l’ouvrage. Tout d’abord, il est toujours assez frustrant de lire un livre avec des bouts de code et des exemples que l’on doit télécharger pour voir ce que cela donne. Surtout la partie Charting qui, puisqu’imprimée en noir et blanc et parfois assez illisible, mais passons sur ce détail.

Ce livre est dédié à un « Public : Concepteurs d’applications développeurs, chefs de projet… » et ce n’est pas vraiment l’impression qui en ressort. Comme l’indique la table des matières, on part de la base avec une introduction à l’ActionScript 3 et au MXML. Viennent ensuite des chapitres qui sont souvent un peu ‘ »light » sur les différentes familles de composants du framework Flex (Validators, Styles, States, L10n …). Cela s’éparpille un peu et au final, on voit les bases mais en aucun cas des applications professionnelles. Les seules parties qui restent intéressantes sont les 2 dernières sur AMFPHP et Cairngorm car assez fournies en exemples.

Les yeux des habitués des documentations Adobe reconnaitront aussi quelques abus au niveau des droits d’auteur. La partie Flex Charting par exemple est simplement une traduction du document Adobe Flex 3, ADVANCED DATA VISUALIZATION DEVELOPER GUIDE, pdf disponible en téléchargement sur les livedocs de Flex. J’ai moi-même réalisé une traduction minutieuse de ce document, répartis sur de nombreux tutoriaux Flex, notamment dans la catégorie Flex Charting de ce blog. Cependant, avant de faire cette traduction, je me suis renseigné auprès d’Adobe pour savoir s’il était légalement possible de faire la traduction de ce document. Il apparait que le contenu de la livedocs est sous licence Creative Commons BY-NC-SA, comme précisé dans les « Legal Notices ». Vu que je n’en ai pas une utilisation commerciale, j’ai simplement du préciser mes sources (dans le footer de ce blog). Dans ce livre, il n’est nulle part (j’ai bien cherché) précisé qu’une partie de l’ouvrage est issu des Livedocs ce qui est très border-line pour un produit commercial. D’autant plus que j’ai quelques doutes sur la partie Styles et localization mais passons :P .

Au final, c’est un livre sur Flex en Français, ce qui est assez rare pour être souligné, mais qui reste bon si vous voulez attaquer Flex depuis 0. Je conseille aux personnes ayant déjà quelques mois de pratique de Flex (ou ceux qui ont lu tous les articles de ce blog :P ) de passer leur chemin sur ce livre, qui ne vous apprendra que peu de choses au final. Les débutants apprécieront sûrement cet ouvrage qui permet de voir les bases de Flex.

Si vous voulez vraiment savoir comment créer des applications Flex professionnelles, je vous conseille Advanced Flex 3, qui va en profondeur dans la conception d’applications Pro.

Flex Tips – Obtenir un texte HTML valide à partir du RichTextEditor (htmlText)

Le composant Flex RichTextEditor permet d’avoir un champ texte « riche », c’est-à-dire avec des options de formatage un peu comme celles qu’on trouve dans Word (gras, souligné, alignement, puces…). Ce composant peut-être très pratique pour laisser un utilisateur créer du contenu HTML facilement, sans qu’il ne sache comment écrire du HTML, pour un CMS par exemple ou une plate-forme de blog.

Le composant RichTextEditor (RTE) a une propriété « htmlText », qui permet d’assigner du texte HTML et une propriété « text » qui permet d’avoir le contenu brut, sans balises.

Si par exemple, vous écrivez dans votre RichTextEditor:

This is <b> Bold </ b> text.

Vous obtiendrez par la propriété « htmlText », quelque chose comme:

<TEXTFORMAT LEADING="2">
<P ALIGN="LEFT">
<FONT FACE="Verdana" SIZE="10" COLOR="#0B333C" LETTERSPACING="0" KERNING="0">
This is <b> Bold </b>text.
</FONT>
</P>
</TEXTFORMAT>

Comme vous le voyez, Flex rajoute beaucoup de code HTML non-nécessaire. De plus, ce code pseudo-html ne sera pas interprété par une page HTML classique (TEXTFORMAT n’est pas une balise HTML par exemple).

Dans notre cas, on veut que le contenu HTML inscrit par l’utilisateur soit directement utilisable pour une intégration dans du HTML. Certains ce sont posé la question, sur le blog Thanks Mister. La solution se trouve dans les Expressions Régulières AS3. Avant de passer aux choses sérieuses, voici quelques articles qui devraient vous aider à comprendre les RegExp:

Lire la suite →

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.
Lire la suite →