SyntaxHighlighter : créer un composant AS3 en dérivant fl.controls.TextArea
février 19th, 2009 by Tony
Hello !
Dans cet article, je proposais de créer un premier composant en AS3 simplement dérivé de flash.display.MovieClip et destiné à ajouter des fonctionnalités à une instance de MovieClip au runtime.
C’était une manière simple de commencer à créer des composants pour FlashCS3, sans être confronté directement à la nouvelle infrastructure des composants qui change radicalement de celle que nous connaissions en ActionScript2.
Dans l’article présent, je vous propose un tutoriel complet sur la création d’un composant AS3 dérivé de fl.controls.TextArea.
celui-ci constitue le premier d’une série d’articles (longue je l’espère 
) consacrés aux composants pour ActionScript3.
Le composant que je vous propose de créer ici est un TextArea enrichi avec une fonctionnalité de type SyntaxHighlighter : l’utilisateur dépose le composant sur la scène ou l’instancie par code et définit une liste de mot-clé associé à une couleur particulière.
A l’exécution, lorsque un mot-clé prédéfini est saisi dans le TextArea, il est mis en emphase dans la couleur associée.
Dans l’exemple, ci-dessous, des mots-clés ont été définis. Enfoncez la touche espace pour les mettre en emphase.
Tout d’abord, un point sur l’organisation
Nous allons être amené à définir un certain nombre de classes ActionScript3 (5 au total, mais pas de panique, la plupart contiendront assez peu de code ) et à travailler avec plusieurs fla : 4 nous serons nécessaires.
D’abord, les classes :
- Le titre de l’article l’annonce : ce composant va hériter de TextArea, nous allons donc définir une classe qui étendra fl.controls.TextArea. Ce sera la classe principale de notre composant. Nous l’appelerons SyntaxHighlighter.
- Par habitude et également pour les besoins de clarté de l’article, j’ai structuré le package selon le classique Modèle-Vue-Controller. En toute bonne foi, j’avoue que la simplicité du composant ne justifie pas ici un mvc, mais j’ai une préférence pour “plus de classes et moins de code par classe” plutôt que l’inverse. Je précise que cet exemple de mvc n’est absolument pas canonique.
- La vue est la classe principale : SyntaxHighlighter : c’est dans cette classe que nous implémenterons les méthodes héritées de TextArea (ou de UIComponent, la classe générique), et les accesseurs publiques constituant l’API de notre composant.
- Le contrôleur : TextAreaController à qui sera confiée la tâche d’implémenter concrètement la fonctionnalité de syntax highlighting.
- Enfin le modèle : DataModel, défini selon le pattern Singleton comme le veut la tradition et dont la donnée principale sera une structure associant des mot-clés à des couleurs, l’équivalent d’une HashTable Java en quelque sorte.
- Les 2 classes restantes serviront justement à représenter la collection du DataModel : KeywordCollection et KeywordCollectionItem. Pour être plus clair, le DataModel va contenir une propriété dataProvider contenant une instance de KeywordCollection, laquelle agrègera des instances de la classe KeywordCollectionItem (une instance de cette classe représente une association entre un mot-clé et une couleur)
La nécessité de créer une classe spécifique pour représenter la collection et une classe spécifique pour représenter les éléments de cette collection (Il s’agit ici de Value Object ou Data Transfer Object) résulte du fait que ces paramètres seront Inspectables, c’est-à-dire qu’ils pourront être définis via le panneau Paramètres du composant ou via l’inspecteur de propriété du composant.
Dans le code ActionScript3 correspondant, nous verrons qu’il est nécessaire d’utiliser une balise de metadonnées spécifique pour renseigner ce paramètre : [Collection(collectionClass = "", identifier = "", collectionItem = "")]
Ensuite les fla :
Pour créer un composant bénéficiant de l’infrastructure des composants, il est nécessaire de travailler avec au moins 2 fla.
- Le fla principal nous servira à assembler notre composant en utilisant un ou plusieurs des composants de bases de Flash CS3 et les autres éléments (graphiques, MovieClip, etc.) dont nous avons besoin. Cest dans ce fla que nous configurerons le composant via le panneau Définition du composant. C’est également dans ce fla que nous aurons accès aux commandes permettant d’exporter le composant dans une archive compilée swc si nous le souhaitons.
- Le deuxième fla est également très important car c’est lui qui nous permettra de générer un componentShim en compilant le code source du composant. On peut trouver un componentShim dans le fla de chacun des composants de bases de FlashCS3 sur la 2ème frame. Il s’agit d’un clip compilé qui contient le byte code de notre composant et uniquement le byte code mais sans aucun des éléments d’interactions utilisés par notre composant. Cette nouvelle organisation découle de la volonté de permettre l’édition directe (par double-click) des composants dans l’environnement auteur de Flash CS3.
Puisque nous étendrons fl.controls.TextArea, il faut que la définition de cette classe soit accessible dans le chemin de classe de nos 2 fla.
Pour cela, configurer le panneau Paramètres ActionScript3 accessible depuis les Paramètres de publication.
Si vous oubliez de définir ce chemin de classe, vous récolterez de sympathiques erreurs de compilation lorsque vous essayerez de compiler vos définitions de classes… 
Le 3ème fla dont nous avons besoin sert à tester le composant en cours de création.
Enfin, le 4ème fla est nécessaire lorsque l’on veut générer un fichier d’aperçu en direct pour notre composant. Cette étape n’est pas obligatoire, mais elle permet de prévisualiser le comportement qu’aura le composant à l’exécution directement dans l’IDE (rendu visuel, redimensionnement, application des paramètres, etc.)
Maintenant que voilà clarifié le cadre de travail, créons un nouveau fla et mettons-nous au travail…
Assemblage d’un composant “Fla-Based”
Sauvegardons ce fla sous le nom ‘Syntax Highlighter.fla’.
Le composant est basé sur un TextArea, il faut donc faire glisser une occurence du composant TextArea dans la bibliothèque du fla.
Ensuite, créons clip organisé comme ceci
- Sur la première frame du calque avatar, dessinons un rectangle plein, peu importe les dimensions. Ce rectangle constituera l’interface visible de notre composant dans l’IDE tant que nous n’aurons pas créé un swf d’aperçu en direct.
- sur la seconde frame du calque skins, glissons l’occurence du TextArea depuis la bibliothèque. En faisant cela, nous rendons disponible le TextArea pour le composant.
A ce stade, la bibliothèque de notre fla devrait contenir un composant TextArea, un composant UIScrollBar (utilisé par le TextArea), un dossier Component Assets ainsi que le clip de notre composant nommé ‘SyntaxHighlighter’.
Cela manque un peu de code, vous ne trouvez pas ?
Définition de la classe de base du composant et d’un canevas de base pour le triptyque MVC :
J’ai défini ma classe SyntaxHighlighter (et l’ensemble des classes du composant) dans un package fantastique.ui.* : c’est ma convention de nommage personnelle, vous pouvez utilisez la votre, bien sûr.
Voici le canevas de base pour cette classe :
/** * Un composant SyntaxHighlighter * Met en surbrillance un mot-clé selon la une couleur qui lui est associée via la panneau paramètres * @author Tony Broyez * @blog http://www.bddpsy.fr/wordpress * @version 0.1 */ package fantastique.ui{ import fl.controls.TextArea; import flash.events.Event; public class SyntaxHighlighter extends TextArea { private var _forceItemExample:KeywordCollectionItem; private var _forceCollectionExample:KeywordCollection; [Collection(collectionClass = "fantastique.ui.KeywordCollection", identifier = "word", collectionItem = "fantastique.ui.KeywordCollectionItem")] public function set keywords( pKeywords:Object ):void { // on laisse vide pour le moment } public function get keywords():Object { // Pour le moment on retourne un nouvel Object vide return { }; } /** * Constructeur * On se contente d'appeler le constructeur de la super classe */ public function SyntaxHighlighter () { super(); } /** * @private (protected) * méthode protected chargée d'initialiser l'interface utilisateur du composant. * */ override protected function configUI () :void { super.configUI (); // Ecrire ici le code qui initialise l'interface utilisateur du composant, cette méthode est appelée une seule fois } /** * @private (protected) * méthode protected chargée de redessiner le composant. cette méthode est appelé chaque fois * que le composant doit être redessiné. Par exemple, quand du texte est saisi. * */ override protected function draw () :void { super.draw(); } /** * @private (protected) * méthode protected chargée de gérer le redimensionnement du composant. * */ override public function setSize( w:Number, h:Number ):void { super.setSize( w, h ); } } // Fin de classe }
Le code est pour l’instant sans ambiguités. La classe définie (ou redéfinie, on utilise alors le mot-clé override) les méthodes appelées automatiquement sur le composant au cours des différentes phases de son cycle de vie. Les commentaires fournissent des explications pour chacune d’elles. Si le coeur vous en dit vous pouvez consulter les méthodes telles qu’elles sont définies dans le fichier source du TextArea.
Sur mon poste, ce fichier se trouve ici : C:\Program Files\Adobe\Adobe Flash CS3\fr\Configuration\Component Source\ActionScript 3.0\User Interface\fl\controls\TextArea.as
Les seuls éléments non intuitifs concerne le getter/setter keywords, les éléments de code qui lui sont liés : la balise Collection et les propriétés private var _forceItemExample:KeywordCollectionItem;
private var _forceCollectionExample:KeywordCollection;
En fait, ces instructions référent au panneau Paramètres du composant dans l’IDE. Puisque notre composant se base sur une association mot-clé <-> code couleur, il faut que l’utilisateur puisse saisir ces valeurs de façon ergonomique. On voudra donc utiliser la boîte de dialogue Values (elle est utilisée par les composants de type List ou ComboBox pour définir les items de leur fournisseur de données).
La balise qui permet cela est justement la balise collection [Collection(...)]. Elle définit 2 propriétés obligatoires qui sont collectionClass (la classe qui permet de contenir la structure de données) et collectionItem qui correspond à un élément de cette structure de données.
Les valeurs de ces propriétés seront assez logiquement des instances de ces 2 classes.
Les membres _forceItemExample et _forceCollectionExample constituent 2 propriétés dont la seule raison d’être est de s’assurer que les définitions des classes fantastique.ui.KeywordCollection et fantastique.ui.KeywordCollectionItem seront bien compilées.
Pour le moment, laissons la plupart des méthodes vides et occupons-nous de définir les 2 autres éléments du triptyque mvc.
Voici le canevas de la classe TextAreaController.
/** * Contrôleur pour le composant SyntaxHighlighter. * Son rôle est de gérer l'ensemble des opérations logiques sur les données * @author Tony Broyez * @version 0.1 */ package fantastique.ui { import flash.events.Event; import flash.text.TextFormat; import flash.ui.Keyboard; public class TextAreaController { private var view:SyntaxHighlighter; /** * Constructeur * @param pView permet d'accéder à la vue du composant */ public function TextAreaController ( pView:SyntaxHighlighter ) { view = pView; } /** * Contient l'essentiel de la logique du composant : * Compare les éléments du dataProvider du composant au contenu du TextArea. * Si concordance -> emphase du mot-clé détecté */ private function checkSyntax() : void { } /** * Déclenché lorsque du texte est saisi dans le champ TextField du TextArea * @param p */ public function textAreaChangeHandler( p:Event ) :void { } } // Fin de classe }
Difficile de faire plus simple 
On distingue une méthode publique textAreaChangeHandler() à laquelle sera déléguée la gestion de l’évènement Event.CHANGE que nous définirons bientôt dans la classe principale du composant.
La méthode checkSyntax est finalement la seule vrai méthode qui implémente la logique concrète du composant : comparer le dataProvider et le contenu saisi dans le TextArea puis colorer les éléments concordants.
Enfin, le modèle, lui aussi est réduit à sa plus simple expression (je vous avais prévenu ;-))
/** * Simple modèle de donnée du composant. * Fournit un point d'accès unique aux données du composant. * Singleton comme le veut la tradition :) * @author Tony Broyez * @version 0.1 */ package fantastique.ui{ public class DataModel { private static var instance:DataModel = null; public static function getInstance () : DataModel { if ( instance == null ) instance = new DataModel(); return instance as DataModel; } public function DataModel () { if ( instance != null ) throw new Error( "SingletonError" ); } /** * Stocke la collection de données associant mot-clé & couleur * On utilise le type générique Object, mais à l'exécution cette variable contiendra bien une instance de KeywordCollection */ public var dataProvider:Object = new Object(); } // Fin de classe }
Voilà, la structure est en place.
Avant de compléter les méthodes de chaque classes et de définir les classes KeywordCollection et KeywordCollectionItem, revenons à Flash.
Jusqu’ici, fla et définitions de classes s’ignorent l’un l’autre et il n’est pas question de définir l’une des classes comme Classe de document comme on le ferait dans un projet Flash classique.
L’élément de la librairie qui doit être lié est bien entendu le clip de notre composant. Voici une capture du panneau Propriété.
Ensuite et afin de transformer ce simple clip en composant, on utilise le panneau Définition du composant accessible depuis un clic droit sur le clip.
Pour l’instant, nous nous contenterons d’indiquer la classe de notre composant : fantastique.ui.SyntaxHighlighter dans ce panneau et de configurer les options comme ceci :
En validant, vous compilerez pour la première fois le code source de la classe de base du composant.
Si tout ce passe correctement, lorsque vous ouvrirez à nouveau le panneau de définition du composant, vous devriez voir le paramètre keywords apparaître dans la liste des paramètres. Son type devrait être Collection.
Si vous souhaitez introspecter votre composant, vous pouvez ajouter des instructions trace ( ) dans les méthodes de la classe de base, utiliser à nouveau la commande Définition du composant, le déposer sur la scène et publier. La première fois, c’est assez amusant de voir quelles méthodes sont appelées et surtout dans quel ordre…
Maintenant, ce qu’il nous reste à faire, c’est compléter les définitions de nos classes, les compiler dans un componentShim, et insérer ce componentShim sur la frame 2 du composant.
Voici les définitions complètes de chacune des 5 classes de ce composant.
Les instructions utilisées sont relativement simples et le code est commenté.
Voici la classe fantastique.ui.SyntaxHighlighter dans sa version finale.
/** * Un composant SyntaxHighlighter * Met en surbrillance un mot-clé selon la une couleur qui lui est associée via la panneau paramètres * @author Tony Broyez * @blog http://www.bddpsy.fr/wordpress * @version 0.1 */ package fantastique.ui{ import fl.controls.TextArea; import flash.events.Event; public class SyntaxHighlighter extends TextArea { [IconFile("rainbow.png")] private var _forceItemExample:KeywordCollectionItem; private var _forceCollectionExample:KeywordCollection; [Collection(collectionClass = "fantastique.ui.KeywordCollection", identifier = "word", collectionItem = "fantastique.ui.KeywordCollectionItem")] public function set keywords( pKeywords:Object ):void { DataModel.getInstance().dataProvider = pKeywords; } public function get keywords():Object { return DataModel.getInstance().dataProvider; } /** * Constructeur */ public function SyntaxHighlighter () { super(); DataModel.getInstance().dataProvider = { }; } /** * Instance du controller */ private var controller:TextAreaController; /** * @private (protected) * méthode protected chargée d'initialiser l'interface utilisateur du composant. * */ override protected function configUI () :void { super.configUI (); // Crée un contrôleur afin de déléguer la logique à une classe dédiée controller = new TextAreaController( this ); // Enregistre un écouteur pour écouter l'event diffusé lorsque le composant est posé sur le stage addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler ); } /** * @private (protected) * méthode protected chargée de redessiner le composant. cette méthode est appelé chaque fois que du texte est ajouté dans le TextArea notamment * */ override protected function draw () :void { super.draw(); } /** * @private (protected) * méthode protected chargée de redimensionner le composant. * */ override public function setSize( w:Number, h:Number ):void { super.setSize( w, h ); } /** * Handler spécifique pour l'event Event.ADDED_TO_STAGE * @param p */ private function addedToStageHandler( p:Event ):void { // Enregistre un handler pour l'event Event.CHANGE diffusé par le TextArea // Cet event est diffusé lorsque du texte est manipulé (saisi, supprimé, etc.) dans le TextArea addEventListener( Event.CHANGE , controller.textAreaChangeHandler ); } } // Fin de la classe SyntaxHighlighter }
Vous remarquerez l’utilisation de la balise IconFile (déjà disponible en ActionScript 2) et qui permet d’assigner une icône au composant.
Dans cette classe, j’ai défini un contrôleur auquel je délègue la fonction écouteur textAreaChangeHandler().
Voici le code du contrôleur.
/** * Contrôleur pour le composant SyntaxHighlighter. * Son rôle est de gérer l'ensemble des opérations logiques sur les données * @author Tony Broyez * @version 0.1 */ package fantastique.ui { import flash.events.Event; import flash.text.TextFormat; import flash.ui.Keyboard; public class TextAreaController { private var view:SyntaxHighlighter; /** * Constructeur * @param pView permet d'accéder à la vue du composant */ public function TextAreaController ( pView:SyntaxHighlighter ) { view = pView; } /** * Contient l'essentiel de la logique du composant : * Compare les éléments du dataProvider du composant au contenu du TextArea. * Si concordance -> emphase du mot-clé détecté */ private function checkSyntax() : void { // On copie le contenu du dataProvider dans un object var _loc1:KeywordCollection = DataModel.getInstance().dataProvider as KeywordCollection; // Simple test pour éviter une erreur au runtime if (_loc1 == null) _loc1 = new KeywordCollection(); // Parcoure des éléments, l'ordre n'a pas d'importance. for ( var i:uint = 0 ; i < _loc1.length ; i++ ) { // mot recherché var searchedWord:String = _loc1.getItemAt( i ).word; // couleur associé var repaint:Number = _loc1.getItemAt( i ).color; // simple compteur pour l'index de départ de la méthode String.indexOf var counter:uint = 0; // Tant que l'on a pas analysé tout le contenu de texte while ( counter < view.text.length ){ // On recherche une occurence de searchedWord var beginIndex :int = view.text.indexOf( searchedWord, counter ); // si on en trouve une if ( beginIndex >= counter ) { // sélection du formatage actuel var oldFormat:TextFormat = view.textField.getTextFormat( beginIndex, beginIndex + searchedWord.length ); // définition d'un nouveau format basé sur l'ancien mais utilisant la couleur associée au mot clé var newFormat:TextFormat = new TextFormat( oldFormat.font, oldFormat.size, repaint ); // application du nouveau format view.textField.setTextFormat( newFormat, beginIndex, beginIndex + searchedWord.length ); // mise à jour du compteur counter = beginIndex; } // incrémentation du compteur counter++; } } } /** * Déclenché lorsque du texte est saisi * @param p */ public function textAreaChangeHandler( p:Event ) :void { // Détermination du caractère tapé var currentCharCode:Number = view.textField.text.charCodeAt( view.textField.caretIndex - 1); var currentChar:String = view.textField.text.charAt( view.textField.caretIndex - 1); var isNewWord:Boolean = ( currentCharCode == Keyboard.SPACE ); // Si c'est la barre d'espace, on teste la présence de mot-clé if ( isNewWord ) checkSyntax (); } } }
Le code qui rend le service du composant est défini dans la méthode checkSyntax. Le code peut être nettement amélioré et je vous y encourage…
Le contrôleur accède à la vue et au modèle.
Voici le code du modèle.
/** * Simple modèle de donné du composant. * Fournit un point d'accès unique aux données du composant. * Singleton comme le veut la tradition :) * @author Tony Broyez * @version 0.1 */ package fantastique.ui{ public class DataModel { /** * Stocke la collection de données associant mot-clé & couleur */ public var dataProvider:Object = new Object(); private static var instance:DataModel = null; public static function getInstance () : DataModel { if ( instance == null ) instance = new DataModel(); return instance as DataModel; } public function DataModel () { if ( instance != null ) throw new Error( "SingletonError" ); } } }
Vous vous souvenez certainement des classes KeywordCollection et KeywordCollectionItem.
ces classes sont des modèles réutilisables pour la plupart des composants utilisant une balise Collection en tant que paramètre inspectable.
Voici le code de KeywordCollection.
/** * Représente une structure de données pour une balise [Collection(..)] */ package fantastique.ui { public class KeywordCollection { private var _items:Array; /** * Le constructeur doit être sans arguments */ public function KeywordCollection() { super(); _items = new Array(); } /** * Ajoute un item à la collection * Cette méthode doit être définie * @param item * @return */ public function addItem(item:Object):Boolean { if (item !=null ) { _items.push(item); return true; } return false } public function clear():void { _items = new Array(); } /** * Permet d'obtenir un élément de la collection * @param index * @return */ public function getItemAt(index:Number):Object { return(_items[index]); } /** * Retourne la taille de la collection * @return int */ public function get length():int { return _items.length; } } }
et enfin celui de KeywordCollectionItem.
/** * Représente un élément de la collection keywords exposée par le composant. * @author Tony Broyez * @version 0.1 */ package fantastique.ui { public class KeywordCollectionItem { private var _word:String; private var _color:Number; /** * Ces paramètres apparaissent dans la boîte de dialogue Values pour le paramètre keywords * Les types admis sont String, Number */ [Inspectable(defaultValue="")] public function get word():String { return _word; } public function set word(s:String):void { _word = s; } [Inspectable(defaultValue="0")] public function get color():Number { return _color; } public function set color(n:Number):void { _color = n; } /** * Le constructeur doit être sans arguments */ public function KeywordCollectionItem() { _word = ""; _color = 0; } public function toString():String { return ("[word: \"" + _word + "\", color: " + _color + "]"); } } }
Création d’un clip compilé SyntaxHighlighterShim pour nos définitions
Qu’est ce donc que ce clip compilé …Shim ? Une explication très détaillée est fourni par Jeff Kamerer sur le site d’Adobe.
Je vais être plus laconique
ce clip compilé sert principalement 2 objectifs :
- il va permettre de séparer le code source du composant et les assets. Ainsi, l’utilisateur peut modifier l’enveloppe graphique du composant sans avoir à recompiler le byte code du composant
- il permet également de distribuer le composant sans le code source.
Comment le créer ?
Nous allons utiliser le 2nd fla.
sauvegardez ce fla sous le nom SyntaxHighltighterShim.fla et prenez garde à bien définir le chemin de classe comme décrit en haut de cet article.
- copier le clip compilé nommé componenShim situé dans le sous-dossier _private du dossier Component Assets dans Syntaxhighlighter.fla.
- coller-le dans la bibliothèque de SyntaxHighltighterShim.fla
- Créez un symbole vide nommé SyntaxHighltighterShim Source et dans le panneau propriété, lié le à la classe (inexistante) fantastique.ui.SyntaxHighltighterShim, confirmez le message.
- Créez un 2nd symbole vide et lié le à fantastique.ui.SyntaxHighlighter cette fois.
- Cliquez sur SyntaxHighltighterShim Source et convertissez le en clip compilé
- Renommez le clip compilé ‘SyntaxHighltighterShim’ et dans le panneau liaison, décochez l’option ‘exporter dans la première frame’.
- copier ce clip compilé dans la bibliothèque de Syntaxhighlighter.fla dans le sous-dossier private du dossier Component Assets.
- Supprimer le clip componentShim initial. Ce clip ne nous sert plus à rien, car son byte code à été également compilé dans le clip compilé SyntaxHighltighterShim.
- Faites glisser SyntaxHighltighterShim dans le composant SyntaxHighltighter sur la frame 2 du calque skin et positionnez-le à 0, 0.
- Ouvrez à nouveau le panneau Définition du composant… et validez.
Sachez que vous devrez recompiler un clip SyntaxHighltighterShim à chaque modification du code source du composant.
A ce stade, le composant est parfaitement utilisable et la bibliothèque de votre fla devrait s’apparenter à ceci, à l’exception de l’icône utilisé pour le composant (vous devriez avoir votre propre icone).
Si vous fermez le fla, et que vous le copiez dans le répertoire C:\Program Files\Adobe\Adobe Flash CS3\fr\Configuration\Components\Personal (j’ai crée un répertoire Personal pour stocker mes composants, nommez ce répertoire comme vous le voulez), et dans un nouveau fla vous ouvrez le panneau composant et le rechargez, vous verrez apparaître votre composant et pourrez l’utiliser (la bonne pratique de la documentation officielle dit de fermer Flash et de le relancer).
Afin de finaliser et de faciliter le déploiement de ce composant, je vous propose de créer un fichier d’aperçu en direct ainsi qu’un package mxp avec Adobe Extension Manager.
Création d’un fichier swf d’aperçu en direct
Qu’est ce que l’apercu en direct ?
Le mode aperçu en direct réfère au comportement du composant lorsqu’il est manipulé dans un fichier fla au sein même de l’IDE de Flash et non plus dans le player autonome.
Le but cependant est de donner dans l’IDE, une “idée” (prévisualiser) de ce que sera le composant, une fois le fla compilé.
Il implique la classe fl.livepreview.LivePreviewParent, laquelle appelle directement des méthodes du code de notre composant pour modifier son apparence sur la scène (Par exemple, dans le cas de notre composant, l’aperçu en direct permettra de voir un TextArea plutôt que le simple rectangle d’avatar de notre composant directement pendant l’édition du composant sur la scène)
pendant l’écriture du code du composant, il est possible de détecter le mode LivePreview, et ainsi d’implanter un comportement spécifique si l’on est dans ce mode. Pour cela, on pourra tester :
var isLivePreview:Boolean = (parent != null && getQualifiedClassName(parent) == "fl.livepreview::LivePreviewParent");
Pour créer un fichier d’aperçu en direct, c’est relativement simple et plutôt bien expliqué dans la documentation de flashCS3.
Il existe deux façons de faire, dont l’une est proactive et permet de comprendre ce qu’est ce fichier d’aperçu en direct :
- Créer un nouveau FLA et définir sa classe de document à fl.livepreview.LivePreviewParent
- copier le composant de son fla d’origine dans ce nouveau fla et le placer sur la scène, aux coordonnées 0, 0.
- Réduire la taille de la scène aux dimensions du composant.
- compiler.
- Dans le fla du composant, dans Définition du composant… vous pouvez sélectionner le swf que vous avez compilé en tant que fichier d’aperçu en direct.
Si le coeur vous en dit, vous pouvez consulter la définition de la classe fl.livepreview.LivePreviewParent pour en comprendre le fonctionnement.
Sous Windows, cette classe se trouve ici :C:\Program Files\Adobe\Adobe Flash CS3\fr\Configuration\ActionScript 3.0\Classes\fl\livepreview\LivePreviewParent.as
Déploiement avec Adobe Extension Manager
C’est la dernière ligne droite…
swc, mxi, mxp…quelques extensions de fichiers bien mystérieuses… clarifions
Le format swc est un format de compression ActionScript et peut être utilisé pour un composant comme pour une bibliothèque de code (exemple: cairngorm.swc pour Flex).
Un fichier mxi est tout simplement un fichier xml spécifique à Adobe Extension Manager. il permet de décrire/configurer le futur package mxp.
Le fichier mxp est le fichier de déploiement qui permet d’installer l’extension au moyen d’Extension Manager.
Ainsi donc, pour créer un package mxp vous devez d’abord créer un fichier xml et le renommer en .mxi.
Assez peu de ressources sont disponible sur le format de fichier .mxi et je n’ai pas trouvé, pour le moment, d’informations concernant une évolution du format mxi pour flash CS3 ou CS4. Si quelqu’un à des informations là-dessus, qu’il n’hésite surtout pas !
<macromedia-extension name="SyntaxHighlighter Component" version="1.0.0" type="flash component"> <author name="Tony Broyez" /> <products> <product name="Flash" version="9" primary="true" /> </products> <description> <![CDATA[SyntaxHighlighter Component 0.1. Enrichi un TextArea de la fonctionnalité de SyntaxHighlighting.]]> </description> <ui-access> <![CDATA[author email : broyeztony@yahoo.fr]]> </ui-access> <files> <file source="Syntax Highlighter.fla" destination="$flash/Components/Personal" /> </files> </macromedia-extension>
Voilà le contenu du fichier mxi que j’ai crée pour ce composant.
Ensuite, il suffit de lancer Extension Manager, et dans le menu Fichier, cliquez sur la commande Empaqueter une extension…
Et Extension Manager créera pour vous un joli petit fichier mxp que vous pouvez mettre à disposition.
Ensuite, il suffit de cliquer sur ce fichier mxp pour installer l’extension et disposer d’un nouveau composant dans le panneau Componsant de Flash.
Attention : si vous ouvrez ce fichier avec Extension Manager CS4, le composant sera installé pour Flash CS4.
- 5 Comments »
- Posted in Non classé