Création d'un éditeur de texte enrichi Flex 2 personnalisé à l'aide de Fireworks CS3
Modifié
21 May 2007
Configuration requise
Connaissances préalables
Ce didacticiel décrit comment utiliser Fireworks CS3 avec Flex 2. Il est nécessaire de connaître Flex 2 pour modifier manuellement un composant/widget personnalisé afin qu'il fonctionne comme une commande Flex 2.
Niveau de l'utilisateur
Débutant
Produits requis
- Fireworks (Download trial)
- Flex Builder (Download trial)
- Flex (Download trial)
Fichiers exemples
- custom_rich_text_editor.zip (328 KB)
Fireworks CS3 est fourni avec une sélection de symboles sophistiqués dynamiques. Une catégorie de ces symboles sophistiqués correspond aux mx.controls visuels de Flex 2. Les mx.controls de Flex 2 fournis avec Fireworks CS3 n'incluent cependant pas d'éditeur de texte enrichi, un outil très utile pour le développement d'applications Flex.
Vous pouvez étendre les capacités des composants Flex 2 en créant les fonctionnalités dont vous avez besoin à l'aide de Fireworks CS3. Cet article décrit comment créer un éditeur de texte enrichi Flex 2 à l'aide des symboles sophistiqués disponibles dans Fireworks CS3.
Organisation et préparation des fichiers du projet
Commençons par organiser les fichiers du projet. Téléchargez les fichiers exemples mentionnés au début de l'article, puis décompressez l'archive ZIP. Les fichiers sont distribués en deux dossiers : fichiers de démarrage et version terminée du projet.
Copiez les deux fichiers du dossier Starter_files (RichTextEditor.graphic.png et RichTextEditor.jsf) à l'emplacement suivant, en fonction de votre système d'exploitation :
- Windows : C:\Documents and Settings\[User]\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
- Mac OS : HD\Users\[User]\Library\Application Support\Adobe\Fireworks CS3\Common Library\Custom Symbols
Vous pouvez maintenant ouvrir Fireworks. Assurez-vous d'utiliser la version CS3.
Remarque : Lorsque vous modifiez le fichier de script JSF de démarrage, n'oubliez pas de supprimer l'ancienne instance de symbole du panneau Bibliothèque et de cliquer sur l'icône Recharger du panneau Bibliothèque commune. Toutes les modifications apportées au script seront alors répercutées dans le panneau Propriétés du symbole.
Dans l'écran d'introduction par défaut de Fireworks CS3, cliquez sur Créer nouveau > Document Fireworks (PNG) ou sélectionnez Fichier > Nouveau. Créez un document assez grand pour contenir le symbole graphique personnalisé. Dans cet exemple, la taille définie pour le document est 550 (largeur) x 500 (hauteur) et sa couleur de fond est le blanc (voir figure 1). Cliquez sur OK.
À ce stade, il est conseillé d'organiser les panneaux de Fireworks de façon à accéder facilement aux éléments dont vous aurez besoin. Sélectionnez Fenêtre > Bibliothèque commune (ou appuyez sur F7) pour afficher le panneau correspondant. Cliquez ensuite sur Fenêtre > Bibliothèque (ou appuyez sur F11). Enfin, sélectionnez Fenêtre > Propriétés du symbole.
Activez le panneau Bibliothèque commune en cliquant sur sa barre de titre, puis consultez la liste des symboles sophistiqués disponibles. Double-cliquez sur le dossier des composants Flex pour en détailler la liste des symboles par défaut. En double-cliquant sur le dossier Symboles personnalisés, vous remarquerez la présence du nouveau symbole graphique RichTextEditor (voir figure 2). Ce symbole a été ajouté à la bibliothèque commune de Fireworks CS3 lorsque vous avez copié les fichiers du dossier Sample_files dans le répertoire des symboles personnalisés.
Maintenant que vous avez ajouté le symbole RichTextEditor à la bibliothèque commune, vous pouvez procéder à sa personnalisation.
Personnalisation du symbole RichTextEditor
Dans l'étape précédente de ce didacticiel, vous avez ajouté le symbole RichTextEditor à la bibliothèque commune. Vous pouvez désormais le modifier afin de créer un composant Flex 2 personnalisé. Commencez par placer le symbole RichTextEditor dans la zone de travail.
Faites glisser le symbole RichTextEditor depuis le dossier Symboles personnalisés vers la zone de travail du nouveau document. Une représentation graphique de la commande d'édition de texte enrichi Flex 2 ainsi qu'un élément Calque 1 nommé « RichTextEditor » s'affichent dans le panneau Calques (voir Figure 3).
Double-cliquez sur le symbole RichTextEditor pour afficher les éléments du symbole/widget Fireworks dans le panneau Calques.
Vous pouvez rendre les éléments de widget/symbole enrichi de Fireworks CS3 interactifs via le nouveau panneau Propriétés du symbole. Ils permettent de mettre directement à jour les interactions avec les propriétés et/ou styles spécifiques d'un composant visuel Flex 2.
Dans cet exemple, vous pouvez mettre à jour l'éditeur de texte enrichi en modifiant les éléments du symbole. Le symbole RichTextEditor est constitué de quatre éléments répertoriés dans le panneau Calques (voir Figure 4).
- L'élément Bitmap correspond à une image d'arrière-plan et n'est pas interactif.
Remarque : Le composant Flex 2 RichTextEditor est une commande complexe à laquelle sont associées de nombreuses sous-commandes (TextArea, Container, Buttons, ColorPicker, HBox et TextInput). Dans le cadre de ce didacticiel, l'image bitmap fournie avec les fichiers exemples téléchargeables suffit. Si vous le souhaitez, vous pouvez créer votre propre image d'arrière-plan pour l'interface du composant Flex RichTextEditor à l'aide des outils de dessin.
Les trois éléments Calque 1 suivants correspondent à des objets texte Fireworks qu'il est possible de mettre à jour afin d'obtenir une interactivité utilisateur.
- L'élément title correspond à la commande Label.
- L'élément htmlText représente une propriété interactive et correspond à la sous-commande TextArea de l'éditeur de texte enrichi.
- L'élément defaultLinkProtocol correspond à la sous-commande linkProtocol TextInput par défaut de l'éditeur de texte enrichi.
Pour revenir au document, cliquez sur Terminé, dans la partie supérieure du volet Modifier le symbole.
Maintenant que vous avez examiné les éléments du symbole, vous pouvez procéder à la création ou à la modification du script de démarrage afin de pouvoir configurer les trois éléments d'objet texte Fireworks dans le panneau Propriétés du symbole (voir Figure 5).
Mise à jour du fichier RichTextEditor.jsf
Accédez aux fichiers copiés dans le dossier Bibliothèque commune/Symboles personnalisés, puis ouvrez le fichier RichTextEditor.jsf dans l'éditeur de texte de votre choix. Ce fichier se trouve dans le répertoire suivant, en fonction de votre système d'exploitation :
- Windows : C:\Documents and Settings\[User]\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
- Mac OS : HD\Users\[User]\Library\Application Support\Adobe\Fireworks CS3\Common Library\Custom Symbols
Le code suivant s'affiche lorsque vous ouvrez le fichier de script de base dans un éditeur de texte :
function setDefaultValues()
{
}
function applyCurrentValues()
{
}
switch(Widget.opCode)
{
case 1: setDefaultValues(); break;
case 2: applyCurrentValues(); break;
}
Analysons ce code. Deux fonctions alimentent essentiellement le script de base. La première définit (déclare) un tableau de valeurs contenant le nom de l'objet, le type de propriété et la valeur par défaut. La seconde applique ces valeurs à l'objet widget (symbole) Fireworks via le panneau Propriétés du symbole.
La valeur customData de flexClassName détermine le type de composant Flex correspondant au widget (symbole) Fireworks. Dans cet exemple, il s'agit de RichTextEditor.
Les valeurs sont placées à la fin d'un tableau et la fonction renvoie la nouvelle taille du tableau. Le tableau contiendra trois valeurs de code (positions d'index 0, 1 et 2) :
- name représente l'élément de propriété interactive.
- type détermine le type d'objet. Dans les trois cas exposés ci-dessous, il s'agit d'un objet texte (String). Les autres types de propriétés sont Boolean (true ou false), Number, Color, etc.
- value correspond à la valeur par défaut littérale de la propriété du composant name.
Copiez-collez le code de remplacement suivant dans le fichier RichTextEditor.jsf afin de le substituer entièrement au code d'origine, puis enregistrez le fichier :
function setDefaultValues()
{
Widget.elem.customData["flexClassName"]
= "RichTextEditor";
var
values = new Array();
values.push({ name:"title", type:"text", value:"Flex
Rich Text Editor" });
values.push({ name:"htmlText", type:"text", value:"
" });
values.push({ name:"defaultLinkProtocol", type:"text",
value:"http://" });
Widget.elem.customData["currentValues"]
= values;
}
function applyCurrentValues()
{
var
values = Widget.elem.customData["currentValues"];
Widget.GetObjectByName("title").textChars = values[0].value;
Widget.GetObjectByName("htmlText").textChars = values[1].value;
Widget.GetObjectByName("defaultLinkProtocol").textChars =
values[2].value;
}
switch
(Widget.opCode)
{
case 1: setDefaultValues(); break;
case 2: applyCurrentValues(); break;
}
Dans le code ci-dessus, GetObjectByName() retransfère les valeurs par défaut du tableau équivalentes (values []) au symbole (widget) sous le type textChars.
Maintenant que vous avez utilisé l'éditeur de texte pour mettre à jour le fichier JSF, revenons à Fireworks CS3 afin de déterminer comment rendre le composant Flex interactif à l'aide du panneau Propriétés du symbole.
Ajout d'interactivité au symbole RichTextEditor
Ouvrez Fireworks CS3 si ce n'est déjà fait.
Dans le panneau Bibliothèque, supprimez l'instance en cours du symbole RichTextEditor. Cliquez sur l'icône Recharger située en bas du panneau Bibliothèque commune. Cliquez sur le dossier Symboles personnalisés pour le développer, puis faites glisser une nouvelle instance du symbole RichTextEditor sur la zone de travail.
Dans l'étape précédente de ce didacticiel, vous avez mis à jour le fichier RichTextEditor.jsf. Maintenant que vous avez modifié le code et rechargé le symbole dans la Bibliothèque commune, vous pouvez constater qu'une communication est désormais établie entre le composant personnalisé RichTextEditor (RichTextEditor.graphic.png) et le panneau Propriétés du symbole. Lorsque vous placez une nouvelle instance de RichTextEditor dans la zone de travail, les valeurs par défaut sont reflétées dans le panneau Propriétés du symbole (voir Figure 6).
Une fois la communication établie, toute modification apportée aux valeurs par défaut du symbole dans le panneau Propriétés du symbole est automatiquement reflétée dans le symbole (voir Figure 7).
Exportation et personnalisation du composant Flex
Dans l'étape précédente de ce didacticiel, vous avez pu examiner l'impact des changements effectués dans le panneau Propriétés du symbole sur le symbole. Lorsque vous êtes satisfait des modifications apportées au contenu et des valeurs de propriété du symbole, cliquez sur Exportation rapide > Flex, puis sur l'onglet MXML, et enregistrez le fichier sous le nom nomdefichier.mxml. Vous pouvez également sélectionner Fichier > Exporter > MXML et images.
Lancez Flex Builder 2 (ou votre éditeur MXML favori), puis ouvrez le fichier MXML exporté. Observez le code. Les noms des trois propriétés et leurs valeurs ont été ajoutés à la balise mx:RichTextEditor control. Le code se présente comme suit :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://adobe.com/2006/mxml" width="550"
height="550" layout="absolute"
backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:RichTextEditor
id="richTextEditor" x="126" y="46"
width="297" height="223" defaultLinkProtocol="http://"
htmlText=" A Flex Control created in Fireworks CS3." title="Flex
Rich Text Editor"/>
</mx:Application>
Si vous compilez le fichier MXML à l'aide de Flex Builder 2 ou du kit SDK Flex Builder 2.0.1, vous obtiendrez un éditeur de texte enrichi fonctionnel même en l'absence de déclencheurs d'événements.
Autres personnalisations
Vous pouvez effectuer d'autres mises à jour de valeurs de propriétés via la balise mx:RichTextEditor, en configurant les valeurs de hauteur, de largeur et de coordonnées x et y. Les valeurs par défaut correspondent à l'objet ou au symbole actif tel que saisies dans l'Inspecteur des propriétés de Fireworks (voir Figure 8). Notez que vous pouvez toujours modifier les paramètres des propriétés après avoir exporté le symbole Fireworks en MXML.
Vous pouvez modifier manuellement la largeur et la hauteur par défaut du symbole en changeant tout simplement les valeurs associées. Si vous modifiez, par exemple, ces valeurs en 350 x 300 et que vous recompilez l'application Flex, le code se présente comme suit :
<mx:RichTextEditor id="richTextEditor"
x="126" y="46" width="350"
height="300" defaultLinkProtocol="http://"
htmlText=" A Flex Control created in Fireworks CS3." title="Flex
Rich Text Editor"/>
En augmentant la taille du composant, vous ajoutez plus d'espace au sein de l'interface. Cela permet de mieux aligner les sous-commandes Control Bar horizontalement (voir Figure 9).
Dans cet exemple, puisque le composant hérite de nombreuses autres sous-commandes, il est conseillé de remplacer manuellement les propriétés de largeur et de hauteur par défaut pour améliorer l'apparence de l'interface.
La balise mx:Application contient la couleur de fond Fireworks CS3 active. Les paramètres de couleur par défaut des applications Flex sont définis par un tableau à deux couleurs. La propriété correspondant à la couleur de fond de Fireworks utilise ce tableau comme référence.
Vous pouvez modifier les couleurs d'une application Flex manuellement afin de créer un schéma chromatique harmonieux et définir une couleur de remplissage en dégradé pour l'arrière-plan. Dans l'exemple de code ci-dessous, la couleur du haut est le noir et la couleur du bas correspond à la couleur de fond Fireworks exportée, à savoir le blanc :
<mx:Application
xmlns:mx="http://adobe.com/2006/mxml" width="550"
height="550" layout="absolute" backgroundGradientColors="[#000000,
#FFFFFF]">
Mise à jour des propriétés publiques et par défaut
Vous pouvez effectuer de nombreux autres changements et mises à jour. À chaque composant Flex 2 sont associés les éléments defaultproperties, attributeproperties et customValues.
L'exemple suivant indique comment remplacer ou mettre à jour les propriétés, styles et valeurs personnalisées dans le code. Pour cela, vous devrez créer une nouvelle variable definitionObject, puis transférer ses éléments au symbole/widget en tant que customData. Pour en savoir plus sur l'utilisation de definitionObject, consultez l'article de Trevor McCauley intitulé Création de symboles sophistiqués pour l'option d'exportation MXML et images dans Fireworks CS3 disponible en anglais dans le Pôle de développement.
Pour remplacer les paramètres de largeur et de hauteur par défaut, créez un élément definitionObject appelé defaultProperties. Utilisez ensuite ce nouvel objet pour exclure les propriétés de largeur et de hauteur du tableau, comme indiqué dans l'exemple de code ci-dessous :
var
definitionObject = new Object();
//
Manually override default width x height by excluding it in the
defaultProperties
definitionObject.defaultProperties
= ["x", "y", "alpha", "id",
"styleName"];
Widget.elem.customData["flexClassDefinition"] = definitionObject;
L'utilisation d'un nouvel objet pour remplacer les propriétés par défaut est la méthode idéale dans la plupart des situations car la commande Fireworks Exporter > MXML ajoute systématiquement ces propriétés à la balise MXML du composant. Cette approche permet de se baser sur la taille par défaut du composant Flex 2 plutôt que sur celle du symbole Fireworks CS3. Dans cet exemple, la taille par défaut de la commande RichTextEditor est de 325 x 300 pixels (l x h).
Ajoutez du code pour afficher la barre de commandes manuellement. L'extrait de code suivant illustre comment accéder à la propriété showControlBar afin de l'ajouter au tableau des valeurs. Déclarez le tableau comme une « propriété attribut » :
definitionObject.attributeProperties
= ["title", "htmlText", "defaultLinkProtocol", "showControlBar"];
Pour plus de détails, consultez le fichier RichTextEditor.jsf final du dossier Complete_script fourni avec les fichiers exemples.
Si la propriété publique showControlBar est définie sur false, seul l'élément Panel Label et la sous-commande TextArea s'affichent (voir Figure 10).
Vous pouvez également mettre à jour la propriété publique showToolTips. Si vous le souhaitez, vous pouvez ajouter la propriété showToolTips au tableau de valeurs personnalisées sous forme d'objet de type Boolean (true ou false). Le code de cette mise à jour facultative se présenterait alors ainsi :
definitionObject.attributeProperties
= ["title", "htmlText", "defaultLinkProtocol",
"showControlBar", "showToolTips" ];
Si vous définissez la propriété showToolTips sur true, chaque sous-commande de l'éditeur de texte enrichi Flex affiche une description sous forme d'info-bulle (voir Figure 11).
Utilisation de CSS pour mettre à jour l'apparence du composant
La propriété de style cornerRadius figure parmi les styles publics disponibles pour la commande RichTextEditor.
Lorsque vous avez configuré le style sous forme de valeur personnalisée de definitionObject, l'utilisation de la commande d'exportation vers MXML de Fireworks CS3 génère le balisage Flex 2 approprié et distingue le style des propriétés de classe.
Pour déclarer et séparer les styles de classe publics des attributs, ajoutez-les également à definitionObject, comme indiqué dans les deux exemples de code ci-dessous :
Fichier de script (JSF)
definitionObject.styleProperties
= ["cornerRadius"];
Balisage Flex 2
<mx:Style>
>RichTextEditor {
cornerRadius: 1;
}
</mx:Style>
Remarque : Pour mieux comprendre le fonctionnement pratique de cette méthode, consultez le fichier RichTextEditor.jsf final dans le dossier Complete_script fourni avec les fichiers exemples.
En ajustant les valeurs de la propriété de style cornerRadius, vous pouvez modifier l'aspect du composant Flex. Plus les valeurs sont petites, plus les angles de l'interface sont marqués, et à l'inverse, plus les valeurs sont importantes, plus les angles de l'interface sont arrondis. Pour montrer l'impact d'une modification de la valeur cornerRadius sur l'affichage, le composant Flex 2 a été décliné en trois valeurs différentes (voir Figure 12).
Remarque : Si vous définissez la valeur de la propriété cornerRadius sur 0, aucun style n'est appliqué.
Que faire maintenant ?
Consultez le fichier exemple finalisé (RTE.png), que vous pouvez télécharger au début de cet article. Cette version finale du fichier Fireworks CS3 comprend un calque de texte (Label Control) et un bouton supplémentaires. Examinez le fichier de plus près. Vous constaterez que le code MXML final a été mis à jour et comprend désormais un gestionnaire d'événements transférant le texte saisi dans l'éditeur de texte enrichi à la commande Label lorsque vous cliquez sur le bouton.
Pour plus d'informations sur l'extension de la classe RichTextEditor, consultez la documentation relative au package mx.controls RichTextEditor. Pour en savoir plus sur l'extension de Flex 2, consultez la documentation Flex 2.0.1 LiveDocs.
Pour plus d'informations sur l'utilisation des symboles dans Fireworks CS3, consultez l'article de Trevor McCauley intitulé Création de symboles sophistiqués pour l'option d'exportation MXML et images dans Fireworks CS3 disponible en anglais dans le Pôle de développement.
Tutorials & Samples |
Tutorials
- Creating jQuery Mobile website themes in Fireworks
- Extracting CSS properties from Fireworks design objects
- Working with CSS sprites in Fireworks CS6
Fireworks Forum |
More |
Fireworks Cookbooks |
More |
| 09/07/2011 | How do I use FXG XML markup in Shape subclasses? |
|---|---|
| 10/15/2010 | Flex4 Dotted Line |
| 06/25/2010 | ComboBox that uses a NativeMenu (Air API) |
| 05/21/2010 | Localizing a Creative Suite 5 extension |