Adobe Flex Tutorial - Adobe Flex Tutorial

6août/0814

Création d'Applications Flex – Utilsation des Runtime Shared Library (RSL) et Flex Builder

Les Runtime Shared Library (RSL) sont un moyen de partager des éléments graphiques et des librairies entre plusieurs fichiers SWF du même domaine. Les RSL sont utiles quand vous avez plusieurs fichiers SWF qui ont des éléments graphiques et/ou des librairies en commun. Par exemple, si a.swf et b.swf utilisent toutes deux le même ensemble de 25 classes et d'images embedded qui ajoutent 100Ko, l'utilisateur doit télécharger les même 100Ko deux fois, une fois pour chaque SWF.

La théorie derrière les RSL implique un concept appelé "linking". Tous les SWF utilise une (ou les deux) forme de linking: static et dynamic. Par défaut, tous les linking sont static. Quand un élément graphique ou un fichier source est linké de manière static à un SWF, cela signifie qu'il est compilé dans un SWF. Dynamic linking signifie que l'élément graphique ou le fichier source n'est pas compilé dans le SWF mais le SWF à une référence vers un SWF dans lequel il a été compilé. Grâce au dynamic linking, vous pouvez spécifier quels éléments ne doivent pas être compilés dans un SWF pour réduire la taille totale su SWF. Le SWF est ensuite lié à un autre SWF dans lequel les éléments ont été compilés. Cela permet d'extraire les éléments commun depuis deux ou plusieurs fichiers SWF et les placer dans un autre SWF vers lequel tous les fichiers SWF seront linkés dynamiquement. Ce nouveau SWF est appelé Runtime Shared Library.

Bien qu'il soit théoriquement possible d'utiliser le framework Flex comme une RSL, dans la plupart du temps, ce n'est pas à votre avantage. Toutes les applications Flex utilisent le framework Flex, qui est composé de classes ActionScript qui ajoutent au poids du SWF. Il semblerait logique d'utiliser le concept de Runtime Shared Library pour créer un framework RSL qui est partagé par toutes les applications Flex sur un domaine. Cependant, il est important de comprendre un différence significative entre le linking static et dynamic: quand vous liez un élément de manière statique depuis une librairie, seul l'élément qui est contenu dans la librairie est compilé dans le SWF, mais que vous utilisez le dynamic linking, la librairie entière contenant l'élément doit être compilé dans la RSL. Cela veut dire que seules les applications qui utilise la plupart ou la totalité du framework Flex en feraient un bénéfice. De manière générale, les RSL marchent le mieux avec de librairies de classes personnalisées, des composants personnalisés, et des éléments que vous voulez Embed, comme des polices d'écriture ou des images.
La manière par laquelle on crée et on utilise une RSL est toujours la même. Cependant, si vous travaillez avec le compilateur en ligne de commande ou depuis un script Ant, le processus est différent par rapport au cas où l'on utilise Flex Builder, qui automatise beaucoup le travail.
Je vais détailler ici comment créer ces RSL avec Flex Builder

Utilisation de Flex Builder pour la création de Runtime Shared Library

Flex Builder automatise de nombreuses tâches et fournit une interface par étapes permettant de créer et d'utiliser les RSL. Travailler avec des RSL sous Flex Builder comporte deux grandes étapes: créer une Flex Library Project et lier l'application principal au projet librairie.

Création d'un Flex Library Project

La première étape dans la création d'un Flex Library Project est de créer un projet en sélectionnant File > New > Flex Library Project. Chaque Flex Library Project a besoin d'au moins un élément, généralement une classe. Vous pouvez ajouter des classes à un projet comme vous le feriez pour n'importe quel projet Flex standard. Une fois que vous avez définit tous les fichiers d'un projet, vous devez indiquer lesquelles de ces classes devront être compilées dans le fichier SWC. Vous pouvez le faire en allant dans les propriétés du projet (clic droit sur le projet > Properties). Sélectionnez ensuite l'option Flex Library Build Path dans le menu. Dans l'onglet Classes, vous devez sélectionner toutes les classes que vous voulez compiler dans la librairie. C'est tout ce qu'il faut faire pour créer un Flex Library Project.

Lier une application à une librairie

Quand vous voulez utiliser une librairie pour une application Flex, vous devez dire à Flex Builder comment la lier au Flex Library Project correspondant. Vous pouvez le faire en sélectionnant Project > Properties pour un projet Flex. Sélectionnez ensuite l'option Flex Build Path dans le menu de gauche et l'onglet Library. Dans cet onglet Library, cliquez sur le bouton Add Project. Cela ouvre une nouvelle fenêtre qui vous demande d'indiquer le Flex Library Project que vous voulez lier à votre application.
Lorsque vous allez sélectionner la librairie et cliquer sur OK, le projet va s'afficher dans la liste Library Path
Par défaut, les librairies sont liées de manière statique plutôt que de manière dynamique. Vous devez indiquer à Flex Builder de lier dynamiquement ces librairies en étendant l'icone de Library Project dans la liste.

Sélectionnez ensuite l'option Link Type et ensuite, sélectionnez l'option Runtime Shared Library depuis le menu.

Quand vous ajouter un Library Project au Library Path d'un Flex Project, l'application peut utiliser n'importe quelle classe définie dans le Library Project.

Accéder à des éléments graphiques depuis une Runtime Shared Library

Les RSL ne permettent pas d'accéder directement à des éléments autres que des classes. Cela veut dire que vous ne pouvez pas ajouter dynamiquement un lien vers une image, un son ou une police d'écriture. Cependant, si vous embarquez un image par exemple dans une class ActionScript, vous pouvez utiliser l'indirect dynamic linking.
L'exemple suivant embarque une image en utilisant une constante:

package
{
	public class ConstImages{

		[Embed(source="image.jpg")]
		public static const IMAGE_A:Class;
	}
}

Vous pouvez compiler une telle classe dans une RSL et l'image sera aussi embarquée. L'exemple suivant illustre comment utiliser cette image embarquée dans une Runtime Shared Library dans une application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    verticalAlign="middle">

    <mx:Script>
        <![CDATA[

        	import ConstImages;

        ]]>
    </mx:Script>
	<mx:VBox>
		<mx:Image source="{ConstImages.IMAGE_A}" scaleContent="true"
			height="100" width="100"/>
	</mx:VBox>
</mx:Application>

Remplis sous: Exemple, Flex Builder || Taggé comme: Flex Library, RSL, Runtime Shared Library, swc Laisser un commentaire

Articles similaires

Commentaires (14) Trackbacks (0) (Souscrire aux commentaires de cet article)

TiTerm
7 août 2008

Dire qu'utiliser le framework flex comme RSL n'est pas la plus part du temps à votre avantage n'est plus vrai depuis flash player 9.0.115 et plus.
Depuis cette version, le flash player est capable de mettre en cache les librairies RSL signées (celles qui se terminent pas swz).
Le cache se trouve ici, les librairies seront renommés mais on les reconnait via leurs tailles.
c:\Documents and Settings\\Application Data\Adobe\Flash Player\AssetCache\\"
Le framework flex en comporte 3, les widgets, le rpc et les graphe.

Donc même si votre appli n'utilise qu'un seul élément du framework, le surcout du téléchargement de la librairie n'a lieu que si et seulement si vous n'avez pas la librairie en question dans le cache. Si elle est déjà présente, elle ne sera pas retéléchargé, et ce même si vous utiliser une autre appli en RSL et quel que soit le site où vous allez.
Il y a donc tout à gagner a utiliser le framework en RSL en imposant une version du player > 9.0.115. Cela permet d'économiser énormément de bande passante et le chargement utilisateur est beaucoup plus rapide.

Le seul inconvénient que je vois est qu'adobe ne livre les versions signés des librairies du framework que dans les upgrades de flex. Impossible donc d'avoir les librairies RSL pour les sdk 3.0.1 ou 3.0.2, il faudra attendre flex 3.1.
fnicollet
7 août 2008

Exact, d'après ce post
http://www.onflex.org/ted/2007/06/flex-3-thursday-dramatically-smaller.php
dans les prochaines version de flash player (Update 3), le framework Flex pourrait être mis en cache et bénéficier du cross-domain.

Merci pour ces précisions

Fabien
jessie
27 janvier 2009

Bonjour,
Très bel article, bravo.
Je suis nouveau en flex, et j'ai créé un swf avec le framework en RSL, ce qui m'amène à vous poser une question car je bloque depuis plusieurs jours. Alors j'en appelle aux pros!
Ce swf fait appel à un http service pour lire des images.
Il marche impeccable sous flash 10, mais sous 9.0.28 et 9.0.124 (donc supérieur à 9.0.115) tout reste bloqué au 100% du preloader. On ne voit rien d'autre.
Je ne fais pas de deep linking, qui semble poser problème (mais ai-je bien compris ce qu'est le deep linking…).
Dès que je compile sans RSL, tout est OK sous flash player 9.
Il se passe donc quelque chose juste après le preloader, car aucun bouton ou quoi que ce soit ne s'affiche.
Etes-vous au courant de quelque chose de spécial sous FP9?
Merci d'avance pour vos conseils.
fnicollet
27 janvier 2009

Salut,
Apparamment, d'autres personnes ont eu ce problème:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1420086
Il faudrait bidouiller le template HTML crée automatiquement par Flex Builder. Si tu arrives à corriger ton problème, tu peux envoyer la réponse sur ce post

Fabien
jessie
28 janvier 2009

Bonjour Fabien,
Merci pour ta réponse.
J'ai découvert l'origine du problème, mais pas sa solution pour le moment : les 2 fichiers du framework rsl sont invisibles pour le swf.
Ca lance donc le preloader, mais pas la suite. C'est le même comportement que lorsque tu vires les fichiers rsl.

J'ai testé avec des versions 9.0.28, 9.0.47 et 9.0.115 et c'est pareil dans tous les cas. Donc à priori pas lié à un choix entre le swf ou le swz du rsl.

Par contre ça marche sous flash 10.

Es-tu au courant d'une différente de comportement sur ce point entre les versions 9 et 10 ?

Ca ressemble à une histoire de droit. Je vois pas mal de possibilités avec la compilation à la main (ant…) mais j'hésite à m'embarquer là dedans car je ne maitrise pas. Et mon besoin est assez basiquer et classique donc je pense que à doit se faire depuis flex builder si le problème vient de la compilation.

Actuellement j'ai mis en ligne dans le même répertoire que mon swf les deux fichiers framework.
J'ai paramétré pour compiler en RSL, en choisissant framework.swc et en sélection vérify rsl digest, avec bin-debug commme répertoire.
Ensuite je fais un export bin release, et je met ce swf dans le même répertoire que mes 2 rsl en ligne.

Tout ça fait que ça marche sous fp10 mais pas sous 9.

Ai-je commis une erreur quelque part ?

Merci d'avance pour tes conseils.
fnicollet
28 janvier 2009

Salut,
première chose, est-ce que cela fonctionne en local. Je veux dire, si tu lances ton fichier html généré par Flex Builder, avec Firefox (ou IE), est-ce que l'application tourne bien ?
Ensuite, j'ai peut-être mal compris mais tu n'as pas les 2 RSL dans ton répertoire ? tu dois faire une copie de ceux qui sont dans bin-debug ?
Perso je viens de tester et cela fonctionne bien (juste un test en local) avec FP9.
jessie
28 janvier 2009

Merci pour ta rapidité.

Pour mes tests en ligne j'ai un second pc où j'installe/désinstalle les versions 9.

J'avoue être un peu perdu dans la manière de passer d'une version flash à une autre en local car j'ai 9.0.115 et une version 10.
Quand je lance le html c'est la 10 qui se lance et ça marche.
Quand je fais un clic droit sur le swf du bin-release et le lance avec 9.0.115 : ca se lance aussi.

Donc j'ai tendance à dire que ça marche en local mais pas en ligne.

J'ai aussi interdit le cache du flash player 10 pour mes tests.

Les 2 rsl sont bien dans le même répertoire que le swf en ligne. Ce sont en effet des copies de ceux du bin-debug.

Tu vois un truc à faire au niveau des droits ?

Merci
fnicollet
28 janvier 2009

Je ne pense pas que tu devrais faire des copies des fichiers swz et swf du bin-debug. Essaie de simplement copier l'intégralité du dossier bin-release sur ton serveur en ligne. Le dossier bin-release devrait déjà contenir tes RSL et ton SWF (et le template pour reconnaître FP).
Dis moi comment ça tourne comme ça.
Sinon, quand tu compile, tu cibles quelle version de Flash Player (clic droit sur le projet>Properties>Flex Compiler) ?
jessie
28 janvier 2009

Je vais revoir ça.
C'est quoi le template dont tu parles. FlashPlayerProductInstall.swf ?
Car je ne l'ai pas mis…

Il faut aussi que tu saches que je pourrais de toute façon pas me permettre de mettre un gros script comme les html générés par flex, car en fait ce swf je dois générer un code simple limité à object/embed, comme les vidéos des sites de partage par exemple.

Je fais les tests et te tiens au courant.

Merci
jessie
28 janvier 2009

On se rapproche…

Ca ne marche toujours pas en ligne sur mon site, avec les fichiers du bin-release.

Mais le html généré fonctionne sous 9.0.115.
Pas testé aujourd'hui sous <9.0.115, mais c'est un test que j'avais fait et ça ne marchait pas. On verra ça dans un second temps.

Donc au moins pour 9.0.115 on va dire que ça vient de mon intégration html.
La voici:

Un truc qui cloche ?

Merci
fnicollet
28 janvier 2009

Pour poster du code HTML, met des balises autour (pour le faire, regarde tout en bas de la page), sinon ton code n'apparaîtra pas .
Envoie moi plutôt ton code à fnicollet@gmail.com, je m'occuperai de le poster correctement.
Sylvie
5 mars 2009

Je ne suis pas sûre que ce soit un message directement en relation avec le sujet. Néanmoins, c'est également un problème local/en ligne.
J'ai une application Flex développée en as3. Je récupère depuis le serveur l'adresse d'une image google Maps. L'image s'affiche au débuggage, à l'ouverture du fichier html via le bin-release. En revanche en ligne erreur de sandBox…

Je ne vois pas comment il peut autoriser du loal vers un site et non d'un site à l'autre…
fnicollet
5 mars 2009

Salut,
effectivement, ce n'est pas très lié puisque ton message concerne plutôt la sandbox Google Maps. A mon avis, cela vient du fait que ta clé API Google Maps n'est pas bonne pour cette url (en ligne). A l'inscription sur google maps, tu génères une clé API et tu dois lui donner une adresse de site web. Cela vient peut-être de là.

Fabien
O. Launey
7 novembre 2011

Salut,

à lire les commentaires, on doit donc maintenant toujours favoriser les RSLs même pour le framework donc ? J'aimerais avoir la confirmation car je suis en train de mener à bien un projet avec Maven (flexmojos plugin) et les 2 options peuvent donc être facilement implémentées.

J'ai également une autre question concernant les skins svp. J'aimerais à terme que les utilisateurs puissent s'ils veulent m'envoyer des skins persos (je leur fournirai donc les "specs", skinparts, hostcomponent etc…). J'envisage donc de mettre tous ces skins dans des RSLs…bon choix ?

Si oui se pose le problème suivant pour moi

Comment faire pour que l'utilisateur puisse charger en cours d'utilisation un skin via une liste déroulante par exemple ? J'avais pensé utiliser un getDefinitionByName pour localiser un package quelconque de skin mais j'ai l'impression qu'il faut une référence dans le SWF vers la librairie. Sauf que si je référence toutes mes skins comme cela, ce n'est pas "propre" et en plus toutes mes RSL seront chargées au runtime non ?

Pouvez vous me donner votre avis sur ce point ?

Merci beaucoup

Olivier