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

Créer un projet FlexLibrary pour les assets (icônes, éléments graphiques, …)

Parfois, quand vous compilez un projet Flex, vous allez peut-être vous apercevoir que certaines classes ne sont pas compilées dans le dossier bin-release, car vous avez du code ActionScript qui instancié une classe sous certaines conditions et le compilateur Flex assume que cette classe n'est pas requise.

Cet article est une traduction de l'excellent Creating an image asset library de russback.com.

C'est assez frustrant mais il y a un moyen de contourner ce problème. En créant une instance "dummy" (une instance non utilisée) d'une de ces classes non-compilées, vous pouvez vous assurer  que la classe sera bien compilée dans votre répertoire de destination. Une autre solution consiste à créer une librairie d'assets externe qui va être compilée en un SWC.

Création d'un projet Flex Library

Un projet Flex Library peut être crée de la même manière que tout autre projet, choisissez simplement Flex Library Project dans le menu New au lieu de Flex Project.

A première vue, rien n'a changé à part l'icône dans la vue Flex Navigator mais vous verrez vite les bénéfices de cette approche.

Création d'une Class

Tout d'abord, on va créer au moins une Class. Pour cet exemple, l'auteur a choisit d'utiliser l'excellente FamFamFam Silk Icon Library, une collection de 700+ images 16x16px qui sont utilisées par de nombreuses interface web (WebDevelopper Toolbar Firefox et autres). Pour cet article, on va ajouter tous les icônes de cette librairie et en exposer seulement deux pour notre application.

Import des Assets

C'est très simple, téléchargez la librairie et déplacez toutes les images dans le projet FlexLibrary. Pour cet exemple, on place les icones dans le dossier /assets/images/famfamfam/silkicons. Il peuvent être placés n'importe où mais cette structure rend l'ajout d'assets d'autres sources plus facile dans la librairie.

Exposition des assets

Pour cet exemple, on a juste besoin de deux de cet icônes. Pour les exposer, on crée une nouvelle classe appelée IconLibrary (dans le package com.russback). Cette classe est une classe Bindable qui a une public static constant de type Classe pour chacun des éléments graphiques que l'on veut exposer:

package com.russback
{
	/**
	 * Class containing constants for each icon image available for use in the application
	 */
	[Bindable]
	public final class IconLibrary
	{

		/**
		 * Displays the accept icon from the FamFamFam Silk Icons library
		 */
		[Embed(source="assets/images/famfamfam/silkicons/accept.png")]
		public static const ACCEPT:Class;

		/**
		 * Displays the bomb icon from the FamFamFam Silk Icons library
		 */
		[Embed(source="assets/images/famfamfam/silkicons/bomb.png")]
		public static const BOMB:Class;

		/**
		 * Constructor
		 */
		public function IconLibrary()
		{
		}

	}
}

Compilation de la librairie

Maintenant, il faut que l'on compile la librairie, et c'est là que les bénéfices de cette approche se ressentent. Si vous faîtes un clic droit sur le projet Flex Library, et choisissez Properties, vous obtiendrez les options de compilation. Cliquez sur le Flex Library Build Path et vous obtiendrez une vue avec une ButtonBar (Classes, Assets, Source Path, Library Path). Dans la vue Classes, vous pouvez sélectionner quelles classes vous voulez compiler afin qu'elles soient compilées dans la librairie. Ce qui est beau dans cette manipulation, c'est que vous prenez le contrôle sur ce que le compilateur va effectivement compiler, peut importe si vous avez utiliser cette classe ou pas. On va donc s'en servir pour s'assurer que notre classe IconLibrary soit bien compilée.

Ensuite, cliquez sur le bouton Assets pour vous assurer que toutes les images sont comprises dans la librairie. On pourrait simplement inclure seulement les deux classes que l'on souhaite utiliser et créer un SWC très léger mais ce qui est excellent avec les fichiers SWC, c'est que seules les classes et les assets référencées seront inclus dans un build "release". Comme on a simplement deux références vers nos assets (dans la classe IconLibrary), on n'a pas besoin de se préoccuper de l'encombrement de notre SWC.

L'auteur de cet article remercie Ronald Ferguson pour sa librairie gratuite qui fonctionne sur le même concept. Cependant, il y a des constantes pour chaque icône de la librairie, ce qui crée un gros fichier SWC avec 700+ icônes. D'un autre côté, la méthode exposée ici vous oblige à ajouter une nouvelle constante dans la classe IconLibrary à chaque fois que vous voulez utiliser un icône non référencé.

La Silk Icon Library est utilisée comme exemple ici mais vous pourriez facilement améliorer cette librairie pour contenir tous les set d'icônes que vous souhaitez. L'approche reste la même, il faut juste s'assurer que la nouvelle classe que vous allez ajouter sera bien compilée (vu au dessus).

Lier la librairie à une application externe

Nous avons maintenant une librairie qui va être compilée en un SWC dans le répertoire "bin" de notre projet Flex Library. Pour utiliser ce fichier SWC dans un Flex Project, on doit simplement le référencer dans chaque projet comme ceci:

1. Clic droit que le projet dans le Flex Navigator puis Properties
2. Flex Build Path > Library Path
3. Cliquez sur le bouton Add SWC… et allez chercher votre fichier SWC dans le répertoire bin de votre projet Library
4. Vous devriez avoir le SWC référencé comme ceci

Utilisation de la librarie

L'utilisation de la librairie est on ne peut plus simple. Il suffit de fait un Bind entre la propriété "source" d'une Image et la constante de la librairie que l'on veut utiliser:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical"
	width="553"
	height="200"
	viewSourceURL="srcview/index.html"
	>
	<mx:Script>
		<![CDATA[
			import com.russback.IconLibrary;
		]]>
	</mx:Script>

	<mx:HBox>
		<mx:Image source="{IconLibrary.BOMB}" />
		<mx:Text text="Add images inline?" />
	</mx:HBox>

	<mx:HBox>
		<mx:Image source="{IconLibrary.ACCEPT}" />
		<mx:Text text="Use an external image library?" />
	</mx:HBox>

</mx:Application>

L'utilisation de cette méthode semble contraignante mais elle vous permettra de garder votre code clean, avec tous vos assets dans un seul emplacement et ainsi d'éviter les problèmes de compilation.

Une petite remarque sur les Warnings qui apparaissent lors de la compilation ASDoc avec Ant

En utilisant cette méthode, vous allez peut-être être confrontés à un warning de compilation pour chaque constant que vous compilez dans la librairie, particulièrement si vous compilez la documentation ASDoc en utilisant Ant:

Rien de bien méchant, le compilateur essaie simplement de vous dire que vous n'avez crée aucune instance de cette constante. Si vous voulez vous débarasser de ces warnings, vous pouvez ajouter une ligne à votre build.xml utilisé par Ant pour qu'il reste silencieux.

<arg line="-warn-const-not-initialized=false" />