Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Utiliser le framework Durango

Compatible AIR. Cliquer pour en savoir plus sur les compatibilités.Compatible Flex. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par d.exter (Denis Exter), le 20 février 2009

Durango est un framework qui permet aux développeurs de créer des applications AIR qui peuvent être customisées par les utilisateurs. Durango permet aux développeurs, designers et aux utilisateurs de facilement intégrer des composants composites pour créer de nouvelles applications ou étendre des applications existantes. Ces composants composites peuvent être visuels ou non (ex : web services).

Les fonctionnalités de Durango sont les suivantes :

- Le glisser-déposer de composants : Durango s'occupe de tout le travail difficile, il est donc facile pour un développeur de construire un composant réutilisable, de faire de son application une source ou un consommateur de composants réutilisables et permettre à cette application d'être un récepteur de composants. Durango offre les fonctionnalités de glisser-déposer suivantes :

o Active l'identification de composants réutilisables dans une application.

o Prends en charge les opérations de glisser-déposer

o Permet de cloner le composant dans l’application

o Accrocher le composant à l’application

- Connecter les composants ensembles : Durango assiste les utilisateurs et les développeurs à effectuer les connexions entre les composants. Un composant peut accepter des entrées et produire des sorties. Le framework essaye de connecter intelligemment les composants ensembles, par exemple un composant qui produit du texte en sortie sera automatiquement connecté à un autre composant qui attend de recevoir du texte en entrée. Il est tout à fait possible d’inspecter ces connexions et de les réassigner si besoin est.

- Publié et réutiliser des services web : Durango permet de publier et réutiliser des services web. Un développeur peut faire un glisser/déposer de n’importe quel service web qui a été préalablement encapsulé dans un composant Flex.

- Génération de code automatique : Les designers et les développeurs peuvent rapidement créer des applications prototype et générer ensuite les projets Flex pour les améliorer ensuite dans Flex Builder. Si le développeur du composant a choisi de publier leur code source sur Internet, ce code sera alors incorporé dans le projet. Autrement, le composant sera inclus dans sa forme compilée.

Durango est téléchargeable à l’adresse suivante :

https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs%5Fdurango

Si vous n’avez pas déjà un identifiant Adobe, il vous faudra en créer un, car vous devez vous identifier pour pouvoir télécharger le composant.

Une fois connecté, cliquez sur la case à cocher qui atteste que vous avez lu les conditions d’utilisation et téléchargez et installez Durango en cliquant sur le lien correspondant à votre OS.

Si vous n’avez rien compris jusqu’ici, ce n’est pas grave, nous allons maintenant créer un projet Flex pour mettre tout ceci en pratique :

1. Créer un nouveau projet Flex (File>New>Flex Project) 2. Nommer le projet « Durango » 3. Cocher l’option « Desktop application (runs in Adobe AIR) » pour avoir une application de bureau (AIR).

Il faut ensuite faire un clique droit sur votre projet Flex et ouvrir le panneau des propriétés, puis sélectionner « Library path » dans le panneau des propriétés, et cliquez sur « ADD SWC… », et pointer sur la librairie « ReuseLib.swc » qui se trouve dans le répertoire C:\Program Files\Adobe\Durango\Libraries\ResureLib.swc si vous avez installé Durango avec les paramètres par défaut.

Nous allons commencer par créer un composant visuel réutilisable. Un composant réutilisable peut être glissé d’une application Durango à une autre. Ce composant doit implémenter l’interface IComposable, à part cela il peut être n’importe quel composant MXML ou classe actionscript.

Pour ce faire :

- Ajoutez un nouveau composant MXML (File>New>MXML Component) - Nommer le « DurangoVC » - Sélectionnez « TextArea » dans la liste déroulante « Based on » - Cliquez sur « Finish »

Il faut ensuite comme précisé ci-dessus ajouter l’implémentation à la racine de notre composant :

 
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml" implements="atl.reuse.IComposable">

Nous allons maintenant implémenter les fonctions de l’interface « IComposable » :

 
private var isReusable : Boolean = true;
 
public function get reusable () : Boolean {
	return isReusable;
}
 
public function set reusable ( value : Boolean ) : void {
	isReusable = value;
}

L’interface « IComposable » sert de marqueur pour indiquer qu’un composant peut être glisser hors de l’application Durango. La propriété « reusable » est utilisée par Durango pour détérminer si le composant peut être glisser hors de l’application.

Il faut ensuite ajouter la propriété de connexion. Toutes les propriété publiques et « Bindable » peuvent être connectées ensembles. Pour que Durango connecte automatiquement deux propriétés ensembles quand un composant est glissé dans une application, il faut utiliser la balise metada « [AutoConnect]. Avec cette balise, nous pouvons indiquer la propriété comme étant une entrée de données (sink), une sortie de données (source). Si l’on ajoute la balise « [Editable] » sur une propriété, elle sera alors disponible dans l’éditeur de connexion. La balise « [Persistent] » permet d’indiquer que la value de la propriété doit être sauvée quand un composant est glissé hors de l’application. Finalement pour que la propriété soit uniquement connectée automatiquement avec une propriété du même nom, il faut utiliser la balise « [AutoConnect(sink, namesMustMatch)] ».

Dans notre exemple, la propriété de notre « TextArea » que nous voulons connecter est « htmlText ».

 
[AutoConnect(sink,source)]
public override function set htmlText ( value : String ) : void {
	super.htmlText = value;
}
 
public override function get htmlText () : String {
	return super.htmlText;
}

Nous allons maintenant créer un composant de service non visuel. Les composants de service sont utilisés pour fournir des données à des composants visuels. Dans notre exemple, nous allons utiliser un composant de service qui va nous fournir du texte ou du HTML. Ce texte pourra être édité dans le panneau des propriétés de Durango, il s’agit pour notre exemple, d’un texte statique.

Un composant de service, doit implémenter l’interface « IMXMLObject », qui permet à flex d’assigner un « id » au composant.

Pour créer la classe actionscript dans Flex Builder :

1 Ajouter une nouvelle classe (File>New>ActionScript Class)
2 Nommer la « DurangoSC »
3 Dans le champ « Interfaces » ajoutez Interfaces.IComposable and mx.core.IMXMLObject 
4 « Cliquez sur Finish »

Implémentons l’interface « IComposable » :

 
private var isReusable : Boolean = true;
public function set reusable(b:Boolean):void
{
	isReusable=b;
}
 
public function get reusable():Boolean
{
	return isReusable;
}

Puis, il faut également implementer l’interface “IMXML Object interface”, pour cela, nous avons besoin de la propriété « id » et de lui attribuer sa valeur dans la méthode « initialized() ».

 
[Bindable]
[Inspectable]
public var myId : String = null;
public function initialized(document:Object, id:String):void
{
	myId=id
}

Nous allons également ajouter la propriété « sourceText » qui sera automatiquement connéctée à notre composant visuel.

 
[Bindable]
[Editable]
[Persistent]
[AutoConnect(source)]
public var sourceText:String = "Ma première application Durango";

Ajoutons également une propriété « label » qui permettra à notre composant de montrer son nom quand l’application sera en mode « Design ».

 
[Bindable]
[Editable]
[Persistent]
public var label:String = "Source de texte";

Finalement nous ajoutons la balise metadata « [DesignModeOnly] » à notre classe pour indiquer que cette classe a des propriétés non visuelle.

 
[DesignModeOnly]
public class DurangoSC implements IComposable, IMXMLObject

Pour assembler nos composants, nous avons besoin d’une application Durango activée permettant de les héberger, pour ce faire :

1. Ajoutez un container qui servira à donner ou recevoir des composants réutilisables.

	<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute" initialize="initApp()" xmlns:local="*" xmlns:reuse="atl.reuse.*">
 
	<mx:Canvas id="donorArea" width="100%" height="100%">
		<local:DurangoVC id="display" htmlText="{staticText.sourceText}" top="10" bottom="10" right="10" left="10" editable="false"/>
	</mx:Canvas>
 
</mx:WindowedApplication>

2. Ajoutez le composant qui contient notre composant de service (« ReusableSC »).

 
<reuse:ReusableServicesCollection id="services">
			<local:DurangoSC id="staticText"/>
</reuse:ReusableServicesCollection>

3. Créer et initialiser l’objet « ComposableDragSupport ».

 
<mx:Script>
		<![CDATA[
			import atl.reuse.ComposableDragSupport;
			public var dragSupport : ComposableDragSupport = null;
				private function initApp () : void {
				dragSupport = ComposableDragSupport.createDragSupport( donorArea,
				this.nativeWindow, services);
				dragSupport.setupComplete();
			}
		]]>
	</mx:Script>

4. Ajouter le contrôle « ToolTrayHost » qui ajoute un paneau sur le bord gauche, qui s’ouvre au survol de la souris qui permet aux utilisateurs d’accéder aux commandes de configuration.

	<reuse:ToolTrayHost/>

Lancer l’application depuis Flex Builder, entrer en design mode en survolant avec la souris, le bord gauche de l’application, et en cliquant sur le bouton avec une main comme icône. En mode design, les services de composants sont affichés dans le paneau des composants réutilisables. Vous pouvez faire un clique-droit sur le composant de srvice qui se nomme « Text Source » ; La boîte de dialogue des propriétés de Durango s’ouvre alors, vous laissant ainsi la possibilité d’éditer la propriété « SourceText ».

Je vous conseil vivement de visiter le site d’Adobe, vous y trouverez de nombreuses informations, ainsi que des exemples :

http://labs.adobe.com/technologies/durango/

Et voici le projet Flex de l’application.