Adobe Flash Builder 4.6 Manuel utilisateur

Ajouter à Mes manuels
275 Des pages
Utilisation de
&reg;
&reg;
ADOBE FLASH BUILDER 4.6
TM
Informations juridiques
Informations juridiques
Pour consulter les informations juridiques, voir http://help.adobe.com/fr_FR/legalnotices/index.html.
Derni&egrave;re mise &agrave; jour le 10/11/2011
iii
Sommaire
Chapitre 1 : A propos de Flash Builder
Applications que vous pouvez cr&eacute;er &agrave; l’aide de Flash Builder
............................................................ 1
Fonctionnalit&eacute;s qui acc&eacute;l&egrave;rent le d&eacute;veloppement d’applications
Fonctionnalit&eacute;s d’ex&eacute;cution et de d&eacute;bogage de projets
Versions de Flash Builder
........................................................ 2
................................................................. 3
.............................................................................................. 3
Configurations Flash Builder
........................................................................................... 4
Adobe Community Help Client (CHC)
.................................................................................. 4
Chapitre 2 : Initiation &agrave; Flash Builder
Workbench Flash Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Perspectives et vues de Flash Builder
Editeurs Flash Builder
................................................................................... 7
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Projets dans Flash Builder
Ressources des projets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Chapitre 3 : Outils de d&eacute;veloppement de code dans Flash Builder
Assistant de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Assistant rapide
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Remplacement ou impl&eacute;mentation de m&eacute;thodes
Mod&egrave;les de code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Remplissage du code de m&eacute;tadonn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Personnalisation des mod&egrave;les de fichier
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
G&eacute;n&eacute;ration &agrave; partir de l’utilisation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
G&eacute;n&eacute;ration de fonctions d’accesseur get ou set
V&eacute;rification de la syntaxe
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Mise en surbrillance des erreurs de r&eacute;f&eacute;rence non identifi&eacute;e
Recherche de r&eacute;f&eacute;rences et restructuration du code
Formatage, navigation et organisation du code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Chapitre 4 : Utilisation des projets dans Flash Builder
Cr&eacute;ation de projets dans Flash Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Exportation et importation de projets
Cr&eacute;ation de projets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Ex&eacute;cution et d&eacute;bogage des applications
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Exportation d’une application vers une version valid&eacute;e
Cr&eacute;ation de packages d’application AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Chapitre 5 : D&eacute;bogage d’outils dans Flash Builder
Perspective D&eacute;bogage Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
D&eacute;bogage de l’application
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Chapitre 6 : Profilage d’outils dans Flash Builder
Perspective Profil Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Profilage d’une application
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Derni&egrave;re mise &agrave; jour le 10/11/2011
iv
UTILISATION DE FLASH BUILDER 4.6
Sommaire
Fonctionnement du profileur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Utilisation du profileur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
R&eacute;cup&eacute;ration de place
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Identification des zones &agrave; probl&egrave;mes
Filtres du profileur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Chapitre 7 : Outils de test unitaire dans Flash Builder
Environnement de test FlexUnit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Cr&eacute;ation de tests FlexUnit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Ex&eacute;cution des tests FlexUnit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Configuration des tests FlexUnit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Affichage des r&eacute;sultats de l’ex&eacute;cution d’un test FlexUnit
Prise en charge de FlexUnit pour les projets mobiles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Chapitre 8 : D&eacute;veloppement d’applications avec Flex
Flux de travail de base pour d&eacute;velopper une application avec Flex
Cr&eacute;ation d’interfaces utilisateur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
G&eacute;n&eacute;ration de gestionnaires d’&eacute;v&eacute;nement
Acc&egrave;s aux services de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Surveillance des applications qui acc&egrave;dent aux services de donn&eacute;es
Utilisation de projets de biblioth&egrave;que Flex
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Cr&eacute;ation de composants MXML personnalis&eacute;s
Cr&eacute;ation de modules
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Int&eacute;gration de Flex avec les applications HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Chapitre 9 : Utilisation de Flash Builder avec Flash Professional
Cr&eacute;ation d’un projet Flash Professional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Op&eacute;rations possibles dans un projet Flash Professional
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
D&eacute;finition des propri&eacute;t&eacute;s des projets Flash Professional
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Cr&eacute;ation et modification de composants Flash
Gestion de la s&eacute;curit&eacute; de Flash Player
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Chapitre 10 : Utilisation de Flash Builder avec Flash Catalyst
Flux de travaux entre Flash Catalyst et Flash Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Int&eacute;gration de Flash Catalyst et de Flash Builder
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Chapitre 11 : Personnalisation de Flash Builder
Pr&eacute;f&eacute;rences Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Personnalisation du workbench
Pr&eacute;f&eacute;rences de Flash Builder
Extension de Flash Builder
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Derni&egrave;re mise &agrave; jour le 10/11/2011
1
Chapitre 1 : A propos de Flash Builder
Adobe&reg; Flash&reg; Builder™ est un environnement de d&eacute;veloppement int&eacute;gr&eacute; (IDE, integrated development environment)
permettant de cr&eacute;er des applications Internet riches (RIA, rich Internet applications) utilisables sur plusieurs
plateformes pour les ordinateurs de bureau et un grand nombre de p&eacute;riph&eacute;riques mobiles. Il comporte &eacute;galement des
outils de test, de d&eacute;bogage et de profilage favorisant productivit&eacute; et efficacit&eacute;.
Flash Builder est bas&eacute; sur Eclipse, un environnement IDE de type &laquo; open source &raquo;, et fournit tous les outils requis pour
d&eacute;velopper des applications qui utilisent la structure Flex et ActionScript 3.0. Flash Builder s’ex&eacute;cute sous Microsoft
Windows et Apple Mac OS X et est disponible en plusieurs versions. Les options de configuration d’installation vous
permettent d’installer Flash Builder en tant que s&eacute;rie de plug-ins dans une installation existante du workbench Eclipse
ou de cr&eacute;er une installation autonome comprenant le workbench Eclipse.
Applications que vous pouvez cr&eacute;er &agrave; l’aide de Flash
Builder
Vous pouvez cr&eacute;er des applications utilisant la structure Adobe Flex&reg; framework, MXML, Adobe Flash Player, Adobe
AIR&reg;, ActionScript 3.0 et ADEP (Adobe Digital Enterprise Platform) Data Services, ainsi que les composants
graphiques Adobe&reg; Flex&reg; suivants :
• Projets Flex : cr&eacute;ez des projets Flex compatibles avec toutes les technologies de serveur d’arri&egrave;re-plan, notamment
Adobe ColdFusion&reg;, Adobe ADEP Data Services et PHP.
Voir &laquo; Projets Flex &raquo; &agrave; la page 88 et &laquo; D&eacute;veloppement d’applications avec Flex &raquo; &agrave; la page 181.
• Projets ActionScript : cr&eacute;ez des projets ActionScript utilisant l’API Flash (et non la structure Flex).
Voir &laquo; Projets ActionScript &raquo; &agrave; la page 91.
• Projets mobiles : cr&eacute;ez des applications mobiles Flex pour la plateforme Google Android et des applications
mobiles ActionScript pour la plateforme Apple iOS.
Voir &laquo; Projets Flex mobiles &raquo; &agrave; la page 90 et &laquo; Cr&eacute;ation de projets ActionScript mobiles &raquo; &agrave; la page 91.
Pour plus d’informations sur le d&eacute;veloppement d’applications mobiles avec Flex et Flash Builder, voir
D&eacute;veloppement d’applications mobiles avec Flex et Flash Builder.
• Projets de biblioth&egrave;que : cr&eacute;ez des biblioth&egrave;ques de code personnalis&eacute;es que vous pourrez d&eacute;ployer en tant que
fichiers de biblioth&egrave;que de composants (SWC) afin de les partager entre vos applications ou de les distribuer &agrave;
d’autres d&eacute;veloppeurs.
Voir &laquo; Utilisation de projets de biblioth&egrave;que Flex &raquo; &agrave; la page 228.
• Projets Flash Professional : cr&eacute;ez des projets Flash Professional pour modifier et d&eacute;boguer des fichiers Flash FLA
ou XFL cr&eacute;&eacute;s avec Flash Professional CS5.
Voir &laquo; Utilisation de Flash Builder avec Flash Professional &raquo; &agrave; la page 245.
• Projets compatibles Flash Catalyst : vous pouvez cr&eacute;er des projets compatibles Flash Catalyst pour permettre aux
cr&eacute;ateurs et aux d&eacute;veloppeurs de collaborer et de travailler sur un m&ecirc;me projet. Vous pouvez facilement partager
un projet compatible avec Flash entre Flash Builder et Flash Catalyst par le biais des fichiers FXP ou FXPL.
Voir &laquo; Projets compatibles avec Flash Catalyst &raquo; &agrave; la page 92.
Derni&egrave;re mise &agrave; jour le 10/11/2011
2
UTILISATION DE FLASH BUILDER 4.6
A propos de Flash Builder
Voir l’article sur les flux de travaux entre Flash Builder et Flash Catalyst, Pr&eacute;sentation des nouveaux flux de travaux
de Flash Catalyst et Flash Builder de Jacob Surber, chef de produit chez Adobe.
• Composants MXML personnalis&eacute;s : cr&eacute;ez des composants personnalis&eacute;s, puis acc&eacute;dez-y facilement par le biais de
la vue Composants Flash Builder.
Voir &laquo; Cr&eacute;ation de composants MXML personnalis&eacute;s &raquo; &agrave; la page 233.
Vous pouvez aussi cr&eacute;er des composants ActionScript personnalis&eacute;s. Voir &laquo; Cr&eacute;ation d’une classe ActionScript &raquo; &agrave;
la page 42.
Fonctionnalit&eacute;s qui acc&eacute;l&egrave;rent le d&eacute;veloppement
d’applications
Flash Builder dispose des outils n&eacute;cessaires au d&eacute;veloppement d’applications qui utilisent la structure Flex et
ActionScript 3.0. Vous pouvez :
• Acc&egrave;s aux services de donn&eacute;es : utilisez les outils et les assistants Flash Builder pour cr&eacute;er des applications qui
acc&egrave;dent aux services de donn&eacute;es distants.
Voir Pr&eacute;sentation de l’acc&egrave;s aux services de donn&eacute;es.
• Personnalisation de workbench Flash Builder : personnalisez le workbench en fonction de vos besoins personnels
en termes de d&eacute;veloppement. Vous pouvez par exemple organiser l’interface de mani&egrave;re &agrave; inclure vos outils favoris
dans une pr&eacute;sentation particuli&egrave;re.
Voir &laquo; Personnalisation du workbench &raquo; &agrave; la page 259.
• Modification du code : r&eacute;digez et &eacute;ditez le code source de l’application &agrave; l’aide des outils de d&eacute;veloppement de code
de Flash Builder. Ceux-ci incluent la restructuration de code, les conseils de code, la navigation simplifi&eacute;e dans le
code et la v&eacute;rification automatique de la syntaxe, entre autres.
Voir &laquo; Outils de d&eacute;veloppement de code dans Flash Builder &raquo; &agrave; la page 48.
• Cr&eacute;ation d’une interface utilisateur : l’&eacute;diteur MXML en mode Cr&eacute;ation permet de cr&eacute;er des applications en
utilisant des options de pr&eacute;sentation, de faire glisser des composants dans la zone de travail de cr&eacute;ation, puis de les
repositionner et de les redimensionner au besoin, afin de simplifier l’utilisation des &eacute;tats d’affichage, etc.
Voir &laquo; Cr&eacute;ation d’interfaces utilisateur &raquo; &agrave; la page 182.
• Publication du code source : publiez le code source de votre application afin de permettre aux utilisateurs et aux
autres d&eacute;veloppeurs d’y acc&eacute;der.
Voir &laquo; Publication du code source &raquo; &agrave; la page 118.
• Gestion de projets, de dossiers, de fichiers et d’autres ressources : cr&eacute;ez, modifiez et supprimez des projets et des
ressources, g&eacute;n&eacute;rez des liens vers des ressources ext&eacute;rieures &agrave; votre projet, etc.
Voir &laquo; Projets dans Flash Builder &raquo; &agrave; la page 33 et &laquo; Ressources des projets &raquo; &agrave; la page 40.
Derni&egrave;re mise &agrave; jour le 10/11/2011
3
UTILISATION DE FLASH BUILDER 4.6
A propos de Flash Builder
Fonctionnalit&eacute;s d’ex&eacute;cution et de d&eacute;bogage de projets
Flash Builder int&egrave;gre des outils de cr&eacute;ation, de test, de d&eacute;bogage et de profilage qui vous permettent d’am&eacute;liorer votre
productivit&eacute; :
• Cr&eacute;ation de projets : Flash Builder compile et cr&eacute;e automatiquement vos applications de d&eacute;bogage ou de
production. Vous pouvez aussi cr&eacute;er des scripts de cr&eacute;ation personnalis&eacute;s &agrave; l’aide d’Apache Ant.
Voir &laquo; Cr&eacute;ation de projets &raquo; &agrave; la page 101.
• Ex&eacute;cution des applications et gestion des configurations de lancement : ex&eacute;cutez vos applications dans un
navigateur Web, AIR ou dans un Flash Player autonome. Cr&eacute;ation de configurations de lancement personnalis&eacute;es
pour contr&ocirc;ler l’ex&eacute;cution des applications.
Voir &laquo; Ex&eacute;cution et d&eacute;bogage des applications &raquo; &agrave; la page 120 et &laquo; Gestion des configurations de lancement &raquo; &agrave; la
page 120.
• D&eacute;bogage des applications : d&eacute;boguez vos applications &agrave; l’aide des outils de d&eacute;bogage int&eacute;gr&eacute;s.
Voir &laquo; D&eacute;bogage d’outils dans Flash Builder &raquo; &agrave; la page 134.
• Ex&eacute;cution et d&eacute;bogage des applications mobiles : ex&eacute;cutez et d&eacute;boguez vos applications sur l’ordinateur ou sur un
p&eacute;riph&eacute;rique.
Voir Ex&eacute;cution et d&eacute;bogage des applications mobiles.
• Profilage des applications : identifiez les probl&egrave;mes de performance et les fuites de m&eacute;moire des applications &agrave;
l’aide des outils de profilage de Flash Builder.
Voir &laquo; Profilage d’outils dans Flash Builder &raquo; &agrave; la page 145.
• Surveillance des applications qui acc&egrave;dent aux services de donn&eacute;es : utilisez le Moniteur de r&eacute;seau pour g&eacute;n&eacute;rer
une piste d’audit d&eacute;taill&eacute;e de l’ensemble des donn&eacute;es qui circulent entre vos applications et le serveur dorsal.
Voir &laquo; Surveillance des applications qui acc&egrave;dent aux services de donn&eacute;es &raquo; &agrave; la page 224.
Versions de Flash Builder
Flash Builder est disponible en deux versions : Standard et Premium.
Flash Builder version Standard : cette version fournit un environnement IDE complet qui vous permet de cr&eacute;er des
applications &agrave; l’aide de la structure Flex et de l’API Flash. Flash Builder version Standard inclut &eacute;galement des &eacute;diteurs
MXML, ActionScript et CSS, ainsi que des outils de d&eacute;bogage. Il fournit une biblioth&egrave;que de diagrammes et de
graphiques interactifs qui vous permettent de cr&eacute;er des tableaux de bord riches, des analyses de donn&eacute;es interactives
et des composants de visualisation des donn&eacute;es.
Flash Builder version Premium : outre les fonctionnalit&eacute;s de la version Standard, Flash Builder Premium comporte
des outils de profilage de la m&eacute;moire et des performances ainsi que des outils de tests automatis&eacute;s. Utilisez le Moniteur
de r&eacute;seau pour consulter les donn&eacute;es qui sont transmises entre une application client et un service de donn&eacute;es.
L’environnement de test FlexUnit permet de g&eacute;n&eacute;rer et de modifier des tests pouvant se r&eacute;p&eacute;ter. Les tests pouvant se
r&eacute;p&eacute;ter s’ex&eacute;cutent &agrave; partir de scripts, directement dans Flash Builder ou en dehors de l’environnement Flash Builder.
Les fonctionnalit&eacute;s de g&eacute;n&eacute;ration par ligne de commande vous permettent de synchroniser les param&egrave;tres de
g&eacute;n&eacute;ration d’un d&eacute;veloppeur avec une g&eacute;n&eacute;ration nocturne.
Derni&egrave;re mise &agrave; jour le 10/11/2011
4
UTILISATION DE FLASH BUILDER 4.6
A propos de Flash Builder
Flash Builder pour PHP version Standard : Flash Builder pour PHP version Standard fournit un environnement IDE
PHP complet qui inclut Flash Builder version Standard int&eacute;gr&eacute; avec Zend Studio 8. Vous pouvez cr&eacute;er des applications
mobiles, Web et d’ordinateur utilisant PHP, Flex et ActionScript.
Flash Builder pour PHP version Premium : outre les fonctionnalit&eacute;s de la version Standard, Flash&reg; Builder™ pour PHP
version Premium inclut des outils de test professionnels, dont notamment des profileurs, la surveillance du r&eacute;seau, une
infrastructure de test automatis&eacute;e, l’int&eacute;gration avec les tests FlexUnit et la prise en charge de la g&eacute;n&eacute;ration par ligne
de commande.
Pour plus d’informations sur Flash Builder pour PHP, voir Pr&eacute;sentation de Flash Builder pour PHP.
Configurations Flash Builder
Flash Builder fournit un programme d’installation unique disponible au t&eacute;l&eacute;chargement, avec les deux options de
configuration suivantes :
Configuration autonome : installe Flash Builder sous forme d’environnement de d&eacute;veloppement int&eacute;gr&eacute; (IDE)
autonome. La configuration autonome est sp&eacute;cifiquement cr&eacute;&eacute;e pour le d&eacute;veloppement d’applications qui utilisent
l’infrastructure Flex et ActionScript 3.0. Elle est id&eacute;ale pour les nouveaux utilisateurs et pour ceux qui souhaitent
d&eacute;velopper des applications en utilisant uniquement l’infrastructure Flex et ActionScript 3.0.
Configuration plug-in : configure Flash Builder pour une ex&eacute;cution en tant que plug-in au sein d’une installation
Eclipse™ existante. Votre ordinateur doit disposer d’Eclipse 3.6 32 bits (Windows) ou d’Eclipse 3.6 Cocoa 32 bits (Mac)
pour ex&eacute;cuter la configuration plug-in.
Les configurations plug-in et autonome de Flash Builder fournissent les m&ecirc;mes fonctionnalit&eacute;s. Si vous ne savez pas
quelle configuration utiliser, suivez les recommandations suivantes :
• Si Eclipse 3.6 est d&eacute;j&agrave; install&eacute;, utilisez la configuration plug-in pour ajouter les fonctionnalit&eacute;s de Flash Builder &agrave; la
copie existante d’Eclipse.
• Si aucune version d’Eclipse n’est install&eacute;e et que votre objectif principal est de d&eacute;velopper des applications Flex et
ActionScript, utilisez la configuration autonome de Flash Builder. Cette configuration vous permet &eacute;galement
d’installer d’autres plug-ins Eclipse afin d’&eacute;tendre la port&eacute;e de vos futurs travaux de d&eacute;veloppement.
Pour obtenir des informations d&eacute;taill&eacute;es sur l’installation de Flash Builder, voir les notes de mise &agrave; jour de Flash
Builder 4.6.
Adobe Community Help Client (CHC)
Flash Builder utilise le client CHC (Adobe Community Help Client) comme moteur de recherche. Le CHC est une
application AIR qui remplace le moteur Eclipse Help pour Flash Builder et constitue la plateforme de prochaine
g&eacute;n&eacute;ration pour l’aide d’Adobe. Le client CHC se caract&eacute;rise par les propri&eacute;t&eacute;s suivantes :
• Toujours en ligne
Si vous disposez d’une connexion r&eacute;seau, le client CHC acc&egrave;de au contenu situ&eacute; sur le Web pour vous fournir en
permanence les informations les plus r&eacute;centes. En l’absence de connexion Internet, il est &eacute;galement op&eacute;rationnel
en mode local.
• Centr&eacute; sur la recherche
Derni&egrave;re mise &agrave; jour le 10/11/2011
5
UTILISATION DE FLASH BUILDER 4.6
A propos de Flash Builder
Vous pouvez utiliser les fonctions de recherche de l’Aide de la communaut&eacute; (adobe.com) ou proc&eacute;der &agrave; une
recherche locale. La recherche de l’Aide de la communaut&eacute; rassemble les diff&eacute;rentes ressources, y compris celles de
sites tiers. La recherche adobe.com comporte des crit&egrave;res vous permettant d’en restreindre la port&eacute;e.
• Navigation en contexte
La navigation en contexte fournit un ensemble g&eacute;n&eacute;r&eacute; dynamiquement de liens associ&eacute;s dirigeant vers des pages
cl&eacute;s.
• Evaluation et commentaires
Ajoutez des commentaires, des &eacute;valuations et des contributions au contenu de l’Aide et aux ressources Adobe en
ligne depuis le client CHC. Vous devez disposer d’un ID Adobe valide pour ajouter des commentaires et des
&eacute;valuations.
Derni&egrave;re mise &agrave; jour le 10/11/2011
6
Chapitre 2 : Initiation &agrave; Flash Builder
Workbench Flash Builder
Le workbench Flash Builder est un environnement de d&eacute;veloppement complet qui vous aide &agrave; d&eacute;velopper des
applications utilisant la structure Adobe Flex&reg; et ActionScript 3.0. Vous pouvez d&eacute;velopper des applications &agrave; d&eacute;ployer
dans Adobe Flash Player, des applications d’ordinateur &agrave; d&eacute;ployer dans Adobe AIR&reg; et des applications mobiles &agrave;
d&eacute;ployer sur plusieurs types de p&eacute;riph&eacute;riques mobiles.
Les informations n&eacute;cessaires &agrave; l’utilisation de Flash Builder sont pr&eacute;sent&eacute;es dans la documentation de Flash Builder.
Si vous utilisez d’autres plug-ins Eclipse (par exemple, CVS ou Java) avec Flash Builder, ou si vous souhaitez &eacute;tendre
les plug-ins Flash Builder, voir Guide de r&eacute;f&eacute;rence des extensibilit&eacute;s Adobe Flash Builder.
Workbench : le terme workbench se r&eacute;f&egrave;re &agrave; l’environnement de d&eacute;veloppement Flash Builder qui contient tous les
outils permettant de d&eacute;velopper des applications. Le workbench contient trois &eacute;l&eacute;ments principaux : les perspectives,
les &eacute;diteurs et les vues. Vous utilisez ces trois composants dans diff&eacute;rentes combinaisons &agrave; diff&eacute;rents stades du
processus de d&eacute;veloppement de l’application.
Remarque : pour plus d’informations sur certaines fonctionnalit&eacute;s du workbench Eclipse, voir le guide de l’utilisateur du
workbench Eclipse &agrave; l’adresse http://help.eclipse.org/help31/index.jsp.
Perspective : une perspective repr&eacute;sente un groupe de vues et d’&eacute;diteurs du workbench. Flash Builder contient deux
perspectives : la perspective D&eacute;veloppement Flash pour le d&eacute;veloppement des applications et la perspective D&eacute;bogage
Flash pour les applications de d&eacute;bogage. Flash Builder Premium contient &eacute;galement la perspective Profil Flash.
Si vous utilisez la configuration plug-in de Flash Builder (voir &laquo; Configurations Flash Builder &raquo; &agrave; la page 4), le
workbench peut contenir d’autres perspectives telles qu’une perspective Java contenant des &eacute;diteurs et des vues
permettant de d&eacute;velopper des applications Java.
Voir &laquo; Perspectives et vues de Flash Builder &raquo; &agrave; la page 7.
Editeur : un &eacute;diteur vous permet d’&eacute;diter diff&eacute;rents types de fichier. Les &eacute;diteurs dont vous disposez varient selon le
nombre et le type de plug-ins Eclipse install&eacute;s. Flash Builder contient des &eacute;diteurs permettant de r&eacute;diger du code
MXML, ActionScript 3.0 et CSS (Cascading Style Sheets, feuilles de style en cascade).
Voir &laquo; Editeurs Flash Builder &raquo; &agrave; la page 20 et &laquo; Outils de d&eacute;veloppement de code dans Flash Builder &raquo; &agrave; la page 48.
Vue : une vue comporte g&eacute;n&eacute;ralement un &eacute;diteur. Par exemple, lors de l’&eacute;dition MXML, les vues Composants et
Propri&eacute;t&eacute;s apparaissent &eacute;galement dans la perspective D&eacute;veloppement Flash. Ces vues prennent en charge le
d&eacute;veloppement d’applications et s’affichent par cons&eacute;quent lorsqu’un fichier MXML est ouvert en &eacute;dition.
Voir &laquo; Utilisation de vues &raquo; &agrave; la page 19.
Le terme vue est synonyme de panneau, ce dernier &eacute;tant utilis&eacute; dans les versions pr&eacute;c&eacute;dentes de Flash Builder, dans
Adobe Dreamweaver&reg; et dans d’autres outils de d&eacute;veloppement Adobe.
Espace de travail : &agrave; ne pas confondre avec le workbench, un espace de travail repr&eacute;sente une zone d&eacute;finie d’un syst&egrave;me
de fichiers contenant les ressources (fichiers et dossiers) constituant vos projets d’application. Vous ne pouvez
travailler que dans un seul espace de travail &agrave; la fois, mais vous pouvez cependant s&eacute;lectionner un espace de travail
diff&eacute;rent &agrave; chaque lancement de Flash Builder.
Voir &laquo; Projets dans Flash Builder &raquo; &agrave; la page 33.
Derni&egrave;re mise &agrave; jour le 10/11/2011
7
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Ressource : le terme ressource est utilis&eacute; de fa&ccedil;on g&eacute;n&eacute;rique pour d&eacute;signer les fichiers et dossiers des projets d’un
espace de travail.
Voir &laquo; Ressources des projets &raquo; &agrave; la page 40.
Projet : toutes les ressources constituant vos applications figurent dans des projets. Vous ne pouvez pas cr&eacute;er une
application dans Flash Builder sans cr&eacute;er au pr&eacute;alable un projet. Flash Builder prend en charge les diff&eacute;rents types de
projets, selon le type d’application que vous cr&eacute;ez.
Voir &laquo; Types de projets &raquo; &agrave; la page 34 et &laquo; Utilisation des projets dans Flash Builder &raquo; &agrave; la page 88.
Configuration de lancement : une configuration de lancement est cr&eacute;&eacute;e pour chacun de vos projets. Elle d&eacute;finit les
param&egrave;tres de projet utilis&eacute;s lors de l’ex&eacute;cution et du d&eacute;bogage de vos applications. Par exemple, les noms et
emplacements des fichiers SWF d’application compil&eacute;s sont contenus dans la configuration de lancement, et vous
pouvez modifier ces param&egrave;tres.
Voir &laquo; Gestion des configurations de lancement &raquo; &agrave; la page 120.
Voir aussi
&laquo; Personnalisation du workbench &raquo; &agrave; la page 259
Perspectives et vues de Flash Builder
Pour prendre en charge une t&acirc;che particuli&egrave;re ou un groupe de t&acirc;ches, les &eacute;diteurs et les vues correspondantes sont
combin&eacute;s dans une perspective. L’ouverture d’un fichier associ&eacute; &agrave; une perspective particuli&egrave;re conduit &agrave; l’affichage
automatique de cette perspective.
La configuration autonome de Flash Builder propose trois perspectives :
• D&eacute;veloppement Flash
Voir &laquo; Perspective D&eacute;veloppement Flash &raquo; &agrave; la page 8.
• D&eacute;bogage Flash
Voir &laquo; Perspective D&eacute;bogage Flash &raquo; &agrave; la page 134.
• Profil Flash
Voir &laquo; Perspective Profil Flash &raquo; &agrave; la page 145.
Remarque : la perspective Profil Flash est disponible dans Flash Builder Premium.
Ouverture et changement de perspectives
Les perspectives changent automatiquement selon la t&acirc;che en cours. Par exemple, si vous cr&eacute;ez un projet Flex, le
workbench affiche la perspective D&eacute;veloppement. Si vous lancez une session de d&eacute;bogage, la perspective D&eacute;bogage
Flash s’affiche lorsque le premier point d’arr&ecirc;t est atteint.
Derni&egrave;re mise &agrave; jour le 10/11/2011
8
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Vous pouvez &eacute;galement changer manuellement de perspectives en s&eacute;lectionnant Fen&ecirc;tre &gt; Ouvrir la perspective. Vous
pouvez &eacute;galement utiliser la barre des perspectives, situ&eacute;e dans la barre d’outils principale du workbench.
Le titre de la perspective que vous ouvrez remplace celui de la perspective pr&eacute;c&eacute;demment affich&eacute;e. Une ic&ocirc;ne appara&icirc;t
en regard du titre. Elle permet de parcourir rapidement les perspectives dans la m&ecirc;me fen&ecirc;tre. Par d&eacute;faut, les
perspectives s’affichent dans la m&ecirc;me fen&ecirc;tre.
Si vous utilisez la configuration plug-in de Flash Builder et que vous avez install&eacute; d’autres plug-ins Eclipse, d’autres
perspectives peuvent s’afficher. Chaque plug-in Eclipse propose des perspectives pr&eacute;d&eacute;finies, mais vous pouvez les
personnaliser ou cr&eacute;er vos propres perspectives. Pour afficher la liste compl&egrave;te des perspectives, s&eacute;lectionnez Fen&ecirc;tre &gt;
Ouvrir la perspective &gt; Autre.
Perspective D&eacute;veloppement Flash
La perspective D&eacute;veloppement Flash comporte les &eacute;diteurs et les vues dont vous avez besoin pour cr&eacute;er des
applications pour la structure Flex. Lorsque vous cr&eacute;ez un projet, Flash Builder affiche la perspective D&eacute;veloppement
pour que vous puissiez commencer &agrave; d&eacute;velopper une application.
L’exemple suivant illustre les vues Explorateur de packages, Structure et Erreurs :
Derni&egrave;re mise &agrave; jour le 10/11/2011
9
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Le point central de la perspective (et du workbench en g&eacute;n&eacute;ral) est la zone de l’&eacute;diteur. Elle affiche tous les documents
actuellement ouverts dans une interface &agrave; plusieurs onglets
Lorsque vous cr&eacute;ez un projet Flex, le fichier d’application MXML principal s’ouvre dans la zone de l’&eacute;diteur. Vous
pouvez ensuite ouvrir et parcourir les documents MXML, ActionScript et CSS que vous utilisez. Pour plus
d’informations, voir &laquo; Editeurs Flash Builder &raquo; &agrave; la page 20.
Perspective D&eacute;veloppement Flash en mode Source
En mode Source (modification de code), la perspective D&eacute;veloppement contient des &eacute;diteurs et les vues
correspondantes suivantes :
Vue Explorateur de packages
La vue Explorateur de packages contient l’ensemble des projets et des ressources de l’espace de travail et constitue par
cons&eacute;quent un &eacute;l&eacute;ment essentiel du workbench Flash Builder. Elle appara&icirc;t toujours dans les perspectives
D&eacute;veloppement et D&eacute;bogage.
Dans l’Explorateur de packages, vous pouvez s&eacute;lectionner une ressource et en afficher les propri&eacute;t&eacute;s.
1 Dans l’Explorateur de packages, s&eacute;lectionnez une ressource.
2 S&eacute;lectionnez Fichier &gt; Propri&eacute;t&eacute;s.
Pour plus d’informations sur l’Explorateur de packages et sur l’utilisation de projets, voir &laquo; Gestion de projets &raquo; &agrave; la
page 35.
Derni&egrave;re mise &agrave; jour le 10/11/2011
10
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Vue Structure
En mode Source, la vue Structure offre une pr&eacute;sentation hi&eacute;rarchique de la structure du code du document MXML ou
ActionScript s&eacute;lectionn&eacute;, ce qui vous permet d’inspecter et de parcourir les sections ou lignes de code du document.
La vue Structure affiche &eacute;galement les alertes d’erreur de syntaxe g&eacute;n&eacute;r&eacute;es par le compilateur. Cette vue appara&icirc;t
&eacute;galement lorsque vous utilisez l’&eacute;diteur ActionScript.
Pour plus d’informations sur l’utilisation de la vue Structure en mode Source, voir &laquo; Utilisation de la vue Structure
pour parcourir et examiner le code &raquo; &agrave; la page 78.
Vue Erreurs
Lorsque vous saisissez du code, le compilateur Flash Builder d&eacute;tecte les erreurs de syntaxe et d’autres erreurs de
compilation et les affiche dans la vue Erreurs. L’Explorateur de packages signale les nœuds contenant des erreurs.
Lorsque vous d&eacute;boguez vos applications, les erreurs, avertissements et autres informations apparaissent dans la vue
Erreurs. Chaque erreur ou avertissement contient un message, le fichier et le dossier correspondants ainsi que le
num&eacute;ro de la ligne dans le fichier. Les erreurs demeurent affich&eacute;es dans la vue Erreurs jusqu’&agrave; ce que vous les corrigiez
ou qu’elles soient r&eacute;solues.
Remarque : vous pouvez &eacute;galement ajouter les vues T&acirc;ches et Signets. Ces vues offrent des raccourcis suppl&eacute;mentaires
vous permettant de g&eacute;rer et de parcourir le code. Pour plus d’informations sur ces vues, voir &laquo; Utilisation de marqueurs &raquo;
&agrave; la page 83. Pour une pr&eacute;sentation des vues optionnelles disponibles dans Flash Builder, voir &laquo; Autres vues utiles du
workbench &raquo; &agrave; la page 16.
Derni&egrave;re mise &agrave; jour le 10/11/2011
11
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Vue ASDoc
Flash Builder affiche le contenu ASDoc correspondant au code que vous saisissez ou aux &eacute;l&eacute;ments de code sur lesquels
le curseur de la souris est positionn&eacute;. Il affiche en outre dans la vue ASDoc le contenu ASDoc correspondant au code
s&eacute;lectionn&eacute;.
Pour plus d’informations, voir &laquo; Affichage du r&eacute;sum&eacute; du guide de r&eacute;f&eacute;rence ActionScript &raquo; &agrave; la page 51.
Vue Donn&eacute;es/Services
Flash Builder propose des assistants et des outils qui permettent de se connecter aux services de donn&eacute;es. Utilisez la
vue Donn&eacute;es/Services pour vous connecter aux services de donn&eacute;es. Une fois &eacute;tablie la connexion &agrave; un service de
donn&eacute;es, la vue Donn&eacute;es/Services affiche le service, les types des donn&eacute;es retourn&eacute;es et les op&eacute;rations disponibles pour
le service. Elle vous permet en outre de configurer l’acc&egrave;s au service et de lier les donn&eacute;es retourn&eacute;es aux composants
de l’interface utilisateur.
Pour plus d’informations, voir Construction d’applications centr&eacute;es sur les donn&eacute;es avec Flash Builder.
Derni&egrave;re mise &agrave; jour le 10/11/2011
12
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Vue Moniteur de r&eacute;seau
Le Moniteur de r&eacute;seau permet d’analyser les donn&eacute;es transmises entre une application et le ou les services de donn&eacute;es.
Il est disponible avec Flash Builder Premium.
Pour plus d’informations, voir &laquo; Surveillance des applications qui acc&egrave;dent aux services de donn&eacute;es &raquo; &agrave; la page 224.
Perspective D&eacute;veloppement Flash en mode Cr&eacute;ation
Le mode Cr&eacute;ation de l’&eacute;diteur MXML repr&eacute;sente visuellement le code &eacute;dit&eacute; en mode Source. Il contient cependant,
par rapport &agrave; ce dernier, des vues suppl&eacute;mentaires prenant en charge les t&acirc;ches de cr&eacute;ation. Ces vues sont les vues
Composants, Propri&eacute;t&eacute;s, Aspect, Etats et Erreurs du mode Cr&eacute;ation.
Le mode Cr&eacute;ation comporte en outre la vue Structure qui affiche la structure MXML des applications. Pour plus
d’informations sur la cr&eacute;ation d’applications dans Flash Builder, voir &laquo; Cr&eacute;ation d’interfaces utilisateur &raquo; &agrave; la page 182.
Derni&egrave;re mise &agrave; jour le 10/11/2011
13
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Remarque : le mode Cr&eacute;ation n’est pas disponible avec les projets ActionScript. Pour pr&eacute;visualiser l’interface utilisateur
des applications ActionScript, cr&eacute;ez et ex&eacute;cutez les applications. Pour plus d’informations sur l’utilisation d’ActionScript,
voir &laquo; Projets ActionScript &raquo; &agrave; la page 34 et &laquo; Ex&eacute;cution et d&eacute;bogage des applications &raquo; &agrave; la page 120.
En mode Cr&eacute;ation, la perspective D&eacute;veloppement contient l’&eacute;diteur MXML et les vues suivantes :
Vue Composants
La vue Composants contient tous les composants Flex standard. Vous pouvez les s&eacute;lectionner et les ajouter &agrave; la zone
de cr&eacute;ation. Cette vue contient &eacute;galement les composants personnalis&eacute;s que vous cr&eacute;ez.
Pour plus d’informations, voir &laquo; Cr&eacute;ation et modification de composants Flash &raquo; &agrave; la page 246.
Vue Etats
Flex vous permet de cr&eacute;er des applications dont l’apparence varie selon les &eacute;v&eacute;nements d&eacute;clench&eacute;s directement par
l’utilisateur ou g&eacute;n&eacute;r&eacute;s de fa&ccedil;on programm&eacute;e. Ces changements d’interface utilisateur sont appel&eacute;s &eacute;tats d’affichage.
Vous cr&eacute;ez et g&eacute;rez les &eacute;tats d’affichage dans la vue Etats.
Pour plus d’informations sur les &eacute;tats d’affichage, voir &laquo; Ajout d’&eacute;tats d’affichage et de transitions &raquo; &agrave; la page 196.
Vue Aspect
La vue Aspect vous permet de d&eacute;finir le style global de l’application pour le texte et les couleurs. Vous pouvez
&eacute;galement y d&eacute;finir le th&egrave;me des applications du projet.
Derni&egrave;re mise &agrave; jour le 10/11/2011
14
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Panneau Aspect
Pour plus d’informations, voir &laquo; Application de styles &raquo; &agrave; la page 192.
Vue Style
La vue Style vous permet de d&eacute;finir le style des diff&eacute;rents composants. Les styles d&eacute;finissables varient en fonction du
composant.
Panneau Style
Pour plus d’informations, voir &laquo; Application de styles &raquo; &agrave; la page 192.
Derni&egrave;re mise &agrave; jour le 10/11/2011
15
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Vue Propri&eacute;t&eacute;s Flex
Lorsqu’un composant est s&eacute;lectionn&eacute;, ses propri&eacute;t&eacute;s s’affichent dans la vue Propri&eacute;t&eacute;s Flex. Vous pouvez d&eacute;finir et
&eacute;diter ces propri&eacute;t&eacute;s en fonction de vos besoins. Vous pouvez afficher les propri&eacute;t&eacute;s d’un composant de fa&ccedil;on
graphique (comme l’illustre l’exemple suivant), par cat&eacute;gories ou sous forme d’une liste alphab&eacute;tique.
Pour plus d’informations, voir &laquo; D&eacute;finition des propri&eacute;t&eacute;s des composants &raquo; &agrave; la page 27.
Vue Structure
En mode Cr&eacute;ation, la vue Structure pr&eacute;sente une vue hi&eacute;rarchique de la structure MXML de vos applications. Vous
pouvez facilement parcourir la structure d’une application en s&eacute;lectionnant des instructions de balises MXML et des
composants individuels. L’&eacute;l&eacute;ment s&eacute;lectionn&eacute; dans la vue Structure est mis en surbrillance dans la vue Cr&eacute;ation.
Pour plus d’informations sur l’utilisation de la vue Structure en mode Cr&eacute;ation, voir &laquo; Inspection de la structure de
votre MXML &raquo; &agrave; la page 30.
Derni&egrave;re mise &agrave; jour le 10/11/2011
16
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Vue Erreurs du mode Cr&eacute;ation
Lorsque la vue Cr&eacute;ation s’initialise, si des erreurs sont d&eacute;tect&eacute;es avec l’&eacute;diteur ou le projet, elles sont affich&eacute;es dans la
vue Erreurs du mode Cr&eacute;ation.
Le panneau Erreurs du mode Cr&eacute;ation pr&eacute;sente la liste des erreurs associ&eacute;es au mode Cr&eacute;ation de l’&eacute;diteur initialis&eacute;.
Les erreurs sont organis&eacute;es dans une arborescence.
Lorsque vous s&eacute;lectionnez une erreur dans le panneau D&eacute;tails de l’erreur du mode Cr&eacute;ation, les d&eacute;tails de l’erreur
s’affichent dans le panneau D&eacute;tails de l’erreur. Lorsque vous fermez un projet, les erreurs associ&eacute;es &agrave; ce projet sont
supprim&eacute;es de la vue Erreurs du mode Cr&eacute;ation.
Remarque : la vue Erreurs du mode Cr&eacute;ation s’affiche uniquement lorsque le mode Cr&eacute;ation est activ&eacute;. Si vous d&eacute;sactivez
le mode Cr&eacute;ation (d&eacute;s&eacute;lectionnez Fen&ecirc;tre &gt; Activer le mode Cr&eacute;ation), la vue Erreurs du mode Cr&eacute;ation ne s’affiche pas.
Autres vues utiles du workbench
Outre les &eacute;diteurs et les vues associ&eacute;es aux perspectives D&eacute;veloppement, D&eacute;bogage et Profil par d&eacute;faut de Flash Builder,
le workbench contient des vues suppl&eacute;mentaires. Ces vues optionnelles sont class&eacute;es par type et associ&eacute;es &agrave; des
fonctionnalit&eacute;s distinctes du workbench ou &agrave; des plug-ins Eclipse sp&eacute;cifiques.
Pour acc&eacute;der aux vues qui n’apparaissent pas d&eacute;j&agrave; dans une perspective et les ajouter au workbench, s&eacute;lectionnez
Fen&ecirc;tre &gt; Affichage d’une vue &gt; Autre.
Ces vues incluent les vues T&acirc;ches, Signets et Recherche, lesquelles vous aident &agrave; simplifier le processus de
d&eacute;veloppement de l’application.
Apr&egrave;s avoir ajout&eacute; une vue &agrave; la perspective active, vous pouvez l’enregistrer en tant que partie de la perspective. Pour
plus d’informations, voir &laquo; Personnalisation d’une perspective &raquo; &agrave; la page 18.
Vous pouvez &eacute;galement cr&eacute;er des vues rapides qui facilitent l’acc&egrave;s aux vues fr&eacute;quemment utilis&eacute;es. Pour plus
d’informations, voir &laquo; Cr&eacute;ation et utilisation des vues rapides &raquo; &agrave; la page 19.
Derni&egrave;re mise &agrave; jour le 10/11/2011
17
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Vue Signets
La vue Signets sert &agrave; g&eacute;rer les signets que vous ajoutez &agrave; des lignes de code sp&eacute;cifiques ou &agrave; des ressources. Tout comme
dans un navigateur Web, les signets permettent d’effectuer le suivi d’&eacute;l&eacute;ments importants. La s&eacute;lection d’un signet
recherche et affiche ce signet dans le workbench.
Voir aussi
&laquo; Utilisation de marqueurs &raquo; &agrave; la page 83
Vue Recherche
La vue Recherche s’affiche automatiquement lorsque vous recherchez des ressources dans l’espace de travail. Elle
permet de d&eacute;finir des recherches, acc&eacute;der &agrave; des recherches pr&eacute;c&eacute;dentes et filtrer la liste des r&eacute;sultats de la recherche.
Voir aussi
&laquo; Recherche de ressources dans le workbench &raquo; &agrave; la page 43
Utilisation de perspectives
D&eacute;finition de la perspective par d&eacute;faut
Le mot par d&eacute;faut entre parenth&egrave;ses qui suit le nom de la perspective indique qu’il s’agit de la perspective par d&eacute;faut.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Perspectives.
2 Sous Perspectives disponibles, s&eacute;lectionnez la perspective &agrave; d&eacute;finir par d&eacute;faut, puis cliquez sur Perspective par
d&eacute;faut.
3 Cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 10/11/2011
18
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Ouverture de perspectives dans une nouvelle fen&ecirc;tre
Vous pouvez ouvrir les perspectives dans une nouvelle fen&ecirc;tre.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Perspectives.
2 Sous Ouverture d’une nouvelle perspective, s&eacute;lectionnez Dans une nouvelle fen&ecirc;tre.
Pour r&eacute;tablir les valeurs par d&eacute;faut, s&eacute;lectionnez Dans la m&ecirc;me fen&ecirc;tre.
3 Cliquez sur OK.
Personnalisation d’une perspective
Pour modifier la mise en forme d’une perspective, changez les &eacute;diteurs et les vues visibles dans une perspective donn&eacute;e.
Par exemple, vous pouvez afficher la vue Signets dans une perspective et la masquer dans une autre.
Pour cr&eacute;er une perspective, proc&eacute;dez comme suit :
1 Ouvrez une perspective existante.
2 Affichez les vues et les &eacute;diteurs de votre choix.
3 S&eacute;lectionnez Fen&ecirc;tre &gt; Perspective &gt; Sauvegarder la perspective sous (Fen&ecirc;tre &gt; Sauvegarder la perspective sous
dans la configuration de plug-in de Flash Builder).
4 Dans la bo&icirc;te de dialogue Sauvegarder la perspective sous, entrez le nouveau nom de la perspective, puis cliquez sur OK.
Pour configurer une perspective, proc&eacute;dez comme suit :
1 Ouvrez la perspective &agrave; configurer.
2 S&eacute;lectionnez Fen&ecirc;tre &gt; Personnaliser la perspective.
3 S&eacute;lectionnez les onglets Raccourcis ou Commandes en fonction des &eacute;l&eacute;ments que vous souhaitez ajouter &agrave; la
perspective personnalis&eacute;e.
4 Cochez les cases correspondant aux &eacute;l&eacute;ments que vous souhaitez afficher dans les menus et dans les barres d’outils
de la perspective s&eacute;lectionn&eacute;e.
5 Cliquez sur OK.
6 S&eacute;lectionnez Fen&ecirc;tre &gt; Sauvegarder la perspective sous.
7 Dans la bo&icirc;te de dialogue Sauvegarder la perspective sous, entrez le nouveau nom de la perspective, puis cliquez sur OK.
Lorsque vous enregistrez une perspective, Flash Builder ajoute le nom correspondant au menu Fen&ecirc;tre &gt; Ouvrir la
perspective.
Suppression d’une perspective personnalis&eacute;e
Vous pouvez supprimer des perspectives d&eacute;finies pr&eacute;c&eacute;demment. Vous ne pouvez pas supprimer une perspective que
vous n’avez pas cr&eacute;&eacute;e.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Perspectives.
2 Sous Perspectives disponibles, s&eacute;lectionnez la perspective que vous souhaitez supprimer.
3 Cliquez sur Supprimer, puis sur OK.
R&eacute;initialisation des perspectives
Vous pouvez restaurer la pr&eacute;sentation originale d’une perspective apr&egrave;s l’avoir modifi&eacute;e.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Perspectives.
Derni&egrave;re mise &agrave; jour le 10/11/2011
19
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
2 Sous Perspectives disponibles, s&eacute;lectionnez la perspective &agrave; r&eacute;initialiser.
3 Cliquez sur R&eacute;initialiser, puis sur OK.
Utilisation de vues
D&eacute;placement et ancrage de vues
Vous pouvez d&eacute;placer les vues &agrave; l’int&eacute;rieur du workbench, les ancrer &agrave; diff&eacute;rents emplacements ou en annuler
l’ancrage, en fonction de vos besoins.
1 D&eacute;placez la vue vers l’emplacement souhait&eacute; en faisant glisser sa barre de titre.
Lorsque vous d&eacute;placez la vue dans le workbench, le curseur prend la forme d’une fl&egrave;che noire pointant vers
l’emplacement o&ugrave; la vue sera ancr&eacute;e une fois le bouton de la souris rel&acirc;ch&eacute;.
Vous pouvez faire glisser un groupe de vues empil&eacute;es en cliquant sur l’espace vide situ&eacute; &agrave; droite des onglets des vues
et en d&eacute;pla&ccedil;ant la souris.
Vous pouvez &eacute;galement d&eacute;placer une vue &agrave; l’aide de son menu contextuel. Ouvrez le menu contextuel &agrave; partir de
l’onglet de la vue, s&eacute;lectionnez D&eacute;placer &gt; Vue, d&eacute;placez la vue vers l’emplacement souhait&eacute;, puis cliquez de
nouveau avec le bouton de la souris.
2 (Facultatif) Enregistrez les modifications en s&eacute;lectionnant Fen&ecirc;tre &gt; Sauvegarder la perspective sous.
R&eacute;organisation des onglets de vue
Outre l’ancrage des vues &agrave; diff&eacute;rents emplacements du workbench, vous pouvez r&eacute;organiser les onglets des vues &agrave;
l’int&eacute;rieur d’un groupe de vues.
❖ Cliquez sur l’onglet de la vue &agrave; d&eacute;placer, faites glisser la vue vers l’emplacement souhait&eacute;, puis rel&acirc;chez le bouton
de la souris. Un symbole repr&eacute;sentant une pile appara&icirc;t lorsque vous faites glisser l’onglet d’une vue sur d’autres
onglets.
Changement de vues
Le passage d’une vue &agrave; l’autre peut se faire de diff&eacute;rentes fa&ccedil;ons :
• Cliquez sur l’onglet de la vue &agrave; laquelle vous souhaitez acc&eacute;der.
• S&eacute;lectionnez une vue dans le menu Fen&ecirc;tre de Flash Builder.
• Utilisez un raccourci clavier.
Utilisez Ctrl+F7 sous Windows ou Commande+F7 sous Macintosh. Appuyez sur la touche F7 pour s&eacute;lectionner
une vue.
Pour obtenir la liste des raccourcis clavier, cliquez sur Aide &gt; Assistant de touches.
Cr&eacute;ation et utilisation des vues rapides
Les vues rapides sont des vues masqu&eacute;es que vous pouvez ouvrir et fermer rapidement. Elles sont identiques aux autres
vues &agrave; ceci pr&egrave;s qu’elles n’encombrent pas le workbench.
Cliquez sur l’ic&ocirc;ne de vue rapide dans la barre de raccourcis pour afficher la vue. Cliquez &agrave; l’ext&eacute;rieur de la vue rapide
(ou sur le bouton R&eacute;duire de sa barre d’outils) pour la masquer &agrave; nouveau.
Remarque : si vous convertissez la vue Explorateur de packages en vue rapide, puis ouvrez un fichier &agrave; partir de la vue
rapide Explorateur de packages, la vue est automatiquement masqu&eacute;e pour vous permettre d’utiliser ce fichier.
Derni&egrave;re mise &agrave; jour le 10/11/2011
20
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Pour cr&eacute;er une vue rapide, proc&eacute;dez comme suit :
❖ Faites glisser la vue que vous souhaitez convertir en vue rapide vers la barre de raccourcis situ&eacute;e dans l’angle
inf&eacute;rieur gauche de la fen&ecirc;tre du workbench.
L’ic&ocirc;ne de la vue que vous avez d&eacute;plac&eacute;e appara&icirc;t dans la barre de raccourcis. Cliquez sur cette ic&ocirc;ne pour ouvrir la
vue. Cliquez &agrave; l’ext&eacute;rieur de la vue pour la masquer.
Pour restaurer une vue rapide en vue normale, proc&eacute;dez comme suit :
❖ Dans le menu contextuel de la vue, d&eacute;s&eacute;lectionnez Vue rapide.
Filtrage des vues T&acirc;ches et Erreurs
Vous pouvez filtrer les t&acirc;ches ou les probl&egrave;mes qui s’affichent dans les vues T&acirc;ches ou Erreurs. Par exemple, pour voir
uniquement les erreurs que le workbench a consign&eacute;es, ou les t&acirc;ches que vous avez marqu&eacute;es comme rappel personnel,
filtrez les &eacute;l&eacute;ments avec lesquels la ressource ou le groupe de ressources sont associ&eacute;s. Vous pouvez filtrer par cha&icirc;ne
de texte dans le champ Description, par gravit&eacute; d’erreur, par priorit&eacute; de t&acirc;che ou par &eacute;tat de t&acirc;che.
1 Dans la barre des t&acirc;ches de la vue T&acirc;ches ou Erreurs, cliquez sur Filtrer.
2 Renseignez la bo&icirc;te de dialogue Filtres, puis cliquez sur OK.
Pour plus d’informations sur les vues, voir &laquo; Utilisation de vues &raquo; &agrave; la page 19.
Editeurs Flash Builder
Le d&eacute;veloppement d’applications dans Flash Builder repose sur l’utilisation des &eacute;diteurs MXML, ActionScript 3.0 et CSS.
Les &eacute;diteurs sont associ&eacute;s &agrave; des types de ressource. Ainsi, lorsque vous ouvrez des ressources dans le workbench,
l’&eacute;diteur correspondant s’affiche. Chaque &eacute;diteur int&egrave;gre les fonctionnalit&eacute;s n&eacute;cessaires au type de ressource donn&eacute;.
Editeur MXML : utilisez l’&eacute;diteur MXML pour &eacute;diter le code MXML et pour incorporer un code ActionScript et CSS
dans les balises &lt;fx:Script&gt; et &lt;fx:Style&gt;. L’&eacute;diteur MXML propose deux modes : Source et Cr&eacute;ation. Le mode
Source sert &agrave; l’&eacute;dition du code. Le mode Cr&eacute;ation permet la mise en forme visuelle et la cr&eacute;ation des applications. Les
deux modes sont synchronis&eacute;s et les modifications effectu&eacute;es dans un mode sont aussit&ocirc;t r&eacute;percut&eacute;es dans l’autre
mode.
Editeur ActionScript : utilisez l’&eacute;diteur ActionScript pour &eacute;diter des fichiers de classe et d’interface ActionScript. Vous
pouvez incorporer des fonctions ActionScript dans un fichier MXML &agrave; l’aide d’une balise &lt;fx:Script&gt;. Il est toutefois
de pratique courante de d&eacute;finir les classes dans des fichiers ActionScript distincts et d’importer ensuite les classes dans
des fichiers MXML. Cette m&eacute;thode vous permet de d&eacute;finir la plupart de vos applications dans ActionScript.
Editeur CSS : utilisez l’&eacute;diteur CSS pour afficher et &eacute;diter des feuilles de style en cascade. Vous pouvez ensuite
appliquer des styles aux &eacute;l&eacute;ments visuels de vos applications. Pour plus d’informations, voir Styles et th&egrave;mes.
Remarque : l’&eacute;diteur CSS est un &eacute;diteur &agrave; fonction unique pour les projets bas&eacute;s sur le SDK Flex 4. Pour les projets bas&eacute;s
sur le SDK Flex 3, l’&eacute;diteur CSS comporte toutefois deux modes (Source et Cr&eacute;ation).
Voir aussi
&laquo; Outils de d&eacute;veloppement de code dans Flash Builder &raquo; &agrave; la page 48
Trucs et astuces concernant Flash Builder
Derni&egrave;re mise &agrave; jour le 10/11/2011
21
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Utilisation de l’&eacute;diteur MXML en mode Cr&eacute;ation
Affichage du fichier MXML en mode Cr&eacute;ation
1 Si le fichier MXML n’est pas d&eacute;j&agrave; ouvert dans l’&eacute;diteur MXML, cliquez deux fois sur le fichier dans l’Explorateur de
packages pour l’ouvrir.
2 Si l’&eacute;diteur MXML affiche le code source, cliquez sur Cr&eacute;ation dans la partie sup&eacute;rieure de la zone de l’&eacute;diteur.
Vous pouvez passer rapidement d’un mode &agrave; l’autre en appuyant sur les touches Ctrl+'(apostrophe).
Le basculement entre les modes Source et Cr&eacute;ation affiche ou masque automatiquement les vues li&eacute;es &agrave; la cr&eacute;ation,
telles que Composants, Propri&eacute;t&eacute;s et Etats. Pour activer et d&eacute;sactiver ce comportement, acc&eacute;dez &agrave; la bo&icirc;te de
dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Mode Cr&eacute;ation et enfin l’option Afficher
automatiquement les vues li&eacute;es &agrave; la cr&eacute;ation.
Panoramique et d&eacute;filement dans la zone de cr&eacute;ation
❖ Cliquez sur le bouton Mode Panoramique sur le c&ocirc;t&eacute; droit de la barre d’outils de l’&eacute;diteur. Appuyez sur H pour
entrer en mode Panoramique &agrave; partir du clavier. Pour entrer temporairement en mode Panoramique, appuyez sur
la barre d’espacement du clavier et maintenez-la enfonc&eacute;e. Vous pouvez s&eacute;lectionner ou d&eacute;placer des &eacute;l&eacute;ments en
mode Panoramique.
Zoom dans la zone de cr&eacute;ation
Il existe plusieurs fa&ccedil;ons d’utiliser l’outil de zoom. Vous pouvez s&eacute;lectionner des pourcentages dans le menu principal
et le menu contextuel, cliquer sur le bouton Mode Zoom sur la barre d’outils ou utiliser des raccourcis clavier. Le
pourcentage d’agrandissement en cours est toujours affich&eacute; dans la barre d’outils.
• Dans le menu principal, s&eacute;lectionnez Cr&eacute;ation &gt; Zoom avant ou Cr&eacute;ation &gt; Zoom arri&egrave;re. Vous pouvez &eacute;galement
s&eacute;lectionner le sous-menu Agrandissement et choisir un pourcentage sp&eacute;cifique.
• Cliquez sur le bouton Mode Zoom dans la barre d’outils ou appuyez sur la touche Z du clavier. Un curseur de
symbole + s’affiche dans la zone de cr&eacute;ation.
• S&eacute;lectionnez un pourcentage dans le menu contextuel en regard des boutons S&eacute;lectionner, Panoramique et Mode
zoom de la barre d’outils de l’&eacute;diteur. La zone de cr&eacute;ation prend le pourcentage s&eacute;lectionn&eacute; ou s’ajuste &agrave; la taille de
la fen&ecirc;tre.
• Cliquez avec le bouton droit dans la zone de cr&eacute;ation pour s&eacute;lectionner le sous-menu Zoom avant, Zoom arri&egrave;re
ou Agrandissement. La zone de cr&eacute;ation change selon votre choix.
Vous pouvez recourir aux raccourcis clavier suivants dans la zone de cr&eacute;ation :
• Zoom avant : Ctrl+= (Commande+= sous Mac OS)
• Zoom arri&egrave;re : Ctrl+- (Commande+- sous Mac OS)
Pour conna&icirc;tre d’autres raccourcis clavier, s&eacute;lectionnez Aide &gt; Assistant de touches.
Derni&egrave;re mise &agrave; jour le 10/11/2011
22
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Actualisation du mode Cr&eacute;ation pour un rendu correct
Vous pouvez le cas &eacute;ch&eacute;ant actualiser le mode Cr&eacute;ation des &eacute;diteurs MXML et CSS pour rendre correctement la
pr&eacute;sentation. Le rendu de la pr&eacute;sentation peut en effet dans certains cas devenir obsol&egrave;te, par exemple si vous modifiez
un &eacute;l&eacute;ment visuel dans un composant Flash d&eacute;pendant (SWC). Les styles et les habillages ne sont parfois pas rendus
correctement, car Flash Builder doit r&eacute;g&eacute;n&eacute;rer le fichier.
❖ Cliquez sur le bouton Actualiser de la barre d’outils de l’&eacute;diteur.
Utilisation simultan&eacute;e des modes Source et Cr&eacute;ation
Vous pouvez cr&eacute;er une vue partag&eacute;e dans laquelle vous pourrez afficher les deux modes simultan&eacute;ment.
1 Dans le menu contextuel de l’onglet de l’&eacute;diteur, s&eacute;lectionnez Nouvel &eacute;diteur.
Vous disposez &agrave; pr&eacute;sent de deux onglets d’&eacute;dition pour le m&ecirc;me fichier.
2 Faites glisser l’un des onglets vers la droite pour le juxtaposer &agrave; l’autre onglet.
3 Configurez l’un des &eacute;diteurs en mode Cr&eacute;ation et l’autre &eacute;diteur en mode Source.
Pour afficher uniquement le mode Source en d&eacute;sactivant le mode Cr&eacute;ation, d&eacute;s&eacute;lectionnez l’option Activer le mode
Conception dans le menu Fen&ecirc;tre.
Utilisation de composants visuels en mode Cr&eacute;ation MXML
L’&eacute;diteur MXML en mode Cr&eacute;ation vous permet d’utiliser les composants visuels pour avoir une id&eacute;e de l’aspect de
l’application aux diff&eacute;rentes &eacute;tapes de sa cr&eacute;ation. Vous pouvez &eacute;galement s&eacute;lectionner, d&eacute;placer, redimensionner,
faire d&eacute;filer, agrandir ou faire un panoramique sur les &eacute;l&eacute;ments dans la zone de cr&eacute;ation. Cette approche est
particuli&egrave;rement utile lorsque vous avez des composants de type conteneur incorpor&eacute;s.
Utilisation de la vue Composants
La vue Composants s’affiche lorsque vous acc&eacute;dez au mode Cr&eacute;ation de l’&eacute;diteur MXML. Faites-en glisser les
composants vers la zone de cr&eacute;ation pour d&eacute;finir la pr&eacute;sentation de votre application.
Cette vue affiche par d&eacute;faut les composants recommand&eacute;s pour un projet. La version du SDK Flex d’un projet
d&eacute;termine quels composants sont r&eacute;pertori&eacute;s comme composants recommand&eacute;s.
Par exemple, lors de la cr&eacute;ation d’un projet, Flash Builder utilise par d&eacute;faut le SDK Flex 4.6. Les composants
recommand&eacute;s pour le SDK Flex 4.6 sont les composants Spark. Les composants MX ne poss&eacute;dant aucun &eacute;quivalent
Spark sont &eacute;galement r&eacute;pertori&eacute;s dans la liste des composants recommand&eacute;s.
La vue Composants regroupe les composants en cat&eacute;gories, telles que Contr&ocirc;les, Pr&eacute;sentations, Navigateurs et
Graphiques. La cat&eacute;gorie Personnaliser contient les composants d&eacute;finis dans des fichiers MXML et ActionScript
distincts. Pour plus d’informations, voir &laquo; Cr&eacute;ation de composants MXML personnalis&eacute;s &raquo; &agrave; la page 233.
Remarque : la vue Composants r&eacute;pertorie les composants visibles.
Modification de l’affichage des composants dans la vue Composants
Acc&eacute;dez au menu de la vue Composants pour en modifier l’affichage.
1 Pour afficher tous les composants, d&eacute;s&eacute;lectionnez Afficher uniquement les composants recommand&eacute;s.
En mode d’affichage de tous les composants, la vue regroupe les composants en composants Spark et MX.
2 Pour afficher les noms complets des classes, s&eacute;lectionnez Afficher les noms qualifi&eacute;s complets des classes.
Derni&egrave;re mise &agrave; jour le 10/11/2011
23
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Ajout de composants en mode Cr&eacute;ation MXML
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, ouvrez le fichier MXML dans lequel vous voulez ins&eacute;rer le composant.
Le fichier MXML doit &ecirc;tre ouvert en mode Cr&eacute;ation pour que vous puissiez utiliser la vue Composants. Le fichier
MXML peut &ecirc;tre le fichier de l’application principale (fichier dot&eacute; d’un conteneur d’application) ou un fichier de
composant MXML personnalis&eacute;.
2 Dans la vue Composants, localisez le composant &agrave; ajouter.
Si la vue n’est pas ouverte, s&eacute;lectionnez Fen&ecirc;tre &gt; Composants.
La vue Composants classe les composants par cat&eacute;gories. Elle affiche &eacute;galement les composants recommand&eacute;s pour
un projet. Vous pouvez modifier les param&egrave;tres d’affichage de mani&egrave;re &agrave; obtenir la liste compl&egrave;te des composants.
Pour plus d’informations, voir &laquo; Vue Composants &raquo; &agrave; la page 13.
3 Faites glisser un composant de la vue Composants vers le fichier MXML.
Le composant est plac&eacute; en fonction de la r&egrave;gle de pr&eacute;sentation du conteneur parent.
S&eacute;lection et d&eacute;placement de composants dans la zone de cr&eacute;ation
❖ Cliquez sur le bouton Mode S&eacute;lection (en forme de fl&egrave;che) sur la droite de la barre d’outils de l’&eacute;diteur. Ce mode
est activ&eacute; par d&eacute;faut lorsque vous ouvrez un document. Appuyez sur la touche V du clavier pour passer en mode
S&eacute;lection. Faites glisser et d&eacute;posez un composant &agrave; l’emplacement souhait&eacute;. Vous pouvez aussi le faire glisser pour
le redimensionner et cliquer dessus pour le s&eacute;lectionner.
S&eacute;lection et d&eacute;s&eacute;lection de plusieurs composants
Vous pouvez s&eacute;lectionner plusieurs composants dans un fichier MXML. La s&eacute;lection de plusieurs composants peut
s’av&eacute;rer utile si vous voulez d&eacute;finir une valeur commune pour une propri&eacute;t&eacute; partag&eacute;e.
• Appuyez sur la touche Ctrl tout en cliquant sur (Commande-clic sous Macintosh) chaque composant de la
pr&eacute;sentation
• Cliquez sur l’arri&egrave;re-plan de la page et dessinez un rectangle chevauchant les composants.
• Dans la vue Structure (Fen&ecirc;tre &gt; Structure), appuyez sur la touche Ctrl tout en cliquant sur (Commande-clic sous
Macintosh) les composants dans le contr&ocirc;le d’arborescence.
Derni&egrave;re mise &agrave; jour le 10/11/2011
24
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Pour d&eacute;s&eacute;lectionner plusieurs composants, proc&eacute;dez comme suit :
• Cliquez sur le conteneur d’arri&egrave;re-plan.
• Cliquez sur un composant d&eacute;s&eacute;lectionn&eacute;.
• Cliquez dans la marge grise encadrant le composant racine.
Positionnement des composants
Vous pouvez changer la position des composants visuellement en fonction de la propri&eacute;t&eacute; layout du conteneur parent.
Si le conteneur parent sp&eacute;cifie que le positionnement est absolu, vous pouvez faire glisser les composants pour les
repositionner. Dans le cas contraire, les composants repositionn&eacute;s appliquent les r&egrave;gles de pr&eacute;sentation du conteneur
parent.
Par d&eacute;faut, les conteneurs Spark font appel &agrave; la propri&eacute;t&eacute; BasicLayout qui autorise le positionnement absolu. Pour
certains conteneurs MX, vous pouvez &eacute;galement d&eacute;finir la propri&eacute;t&eacute; layout sur absolute. Pour plus d’informations,
voir MX layout containers.
Remarque : vous pouvez &eacute;galement utiliser des contraintes de pr&eacute;sentation pour positionner un composant dans un
conteneur. Ces contraintes d&eacute;finissent de quelle mani&egrave;re les composants doivent &ecirc;tre repositionn&eacute;s en cas de
redimensionnement d’un conteneur. Elles permettent toutefois aussi d’en sp&eacute;cifier la position dans des conteneurs dont
la taille est fixe. Voir Using constraints to control component layout.
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, s&eacute;lectionnez le composant dans la pr&eacute;sentation et faites-le glisser vers une
nouvelle position.
Le composant est plac&eacute; en fonction des r&egrave;gles de pr&eacute;sentation du conteneur parent.
Si le conteneur b&eacute;n&eacute;ficie du positionnement absolu, vous pouvez faire glisser les composants et les positionner
n’importe o&ugrave; dans le conteneur.
Par exemple, si vous d&eacute;placez un conteneur VGroup dans un conteneur HGroup, le conteneur VGroup est plac&eacute; &agrave;
l’horizontale avec les autres conteneurs enfant (s’ils existent).
2 En mode Cr&eacute;ation, s&eacute;lectionnez le conteneur parent du composant et modifiez ses propri&eacute;t&eacute;s de pr&eacute;sentation dans
la vue Propri&eacute;t&eacute;s.
Dans certains cas, vous pouvez changer la position des composants enfant en modifiant les propri&eacute;t&eacute;s du conteneur
parent. Vous pouvez par exemple utiliser les propri&eacute;t&eacute;s verticalGap et horizontalGap du conteneur pour d&eacute;finir
l’espacement entre les composants enfant et la propri&eacute;t&eacute; direction pour pr&eacute;ciser une pr&eacute;sentation &agrave; lignes ou &agrave;
colonnes.
Dimensionnement des composants
En mode Cr&eacute;ation, vous pouvez modifier la taille d’un composant en faisant glisser une poign&eacute;e de
redimensionnement, en utilisant le menu Cr&eacute;ation ou en modifiant ses propri&eacute;t&eacute;s dans la vue Propri&eacute;t&eacute;s.
Remarque : utilisez une pr&eacute;sentation bas&eacute;e sur contrainte pour sp&eacute;cifier la mani&egrave;re dont un composant est
redimensionn&eacute; dynamiquement lors du redimensionnement d’un conteneur. Pour plus d’informations, voir Using
constraints to control component layout.
Dimensionnement d’un composant visuellement
❖ En mode Cr&eacute;ation de l’&eacute;diteur MXML, cliquez sur le composant et faites glisser la poign&eacute;e de dimensionnement
pour le redimensionner.
• Pour contraindre les proportions du composant, maintenez enfonc&eacute;e la touche Maj tout en le faisant glisser.
Derni&egrave;re mise &agrave; jour le 10/11/2011
25
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
• Si l’alignement est activ&eacute;, lorsque vous effectuez le redimensionnement, des lignes d’accrochage s’affichent pour
vous aider &agrave; aligner les bords du composant avec les composants voisins. Pour activer ou d&eacute;sactiver l’alignement
dans le menu principal, s&eacute;lectionnez Cr&eacute;ation &gt; Activer l’alignement.
Harmonisation de la largeur ou de la hauteur de deux composants ou plus
1 En mode Cr&eacute;ation, s&eacute;lectionnez deux composants ou plus.
2 Dans le menu Cr&eacute;ation, s&eacute;lectionnez l’une des options de dimensionnement suivantes :
Rendre de la m&ecirc;me largeur : d&eacute;finit la propri&eacute;t&eacute; width de tous les composants s&eacute;lectionn&eacute;s sur celle du composant
que vous avez s&eacute;lectionn&eacute; en premier.
Rendre de la m&ecirc;me hauteur : d&eacute;finit la propri&eacute;t&eacute; height de tous les composants s&eacute;lectionn&eacute;s sur celle du
composant que vous avez s&eacute;lectionn&eacute; en premier.
Si tous les composants s&eacute;lectionn&eacute;s se trouvent dans le m&ecirc;me conteneur, et que le premier composant que vous
s&eacute;lectionnez a un pourcentage de largeur ou de hauteur sp&eacute;cifi&eacute;, tous les &eacute;l&eacute;ments sont d&eacute;finis selon ce pourcentage.
Dans le cas contraire, tous les composants sont d&eacute;finis avec la m&ecirc;me largeur ou hauteur de pixel.
Dimensionnement d’un composant en modifiant ses propri&eacute;t&eacute;s
1 En mode Cr&eacute;ation, s&eacute;lectionnez le composant.
Pour d&eacute;finir la taille de plusieurs composants simultan&eacute;ment, appuyez sur la touche Ctrl en cliquant (ou Maj-clic
sous Mac OS) sur ces composants.
2 Dans la vue Propri&eacute;t&eacute;s (Fen&ecirc;tre &gt; Propri&eacute;t&eacute;s), d&eacute;finissez la propri&eacute;t&eacute; height ou width du ou des composants
s&eacute;lectionn&eacute;s.
La vue Propri&eacute;t&eacute;s propose trois vues pour l’affichage des propri&eacute;t&eacute;s d’un composant : une vue standard sous forme
de formulaire, une vue par cat&eacute;gories sous forme de tableau et une vue alphab&eacute;tique sous forme de tableau. Vous
pouvez passer d’une vue &agrave; l’autre en cliquant sur les boutons correspondants dans la barre d’outils.
Utilisation de l’accrochage pour positionner les composants
Lorsque vous faites glisser visuellement un composant dans un conteneur dot&eacute; du positionnement absolu, le
composant peut s’accrocher dans la bonne position selon l’endroit vers lequel vous le faites glisser par rapport aux
composants existants. Les composants peuvent s’aligner &agrave; la verticale ou &agrave; l’horizontale.
Par d&eacute;faut, les conteneurs Spark font appel &agrave; la propri&eacute;t&eacute; BasicLayout qui autorise le positionnement absolu. Pour
certains conteneurs MX, vous pouvez &eacute;galement d&eacute;finir la propri&eacute;t&eacute; layout sur absolute. Pour plus d’informations,
voir MX layout containers.
Vous pouvez d&eacute;sactiver l’accrochage pour un composant ou pour tous les composants.
Activation ou d&eacute;sactivation de l’accrochage
❖ Le fichier MXML &eacute;tant ouvert en mode Cr&eacute;ation dans l’&eacute;diteur MXML, s&eacute;lectionnez (ou d&eacute;s&eacute;lectionnez)
Cr&eacute;ation &gt; Activer l’alignement.
Activation ou d&eacute;sactivation de l’accrochage dans les Pr&eacute;f&eacute;rences
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
2 S&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Mode Cr&eacute;ation dans le panneau lat&eacute;ral de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
3 S&eacute;lectionnez ou d&eacute;s&eacute;lectionnez l’option Activer l’accrochage.
Derni&egrave;re mise &agrave; jour le 10/11/2011
26
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Alignement de composants
Vous pouvez aligner visuellement les composants les uns par rapport aux autres dans un conteneur dot&eacute; du
positionnement absolu. Par d&eacute;faut, les conteneurs Spark font appel &agrave; la propri&eacute;t&eacute; BasicLayout qui autorise le
positionnement absolu. Pour certains conteneurs MX, vous pouvez &eacute;galement d&eacute;finir la propri&eacute;t&eacute; layout sur
absolute.
Vous pouvez &eacute;galement centrer les composants dans un conteneur gr&acirc;ce &agrave; une pr&eacute;sentation bas&eacute;e sur des contraintes.
Pour plus d’informations, voir Using constraints to control component layout.
Alignement de composants dans un conteneur dot&eacute; du positionnement absolu
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, s&eacute;lectionnez deux composants ou plus dans le conteneur.
Pour plus d’informations, voir &laquo; S&eacute;lection et d&eacute;s&eacute;lection de plusieurs composants &raquo; &agrave; la page 23.
2 S&eacute;lectionnez l’une des options d’alignement suivantes dans le menu Cr&eacute;ation :
Aligner &agrave; gauche : positionne tous les composants s&eacute;lectionn&eacute;s de mani&egrave;re que leur bord gauche s’aligne avec le
bord du premier composant que vous avez s&eacute;lectionn&eacute;.
Aligner les centres &agrave; la verticale : positionne tous les composants s&eacute;lectionn&eacute;s de mani&egrave;re que leur centre s’aligne &agrave;
la verticale avec celui du premier composant que vous avez s&eacute;lectionn&eacute;.
Aligner &agrave; droite : positionne tous les composants s&eacute;lectionn&eacute;s de mani&egrave;re que leur bord droit s’aligne avec le bord
du premier composant que vous avez s&eacute;lectionn&eacute;.
Aligner en haut : positionne tous les objets s&eacute;lectionn&eacute;s de mani&egrave;re que leur bord sup&eacute;rieur s’aligne avec le bord du
premier composant que vous avez s&eacute;lectionn&eacute;.
Aligner les centres &agrave; l’horizontale : positionne tous les composants s&eacute;lectionn&eacute;s de mani&egrave;re que leur centre s’aligne
&agrave; l’horizontale avec celui du premier composant que vous avez s&eacute;lectionn&eacute;.
Aligner en bas : positionne tous les composants s&eacute;lectionn&eacute;s de mani&egrave;re que leur bord inf&eacute;rieur s’aligne avec le
bord du premier composant que vous avez s&eacute;lectionn&eacute;.
Aligner les lignes de base : positionne tous les composants s&eacute;lectionn&eacute;s de mani&egrave;re que leur ligne de base de texte
horizontal s’aligne avec la ligne de base de texte du premier composant que vous avez s&eacute;lectionn&eacute;. Pour les
composants d&eacute;pourvus de ligne de base de texte (tels que HGroup), le bord inf&eacute;rieur est consid&eacute;r&eacute; comme la ligne
de base.
Pour les objets d&eacute;pourvus de contraintes de pr&eacute;sentation, Flash Builder ajuste la propri&eacute;t&eacute; x pour changer
l’alignement vertical et la propri&eacute;t&eacute; y pour modifier l’alignement horizontal.
Pour les objets d&eacute;pourvus de contraintes de pr&eacute;sentation, Flash Builder ajuste les contraintes gauche et droite pour
changer l’alignement vertical et les contraintes de haut et bas pour modifier l’alignement horizontal. Seules les
contraintes existantes sont modifi&eacute;es, aucun nouvelle contrainte n’est ajout&eacute;e.
Supposons, par exemple, que le composant A poss&egrave;de une contrainte gauche et aucune contrainte droite, et que le
composant B soit dot&eacute; d’une contrainte gauche et d’une droite. Si vous s&eacute;lectionnez les composants A et B et que
vous s&eacute;lectionnez Cr&eacute;ation &gt; Aligner les centres verticaux, Flash Builder ajuste la contrainte gauche de l’objet A et
les contraintes gauche et droite de l’objet B pour les aligner. La contrainte de droite non sp&eacute;cifi&eacute;e de l’objet A reste
non sp&eacute;cifi&eacute;e.
Ajustement de composants
Vous pouvez ajuster la position de composants dans un conteneur dot&eacute; du positionnement absolu en les d&eacute;pla&ccedil;ant
d’un ou de dix pixels &agrave; la fois en utilisant les touches de direction.
Derni&egrave;re mise &agrave; jour le 10/11/2011
27
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Ajustement des composants d’un pixel
❖ S&eacute;lectionnez un ou plusieurs composants en mode Cr&eacute;ation de l’&eacute;diteur MXML et appuyez sur l’une des touches
de direction.
Ajustement des composants de dix pixels
❖ S&eacute;lectionnez un ou plusieurs composants en mode Cr&eacute;ation de l’&eacute;diteur MXML et appuyez sur l’une des touches
de direction tout en maintenant la touche Maj enfonc&eacute;e.
Maintenez la touche de direction enfonc&eacute;e pour continuer &agrave; d&eacute;placer le composant.
Masquage des bordures de conteneurs
Flash Builder affiche par d&eacute;faut les bordures des conteneurs en mode Cr&eacute;ation de l’&eacute;diteur MXML. Vous pouvez
toutefois les masquer.
❖ S&eacute;lectionnez Cr&eacute;ation &gt; Afficher les bordures des conteneurs.
Cette commande est un bouton bascule. S&eacute;lectionnez-la &agrave; nouveau pour afficher les bordures.
D&eacute;finition des propri&eacute;t&eacute;s des composants
Vous pouvez d&eacute;finir visuellement les propri&eacute;t&eacute;s de composants dans la zone de cr&eacute;ation ou dans la vue Propri&eacute;t&eacute;s.
Modification du texte affich&eacute; par un composant
❖ Pour &eacute;diter le texte affich&eacute; par un composant tel qu’un contr&ocirc;le Label ou TextInput, cliquez deux fois sur le
composant et saisissez vos modifications.
Changement du texte dans le champ ID
Lorsque vous modifiez du texte dans le champ ID, vous &ecirc;tes invit&eacute; &agrave; mettre &agrave; jour toutes les r&eacute;f&eacute;rences de l’espace de
travail avec le nouvel identifiant. Vous pouvez d&eacute;finir la suppression de cette bo&icirc;te de dialogue &agrave; la page Mode Cr&eacute;ation
des Pr&eacute;f&eacute;rences :
1 Ouvrez la fen&ecirc;tre Pr&eacute;f&eacute;rences.
2 S&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Mode Cr&eacute;ation.
3 S&eacute;lectionnez ou d&eacute;s&eacute;lectionnez Toujours mettre &agrave; jour les r&eacute;f&eacute;rences lors de la modification des ID dans la vue
Propri&eacute;t&eacute;s.
D&eacute;finition des autres propri&eacute;t&eacute;s d’un composant
❖ S&eacute;lectionnez un composant et d&eacute;finissez-en les propri&eacute;t&eacute;s dans la vue du m&ecirc;me nom (Fen&ecirc;tre &gt; Affichage d’une
vue &gt; Flash Builder &gt; Propri&eacute;t&eacute;s).
Derni&egrave;re mise &agrave; jour le 10/11/2011
28
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Vue Propri&eacute;t&eacute;s d’un composant DataGrid
Pour d&eacute;finir les propri&eacute;t&eacute;s dans la Vue par cat&eacute;gories ou dans la Vue alphab&eacute;tique, cliquez sur les boutons
correspondant aux vues dans la barre d’outils.
Derni&egrave;re mise &agrave; jour le 10/11/2011
29
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Vue par cat&eacute;gories pour un composant Button
Remarque : pour appliquer votre derni&egrave;re modification, appuyez sur la touche Entr&eacute;e ou de tabulation, ou cliquez en
dehors de la vue.
Copie de composants dans d’autres fichiers MXML
Vous pouvez copier et coller visuellement des composants d’un fichier MXML vers un autre.
1 V&eacute;rifiez que les deux fichiers MXML sont ouverts en mode Cr&eacute;ation de l’&eacute;diteur MXML.
2 S&eacute;lectionnez des composants dans l’un des fichiers. Cliquez ensuite sur Editer &gt; Copier.
3 Acc&eacute;dez &agrave; l’autre fichier, cliquez &agrave; l’int&eacute;rieur d’un conteneur et s&eacute;lectionnez Editer &gt; Coller.
Suppression de composants
Vous pouvez supprimer des composants de l’interface utilisateur. S&eacute;lectionnez un composant, puis proc&eacute;dez de l’une
des mani&egrave;res suivantes :
• Appuyez sur la touche de suppression de votre clavier.
• Dans le menu contextuel du composant, s&eacute;lectionnez Supprimer.
• Dans le menu Editer de Flash Builder, s&eacute;lectionnez Supprimer.
Derni&egrave;re mise &agrave; jour le 10/11/2011
30
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Inspection de la structure de votre MXML
La vue Structure (Fen&ecirc;tre &gt; Structure) en mode Cr&eacute;ation permet d’examiner la structure de l’application et de
s&eacute;lectionner un ou plusieurs composants. Lorsque vous avez plusieurs &eacute;tats d’affichage, la vue Structure affiche la
structure de l’&eacute;tat d’affichage actif.
1 Le fichier MXML &eacute;tant ouvert en mode Cr&eacute;ation, s&eacute;lectionnez la vue Structure.
2 Dans la vue Structure, s&eacute;lectionnez un ou plusieurs composants.
Ces composants apparaissent &eacute;galement s&eacute;lectionn&eacute;s en mode Cr&eacute;ation de l’&eacute;diteur.
En mode Source, seul le premier composant s&eacute;lectionn&eacute; dans la vue Structure appara&icirc;t comme &eacute;tant s&eacute;lectionn&eacute;
dans l’&eacute;diteur.
Voir aussi
Conseils et astuces pour Flash Builder (article du P&ocirc;le de d&eacute;veloppement)
Derni&egrave;re mise &agrave; jour le 10/11/2011
31
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Utilisation de composants visuels en mode Source MXML
En mode Source de l’&eacute;diteur MXML, l’assistant de contenu vous aide lors de l’ajout de conteneurs et de contr&ocirc;les Flex
standard &agrave; l’interface utilisateur.
L’exemple suivant illustre comment utiliser l’assistant de contenu pour ins&eacute;rer un conteneur &lt;s:VGroup&gt; dans un
conteneur &lt;s:HGroup&gt;. HGroup &eacute;tant un composant Spark, l’assistant privil&eacute;gie l’utilisation d’un conteneur VGroup
&agrave; celle de &lt;mx:VBox&gt;.
1 Ouvrez un fichier MXML en mode Source dans l’&eacute;diteur MXML.
Le fichier MXML peut &ecirc;tre le fichier de l’application principale (fichier dot&eacute; d’un conteneur Application) ou un
fichier de composants MXML personnalis&eacute;s.
2 Placez le point d’insertion dans la balise de conteneur parent.
Pour ins&eacute;rer par exemple un conteneur VGroup dans un conteneur parent HGroup, placez le point d’insertion
apr&egrave;s la balise d’ouverture &lt;s:HGroup&gt;.
&lt;s:HGroup&gt;
insertion point here
&lt;/s:HGroup&gt;
3 Saisissez la balise du composant.
En cours de saisie, l’assistant de contenu s’affiche pour vous sugg&eacute;rer des entr&eacute;es possibles. Les composants
recommand&eacute;s s’affichent en noir. Les composants non recommand&eacute;s s’affichent en gris.
Dans cet exemple, VGroup est recommand&eacute;, contrairement &agrave; VBox qui ne l’est pas.
Derni&egrave;re mise &agrave; jour le 10/11/2011
32
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
4 Appuyez le cas &eacute;ch&eacute;ant sur les touches repr&eacute;sentant des fl&egrave;ches pour s&eacute;lectionner une balise dans le menu, puis
appuyez sur Entr&eacute;e.
Outre les composants standard, l’assistant de contenu r&eacute;pertorie les composants personnalis&eacute;s que vous avez
d&eacute;finis dans des fichiers MXML et ActionScript distincts et que vous avez enregistr&eacute;s dans le projet en cours ou
dans son chemin source.
L’assistant de contenu peut &eacute;galement sugg&eacute;rer des propri&eacute;t&eacute;s, des &eacute;v&eacute;nements, des effets et des styles. Appuyez sur
les touches Ctrl+Espace pour parcourir les recommandations de l’assistant de contenu.
Vous pouvez modifier le type et l’ordre des recommandations de l’assistant de contenu. Dans la bo&icirc;te de dialogue
Pr&eacute;f&eacute;rences, s&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Code MXML &gt; Avanc&eacute;.
Voir aussi
&laquo; Assistant de contenu &raquo; &agrave; la page 48
&laquo; Cr&eacute;ation de composants MXML personnalis&eacute;s &raquo; &agrave; la page 233
Association d’&eacute;diteurs &agrave; des types de fichier
Le workbench permet d’associer les &eacute;diteurs avec diff&eacute;rents types de fichiers.
1 S&eacute;lectionnez Fen&ecirc;tre &gt; Pr&eacute;f&eacute;rences.
2 Cliquez sur le signe plus pour d&eacute;velopper la cat&eacute;gorie G&eacute;n&eacute;ral.
3 Cliquez sur le signe plus pour d&eacute;velopper la cat&eacute;gorie Editeurs, puis s&eacute;lectionnez Associations de fichiers.
4 S&eacute;lectionnez un type de fichier dans la liste Types de fichier.
Pour ajouter un type de fichier &agrave; la liste, cliquez sur Ajouter, entrez le nouveau type de fichier dans la bo&icirc;te de
dialogue Ajouter un type de fichier, puis cliquez sur OK.
5 Dans la liste Editeurs associ&eacute;s, s&eacute;lectionnez l’&eacute;diteur &agrave; associer &agrave; ce type de fichier.
Pour ajouter &agrave; la liste un &eacute;diteur interne ou externe, cliquez sur Ajouter et renseignez la bo&icirc;te de dialogue.
6 Cliquez sur OK.
Vous pouvez modifier les pr&eacute;f&eacute;rences par d&eacute;faut de l’&eacute;diteur &agrave; partir du menu contextuel de toute ressource se
trouvant dans l’une des vues de navigation. Dans le menu contextuel, s&eacute;lectionnez Ouvrir avec.
Derni&egrave;re mise &agrave; jour le 10/11/2011
33
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Edition de fichiers en dehors du workbench
Vous pouvez &eacute;diter un fichier MXML ou ActionScript dans un &eacute;diteur externe puis l’utiliser dans Flash Builder. Le
workbench effectue les op&eacute;rations de cr&eacute;ation ou d’actualisation n&eacute;cessaires afin d’appliquer les modifications que
vous avez apport&eacute;es au fichier en dehors du workbench.
Actualisation d’un fichier MXML ou ActionScript &eacute;dit&eacute; en dehors du workbench
1 Editez le fichier MXML ou ActionScript dans l’&eacute;diteur externe de votre choix.
2 Enregistrez et fermez le fichier.
3 D&eacute;marrez Flash Builder.
4 Dans l’une des vues de navigation du workbench, ouvrez le menu contextuel, puis s&eacute;lectionnez Actualiser.
Si vous utilisez r&eacute;guli&egrave;rement des &eacute;diteurs externes, vous pouvez activer l’actualisation automatique. Pour ce faire,
s&eacute;lectionnez Fen&ecirc;tre &gt; Pr&eacute;f&eacute;rences, d&eacute;veloppez la cat&eacute;gorie G&eacute;n&eacute;ral, s&eacute;lectionnez Espace de travail, puis cochez
l’option Actualiser automatiquement. Lorsque vous activez cette option, le workbench consigne toutes les
modifications externes apport&eacute;es au fichier. La vitesse de l’actualisation automatique d&eacute;pend de votre plateforme.
Mosa&iuml;que d’&eacute;diteurs
Le workbench vous permet d’ouvrir plusieurs fichiers dans diff&eacute;rents &eacute;diteurs. Mais contrairement aux vues, les
&eacute;diteurs ne peuvent pas &ecirc;tre d&eacute;plac&eacute;s &agrave; l’ext&eacute;rieur du workbench pour cr&eacute;er des fen&ecirc;tres. Vous pouvez cependant
disposer les &eacute;diteurs en mosa&iuml;que dans la zone d’&eacute;dition afin d’afficher les fichiers source c&ocirc;te &agrave; c&ocirc;te.
1 Ouvrez deux ou plusieurs fichiers dans la zone d’&eacute;dition.
2 Cliquez sur l’onglet de l’un des &eacute;diteurs.
3 Faites-le glisser vers le bord gauche, droit, sup&eacute;rieur ou inf&eacute;rieur de la zone d’&eacute;dition.
Le pointeur prend la forme d’une fl&egrave;che noire pointant vers l’emplacement o&ugrave; la vue est ancr&eacute;e une fois le bouton
de la souris rel&acirc;ch&eacute;.
4 (Facultatif) Faites glisser les bords des &eacute;diteurs pour les redimensionner, si besoin est.
Agrandissement d’une vue ou d’un &eacute;diteur
Vous pouvez proc&eacute;der de diff&eacute;rentes fa&ccedil;ons pour agrandir (restaurer) une vue ou un &eacute;diteur de mani&egrave;re &agrave; occuper
enti&egrave;rement la fen&ecirc;tre du workbench.
• Acc&eacute;dez au menu contextuel de la barre de titre de la vue ou de l’&eacute;diteur et s&eacute;lectionnez Agrandir (Restaurer).
• Cliquez deux fois sur l’onglet de la vue.
• Dans le menu Fen&ecirc;tre de Flash Builder, s&eacute;lectionnez Agrandir/R&eacute;tablir l’&eacute;diteur.
• Cliquez sur les ic&ocirc;nes Agrandir/Restaurer situ&eacute;es dans l’angle sup&eacute;rieur droit de la vue ou de l’&eacute;diteur.
Projets dans Flash Builder
Flash Builder regroupe les ressources (dossiers et fichiers) qui constituent une application dans un conteneur appel&eacute;
project.
Derni&egrave;re mise &agrave; jour le 10/11/2011
34
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
La vue Explorateur de packages vous permet de g&eacute;rer les projets, en ajoutant, modifiant et supprimant des ressources.
Vous pouvez &eacute;galement fermer les projets &agrave; l’int&eacute;rieur d’un espace de travail, importer des ressources et cr&eacute;er des liens
vers des ressources externes.
Types de projets
Flash Builder prend en charge les diff&eacute;rents types de projets, selon le type d’application que vous cr&eacute;ez.
Projets Flex
Utilisez un projet Flex pour cr&eacute;er une application Web ou d’ordinateur qui est bas&eacute;e sur la structure Flex. Une
application Web s’ex&eacute;cute dans Adobe Flash Player, tandis qu’une application d’ordinateur s’ex&eacute;cute dans Adobe AIR.
Lorsque vous cr&eacute;ez le projet, vous indiquez s’il est destin&eacute; aux applications Web ou d’ordinateur.
Un projet Flex contient un ensemble de propri&eacute;t&eacute;s qui contr&ocirc;lent la fa&ccedil;on dont l’application est g&eacute;n&eacute;r&eacute;e, l’endroit o&ugrave;
l’application construite est h&eacute;berg&eacute;e, la mani&egrave;re dont le d&eacute;bogage est g&eacute;r&eacute; et les relations avec les autres projets de
l’espace de travail.
Un projet Flex contient un fichier d’application MXML par d&eacute;faut. Les autres fichiers MXML du projet peuvent
&eacute;galement servir de fichiers d’application.
Voir &laquo; Projets Flex &raquo; &agrave; la page 88 et &laquo; D&eacute;veloppement d’applications avec Flex &raquo; &agrave; la page 181.
Projets Flex mobiles
Utilisez un projet Flex mobile pour cr&eacute;er une application AIR destin&eacute;e &agrave; la plateforme mobile. L’application repose sur
la structure Flex. Vous pouvez utiliser Flash Builder pour afficher un aper&ccedil;u, d&eacute;boguer et profiler les applications
mobiles &agrave; partir de l’ordinateur ou sur un p&eacute;riph&eacute;rique.
Un projet Flex mobile comporte un seul fichier d’application MXML par d&eacute;faut. En g&eacute;n&eacute;ral, une application mobile
comporte un jeu de composants Vue qui affichent le contenu d’un p&eacute;riph&eacute;rique. Le fichier d’application MXML par
d&eacute;faut lance le composant Vue par d&eacute;faut.
Flash Builder utilise AIR Debug Launcher (ADL) pour obtenir un aper&ccedil;u des applications mobiles sur l’ordinateur.
Bien qu’il ne s’agisse pas d’une vraie &eacute;mulation, ADL vous permet de voir la mise en forme et le comportement de
l’application, en proposant des options pour faire tourner l’application.
Vous pouvez afficher un aper&ccedil;u de l’application mobile sur un p&eacute;riph&eacute;rique connect&eacute; au port USB de l’ordinateur de
d&eacute;veloppement. Lorsque vous affichez un aper&ccedil;u sur un p&eacute;riph&eacute;rique, Flash Builder exporte l’application sur le
p&eacute;riph&eacute;rique.
Voir &laquo; Projets Flex mobiles &raquo; &agrave; la page 90 et D&eacute;veloppement d’applications mobiles avec Flex et Flash Builder.
Projets ActionScript
Utilisez un projet ActionScript pour cr&eacute;er des applications Web ou d’ordinateur qui reposent sur les API de Flash ou
d’Adobe AIR. Lorsque vous cr&eacute;ez le projet, vous indiquez s’il est destin&eacute; &agrave; une application Web ou d’ordinateur.
Ces projets ne faisant pas appel &agrave; MXML pour d&eacute;finir une interface utilisateur, vous ne pouvez pas afficher la mise en
forme et la conception de l’application en mode Cr&eacute;ation. Vous travaillez exclusivement dans l’&eacute;diteur source, et dans
les outils de d&eacute;bogage selon les besoins, puis cr&eacute;ez le projet dans des fichiers SWF pour afficher un aper&ccedil;u de votre
application et la tester.
Lorsque vous cr&eacute;ez un projet ActionScript ou un fichier ActionScript autonome destin&eacute; &agrave; contenir des fonctions, une
classe ou une interface, la perspective de d&eacute;veloppement Flex change pour prendre en charge l’&eacute;diteur ActionScript.
Les principales vues associ&eacute;es &agrave; l’&eacute;diteur ActionScript sont les vues Structure et Erreurs.
Derni&egrave;re mise &agrave; jour le 10/11/2011
35
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Voir &laquo; Projets ActionScript &raquo; &agrave; la page 91.
Projets ActionScript mobiles
Utilisez un projet ActionScript mobile pour cr&eacute;er des applications mobiles qui reposent sur l’API d’Adobe AIR.
Lorsque vous cr&eacute;ez le projet, vous sp&eacute;cifiez une plateforme mobile cible et certains param&egrave;tres d’applications mobiles.
Vous pouvez utiliser Flash Builder pour afficher un aper&ccedil;u de l’application mobile &agrave; partir de l’ordinateur ou sur un
p&eacute;riph&eacute;rique.
Flash Builder utilise AIR Debug Launcher (ADL) pour afficher un aper&ccedil;u, d&eacute;boguer et profiler des applications
mobiles sur l’ordinateur. Bien qu’il ne s’agisse pas d’une vraie &eacute;mulation, ADL vous permet de voir la mise en forme
et le comportement de l’application, en proposant des options pour faire tourner l’application.
Vous pouvez afficher un aper&ccedil;u de l’application mobile sur un p&eacute;riph&eacute;rique connect&eacute; au port USB de l’ordinateur de
d&eacute;veloppement. Lorsque vous affichez un aper&ccedil;u sur un p&eacute;riph&eacute;rique, Flash Builder exporte l’application sur le
p&eacute;riph&eacute;rique. Vous pouvez faire appel &agrave; Flash Builder pour d&eacute;boguer l’application export&eacute;e sur un p&eacute;riph&eacute;rique.
Voir &laquo; Cr&eacute;ation de projets ActionScript mobiles &raquo; &agrave; la page 91.
Projets de biblioth&egrave;que Flex
Utilisez un projet de biblioth&egrave;que Flex pour cr&eacute;er des biblioth&egrave;ques de code personnalis&eacute;es &agrave; partager entre les
applications ou &agrave; distribuer &agrave; d’autres d&eacute;veloppeurs. En r&egrave;gle g&eacute;n&eacute;rale, vous utilisez les projets de biblioth&egrave;que pour
assembler et distribuer les composants et ressources &agrave; d’autres d&eacute;veloppeurs.
Un projet de biblioth&egrave;que g&eacute;n&egrave;re un fichier SWC, c’est-&agrave;-dire un fichier archive pour les composants Flex ainsi que
pour d’autres ressources.
Voir &laquo; Utilisation de projets de biblioth&egrave;que Flex &raquo; &agrave; la page 228.
Projets compatibles avec Flash Catalyst
Utilisez un projet compatible avec Flash Catalyst si vous pr&eacute;voyez de partager des fichiers de projet avec des projets
Adobe Flash Catalyst. Cette fonctionnalit&eacute; permet aux cr&eacute;ateurs et d&eacute;veloppeurs de collaborer et de travailler ensemble
sur le m&ecirc;me projet.
Voir &laquo; Projets compatibles avec Flash Catalyst &raquo; &agrave; la page 92.
Projets Flash Professional
Utilisez un projet Flash Professional pour modifier, cr&eacute;er ou d&eacute;boguer des fichiers FLA ou XFL cr&eacute;&eacute;s dans Adobe Flash
Professional. Cette fonctionnalit&eacute; permet aux d&eacute;veloppeurs Flash Professional de profiter de l’environnement de
modification et de d&eacute;bogage que fournit Flash Builder. Les projets Flash Professional sont disponibles dans Flash
Builder uniquement si vous avez install&eacute; Flash Professional.
Voir &laquo; Utilisation de Flash Builder avec Flash Professional &raquo; &agrave; la page 245.
Gestion de projets
L’Explorateur de packages permet d’ajouter des ressources &agrave; un projet, d’importer des ressources, d’exporter des
projets ainsi que de d&eacute;placer et de supprimer des ressources.
Derni&egrave;re mise &agrave; jour le 10/11/2011
36
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Projets dans l’Explorateur de packages
Tous les projets d’un espace de travail s’affichent dans l’Explorateur de packages, comme l’illustre l’exemple suivant.
L’Explorateur de packages pr&eacute;sente une arborescence des projets dans une vue &agrave; la fois physique et logique (plate).
Cette vue vous permet de g&eacute;rer les projets en ajoutant et en supprimant des ressources (dossier et fichiers), en
important des ressources externes et en cr&eacute;ant des liens vers ces ressources ainsi qu’en d&eacute;pla&ccedil;ant les ressources vers
d’autres projets dans l’espace de travail.
Principales caract&eacute;ristiques de l’Explorateur de packages :
• L’affichage des packages ActionScript peut se pr&eacute;senter de mani&egrave;re hi&eacute;rarchique ou plate.
Utilisez le menu de l’Explorateur de packages pour sp&eacute;cifier la pr&eacute;sentation des packages.
• Les biblioth&egrave;ques de projet sont repr&eacute;sent&eacute;es dans deux nœuds de niveau sup&eacute;rieur : un nœud pour le SDK Flex et
l’autre pour les biblioth&egrave;ques r&eacute;f&eacute;renc&eacute;es.
Vous pouvez d&eacute;velopper le contenu d’une biblioth&egrave;que et ouvrir les &eacute;diteurs pour afficher les pi&egrave;ces jointes.
• Les symboles d’erreur et d’avertissement apparaissant au niveau des nœuds de l’Explorateur de packages signalent
d’&eacute;ventuels probl&egrave;mes dans un package.
• Vous pouvez restreindre les projets et ressources visibles.
Vous pouvez cr&eacute;er un jeu de documents (collection de ressources), d&eacute;finir des filtres d’affichage et trier les
ressources par nom et type. Ces options sont disponibles dans les menus de l’Explorateur de packages. Pour plus
d’informations sur la modification des vues, voir &laquo; Personnalisation du workbench &raquo; &agrave; la page 259.
• Vous pouvez d&eacute;velopper les fichiers ActionScript, MXML et CSS ainsi qu’afficher leur contenu sous forme
d’arborescence.
Dans l’Explorateur de packages, vous pouvez ouvrir les ressources du projet pour les modifier. Vous pouvez par
exemple modifier les codes MXML et ActionScript dans les blocs &lt;fx:Script&gt; et le code CSS dans les blocs
&lt;fx:Style&gt;. Vous pouvez &eacute;galement passer en mode Cr&eacute;ation et agencer visuellement les composants et les contr&ocirc;les
pour d&eacute;finir la pr&eacute;sentation de l’application et son comportement. Pour plus d’informations sur l’utilisation des
&eacute;diteurs Flash Builder, voir &laquo; Editeurs Flash Builder &raquo; &agrave; la page 20 et &laquo; Cr&eacute;ation d’interfaces utilisateur &raquo; &agrave; la page 182.
Derni&egrave;re mise &agrave; jour le 10/11/2011
37
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Ensuite, vous ajoutez des projets, des fichiers et des dossiers, puis vous les organisez et g&eacute;rez selon vos besoins. Voir
&laquo; Projets dans Flash Builder &raquo; &agrave; la page 33.
La plupart des commandes de menu que vous utilisez dans la vue Explorateur de packages sont &eacute;galement disponibles
dans le menu contextuel de la vue.
Voir aussi
&laquo; Gestion de projets &raquo; &agrave; la page 35
&laquo; Ressources des projets &raquo; &agrave; la page 40
D&eacute;placement d’un projet d’un espace de travail vers un autre
Vous pouvez faire appel &agrave; une association d’op&eacute;rations de suppression et d’importation pour d&eacute;placer un projet d’un
espace de travail vers un autre. Lorsque vous supprimez un projet d’un espace de travail, vous pouvez l’effacer de
l’espace de travail mais le laisser dans le syst&egrave;me de fichiers (voir &laquo; Suppression de projets &raquo; &agrave; la page 37). Apr&egrave;s avoir
supprim&eacute; un projet d’un espace de travail, vous pouvez l’importer dans un autre.
Sp&eacute;cification du SDK d’un projet
Lorsque vous cr&eacute;ez un projet Flex, vous pouvez sp&eacute;cifier quel SDK Flex vous souhaitez utiliser. Les param&egrave;tres du SDK
pourront &ecirc;tre modifi&eacute;s ult&eacute;rieurement en cliquant sur Projet &gt; Propri&eacute;t&eacute;s &gt; Compilateur Flex &gt; Utiliser un SDK
sp&eacute;cifique.
Vous pouvez compiler un projet en utilisant un SDK Flex qui n’est pas disponible dans votre installation Flash Builder
en le t&eacute;l&eacute;chargeant et en l’y ajoutant. Par exemple, t&eacute;l&eacute;chargez le SDK et ajoutez-le &agrave; Flash Builder &agrave; l’aide de la
commande Projet &gt; Propri&eacute;t&eacute;s &gt; Compilateur Flex &gt; Configurer les SDK Flex.
Suppression de projets
Lorsque vous supprimez un projet, vous le retirez de l’espace de travail en cours. Vous pouvez &eacute;galement le supprimer
simultan&eacute;ment du syst&egrave;me de fichiers.
Au lieu de supprimer le projet de l’espace de travail, vous pouvez le fermer. La fermeture du projet vous permet de
conserver une r&eacute;f&eacute;rence &agrave; ce projet dans l’espace de travail tout en lib&eacute;rant des ressources syst&egrave;me. Pour plus
d’informations, voir &laquo; Fermeture et ouverture de projets &raquo; &agrave; la page 37.
1 Dans l’Explorateur de packages, s&eacute;lectionnez le projet &agrave; supprimer.
2 Dans le menu principal, s&eacute;lectionnez Editer &gt; Supprimer.
3 S&eacute;lectionnez une option.
Supprimer &eacute;galement le contenu sous le r&eacute;pertoire : supprime d&eacute;finitivement le projet de l’espace de travail et du
syst&egrave;me de fichiers.
Ne pas supprimer le contenu : supprime le projet de l’espace de travail sans le supprimer du syst&egrave;me de fichiers.
Fermeture et ouverture de projets
Pour &eacute;conomiser de la m&eacute;moire et acc&eacute;l&eacute;rer la g&eacute;n&eacute;ration sans supprimer un projet, vous pouvez le fermer. Lorsque
vous fermez un projet, vous r&eacute;duisez le projet et ses ressources, mais son nom reste visible dans l’Explorateur de
packages. Un projet ferm&eacute; n&eacute;cessite moins de m&eacute;moire qu’un projet ouvert et est exclu des g&eacute;n&eacute;rations. Vous pouvez
facilement rouvrir un projet ferm&eacute;.
1 Dans l’Explorateur de packages, s&eacute;lectionnez le projet &agrave; fermer ou rouvrir.
2 Dans le menu contextuel de l’Explorateur de packages, s&eacute;lectionnez Fermer le projet ou Ouvrir le projet.
Derni&egrave;re mise &agrave; jour le 10/11/2011
38
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Changement du fichier de l’application principale
Lorsque vous cr&eacute;ez un projet Flex, un fichier de l’application principale est cr&eacute;&eacute;. Par d&eacute;faut, il est nomm&eacute; d’apr&egrave;s le
projet. Le fichier de l’application principale est le point d’acc&egrave;s &agrave; vos applications et est la base du fichier SWF de
l’application. Cependant, &agrave; mesure que vous ajoutez des fichiers &agrave; l’application, vous pouvez d&eacute;signer un fichier
diff&eacute;rent comme fichier de l’application principale.
Si vous pr&eacute;f&eacute;rez d&eacute;finir plusieurs fichiers d’application de mani&egrave;re &agrave; ce que chaque fichier d’application soit g&eacute;n&eacute;r&eacute;
dans un fichier SWF distinct, voir &laquo; Gestion des fichiers d’application du projet &raquo; &agrave; la page 38.
1 Dans l’Explorateur de packages, s&eacute;lectionnez le fichier d’application MXML que vous voulez d&eacute;finir comme fichier
de l’application principale.
2 Dans le menu contextuel de l’Explorateur de packages, s&eacute;lectionnez D&eacute;finir comme application par d&eacute;faut.
Vous pouvez g&eacute;rer les fichiers d’application du projet en s&eacute;lectionnant Projet &gt; Propri&eacute;t&eacute;s &gt; Applications Flex (ou
Applications ActionScript si vous utilisez un projet ActionScript).
Gestion des fichiers d’application du projet
Un projet poss&egrave;de g&eacute;n&eacute;ralement un seul fichier de l’application principale, qui sert de point d’acc&egrave;s &agrave; l’application. Le
compilateur Flash Builder utilise ce fichier pour g&eacute;n&eacute;rer le fichier d’application SWF.
Une application complexe peut par exemple &ecirc;tre dot&eacute;e de nombreux composants MXML personnalis&eacute;s qui
repr&eacute;sentent des &eacute;l&eacute;ments d’application distincts mais interd&eacute;pendants. Vous pouvez cr&eacute;er un fichier d’application
contenant un composant personnalis&eacute; et ensuite le g&eacute;n&eacute;rer, l’ex&eacute;cuter et le tester s&eacute;par&eacute;ment.
Par d&eacute;faut, vous pouvez ex&eacute;cuter l’application &agrave; chaque ajout d’un fichier d’application MXML au projet Flex. Ce
fichier est alors ajout&eacute; &agrave; la liste des fichiers d’application du projet. Tous les fichiers d&eacute;finis comme fichiers
d’application doivent se trouver dans le dossier source du projet.
Vous pouvez g&eacute;rer la liste des fichiers d’application en s&eacute;lectionnant un projet et en affichant ses propri&eacute;t&eacute;s.
1 Dans l’Explorateur de packages, s&eacute;lectionnez un projet.
2 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s dans le menu principal ou s&eacute;lectionnez Propri&eacute;t&eacute;s dans le menu contextuel.
3 Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s du projet, s&eacute;lectionnez Applications Flex (ou Applications ActionScript si vous
utilisez un projet ActionScript).
4 Ajoutez et supprimez les fichiers d’applications selon vos besoins. Cliquez sur OK.
Changement de l’espace de travail
Vous ne pouvez travailler que dans un seul espace de travail &agrave; la fois. Lorsque vous installez et ex&eacute;cutez Flash Builder
pour la premi&egrave;re fois, un message vous invite &agrave; cr&eacute;er un espace de travail qui devient l’espace de travail par d&eacute;faut. Vous
pouvez cr&eacute;er d’autres espaces de travail et passer de l’un &agrave; l’autre en s&eacute;lectionnant l’espace de travail voulu au
lancement de Flash Builder ou en choisissant Fichier &gt; Commuter l’espace de travail.
D&eacute;finition des propri&eacute;t&eacute;s des projets Flex
Chaque projet Flex poss&egrave;de son propre jeu de propri&eacute;t&eacute;s. Pour d&eacute;finir ces propri&eacute;t&eacute;s, s&eacute;lectionnez le projet dans la vue
Explorateur de packages. Dans le menu principal, s&eacute;lectionnez ensuite Projet &gt; Propri&eacute;t&eacute;s. Vous pouvez &eacute;galement
acc&eacute;der aux propri&eacute;t&eacute;s &agrave; partir du menu contextuel du projet.
Vous pouvez d&eacute;finir les pr&eacute;f&eacute;rences de projet suivantes.
Ressource : pr&eacute;sente des informations g&eacute;n&eacute;rales concernant le projet, les param&egrave;tres pour le codage de texte et les
d&eacute;limiteurs de lignes du syst&egrave;me d’exploitation.
Derni&egrave;re mise &agrave; jour le 10/11/2011
39
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
G&eacute;n&eacute;rateurs : pr&eacute;cise l’outil de g&eacute;n&eacute;ration &agrave; utiliser. Flash Builder contient un outil de g&eacute;n&eacute;ration standard. Vous
pouvez faire appel &agrave; Apache Ant (outil de g&eacute;n&eacute;ration &laquo; open source &raquo;) pour cr&eacute;er des scripts de g&eacute;n&eacute;ration ou importer
des scripts de g&eacute;n&eacute;ration Ant existants
Voir &laquo; Personnalisation des g&eacute;n&eacute;rations avec Apache Ant &raquo; &agrave; la page 111.
Mod&egrave;le de donn&eacute;es : disponible seulement sur ADEP Data Services (anciennement connu sous le nom de LiveCycle
Data Services) et versions sup&eacute;rieures. Il sp&eacute;cifie l’emplacement du fichier du mod&egrave;le de donn&eacute;es contenant les
informations sur le type de service et de donn&eacute;es pour ADEP Data Services ES.
Donn&eacute;es/Services : pour les projets acc&eacute;dant &agrave; des services de donn&eacute;es, cette page d&eacute;finit si le g&eacute;n&eacute;rateur de code par
d&eacute;faut doit &ecirc;tre utilis&eacute; pour acc&eacute;der aux services. Vous pouvez &eacute;galement indiquer si vous souhaitez utiliser une seule
instance de serveur pour acc&eacute;der aux services.
Pour plus d’informations sur l’extension de Flash Builder de mani&egrave;re &agrave; prendre en charge la g&eacute;n&eacute;ration de code
personnalis&eacute;, voir Extension de la prise en charge des services dans Flash Builder.
Pour plus d’informations sur l’utilisation d’une seule instance de serveur lors de l’acc&egrave;s aux services, voir Utilisation
d’une instance de serveur unique.
Applications Flex : affiche le nom des fichiers de projet d&eacute;finis comme fichiers d’application pouvant &ecirc;tre compil&eacute;s,
d&eacute;bogu&eacute;s et ex&eacute;cut&eacute;s en tant qu’applications distinctes
Voir &laquo; Gestion des fichiers d’application du projet &raquo; &agrave; la page 38.
Chemin d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration Flex : sp&eacute;cifie le chemin d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration, qui pr&eacute;cise l’emplacement des fichiers
source externes et des fichiers de biblioth&egrave;que. Vous pouvez modifier ce chemin et changer le nom du dossier de sortie
(voir &laquo; D&eacute;finition d’un dossier de sortie de projet &raquo; &agrave; la page 107 et &laquo; Cr&eacute;ation manuelle de projets &raquo; &agrave; la page 109).
Compilateur Flex : sp&eacute;cifie d’une part les pr&eacute;f&eacute;rences optionnelles pour le compilateur (g&eacute;n&eacute;ration d’un fichier SWF
accessible, activation des avertissements de compilation et de la v&eacute;rification des types, sp&eacute;cification d’arguments de
compilation suppl&eacute;mentaires et d&eacute;finition de la version du SDK Flex) et d&eacute;finit d’autre part les param&egrave;tres de
l’enveloppe HTML
(voir &laquo; Options de g&eacute;n&eacute;ration avanc&eacute;es &raquo; &agrave; la page 109).
Modules Flex : pr&eacute;cise les modules &agrave; g&eacute;n&eacute;rer et &agrave; optimiser pour le projet. Pour plus d’informations sur l’utilisation
des modules dans Flash Builder, voir &laquo; Cr&eacute;ation d’un projet distinct pour les modules dans Flash Builder &raquo; &agrave; la
page 237.
Serveur Flex : sp&eacute;cifie le type de serveurs d’applications pour le projet. A la cr&eacute;ation d’un projet, vous avez la possibilit&eacute;
de sp&eacute;cifier un type de serveurs d’applications. Vous pouvez modifier ce type ici. Si vous modifiez le type de serveurs
d’applications d’un projet, vous risquez de ne plus pouvoir acc&eacute;der aux services de donn&eacute;es pr&eacute;c&eacute;demment configur&eacute;s.
Voir &laquo; Projets Flex &raquo; &agrave; la page 88 et Cr&eacute;ation d’un projet Flex pour l’acc&egrave;s &agrave; des services de donn&eacute;es.
Th&egrave;me Flex : sp&eacute;cifie le th&egrave;me &agrave; utiliser pour toutes les applications du projet. Vous pouvez sp&eacute;cifier l’un des th&egrave;mes
disponibles dans Flash Builder ou en importer un.
Voir &laquo; Application des th&egrave;mes &raquo; &agrave; la page 187.
R&eacute;f&eacute;rences de projet : r&eacute;pertorie les projets auxquels le projet en cours fait r&eacute;f&eacute;rence.
Ex&eacute;cuter/d&eacute;boguer les param&egrave;tres : g&egrave;re les param&egrave;tres de configuration de lancement.
Voir &laquo; Gestion des configurations de lancement &raquo; &agrave; la page 120.
Derni&egrave;re mise &agrave; jour le 10/11/2011
40
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Cr&eacute;ation de jeux de documents
Si votre espace de travail contient de nombreux projets, vous pouvez cr&eacute;er un jeu de documents afin de regrouper un
certain nombre de projets. Vous pouvez alors afficher des jeux de documents diff&eacute;rents dans les vues Explorateur de
packages et T&acirc;ches de m&ecirc;me que limiter la port&eacute;e de vos recherches &agrave; des jeux de documents (et ainsi &eacute;viter les
recherches portant sur l’ensemble de l’espace de travail).
Cr&eacute;ation d’un jeu de documents
1 Dans la vue Explorateur de packages, ouvrez le menu de la barre d’outils et choisissez S&eacute;lectionner un jeu de
documents.
2 S&eacute;lectionnez Nouveau.
Flash Builder propose deux types de jeu : les points d’arr&ecirc;t (utilis&eacute;s lors du d&eacute;bogage) et les ressources.
3 S&eacute;lectionnez le type Ressource, puis cliquez sur Suivant.
4 Entrez le nom du jeu de documents, puis choisissez les projets de l’espace de travail que vous souhaitez inclure dans
le jeu.
5 Cliquez sur Terminer.
Le jeu de documents est aussit&ocirc;t appliqu&eacute; &agrave; la vue Explorateur de packages et seuls les projets et les ressources qui
figurent dans le jeu s’affichent.
Affichage de tous les projets dans l’espace de travail
❖ Dans la vue Explorateur de packages, ouvrez le menu de la barre d’outils et choisissez D&eacute;s&eacute;lectionner le jeu de
documents.
Ressources des projets
Les projets sont constitu&eacute;s de ressources (dossiers et fichiers) que vous pouvez g&eacute;rer depuis l’Explorateur de packages.
Les projets sont contenus dans un espace de travail. L’Explorateur de packages propose une repr&eacute;sentation logique de
l’espace de travail dans le syst&egrave;me de fichiers. Il est actualis&eacute; &agrave; chaque fois que vous ajoutez, supprimez ou modifiez
une ressource.
Vous pouvez &eacute;galement modifier les ressources du projet directement dans le syst&egrave;me de fichiers, sans passer par Flash
Builder ni par l’Explorateur de packages.
Derni&egrave;re mise &agrave; jour le 10/11/2011
41
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Cr&eacute;ation de fichiers dans un projet
Une application dans Adobe&reg; Flex&reg; est g&eacute;n&eacute;ralement compos&eacute;e d’un fichier d’application MXML, d’une ou plusieurs
vues (projets mobiles uniquement) et d’un ou plusieurs composants Flex standard. Vous pouvez &eacute;galement avoir un
ou plusieurs composants d&eacute;finis dans divers fichiers MXML, ActionScript ou de composant Flash (SWC). En scindant
l’application en blocs de dimensions maniables, vous pouvez r&eacute;diger et tester chaque composant individuellement.
Dans un souci d’efficacit&eacute;, les composants peuvent &ecirc;tre r&eacute;utilis&eacute;s, dans la m&ecirc;me application ou dans une application
diff&eacute;rente.
Vous pouvez utiliser Adobe Flash&reg; Builder™ pour cr&eacute;er des composants MXML et ActionScript personnalis&eacute;s, puis les
int&eacute;grer &agrave; vos applications. Pour plus d’informations sur la cr&eacute;ation de composants ActionScript, voir &laquo; Cr&eacute;ation d’une
classe ActionScript &raquo; &agrave; la page 42.
Vous pouvez &eacute;galement cr&eacute;er un composant MXML directement &agrave; partir de code. Pour plus d’informations, voir
Simple MXML Components.
Cr&eacute;ation d’un fichier
1 Dans l’Explorateur de packages, s&eacute;lectionnez Fichier &gt; Nouveau &gt; Fichier.
2 Si l’espace de travail contient plusieurs projets, s&eacute;lectionnez le projet auquel vous voulez ajouter le fichier.
3 Entrez le nom du fichier, puis cliquez sur Terminer.
Vous pouvez &eacute;galement ajouter des dossiers et des fichiers se trouvant en dehors du projet en cours. Pour plus
d’informations, voir &laquo; Liaison &agrave; des ressources situ&eacute;es en dehors de l’espace de travail du projet &raquo; &agrave; la page 44.
Cr&eacute;ation de fichiers d’application MXML
1 Dans l’Explorateur de packages, s&eacute;lectionnez le projet auquel vous souhaitez ajouter le fichier d’application MXML.
2 Dans le menu contextuel de l’Explorateur de packages, s&eacute;lectionnez Nouveau &gt; Application MXML.
3 Le fichier d’application est cr&eacute;&eacute; dans le dossier src par d&eacute;faut. Vous pouvez s&eacute;lectionner un autre dossier du projet,
le cas &eacute;ch&eacute;ant.
4 Indiquez le nom du fichier d’application et s&eacute;lectionnez une pr&eacute;sentation Spark, si n&eacute;cessaire. Pour plus
d’informations &agrave; propos des pr&eacute;sentations Spark, voir A propos des pr&eacute;sentations Spark
5 Les options suivantes s’appliquent uniquement aux projets mobiles :
a Sp&eacute;cifiez un ID d’application.
b Sp&eacute;cifiez le mod&egrave;le d’application.
Voir Choix d’un mod&egrave;le d’application.
c Sp&eacute;cifiez les droits des applications mobiles pour la plateforme Google Android.
Voir Choix des autorisations d’une application mobile.
d Sp&eacute;cifiez les param&egrave;tres de plateforme.
Voir Choix des param&egrave;tres de plateforme.
e Sp&eacute;cifiez les param&egrave;tres d’application.
Voir Choix des param&egrave;tres d’application.
6 Cliquez sur Terminer.
Derni&egrave;re mise &agrave; jour le 10/11/2011
42
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Cr&eacute;ation d’une classe ActionScript
Vous pouvez faire appel &agrave; un assistant Flash Builder pour cr&eacute;er rapidement des classes ActionScript pour les projets
Flex et ActionScript. Cet assistant vous permet &eacute;galement de g&eacute;n&eacute;rer facilement des stubs pour des fonctions devant
&ecirc;tre impl&eacute;ment&eacute;es.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Classe ActionScript.
2 Dans la bo&icirc;te de dialogue, sp&eacute;cifiez les propri&eacute;t&eacute;s de base de la nouvelle classe, puis cliquez sur Terminer.
Une fois que vous avez cliqu&eacute; sur Terminer, Flash Builder enregistre le fichier dans le package sp&eacute;cifi&eacute; et le rouvre
dans l’&eacute;diteur de code.
Si vous avez enregistr&eacute; le fichier dans le projet actif ou dans le chemin source correspondant, Flash Builder affiche
&eacute;galement le composant dans la vue Composants pour permettre son insertion rapide dans les applications. Pour
plus d’informations, voir &laquo; Ajout de composants en mode Cr&eacute;ation MXML &raquo; &agrave; la page 23.
3 R&eacute;digez la d&eacute;finition de la classe ActionScript.
Pour plus d’informations, voir Cr&eacute;ation de composants visuels simples dans ActionScript.
Cr&eacute;ation d’une interface ActionScript
Vous pouvez faire appel &agrave; un assistant Flash Builder pour cr&eacute;er rapidement des interfaces ActionScript pour les projets
Flex et ActionScript. Une interface est un ensemble de constantes et de m&eacute;thodes que diff&eacute;rentes classes peuvent
partager.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Interface ActionScript.
2 Sp&eacute;cifiez les propri&eacute;t&eacute;s de base de la nouvelle interface dans la bo&icirc;te de dialogue, puis cliquez sur Terminer.
3 Ajoutez &agrave; l’interface ActionScript les &eacute;ventuelles constantes ou m&eacute;thodes que les diff&eacute;rentes classes partagent.
Cr&eacute;ation d’un composant ActionScript habillable
Vous pouvez faire appel &agrave; un assistant Flash Builder afin de cr&eacute;er rapidement des composants ActionScript pour les
projets Flex.
1 Cliquez sur Fichier &gt; Nouveau &gt; Composant habillable ActionScript.
2 Sp&eacute;cifiez les propri&eacute;t&eacute;s de base du nouveau composant habillable, puis cliquez sur Terminer.
Flash Builder cr&eacute;e une classe ActionScript &eacute;tendue depuis le composant de base ou le composant habillable. Par
d&eacute;faut, le composant de base est spark.components.supportClasses.SkinnableComponent. Vous pouvez
toutefois le modifier sur tout autre composant correspondant &agrave; une sous-classe du composant habillable.
Vous pouvez &eacute;galement ajouter toutes les interfaces ActionScript que le nouveau composant habillable peut
impl&eacute;menter. Pour plus d’informations sur la cr&eacute;ation d’interfaces ActionScript, voir &laquo; Cr&eacute;ation d’une interface
ActionScript &raquo; &agrave; la page 42.
Le composant SkinnableComponent est cr&eacute;&eacute; dans l’emplacement et le package s&eacute;lectionn&eacute;. Par d&eacute;faut, le logiciel
ajoute automatiquement une r&eacute;f&eacute;rence au composant dans le fichier MXML principal.
Cr&eacute;ation de fichiers dans un projet
Vous pouvez ajouter des dossiers &agrave; un projet selon vos besoins. Par exemple, vous pouvez cr&eacute;er un dossier pour stocker
tous vos mod&egrave;les de donn&eacute;es. Vous pouvez &eacute;galement organiser tous les &eacute;l&eacute;ments qui constituent l’aspect visuel de
votre application.
1 Dans l’Explorateur de packages, s&eacute;lectionnez Fichier &gt; Nouveau &gt; Dossier.
Derni&egrave;re mise &agrave; jour le 10/11/2011
43
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
2 Si l’espace de travail contient plusieurs projets, s&eacute;lectionnez le projet &agrave; ajouter au dossier autonome.
Si vous cr&eacute;ez le dossier dans le dossier du chemin d’acc&egrave;s source, il est consid&eacute;r&eacute; comme un nom de package. Vous
pouvez ensuite placer les fichiers source reconnus par le compilateur &agrave; l’int&eacute;rieur.
Si vous le cr&eacute;ez en dehors du dossier du chemin d’acc&egrave;s source, vous pourrez l’ajouter ult&eacute;rieurement &agrave; ce chemin
afin de le transformer en racine d’une structure de packages. Une fois que vous avez termin&eacute; cette proc&eacute;dure,
s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s, puis Chemin d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration Flex. Cliquez sur Ajouter un dossier et
acc&eacute;dez au dossier que vous venez de cr&eacute;er.
3 Entrez le nom du dossier, puis cliquez sur Terminer.
Suppression de dossiers et de fichiers
La suppression de dossiers et de fichiers du projet les &eacute;limine de l’espace de travail et, par cons&eacute;quent, du syst&egrave;me de
fichiers.
Remarque : la suppression d’une ressource li&eacute;e ne supprime du projet que le lien, pas la ressource (voir &laquo; Liaison &agrave; des
ressources situ&eacute;es en dehors de l’espace de travail du projet &raquo; &agrave; la page 44). Cependant, si vous avez cr&eacute;&eacute; un lien &agrave; un
dossier et que vous supprimez un ou plusieurs de ses fichiers, ceux-ci sont supprim&eacute;s du syst&egrave;me de fichiers.
1 Dans l’Explorateur de packages, s&eacute;lectionnez la ressource &agrave; supprimer.
2 S&eacute;lectionnez Edition &gt; Supprimer ou appuyez sur la touche Supprimer, puis cliquez sur Oui.
La ressource est supprim&eacute;e du syst&egrave;me de fichiers.
Recherche de ressources dans le workbench
Flash Builder int&egrave;gre un outil de recherche qui vous permet de localiser rapidement des ressources.
Pour rechercher le document qui est actuellement ouvert dans l’&eacute;diteur, proc&eacute;dez comme suit :
1 Ouvrez le document sur lequel la recherche doit porter.
2 Utilisez l’une des m&eacute;thodes suivantes :
• Appuyez sur Ctrl+F (Windows) ou Commande+F (Mac OS).
• S&eacute;lectionnez Editer &gt; Rechercher/Remplacer.
3 Saisissez la cha&icirc;ne de texte &agrave; localiser.
4 (Facultatif) Entrez la cha&icirc;ne de texte de remplacement.
5 (Facultatif) D&eacute;finissez les crit&egrave;res de recherche avanc&eacute;s.
6 Cliquez sur Rechercher, Remplacer, Remplacer tout ou Remplacer/Rechercher.
Une fois localis&eacute;e, la cha&icirc;ne de texte est mise en surbrillance et &eacute;ventuellement remplac&eacute;e.
Remarque : pour proc&eacute;der &agrave; une recherche incr&eacute;mentielle, appuyez sur Ctrl+J (Windows) ou Commande+J (Mac OS).
Pour rechercher toutes les ressources dans l’espace de travail, Flash Builder comporte des fonctions de recherche
avanc&eacute;es plus puissantes que les fonctions de recherche/remplacement. Flash Builder permet de rechercher et de
rep&eacute;rer les r&eacute;f&eacute;rences ou les d&eacute;clarations vers les identifiants dans les fichiers ActionScript ou MXML, les projets ou
les espaces de travail. Pour plus d’informations, voir &laquo; Recherche de r&eacute;f&eacute;rences et restructuration du code &raquo; &agrave; la
page 75.
Recherche de fichiers
❖ S&eacute;lectionnez Rechercher &gt; Rechercher pour effectuer des recherches de fichiers complexes.
Derni&egrave;re mise &agrave; jour le 10/11/2011
44
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Remarque : cliquez sur Personnaliser pour d&eacute;finir les types d’onglet de recherche disponibles dans la bo&icirc;te de dialogue
Rechercher.
Utilisation de la vue Recherche
La vue Recherche affiche les r&eacute;sultats de votre recherche.
Ouverture d’un fichier de la liste
❖ Cliquez deux fois sur le fichier.
Suppression d’un fichier de la liste
❖ S&eacute;lectionnez le fichier &agrave; supprimer, puis cliquez sur Supprimer les occurrences s&eacute;lectionn&eacute;es.
Suppression de tous les fichiers de la liste
❖ Cliquez sur Supprimer toutes les occurrences.
Navigation entre les fichiers correspondants
❖ Cliquez sur Afficher l’occurrence suivante ou Afficher l’occurrence pr&eacute;c&eacute;dente.
Affichage des recherches pr&eacute;c&eacute;dentes
❖ Cliquez sur la fl&egrave;che en regard de l’option Afficher les recherches pr&eacute;c&eacute;dentes et s&eacute;lectionnez une recherche dans
la liste d&eacute;roulante.
Retour &agrave; la vue Recherche apr&egrave;s sa fermeture
1 S&eacute;lectionnez Fen&ecirc;tre &gt; Affichage d’une vue &gt; Autres.
2 D&eacute;veloppez la cat&eacute;gorie G&eacute;n&eacute;ralit&eacute;s, s&eacute;lectionnez Recherche, puis cliquez sur OK.
Liaison &agrave; des ressources situ&eacute;es en dehors de l’espace de travail du projet
Vous pouvez cr&eacute;er des liens avec des ressources situ&eacute;es en dehors du projet et de l’emplacement de l’espace de travail
ainsi qu’avec des dossiers et des fichiers situ&eacute;s n’importe o&ugrave; dans le syst&egrave;me de fichiers. Cette option est utile en cas de
partage des ressources entre diff&eacute;rents projets. Vous pouvez par exemple partager une biblioth&egrave;que de composants
Flex ou ActionScript personnalis&eacute;s entre plusieurs projets Flex.
Les dossiers contenant des ressources li&eacute;es sont signal&eacute;s dans l’Explorateur de packages (comme l’illustre l’exemple
suivant). Vous pouvez ainsi distinguer les ressources normales des ressources li&eacute;es.
Parmi d’autres exemples de liaison de ressources, citons les dossiers de fichiers d’images ou encore le cas des dossiers
de sortie ne se trouvant pas dans le dossier racine du projet.
Lorsque les ressources sont partag&eacute;es, les modifications que vous apportez aux dossiers et fichiers source affectent tous
les projets qui leur sont li&eacute;s. Soyez prudent lorsque vous supprimez de vos projets des ressources li&eacute;es. Dans certains
cas, vous supprimez simplement la r&eacute;f&eacute;rence au lien ; dans d’autres, vous supprimez la source m&ecirc;me. Pour plus
d’informations, voir &laquo; Suppression de dossiers et de fichiers &raquo; &agrave; la page 43.
Derni&egrave;re mise &agrave; jour le 10/11/2011
45
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Remarque : il est recommand&eacute; de lier d’autres projets aux projets de biblioth&egrave;que. Les ressources li&eacute;es sont recommand&eacute;es
uniquement pour les biblioth&egrave;ques tierces accompagn&eacute;es d’un fichier SWC.
Liaison &agrave; des ressources situ&eacute;es en dehors de l’espace de travail du projet
1 Dans l’Explorateur de packages, s&eacute;lectionnez le projet auquel vous souhaitez ajouter des ressources li&eacute;es.
2 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Dossier (ou Fichier).
3 S&eacute;lectionnez le projet ou le dossier du projet auquel vous souhaitez ajouter les ressources li&eacute;es.
4 Saisissez le nom du dossier ou du fichier. Il peut &ecirc;tre diff&eacute;rent du nom du dossier ou du fichier avec lequel vous
cr&eacute;ez un lien.
5 Cliquez sur le bouton Options avanc&eacute;es.
6 S&eacute;lectionnez Lier au dossier dans le syst&egrave;me de fichiers. Saisissez ou recherchez l’emplacement de la ressource.
7 Cliquez sur Terminer pour lier la ressource au projet.
Utilisation d’une variable de chemin &agrave; relier aux ressources
Vous pouvez &eacute;tablir des liens vers des ressources en d&eacute;finissant des variables de chemin. Vous &eacute;vitez ainsi de devoir
saisir le chemin complet d’un dossier local ou d’un dossier r&eacute;seau dans lequel vous enregistrez les fichiers. Pour plus
d’informations, voir &laquo; Cr&eacute;ation d’une variable de chemin &raquo; &agrave; la page 108.
1 Dans l’Explorateur de packages, s&eacute;lectionnez le projet auquel vous souhaitez ajouter des ressources li&eacute;es.
Les variables de chemin peuvent &eacute;galement intervenir dans certains param&egrave;tres de projet, tels que le chemin
d’acc&egrave;s &agrave; la biblioth&egrave;que et le chemin d’acc&egrave;s &agrave; la source.
2 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Dossier (ou Fichier, si vous voulez ajouter des fichiers).
3 S&eacute;lectionnez le projet ou le dossier du projet auquel vous souhaitez ajouter les ressources li&eacute;es.
4 Cliquez sur le bouton Options avanc&eacute;es.
5 S&eacute;lectionnez Lier au dossier dans le syst&egrave;me de fichiers. Cliquez sur le bouton Variables.
6 S&eacute;lectionnez une variable de chemin d&eacute;finie ou cliquez sur Nouveau pour cr&eacute;er une variable de chemin.
Si vous avez s&eacute;lectionn&eacute; une variable de chemin d&eacute;finie, passez &agrave; l’&eacute;tape 9. Si vous avez cliqu&eacute; sur Nouveau, la bo&icirc;te
de dialogue Nouvelle variable s’affiche.
7 Saisissez le nom de la variable de chemin et saisissez ou recherchez l’emplacement du fichier ou du dossier.
Cliquez sur OK pour cr&eacute;er la variable de chemin.
8 S&eacute;lectionnez la nouvelle variable de chemin dans la bo&icirc;te de dialogue S&eacute;lection d’une variable de chemin, puis
cliquez sur OK.
9 Cliquez sur Terminer pour terminer la cr&eacute;ation du lien vers la ressource.
Vous pouvez &eacute;galement d&eacute;finir et g&eacute;rer des variables de chemin dans les pr&eacute;f&eacute;rences du workbench de Flash Builder
(dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Espace de travail &gt; Ressources li&eacute;es).
D&eacute;placement de ressources entre les projets d’un espace de travail
Lorsque vous travaillez avec plusieurs projets dans un espace de travail, vous pouvez d&eacute;placer des ressources d’un
projet vers un autre.
1 Dans l’Explorateur de packages, s&eacute;lectionnez la ressource &agrave; d&eacute;placer.
Derni&egrave;re mise &agrave; jour le 10/11/2011
46
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
2 Effectuez l’une des op&eacute;rations suivantes :
• Faites glisser la ressource vers un nouveau projet.
• Coupez et collez la ressource dans un autre projet.
Remarque : vous pouvez d&eacute;placer des ressources normales et des ressources li&eacute;es. Pour plus d’informations sur la
liaison de ressources, voir &laquo; Liaison &agrave; des ressources situ&eacute;es en dehors de l’espace de travail du projet &raquo; &agrave; la page 44.
Partage de ressources entre les projets
Pour partager des ressources entre plusieurs projets, placez-les dans des dossiers qui pourront ensuite &ecirc;tre reli&eacute;s aux
diff&eacute;rents projets &agrave; l’aide du chemin d’acc&egrave;s source de ces derniers. Il s’agit de la meilleure m&eacute;thode de partage de
ressources, telles que les classes, les composants MXML et les images. Les mises &agrave; jour de ces ressources sont
imm&eacute;diatement disponibles pour tous les projets qui les utilisent. Lorsque les projets sont compil&eacute;s, les ressources
partag&eacute;es sont ajout&eacute;es au fichier SWC.
Ajout d’un dossier de ressources externes au chemin d’acc&egrave;s source
1 S&eacute;lectionnez un projet dans l’Explorateur de packages.
2 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration Flex (ou Chemin d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration
ActionScript si vous utilisez un projet ActionScript).
3 Sur la page des propri&eacute;t&eacute;s du chemin de g&eacute;n&eacute;ration, cliquez sur l’onglet Chemin source.
4 Cliquez sur le bouton Ajouter un dossier.
5 Saisissez ou recherchez le chemin du dossier, puis cliquez sur OK.
Le dossier est ajout&eacute; au chemin source.
L’onglet de propri&eacute;t&eacute;s Chemin source vous permet &eacute;galement de modifier, supprimer ou changer l’ordre des &eacute;l&eacute;ments
du chemin source.
Les dossiers qui sont ajout&eacute;s au chemin source sont signal&eacute;s dans l’Explorateur de packages.
Actualisation des ressources dans l’espace de travail
A mesure que vous modifiez, ajoutez ou supprimez les ressources d’un projet, le workbench actualise
automatiquement les diff&eacute;rentes vues qui affichent ces ressources. La suppression d’un fichier du projet par exemple
est imm&eacute;diatement r&eacute;percut&eacute;e dans l’Explorateur de packages.
Vous pouvez &eacute;galement modifier des ressources situ&eacute;es en dehors de Flash Builder, directement dans le syst&egrave;me de
fichiers. Ces modifications ne sont visibles dans Flash Builder qu’apr&egrave;s actualisation de l’espace de travail.
Par d&eacute;faut, l’espace de travail de la configuration autonome de Flash Builder est actualis&eacute; automatiquement. Cette
option peut &ecirc;tre modifi&eacute;e dans les pr&eacute;f&eacute;rences de Flash Builder. Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez
G&eacute;n&eacute;ral &gt; Espace de travail. Vous pouvez &eacute;galement modifier le comportement par d&eacute;faut de Flash Builder et
d&eacute;sactiver l’actualisation automatique de l’espace de travail.
Actualisation manuelle de l’espace de travail
❖ Dans le menu contextuel de l’Explorateur de packages, s&eacute;lectionnez Actualiser. Toutes les ressources de projet dans
l’espace de travail sont actualis&eacute;es.
D&eacute;sactivation de l’actualisation automatique
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Espace de travail.
2 D&eacute;s&eacute;lectionnez l’option Actualiser automatiquement.
Derni&egrave;re mise &agrave; jour le 10/11/2011
47
UTILISATION DE FLASH BUILDER 4.6
Initiation &agrave; Flash Builder
Alternatives &agrave; l’utilisation de r&eacute;f&eacute;rences de projets
Les r&eacute;f&eacute;rences de projet pouvant avoir une incidence sur l’ordre de g&eacute;n&eacute;ration, Flash Builder propose une alternative
&agrave; leur utilisation.
Projets de biblioth&egrave;que Flex : m&eacute;thode privil&eacute;gi&eacute;e de cr&eacute;ation d’une biblioth&egrave;que r&eacute;utilisable. Flash Builder cr&eacute;e une
r&eacute;f&eacute;rence de projet pour garantir que le projet SWC est g&eacute;n&eacute;r&eacute; avant le projet principal qui le contient sur le chemin
d’acc&egrave;s &agrave; la biblioth&egrave;que. En outre, puisque Flash Builder l’ajoute au chemin de la biblioth&egrave;que, des conseils de code
apparaissent dans le projet principal pour les classes du projet SWC.
Chemin source : m&eacute;thode recommand&eacute;e pour inclure du code dans le projet ne se trouvant pas sous la m&ecirc;me structure
de dossier. Elle active les conseils de code dans les fichiers du projet et dans les classes situ&eacute;es dans des fichiers li&eacute;s. Le
compilateur sait o&ugrave; trouver le code source. Vous pouvez ajouter au projet un nombre quelconque de chemins source.
Ils s’affichent en tant que dossiers li&eacute;s dans l’Explorateur de packages.
Derni&egrave;re mise &agrave; jour le 10/11/2011
48
Chapitre 3 : Outils de d&eacute;veloppement de
code dans Flash Builder
Dans Adobe&reg; Flash&reg; Builder™, la modification des codes MXML, ActionScript et CSS advient dans des &eacute;diteurs
diff&eacute;rents. Le workbench de Flash Builder int&egrave;gre &agrave; la fois les projets et les documents, permettant ainsi l’ouverture
automatique de l’&eacute;diteur correspondant au type de ressource. Les &eacute;diteurs de Flash Builder partagent les m&ecirc;mes
fonctionnalit&eacute;s, parmi lesquelles les conseils de code, la navigation, le formatage, la restructuration ainsi que d’autres
fonctions d’am&eacute;lioration de la productivit&eacute;.
Assistant de contenu
En cours de r&eacute;daction de code MXML, ActionScript et CSS, des conseils et des documents de r&eacute;f&eacute;rence ASDoc
s’affichent afin de faciliter la saisie. Cette fonction porte le nom d’assistant de contenu.
Dans l’&eacute;diteur MXML, la saisie dans le cadre d’un composant MXML conduit par exemple &agrave; l’affichage d’une liste
contenant toutes les propri&eacute;t&eacute;s de ce composant. L’exemple suivant illustre les conseils de code pour les propri&eacute;t&eacute;s d’un
composant MXML.
Derni&egrave;re mise &agrave; jour le 10/11/2011
49
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
La s&eacute;lection et la saisie d’une propri&eacute;t&eacute; entra&icirc;nent l’affichage des valeurs possibles (&agrave; condition que des valeurs
pr&eacute;d&eacute;finies existent). L’exemple suivant illustre les conseils de code pour les valeurs de propri&eacute;t&eacute;.
Le fonctionnement de l’assistant de contenu dans les &eacute;diteurs ActionScript et CSS est analogue.
Assistant de contenu dans l’&eacute;diteur MXML
Dans l’&eacute;diteur MXML, les conseils de code s’affichent automatiquement &agrave; la saisie du code. L’exemple suivant illustre
les conseils de code qui s’affichent lorsque vous ajoutez une balise &agrave; une balise Panel, ainsi que la documentation de
r&eacute;f&eacute;rence ASDoc. Cliquez &agrave; l’int&eacute;rieur du contenu ASDoc ou appuyez sur la touche F2 pour afficher le contenu dans
une fen&ecirc;tre distincte que vous pouvez faire d&eacute;filer. Cliquez en dehors de la fen&ecirc;tre ASDoc pour la fermer.
L’assistant de contenu classe les conseils de code par type, r&eacute;pertoriant les composants MXML visuels et non visuels,
par propri&eacute;t&eacute;s, par &eacute;v&eacute;nements et par styles.
Par d&eacute;faut, l’assistant de contenu affiche uniquement les indicateurs correspondant aux types recommand&eacute;s. Les types
recommand&eacute;s sont les composants disponibles dans les espaces de noms ou autres, suivant les balises englobantes. Les
composants dont vous disposez d&eacute;pendent de la d&eacute;claration d’espace de noms de l’application concern&eacute;e ainsi que des
balises englobant le point d’insertion dans l’&eacute;diteur.
Dans certains contextes par exemple, seuls les composants Spark sont autoris&eacute;s. D’autres contextes autorisent les
composants Spark et les composants Halo. L’assistant de contenu filtre les conseils de code en fonction du contenu.
Appuyez &agrave; plusieurs reprises sur les touches Ctrl+Espace pour faire d&eacute;filer les filtres pour les conseils de code affich&eacute;s.
Les filtres sont les suivants :
• Affichage initial : Types recommand&eacute;s
• Tous les composants
• Propri&eacute;t&eacute;s
Derni&egrave;re mise &agrave; jour le 10/11/2011
50
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
• Ev&eacute;nements
• Effets
• Styles
• Retour aux types recommand&eacute;s
Les conseils de code affich&eacute;s et l’ordre dans lequel ils d&eacute;filent d&eacute;pendent des pr&eacute;f&eacute;rences d&eacute;finies par l’utilisateur. Pour
modifier le param&egrave;tre par d&eacute;faut dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, voir &laquo; Code MXML &raquo; &agrave; la page 265.
Assistant de contenu dans l’&eacute;diteur ActionScript
Les conseils de code apparaissent automatiquement lorsque vous saisissez du code ActionScript dans l’&eacute;diteur
ActionScript.
L’assistant de contenu filtre les conseils de code en fonction du contenu. Appuyez &agrave; plusieurs reprises sur les touches
Ctrl+Espace pour faire d&eacute;filer les filtres pour les conseils de code affich&eacute;s. Les filtres sont les suivants :
• Mod&egrave;les
• Variables
• Fonctions
• Classes et interfaces
• Packages
• Espaces de noms
Les conseils de code affich&eacute;s et l’ordre dans lequel ils d&eacute;filent d&eacute;pendent des pr&eacute;f&eacute;rences d&eacute;finies par l’utilisateur. Pour
modifier le param&egrave;tre par d&eacute;faut dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, voir &laquo; Code ActionScript &raquo; &agrave; la page 264.
Assistant de contenu dans l’&eacute;diteur CSS
L’assistant de contenu affiche des indicateurs pour les styles CSS contenus dans des balises int&eacute;gr&eacute;es &lt;fx:Style&gt; ou
dans des documents CSS autonomes, ainsi que l’illustre l’exemple suivant.
Remarque : dans les documents CSS, les conseils de code s’affichent uniquement si vous appuyez sur Ctrl+Espace.
Derni&egrave;re mise &agrave; jour le 10/11/2011
51
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
L’assistant de contenu propose &eacute;galement des indicateurs pour les classes de composants contenues dans la balise
ClassReference d’un document CSS, ainsi que l’illustre l’exemple suivant :
Vous pouvez &eacute;galement saisir les noms complets des classes. Dans ce cas, les classes et packages disponibles s’affichent
comme suit :
La balise ClassReference fournit une navigation par hyperliens qui vous permet d’acc&eacute;der au composant r&eacute;f&eacute;renc&eacute; ou
&agrave; la classe d’habillage. Pour ce faire, appuyez sur la touche Ctrl (touche Commande sur Mac) et d&eacute;placez le curseur sur
la balise. Le nom de la classe se transforme en hyperlien. Pour plus d’informations sur la navigation par hyperliens,
voir &laquo; Ouverture des d&eacute;finitions de code &raquo; &agrave; la page 81.
Affichage du r&eacute;sum&eacute; du guide de r&eacute;f&eacute;rence ActionScript
1 Commencez &agrave; entrer une ligne de code qui contient une classe MXML ou ActionScript. Vous pouvez &eacute;galement
survoler la classe avec le curseur de la souris.
Au fur et &agrave; mesure que vous tapez, le r&eacute;sum&eacute; du guide de r&eacute;f&eacute;rence ActionScript correspondant &agrave; la classe appara&icirc;t
&agrave; c&ocirc;t&eacute; des conseils de code. Si vous survolez une classe avec le curseur de la souris, seul le r&eacute;sum&eacute; du guide de
r&eacute;f&eacute;rence ActionScript s’affiche.
2 Cliquez &agrave; l’int&eacute;rieur du r&eacute;sum&eacute; du guide de r&eacute;f&eacute;rence ActionScript ou appuyez sur la touche F2 pour afficher le
contenu du guide de r&eacute;f&eacute;rence ActionScript dans une fen&ecirc;tre distincte que vous pouvez faire d&eacute;filer. Lorsque vous
avez termin&eacute; la lecture de la documentation, cliquez hors de la fen&ecirc;tre. La fen&ecirc;tre ASDoc se ferme.
3 Pour afficher la vue ASDoc, appuyez sur Ctrl+3, puis saisissez asdoc et s&eacute;lectionnez Vues.
Derni&egrave;re mise &agrave; jour le 10/11/2011
52
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Assistant rapide
La fonctionnalit&eacute; Assistant rapide d’Adobe Flash Builder fournit une assistance contextuelle qui permet de r&eacute;aliser
rapidement une t&acirc;che. L’Assistant rapide vous permet de s&eacute;lectionner une action dans une liste d’actions applicables
&agrave; votre fragment de code actuel.
Pour appeler l’Assistant rapide, s&eacute;lectionnez Assistant rapide dans le menu contextuel de l’&eacute;diteur, puis choisissez
l’action requise. Vous pouvez &eacute;galement utiliser le raccourci clavier Ctrl+1 (Windows) ou Commande+1 (Mac).
Les options suivantes de l’Assistant rapide sont actuellement disponibles :
Renommer dans le fichier
Utilisez l’Assistant rapide pour renommer les &eacute;l&eacute;ments de code pour lesquels l’action Renommer/Restructurer est
activ&eacute;e. Il peut s’agir de noms de variables, m&eacute;thodes, classes, de param&egrave;tres, d’importations, d’&eacute;tats et du code
ActionScript &agrave; l’int&eacute;rieur des balises MXML.
Pour renommer toutes les instances d’une variable ou m&eacute;thode dans votre fichier, placez le curseur sur le nom de la
variable ou m&eacute;thode s&eacute;lectionn&eacute;e, puis appuyez sur Ctrl+1. S&eacute;lectionnez ensuite l’option Renommer dans le fichier
pour renommer la variable ou la m&eacute;thode. De m&ecirc;me, vous pouvez modifier la propri&eacute;t&eacute; d’ID d’un composant MXML.
Renommer dans l’espace de travail
Utilisez l’Assistant rapide pour renommer les &eacute;l&eacute;ments de code pour lesquels l’action Renommer/Restructure est
activ&eacute;e dans tous les fichiers de votre espace de travail.
Pour renommer toutes les instances d’une variable ou m&eacute;thode dans votre espace de travail, placez le curseur sur le
nom de la variable ou m&eacute;thode s&eacute;lectionn&eacute;e, puis appuyez sur Ctrl+1. S&eacute;lectionnez ensuite l’option Renommer dans
l’espace de travail pour renommer la variable ou la m&eacute;thode. Vous pouvez actualiser toutes les r&eacute;f&eacute;rences &agrave; la variable
ou m&eacute;thode dans votre espace de travail.
Organiser les importations
Placez le curseur sur n’importe quelle instruction d’importation, puis appuyez sur Ctrl+1. S&eacute;lectionnez ensuite l’option
d’organisation des importations. Pour plus d’informations sur l’organisation des instructions d’importation, voir
&laquo; Organisation des instructions d’importation &raquo; &agrave; la page 85.
G&eacute;n&eacute;rer l’instruction d’importation
Si vous avez une variable non d&eacute;finie, vous pouvez placer votre curseur &agrave; n’importe quel endroit sur la ligne de code,
puis appuyez sur Ctrl + 1. Une option permettant d’importer le composant s’affiche. Si le composant poss&egrave;de des
&eacute;quivalents MX et Spark, les deux options apparaissent.
Par exemple, si votre code comporte la variable non d&eacute;finie btn, comme suit :
var btn:Button;
Placez votre curseur &agrave; n’importe quel endroit sur la ligne de code, puis appuyez sur Ctrl +1. Les options d’importation
du composant Button s’affichent. Si vous s&eacute;lectionnez le composant Spark Button, l’instruction d’importation est cr&eacute;&eacute;e
comme suit :
import spark.components.Button;
Fractionner la d&eacute;claration de variable
Utilisez l’Assistant rapide pour fractionner une variable en deux parties : la d&eacute;claration de la variable et l’initialisation
de la variable.
Derni&egrave;re mise &agrave; jour le 10/11/2011
53
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
L’Assistant rapide appara&icirc;t dans les contextes suivants.
Contexte
Variables locales dans une fonction
Exemple
Si vous poss&eacute;dez une fonction, comme suit :
public function TestAS()
{
var i:int=10;
}
Pour fractionner la variable &agrave; l’aide de l’Assistant rapide, placez votre curseur &agrave;
n’importe quel endroit dans la d&eacute;claration de la variable var i:int=10; et appuyez
sur Ctrl+1. Ensuite, s&eacute;lectionnez l’option permettant de fractionner la d&eacute;claration de la
variable.
La variable est fractionn&eacute;e comme suit :
public function TestAS()
{
var i:int;
i=10;
}
Plusieurs variables dans une fonction
Si vous poss&eacute;dez une fonction de ce type :
public function TestAS()
{
var i:int=10, j:int=20;
}
Pour fractionner les variables &agrave; l’aide de l’Assistant rapide, placez votre curseur &agrave;
n’importe quel endroit dans la d&eacute;claration de la variable var i:int=10, j:int=20;
et appuyez sur Ctrl+1. Ensuite, s&eacute;lectionnez l’option permettant de fractionner la
d&eacute;claration de la variable.
Vous pouvez fractionner la variable comme suit :
public function TestAS()
{
var i:int, j:int=20;
i=10;
}
Vous pouvez encore fractionner la variable j:int=20; en pla&ccedil;ant votre curseur &agrave; n’importe
quel endroit au sein de la d&eacute;claration de la variable, puis en appuyant sur Ctrl+1. Ensuite,
s&eacute;lectionnez l’option permettant de fractionner la d&eacute;claration de la variable.
La variable est fractionn&eacute;e comme suit :
public function TestAS()
{
var i:int, j:int;
j=20;
i=10;
}
Attribution &agrave; une variable
Lorsque vous &eacute;valuez une expression ActionScript, si l’expression renvoie une valeur, vous pouvez appeler l’Assistant
rapide pour cr&eacute;er une variable pour cette expression. L’Assistant rapide n’est pas disponible pour les m&eacute;thodes ne
poss&eacute;dant pas de type de retour ou si le type de retour est void.
Le nom de la variable qui est cr&eacute;&eacute;e d&eacute;coule du nom de la fonction ou de l’identifiant dans l’expression. Si le nom d&eacute;riv&eacute;
existe, il est incr&eacute;ment&eacute;.
Par exemple, si vous avez le code suivant :
var i:int;
i;
Derni&egrave;re mise &agrave; jour le 10/11/2011
54
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Placez votre curseur apr&egrave;s &quot;i&quot;, puis appuyez sur Ctrl+1. S&eacute;lectionnez ensuite Attribuer l’instruction &agrave; une nouvelle
variable locale. Une variable &quot;i2&quot; est cr&eacute;&eacute;e. Comme la variable i est d&eacute;j&agrave; pr&eacute;sente, le nom de la nouvelle variable est
incr&eacute;ment&eacute; &agrave; &quot;i2&quot; comme suit :
var i:int;
var i2:int = i;
Par exemple, l’attribution &agrave; une variable appara&icirc;t dans les contextes suivants :
Contexte
Exemple
Expression litt&eacute;rale
L’Assistant rapide prend en charge une vaste gamme d’expressions simples et complexes.
Par exemple, si vous avez l’expression suivante :
100+150
Placez votre curseur &agrave; n’importe quel endroit dans l’expression, puis appuyez sur Ctrl+1 pour
obtenir un code ressemblant &agrave; celui-ci :
var number2:Number = 110 + 500;
Appel de m&eacute;thode
Si vous avez le code suivant dans une m&eacute;thode :
var ac:ArrayCollection = new ArrayCollection();
ac.createCursor();
Placez votre curseur dans ac.createCursor();, puis appuyez sur Ctrl+1. S&eacute;lectionnez
ensuite l’option Attribuer l’instruction &agrave; une nouvelle variable locale. La variable locale est
cr&eacute;&eacute;e comme suit :
var createCursor:IViewCursor = ac.createCursor();
Acc&egrave;s &agrave; la propri&eacute;t&eacute;
Si vous avez le code suivant dans une propri&eacute;t&eacute; :
var ac:ArrayCollection = new ArrayCollection();
ac.source;
Placez votre curseur &agrave; n’importe quel endroit dans ac.source, puis appuyez sur Ctrl+1.
S&eacute;lectionnez ensuite l’option Attribuer l’instruction &agrave; une nouvelle variable locale. La
variable locale est cr&eacute;&eacute;e comme suit :
var source:Array = ac.source;
Conversion de la variable locale en champ
Lorsque vous disposez de variables locales dans une fonction, l’Assistant rapide vous permet de cr&eacute;er un champ dans
la classe.
Par exemple, si vous avez une variable dans une fonction, comme suit :
var i:int = 10;
Placez votre curseur &agrave; n’importe quel endroit dans la d&eacute;finition de la variable, puis appuyez sur Ctrl+1. S&eacute;lectionnez
ensuite Convertir la variable locale en champ. Le champ de la classe est cr&eacute;&eacute; comme suit :
private var i:int;
Le nom du nouveau champ est le m&ecirc;me que celui de la variable locale, &agrave; condition qu’il n’existe aucun conflit dans la
port&eacute;e de la classe. Si le nom existe, le nom du champ est incr&eacute;ment&eacute; et vous pouvez renommer la variable ou la
m&eacute;thode dans votre fichier.
G&eacute;n&eacute;ration des m&eacute;thodes get/set
L’Assistant rapide vous permet de g&eacute;n&eacute;rer des m&eacute;thodes get/set (fonctions d’accesseur get et set) pour les variables de
classes.
Derni&egrave;re mise &agrave; jour le 10/11/2011
55
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Par exemple, si votre code ressemble au suivant :
private var result:ResultEvent;
Placez votre curseur dans la variable result, puis appuyez sur Ctrl+1. S&eacute;lectionnez ensuite l’option Assistant rapide
pour cr&eacute;er les m&eacute;thodes get/set destin&eacute;e au r&eacute;sultat. La bo&icirc;te de dialogue G&eacute;n&eacute;rer les m&eacute;thodes get/set appara&icirc;t. Cette
bo&icirc;te de dialogue vous permet de sp&eacute;cifier une nouvelle fonction get/set. Pour plus d’informations sur la g&eacute;n&eacute;ration
de m&eacute;thodes get/set, reportez-vous &agrave; la section &laquo; G&eacute;n&eacute;ration de fonctions d’accesseur get ou set &raquo; &agrave; la page 73.
G&eacute;n&eacute;ration de fonctions
L’Assistant rapide vous permet de g&eacute;n&eacute;rer des fonctions sp&eacute;ciales, telles que labelFunction, iconFunction, etc.
Par exemple, pour cr&eacute;er une fonction labelFunction pour le code suivant :
&lt;mx:DataGrid labelFunction=&quot;lblfunc&quot; dataTipFunction=&quot;tipFunc&quot; /&gt;
Placez votre curseur dans &quot;lblfunc&quot;, puis appuyez sur Ctrl+1. S&eacute;lectionnez ensuite l’option de l’Assistant rapide
permettant de cr&eacute;er la fonction labelFunction. Le code de remplacement de la fonction est g&eacute;n&eacute;r&eacute; comme suit :
protected function lblfunc(item:Object, column:DataGridColumn):String
{
// TODO Auto-generated method stub
}
G&eacute;n&eacute;ration de gestionnaires d’&eacute;v&eacute;nements &agrave; partir du code MXML
L’Assistant rapide vous permet de g&eacute;n&eacute;rer des gestionnaires d’&eacute;v&eacute;nements avec des noms de gestionnaires
personnalis&eacute;s au sein du code MXML.
Par exemple, pour g&eacute;n&eacute;rer un gestionnaire d’&eacute;v&eacute;nement en cliquant sur la balise &lt;mx:Button&gt;, entrez le code suivant :
&lt;mx:Button click=&quot;clickHandler&quot; /&gt;
Placez ensuite votre curseur dans &quot;clickHandler&quot;, appuyez sur Ctrl+1, puis s&eacute;lectionnez G&eacute;n&eacute;rer un gestionnaire
d’&eacute;v&eacute;nement. Le gestionnaire d’&eacute;v&eacute;nement et le code de remplacement sont g&eacute;n&eacute;r&eacute;s comme suit :
&lt;mx:Button click=&quot;clickHandler(event)&quot; /&gt;
protected function clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
Vous pouvez &eacute;galement g&eacute;n&eacute;rer un gestionnaire d’&eacute;v&eacute;nements pour le code suivant, en appuyant sur Ctrl+1 n’importe
o&ugrave; dans &quot;clickHandler(event)&quot;.
&lt;mx:Button click=&quot;clickHandler(event)&quot; /&gt;
Pour personnaliser le code de remplacement pr&eacute;d&eacute;fini g&eacute;n&eacute;r&eacute; par Flash Builder, voir &laquo; Mod&egrave;les de code &raquo; &agrave; la page 56.
Remplacement ou impl&eacute;mentation de m&eacute;thodes
Flash Builder permet de s&eacute;lectionner et de remplacer des m&eacute;thodes d’une classe parent ou d’impl&eacute;menter des
m&eacute;thodes d’interface.
1 Ouvrez la bo&icirc;te de dialogue Remplacer/Impl&eacute;menter des m&eacute;thodes en s&eacute;lectionnant l’option correspondante dans
le menu Source. Vous pouvez &eacute;galement s&eacute;lectionner Source &gt; Remplacer/Impl&eacute;menter des m&eacute;thodes dans le
menu contextuel de l’&eacute;diteur MXML ou ActionScript.
Derni&egrave;re mise &agrave; jour le 10/11/2011
56
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
2 Les m&eacute;thodes de chaque classe parent s’affichent sous forme d’arborescence. Pour chaque classe, vous pouvez
s&eacute;lectionner les m&eacute;thodes &agrave; remplacer et les m&eacute;thodes &agrave; impl&eacute;menter.
3 Vous pouvez choisir le point d’insertion pour ins&eacute;rer les m&eacute;thodes s&eacute;lectionn&eacute;es. L’option de point d’insertion par
d&eacute;faut d&eacute;pend de l’emplacement du curseur dans l’&eacute;diteur lors de l’ouverture de la bo&icirc;te de dialogue
Remplacer/Impl&eacute;menter des m&eacute;thodes. La variable ou la m&eacute;thode la plus proche de l’emplacement du curseur
appara&icirc;t comme option de point d’insertion.
Flash Builder g&eacute;n&egrave;re le code de remplacement pour les m&eacute;thodes s&eacute;lectionn&eacute;es.
Pour personnaliser le code de remplacement pr&eacute;d&eacute;fini g&eacute;n&eacute;r&eacute; par Flash Builder, voir &laquo; Mod&egrave;les de code &raquo; &agrave; la page 56.
Mod&egrave;les de code
Les mod&egrave;les de code permettent d’acc&eacute;l&eacute;rer l’activit&eacute; de codage gr&acirc;ce &agrave; l’insertion automatique de motifs de codage
employ&eacute;s fr&eacute;quemment.
Flash Builder inclut diff&eacute;rents mod&egrave;les de code pr&eacute;d&eacute;finis. Vous pouvez &eacute;galement d&eacute;finir des mod&egrave;les de code
suppl&eacute;mentaires pour les motifs de code couramment utilis&eacute;s. Pour voir tous les mod&egrave;les de code disponibles, ouvrez
la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Mod&egrave;les de code.
Paul Robertson, professionnel de la communaut&eacute; Adobe, a publi&eacute; sur son blog un article sur l’utilisation de
mod&egrave;les de code.
Mod&egrave;les de code MXML, ActionScript et CSS
Les mod&egrave;les de code ActionScript, CSS et MXML sont bas&eacute;s sur le contexte et peuvent &ecirc;tre appel&eacute;s en appuyant sur
Ctrl+Espace. Vous pouvez utiliser les mod&egrave;les pr&eacute;d&eacute;finis fournis avec Flash Builder ou cr&eacute;er vos propres mod&egrave;les.
Insertion des mod&egrave;les de code
Pour ins&eacute;rer un mod&egrave;le de code dans l’&eacute;diteur de code, saisissez le nom du mod&egrave;le dans l’&eacute;diteur de code et appuyez
sur Ctrl+Espace.
Par exemple, lors de l’&eacute;criture de code ActionScript, supposons que vous utilisez &agrave; plusieurs reprises la boucle for.
Vous pouvez dans ce cas d&eacute;finir un mod&egrave;le de code pour la boucle for de la mani&egrave;re suivante :
for (var i:int = 0; i &lt; array.length; i++) { }
Lorsque vous utilisez un mod&egrave;le de code, il n’est pas n&eacute;cessaire de saisir le code complet pour la boucle for. A la place,
dans la classe ActionScript, tapez for et appuyez sur Ctrl+Espace. Une option de mod&egrave;le permettant de cr&eacute;er la boucle
for s’affiche. Lorsque vous s&eacute;lectionnez le mod&egrave;le de code, le code d&eacute;fini dans le mod&egrave;le est ins&eacute;r&eacute;.
Les mod&egrave;les peuvent &eacute;galement contenir des variables de mod&egrave;le. Les variables de mod&egrave;le sont d&eacute;finies entre les
symboles ${}. Elles sont r&eacute;solues en fonction de la d&eacute;finition de variable correspondante dans l’&eacute;diteur.
Par exemple, si vous d&eacute;finissez un mod&egrave;le de code pour la boucle for de la mani&egrave;re suivante :
for (var ${index}:int = 0; ${index} &lt; ${array}.length; ${index}++) { ${cursor} }
Puis, si vous appelez le mod&egrave;le de code apr&egrave;s avoir d&eacute;fini une variable myArr de la mani&egrave;re suivante :
{
var myArr:ArrayCollection = null;
}
Dans ce cas, ${array} dans le mod&egrave;le de code est r&eacute;solu comme myArr et le code r&eacute;sultant pr&eacute;sente l’aspect suivant :
Derni&egrave;re mise &agrave; jour le 10/11/2011
57
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
{
var myArr:ArrayCollection = null;
for (var ${index}:int = 0; ${index} &lt; myArr.length; ${index}++) { ${cursor} }
}
Cr&eacute;ation et modification de mod&egrave;les de code
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Mod&egrave;les de code.
2 Les mod&egrave;les de code sont class&eacute;s dans les cat&eacute;gories ActionScript, MXML et CSS. Chaque cat&eacute;gorie contient un
ensemble de mod&egrave;les de code pr&eacute;d&eacute;finis. Vous pouvez modifier un mod&egrave;le existant ou en ajouter un nouveau.
3 Pour ajouter un nouveau mod&egrave;le, s&eacute;lectionnez la cat&eacute;gorie du mod&egrave;le de code et cliquez sur Ajouter. Dans la bo&icirc;te
de dialogue Nouveau mod&egrave;le, saisissez un nom et une description succincte pour le mod&egrave;le de code. Sp&eacute;cifiez
ensuite un contexte dans lequel le mod&egrave;le de code doit &ecirc;tre appel&eacute;.
Vous pouvez sp&eacute;cifier des contextes pour les mod&egrave;les de code ActionScript et MXML.
Vous disposez des contextes ActionScript suivants :
• ActionScript : ins&egrave;re le mod&egrave;le de code &agrave; un endroit quelconque du document ActionScript.
• ActionScript statement : ins&egrave;re le mod&egrave;le de code dans les fonctions et dans les &eacute;l&eacute;ments d’une classe.
• ActionScript members : ins&egrave;re le mod&egrave;le de code uniquement dans les &eacute;l&eacute;ments d’une classe.
• ActionScript Package Scope : ins&egrave;re le mod&egrave;le de code dans un package, de la mani&egrave;re suivante :
Package
{
/* insert code template*/
}
Vous disposez des contextes MXML suivants :
• MXML : ins&egrave;re le mod&egrave;le de code &agrave; un endroit quelconque du document MXML.
• MX Component : ins&egrave;re le mod&egrave;le de code dans les composants MX disponibles pour le SDK Flex 3.
• Spark Components : ins&egrave;re le mod&egrave;le de code dans les composants Spark disponibles pour le SDK Flex 4.
• MXML attributes : ins&egrave;re le mod&egrave;le de code pour les attributs MXML dans les composants MX et Spark.
4 Saisissez le code correspondant au mod&egrave;le dans la section Motif. Pour ins&eacute;rer des variables dans le code, cliquez sur
Ins&eacute;rer une variable et s&eacute;lectionnez une variable pr&eacute;d&eacute;finie dans la liste. Les variables sont li&eacute;es &agrave; la cat&eacute;gorie du
mod&egrave;le.
Les mod&egrave;les ActionScript contiennent des variables pr&eacute;d&eacute;finies, notamment array, enclosing_method,
enclosing_package, enclosing_type, field, local_var et var. Les mod&egrave;les MXML contiennent des variables
pr&eacute;d&eacute;finies, notamment fx, mx, s et tag.
5 Si vous ne souhaitez pas que Flash Builder ins&egrave;re automatiquement le mod&egrave;le de code dans votre code, d&eacute;sactivez
l’option Insertion automatique dans le code.
6 Pour personnaliser un mod&egrave;le de code existant, s&eacute;lectionnez le mod&egrave;le et cliquez sur Modifier. Apr&egrave;s avoir modifi&eacute;
le mod&egrave;le, cliquez sur OK.
Pour plus d’informations sur la personnalisation des mod&egrave;les de fichier et des variables de mod&egrave;le, voir
&laquo; Personnalisation des mod&egrave;les de fichier &raquo; &agrave; la page 62 et &laquo; Variables des mod&egrave;les &raquo; &agrave; la page 65.
Vous pouvez &agrave; tout moment supprimer le mod&egrave;le personnalis&eacute; et r&eacute;tablir le mod&egrave;le de code pr&eacute;d&eacute;fini en cliquant
sur R&eacute;tablir la valeur par d&eacute;faut.
Derni&egrave;re mise &agrave; jour le 10/11/2011
58
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Par d&eacute;faut, vous pouvez appeler tous les mod&egrave;les pr&eacute;d&eacute;finis &agrave; l’aide de l’assistant de contenu. Si toutefois vous
souhaitez exclure un mod&egrave;le sp&eacute;cifique des options de l’assistant de contenu, d&eacute;sactivez ce mod&egrave;le dans la section
Mod&egrave;les existants.
Vous pouvez &eacute;galement importer et exporter des mod&egrave;les de code. Vous pouvez s&eacute;lectionner un ou plusieurs mod&egrave;les
et les exporter. Les mod&egrave;les sont export&eacute;s sous forme de fichier XML.
Paul Robertson, professionnel de la communaut&eacute; Adobe, a publi&eacute; sur son blog un article sur le partage de mod&egrave;les
de code.
Mod&egrave;les de code Flash Builder
Flash Builder peut g&eacute;n&eacute;rer automatiquement un code pr&eacute;d&eacute;fini dans les sc&eacute;narios suivants :
• &laquo; G&eacute;n&eacute;ration de gestionnaires d’&eacute;v&eacute;nement &raquo; &agrave; la page 213
• &laquo; G&eacute;n&eacute;ration de fonctions d’accesseur get ou set &raquo; &agrave; la page 73
• &laquo; G&eacute;n&eacute;ration &agrave; partir de l’utilisation &raquo; &agrave; la page 71 (code d’&eacute;l&eacute;ment de remplacement de l’emplacement r&eacute;serv&eacute; pour
une m&eacute;thode non d&eacute;finie)
• &laquo; Remplacement ou impl&eacute;mentation de m&eacute;thodes &raquo; &agrave; la page 55
Vous pouvez personnaliser le mod&egrave;le de code pr&eacute;d&eacute;fini g&eacute;n&eacute;r&eacute; par Flash Builder.
Personnalisation du mod&egrave;le de code
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, puis s&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Mod&egrave;les de code &gt; Flash
Builder.
2 S&eacute;lectionnez le nom du mod&egrave;le de code que vous souhaitez personnaliser, puis cliquez sur Editer. Par exemple, pour
personnaliser le code g&eacute;n&eacute;r&eacute; lorsque vous g&eacute;n&eacute;rez un gestionnaire d’&eacute;v&eacute;nement, s&eacute;lectionnez le mod&egrave;le de
gestionnaire d’&eacute;v&eacute;nement, puis cliquez sur Editer.
3 Vous pouvez personnaliser le nom du mod&egrave;le, la description et le motif de code.
4 Pour ins&eacute;rer une variable dans le code, cliquez sur Ins&eacute;rer une variable, puis s&eacute;lectionnez la variable. Pour plus
d’informations &agrave; propos des variables de code disponibles, voir &laquo; Utilisation de variables de code &raquo; &agrave; la page 59.
5 Vous pouvez &agrave; tout moment annuler les modifications en cliquant sur R&eacute;tablir la valeur par d&eacute;faut.
6 Vous pouvez aussi importer et exporter le mod&egrave;le de code. Vous pouvez s&eacute;lectionner un ou plusieurs mod&egrave;les et
les exporter. Les mod&egrave;les sont export&eacute;s sous forme de fichier XML.
Derni&egrave;re mise &agrave; jour le 10/11/2011
59
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Utilisation de variables de code
Variables de code pour les gestionnaires d’&eacute;v&eacute;nement
Variable
Description
Exemple
${component_id}
Correspond &agrave; l’ID unique du
composant.
Si l’ID du composant du bouton est test, le gestionnaire d’&eacute;v&eacute;nement
g&eacute;n&eacute;r&eacute; est test_clickHandler.
Si vous n’avez pas sp&eacute;cifi&eacute; de valeurs d’ID, les valeurs g&eacute;n&eacute;r&eacute;es
automatiquement sont composant1, composant2, etc.
${component_name}
Correspond au nom de la balise.
${namespace} ${modifiers}function
${:method_name('${component_id}_${event_name}Handler
')}(${event}:${event_type}):${return_type}
{
// TODO Auto-generated method stub
${cursor}
}
${event_name}
Indique le nom de l’&eacute;v&eacute;nement.
clickEvent, onHover
${event_type}
Correspond au type de gestionnaire Flash Builder d&eacute;signe un type d’&eacute;v&eacute;nement par d&eacute;faut pour chaque
d’&eacute;v&eacute;nement.
composant de l’interface utilisateur.
Lors de la g&eacute;n&eacute;ration d’un &eacute;v&eacute;nement de clic pour un composant de
bouton, un gestionnaire d’&eacute;v&eacute;nement de type MouseEvent est g&eacute;n&eacute;r&eacute;
comme suit :
button1_clickHandler(event:MouseEvent)
${modifiers}
Indique les modificateurs de la
fonction g&eacute;n&eacute;r&eacute;e.
${method_name}
Correspond au nom du gestionnaire Pour un &eacute;v&eacute;nement de clic du composant Bouton, le nom du
d’&eacute;v&eacute;nement.
gestionnaire d’&eacute;v&eacute;nement peut &ecirc;tre button1_clickHandler
${namespace}
D&eacute;finit la valeur d’espace de noms
pour la fonction g&eacute;n&eacute;r&eacute;e.
static
La valeur d’espace de noms peut &ecirc;tre l’une des suivantes :
•
protected
•
public
•
private
La valeur par d&eacute;faut est protected.
Exemple d’utilisations de variables de code pour les fonctions du gestionnaire d’&eacute;v&eacute;nement :
${namespace} ${modifiers}function
${:method_name('${component_id}_${event_name}Handler')}
${event}:${event_type}):${return_type}
{
// TODO Auto-generated method stub
${cursor}
}
Derni&egrave;re mise &agrave; jour le 10/11/2011
60
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Variables de code pour les fonctions d’accesseur get et set
Variable
Description
Exemple
${metadata}
Sp&eacute;cifie les balises de m&eacute;tadonn&eacute;es qui sont g&eacute;n&eacute;r&eacute;es
G&eacute;n&eacute;ration de fonctions d’accesseur get and
set pour une variable Bindable
${asdoc}
Sp&eacute;cifie les ASDoc qui sont g&eacute;n&eacute;r&eacute;s pour les fonctions
d’accesseur get and set
${metadata}
${asdoc}${namespace}
${modifiers}function get
${method_name}()${return_type}
{
return ${property};
}
${return_type}
Correspond au type de variable.
${metadata}
${asdoc}${namespace}
${modifiers}function get
${method_name}()${return_type}
{
return ${property};
}
Si le type de variable n’est pas sp&eacute;cifi&eacute;, la fonction
d’accesseur get g&eacute;n&eacute;r&eacute;e n’a pas de type de retour.
${property}}
${argument_type}
Correspond au nom de la propri&eacute;t&eacute; dans la bo&icirc;te de
dialogue des m&eacute;thodes get/set.
Pour une variable var i:int, i est r&eacute;solu en
_i
Correspond au type de donn&eacute;es de la fonction set g&eacute;n&eacute;r&eacute;e.
Exemple d’utilisation de variables de code pour les fonctions d’accesseur get et set :
${asdoc}
${namespace} ${modifiers}function set ${method_name}(value${argument_type}):void
{
if( ${property} !== value)
{
${property} = value;
dispatchEvent(new Event(&quot;${event_name}&quot;));
}
}
Variables de code pour les fonctions dans une classe ind&eacute;finie
Variable
Description
Exemple
${params}
Pour une fonction ind&eacute;finie qui accepte un nombre
sp&eacute;cifi&eacute; d’arguments, la fonction g&eacute;n&eacute;r&eacute;e poss&egrave;de le
m&ecirc;me nombre d’arguments de ce type.
Remplissage du code de m&eacute;tadonn&eacute;es
Flash Builder affiche des indicateurs de remplissage du code des m&eacute;tadonn&eacute;es que vous utilisez dans vos documents
MXML et ActionScript.
Dans un document MXML, les indicateurs de remplissage du code s’affichent dans les balises &lt;fx:Metadata&gt; et
&lt;fx:Script&gt; int&eacute;gr&eacute;es. Dans un document ActionScript, les indicateurs de remplissage du code s’affichent &eacute;galement
pour les &eacute;l&eacute;ments de langage ActionScript, tels que les noms de classe, les variables et les m&eacute;thodes set/get.
Derni&egrave;re mise &agrave; jour le 10/11/2011
61
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Les conseils de code sont li&eacute;s au contexte du document MXML et Action Script, ainsi qu’au code dans lequel les
m&eacute;tadonn&eacute;es sont utilis&eacute;es. Par exemple, lorsque vous appelez l’assistant de contenu au sein de deux lignes vierges
d’une instruction ActionScript, les conseils de code applicables uniquement &agrave; cette instruction ActionScript
apparaissent. Pour voir tous les conseils de code valides applicables au document ActionScript ou MXML, appuyez
plusieurs fois sur Ctrl+Espace pour parcourir les conseils de code disponibles.
Utilisation du remplissage du code de m&eacute;tadonn&eacute;es dans les documents
MXML
Dans un document ou une classe MXML, vous pouvez utiliser le remplissage du code de m&eacute;tadonn&eacute;es comme suit :
• Saisissez les balises &laquo; [ &raquo; dans &lt;fx:Metadata&gt; comme suit :
&lt;fx:Metadata&gt;
[
&lt;/fx:Metadata&gt;
• Saisissez les balises &laquo; [ &raquo; dans &lt;fx:Script&gt; comme suit :
&lt;fx:Script&gt;
&lt;![CDATA[
[
]]&gt;
&lt;/fx:Script&gt;
Utilisation du remplissage du code de m&eacute;tadonn&eacute;es dans les documents
ActionScript
Dans un document ActionScript, vous pouvez utiliser le remplissage du code de m&eacute;tadonn&eacute;es lorsque vous saisissez [
avant un nom de classe, une variable, une m&eacute;thode get ou une m&eacute;thode set, comme suit :
[
class GetSet
{
[
private var privateProperty:String;
[
public function get publicAccess():String
{
return privateProperty;
}
[
public function set publicAccess(setValue:String):void
{
privateProperty = setValue;
}
}
Remplissage du code pour les balises de m&eacute;tadonn&eacute;es personnalis&eacute;es
Flash Builder prend en charge le remplissage du code pour les balises de m&eacute;tadonn&eacute;es personnalis&eacute;es qui sont
introduites lors de l’utilisation de structures Flex tierces.
Derni&egrave;re mise &agrave; jour le 10/11/2011
62
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Pour activer les conseils de code pour les balises de m&eacute;tadonn&eacute;es personnalis&eacute;es dans votre projet, g&eacute;n&eacute;rez un fichier
SWC contenant un fichier metadata.xml, comme suit :
1 Cr&eacute;ez un projet de biblioth&egrave;que. L’assistant de cr&eacute;ation d’un projet de biblioth&egrave;que Flex vous guide &agrave; travers les
diff&eacute;rentes &eacute;tapes et vous demande d’indiquer le nom du projet, son emplacement, ainsi que le chemin de
g&eacute;n&eacute;ration. Pour plus d’informations, voir &laquo; Cr&eacute;ation de projets de biblioth&egrave;que Flex &raquo; &agrave; la page 229.
2 Ajoutez le fichier metadata.xml dans le dossier src, sous le dossier racine de votre projet de biblioth&egrave;que. Incluez
toutes les balises de m&eacute;tadonn&eacute;es que vous souhaitez dans le fichier metadata.xml.
Ajoutez le fichier metadata.properties (le cas &eacute;ch&eacute;ant) dans le dossier de param&egrave;tres r&eacute;gionaux appropri&eacute;. Par
exemple : locale/en_US ou locale/fr_FR.
Pour plus d’informations sur les balises de m&eacute;tadonn&eacute;es, voir About metadata tags dans la documentation Flex.
3 Incluez le fichier metadata.xml dans le fichier SWC de biblioth&egrave;que, comme suit :
a S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin de g&eacute;n&eacute;ration de la biblioth&egrave;que Flex.
Le fichier metadata.xml que vous avez ajout&eacute; appara&icirc;t sous l’onglet Ressources.
b S&eacute;lectionnez le fichier metadata.xml &agrave; inclure dans le fichier SWC, puis cliquez sur OK.
Le fichier SWC est compil&eacute; et g&eacute;n&eacute;r&eacute; dans le dossier de sortie (bin) du projet de biblioth&egrave;que.
4 S&eacute;lectionnez le dossier de param&egrave;tres r&eacute;gionaux auquel vous avez ajout&eacute; le fichier metadata.properties (le cas
&eacute;ch&eacute;ant).
5 Une fois le fichier SWC g&eacute;n&eacute;r&eacute;, ajoutez-le au chemin de g&eacute;n&eacute;ration de votre projet, comme suit :
1 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration Flex.
2 Cliquez sur Ajouter un fichier SWC.
3 Acc&eacute;dez &agrave; l’emplacement du fichier SWC ou saisissez-le, puis cliquez sur OK.
Une fois le fichier SWC ajout&eacute; &agrave; votre chemin de g&eacute;n&eacute;ration, les indicateurs de remplissage du code de m&eacute;tadonn&eacute;es
apparaissent pour les balises de m&eacute;tadonn&eacute;es d&eacute;finies dans le fichier metadata.xml. Vous pouvez partager le fichier
SWC entre vos applications ou les distribuer &agrave; d’autres d&eacute;veloppeurs.
Personnalisation des mod&egrave;les de fichier
Flash Builder vous permet de personnaliser les informations par d&eacute;faut contenues dans les nouveaux fichiers MXML,
ActionScript et CSS. Il peut s’agir par exemple des variables d&eacute;finissant l’auteur et la date, des variables pour les balises
et les attributs d’ouverture et de fermeture ainsi que des variables pour diff&eacute;rentes d&eacute;clarations ActionScript, pour
diff&eacute;rents pr&eacute;fixes d’espace de noms et pour presque tout contenu que vous souhaitez inclure dans un mod&egrave;le de
fichier. Les mod&egrave;les de fichier sont utiles notamment pour sp&eacute;cifier des commentaires d’introduction et des
informations de copyright.
Le contenu d’un nouveau fichier est sp&eacute;cifi&eacute; dans un mod&egrave;le de fichier accessible &agrave; partir de Pr&eacute;f&eacute;rences &gt; Flash
Builder &gt; Mod&egrave;les de fichier. Des mod&egrave;les sont disponibles pour les types de fichier suivants.
Derni&egrave;re mise &agrave; jour le 10/11/2011
63
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
ActionScript
Fichier ActionScript
Classe ActionScript
Interface ActionScript
Composant habillable ActionScript
MXML
Application Web MXML
Application d’ordinateur MXML
Composant MXML
Module MXML
Habillage MXML
Rendu d’&eacute;l&eacute;ment pour composants Spark
Rendu d’&eacute;l&eacute;ment pour composants MX
Rendu d’&eacute;l&eacute;ment pour composant MX DataGrid
Rendu d’&eacute;l&eacute;ment pour composant AdvancedDataGrid
Rendu d’&eacute;l&eacute;ment pour composant MX Tree
FlexUnit
Classe TestCase FlexUnit
Classe TestSuite FlexUnit
Classe TestCase FlexUnit4
Classe TestSuite FlexUnit4
CSS
Fichier CSS
Une fois modifi&eacute;, un mod&egrave;le peut &ecirc;tre export&eacute; afin de pouvoir &ecirc;tre partag&eacute; avec les autres membres de votre &eacute;quipe.
Modification d’un mod&egrave;le de fichier
1 S&eacute;lectionnez Pr&eacute;f&eacute;rences &gt; Flash Builder &gt; Mod&egrave;les de fichier.
2 D&eacute;veloppez les types de fichier et s&eacute;lectionnez le mod&egrave;le que vous souhaitez modifier.
3 Cliquez sur Editer et modifiez le mod&egrave;le.
Vous pouvez saisir les donn&eacute;es directement dans l’&eacute;diteur Mod&egrave;le ou s&eacute;lectionner Variables afin d’ins&eacute;rer des
donn&eacute;es pr&eacute;d&eacute;finies dans le mod&egrave;le.
4 Cliquez sur OK pour enregistrer les modifications.
Les modifications sont appliqu&eacute;es aux nouveaux fichiers.
Exportation et importation de mod&egrave;les de fichier
1 S&eacute;lectionnez Pr&eacute;f&eacute;rences &gt; Flash Builder &gt; Mod&egrave;les de fichier.
2 D&eacute;veloppez les types de fichier et s&eacute;lectionnez un mod&egrave;le.
3 Cliquez sur Exporter pour exporter le mod&egrave;le vers un syst&egrave;me de fichiers ou Importer pour importer un mod&egrave;le
pr&eacute;c&eacute;demment export&eacute;.
Les mod&egrave;les sont export&eacute;s dans des fichiers XML.
Derni&egrave;re mise &agrave; jour le 10/11/2011
64
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Restauration des valeurs par d&eacute;faut
Remarque : le bouton Restaurer les valeurs par d&eacute;faut r&eacute;tablit les valeurs par d&eacute;faut de tous les mod&egrave;les de fichier. Vous
ne pouvez pas restaurer les valeurs par d&eacute;faut d’un seul mod&egrave;le.
❖ Pour restaurer les mod&egrave;les par d&eacute;faut, ouvrez la fen&ecirc;tre Pr&eacute;f&eacute;rences &gt; Flash Builder &gt; Mod&egrave;les de fichier et
s&eacute;lectionnez Restaurer les valeurs par d&eacute;faut.
Derni&egrave;re mise &agrave; jour le 10/11/2011
65
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Variables des mod&egrave;les
Variables des mod&egrave;les pour tous les types de fichiers
Variable
Description
Exemple
${date}
Date actuelle
15 f&eacute;vrier 2009
${year}
Ann&eacute;e actuelle
2009
${time}
Heure actuelle
15h15
${file_name}
Nom du fichier cr&eacute;&eacute;
HelloWorld.mxml
${project_name}
Nom du projet Flex ou ActionScript
Hello_World_Project
${user}
Nom d’utilisateur de l’auteur
jdoe
$$
Symbole du dollar
$
${dollar}
Variables des mod&egrave;les pour les fichiers MXML
Variable
Description
Exemple
${application}
Sp&eacute;cifient les noms des balises de
l’application, du composant ou du module
MXML.
Les balises suivantes :
${component}
${module}
Pour une application Web, ${application}
s’&eacute;tend &agrave; &laquo; Application &raquo;.
Pour une application d’ordinateur,
${application} s’&eacute;tend &agrave;
&laquo; WindowedApplication &raquo;.
${component} s’&eacute;tend &agrave; &laquo; Component &raquo;.
${module} s’&eacute;tend &agrave; &laquo; Module &raquo;.
Ces balises permettent g&eacute;n&eacute;ralement de
positionner les balises d’ouverture et de
fermeture d’un fichier.
&lt;${application}
${xmlns}${wizard_attributes}${min_size}&gt;
${wizard_tags}
&lt;/${application}&gt;
s’&eacute;tendent &agrave; :
&lt;s:Application
xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;
xmlns:s=&quot;library://ns.adobe.com/flex/spark
&quot;
xmlns:mx=&quot;library://ns.adobe.com/flex/halo
&quot; minWidth=&quot;1024&quot; minHeight=&quot;768&quot;&gt;
&lt;s:layout&gt;
&lt;s:BasicLayout/&gt;
&lt;/s:layout&gt;
&lt;/s:Application&gt;
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
${xml_tag}
Version XML
${xmlns}
Correspond &agrave; la d&eacute;finition d’espace de noms Pour un projet SDK Flex 4 :
en fonction du type de SDK Flex du projet et
du pr&eacute;fixe d’espace de noms d&eacute;fini dans les xmlns=&quot;http://ns.adobe.com/mxml/2009&quot;
Pr&eacute;f&eacute;rences.
${min_size}
Taille minimale d’une application Web
MXML.
${ns_prefix}
Pr&eacute;fixe d’espace de noms pour le SDK Flex du Pour Flex 3 : mx:
projet.
Pour Flex 4 : fx:
Vous ne pouvez pas modifier les valeurs par
d&eacute;faut de cette variable.
minWidth=&quot;1024&quot; minHeight=&quot;768&quot;
Derni&egrave;re mise &agrave; jour le 10/11/2011
66
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Variable
Description
Exemple
${wizard_attributes}
Sp&eacute;cifie la position des attributs d&eacute;finis par
l’assistant Nouveau Fichier.
Pour une nouvelle application Web :
${application} ${xmlns}${wizard_attributes}&gt;
s’&eacute;tendent &agrave; :
&lt;Application xmlns=&quot;http://ns.adobe.com/mxml/2009&quot;
layout=&quot;vertical&quot;&gt;
${wizard_tags}
Sp&eacute;cifie la propri&eacute;t&eacute; de pr&eacute;sentation des
conteneurs d&eacute;finis par l’assistant Nouveau
Fichier.
Pour une nouvelle application bas&eacute;e sur le SDK Flex 4 :
&lt;s:layout&gt;
&lt;s:BasicLayout/&gt;
&lt;/s:layout&gt;
${fx}
Pr&eacute;fixe pour l’espace de noms du document
de langage MXML 2009. Le pr&eacute;fixe est d&eacute;fini
dans le document MXML.
Lorsque le mod&egrave;le de balise de biblioth&egrave;que suivant
appara&icirc;t dans un document MXML :
&lt;${fx}Library&gt;
&lt;${fx}Definition id=&quot;${def}&quot;&gt;
${cursor}
&lt;/${fx}Definition&gt;
&lt;/${fx}Library&gt;
Une balise de biblioth&egrave;que est cr&eacute;&eacute;e comme suit :
&lt;fxLibrary&gt; &lt;fxDefinition id=&quot;def&quot;&gt;
&lt;/fxDefinition&gt; &lt;/fxLibrary&gt;
Derni&egrave;re mise &agrave; jour le 10/11/2011
67
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Variable
Description
Exemple
${mx}
Pr&eacute;fixe pour l’espace de noms du document
MX. Le pr&eacute;fixe est d&eacute;fini dans le document
MXML.
Lorsque vous utilisez le mod&egrave;le Combobox suivant dans le
contexte des composants MX :
&lt;${mx}ComboBox id=&quot;${comboBox}&quot;
rowCount=&quot;${rowCount:values(5)}&quot;
dataProvider=&quot;${dataProvider}&quot;/&gt;
${cursor}
Un &eacute;l&eacute;ment Combobox est cr&eacute;&eacute; comme suit :
&lt;mx:ComboBox id=&quot;comboBox&quot; rowCount=&quot;5&quot;
dataProvider=&quot;dataProvider&quot;/&gt;
${s}
Pr&eacute;fixe pour l’espace de noms du document
Spark.
Lorsque vous utilisez le mod&egrave;le Spark Button suivant dans
le contexte des composants Spark :
&lt;${s}Button id=&quot;${btn}&quot;
label=&quot;${myButton}&quot;
click=&quot;${onClick}(${event})&quot;/&gt;
${cursor}
Un bouton Spark est cr&eacute;&eacute; comme suit :
&lt;s:Button id=&quot;btn&quot;
label=&quot;myButton&quot;
click=&quot;onClick(event)&quot;/&gt;
${tag}
Nom complet de balise pour les composants Lorsque vous utilisez le mod&egrave;le List dans le contexte
MX du projet.
MXML :
&lt;${list:tag(mx.controls.List)}
id=&quot;${myList}&quot;&gt;
&lt;${dp:tag(dataProvider)}&gt;
&lt;${arraycollection:tag(mx.collections.Arra
yCollection)}&gt;
${cursor}
&lt;/${arraycollection}&gt;
&lt;/${dp}&gt;
&lt;/${list}&gt;
Une liste est cr&eacute;&eacute;e comme suit :
&lt;s:List id=&quot;myList&quot;&gt;
&lt;s:dataProvider&gt;
&lt;s:ArrayCollection&gt;
&lt;/s:ArrayCollection&gt;
&lt;/s:dataProvider&gt;
&lt;/s:List&gt;
Derni&egrave;re mise &agrave; jour le 10/11/2011
68
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Variables des mod&egrave;les pour les fichiers ActionScript
Variable
Description
Exemple
${package_declaration}
G&eacute;n&egrave;re la d&eacute;claration du package.
Pour un fichier du package com/samples, g&eacute;n&egrave;re :
package com.samples
${import_declaration}
${interface_declaration}
G&eacute;n&egrave;re les d&eacute;clarations d’importation
requises pour une nouvelle classe ou
interface ActionScript.
Pour une sous-classe de TextBox, g&eacute;n&egrave;re :
G&eacute;n&egrave;re la d&eacute;claration d’interface pour une
nouvelle interface ActionScript.
Pour une nouvelle interface qui &eacute;tend l’interface IButton,
g&eacute;n&egrave;re :
import flex.graphics.TextBox;
public interface IMyButton extends IButton
${class_declaration}
${class_body}
G&eacute;n&egrave;re la d&eacute;claration de classe pour une
nouvelle classe ActionScript.
Pour une nouvelle sous-classe de CheckBox, g&eacute;n&egrave;re :
public class MyCheckBox extends CheckBox
G&eacute;n&egrave;re toutes les instructions requises pour Pour une nouvelle sous-classe de Button impl&eacute;mentant
une nouvelle classe.
l’interface IBorder, g&eacute;n&egrave;re ce qui suit pour le corps de la
classe :
public function MyButton() {
public function get
borderMetrics():EdgeMetrics {
null; }
${interface_name}
${class_name}
${package_name}
return
Sp&eacute;cifie le nom de l’interface, de la classe ou Par exemple, la sp&eacute;cification de mod&egrave;le :
du package.
/*
Cette variable est utilis&eacute;e g&eacute;n&eacute;ralement lors
de la cr&eacute;ation de commentaires.
Indique la valeur d’un tableau.
* ${class_name} implements. . .
*/
g&eacute;n&egrave;re le code :
/*
${array}
super(); }
* MyButton implements. . .
*/
Le mod&egrave;le Fore suivant
for each (var ${index}:${type} in ${array})
{
${line_selection}
${cursor}
}
r&eacute;alise une it&eacute;ration sur la valeur d’un tableau &agrave; l’aide
d’une &eacute;num&eacute;ration comme suit :
for each (var i:type in array)
{
}
${enclosing_method}
Indique le nom de la m&eacute;thode englobante.
Le mod&egrave;le traceMethod effectue le suivi de la m&eacute;thode
comme suit :
trace(&quot;${enclosing_type}.${enclosing_metho
d}
${enclosing_method_arguments})&quot;);
${enclosing_package}
Indique le nom du package, tel que &laquo; xx.yy &raquo;
de &laquo; xx.yy.class &raquo;.
Le mod&egrave;le package cr&eacute;e un package comme suit :
package ${enclosing_package}
{
/**
* @author ${user}
*/
class ${enclosing_type}
{
${cursor}
}
}
Derni&egrave;re mise &agrave; jour le 10/11/2011
69
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Variable
Description
Exemple
${enclosing_type}
Indique le nom du type, tel que &laquo; class &raquo; de
&laquo; xx.yy.class &raquo;.
Le mod&egrave;le package cr&eacute;e un package indiquant le nom
de classe comme suit :
package ${enclosing_package}
{
/**
* @author ${user}
*/
class ${enclosing_type}
{
${cursor}
}
}
${field}
Indique les variables de classe.
Le mod&egrave;le do cr&eacute;e la boucle &laquo; do-while &raquo; comme suit :
do
{
${line_selection}
${cursor}
} while
(${condition:local_var(Boolean)});
${local_var}
Sp&eacute;cifie la variable locale qui est visible dans Le mod&egrave;le if cr&eacute;e une instruction if comme suit :
le bloc.
if (${condition:local_var(Boolean)})
{
${cursor}
}
${var}
Sp&eacute;cifie toutes les variables visibles.
Le mod&egrave;le fori r&eacute;alise une it&eacute;ration sur la valeur d’un
tableau comme suit :
for (var ${index}:int = 0; ${index} &lt;
${array}.length; ${index}++)
{
${cursor}
}
Variables des mod&egrave;les pour les fichiers CSS
Variable
Description
Exemple
${css_namespaces}
D&eacute;finit les espaces de noms pour les
s&eacute;lecteurs de style Spark et Halo.
Valeurs par d&eacute;faut pour Flex 3 :
&quot;&quot;
(Dans Flex 3, les d&eacute;clarations d’espace de noms ne sont
pas requises dans les fichiers CSS).
Valeurs par d&eacute;faut pour Flex 4 :
@namespace s
&quot;library://ns.adobe.com/flex/spark&quot;;
@namespace mx
&quot;library://ns.adobe.com/flex/halo&quot;;
Exemples de fichiers de mod&egrave;le
Les codes suivants illustrent un exemple de mod&egrave;le de fichier de composant MXML, suivi par un nouveau fichier de
composant MXML g&eacute;n&eacute;r&eacute; &agrave; partir du mod&egrave;le.
Derni&egrave;re mise &agrave; jour le 10/11/2011
70
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Exemple de mod&egrave;le pour un fichier de composant MXML
${xml_tag}
&lt;!-* ADOBE SYSTEMS Confidential
*
* Copyright ${year}. All rights reserved.
*
* ${user}
* ${project_name}
* Created ${date}
*
--&gt;
&lt;${component} ${xmlns}${wizard_attributes}&gt;
${wizard_tags}
&lt;${ns_prefix}Script&gt;
&lt;![CDATA[
]]&gt;
&lt;/${ns_prefix}Script&gt;
&lt;/${component}&gt;
Nouveau fichier de composant MXML g&eacute;n&eacute;r&eacute; &agrave; partir du mod&egrave;le d’exemple
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;!-* ADOBE SYSTEMS Confidential
*
* Copyright 2009. All rights reserved.
*
* jdoe
* FileTemplates
* Created Jul 13, 2009
*
--&gt;
&lt;s:Group xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;
xmlns:s=&quot;library://ns.adobe.com/flex/spark&quot;
xmlns:mx=&quot;library://ns.adobe.com/flex/halo&quot; width=&quot;400&quot; height=&quot;300&quot;&gt;
&lt;s:layout&gt;
&lt;s:BasicLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
]]&gt;
&lt;/fx:Script&gt;
&lt;/s:Group&gt;
Derni&egrave;re mise &agrave; jour le 10/11/2011
71
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
G&eacute;n&eacute;ration &agrave; partir de l’utilisation
L’Assistant rapide permet de g&eacute;n&eacute;rer du code de remplacement pour une m&eacute;thode, une variable ou une classe non
d&eacute;finie dans le code. Le code de remplacement g&eacute;n&eacute;r&eacute; peut &ecirc;tre utilis&eacute; comme espace r&eacute;serv&eacute; pour le code que vous
souhaitez impl&eacute;menter plus tard sans rendre votre code incompatible. Pour personnaliser le code de remplacement
pr&eacute;d&eacute;fini g&eacute;n&eacute;r&eacute; par Flash Builder, voir &laquo; Mod&egrave;les de code &raquo; &agrave; la page 56.
Pour appeler l’Assistant rapide, vous pouvez utiliser le raccourci clavier Ctrl+1(Windows) ou Commande+1 (Mac OS).
Utilisez l’Assistant rapide pour g&eacute;n&eacute;rer un code de remplacement dans la classe appropri&eacute;e ou un bloc de script MXML
en s&eacute;lectionnant une des actions suivantes :
G&eacute;n&eacute;rer la m&eacute;thode : cr&eacute;e une m&eacute;thode
Par exemple, si vous avez le code suivant :
private function genFunc():void
{
bar();
}
Placez votre curseur &agrave; n’importe quel endroit sur la ligne de code contenant bar();, puis appuyez sur Ctrl+1. Une
option permettant de cr&eacute;er une fonction appara&icirc;t. Lorsque vous s&eacute;lectionnez cette option, une nouvelle fonction est
g&eacute;n&eacute;r&eacute;e comme suit :
private function bar():void{}
Vous pouvez &eacute;galement g&eacute;n&eacute;rer une fonction pour une fonction non d&eacute;finie dans une classe r&eacute;f&eacute;renc&eacute;e. Par exemple,
si vous avez une fonction non d&eacute;finie &laquo; setValue() &raquo; dans la classe r&eacute;f&eacute;renc&eacute;e &laquo; MyClass &raquo;, comme suit :
MyClass cls = new MyClass();
cls.setValue(5);
Placez votre curseur &agrave; n’importe quel endroit sur la ligne de code contenant &laquo; setValue &raquo;, puis appuyez sur Ctrl+1. Une
option permettant de cr&eacute;er une fonction s’affiche. Lorsque vous s&eacute;lectionnez cette option, une nouvelle fonction
setValue(int) est g&eacute;n&eacute;r&eacute;e dans la classe &laquo; MyClass &raquo; r&eacute;f&eacute;renc&eacute;e, comme suit :
private function setValue(param0:int):void
{
// TODO Auto Generated method stub
}
G&eacute;n&eacute;rer une variable : cr&eacute;e une propri&eacute;t&eacute;
Par exemple, si dans votre code, i est une variable non d&eacute;finie, comme suit :
public function MyClass
{
i;
}
Placez votre curseur &agrave; n’importe quel endroit sur la ligne de code contenant i;, puis appuyez sur Ctrl+1. Des options
permettant de cr&eacute;er une variable locale ou un champ apparaissent.
S&eacute;lectionner l’option qui permet de cr&eacute;er une variable locale a pour effet de cr&eacute;er la variable comme suit :
var i:Object;
S&eacute;lectionner l’option qui permet de cr&eacute;er un champ a pour effet de cr&eacute;er une variable au niveau de la classe, comme
suit :
Derni&egrave;re mise &agrave; jour le 10/11/2011
72
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
private var i:Object;
Vous pouvez &eacute;galement g&eacute;n&eacute;rer une propri&eacute;t&eacute; pour une variable non d&eacute;finie dans une classe r&eacute;f&eacute;renc&eacute;e. Par exemple,
si vous avez une variable non d&eacute;finie &laquo; aValue &raquo; dans la classe r&eacute;f&eacute;renc&eacute;e &laquo; MyClass &raquo;, comme suit :
MyClass cls = new MyClass();
cls.aValue = &quot;str&quot;;
Placez votre curseur &agrave; n’importe quel endroit sur la ligne de code contenant aValue, appuyez sur Ctrl+1, puis
s&eacute;lectionnez Cr&eacute;er la variable de champ. Une propri&eacute;t&eacute; aValue de type cha&icirc;ne est g&eacute;n&eacute;r&eacute;e dans la classe &laquo; MyClass &raquo;
r&eacute;f&eacute;renc&eacute;e, comme suit :
private var aValue:String;
G&eacute;n&eacute;rer une classe/interface : cr&eacute;e une classe ou une interface
Par exemple, si dans votre code, Foo est une variable non d&eacute;finie, comme suit :
public function myFunction():Foo;
{
}
Placez votre curseur &agrave; n’importe quel endroit sur la ligne de code contenant Foo;, puis appuyez sur Ctrl+1. Des options
permettant de cr&eacute;er une classe ou une interface nomm&eacute;e Foo apparaissent. S&eacute;lectionnez une de ces options pour ouvrir
l’assistant de cr&eacute;ation d’une classe ActionScript ou l’assistant de cr&eacute;ation d’une interface ActionScript. Entrez les
d&eacute;tails n&eacute;cessaires et cliquez sur Terminer. Apr&egrave;s avoir cliqu&eacute; sur Terminer, une classe ou interface nomm&eacute;e Foo est
cr&eacute;&eacute;e.
Lorsque vous g&eacute;n&eacute;rez une nouvelle classe, vous pouvez cr&eacute;er une classe ActionScript avec un constructeur param&eacute;tr&eacute;.
Par exemple, si votre code ressemble au suivant :
Private function func(): void {
New NewClass(&quot;str1&quot;);
}
Placez votre curseur &agrave; n’importe quel endroit sur la ligne de code contenant NewClass(&quot;str1&quot;), appuyez sur Ctrl+1, puis
s&eacute;lectionnez Cr&eacute;er la classe. Une classe ActionScript avec un constructeur param&eacute;tr&eacute; est cr&eacute;&eacute;e. Toutefois, si vous
sp&eacute;cifiez une superclasse pour la classe ActionScript, aucun constructeur param&eacute;tr&eacute; n’est g&eacute;n&eacute;r&eacute;.
Paul Robertson, professionnel de la communaut&eacute; Adobe, a publi&eacute; sur son blog un article concernant l’utilisation de
Quick Assist pour les classes externes et les interfaces.
G&eacute;n&eacute;rer un gestionnaire d’&eacute;v&eacute;nement : g&eacute;n&egrave;re des fonctions de gestionnaire d’&eacute;v&eacute;nement
Par exemple, si votre code ressemble au suivant :
public function MyClass
{
Var button:Button = new Button();
button.addEventListener(DragEvent.DRAG,dragHandlerFunction);
}
Placez votre curseur &agrave; n’importe quel endroit sur la ligne de code contenant dragHandlerFunction, puis appuyez sur
Ctrl+1. S&eacute;lectionnez ensuite l’option de l’Assistant rapide permettant de cr&eacute;er le gestionnaire d’&eacute;v&eacute;nement. La fonction
du gestionnaire d’&eacute;v&eacute;nement est cr&eacute;&eacute;e comme suit :
protected function dragHandlerFunction (event:DragEvent):void
{
}
G&eacute;n&eacute;rer l’instruction d’importation de l’utilisation : cr&eacute;er une instruction d’importation
Derni&egrave;re mise &agrave; jour le 10/11/2011
73
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Par exemple, si vous avez un code dans lequel le type de variable Button n’est pas d&eacute;fini, comme suit :
&lt;fx:Script&gt;
&lt;![CDATA[
var btn:Button;
]]&gt;
&lt;/fx:Script&gt;
Placez votre curseur &agrave; n’importe quel endroit sur la ligne de code contenant var btn:Button, puis appuyez sur
Ctrl+1. Une option d’importation de Button appara&icirc;t si une classe nomm&eacute;e Button est disponible dans le projet.
L’instruction d’importation est cr&eacute;&eacute;e comme suit :
import spark.components.Button;
Vous pouvez g&eacute;n&eacute;rer des instructions d’importation pour les arguments de fonction, les types de retour de fonction, etc.
G&eacute;n&eacute;ration de fonctions d’accesseur get ou set
Les fonctions des accesseurs get et set permettent de faire en sorte que les propri&eacute;t&eacute;s d’une classe restent priv&eacute;es pour
cette classe. Les utilisateurs peuvent acc&eacute;der &agrave; ces propri&eacute;t&eacute;s de la m&ecirc;me mani&egrave;re qu’ils acc&egrave;dent &agrave; une variable de
classe (au lieu d’appeler une m&eacute;thode de classe).
Pour plus d’informations sur les m&eacute;thodes d’accesseur get et set, voir M&eacute;thodes d’accesseur get et set dans Guide de
r&eacute;f&eacute;rence du langage ActionScript 3.0 pour la plateforme Adobe Flash.
Flash Builder peut g&eacute;n&eacute;rer des fonctions d’accesseur get et set ActionScript pour les variables de classe. Vous pouvez
s&eacute;lectionner une propri&eacute;t&eacute; liable et g&eacute;n&eacute;rer des fonctions d’accesseur get et set pour cette propri&eacute;t&eacute;. Vous pouvez
&eacute;galement sp&eacute;cifier un nom d’&eacute;v&eacute;nement personnalis&eacute; pendant la g&eacute;n&eacute;ration du code.
Lorsque vous g&eacute;n&eacute;rez des accesseurs get et set, Flash Builder propose les options suivantes :
• Rendre la variable de classe priv&eacute;e.
En r&egrave;gle g&eacute;n&eacute;rale, les variables de classe ont un acc&egrave;s priv&eacute;.
• Renommer la variable de classe, en sugg&eacute;rant un trait de soulignement au d&eacute;but du nom.
Par convention, les variables de classe priv&eacute;e ont un trait de soulignement au d&eacute;but du nom.
• Renommer les fonctions d’accesseur.
• Sp&eacute;cifier une propri&eacute;t&eacute; liable et un nom d’&eacute;v&eacute;nement personnalis&eacute;.
Lorsque vous sp&eacute;cifiez une propri&eacute;t&eacute; liable, une balise [Bindable] est d&eacute;finie au-dessus de la fonction d’accesseur
g&eacute;n&eacute;r&eacute;e dans le code g&eacute;n&eacute;r&eacute;.
• Pr&eacute;ciser si vous voulez g&eacute;n&eacute;rer des fonctions d’accesseur get et set.
• Sp&eacute;cifier la valeur de l’espace de noms pour la fonction d’accesseur.
• Sp&eacute;cifier le placement de la fonction d’accesseur dans l’un des emplacements suivants :
• Avant la premi&egrave;re m&eacute;thode
• Apr&egrave;s la derni&egrave;re m&eacute;thode
• Avant les d&eacute;clarations de variable
• Afficher un aper&ccedil;u du code qui est g&eacute;n&eacute;r&eacute;.
Pour personnaliser le code pr&eacute;d&eacute;fini g&eacute;n&eacute;r&eacute; par Flash Builder, voir &laquo; Mod&egrave;les de code &raquo; &agrave; la page 56.
Derni&egrave;re mise &agrave; jour le 10/11/2011
74
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
G&eacute;n&eacute;ration de fonctions d’accesseur get ou set
1 Ouvrez un fichier ActionScript dans l’&eacute;diteur de source, puis placez le curseur sur une variable de classe.
2 S&eacute;lectionnez Source &gt; G&eacute;n&eacute;rer les m&eacute;thodes get/set dans le menu Flash Builder ou le menu contextuel.
3 Dans la bo&icirc;te de dialogue G&eacute;n&eacute;rer les m&eacute;thodes get/set, sp&eacute;cifiez les informations concernant les fonctions
d’accesseur puis cliquez sur OK.
Remarque : pour afficher le code qui est g&eacute;n&eacute;r&eacute;, s&eacute;lectionnez Aper&ccedil;u avant de cliquer sur OK.
V&eacute;rification de la syntaxe
Au cours de la r&eacute;daction de code, le compilateur Flash Builder identifie les erreurs de syntaxe et les signale pour vous
permettre de les corriger avant d’ex&eacute;cuter l’application. Les couleurs de la syntaxe peuvent &ecirc;tre personnalis&eacute;es.
Lorsqu’une erreur de syntaxe est d&eacute;tect&eacute;e dans le code, elle vous est signal&eacute;e de l’une des mani&egrave;res suivantes.
• Un indicateur d’erreur appara&icirc;t en regard de la ligne de code, ainsi que l’illustre l’exemple suivant.
• La vue Structure signale les erreurs par un point d’exclamation affich&eacute; dans les lignes de code concern&eacute;es, ainsi que
l’illustre l’exemple suivant.
• La vue Erreurs r&eacute;pertorie les erreurs en leur attribuant un symbole et en affichant le message correspondant.
Cliquez deux fois sur le message d’erreur pour localiser et mettre en &eacute;vidence la ligne de code dans l’&eacute;diteur, ainsi
que l’illustre l’exemple suivant.
Derni&egrave;re mise &agrave; jour le 10/11/2011
75
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Les erreurs de syntaxe du code sont d&eacute;tect&eacute;es au cours de la g&eacute;n&eacute;ration des projets. Si elles ne sont pas corrig&eacute;es avant
l’ex&eacute;cution de l’application, un message vous avertit de l’existence d’erreurs. En fonction de la nature et de la gravit&eacute;
des erreurs, il est possible que l’application ne soit ex&eacute;cut&eacute;e correctement qu’apr&egrave;s correction de ces erreurs.
Application des pr&eacute;f&eacute;rences de couleurs pour la syntaxe
❖ Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Couleurs pour la syntaxe.
Les couleurs par d&eacute;faut peuvent &eacute;galement &ecirc;tre d&eacute;finies dans les pages Editeurs de texte, Pr&eacute;f&eacute;rences des couleurs
et polices (voir Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral &gt; Apparence &gt; Couleurs et polices ; voir &eacute;galement Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral &gt;
Editeurs &gt; Editeurs de texte).
Mise en surbrillance des erreurs de r&eacute;f&eacute;rence non
identifi&eacute;e
Lorsque vous saisissez du code ActionScript, Flash Builder g&eacute;n&egrave;re automatiquement des annotations d’erreur pour les
identifiants non d&eacute;finis de votre code. Les annotations d’erreur sont indiqu&eacute;es par .
Vous pouvez rapidement identifier les variables et m&eacute;thodes non d&eacute;finies avant d’enregistrer le fichier et que le
compilateur ne g&eacute;n&egrave;re l’erreur.
La mise en surbrillance des erreurs de r&eacute;f&eacute;rence non identifi&eacute;es vous permet &eacute;galement d’identifier les endroits dans
le code o&ugrave; vous pouvez g&eacute;n&eacute;rer du code de remplacement pour une m&eacute;thode, une variable ou une classe non d&eacute;finie.
Pour plus d’informations, voir &laquo; G&eacute;n&eacute;ration &agrave; partir de l’utilisation &raquo; &agrave; la page 71.
Flash Builder active par d&eacute;faut la mise en surbrillance des erreurs de r&eacute;f&eacute;rence non identifi&eacute;e. Pour la d&eacute;sactiver,
s&eacute;lectionnez Flash Builder &gt; Editeurs dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, puis d&eacute;s&eacute;lectionnez Signaler les erreurs au
fur et &agrave; mesure de la saisie.
Recherche de r&eacute;f&eacute;rences et restructuration du code
Flash Builder comporte des fonctions de recherche avanc&eacute;es plus puissantes que les fonctions de
recherche/remplacement. Afin de faciliter la compr&eacute;hension de la mani&egrave;re dont les fonctions, variables et autres
identifiants sont utilis&eacute;s, Flash Builder permet de rechercher et de rep&eacute;rer les r&eacute;f&eacute;rences ou les d&eacute;clarations vers les
identifiants dans les fichiers ActionScript ou MXML, les projets ou les espaces de travail. Vous pouvez utiliser la
restructuration pour renommer les identifiants suivants dans votre code et mettre &agrave; jour toutes les r&eacute;f&eacute;rences &agrave; ces
objets :
• Variables
• Fonctions
• Types (interface, classe)
• Accesseurs (get/set)
• Attributs
• M&eacute;tadonn&eacute;es en MXML (effets, &eacute;v&eacute;nements, styles)
Marquage des r&eacute;f&eacute;rences
1 En mode Source, cliquez sur le bouton Marquer les occurrences de la barre d’outils.
Derni&egrave;re mise &agrave; jour le 10/11/2011
76
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
2 Dans l’&eacute;diteur, cliquez sur un identifiant. Toutes les instances sont marqu&eacute;es en fonction des param&egrave;tres des
Pr&eacute;f&eacute;rences.
Pour modifier l’apparence des r&eacute;f&eacute;rences marqu&eacute;es, dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez G&eacute;n&eacute;ral &gt;
Editeurs &gt; Editeurs de texte &gt; Annotations. Pour plus d’informations sur les marqueurs, voir &laquo; Utilisation de
marqueurs &raquo; &agrave; la page 83.
Recherche de toutes les r&eacute;f&eacute;rences et de toutes les d&eacute;clarations
1 En mode Source, cliquez sur un identifiant dans l’&eacute;diteur.
2 Dans le menu principal, s&eacute;lectionnez Rechercher &gt; R&eacute;f&eacute;rences ou Rechercher &gt; D&eacute;clarations. S&eacute;lectionnez ensuite
Fichier, Projet ou Espace de travail. Les r&eacute;sultats apparaissent dans la vue Recherche.
Restructuration du code
1 En mode Source, cliquez sur un identifiant dans l’&eacute;diteur.
2 Dans le menu principal, s&eacute;lectionnez Source &gt; Restructurer &gt; Renommer.
3 Entrez un nouveau nom.
Flash Builder v&eacute;rifie que les conditions pr&eacute;alables &agrave; la modification du nom sont r&eacute;unies et vous invite &agrave; confirmer
les probl&egrave;mes avant de proc&eacute;der &agrave; la modification du nom. Les conditions pr&eacute;alables &agrave; la modification du nom sont
les suivantes :
• Les r&eacute;f&eacute;rences situ&eacute;es dans des fichiers en lecture seule ne peuvent pas &ecirc;tre renomm&eacute;es.
• Tous les fichiers doivent avoir &eacute;t&eacute; sauvegard&eacute;s.
• Les projets pr&eacute;sentant des erreurs de g&eacute;n&eacute;ration provoquent l’affichage d’un avertissement.
• Le nouveau nom doit se trouver dans l’&eacute;tendue, d&eacute;termin&eacute;e par le type de l’&eacute;l&eacute;ment et son emplacement. Les
erreurs d’occultation de noms sont &eacute;galement signal&eacute;es.
• Le nouveau nom doit &ecirc;tre un identifiant valide.
• La r&eacute;f&eacute;rence d&eacute;finie dans un fichier SWC doit comprendre une connexion de la source.
4 Pour v&eacute;rifier la modification apport&eacute;e, cliquez sur Aper&ccedil;u pour visionner la source d’origine et la source
restructur&eacute;e, ou cliquez sur OK pour poursuivre la modification du code.
Derni&egrave;re mise &agrave; jour le 10/11/2011
77
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Restructuration dans les fichiers CSS
Lorsque vos fichiers CSS font r&eacute;f&eacute;rence &agrave; des fichiers ActionScript ou MXML et que vous renommez ou d&eacute;placez les
fichiers ActionScript ou MXML, Flash Builder actualise automatiquement les fichiers CSS avec des r&eacute;f&eacute;rences au
nouveau nom ou au nouvel emplacement. Vous pouvez v&eacute;rifier les modifications dans la bo&icirc;te de dialogue Aper&ccedil;u,
puis cliquer sur OK pour appliquer la modification &agrave; votre code.
Formatage, navigation et organisation du code
Les &eacute;diteurs Flash Builder offrent de nombreuses fonctions pour parcourir le code. Vous pouvez par exemple r&eacute;duire
ou d&eacute;velopper des blocs de code, ouvrir les sources de d&eacute;finitions de code ainsi que rechercher et ouvrir des types. La
navigation par code offre la possibilit&eacute; de s&eacute;lectionner un &eacute;l&eacute;ment de code (une r&eacute;f&eacute;rence &agrave; un composant personnalis&eacute;
d’un fichier d’application MXML, par exemple) et d’aller &agrave; la source de la d&eacute;finition du code, quel que soit son
emplacement dans le projet, espace de travail ou chemin.
Des blocs de plusieurs lignes peuvent &ecirc;tre r&eacute;duits et d&eacute;velopp&eacute;s afin de faciliter la navigation, l’affichage et la gestion
de documents pr&eacute;sentant un code complexe. Dans Flash Builder, ces deux op&eacute;rations sont d&eacute;sign&eacute;es par les termes de
d&eacute;veloppement et de r&eacute;duction d’instructions de code de plusieurs lignes.
Formatage et mise en retrait du code
Lorsque vous saisissez du code, Flash Builder ins&egrave;re automatiquement des lignes de code pour am&eacute;liorer la lisibilit&eacute;,
ajoute une couleur distinctive aux &eacute;l&eacute;ments de code et propose de nombreuses commandes de formatage rapide du
code que vous saisissez (ajout d’un commentaire de bloc, par exemple).
Pour changer le formatage par d&eacute;faut, dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez Flash Builder &gt; Code
MXML &gt; Formatage. Vous pouvez modifier l’ordre et le regroupement des attributs.
Lorsque vous collez du code MXML ou ActionScript dans l’&eacute;diteur de code, Flash Builder met automatiquement en
retrait le code en fonction de vos pr&eacute;f&eacute;rences. Vous pouvez &eacute;galement sp&eacute;cifier une mise en retrait pour un bloc de
code s&eacute;lectionn&eacute;.
Pour modifier les pr&eacute;f&eacute;rences de mise en retrait, dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez Flash Builder &gt;
Editeurs. Vous pouvez sp&eacute;cifier le type et la taille de retrait.
Derni&egrave;re mise &agrave; jour le 10/11/2011
78
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
D&eacute;finition, r&eacute;duction et d&eacute;veloppement des blocs de code
1 Dans l’&eacute;diteur, cliquez sur le symbole de r&eacute;duction (-) ou sur celui de d&eacute;veloppement (+) dans la marge de gauche.
La r&eacute;duction d’un bloc de code en masque toutes les lignes &agrave; l’exception de la premi&egrave;re.
D&eacute;veloppez le bloc de code pour en afficher &agrave; nouveau le contenu. Placez la souris sur le symbole de d&eacute;veloppement
(+) pour visionner l’ensemble du bloc dans une info-bulle.
2 La r&eacute;duction de code est activ&eacute;e par d&eacute;faut dans Flash Builder. Pour la d&eacute;sactiver, ouvrez la bo&icirc;te de dialogue
Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Editeurs. D&eacute;s&eacute;lectionnez ensuite l’option Activer la r&eacute;duction.
Utilisation de la vue Structure pour parcourir et examiner le code
La vue Structure appartient &agrave; la perspective D&eacute;veloppement Flash (voir &laquo; Perspective D&eacute;veloppement Flash &raquo; &agrave; la
page 8). Elle est donc disponible au cours de la modification du code et de la cr&eacute;ation de l’application. Cette vue permet
d’examiner et de parcourir plus facilement la structure des documents MXML, ActionScript et CSS.
Elle pr&eacute;sente trois modes : le mode Classe, le mode MXML et le mode CSS. En mode Classe, cette vue affiche la
structure du code (classes, variables des membres, fonctions, etc.). En mode MXML, elle affiche la structure MXML
(balises, composants, contr&ocirc;les, etc.). En mode CSS, elle affiche les s&eacute;lecteurs CSS et les propri&eacute;t&eacute;s imbriqu&eacute;es qu’ils
contiennent.
La s&eacute;lection d’un &eacute;l&eacute;ment dans la vue Structure permet de le localiser et de le mettre en &eacute;vidence dans l’&eacute;diteur,
facilitant ainsi consid&eacute;rablement la navigation &agrave; l’int&eacute;rieur du code.
Derni&egrave;re mise &agrave; jour le 10/11/2011
79
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Vue Structure en mode Classe
Lorsque vous &eacute;ditez un document ActionScript (ou un code ActionScript contenu dans un document MXML), la vue
Structure affiche la structure du code. Cette structure comporte les instructions d’importation, les packages, les classes,
les interfaces, les variables non contenues dans les fonctions et les fonctions. En revanche, elle ne contient aucune
m&eacute;tadonn&eacute;e, aucun commentaire, aucune d&eacute;claration d’espace de noms et aucun contenu de fonction.
Les nœuds et les &eacute;l&eacute;ments de l’arborescence de la vue Structure repr&eacute;sentent &agrave; la fois les diff&eacute;rents types d’&eacute;l&eacute;ments de
langage et leur visibilit&eacute;. Les ic&ocirc;nes rouges signalent par exemple des &eacute;l&eacute;ments priv&eacute;s ; les ic&ocirc;nes vertes signalent des
&eacute;l&eacute;ments publics ; les ic&ocirc;nes jaunes indiquent que l’&eacute;l&eacute;ment n’est ni priv&eacute;, ni public.
Barre d’outils de la vue Structure en mode Classe
En mode Classe, la barre d’outils de la vue Structure contient les commandes de tri et de filtrage, ainsi que l’illustre
l’exemple suivant :
Vue Structure en mode MXML
La vue Structure d’un document MXML en cours d’&eacute;dition contenant du code MXML et du code ActionScript
pr&eacute;sente les modes Classe et MXML.
En mode MXML, chaque &eacute;l&eacute;ment de la vue repr&eacute;sente une balise MXML. Les types de balise affich&eacute;s sont les suivants :
les composants, les contr&ocirc;les, les balises non visuelles (WebService ou State), les propri&eacute;t&eacute;s des composants
exprim&eacute;es sous forme de balises enfant (contraintes de pr&eacute;sentation, par exemple) et les balises de compilateur (Model,
Array et Script).
Derni&egrave;re mise &agrave; jour le 10/11/2011
80
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Le mode MXML de la vue Structure n’affiche aucun commentaire, aucune r&egrave;gle ou propri&eacute;t&eacute; CSS et aucune propri&eacute;t&eacute;
de composant exprim&eacute;e sous forme d’attribut (par opposition aux balises enfant qui sont affich&eacute;es).
Barre d’outils de la vue Structure en mode MXML
En mode MXML, la barre d’outils de la vue Structure contient des commandes suppl&eacute;mentaires permettant de
basculer de la vue MXML &agrave; la vue des classes.
Pour basculer entre les deux vues, s&eacute;lectionnez Afficher la vue MXML ou Afficher la vue des classes dans le menu de
la barre d’outils.
Utilisation de la vue Structure rapide de l’&eacute;diteur
Vous pouvez ouvrir la vue Structure rapide &agrave; partir des &eacute;diteurs ActionScript et MXML pour afficher la vue Structure
en mode Classe. La vue Structure rapide appara&icirc;t dans une fen&ecirc;tre contextuelle &agrave; l’int&eacute;rieur de l’&eacute;diteur et ne se
pr&eacute;sente donc pas sous forme de vue distincte. Elle permet de parcourir et d’examiner rapidement le code.
Son contenu est identique &agrave; celui du mode Classe, &agrave; ceci pr&egrave;s que la Structure rapide pr&eacute;sente une zone de saisie de
texte permettant de filtrer les &eacute;l&eacute;ments affich&eacute;s. Vous pouvez par exemple entrer le nom d’un &eacute;l&eacute;ment dans la vue
Structure rapide afin de limiter l’affichage aux &eacute;l&eacute;ments contenant les caract&egrave;res saisis.
Derni&egrave;re mise &agrave; jour le 10/11/2011
81
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
La vue Structure rapide ne contient pas les commandes permettant d’effectuer un tri alphab&eacute;tique des &eacute;l&eacute;ments ou de
les masquer.
De m&ecirc;me que dans la vue Structure, vous pouvez s&eacute;lectionner un &eacute;l&eacute;ment afin de le localiser et de le mettre en &eacute;vidence
dans l’&eacute;diteur.
Ouverture de la vue Structure rapide
❖ Ouvrez un document ActionScript ou MXML dans l’&eacute;diteur. Dans le menu Naviguer, s&eacute;lectionnez Structure
rapide.
Vous pouvez &eacute;galement utiliser le raccourci clavier Ctrl+O.
Fermeture de la vue Structure rapide
❖ L’acc&egrave;s &agrave; tout emplacement situ&eacute; en dehors de la vue Structure rapide conduit &agrave; la fermeture de cette derni&egrave;re. Elle
peut &eacute;galement &ecirc;tre ferm&eacute;e en appuyant sur la touche Echap.
Ouverture des d&eacute;finitions de code
Quelle que soit la complexit&eacute; des applications, les projets contiennent g&eacute;n&eacute;ralement de nombreuses ressources et
lignes de code. Afin de parcourir et d’examiner plus facilement les diff&eacute;rents &eacute;l&eacute;ments du code, vous pouvez ouvrir la
source d’une d&eacute;finition de code externe &agrave; partir de l’emplacement, dans le code, auquel il y est fait r&eacute;f&eacute;rence. Si vous
cr&eacute;ez par exemple un composant MXML personnalis&eacute; et l’importez dans l’application MXML, vous pouvez
s&eacute;lectionner la r&eacute;f&eacute;rence au composant MXML et ouvrir le fichier source dans l’&eacute;diteur.
Ouverture de la source d’une d&eacute;finition de code
1 Dans l’&eacute;diteur, s&eacute;lectionnez la r&eacute;f&eacute;rence du code.
2 Dans le menu Naviguer, s&eacute;lectionnez Acc&eacute;der &agrave; la d&eacute;finition.
Vous pouvez utiliser le raccourci clavier F3.
Le fichier source contenant la d&eacute;finition du code s’ouvre dans l’&eacute;diteur.
Flash Builder prend &eacute;galement en charge la navigation dans le code par hyperliens.
Ouverture de la source d’une d&eacute;finition de code en utilisant la navigation par hyperliens
1 Localisez la r&eacute;f&eacute;rence du code dans l’&eacute;diteur.
2 Appuyez sur la touche Ctrl (Windows) ou la touche Commande (Mac OS) et maintenez-la enfonc&eacute;e, puis
positionnez le curseur de la souris sur la r&eacute;f&eacute;rence du code pour afficher l’hyperlien.
3 Pour atteindre la r&eacute;f&eacute;rence du code, cliquez sur l’hyperlien.
Navigation et affichage des classes
La bo&icirc;te de dialogue Ouvrir un type permet de parcourir toutes les classes disponibles (y compris les classes de la
structure Flex) du projet. Dans la bo&icirc;te de dialogue Ouvrir un type, s&eacute;lectionnez une classe pour afficher
l’impl&eacute;mentation.
Derni&egrave;re mise &agrave; jour le 10/11/2011
82
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Bo&icirc;te de dialogue Ouvrir un type
La bo&icirc;te de dialogue Ouvrir un type permet &eacute;galement de s&eacute;lectionner des classes comme classe de base pour une
nouvelle classe ActionScript ou un nouveau composant MXML.
La bo&icirc;te de dialogue Ouvrir un type vous permet de filtrer les classes affich&eacute;es en fonction du texte et des caract&egrave;res
g&eacute;n&eacute;riques que vous sp&eacute;cifiez. La bo&icirc;te de dialogue fait appel &agrave; diff&eacute;rentes couleurs pour signaler les types
recommand&eacute;s et les types exclus. Les types recommand&eacute;s sont affich&eacute;s en gris. Les types exclus sont affich&eacute;s en
marron.
Les types recommand&eacute;s sont les classes disponibles dans l’espace de noms par d&eacute;faut d’un projet. Dans certains
contextes par exemple, seuls les composants Spark sont autoris&eacute;s. D’autres contextes autorisent les composants Spark
et les composants Halo.
Les types exclus sont les classes qui ne sont pas disponibles dans l’espace de noms par d&eacute;faut pour un projet.
Ouverture de la bo&icirc;te de dialogue Ouvrir un type
• (Parcourir les classes) Pour parcourir les classes et visionner leur impl&eacute;mentation :
1 Dans le menu Flash Builder, s&eacute;lectionnez Navigation &gt; Ouvrir un type.
2 (Facultatif) Saisissez du texte ou s&eacute;lectionnez des filtres pour modifier les classes visibles dans la liste.
3 S&eacute;lectionnez une classe pour en afficher le code source.
Vous ne pouvez pas modifier le code source des classes dans la structure Flex.
• (Nouvelles classes ActionScript) Pour s&eacute;lectionner une classe de base pour une nouvelle classe ActionScript :
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Classe ActionScript.
2 En regard du champ Superclasse, cliquez sur Parcourir.
3 (Facultatif) Saisissez du texte ou s&eacute;lectionnez des filtres pour modifier les classes visibles dans la liste.
4 S&eacute;lectionnez une classe de base dans la liste.
• (Nouveaux composants MXML) Pour s&eacute;lectionner un composant de base pour un nouveau composant MXML :
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Composant MXML.
2 Dans la liste des projets de l’espace de travail, s&eacute;lectionnez un projet pour un nouveau composant MXML et
sp&eacute;cifiez un nom pour le fichier.
Les composants de base disponibles varient en fonction des espaces de noms configur&eacute;s pour un projet.
Derni&egrave;re mise &agrave; jour le 10/11/2011
83
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
3 En regard du champ Bas&eacute; sur, cliquez sur Parcourir.
Remarque : effacez ou modifiez la classe de base par d&eacute;faut r&eacute;pertori&eacute;e dans le champ Bas&eacute; sur pour &eacute;largir vos
choix.
4 (Facultatif) Saisissez du texte ou s&eacute;lectionnez des filtres pour modifier les classes visibles dans la liste.
5 S&eacute;lectionnez un composant de base dans la liste.
Affichage des num&eacute;ros de ligne
Vous pouvez ajouter des num&eacute;ros de ligne dans l’&eacute;diteur afin de faciliter la lecture et la consultation du code.
❖ Dans le menu contextuel de la marge de l’&eacute;diteur, s&eacute;lectionnez Afficher les num&eacute;ros de ligne.
La marge de l’&eacute;diteur se situe entre la barre de rep&egrave;re et l’&eacute;diteur.
Utilisation de marqueurs
Les marqueurs sont des raccourcis vers les lignes de code d’un document, vers un document ou vers un dossier. Ils
repr&eacute;sentent des t&acirc;ches, des signets et des probl&egrave;mes. Ils sont affich&eacute;s et peuvent &ecirc;tre g&eacute;r&eacute;s. La s&eacute;lection de marqueurs
provoque l’ouverture du document associ&eacute; dans l’&eacute;diteur et met &eacute;ventuellement en &eacute;vidence la ligne concern&eacute;e du
code.
Pour mettre &agrave; jour les marqueurs de probl&egrave;mes dans Flash Builder, vous devez enregistrer le fichier. Seuls les fichiers
auxquels l’application fait r&eacute;f&eacute;rence sont v&eacute;rifi&eacute;s. La syntaxe d’une classe isol&eacute;e qui n’est pas utilis&eacute;e dans le code n’est
pas contr&ocirc;l&eacute;e.
Le workbench g&eacute;n&egrave;re automatiquement les marqueurs de t&acirc;ches et de probl&egrave;mes suivants. Vous pouvez ajouter des
t&acirc;ches et des signets manuellement.
T&acirc;ches : les marqueurs de t&acirc;ches repr&eacute;sentent un &eacute;l&eacute;ment de travail. Les &eacute;l&eacute;ments de travail sont g&eacute;n&eacute;r&eacute;s
automatiquement par le workbench. Vous pouvez ajouter manuellement une t&acirc;che &agrave; une ligne de code du document
ou au document m&ecirc;me. Par exemple, afin de penser &agrave; d&eacute;finir une propri&eacute;t&eacute; pour un composant, vous pouvez cr&eacute;er une
t&acirc;che nomm&eacute;e &laquo; D&eacute;finir les propri&eacute;t&eacute;s de l’aspect &raquo;. Vous pouvez &eacute;galement ajouter des t&acirc;ches g&eacute;n&eacute;rales qui ne
s’appliquent pas directement aux ressources (&laquo; Cr&eacute;er un composant personnalis&eacute; pour l’invite de connexion de
l’employ&eacute; &raquo;, par exemple). La vue T&acirc;ches permet de g&eacute;rer tous les marqueurs de t&acirc;ches. Pour plus d’informations, voir
&laquo; Ajout de t&acirc;ches &raquo; &agrave; la page 84.
Erreurs : les marqueurs d’erreurs sont g&eacute;n&eacute;r&eacute;s par le compilateur et signalent diff&eacute;rents types d’&eacute;tats non valides. Par
exemple, les erreurs de syntaxe et les avertissements g&eacute;n&eacute;r&eacute;s par le compilateur sont affich&eacute;s comme marqueurs dans
la vue Erreurs. Pour plus d’informations, voir &laquo; Vue Erreurs &raquo; &agrave; la page 10.
Derni&egrave;re mise &agrave; jour le 10/11/2011
84
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Signets : vous pouvez ajouter manuellement des signets &agrave; une ligne de code ou &agrave; une ressource (dossier ou document).
Vous utilisez des signets pour leur c&ocirc;t&eacute; pratique, afin de suivre les &eacute;l&eacute;ments de vos projets et de naviguer facilement
jusqu’&agrave; eux. Ils sont g&eacute;r&eacute;s dans la vue Signets. Pour plus d’informations, voir &laquo; Ajout et suppression de signets &raquo; &agrave; la
page 85.
Remarque : les vues T&acirc;ches et Signets ne sont pas affich&eacute;es par d&eacute;faut dans la perspective D&eacute;veloppement Flash. Pour plus
d’informations sur l’ajout de ces vues, voir &laquo; Utilisation de vues &raquo; &agrave; la page 19.
Navigation dans les marqueurs
Les marqueurs sont &agrave; la fois des descriptions et des liens vers des &eacute;l&eacute;ments des ressources d’un projet. Les marqueurs
sont g&eacute;n&eacute;r&eacute;s automatiquement par l’ordinateur pour indiquer des probl&egrave;mes au niveau du code ou sont ajout&eacute;s
manuellement pour vous aider &agrave; suivre les t&acirc;ches ou les bouts de code. Les marqueurs sont affich&eacute;s et g&eacute;r&eacute;s dans les
vues associ&eacute;es. Les marqueurs d’un projet sont facilement rep&eacute;rables dans les vues Signets, Erreurs et T&acirc;ches, &agrave; partir
desquelles ils sont accessibles.
Acc&egrave;s &agrave; l’emplacement d’un marqueur
❖ S&eacute;lectionnez un marqueur dans les vues Signets, Erreurs ou T&acirc;ches.
Le fichier contenant le marqueur est localis&eacute; et affich&eacute; dans l’&eacute;diteur. Si l’emplacement du marqueur est une ligne
de code, cette derni&egrave;re est mise en surbrillance.
Ajout de t&acirc;ches
Les t&acirc;ches sont des &eacute;l&eacute;ments de l’espace de travail cr&eacute;&eacute;s automatiquement ou manuellement. Toutes les t&acirc;ches sont
affich&eacute;es et g&eacute;r&eacute;es dans la vue T&acirc;ches (Fen&ecirc;tre &gt; Autres vues &gt; G&eacute;n&eacute;ralit&eacute;s &gt; T&acirc;ches), comme illustr&eacute; dans l’exemple
suivant :
Ajout d’une t&acirc;che &agrave; une ligne de code ou &agrave; une ressource
1 Ouvrez un fichier dans l’&eacute;diteur, puis rep&eacute;rez et s&eacute;lectionnez la ligne de code &agrave; laquelle vous souhaitez ajouter une
t&acirc;che. Vous pouvez &eacute;galement s&eacute;lectionner une ressource dans l’Explorateur de packages.
2 Dans la vue T&acirc;ches, cliquez sur le bouton Ajouter une t&acirc;che dans la barre d’outils.
3 Entrez le nom de la t&acirc;che et s&eacute;lectionnez une priorit&eacute; (Elev&eacute;e, Normale, Faible), puis cliquez sur OK.
Remarque : comme vous pouvez le constater dans l’Explorateur de packages, la ressource ne signale pas qu’elle contient
un marqueur. Vous pouvez visionner et g&eacute;rer tous les marqueurs de t&acirc;ches dans la vue T&acirc;ches.
Ach&egrave;vement et suppression de t&acirc;ches
Une fois achev&eacute;e, une t&acirc;che peut &ecirc;tre marqu&eacute;e comme ayant &eacute;t&eacute; termin&eacute;e et peut &eacute;ventuellement &ecirc;tre supprim&eacute;e de la
vue T&acirc;ches.
Derni&egrave;re mise &agrave; jour le 10/11/2011
85
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
D&eacute;finition d’une t&acirc;che comme &eacute;tant termin&eacute;e
❖ Dans la vue T&acirc;ches, s&eacute;lectionnez une t&acirc;che de la colonne, comme l’illustre l’exemple suivant.
Suppression d’une t&acirc;che
❖ Dans la vue T&acirc;ches, acc&eacute;dez au menu contextuel d’une t&acirc;che et s&eacute;lectionnez Supprimer.
Suppression de toutes les t&acirc;ches termin&eacute;es
❖ Dans la vue T&acirc;ches, acc&eacute;dez au menu contextuel et s&eacute;lectionnez Supprimer les t&acirc;ches termin&eacute;es.
Ajout et suppression de signets
Les signets permettent de rep&eacute;rer et rechercher facilement des &eacute;l&eacute;ments au sein des projets. Tous les signets sont
affich&eacute;s et g&eacute;r&eacute;s dans la vue Signets (Fen&ecirc;tre &gt; Autres vues &gt; G&eacute;n&eacute;ralit&eacute;s &gt; Signets), comme illustr&eacute; dans l’exemple
suivant :
Ajout d’un signet &agrave; une ligne de code ou &agrave; une ressource
1 Ouvrez un fichier dans l’&eacute;diteur, puis localisez et s&eacute;lectionnez la ligne de code &agrave; laquelle vous souhaitez ajouter un
signet.
2 Dans le menu principal, s&eacute;lectionnez Editer &gt; Ajouter un signet.
3 Saisissez le nom du signet et cliquez sur OK.
Une ic&ocirc;ne de signet ( ) appara&icirc;t en regard de la ligne de code.
Remarque : comme vous pouvez le constater dans l’Explorateur de packages Flex, la ressource ne signale pas qu’elle
contient un marqueur. Vous pouvez visionner et g&eacute;rer tous les signets dans la vue Signets.
Suppression d’un signet
1 Dans la vue Signets, s&eacute;lectionnez le signet &agrave; supprimer.
2 Cliquez sur le signet avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Ctrl (Mac OS), puis
s&eacute;lectionnez Supprimer.
Organisation des instructions d’importation
L’utilisation de l’assistant de contenu dans les &eacute;diteurs MXML et ActionScript conduit &agrave; l’importation automatique
dans le document des packages dans lesquels les classes se situent. Les packages sont ajout&eacute;s dans l’ordre dans lequel
ils ont &eacute;t&eacute; saisis dans le code. Les importations qui ne sont pas utilis&eacute;es ou ne sont pas n&eacute;cessaires sont
automatiquement supprim&eacute;es.
Afin de faciliter l’organisation du code dans les documents ActionScript, vous pouvez trier les instructions
d’importation par ordre alphab&eacute;tique. Pour ce faire, ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, s&eacute;lectionnez Flash
Builder &gt; Editeurs &gt; Code ActionScript, puis Garder les importations organis&eacute;es.
Derni&egrave;re mise &agrave; jour le 10/11/2011
86
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
Tri des instructions d’importation
❖ Dans l’&eacute;diteur, ouvrez un document ActionScript contenant les instructions d’importation. Dans le menu Source,
s&eacute;lectionnez Organiser les importations.
Vous pouvez &eacute;galement utiliser le raccourci clavier suivant : Ctrl+Maj+ O (Windows) ou Commande+Maj+O
(Mac OS).
Ajout de commentaires et de blocs de commentaire
Vous pouvez ajouter ou supprimer des commentaires en utilisant les options dans le menu Source ou en faisant appel
aux raccourcis clavier. Vous pouvez ajouter les types de commentaires suivants :
• Commentaires de source pour ActionScript (//)
• Commentaires de bloc pour ActionScript (/*
*/)
• Commentaires ASDoc pour ActionScript (/**
*/)
• Commentaires de bloc pour MXML (&lt;!----&gt;)
• Blocs CDATA pour MXML (&lt;![CDATA[
]]&gt;)
Les commentaires ajout&eacute;s au code ActionScript peuvent &ecirc;tre activ&eacute;s ou d&eacute;sactiv&eacute;s.
Paul Robertson, professionnel de la communaut&eacute; Adobe, a publi&eacute; sur son blog un article concernant l’utilisation
du mode de s&eacute;lection des blocs.
Activer/d&eacute;sactiver les commentaires du code ActionScript
1 Dans l’&eacute;diteur, s&eacute;lectionnez au moins une ligne de code ActionScript.
2 Appuyez sur Ctrl+Maj+C (Windows) ou Commande+Maj+C (Mac OS) pour ajouter ou supprimer des
commentaires de style C.
3 Appuyez sur Ctrl+/ (Windows) ou Commande+/ (Mac OS) pour ajouter ou supprimer des commentaires de style C++.
Ajout de commentaires XML &agrave; du code MXML
1 Dans l’&eacute;diteur, s&eacute;lectionnez au moins une ligne de code MXML.
2 Appuyez sur Ctrl+Maj+C (Windows) ou Commande+Maj+C (Mac OS) pour ajouter un commentaire.
Ajout de blocs CDATA &agrave; du code MXML
1 Dans l’&eacute;diteur, s&eacute;lectionnez au moins une ligne de code MXML.
2 Appuyez sur Ctrl+Maj+D (Windows) ou Commande+Maj+D (Mac OS) pour ajouter un commentaire.
Mise en retrait de blocs de commentaire
L’&eacute;diteur met automatiquement en forme les lignes de code en cours de saisie, am&eacute;liorant ainsi la lisibilit&eacute; et facilitant
la r&eacute;daction. Vous pouvez &eacute;galement utiliser la touche de tabulation pour mettre manuellement en retrait certaines
lignes de code.
Lorsque vous copiez et collez des blocs de code dans Flash Builder, ce dernier met automatiquement en retrait le code
en fonction de vos pr&eacute;f&eacute;rences.
Pour mettre en retrait un bloc de code en une seule op&eacute;ration, vous pouvez utiliser les commandes D&eacute;caler vers la
droite et D&eacute;caler vers la gauche de l’&eacute;diteur.
Derni&egrave;re mise &agrave; jour le 10/11/2011
87
UTILISATION DE FLASH BUILDER 4.6
Outils de d&eacute;veloppement de code dans Flash Builder
D&eacute;placement d’un bloc de code vers la gauche ou vers la droite
1 Dans l’&eacute;diteur, s&eacute;lectionnez un bloc de code.
2 Cliquez sur Source &gt; D&eacute;caler vers la droite ou Source &gt; D&eacute;caler vers la gauche.
3 Appuyez sur la touche de tabulation ou sur Maj et la touche de tabulation pour mettre en retrait ou annuler la mise
en retrait de blocs de code.
D&eacute;finition des pr&eacute;f&eacute;rences de la mise en retrait
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Mise en retrait.
2 S&eacute;lectionnez le type de mise en retrait (tabulations ou espaces) et sp&eacute;cifiez la taille de la mise en retrait ou des
tabulations.
Derni&egrave;re mise &agrave; jour le 10/11/2011
88
Chapitre 4 : Utilisation des projets dans
Flash Builder
Adobe&reg; Flash&reg; Builder™ vous permet de cr&eacute;er, g&eacute;rer, assembler et distribuer des projets pour la cr&eacute;ation d’applications
Web, d’ordinateur et mobiles. Lorsque vous g&eacute;n&eacute;rez des fichiers SWC (shared component library), vous pouvez
partager des composants et d’autres ressources entre diverses applications ou avec d’autres d&eacute;veloppeurs. Vous pouvez
&eacute;galement utiliser diff&eacute;rentes versions du SDK Flex d’Adobe directement dans Flash Builder.
Cr&eacute;ation de projets dans Flash Builder
Flash Builder permet de cr&eacute;er diff&eacute;rents types de projets tels que Flex, Flex mobile, ActionScript et AIR, ainsi que
d’autres types de projets. Flash Builder fournit un assistant de cr&eacute;ation de projet qui vous guide &agrave; travers les diff&eacute;rentes
&eacute;tapes en vous demandant le type de projet que vous souhaitez cr&eacute;er, le nom du projet, son emplacement, le type
d’application (Web ou d’ordinateur), les version du SDK ainsi que d’autres options.
Pour plus d’informations sur la cr&eacute;ation d’un projet ActionScript, voir &laquo; Projets ActionScript &raquo; &agrave; la page 91.
Pour plus d’informations sur la cr&eacute;ation de projets de biblioth&egrave;que, voir &laquo; Utilisation de projets de biblioth&egrave;que Flex &raquo;
&agrave; la page 228.
Pour plus d’informations sur la cr&eacute;ation de projets Flash Professional, voir &laquo; Utilisation de Flash Builder avec Flash
Professional &raquo; &agrave; la page 245.
Projets Flex
Vous pouvez utiliser les projets Flex afin de cr&eacute;er des applications Web (dans Flash Player) ou des applications
d’ordinateur (dans Adobe AIR). Des options permettent de cr&eacute;er des projets Flex MX uniquement ou des projets Flex
Spark uniquement, n’utilisant que des composants Spark.
Cr&eacute;ation de projets Flex
Utilisez cette proc&eacute;dure pour cr&eacute;er des applications Web ou d’ordinateur.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet Flex.
2 Entrez un nom de projet et un emplacement.
L’emplacement par d&eacute;faut est l’espace de travail actuel.
3 S&eacute;lectionnez Web ou Bureau comme type d’application.
4 Utilisez le SDK Flex par d&eacute;faut ou acc&eacute;dez &agrave; un autre SDK install&eacute;. Cliquez sur Suivant.
5 (Facultatif) Indiquez les param&egrave;tres du serveur.
Voir &laquo; Acc&egrave;s aux services de donn&eacute;es &raquo; &agrave; la page 216.
6 Sp&eacute;cifiez un dossier de sortie.
Si vous ne sp&eacute;cifiez aucun serveur d’applications, l’emplacement se trouve dans votre dossier du projet.
Si vous sp&eacute;cifiez un serveur d’applications, le serveur de sortie se trouve hors du dossier du projet. En g&eacute;n&eacute;ral, vous
placez le dossier de sortie avec vos fichiers de service.
Derni&egrave;re mise &agrave; jour le 10/11/2011
89
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
7 Cliquez sur Terminer ou sur Suivant pour indiquer d’autres options de configuration.
8 (Facultatif) Sp&eacute;cifiez des chemins d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration et d’autres options de configuration.
Voir &laquo; Chemins de g&eacute;n&eacute;ration, extension natives et autres options de configuration du projet &raquo; &agrave; la page 94.
9 Cliquez sur Terminer.
Regardez la vid&eacute;o D&eacute;veloppement de votre premi&egrave;re application d’ordinateur avec Flash Builder (en anglais) de
l’expert Adobe James Ward.
Voir aussi
&laquo; Projets dans Flash Builder &raquo; &agrave; la page 33
Cr&eacute;ation d’un projet Flex utilisant uniquement des composants MX
L’option MX uniquement intervient lors de la cr&eacute;ation d’applications dont la conception est similaire aux applications
cr&eacute;&eacute;es avec une version ant&eacute;rieure de Flex (c’est-&agrave;-dire, Flex 3), mais ayant malgr&eacute; tout acc&egrave;s aux derni&egrave;res fonctions
de Flex et de Flash Builder (telles que la syntaxe d’&eacute;tats, les fonctionnalit&eacute;s CSS avanc&eacute;es, des fonctions de compilation
am&eacute;lior&eacute;es ainsi que d’autres fonctionnalit&eacute;s de langage).
L’option MX uniquement ne met pas &agrave; la disposition des applications du projet les composants Spark.
Vous pouvez convertir un projet Flex en projet MX uniquement. Gardez cependant &agrave; l’esprit que Flash Builder ne
r&eacute;&eacute;crit pas le code du projet. Mettez manuellement &agrave; jour le code afin d’en supprimer toute r&eacute;f&eacute;rence aux composants
Spark.
Cr&eacute;ation d’un projet Flex MX uniquement
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet Flex.
2 Sp&eacute;cifiez l’emplacement du projet et les param&egrave;tres du serveur, comme d&eacute;crit dans &laquo; Chemins de g&eacute;n&eacute;ration,
extension natives et autres options de configuration du projet &raquo; &agrave; la page 94.
3 Sur la page des chemins de g&eacute;n&eacute;ration de l’assistant Nouveau projet Flex, sp&eacute;cifiez MX uniquement.
4 Indiquez d’autres param&egrave;tres de g&eacute;n&eacute;ration de chemin, comme le d&eacute;crit la section &laquo; Chemins de g&eacute;n&eacute;ration,
extension natives et autres options de configuration du projet &raquo; &agrave; la page 94. Cliquez sur Terminer.
Conversion d’un projet Flex en projet Flex MX uniquement
1 Rendez le projet actif dans Flash Builder :
Pour ce faire, vous devez g&eacute;n&eacute;ralement ouvrir un fichier source du projet.
2 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration Flex.
3 Pour le param&egrave;tre Jeu de composants, s&eacute;lectionnez l’option MX uniquement. Cliquez sur OK.
4 Modifiez tout code d’application du projet acc&eacute;dant &agrave; des composants Spark.
Il ne peut y avoir de r&eacute;f&eacute;rences &agrave; des composants Spark dans un projet MX uniquement.
Cr&eacute;ation d’un projet Flex utilisant uniquement des composants Spark
L’option Spark Only est utile pour cr&eacute;er des applications qui utilisent les fonctionnalit&eacute;s Flex et Flash Builder, telles
que la nouvelle syntaxe d’&eacute;tats, les fonctionnalit&eacute;s CSS avanc&eacute;es, des fonctions de compilation am&eacute;lior&eacute;es ainsi que
d’autres fonctionnalit&eacute;s de langage.
Derni&egrave;re mise &agrave; jour le 10/11/2011
90
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
L’option Spark uniquement ne met pas &agrave; la disposition des applications du projet les composants MX fournis avec
Flex 3.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet Flex.
2 Sp&eacute;cifiez l’emplacement du projet et les param&egrave;tres du serveur, comme le d&eacute;crit la section &laquo; Projets Flex &raquo; &agrave; la
page 88.
3 Sur la page des chemins de g&eacute;n&eacute;ration de l’assistant Nouveau projet Flex, sp&eacute;cifiez Spark uniquement.
4 Indiquez d’autres param&egrave;tres de g&eacute;n&eacute;ration de chemin, comme le d&eacute;crit la section &laquo; Chemins de g&eacute;n&eacute;ration,
extension natives et autres options de configuration du projet &raquo; &agrave; la page 94. Cliquez sur Terminer.
Projets Flex mobiles
Gr&acirc;ce &agrave; Flash Builder, vous pouvez cr&eacute;er des projets Flex cibl&eacute;s pour les p&eacute;riph&eacute;riques mobiles. Un projet Flex mobile
cr&eacute;e un application AIR pouvant s’ex&eacute;cuter sur les p&eacute;riph&eacute;riques Apple iOS, BlackBerry Tablet OS et Google Android.
Cr&eacute;ation de projets Flex mobiles
Utilisez cette proc&eacute;dure pour cr&eacute;er un projet Flex mobile pour les p&eacute;riph&eacute;riques Apple iOS, BlackBerry Tablet OS et
Google Android.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet Flex mobile.
2 Entrez un nom de projet et un emplacement.
L’emplacement par d&eacute;faut est l’espace de travail actuel.
3 Utilisez le SDK Flex 4.6 par d&eacute;faut qui prend en charge le d&eacute;veloppement d’applications mobiles. Cliquez sur
Suivant.
4 Sp&eacute;cifiez les param&egrave;tres mobiles :
• S&eacute;lectionnez la plateforme que votre application doit cibler. Pour plus d’informations, voir Choix des
plateformes cibles.
• Sp&eacute;cifiez un mod&egrave;le d’application.
Pour plus d’informations, voir Choix d’un mod&egrave;le d’application.
• Sp&eacute;cifiez les autorisations.
S&eacute;lectionnez la plateforme cible et d&eacute;finissez les autorisations pour chaque plateforme, le cas &eacute;ch&eacute;ant. Vous
pourrez modifier les autorisations par la suite dans le fichier XML descripteur de l’application.
Pour plus d’informations, voir Choix des autorisations d’une application mobile.
• Sp&eacute;cifiez les param&egrave;tres de plateforme.
Les param&egrave;tres de plateforme vous permettent de s&eacute;lectionner une gamme de p&eacute;riph&eacute;riques cibles. Selon la
plateforme s&eacute;lectionn&eacute;e, vous pouvez choisir le p&eacute;riph&eacute;rique cible ou une gamme de p&eacute;riph&eacute;riques cibles.
Remarque : il n’existe aucun param&egrave;tre sp&eacute;cifique aux plateformes Google Android et BlackBerry Tablet OS.
Pour plus d’informations, voir Choix des param&egrave;tres de plateforme.
• Sp&eacute;cifiez les param&egrave;tres d’application.
Pour plus d’informations, voir Choix des param&egrave;tres d’application.
5 Cliquez sur Terminer ou Suivant pour sp&eacute;cifier les param&egrave;tres du serveur.
6 (Facultatif) Indiquez les param&egrave;tres du serveur.
Derni&egrave;re mise &agrave; jour le 10/11/2011
91
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Pour plus d’informations, voir &laquo; Acc&egrave;s aux services de donn&eacute;es &raquo; &agrave; la page 216.
7 Sp&eacute;cifiez un dossier de sortie.
Si vous ne sp&eacute;cifiez aucun serveur d’applications, l’emplacement se trouve dans votre dossier du projet.
Si vous sp&eacute;cifiez un serveur d’applications, le serveur de sortie se trouve hors du dossier du projet. En g&eacute;n&eacute;ral, vous
placez le dossier de sortie avec vos fichiers de service.
8 Cliquez sur Terminer ou sur Suivant pour indiquer d’autres options de configuration.
9 (Facultatif) Sp&eacute;cifiez des chemins d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration et d’autres options de configuration.
Pour plus d’informations, voir &laquo; Chemins de g&eacute;n&eacute;ration, extension natives et autres options de configuration du
projet &raquo; &agrave; la page 94.
10 Cliquez sur Terminer.
Brian Telintelo, consultant Flex, a publi&eacute; un article concernant la cr&eacute;ation d’une application mobile pour la
plateforme Android.
Pour plus d’informations sur le d&eacute;veloppement mobile avec Flex et Flash Builder, voir D&eacute;veloppement d’applications
mobiles avec Flex et Flash Builder.
Voir aussi
&laquo; Projets Flex mobiles &raquo; &agrave; la page 34
Projets ActionScript
Utilisez les projets ActionScript pour cr&eacute;er des applications Web ou d’ordinateur bas&eacute;es soit sur l’API Flash (et non la
structure Flex) sur les API AIR.
Cr&eacute;ation de projets ActionScript
Utilisez cette proc&eacute;dure pour cr&eacute;er une application ActionScript pour le Web ou pour ordinateur.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet ActionScript.
2 Entrez un nom de projet et un emplacement.
L’emplacement par d&eacute;faut est l’espace de travail actuel.
3 S&eacute;lectionnez Web ou Bureau comme type d’application.
4 Sp&eacute;cifiez les chemins de g&eacute;n&eacute;ration.
Pour plus d’informations, voir &laquo; Chemins de g&eacute;n&eacute;ration, extension natives et autres options de configuration du
projet &raquo; &agrave; la page 94.
5 Cliquez sur Terminer.
Pour plus d’informations sur le codage dans ActionScript, voir le Guide du d&eacute;veloppeur ActionScript.
Cr&eacute;ation de projets ActionScript mobiles
Utilisez cette proc&eacute;dure afin de cr&eacute;er des applications AIR bas&eacute;es sur Flex ex&eacute;cutables sur les p&eacute;riph&eacute;riques Apple iOS,
BlackBerry Tablet OS et Google Android.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet ActionScript mobile.
2 Entrez un nom de projet et un emplacement.
Derni&egrave;re mise &agrave; jour le 10/11/2011
92
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
L’emplacement par d&eacute;faut est l’espace de travail actuel.
3 Utilisez le SDK Flex 4.6 par d&eacute;faut qui prend en charge le d&eacute;veloppement d’applications mobiles. Cliquez sur
Suivant.
4 Sp&eacute;cifiez les param&egrave;tres mobiles :
• S&eacute;lectionnez les plateformes que votre application doit cibler.
Pour plus d’informations, voir Choix des plateformes cibles.
• Sp&eacute;cifiez les autorisations de plateforme.
S&eacute;lectionnez la plateforme cible et d&eacute;finissez les autorisations pour chaque plateforme, le cas &eacute;ch&eacute;ant. Vous
pourrez modifier les autorisations par la suite dans le fichier XML descripteur de l’application.
Pour plus d’informations, voir Choix des autorisations d’une application mobile.
• Sp&eacute;cifiez les param&egrave;tres de plateforme.
Pour plus d’informations, voir Choix des param&egrave;tres de plateforme.
• Sp&eacute;cifiez les param&egrave;tres d’application.
S&eacute;lectionnez R&eacute;orientation automatique pour que l’application pivote lorsque le p&eacute;riph&eacute;rique subit une
rotation.
S&eacute;lectionnez Plein &eacute;cran pour que l’application s’affiche en mode plein &eacute;cran sur le p&eacute;riph&eacute;rique.
5 Cliquez sur Terminer ou sur Suivant pour indiquer d’autres options de configuration.
6 (Facultatif) Indiquez les chemins de g&eacute;n&eacute;ration.
Voir &laquo; Chemins de g&eacute;n&eacute;ration, extension natives et autres options de configuration du projet &raquo; &agrave; la page 94.
7 Cliquez sur Terminer.
Apprenez-en davantage sur la cr&eacute;ation d’une application mobile en ActionScript pour la plateforme Android
gr&acirc;ce &agrave; Randy Troppmann, professionnel de la communaut&eacute; Adobe.
Voir aussi
&laquo; Projets ActionScript mobiles &raquo; &agrave; la page 35
&laquo; Gestion des configurations de lancement &raquo; &agrave; la page 120
Projets compatibles avec Flash Catalyst
Vous pouvez cr&eacute;er un projet Flex compatible avec Flash Catalyst.
Lorsque vous cr&eacute;ez un projet compatible avec Flash Catalyst,
xmlns:fc=&quot;http://ns.adobe.com/flashcatalyst/2009&quot; l’espace de noms est ajout&eacute;. Cet espace de noms vous
permet de cr&eacute;er des composants dans Flash Builder qui peuvent &ecirc;tre utilis&eacute;s dans Flash Catalyst. Flash Catalyst CS5.5
prend en charge un jeu partiel de composants disponibles dans Flex 4.5 ou version sup&eacute;rieure.
Le v&eacute;rificateur de compatibilit&eacute; Flash Catalyst est automatiquement activ&eacute; pour un projet compatible avec Flash
Catalyst (Projet &gt; Flash Catalyst &gt; V&eacute;rifier automatiquement la compatibilit&eacute;). Si vous utilisez des ressources
incompatibles ou introduisez des incompatibilit&eacute; dans le projet, Flash Builder affiche les erreurs de compatibilit&eacute; dans
la vue Erreurs. Pour plus d’informations sur la cr&eacute;ation d’un projet compatible avec Flash Catalyst, voir Directives sur
la cr&eacute;ation d’un projet compatible avec Flash Catalyst.
Derni&egrave;re mise &agrave; jour le 10/11/2011
93
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Un projet compatible avec Flash Catalyst permet aux cr&eacute;ateurs de collaborer et de travailler sur le m&ecirc;me projet. Vous
pouvez partager un projet compatible avec Flash entre Flash Builder et Flash Catalyst par le biais des fichiers FXP ou
FXPL. Vous pouvez par ailleurs modifier un projet compatible avec Flash Catalyst directement dans Flash Builder.
utilisez ce flux de travail si Flash Builder et Flash Catalyst sont tous les deux install&eacute;s sur le m&ecirc;me ordinateur.
Pour plus d’informations, voir &laquo; Utilisation de Flash Builder avec Flash Catalyst &raquo; &agrave; la page 250.
Voir aussi
Pr&eacute;sentation des flux de travaux Flash Catalyst et Flash Builder
Cr&eacute;ation d’un projet compatible avec Flash Catalyst
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet compatible Flash Catalyst.
2 Entrez un nom de projet et un emplacement.
L’emplacement par d&eacute;faut est l’espace de travail actuel.
3 Utilisez le SDK Flex par d&eacute;faut ou acc&eacute;dez &agrave; un autre SDK install&eacute;. Cliquez sur Suivant.
4 Cliquez sur Terminer.
V&eacute;rification de la compatibilit&eacute; pour un projet compatible avec Flash Catalyst
Vous pouvez ex&eacute;cuter les &eacute;tapes suivantes pour v&eacute;rifier que votre projet demeure compatible avec Flash Catalyst.
• S&eacute;lectionnez Projet &gt; Flash Catalyst. Activez l’option V&eacute;rifier automatiquement la compatibilit&eacute;.
• S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Flash Catalyst. Activez Ex&eacute;cuter automatiquement le v&eacute;rificateur de
compatibilit&eacute; Flash Catalyst pour ce projet.
• S&eacute;lectionnez Projet &gt; Flash Catalyst &gt; Ex&eacute;cuter le v&eacute;rificateur de compatibilit&eacute;.
Modification d’un projet compatible avec Flash Catalyst
1 Une fois le projet s&eacute;lectionn&eacute; dans l’explorateur de packages, choisissez Projet &gt; Flash Catalyst &gt; Editer le projet
dans Flash Catalyst pour lancer Flash Catalyst.
2 Lorsque vous modifiez le projet dans Flash Catalyst, il est verrouill&eacute; dans Flash Builder afin d’&eacute;viter toute
modification conflictuelle.
3 Une fois que vous avez modifi&eacute; le projet dans Flash Catalyst, enregistrez les modifications, puis quittez Flash
Catalyst.
Remarque : lors de la modification d’un projet compatible avec Flash Catalyst, si vous introduisez des
incompatibilit&eacute;s, Flash Builder affiche les erreurs de compatibilit&eacute; dans la vue Probl&egrave;mes. Cliquez avec le bouton droit
sur le probl&egrave;me pour en savoir plus sur l’erreur de compatibilit&eacute;. Assurez-vous de r&eacute;soudre toutes les erreurs de
compatibilit&eacute; dans Flash Builder avant d’ouvrir le projet dans Flash Catalyst.
4 Pour ouvrir le projet et le modifier dans Flash Builder, s&eacute;lectionnez Projet &gt; Flash Catalyst &gt; Reprendre le travail
sur le projet.
Lorsque vous s&eacute;lectionnez cette option, vous &ecirc;tes invit&eacute; &agrave; enregistrer les modifications effectu&eacute;es dans Flash
Catalyst. Cela ram&egrave;ne le projet r&eacute;cemment enregistr&eacute; dans Flash Builder. En arri&egrave;re plan, la version du projet
export&eacute;e initialement &agrave; partir de Flash Builder est supprim&eacute;e lorsque la version r&eacute;cemment enregistr&eacute;e du projet
est import&eacute;e avec succ&egrave;s &agrave; partir de Flash Catalyst.
5 A tout moment au cours de l’&eacute;dition du projet dans Flash Catalyst, vous pouvez ignorer les modifications et
retourner dans Flash Builder. Pour ce faire, s&eacute;lectionnez Projet &gt; Flash Catalyst &gt; Annuler l’&eacute;dition du projet dans
Flash Catalyst.
Derni&egrave;re mise &agrave; jour le 10/11/2011
94
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Lorsque vous s&eacute;lectionnez cette option, les &eacute;ventuels changements apport&eacute;s au projet dans Flash Catalyst sont
annul&eacute;s et la version originale du projet est ouverte. La version originale du projet est celle qui a &eacute;t&eacute; initialement
ouverte dans Flash Catalyst. Avant de supprimer la version du projet ouverte dans Flash Catalyst, vous avez la
possibilit&eacute; d’enregistrer les modifications dans un fichier de projet diff&eacute;rent &agrave; un autre emplacement.
Cr&eacute;ation de projets AIR
1 Ouvrez Flash Builder.
2 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet Flex.
3 Entrez le nom du projet.
4 Dans Flex, les applications AIR sont consid&eacute;r&eacute;es comme un type d’application. Vous disposez de deux types
d’application : une application Web qui s’ex&eacute;cute dans Adobe Flash Player et une application d’ordinateur qui
s’ex&eacute;cute dans Adobe AIR. S&eacute;lectionnez application d’ordinateur comme type d’application.
5 Sp&eacute;cifiez si n&eacute;cessaire la technologie de serveur &agrave; utiliser avec l’application AIR. En l’absence de technologie de
serveur, s&eacute;lectionnez Aucun/Autre, puis cliquez sur Suivant.
6 S&eacute;lectionnez le dossier dans lequel vous souhaitez cr&eacute;er l’application. Le dossier affich&eacute; par d&eacute;faut est bin-debug.
Cliquez sur Suivant.
7 Modifiez si n&eacute;cessaire les chemins source et d’acc&egrave;s &agrave; la biblioth&egrave;que, puis cliquez sur Terminer pour cr&eacute;er le projet AIR.
Regardez la vid&eacute;o D&eacute;veloppement de votre premi&egrave;re application d’ordinateur avec Flash Builder (en anglais) de
l’expert Adobe James Ward.
Chemins de g&eacute;n&eacute;ration, extension natives et autres options de configuration
du projet
Lorsque vous cr&eacute;ez un projet Flex, vous pouvez en personnaliser la configuration. Toutes les &eacute;tapes de configuration
suppl&eacute;mentaires sont facultatives.
Remarque : vous pouvez modifier la configuration d’un projet apr&egrave;s sa cr&eacute;ation. Pour ce faire, acc&eacute;dez au mode Source
de l’&eacute;diteur de Flash Builder, puis s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s.
Chemin source : cliquez sur l’onglet Chemin source pour ajouter des dossiers source suppl&eacute;mentaires &agrave; un projet.
Vous pouvez r&eacute;organiser les dossiers source, en modifier l’emplacement ou les supprimer du chemin source.
Dossier source principal, Fichier de l’application principale et URL du dossier de sortie : par d&eacute;faut, Flash Builder place
les fichiers source dans le dossier src du projet. Le nom par d&eacute;faut du fichier de l’application MXML principale est le
nom du projet. Ces valeurs par d&eacute;faut peuvent &ecirc;tre modifi&eacute;es &agrave; la cr&eacute;ation du projet.
Lorsque vous cr&eacute;ez un projet, Flash Builder ex&eacute;cute les fichiers d’application &agrave; partir d’une URL par d&eacute;faut, en fonction
des param&egrave;tres du projet. Sp&eacute;cifiez une URL de dossier de sortie pour remplacer les param&egrave;tres par d&eacute;faut. L’URL de
dossier de sortie est utile lorsque vous cr&eacute;ez et d&eacute;ployez l’application sur le serveur de votre projet, mais que vous
d&eacute;boguez l’application sur un serveur Web. Vous sp&eacute;cifiez ensuite l’URL du serveur Web comme URL de dossier de
sortie. Par exemple, si vous indiquez http://myserver/test.swf comme URL de dossier de sortie, une configuration de
lancement est cr&eacute;&eacute;e avec cette URL.
Voir &laquo; D&eacute;finition d’un dossier de sortie de projet &raquo; &agrave; la page 107 et &laquo; Ex&eacute;cution et d&eacute;bogage des applications &raquo; &agrave; la
page 120.
Derni&egrave;re mise &agrave; jour le 10/11/2011
95
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Chemin d’acc&egrave;s &agrave; la biblioth&egrave;que : utilisez le chemin d’acc&egrave;s &agrave; la biblioth&egrave;que afin de sp&eacute;cifier le lien du cadre et les
biblioth&egrave;ques de chemins d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration.
• Jeu de composants
En r&egrave;gle g&eacute;n&eacute;rale, tous les composants sont disponibles. Dans certains cas, vous pouvez ne sp&eacute;cifier que les
composants MX. Voir &laquo; Jeu de composants (MX + Spark, Spark uniquement ou MX uniquement) &raquo; &agrave; la page 105.
• Liaison de la structure
Par d&eacute;faut, les classes d’application pour Flex 4.5 ou version sup&eacute;rieure de la structure Flex utilisent la liaison
dynamique. Les options suivantes sont &eacute;galement activ&eacute;es par d&eacute;faut :
• V&eacute;rifier les condens&eacute;s RSL (recommand&eacute; en production)
• Supprimer les RSL non utilis&eacute;es
Remarque : cette option n’est pas disponible dans les structures Flex ant&eacute;rieures &agrave; Flex 4.5.
• Utiliser les biblioth&egrave;ques RSL locales de d&eacute;bogage lors du d&eacute;bogage
• D&eacute;terminer automatiquement l’ordre de la biblioth&egrave;que, en fonction des d&eacute;pendances
Pour plus d’informations, voir &laquo; Liaison de la structure des applications &raquo; &agrave; la page 106.
• Biblioth&egrave;ques du chemin de g&eacute;n&eacute;ration
Vous pouvez ajouter au chemin de g&eacute;n&eacute;ration des biblioth&egrave;ques de projet, des dossiers de biblioth&egrave;que SWC ou des
fichiers SWC ; vous pouvez &eacute;galement les en supprimer. Vous pouvez en outre modifier l’ordre du chemin de
g&eacute;n&eacute;ration.
Cliquez sur le bouton Editer pour modifier l’emplacement des biblioth&egrave;ques ou des dossiers ajout&eacute;s.
Utilisez le bouton Ajouter un SDK Flex pour r&eacute;tablir le SDK par d&eacute;faut d’un projet dont vous avez supprim&eacute; le SDK
Flex du chemin de g&eacute;n&eacute;ration.
Extensions natives : utilisez l’onglet Extensions natives afin d’inclure les fichiers ANE (ActionScript Native Extension)
dans le but d’int&eacute;grer des fonctions de plateforme native dans votre application.
Important : vous pouvez cr&eacute;er des extensions ActionScript pour les projets d’application mobiles et d’ordinateur qui
prennent en charge AIR 3.0.
Pour plus d’informations, voir Ajout d’extensions natives &agrave; un projet.
Exportation et importation de projets
Flash Builder permet d’exporter et importer des projects aux formats FXP et ZIP et depuis des r&eacute;pertoires de fichier
ouverts. Le format FXP est un format d’archive contenant les dossiers, les fichiers et les m&eacute;tadonn&eacute;es d’un projet. Flash
Builder exporte les projets Flex au format FXP et les projets de biblioth&egrave;que Flex au format FXPL. Les projets
ActionScript peuvent &ecirc;tre export&eacute;s uniquement vers des fichiers archive, g&eacute;n&eacute;ralement au format ZIP.
L’importation et l’exportation de projets permet de transf&eacute;rer des projets de fa&ccedil;on s&ucirc;re et s&eacute;curis&eacute;e entre diff&eacute;rents
ordinateurs et utilisateurs.
Remarque : vous pouvez &eacute;galement faire appel &agrave; l’assistant d’exportation Eclipse pour exporter des projets Flex et des
projets de biblioth&egrave;que Flex au format ZIP (utilis&eacute;s dans Flex Builder 3) ou vers un autre format d’archive.
Derni&egrave;re mise &agrave; jour le 10/11/2011
96
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Exportation de projets
Flash Builder peut exporter de nombreux projets en plus des fonctions d’exportation Eclipse.
Exportation d’un projet Flex ou d’un projet de biblioth&egrave;que Flex au format FXP
Certains projets Flex devront faire l’objet d’un traitement sp&eacute;cial &agrave; l’importation. Voir &laquo; Projets n&eacute;cessitant un
traitement sp&eacute;cial &raquo; &agrave; la page 100
1 Dans Flash Builder, s&eacute;lectionnez Fichier &gt; Exporter un projet Flash Builder.
Vous pouvez &eacute;galement faire appel au menu contextuel du projet dans l’Explorateur de packages. S&eacute;lectionnez
Exporter &gt; Flash Builder &gt; Projet Flash Builder.
2 Dans l’assistant Exportation d’un projet Flex, s&eacute;lectionnez le projet &agrave; exporter.
La liste d&eacute;roulante Projet r&eacute;pertorie tous les projets disponibles.
3 Recherchez l’emplacement vers lequel vous souhaitez exporter le fichier FXP dans votre syst&egrave;me de fichiers.
4 (Facultatif) Activez l’option Valider la compilation du projet.
S&eacute;lectionnez cette option pour obtenir confirmation que le projet sera compil&eacute; sans erreurs. La pr&eacute;sence d’erreurs
ne vous emp&ecirc;chera pas de poursuivre l’exportation.
5 Cliquez sur Terminer.
Pour les projets sur serveur, les chemins absolus vers les ressources du serveur sont enregistr&eacute;s sous forme de
variables de chemin. Lorsque vous importerez ult&eacute;rieurement le projet, vous devrez sp&eacute;cifier des valeurs pour les
variables de chemin.
Exportation d’un projet ActionScript au format ZIP (ou vers tout autre format d’archive)
1 Dans Flash Builder, s&eacute;lectionnez Fichier &gt; Exporter &gt; Autre.
2 Dans l’assistant d’exportation, s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Fichier archive et cliquez sur Suivant.
3 S&eacute;lectionnez le projet et les fichiers &agrave; exporter :
• Dans le volet de gauche, d&eacute;veloppez le projet pour en s&eacute;lectionner les dossiers &agrave; inclure dans l’exportation.
• Dans le volet de droite, indiquez pour chaque dossier s&eacute;lectionn&eacute; les fichiers &agrave; exporter.
4 Recherchez un emplacement dans lequel enregistrer le projet export&eacute; et attribuez un nom au fichier.
5 D&eacute;finissez les options pour le fichier archive, puis cliquez sur Terminer.
Importation de projets
Flash Builder peut importer des projets Flex, des projets de biblioth&egrave;que Flex ainsi que des projets ActionScript
pr&eacute;c&eacute;demment export&eacute;s de Flash Builder. Vous pouvez importer plusieurs versions d’un m&ecirc;me projet Flex ou d’un
m&ecirc;me projet de biblioth&egrave;que Flex.
Importation d’un projet Flex ou d’un projet de biblioth&egrave;que Flex
Vous pouvez importer un projet &agrave; partir d’un fichier FXP export&eacute; ou en acc&eacute;dant au dossier contenant le projet.
1 Dans le menu de Flash Builder, s&eacute;lectionnez Fichier &gt; Importer.
Les fonctions d’importation d’un projet sont &eacute;galement disponibles dans le menu contextuel de l’Explorateur de
packages.
Derni&egrave;re mise &agrave; jour le 10/11/2011
97
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
2 (Dossier du projet) Si l’importation est effectu&eacute;e &agrave; partir d’un dossier de projet existant, activez l’option Dossier du
projet et recherchez le dossier contenant le projet.
3 (Fichier FXP) Si vous effectuez une importation &agrave; partir d’un fichier FXP, s&eacute;lectionnez Fichier et naviguez jusqu’&agrave;
l’emplacement du fichier.
Si le fichier FXP contient plusieurs projets, vous pouvez s&eacute;lectionnez individuellement les projets &agrave; importer.
4 (Projet de biblioth&egrave;que ou projet FXPL) Si vous importez un projet de biblioth&egrave;que ou un projet FXPL Catalyst,
vous avez la possibilit&eacute; d’importer le contenu dans un projet existant.
5 (Fichier FXP) Si un projet du m&ecirc;me nom existe dans l’espace de travail, sp&eacute;cifiez la m&eacute;thode d’importation.
• Importer en tant que nouveau projet : Flash Builder identifie le projet en ajoutant un chiffre &agrave; son nom. Les
versions ant&eacute;rieures du projet sont conserv&eacute;es.
Dans le champ Extraire le nouveau projet vers, sp&eacute;cifiez l’emplacement dans lequel vous souhaitez extraire le
fichier. Cet emplacement est g&eacute;n&eacute;ralement un r&eacute;pertoire de l’espace de travail de Flash Builder repr&eacute;sentant un
dossier du projet. Vous pouvez sp&eacute;cifier un nouveau dossier de projet ou remplacer un projet existant.
• Remplacer un projet existant : s&eacute;lectionnez le projet que vous souhaitez remplacer. La version ant&eacute;rieure du
projet est d&eacute;finitivement supprim&eacute;e.
6 (Variables de chemin) Si vous importez un projet d&eacute;finissant des variables de chemin, mettez &agrave; jour les variables de
chemin pour le projet.
Les projets compil&eacute;s pour ColdFusion, PHP, ADEP Data Services ou d’autres technologies de serveur font appel
aux variables de chemin pour acc&eacute;der au serveur Web et aux ressources du serveur. D’autres projets peuvent
pr&eacute;senter des variables de chemin personnalis&eacute;es.
S&eacute;lectionnez chaque variable de chemin et attribuez-lui une valeur valide.
7 (R&eacute;f&eacute;rences aux polices) Si vous importez un fichier FXP export&eacute; par Catalyst, le projet peut contenir des r&eacute;f&eacute;rences
aux polices. Vous avez la possibilit&eacute; de r&eacute;soudre ces r&eacute;f&eacute;rences.
Voir &laquo; R&eacute;solution des r&eacute;f&eacute;rences aux polices lors de l’importation de projets Catalyst &raquo; &agrave; la page 100.
8 Cliquez sur Terminer.
9 (Projets pour serveurs PHP) Si vous importez un projet pour serveur d’applications de type PHP, installez ou
mettez &agrave; jour l’installation Zend.
La bo&icirc;te de dialogue Zend vous guide au long du processus.
Remarque : si vous annulez le processus dans la bo&icirc;te de dialogue Zend, installez ou mettez &agrave; jour manuellement
Zend Framework. L’acc&egrave;s aux services PHP est impossible tant que Zend Framework n’est pas install&eacute; et configur&eacute;
correctement. Pour plus d’informations sur l’installation, la configuration et le d&eacute;pannage de votre installation Zend
Framework, voir Installation de Zend Framework.
10 (Projets pour serveurs) D&eacute;ployez des services.
a Placez manuellement des services sous la racine Web du serveur. Utilisez la structure de r&eacute;pertoire utilis&eacute;e dans
le projet d’origine.
b Dans la vue Donn&eacute;es/Services, s&eacute;lectionnez Actualiser dans le menu contextuel d’un service.
Importation d’un projet Flex 3
Vous pouvez importer un projet Flex 3 dans Flash Builder 4.6 en utilisant le mode de compatibilit&eacute; Flex 3. Dans ce cas,
les espaces de noms et les composants Flex 3 demeureront inchang&eacute;s. Vous pourrez cependant profiter du compilateur
disponible avec Flex 4.6.
Derni&egrave;re mise &agrave; jour le 10/11/2011
98
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Les documents cr&eacute;&eacute;s en mode de compatibilit&eacute; Flex 3 utilisent les composants MX et les espaces de noms suivants :
mx=&quot;http://www.adobe.com/2006/mxml&quot;
1 Dans Flash Builder, s&eacute;lectionnez Fichier &gt; Importer un projet Flex.
2 Recherchez le fichier ZIP du projet Flex 3 pr&eacute;c&eacute;demment export&eacute; ou le dossier du projet Flex 3.
3 Cliquez sur Terminer.
4 Dans la bo&icirc;te de dialogue Choisir la version du SDK Flex, v&eacute;rifiez que le SDK Flex 4 a &eacute;t&eacute; activ&eacute;. S&eacute;lectionnez
Utiliser le mode de compatibilit&eacute; Flex 3.
5 Cliquez sur OK.
Pour plus d’informations sur l’utilisation de Flash Builder 4 pour vos projets Flex 3 existants, voir l’article du p&ocirc;le de
d&eacute;veloppement Adobe : Migration de projets Flex existants de Flex Builder 3 vers Flash Builder 4.
Importation d’un projet ActionScript
Utilisez l’assistant Eclipse pour importer un projet ActionScript.
1 Dans Flash Builder, s&eacute;lectionnez Fichier &gt; Importer &gt; Autre &gt; G&eacute;n&eacute;ral &gt; Fichier archive.
Vous pouvez &eacute;galement faire appel au menu contextuel de l’Explorateur de packages.
2 Dans la bo&icirc;te de dialogue d’importation d’un projet Flex, s&eacute;lectionnez le fichier ZIP &agrave; importer.
3 Cliquez sur Terminer.
Importation de projets export&eacute;s avec l’assistant d’exportation Eclipse
Un projet export&eacute; &agrave; l’aide de l’assistant d’exportation Eclipse devra &ecirc;tre import&eacute; avec l’assistant d’importation Eclipse.
S&eacute;lectionnez Fichier &gt; Importer &gt; G&eacute;n&eacute;ral. Recherchez le format correspondant &agrave; votre projet.
Pour plus d’informations, voir la documentation Eclipse sur l’importation de projets. Cette documentation est
disponible dans l’aide des assistants d’importation et d’exportation Eclipse.
Les services d’un projet cr&eacute;&eacute;s avec les outils Flash Builder d’acc&egrave;s aux services de donn&eacute;es devront &ecirc;tre ajout&eacute;s
manuellement. Copiez les fichiers de serveur dans le dossier services du serveur appropri&eacute;. Dans la vue
Donn&eacute;es/Services, utilisez les propri&eacute;t&eacute;s du service pour un serveur afin de d&eacute;terminer l’emplacement du service.
Si vous avez export&eacute; un projet PHP bas&eacute; sur la structure Zend Framework, il vous faut installer cette derni&egrave;re sur le
serveur cible. Modifiez le fichier amf-config.ini qui configure la structure Zend Framework. Pour zend_path,
sp&eacute;cifiez le chemin absolu du r&eacute;pertoire d’installation de Zend Framework.
Pour plus d’informations sur l’installation, la configuration et le d&eacute;pannage de l’installation de la structure Zend
Framework, voir Installation de Zend Framework.
Importation d’un projet dans plusieurs espaces de travail
Flash Builder importe les projets dans ses espaces de travail. Un projet peut &ecirc;tre import&eacute; dans plusieurs espaces de
travail. Dans ce cas, les fichiers du projet se trouvent dans un seul emplacement sur le disque, mais sont r&eacute;f&eacute;renc&eacute;s par
chaque espace de travail. Les modifications apport&eacute;es au projet se r&eacute;percutent dans tous les espaces de travail.
Derni&egrave;re mise &agrave; jour le 10/11/2011
99
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Importation de fichiers source dans un nouveau projet
Vous pouvez cr&eacute;er un projet dans lequel importer les fichiers source et les ressources situ&eacute;s sur votre syst&egrave;me de
fichiers mais n’appartenant &agrave; aucun projet.
1 Dans le menu Flash Builder, s&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet.
Il peut s’agir d’un projet Flex, d’un projet de biblioth&egrave;que Flex ou d’un projet ActionScript.
2 Dans l’assistant Nouveau projet Flex, sp&eacute;cifiez la source et le dossier de sortie.
Remarque : vous pouvez &eacute;galement accepter les emplacements par d&eacute;faut propos&eacute;s par l’assistant et y d&eacute;placer les
fichiers source.
Comparaison des modifications apport&eacute;es &agrave; un projet
Si vous importez plusieurs versions d’un projet, vous pouvez comparer, copier ou fusionner les contenus des versions.
Vous pouvez uniquement comparer des versions diff&eacute;rentes d’un m&ecirc;me projet.
1 Dans l’Explorateur de packages, s&eacute;lectionnez l’un des projets que vous souhaitez comparer.
2 Ouvrez le menu contextuel et s&eacute;lectionnez Comparer le projet avec la version.
L’affichage de comparaison s’ouvre, vous permettant de comparer le projet &agrave; d’autres versions de ce m&ecirc;me projet.
3 S&eacute;lectionnez la version avec laquelle vous souhaitez effectuer la comparaison. L’&eacute;diteur de comparaison Eclipse
s’ouvre.
4 Dans l’&eacute;diteur de comparaison, acc&eacute;dez au fichier que vous souhaitez comparer et s&eacute;lectionnez Afficher la
comparaison du contenu dans le menu contextuel.
L’&eacute;diteur de comparaison affiche les deux versions du fichier et en met en &eacute;vidence les diff&eacute;rences.
Vous pouvez utiliser les options de l’&eacute;diteur de comparaison pour copier ou fusionner les diff&eacute;rences dans le fichier.
Pour plus d’informations, voir la documentation Eclipse sur l’&eacute;diteur de comparaison.
Prise en charge des projets Flash Catalyst
Flash Builder prend en charge le d&eacute;veloppement des applications con&ccedil;ues dans Adobe&reg; Flash&reg; Catalyst™.
Flash Catalyst exporte un projet au format FXP et exporte des composants au format FXPL. Les fichiers FXP et FXPL
peuvent &ecirc;tre ensuite import&eacute;s dans Flash Builder &agrave; des fins de d&eacute;veloppement. Pour les fichiers FXP, il en r&eacute;sulte un
projet Web Flex ex&eacute;cut&eacute; dans Adobe Flash Player. Un fichier FXPL contient un fichier de biblioth&egrave;que. Vous pouvez
importer un fichier FXPL sous la forme d’un projet de biblioth&egrave;que Flex ou importer le contenu dans un projet Flex
existant.
• Pour importer un fichier FXP ou FXPL dans Flash Builder, dans le menu Projet, s&eacute;lectionnez Flash Catalyst &gt;
Importer un projet Flash Catalyst.
• Pour exporter un projet Flex comme projet Flash Catalyst, dans le menu Projet, s&eacute;lectionnez Flash Catalyst &gt;
Exporter un projet Flash Catalyst. Au moment de l’exportation d’un projet Flex, vous pouvez valider a compatibilit&eacute;
du projet Flex avec Flash Catalyst.
Vous pouvez cr&eacute;er un projet Adobe AIR &agrave; partir d’un projet Flash Catalyst. Importez le fichier FXP du projet Catalyst
dans Flash Builder. Convertissez le type d’application du projet d’application Web (ex&eacute;cut&eacute;e dans Flash Player) en
application d’ordinateur (ex&eacute;cut&eacute;e dans Adobe AIR). Voir &laquo; Modification d’un projet d’application Web en projet
d’application d’ordinateur &raquo; &agrave; la page 129.
Pour plus d’informations sur les flux de travail entre Flash Builder et Flash Catalyst, voir &laquo; Utilisation de Flash Builder
avec Flash Catalyst &raquo; &agrave; la page 250.
Derni&egrave;re mise &agrave; jour le 10/11/2011
100
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
R&eacute;solution des r&eacute;f&eacute;rences aux polices lors de l’importation de projets Catalyst
Lors de l’importation d’un projet FXP cr&eacute;&eacute; avec Adobe Catalyst, ce projet peut contenir des r&eacute;f&eacute;rences &agrave; des polices
qui ne sont pas disponibles sur votre syst&egrave;me.
L’assistant d’importation permet de corriger les r&eacute;f&eacute;rences aux polices &agrave; l’aide de CSS. Si vous s&eacute;lectionnez l’option
correspondante, Flash Builder importe la feuille de style Catalyst Main.css. Main.css contient les r&eacute;f&eacute;rences aux
polices utilis&eacute;es dans le projet.
Si vous obtenez des erreurs de compilation provenant des polices r&eacute;f&eacute;renc&eacute;es dans la feuille de style, corrigez les
r&eacute;f&eacute;rences de la feuille de style avec les polices disponibles sur votre syst&egrave;me.
Les projets FXPL Catalyst ne contiennent pas de feuilles de style. Flash Builder tente de corriger les r&eacute;f&eacute;rences aux
polices lors de l’importation d’un fichier FXPL. S’il ne trouve pas de police correspondante sur le syst&egrave;me cible, les
r&eacute;f&eacute;rences aux polices d’origine sont conserv&eacute;es. Pour les projets FXPL, les r&eacute;f&eacute;rences aux polices que Flash Builder ne
parvient pas &agrave; r&eacute;soudre sont d&eacute;tect&eacute;es &agrave; l’ex&eacute;cution. Les r&eacute;f&eacute;rences aux polices non r&eacute;solues entra&icirc;nent une substitution
de police ou une erreur d’ex&eacute;cution.
Remarque : pour les fichiers FXPL, Flash Builder modifie l’attribut fontFamily dans les fichiers MXML lorsqu’il tente
de r&eacute;soudre les r&eacute;f&eacute;rences aux polices.
Projets n&eacute;cessitant un traitement sp&eacute;cial
Certains projets Flex devront faire l’objet d’un traitement sp&eacute;cial lors de l’importation et de l’exportation. Par exemple :
• le projet fait r&eacute;f&eacute;rence &agrave; une version ant&eacute;rieure du SDK Flex ;
• le projet fait r&eacute;f&eacute;rence &agrave; des fichiers de service pour l’acc&egrave;s aux donn&eacute;es c&ocirc;t&eacute; serveur ;
• la configuration Zend Framework pour l’acc&egrave;s aux services PHP doit &ecirc;tre mise &agrave; jour ;
• le projet utilise des liens ADEP Data Services vers un fichier de mod&egrave;le de donn&eacute;es.
Lors de l’exportation ou de l’importation d’un projet Flex, certains contenus du projet n&eacute;cessiteront un traitement
sp&eacute;cial.
• Versions diff&eacute;rentes du SDK Flex
Vous pouvez importer un projet Flex faisant r&eacute;f&eacute;rence &agrave; une version du SDK Flex qui n’a pas &eacute;t&eacute; install&eacute;e avec Flash
Builder. Pour plus d’informations sur le t&eacute;l&eacute;chargement et l’installation de versions suppl&eacute;mentaires du SDK Flex,
voir &laquo; SDK Flex install&eacute;s &raquo; &agrave; la page 269. Si Flash Builder ne peut pas trouver de version sp&eacute;cifique du SDK,
recherchez l’emplacement du SDK.
• Fichiers de services
Les projets de serveur Flex qui se connectent aux services de donn&eacute;es, tels que ColdFusion ou BlazeDS, contiennent
un dossier services dont la r&eacute;f&eacute;rence de classe ActionScript a d&eacute;ploy&eacute; les fichiers de serveur. Lors de l’exportation
du projet, Flash Builder exporte le dossier de services, mais vous devez vous assurer qu’un serveur et les fichiers c&ocirc;t&eacute;
serveur correspondants existent lors de l’importation. Au moment de l’importation, vous devrez peut-&ecirc;tre d&eacute;ployer
les fichiers c&ocirc;t&eacute; serveur et mettre &agrave; jour les adresses du serveur dans les classes dans les fichiers c&ocirc;t&eacute; serveur &agrave; l’aide
d’ADEP Data Services ou BlazeDS ; assurez-vous que les destinations de service sont disponibles sur le serveur
cible.
• Structure Zend Framework
Les projets Flex qui se connectent &agrave; des services de donn&eacute;es en utilisant PHP et la structure Zend Framework
contiennent deux fichiers de configuration. A l’importation, examinez ces fichiers afin de v&eacute;rifier qu’ils ont &eacute;t&eacute;
correctement configur&eacute;s pour votre syst&egrave;me :
amf-config.ini
Derni&egrave;re mise &agrave; jour le 10/11/2011
101
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
gateway.php
Voir Installation de Zend Framework
pour des informations sur l’installation, la configuration et le d&eacute;pannage de votre installation Zend Framework.
• Fichiers de mod&egrave;les de donn&eacute;es (ADEP Data Services)
Un projet Flex utilisant ADEP Data Services est reli&eacute; &agrave; un fichier de mod&egrave;le de donn&eacute;es. Apr&egrave;s exportation puis
importation, Flash Builder r&eacute;f&eacute;rence le fichier de mod&egrave;le de donn&eacute;es actuel et non le lien qui y renvoie. Si vous
souhaitez utiliser un fichier li&eacute; (et non celui inclus dans le projet export&eacute;), modifiez le fichier de mod&egrave;le de donn&eacute;es
en acc&eacute;dant aux propri&eacute;t&eacute;s du projet. S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Mod&egrave;le de donn&eacute;es pour apporter les
modifications.
Cr&eacute;ation de projets
Adobe&reg; Flash&reg; Builder™ g&eacute;n&egrave;re et exporte automatiquement les projets vers des applications. Cette op&eacute;ration comporte
la cr&eacute;ation de fichiers d’application et de biblioth&egrave;que, le placement des fichiers de sortie dans les emplacements
appropri&eacute;s et la signalisation de toute erreur survenue en cours de compilation.
Diff&eacute;rentes options permettent d’ajuster les param&egrave;tres de g&eacute;n&eacute;ration. Vous pouvez ainsi d&eacute;terminer la mani&egrave;re dont
les projets sont int&eacute;gr&eacute;s aux applications. Par exemple, vous pouvez d&eacute;finir des pr&eacute;f&eacute;rences de g&eacute;n&eacute;ration sur des
projets individuels ou sur tous les projets de l’espace de travail. Vous pouvez &eacute;galement modifier le chemin de r&eacute;sultat
de la cr&eacute;ation, modifier l’ordre de la g&eacute;n&eacute;ration, etc. Vous pouvez en outre cr&eacute;er des instructions de g&eacute;n&eacute;ration
personnalis&eacute;es &agrave; l’aide d’outils tiers tels qu’Apache Ant.
Lorsque les applications sont pr&ecirc;tes &agrave; &ecirc;tre publi&eacute;es, vous pouvez en publier l’ensemble du code source ou uniquement
certaines parties. A l’instar du code source HTML, le code source de l’application peut &ecirc;tre visualis&eacute; dans un navigateur Web.
Pr&eacute;sentation de la cr&eacute;ation et de l’exportation des projets
Un flux de travail se compose de la g&eacute;n&eacute;ration de projets Flex et ActionScript, l’option G&eacute;n&eacute;rer automatiquement &eacute;tant
activ&eacute;e. Au cours du d&eacute;veloppement, Flash Builder affiche les erreurs et les avertissements dans la vue Erreurs. A
l’ex&eacute;cution de l’application, une version de d&eacute;bogage du fichier SWF est plac&eacute;e dans le dossier de sortie (bin) du projet
avec les ressources requises et une enveloppe HTML. Cette g&eacute;n&eacute;ration contient des informations de d&eacute;bogage et n’est
destin&eacute;e qu’&agrave; l’usage des d&eacute;veloppeurs. Pour plus d’informations sur l’exportation de projets, voir &laquo; Exportation et
importation de projets &raquo; &agrave; la page 95.
Une fois l’application pr&ecirc;te &agrave; &ecirc;tre d&eacute;ploy&eacute;e, l’assistant Exporter vers une version valid&eacute;e vous permet de cr&eacute;er une
version optimis&eacute;e de qualit&eacute; finale de l’application. Cette op&eacute;ration enregistre le fichier SWF dans le dossier binrelease. Les informations de d&eacute;bogage &eacute;tant supprim&eacute;es, la taille du fichier diminue. Cette version est destin&eacute;e &agrave; &ecirc;tre
consult&eacute;e par l’utilisateur final. Pour les projets Adobe AIR, les applications AIR sont export&eacute;es dans un fichier AIR.
La fonction Exporter vers une version valid&eacute;e permet de cr&eacute;er un fichier AIR sign&eacute; num&eacute;riquement que les utilisateurs
doivent installer avant d’ex&eacute;cuter une application (&agrave; l’instar d’un fichier install.exe).
Aucune exportation n’est requise pour les projets de biblioth&egrave;que. Le fichier SWC cr&eacute;&eacute; par un projet de biblioth&egrave;que
Flex se pr&ecirc;te &agrave; la fois au d&eacute;veloppement et &agrave; la production. Pour plus d’informations, voir &laquo; Utilisation de projets de
biblioth&egrave;que Flex &raquo; &agrave; la page 228.
Derni&egrave;re mise &agrave; jour le 10/11/2011
102
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Notions de base sur la g&eacute;n&eacute;ration
MXML et ActionScript 3.0 sont des langages compil&eacute;s. Les langages compil&eacute;s sont diff&eacute;rents des langages interpr&eacute;t&eacute;s,
tels que JavaScript, qui peuvent &ecirc;tre ex&eacute;cut&eacute;s par leur propre environnement d’ex&eacute;cution. En d’autres termes, MXML
et ActionScript 3.0 doivent &ecirc;tre convertis dans un format compil&eacute; afin d’&ecirc;tre ex&eacute;cut&eacute;s par Flash Player. Ce processus,
ainsi que la cr&eacute;ation des fichiers de sortie correspondants, est d&eacute;sign&eacute; par le terme de g&eacute;n&eacute;ration.
Flash Builder g&eacute;n&egrave;re automatiquement un projet &agrave; chaque modification ou enregistrement de l’un de ses fichiers. Vous
avez par ailleurs la possibilit&eacute; de g&eacute;n&eacute;rer manuellement vos applications. Comprendre le processus de g&eacute;n&eacute;ration et les
fichiers de sortie qui sont g&eacute;n&eacute;r&eacute;s vous aide &agrave; diagnostiquer et r&eacute;soudre les erreurs de configuration du projet,
lorsqu’elles se pr&eacute;sentent.
Projets Flex : les fichiers source et les &eacute;l&eacute;ments incorpor&eacute;s (tels que les images) sont compil&eacute;s dans un seul fichier SWF
de sortie. Le fichier SWF peut s’ex&eacute;cuter directement dans le lecteur autonome Flash Player ou dans un navigateur
Web via un fichier d’enveloppe HTML qui est &eacute;galement issu de la g&eacute;n&eacute;ration. Ces fichiers sont g&eacute;n&eacute;r&eacute;s dans le dossier
de sortie du projet. Le dossier de sortie s’appelle bin par d&eacute;faut, mais vous pouvez le renommer.
Projets ActionScript 3.0 : &agrave; l’instar des projets Flex, les projets ActionScript 3.0 compilent les fichiers source et les
ressources int&eacute;gr&eacute;es dans un fichier SWF.
Projets de biblioth&egrave;que Flex : pour les projets de biblioth&egrave;que, les fichiers source sont des composants et des
ressources apparent&eacute;es. Lors de la g&eacute;n&eacute;ration de projets de biblioth&egrave;que, un fichier SWC est cr&eacute;&eacute; dans le dossier de
sortie. Un fichier SWF est archiv&eacute; dans un fichier SWC contenant des composants, des ressources et le fichier
catalog.xml, fichier manifeste des &eacute;l&eacute;ments contenus dans le fichier SWF.
G&eacute;n&eacute;rations automatiques
Dans une configuration autonome de Flash Builder, l’option G&eacute;n&eacute;rer automatiquement est s&eacute;lectionn&eacute;e par d&eacute;faut et
vos applications sont g&eacute;n&eacute;r&eacute;es automatiquement. En configuration plug-in, s&eacute;lectionnez l’option G&eacute;n&eacute;rer
automatiquement. Le fait de d&eacute;s&eacute;lectionner l’option G&eacute;n&eacute;rer automatiquement emp&ecirc;che le compilateur d’identifier les
erreurs de syntaxe. La vue Erreurs n’affiche alors pas de messages d’avertissement et d’erreur lorsque vous saisissez du
code. La vue Erreurs affiche des messages d’avertissement et d’erreur uniquement lorsque vous compilez le projet. Il
est par cons&eacute;quent recommand&eacute; de d&eacute;finir Flash Builder sur la g&eacute;n&eacute;ration automatique.
Options avanc&eacute;es pour la g&eacute;n&eacute;ration de projets
Les options avanc&eacute;es permettent de d&eacute;finir la dur&eacute;e et l’&eacute;tendue des g&eacute;n&eacute;rations. Vous pouvez par exemple g&eacute;n&eacute;rer un
seul projet ou un ensemble de projets dans l’espace de travail ou encore d&eacute;finir un jeu de documents (une collection)
de projets &agrave; g&eacute;n&eacute;rer. Toutes les commandes de g&eacute;n&eacute;ration se situent dans le menu Projet, ainsi que l’illustre l’exemple
suivant.
Derni&egrave;re mise &agrave; jour le 10/11/2011
103
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Le compilateur Flash Builder est incr&eacute;mentiel. Il ne g&eacute;n&egrave;re que les ressources qui ont &eacute;t&eacute; ajout&eacute;es ou concern&eacute;es par
une mise &agrave; jour et ignore toutes les autres, ce qui se traduit par un gain de temps et une utilisation parcimonieuse des
ressources du syst&egrave;me. Vous disposez toutefois de la possibilit&eacute; de r&eacute;g&eacute;n&eacute;rer l’ensemble des ressources du projet en
proc&eacute;dant &agrave; une g&eacute;n&eacute;ration nettoy&eacute;e. Ce type de g&eacute;n&eacute;ration est indiqu&eacute; lorsque l’application pr&eacute;sente un
comportement impr&eacute;visible au cours des tests effectu&eacute;s. Vous pouvez dans ce cas &eacute;liminer toute source potentielle de
probl&egrave;mes en ignorant et r&eacute;g&eacute;n&eacute;rant tous les fichiers du projet. Pour plus d’informations, voir &laquo; Options de g&eacute;n&eacute;ration
avanc&eacute;es &raquo; &agrave; la page 109.
En pr&eacute;sence de d&eacute;pendances entre des projets distincts de l’espace de travail, le compilateur d&eacute;termine
automatiquement l’ordre dans lequel les projets ont &eacute;t&eacute; g&eacute;n&eacute;r&eacute;s afin de r&eacute;soudre correctement les d&eacute;pendances. Vous
pouvez toutefois remplacer l’ordre de g&eacute;n&eacute;ration par d&eacute;faut en d&eacute;finissant manuellement l’ordre dans lequel les projets
de l’espace de travail sont g&eacute;n&eacute;r&eacute;s.
Vous pouvez en outre modifier le chemin de g&eacute;n&eacute;ration, la liste des applications et les param&egrave;tres du compilateur pour
chaque projet de l’espace de travail.
Voir aussi
&laquo; Cr&eacute;ation manuelle de projets &raquo; &agrave; la page 109
&laquo; Gestion des fichiers d’application du projet &raquo; &agrave; la page 38
&laquo; Options de g&eacute;n&eacute;ration avanc&eacute;es &raquo; &agrave; la page 109
Affichage des erreurs de g&eacute;n&eacute;ration dans la vue Erreurs
Les erreurs d&eacute;tect&eacute;es par le compilateur au cours de la g&eacute;n&eacute;ration s’affichent dans la vue Erreurs des perspectives
D&eacute;veloppement et D&eacute;bogage, ainsi que dans l’&eacute;diteur de code, dans lequel les lignes contenant des erreurs sont
signal&eacute;es par un x, comme l’illustre l’exemple suivant.
Voir aussi
&laquo; Vue Erreurs &raquo; &agrave; la page 10
Erreurs d’environnement Eclipse dans le fichier journal
Des erreurs g&eacute;n&eacute;r&eacute;es par l’environnement Eclipse sont susceptibles de se produire. Elles surviennent g&eacute;n&eacute;ralement
lorsque des ressources (des fichiers SWC, par exemple) ne sont pas trouv&eacute;es &agrave; l’ex&eacute;cution. Dans ce cas, les messages
d’erreur apparaissent dans le fichier journal des erreurs Eclipse. L’emplacement par d&eacute;faut de ce fichier journal sous
Windows est le suivant : \Documents and Settings\nom_utilisateur\workspace\.metadata\.log. Sous Mac,
l’emplacement par d&eacute;faut se trouve &eacute;galement dans le r&eacute;pertoire de l’espace de travail. Les fichiers et dossiers
commen&ccedil;ant par un point y sont toutefois masqu&eacute;s par d&eacute;faut.
Personnalisation des scripts de g&eacute;n&eacute;ration avec Apache Ant
Vous pouvez modifier et &eacute;tendre le processus de g&eacute;n&eacute;ration standard en faisant appel &agrave; Apache Ant, outil de
g&eacute;n&eacute;ration Java &agrave; code source libre. Pour plus d’informations sur la cr&eacute;ation de g&eacute;n&eacute;rateurs personnalis&eacute;s, voir
&laquo; Personnalisation des g&eacute;n&eacute;rations avec Apache Ant &raquo; &agrave; la page 111.
Derni&egrave;re mise &agrave; jour le 10/11/2011
104
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Options du compilateur Flex
Vous pouvez modifier les param&egrave;tres par d&eacute;faut du compilateur Flex utilis&eacute; par Flash Builder. Pour afficher les
param&egrave;tres par d&eacute;faut et en modifier les valeurs, ouvrez la page des propri&eacute;t&eacute;s du compilateur Flex. Dans le menu Flash
Builder, s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Compilateur Flex.
Version SDK Flex
Le SDK par d&eacute;faut pour Flash Builder est Flex 4.6. Cependant, si votre projet utilise une version sp&eacute;cifique, telle que
Flex 3.5, Flash Builder compile les applications du projet &agrave; l’aide du SDK Flex sp&eacute;cifi&eacute;.
Vous pouvez d&eacute;finir comme param&egrave;tre par d&eacute;faut un SDK Flex sp&eacute;cifique ou vous pouvez d&eacute;finir que la compilation
soit effectu&eacute;e en utilisant la compatibilit&eacute; avec Flex 3. La sp&eacute;cification de la compatibilit&eacute; ascendante affecte certains
comportements, tels que les r&egrave;gles de pr&eacute;sentation, les marges int&eacute;rieures et les espaces, les habillages ainsi que d’autres
param&egrave;tres de style. Elle a &eacute;galement une incidence sur les r&egrave;gles d’analyse des fichiers de propri&eacute;t&eacute;s. La d&eacute;finition de
la version de compatibilit&eacute; n’applique pas toutes les diff&eacute;rences existant entre les versions.
Options d’Adobe Flash Player
La version par d&eacute;faut de Flash Player utilis&eacute;e par le compilateur est la version minimale requise par le SDK Flex utilis&eacute;
pour la compilation.
Vous pouvez d&eacute;finir une version sp&eacute;cifique de Flash Player pour l’application. Les fonctionnalit&eacute;s n&eacute;cessitant une
version ult&eacute;rieure de Flash Player ne seront pas compil&eacute;es dans l’application.
Options du compilateur
Flash Builder fournit des cases &agrave; cocher pour les options suivantes du compilateur :
• Utiliser le moteur de texte Flash dans les composants MX
Le moteur de texte Flash (Flash Text Engine, FTE) est une biblioth&egrave;que qui fournit des contr&ocirc;les de texte dot&eacute;s d’un
ensemble complet d’options de formatage. Tous les composants Spark du package spark.components prennent en
charge FTE. Voir Int&eacute;gration de polices.
Certains contr&ocirc;les MX fournissent une prise en charge de FTE. Les contr&ocirc;les MX prenant en charge FTE utilisent
les m&ecirc;mes polices int&eacute;gr&eacute;es que les composants Spark utilisant FTE. Voir Using FTE in MX controls.
• Copier les fichiers non imbriqu&eacute;s dans le dossier de sortie
• G&eacute;n&eacute;rer un fichier SWF accessible
Cette option active les fonctionnalit&eacute;s d’accessibilit&eacute; lors de la compilation de l’application ou du fichier SWC. Pour
plus d’informations sur l’utilisation des fonctionnalit&eacute;s d’accessibilit&eacute; avec Flex, voir Accessible applications.
• Activer la v&eacute;rification stricte
Lorsque la v&eacute;rification stricte est activ&eacute;e, le compilateur imprime des appels de propri&eacute;t&eacute; et de fonction non d&eacute;finis.
Il effectue &eacute;galement une v&eacute;rification de type au moment de la compilation pour les affectations et les options
fournies aux appels de m&eacute;thode.
• Activer les avertissements
Cette option active des avertissements sp&eacute;cifiques. Pour plus d’informations, voir Viewing warnings and errors.
Vous pouvez aussi sp&eacute;cifier des arguments de compilateur &agrave; plusieurs lignes qui sont disponibles avec la ligne de
commande sur le compilateur mxmlc. Vous pouvez d&eacute;finir les valeurs de la plupart des options du champ Arguments
de compilateur suppl&eacute;mentaires en utilisant la syntaxe de la ligne de commande. Pour plus d’informations sur la
syntaxe pour la d&eacute;finition des options dans la bo&icirc;te de dialogue Compilateur Flex, voir About the command-line
compilers.
Derni&egrave;re mise &agrave; jour le 10/11/2011
105
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Dans le champ Arguments de compilateur suppl&eacute;mentaires, vous pouvez remplacer un chemin vers le r&eacute;pertoire du
SDK par le jeton ${flexlib}, comme l’illustre l’exemple suivant :
-include-libraries &quot;${flexlib}/libs/automation.swc&quot; &quot;${flexlib}/libs/automation_agent.swc&quot;
Enveloppe HTML
Outre les fichiers SWF pour les applications Web, le compilateur Flash Builder g&eacute;n&egrave;re &eacute;galement une enveloppe
HTML que vous pouvez utiliser lors du d&eacute;ploiement de l’application. Les options suivantes sont disponibles :
• G&eacute;n&eacute;rer le fichier d’enveloppe HTML
• V&eacute;rifier la version du lecteur cible
Lorsque cette option est activ&eacute;e, l’application compil&eacute;e v&eacute;rifie que la version de Flash Player est correcte.
Si l’option d’utilisation de l’installation rapide est activ&eacute;e, l’application ex&eacute;cute un fichier SWF dans le lecteur Flash
Player existant pour mettre &agrave; niveau les utilisateurs vers la derni&egrave;re version du lecteur.
• Activer l’int&eacute;gration avec le navigateur
Cette option active la liaison profonde. La liaison profonde permet aux utilisateurs de parcourir leurs interactions
avec l’application en utilisant les boutons Pr&eacute;c&eacute;dent et Suivant de leur navigateur.
Acc&egrave;s par ligne de commande aux compilateurs de structure Flex
Vous pouvez acc&eacute;der directement par ligne de commande aux compilateurs de structure Flex (mxmlc et compc). Pour
plus d’informations, voir About the command-line compilers dans Using Adobe Flex 4.6.
Personnalisation des g&eacute;n&eacute;rations de projet
Flash Builder vous permet de g&eacute;n&eacute;rer des applications automatiquement en utilisant les param&egrave;tres de projet par
d&eacute;faut. L’utilisation des param&egrave;tres de projet par d&eacute;faut est l’approche recommand&eacute;e pour g&eacute;n&eacute;rer vos applications.
Vous pouvez toutefois personnaliser la g&eacute;n&eacute;ration de projets en fonction de vos besoins. Vous pouvez ainsi par
exemple s&eacute;lectionner un autre dossier de sortie par d&eacute;faut ou modifier les options du compilateur.
Jeu de composants (MX + Spark, Spark uniquement ou MX uniquement)
Par d&eacute;faut, les projets Flex mettent &agrave; la disposition des applications l’ensemble des composants, c’est-&agrave;-dire les
composants Spark fournis avec Flex 4 et les composants MX livr&eacute;s avec Flex 3.
Dans certains cas, vous pouvez utiliser uniquement les composants MX rendus disponibles avec Flex 3, ou uniquement
les composants Spark livr&eacute;s avec Flex 4. Vous pouvez par exemple disposez d’un projet Flex 3 dans lequel vous ne
voulez pas introduire les nouveaux composants Spark mais pour lequel vous souhaitez toutefois b&eacute;n&eacute;ficier des
avantages des fonctionnalit&eacute;s introduites avec Flex 4 et Flash Builder 4 (nouvelle syntaxe d’&eacute;tats, fonctions de
compilation am&eacute;lior&eacute;es et autres fonctionnalit&eacute;s de langage). Dans ce cas, activez l’option MX uniquement pour le jeu
de composants. L’activation de cette option supprime du chemin de g&eacute;n&eacute;ration toutes les biblioth&egrave;ques associ&eacute;es &agrave;
Spark. Lors de la conversion d’un projet Flex 4 en projet MX uniquement, Flash Builder n’apporte aucune
modification au code du projet. Vous devrez mettre &agrave; jour le code manuellement afin d’en supprimer toute r&eacute;f&eacute;rence
aux composants et aux biblioth&egrave;ques Spark.
De m&ecirc;me, si vous s&eacute;lectionnez le jeu de composants Spark uniquement, seuls les composants Spark sont utilis&eacute;s et les
biblioth&egrave;ques de type MX sont supprim&eacute;es du chemin de g&eacute;n&eacute;ration.
Derni&egrave;re mise &agrave; jour le 10/11/2011
106
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Liaison de la structure des applications
Par d&eacute;faut, les classes d’application pour Flex 4 ou version sup&eacute;rieure de la structure Flex utilisent la liaison
dynamique. Au lieu de compiler toutes les classes dans le fichier SWF de l’application (liaison statique), certaines
classes sont charg&eacute;es &agrave; partir de la biblioth&egrave;que partag&eacute;e &agrave; l’ex&eacute;cution (Runtime Shared Library, RSL). Les applications
cr&eacute;&eacute;es avec une liaison dynamique sont dot&eacute;es de fichiers SWF plus petits, ce qui permet de les t&eacute;l&eacute;charger plus
rapidement. En revanche, ces applications utilisent plus de m&eacute;moire, toutes les classes de la structure &eacute;tant charg&eacute;es,
y compris celles dont vous n’avez pas besoin. Pour plus d’informations, voir Biblioth&egrave;que partag&eacute;e &agrave; l’ex&eacute;cution.
Vous pouvez modifier les propri&eacute;t&eacute;s d’un projet afin de personnaliser ce comportement pour toutes les applications
d’un projet. Apr&egrave;s avoir s&eacute;lectionn&eacute; un projet, dans le menu de Flash Builder, choisissez Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin
de g&eacute;n&eacute;ration Flex &gt; Chemin d’acc&egrave;s &agrave; la biblioth&egrave;que.
Par d&eacute;faut, Flash Builder utilise le comportement par d&eacute;faut du SDK Flex pour la liaison de la structure. Pour Flex 4 et
versions sup&eacute;rieures, le comportement par d&eacute;faut est la liaison dynamique des RSL. pour Flex 3, de la liaison statique.
Utilisez la liste d&eacute;roulante Liaison de structure pour remplacer le comportement par d&eacute;faut.
Pour le SDK Flex 4.5 et versions sup&eacute;rieures de la structure Flex, les options suivantes sont activ&eacute;es par d&eacute;faut :
• V&eacute;rifier les condens&eacute;s RSL (recommand&eacute; en production)
V&eacute;rifie que le condens&eacute; de la biblioth&egrave;que RSL correspond &agrave; celui stock&eacute; dans l’application au moment de la
compilation lorsque l’application a &eacute;t&eacute; li&eacute;e &agrave; la biblioth&egrave;que RSL interdomaines. Pour plus d’informations, voir
About RSL digests.
• Supprimer les RSL non utilis&eacute;es
Supprime les RSL qui ne sont pas utilis&eacute;es au moment de la compilation. Seules les RSL utilis&eacute;es sont copi&eacute;es dans
le dossier de sortie. Cette option est uniquement disponible pour le SDK Flex 4.5 et versions sup&eacute;rieures de la
structure Flex, et non pour les structures Flex ant&eacute;rieures.
Vous pouvez toutefois charger de force un fichier RSL inutilis&eacute; au moment de la compilation en cliquant deux fois
sur le chemin d’acc&egrave;s &agrave; la biblioth&egrave;que du projet. S&eacute;lectionnez ensuite Charger de force le fichier RSL dans la bo&icirc;te
de dialogue Options de l’&eacute;l&eacute;ment de chemin d’acc&egrave;s &agrave; la biblioth&egrave;que.
Vous pouvez sp&eacute;cifier le domaine d’application dans lequel les biblioth&egrave;ques RSL interdomaines doivent &ecirc;tre
charg&eacute;es. Vous pouvez s&eacute;lectionner Par d&eacute;faut, Actif, Parent ou Sup&eacute;rieur comme domaine d’application.
Par exemple, si un module utilise une biblioth&egrave;que RSL sp&eacute;cifique, vous pouvez s&eacute;lectionner Actif comme domaine
d’application. Ensuite, la biblioth&egrave;que RSL sp&eacute;cifi&eacute;e est accessible seulement &agrave; ce module et pas &agrave; l’application qui
charge le module. Le d&eacute;chargement du module d&eacute;charge automatiquement &eacute;galement la biblioth&egrave;que RSL associ&eacute;e.
Remarque : les RSL interdomaines et les domaines d’application sont uniquement pris en charge dans le SDK Flex 4.5
et versions sup&eacute;rieures de la structure Flex, et non dans les structures Flex ant&eacute;rieures. Si vous importez un projet qui
a &eacute;t&eacute; cr&eacute;&eacute; avec une structure Flex faisant appel &agrave; des fichiers RSL standard, Flash Builder convertit automatiquement
ces fichiers RSL standard en fichiers RSL interdomaines.
Pour plus d’informations, voir Compilation avec des biblioth&egrave;ques RSL standard ou interdomaines dans Flash
Builder.
• Utilisez des biblioth&egrave;ques SWF RSL locales de d&eacute;bogage lors du d&eacute;bogage.
Utilise les biblioth&egrave;ques RSL locales lors du d&eacute;bogage de l’application. L’utilisation des biblioth&egrave;ques RSL locales
vous permet d’intervenir dans les fichiers RSL de d&eacute;bogage. Cette option est ignor&eacute;e lors de l’exportation d’une
version valid&eacute;e.
• D&eacute;terminer automatiquement l’ordre de la biblioth&egrave;que, en fonction des d&eacute;pendances
Derni&egrave;re mise &agrave; jour le 10/11/2011
107
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Si cette option est activ&eacute;e, Flash Builder d&eacute;termine l’ordre des biblioth&egrave;ques en fonction des d&eacute;pendances au sein
des biblioth&egrave;ques. Pour personnaliser l’ordre des biblioth&egrave;ques, d&eacute;sactivez cette option et indiquez l’ordre voulu &agrave;
l’aide des boutons Haut et Bas.
Activation et d&eacute;sactivation des g&eacute;n&eacute;rations automatiques
En configuration autonome, Flash Builder g&eacute;n&egrave;re vos projets automatiquement. Dans la configuration du plug-in,
s&eacute;lectionnez vous-m&ecirc;me cette option. Flash Builder est con&ccedil;u pour g&eacute;n&eacute;rer les projets automatiquement. La
d&eacute;sactivation de cette option emp&ecirc;che le compilateur de d&eacute;tecter les erreurs de syntaxe et d’afficher les avertissements
et les messages d’erreur au fur et &agrave; mesure de la saisie du code. Pour plus d’informations sur la g&eacute;n&eacute;ration manuelle de
projets, voir &laquo; Cr&eacute;ation manuelle de projets &raquo; &agrave; la page 109.
Effectuez l’une des op&eacute;rations suivantes :
• S&eacute;lectionnez Projet &gt; G&eacute;n&eacute;rer automatiquement.
• Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Espace de travail. S&eacute;lectionnez ou d&eacute;s&eacute;lectionnez
l’option G&eacute;n&eacute;rer automatiquement.
Cette option a une incidence sur tous les projets de l’espace de travail.
D&eacute;finition d’un dossier de sortie de projet
Lorsque vous cr&eacute;ez un projet dans Flash Builder, le r&eacute;sultat de la cr&eacute;ation est g&eacute;n&eacute;r&eacute; par d&eacute;faut dans le dossier de sortie.
Vous pouvez modifier le nom de ce dossier &agrave; la cr&eacute;ation du projet ou une fois le projet cr&eacute;&eacute;. Vous avez en outre la
possibilit&eacute; de cr&eacute;er un dossier ou de s&eacute;lectionner un dossier existant de l’espace de travail.
1 Dans l’Explorateur de packages Flex, s&eacute;lectionnez un projet.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
s&eacute;lectionnez Propri&eacute;t&eacute;s dans le menu contextuel.
La bo&icirc;te de dialogue des propri&eacute;t&eacute;s du projet s’affiche.
3 S&eacute;lectionnez la page Chemin de g&eacute;n&eacute;ration Flex.
4 Modifiez le dossier de sortie sp&eacute;cifi&eacute; en saisissant un nouveau nom ou en recherchant et s&eacute;lectionnant le dossier
existant du projet.
Remarque : le dossier de sortie d’une application ADEP Data Services ES ne peut pas &ecirc;tre modifi&eacute; de cette mani&egrave;re.
Son emplacement est en effet contr&ocirc;l&eacute; par le serveur et il est accessible uniquement par le biais du fichier Flexconfig.xml du projet.
5 Cliquez sur OK.
Le nouveau dossier de sortie remplace le dossier de sortie existant.
Important : la modification du nom du dossier de sortie entra&icirc;ne la suppression du dossier de sortie d’origine ainsi que
de l’ensemble de son contenu. R&eacute;g&eacute;n&eacute;rez le projet afin de recr&eacute;er le fichier d’application SWF et les fichiers d’enveloppe
HTML.
Modification d’un chemin de g&eacute;n&eacute;ration de projet
Chaque projet poss&egrave;de son propre chemin de g&eacute;n&eacute;ration compos&eacute; du chemin source et du chemin de biblioth&egrave;que (les
chemins de g&eacute;n&eacute;ration de projet de biblioth&egrave;que sont l&eacute;g&egrave;rement plus complexes. Pour plus d’informations, voir
&laquo; Projets de biblioth&egrave;que Flex &raquo; &agrave; la page 35.) Le chemin source correspond &agrave; l’emplacement des fichiers source MXML
et ActionScript du projet. Le chemin de biblioth&egrave;que correspond &agrave; l’emplacement des classes de la structure Flex de
base ainsi que des composants Flex personnalis&eacute;s que vous avez cr&eacute;&eacute;s (sous la forme de fichiers SWC).
Derni&egrave;re mise &agrave; jour le 10/11/2011
108
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Modification du chemin source
1 S&eacute;lectionnez un projet dans l’Explorateur de packages.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
s&eacute;lectionnez Propri&eacute;t&eacute;s dans le menu contextuel. La bo&icirc;te de dialogue des propri&eacute;t&eacute;s du projet appara&icirc;t.
3 S&eacute;lectionnez la page Chemin de g&eacute;n&eacute;ration Flex (dans le cadre d’un projet ActionScript, s&eacute;lectionnez la page
Chemin de g&eacute;n&eacute;ration ActionScript).
4 Cliquez sur le bouton Ajouter un dossier pour ajouter un dossier au chemin source.
5 Saisissez le nom du dossier ou cliquez sur le bouton Parcourir pour rechercher l’emplacement des classes
personnalis&eacute;es.
Vous pouvez &eacute;galement utiliser des variables de chemin afin d’&eacute;viter de saisir le chemin complet du syst&egrave;me de
fichiers. Vous pouvez saisir le nom d’une variable existante ou en cr&eacute;er une. Pour plus d’informations, voir
&laquo; Cr&eacute;ation d’une variable de chemin &raquo; &agrave; la page 108.
6 Apportez les modifications n&eacute;cessaires au chemin source, puis cliquez sur OK.
Modification du chemin de la biblioth&egrave;que
1 R&eacute;p&eacute;tez les &eacute;tapes 1 &agrave; 3 de la proc&eacute;dure pr&eacute;c&eacute;dente afin d’acc&eacute;der &agrave; la page des propri&eacute;t&eacute;s Chemin de g&eacute;n&eacute;ration
Flex.
2 Cliquez sur l’onglet Chemin d’acc&egrave;s &agrave; la biblioth&egrave;que.
Le chemin de la biblioth&egrave;que contient des r&eacute;f&eacute;rences aux classes de la structure Flex contenues dans des fichiers
SWC. Un fichier SWC est un fichier archive pour les composants Flex et les autres ressources. Pour plus
d’informations, voir &laquo; Utilisation des fichiers SWC dans le cadre des projets &raquo; &agrave; la page 231.
Vous pouvez modifier le chemin vers la structure ou, si vous avez cr&eacute;&eacute; des composants Flex personnalis&eacute;s, ajouter
de nouveaux dossiers ou fichiers SWC au chemin de la biblioth&egrave;que. Vous avez &eacute;galement la possibilit&eacute; de
supprimer des &eacute;l&eacute;ments du chemin.
3 Apportez les modifications n&eacute;cessaires au chemin de la biblioth&egrave;que, puis cliquez sur OK.
Cr&eacute;ation d’une variable de chemin
Vous pouvez &eacute;tablir des liens vers des ressources en d&eacute;finissant des variables de chemin. Vous &eacute;vitez ainsi de devoir
saisir le chemin complet d’un dossier local ou d’un dossier r&eacute;seau dans lequel vous enregistrez les fichiers. D&eacute;finissez
par exemple une variable de chemin nomm&eacute;e Classes, puis sp&eacute;cifiez le chemin vers un dossier du syst&egrave;me de fichiers.
La variable Classes peut ensuite &ecirc;tre s&eacute;lectionn&eacute;e comme &eacute;tant l’emplacement du nouveau dossier auquel la relation a
&eacute;t&eacute; &eacute;tablie. Si le dossier est d&eacute;plac&eacute;, il vous suffit de mettre &agrave; jour l’emplacement dans la variable de chemin d&eacute;finie pour
que tous les projets reli&eacute;s &agrave; la variable Classes puissent continuer &agrave; acc&eacute;der aux ressources.
D&eacute;finition ou cr&eacute;ation d’une variable de chemin
1 S&eacute;lectionnez un projet dans l’Explorateur de packages.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Macintosh), puis
s&eacute;lectionnez Propri&eacute;t&eacute;s dans le menu contextuel. La bo&icirc;te de dialogue des propri&eacute;t&eacute;s du projet appara&icirc;t.
3 S&eacute;lectionnez la page Chemin de g&eacute;n&eacute;ration Flex (dans le cadre d’un projet ActionScript, s&eacute;lectionnez la page
Chemin de g&eacute;n&eacute;ration ActionScript).
4 Vous pouvez cr&eacute;er une variable pour chaque &eacute;l&eacute;ment du chemin (dont les dossiers du chemin source et les dossiers
SWC, les projets et les fichiers SWC du chemin de la biblioth&egrave;que). A titre d’exemple, cliquez sur le bouton Ajouter
un dossier dans l’onglet Chemin source. La bo&icirc;te de dialogue d’ajout d’un dossier appara&icirc;t.
Derni&egrave;re mise &agrave; jour le 10/11/2011
109
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
5 Saisissez une variable de chemin conform&eacute;ment au format suivant : ${nom_de_la_variable_de_chemin}.
Remarque : la variable doit exister, sinon la saisie du chemin &eacute;choue. Pour obtenir la liste des variables de ressource
existantes, s&eacute;lectionnez Fen&ecirc;tre &gt; Pr&eacute;f&eacute;rences dans le menu principal, puis G&eacute;n&eacute;ral &gt; Espace de travail &gt; Ressources
li&eacute;es. Les variables de ressources li&eacute;es peuvent &eacute;galement &ecirc;tre g&eacute;r&eacute;es &agrave; partir de cette page de propri&eacute;t&eacute;s.
6 Cliquez sur OK pour ajouter la variable au chemin.
Options de g&eacute;n&eacute;ration avanc&eacute;es
Flash Builder offre des options avanc&eacute;es pour la personnalisation des g&eacute;n&eacute;rations de projet. Vous pouvez par exemple
g&eacute;n&eacute;rer des projets manuellement, modifier l’ordre par d&eacute;faut de g&eacute;n&eacute;ration des projets dans l’espace de travail et cr&eacute;er
des g&eacute;n&eacute;rateurs personnalis&eacute;s avec l’utilitaire Apache Ant.
Cr&eacute;ation manuelle de projets
La g&eacute;n&eacute;ration manuelle de projets vous permet de contr&ocirc;ler la dur&eacute;e et l’&eacute;tendue de la g&eacute;n&eacute;ration. Vous pouvez par
exemple g&eacute;n&eacute;rer un seul projet ou un ensemble de projets dans l’espace de travail. Vous pouvez &eacute;galement d&eacute;finir un
jeu de documents de projets ou de ressources de projet et ne g&eacute;n&eacute;rer que ces projets et ces ressources. Un jeu de
documents est une collection de ressources d’espace de travail (projets, fichiers et dossiers) pouvant &ecirc;tre s&eacute;lectionn&eacute;es
et group&eacute;es en fonction de l’utilisation qui en est faite. Pour plus d’informations sur les jeux de documents, voir
&laquo; Cr&eacute;ation de jeux de documents &raquo; &agrave; la page 40.
Les options de g&eacute;n&eacute;ration se situent dans le menu Projet, ainsi que l’illustre l’exemple suivant.
G&eacute;n&eacute;ration d’un projet unique
1 Dans l’Explorateur de packages, s&eacute;lectionnez le projet que vous souhaitez g&eacute;n&eacute;rer.
2 S&eacute;lectionnez Projet &gt; G&eacute;n&eacute;rer le projet dans le menu principal.
Le projet s&eacute;lectionn&eacute; est g&eacute;n&eacute;r&eacute;. Des fichiers d’application valid&eacute;s ou d&eacute;bogu&eacute;s (nouveaux ou mis &agrave; jour) sont
ajout&eacute;s au dossier de sortie du projet.
Remarque : le programme vous invite &agrave; enregistrer les fichiers de projet qui ne l’ont pas encore &eacute;t&eacute; avant le d&eacute;but de
la g&eacute;n&eacute;ration. Pour &eacute;viter l’affichage de cette invite, activez l’enregistrement automatique des fichiers avant le d&eacute;but
de la g&eacute;n&eacute;ration dans les pr&eacute;f&eacute;rences de l’espace de travail.
G&eacute;n&eacute;ration de tous les projets dans l’espace de travail
❖ S&eacute;lectionnez Projet &gt; G&eacute;n&eacute;rer tout dans le menu principal.
Tous les projets de l’espace de travail sont g&eacute;n&eacute;r&eacute;s. Les fichiers d’application sont ajout&eacute;s aux dossiers de sortie des
projets respectifs. Dans la mesure o&ugrave; vous n’avez pas d&eacute;fini l’enregistrement automatique des fichiers avant le d&eacute;but
de la g&eacute;n&eacute;ration, le programme vous invite &agrave; les enregistrer.
Derni&egrave;re mise &agrave; jour le 10/11/2011
110
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
G&eacute;n&eacute;ration d’un jeu de documents
Utilisez l’une des m&eacute;thodes suivantes :
• S&eacute;lectionnez Projet &gt; G&eacute;n&eacute;rer un jeu de documents &gt; S&eacute;lectionner un jeu de documents dans le menu principal.
Cliquez sur Nouveau pour cr&eacute;er un jeu de documents. Pour plus d’informations sur la cr&eacute;ation d’un jeu de
documents, voir &laquo; Cr&eacute;ation de jeux de documents &raquo; &agrave; la page 40.
• Choisissez un jeu de documents existant en s&eacute;lectionnant Projet &gt; G&eacute;n&eacute;rer un jeu de documents &gt; S&eacute;lectionner un
jeu de documents dans le menu principal.
Tous les projets du jeu de documents sont g&eacute;n&eacute;r&eacute;s. Les fichiers d’application sont ajout&eacute;s au dossier de sortie du projet.
Enregistrement automatique des ressources du projet
Lorsque vous g&eacute;n&eacute;rez des projets manuellement, le programme vous invite &agrave; enregistrer toutes les ressources avant de
d&eacute;buter la g&eacute;n&eacute;ration. Pour &eacute;viter l’affichage de cette invite, activez l’enregistrement automatique des ressources du
projet dans les pr&eacute;f&eacute;rences de l’espace de travail.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Espace de travail.
2 S&eacute;lectionnez l’option Sauvegarder automatiquement avant la g&eacute;n&eacute;ration.
3 (Facultatif) Vous pouvez modifier la fr&eacute;quence d’enregistrement des ressources en saisissant une valeur (en
minutes) pour Intervalle de sauvegarde du plan de travail.
Ex&eacute;cution d’une g&eacute;n&eacute;ration nettoy&eacute;e
Une fois un projet cr&eacute;&eacute;, les g&eacute;n&eacute;rations ult&eacute;rieures n’impliqueront que les ressources ajout&eacute;es ou modifi&eacute;es. Une
g&eacute;n&eacute;ration nettoy&eacute;e permet de forcer le compilateur Flash Builder &agrave; r&eacute;g&eacute;n&eacute;rer toutes les ressources d’un projet. Vous
pouvez y recourir par exemple pour &eacute;liminer toutes les sources potentielles d’un probl&egrave;me survenu au cours du test de
l’application.
1 S&eacute;lectionnez Projet &gt; Nettoyer dans le menu principal.
2 Choisissez le ou les projets dont vous souhaitez &eacute;liminer les fichiers de g&eacute;n&eacute;ration pour les r&eacute;g&eacute;n&eacute;rer.
3 Cliquez sur OK.
Modification de l’ordre de g&eacute;n&eacute;ration d’un projet
Flash Builder permet de cr&eacute;er des relations entre les projets ouverts dans l’espace de travail. Vous pouvez par exemple
importer les classes ActionScript d’un projet &agrave; l’autre. La cr&eacute;ation de relations entre les projets a une incidence sur
l’ordre dans lequel les projets sont g&eacute;n&eacute;r&eacute;s.
Par d&eacute;faut, le compilateur g&eacute;n&egrave;re des projets reli&eacute;s dans l’ordre garantissant la g&eacute;n&eacute;ration correcte de tous les projets.
Prenons l’exemple de deux projets, dont le premier fait r&eacute;f&eacute;rence &agrave; des classes contenues dans le second : le second
projet est g&eacute;n&eacute;r&eacute; en premier. Dans la plupart des cas, le compilateur g&eacute;n&egrave;re les projets dans l’ordre requis et les
applications sont cr&eacute;&eacute;es correctement sans qu’aucune intervention ne soit n&eacute;cessaire.
Vous avez cependant la possibilit&eacute; de modifier l’ordre de g&eacute;n&eacute;ration. Cette modification peut s’av&eacute;rer n&eacute;cessaire par
exemple si vous avez cr&eacute;&eacute; un g&eacute;n&eacute;rateur personnalis&eacute; Ant et que vous l’avez associ&eacute; &agrave; un projet de l’espace de travail
que vous devez g&eacute;n&eacute;rer avant les autres projets. Pour plus d’informations sur la cr&eacute;ation de g&eacute;n&eacute;rateurs personnalis&eacute;s,
voir &laquo; Personnalisation des g&eacute;n&eacute;rations avec Apache Ant &raquo; &agrave; la page 111.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Espace de travail &gt; Ordre de g&eacute;n&eacute;ration.
La bo&icirc;te de dialogue Ordre de g&eacute;n&eacute;ration pr&eacute;sente les options suivantes.
Utiliser l’ordre de g&eacute;n&eacute;ration par d&eacute;faut : l’ordre de g&eacute;n&eacute;ration par d&eacute;faut d&eacute;pend des d&eacute;pendances entre les
projets. Il est g&eacute;r&eacute; par le compilateur.
Derni&egrave;re mise &agrave; jour le 10/11/2011
111
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Ordre de g&eacute;n&eacute;ration du projet : vous pouvez d&eacute;finir manuellement l’ordre dans lequel tous les projets de l’espace
de travail doivent &ecirc;tre g&eacute;n&eacute;r&eacute;s. Il est &eacute;galement possible de supprimer un projet de la liste d&eacute;finissant l’ordre de
g&eacute;n&eacute;ration. Dans ce cas, le projet sera g&eacute;n&eacute;r&eacute; apr&egrave;s tous les autres projets de la liste.
It&eacute;rations maximales lors de la g&eacute;n&eacute;ration avec des cycles : en pr&eacute;sence de r&eacute;f&eacute;rences cycliques dans un projet (ce
que nous vous conseillons d’&eacute;viter), vous pouvez d&eacute;finir le nombre de tentatives de g&eacute;n&eacute;ration, afin de permettre
au compilateur de g&eacute;n&eacute;rer tous les projets correctement. Par d&eacute;faut, le nombre maximal d’it&eacute;rations est 10.
2 Modifiez si n&eacute;cessaire l’ordre de g&eacute;n&eacute;ration, puis cliquez sur OK.
Personnalisation des g&eacute;n&eacute;rations avec Apache Ant
La cr&eacute;ation d’un g&eacute;n&eacute;rateur personnalis&eacute; vous permet de modifier et d’&eacute;tendre le processus de g&eacute;n&eacute;ration standard.
Flash Builder comporte un script de g&eacute;n&eacute;ration standard intervenant dans la compilation des applications. Vous
pouvez, le cas &eacute;ch&eacute;ant, cr&eacute;er des scripts de g&eacute;n&eacute;ration personnalis&eacute;s gr&acirc;ce &agrave; Apache Ant, outil de g&eacute;n&eacute;ration Java &agrave; code
source libre.
Vous pouvez appliquer les g&eacute;n&eacute;rateurs personnalis&eacute;s &agrave; tous les types de projet Flash Builder.
Cr&eacute;ation d’un g&eacute;n&eacute;rateur
1 Dans l’Explorateur de packages, s&eacute;lectionnez un projet. Cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Ctrl enfonc&eacute;e (Macintosh) pour afficher le menu contextuel et s&eacute;lectionnez Propri&eacute;t&eacute;s.
2 S&eacute;lectionnez la page de propri&eacute;t&eacute;s G&eacute;n&eacute;rateurs. La liste sera plus ou moins longue en fonction du nombre de plug-
ins que vous utilisez. Flash Builder fournit un g&eacute;n&eacute;rateur nomm&eacute; Flex qui ne peut pas &ecirc;tre modifi&eacute;.
3 S&eacute;lectionnez Nouveau.
4 Dans la bo&icirc;te de dialogue S&eacute;lection d’un type de configuration, choisissez le type de configuration appropri&eacute;. Flash
Builder prend en charge le type Programme. S&eacute;lectionnez-le, puis cliquez sur OK pour poursuivre. D&eacute;finissez les
propri&eacute;t&eacute;s du nouveau g&eacute;n&eacute;rateur dans la page des propri&eacute;t&eacute;s et r&eacute;f&eacute;rencez le script Ant (fichier XML).
5 Cliquez sur OK pour appliquer les valeurs d&eacute;finies au projet.
Pour plus d’informations sur l’utilisation des scripts de g&eacute;n&eacute;ration Ant, voir la documentation Eclipse disponible &agrave;
l’adresse help.eclipse.org/help31/index.jsp.
Utilisation de plusieurs SDK dans Flash Builder
Flash Builder permet de modifier la version du SDK utilis&eacute; pour la compilation des projets. Vous pouvez s&eacute;lectionner
le SDK &agrave; la cr&eacute;ation ou en cours de d&eacute;veloppement du projet.
Le SDK se compose d’une structure et du compilateur. Le SDK Flex 4 signifie que vous utilisez la version 4 des fichiers
SWC de la structure Flex et la version 4 du compilateur Flex. Vous ne pouvez pas utiliser le compilateur Flex 4 avec les
fichiers SWC de la structure Flex 3, par exemple.
La possibilit&eacute; de modifier le SDK est utile en pr&eacute;sence d’un projet d&eacute;velopp&eacute; avec Flex Builder 3 (qui utilise le SDK Flex
3) alors que vous ex&eacute;cutez la version 4 de Flash Builder (qui utilise par d&eacute;faut le SDK Flex 4). En s&eacute;lectionnant un SDK
ant&eacute;rieur pour la g&eacute;n&eacute;ration, vous pouvez pr&eacute;server la compatibilit&eacute; avec la derni&egrave;re version du SDK des projets qui
n’ont pas &eacute;t&eacute; mis &agrave; jour. En outre, si vous travaillez actuellement sur un projet destin&eacute; au SDK Flex 3, mais souhaitez
utiliser les fonctionnalit&eacute;s de Flash Builder 4, vous pouvez mettre &agrave; niveau votre version de Flash Builder, mais
s&eacute;lectionnez dans ce cas le SDK ant&eacute;rieur comme SDK par d&eacute;faut.
La modification du SDK apr&egrave;s le d&eacute;veloppement d’un projet entra&icirc;ne une r&eacute;g&eacute;n&eacute;ration compl&egrave;te, et non une
g&eacute;n&eacute;ration incr&eacute;mentielle. Flash Builder signale alors toute diff&eacute;rence qui aurait g&eacute;n&eacute;r&eacute; des erreurs de compilateur,
tout comme si le projet avait &eacute;t&eacute; d&eacute;velopp&eacute; avec le SDK d’origine.
Derni&egrave;re mise &agrave; jour le 10/11/2011
112
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Flash Builder r&eacute;g&eacute;n&egrave;re &eacute;galement tous les fichiers de prise en charge des projets, dont les fichiers de gestion de
l’historique et de liaisons profondes utilis&eacute;s par l’enveloppe HTML. Pour les projets SDK Flex 4, Flash Builder cr&eacute;e les
fichiers compatibles de gestion des historiques history.swf, history.html et history.js dans le r&eacute;pertoire des mod&egrave;les
HTML. Pour les projets SDK Flex 3, Flash Builder cr&eacute;e les fichiers compatibles de liaisons profondes history.htm et
history.js et historyFrame.html dans le r&eacute;pertoire html-templates/history.
Les options pr&eacute;sentes dans Flash Builder varient en outre en fonction du SDK s&eacute;lectionn&eacute;. Si vous ajoutez par exemple
un module &agrave; un projet utilisant le SDK Flex 3, Flash Builder ne vous propose pas d’optimiser le module. Cette
op&eacute;ration devra &ecirc;tre effectu&eacute;e manuellement.
Pour plus d’informations sur les diff&eacute;rences entre les SDK Flex 4 et Flex 3, voir Compatibilit&eacute; ascendante.
Flash Builder utilise le SDK par d&eacute;faut pour les projets Flex cr&eacute;&eacute;s. Le SDK par d&eacute;faut est la derni&egrave;re version fournie
avec Flash Builder. Vous pouvez toutefois s&eacute;lectionner tout SDK r&eacute;pertori&eacute; dans la liste des SDK disponibles dans
Flash Builder.
Lorsque vous cr&eacute;ez un projet de biblioth&egrave;que Flex ou un projet ActionScript, vous pouvez s&eacute;lectionner le SDK &agrave; utiliser
dans les bo&icirc;tes de dialogue Nouveau projet de biblioth&egrave;que Flex et Nouveau projet ActionScript.
Ajout d’un nouveau SDK Flex &agrave; la liste des SDK disponibles
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; SDK Flex install&eacute;s.
Elle r&eacute;pertorie les SDK install&eacute;s. Le nom du SDK par d&eacute;faut est coch&eacute;.
2 Cliquez sur Ajouter.
3 Saisissez l’emplacement du SDK dans le champ Emplacement du SDK Flex.
4 Attribuez-lui un nom dans le champ Nom du SDK Flex. Ne saisissez pas le nom d’un SDK existant.
5 Cliquez sur OK pour enregistrer vos modifications.
6 Cliquez de nouveau sur OK pour ajouter le nouveau SDK &agrave; la liste des SDK disponibles. Cette liste est g&eacute;r&eacute;e dans
l’espace de travail Flash Builder pour tous les projets Flex. Au prochain projet cr&eacute;&eacute;, la liste des SDK disponibles
comportera &eacute;galement ce nouveau SDK.
Modification de la version de SDK du projet en cours
1 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s.
2 Choisissez Compilateur Flex.
3 Cliquez sur Utiliser un SDK sp&eacute;cifique.
4 S&eacute;lectionnez un SDK dans la liste d&eacute;roulante. Si elle ne contient pas le SDK recherch&eacute;, cliquez sur le lien Configurer
les SDK Flex.
5 Cliquez sur OK.
Flash Builder applique le nouveau SDK au projet en cours. Des erreurs et des avertissements peuvent survenir si le
projet utilise un code qui n’est pas compatible avec le nouveau SDK.
S&eacute;lection d’un nouveau SDK par d&eacute;faut
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; SDK Flex install&eacute;s.
Le nom du SDK par d&eacute;faut est coch&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
113
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
2 Cochez la case correspondant &agrave; un autre SDK pour le d&eacute;finir comme SDK par d&eacute;faut. Ce SDK sera appliqu&eacute; &agrave; tout
projet, y compris celui en cours, pour lequel l’option Utiliser le SDK par d&eacute;faut a &eacute;t&eacute; s&eacute;lectionn&eacute;e dans la bo&icirc;te de
dialogue Compilateur Flex. Un projet param&eacute;tr&eacute; pour utiliser un SDK sp&eacute;cifique n’est pas concern&eacute; par cette
modification, et ce m&ecirc;me si vous modifiez le SDK par d&eacute;faut de l’espace de travail.
3 Cliquez sur OK pour enregistrer vos modifications.
4 Cliquez &agrave; nouveau sur le bouton OK.
G&eacute;n&eacute;ration par ligne de commande Flash Builder &agrave; l’aide d’Apache Ant
Flash Builder fournit la t&acirc;che Ant &lt;fb.exportReleaseBuild&gt;. Utilisez-la pour impl&eacute;menter des g&eacute;n&eacute;rations par ligne de
commande qui synchronisent les param&egrave;tres de g&eacute;n&eacute;ration d’un d&eacute;veloppeur avec une g&eacute;n&eacute;ration nocturne. Vous
pouvez &eacute;galement utiliser la t&acirc;che &lt;mxmlc&gt; dans les scripts personnalis&eacute;s pour la g&eacute;n&eacute;ration nocturne.
Remarque : la prise en charge de la g&eacute;n&eacute;ration par ligne de commande n’est disponible que sur Flash Builder Premium.
T&acirc;che &lt;fb.exportReleaseBuild&gt;
La t&acirc;che &lt;fb.exportReleaseBuild&gt; garantit que les param&egrave;tres de g&eacute;n&eacute;ration nocturne correspondent exactement &agrave;
ceux utilis&eacute;s par les d&eacute;veloppeurs pendant leur travail de la journ&eacute;e.
Par exemple, si un d&eacute;veloppeur modifie le chemin de la biblioth&egrave;que d’un projet Flex, le nouveau chemin est &eacute;crit dans
le projet Flash Builder. A son ex&eacute;cution par l’ordinateur de g&eacute;n&eacute;ration nocturne, la t&acirc;che &lt;fb.exportReleaseBuild&gt;
charge le projet Flash Builder et tous ses param&egrave;tres.
La t&acirc;che &lt;fb.exportReleaseBuild&gt; pr&eacute;sente un autre avantage : elle prend automatiquement en charge les t&acirc;ches de
maintenance suppl&eacute;mentaires qui font normalement partie d’une g&eacute;n&eacute;ration Flash Builder. Par exemple :
• La compilation automatique des projets de biblioth&egrave;que associ&eacute;s
• La copie de ressources, telles que les fichiers JPEG, dans le r&eacute;pertoire de sortie
• La copie du mod&egrave;le HTML, y compris le remplacement des macros en fonction des r&eacute;sultats de compilation
(comme la largeur et la hauteur)
Remarque : la t&acirc;che &lt;fb.exportReleaseBuild&gt; n&eacute;cessite l’installation de Flash Builder sur l’ordinateur de g&eacute;n&eacute;ration
nocturne.
T&acirc;che &lt;mxmlc&gt;
Si vous &eacute;crivez un script personnalis&eacute; qui fait appel &agrave; la t&acirc;che &lt;mxmlc&gt; (un script Ant, par exemple), vous n’avez pas
besoin d’installer Flash Builder sur l’ordinateur de g&eacute;n&eacute;ration. Le SDK Flex doit toutefois s’y trouver. L’ordinateur de
g&eacute;n&eacute;ration peut par cons&eacute;quent se trouver sur une plateforme Linux.
Toutefois, l’inconv&eacute;nient de cette approche r&eacute;side dans le fait que vous avez deux jeux de param&egrave;tres de g&eacute;n&eacute;ration &agrave;
synchroniser. En d’autres termes, vous avez un jeu dans Flash Builder, utilis&eacute; par les d&eacute;veloppeurs dans leur travail
quotidien, et un autre jeu sur votre ordinateur de g&eacute;n&eacute;ration nocturne.
Utilisation de la t&acirc;che &lt;fb.exportReleaseBuild&gt;
1 Installez Flash Builder sur un ordinateur de g&eacute;n&eacute;ration.
2 Ecrivez build.xml avec fb.exportReleaseBuild comme cible. Par exemple :
Derni&egrave;re mise &agrave; jour le 10/11/2011
114
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
&lt;?xml version=&quot;1.0&quot;?&gt;
&lt;project default=&quot;main&quot;&gt;
&lt;target name=&quot;main&quot;&gt;
&lt;fb.exportReleaseBuild project=&quot;MyProject&quot; /&gt;
&lt;/target&gt;
&lt;/project&gt;
build.xml indique qu’une g&eacute;n&eacute;ration par ligne de commande du projet Flex doit &ecirc;tre ex&eacute;cut&eacute;e avec les param&egrave;tres
enregistr&eacute;s dans les fichiers du projet. Pour plus d’informations sur les param&egrave;tres disponibles, voir &laquo; Param&egrave;tres
de la t&acirc;che fb.exportReleaseBuild &raquo; &agrave; la page 115.
3 Cr&eacute;ez un script de g&eacute;n&eacute;ration nocturne qui demande &agrave; Eclipse de rechercher un fichier de g&eacute;n&eacute;ration et d’ex&eacute;cuter
sa cible.
Les exemples suivants indiquent build.xml comme fichier de g&eacute;n&eacute;ration, qui ex&eacute;cute MyTarget.
Si le script de la g&eacute;n&eacute;ration nocturne se trouve sur une plateforme Macintosh, vous pouvez ex&eacute;cuter le script
suivant :
WORKSPACE=&quot;$HOME/Documents/Adobe Flash Builder&quot;
# works with either FlashBuilder.app or Eclipse.app
&quot;/Applications/Adobe Flash Builder/FlashBuilder.app/Contents/MacOS/FlashBuilder&quot; \
--launcher.suppressErrors \
-noSplash \
-application org.eclipse.ant.core.antRunner \
-data &quot;$WORKSPACE&quot; \
-file &quot;$(pwd)/build.xml&quot; MyTarget
Si la g&eacute;n&eacute;ration nocturne est effectu&eacute;e sur une plateforme Windows, vous pouvez ex&eacute;cuter le fichier de commandes
suivant :
set WORKSPACE=%HOMEPATH%\Adobe Flash Builder
REM works with either FlashBuilderC.exe or eclipsec.exe
&quot;C:\Program Files\Adobe\Adobe Flash Builder 4.6\FlashBuilderC.exe&quot; ^
--launcher.suppressErrors ^
-noSplash ^
-application org.eclipse.ant.core.antRunner ^
-data &quot;%WORKSPACE%&quot; ^
-file &quot;%cd%\build.xml&quot; MyTarget
Propri&eacute;t&eacute; Ant fb.running
La propri&eacute;t&eacute; Ant fb.running a la valeur true lorsque Flash Builder est en cours d’ex&eacute;cution. Vous pouvez utiliser cette
propri&eacute;t&eacute; lorsque vous ex&eacute;cutez des scripts dans Flash Builder. Par exemple :
&lt;target name=&quot;myFlashBuilderTasks&quot; if=&quot;fb.running&quot;&gt;
&lt;fb.exportReleaseBuild ... /&gt;
&lt;/target&gt;
T&acirc;ches Ant d’Eclipse
Eclipse propose plusieurs t&acirc;ches Ant que vous pouvez incorporer comme cibles dans le script de g&eacute;n&eacute;ration. Par
exemple :
• eclipse.incrementalBuild
• elicpse.refreshLocal
• eclipse.convertpath
Derni&egrave;re mise &agrave; jour le 10/11/2011
115
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Pour plus d’informations sur ces scripts, voir la documentation Eclipse.
Param&egrave;tres de la t&acirc;che fb.exportReleaseBuild
Attribut
Description
Obligatoire ?
Valeur par d&eacute;faut
application
Nom de l’application &agrave; compiler. Vous pouvez sp&eacute;cifier Non
simplement le nom de l’application, sans chemin d’acc&egrave;s
ou extension (app1, par exemple). Pour &eacute;viter toute
ambigu&iuml;t&eacute; de nom, vous pouvez sp&eacute;cifier un chemin
d’acc&egrave;s complet par rapport &agrave; la racine du projet
(src/app1.mxml, par exemple). Pour compiler toutes les
applications, sp&eacute;cifiez &laquo; * &raquo; ou omettez cet attribut.
Lorsque vous ex&eacute;cutez un projet AIR, vous ne pouvez
sp&eacute;cifier qu’une seule application. La valeur &laquo; * &raquo; n’est
pas autoris&eacute;e.
Application par d&eacute;faut du projet.
basefilename
Pour les projets mobiles et de bureau AIR : nom du
package &agrave; exporter. Sp&eacute;cifiez le nom du package sans
pr&eacute;ciser l’extension de fichier.
Oui
Nom de l’application s&eacute;lectionn&eacute;e.
certificate
Pour les projets mobiles et AIR : lors de l’export d’un
fichier AIR ou d’un fichier de programme d’installation
natif, chemin du certificat utilis&eacute; pour signer le package.
Non
Sans objet
Remarque : en cas d’omission, la valeur de l’attribut de
certificat pr&eacute;sente dans le fichier .actionScriptProperties
du projet est utilis&eacute;e. Si l’attribut de certificat n’existe pas
dans le fichier .actionScriptProperties, un message
d’erreur s’affiche.
destdir
Sp&eacute;cifie le dossier de sortie dans lequel exporter le
Non
package valid&eacute;. Le dossier peut &ecirc;tre un chemin relatif ou
absolu. Si vous sp&eacute;cifiez un chemin relatif, il est relatif par
rapport &agrave; la racine du projet.
&laquo; bin-release &raquo; pour les projets Web et
&laquo;&raquo; (indique la racine du projet) pour
tous les autres types de projets
failonerror
Indique si des erreurs de compilation provoquent l’&eacute;chec Non
de la g&eacute;n&eacute;ration.
true
locale
Indique la langue, par exemple fr-FR. Cette valeur est
transmise au compilateur &agrave; l’aide de l’identifiant -locale
du compilateur. Si sp&eacute;cifi&eacute;e, cette valeur remplace la
langue indiqu&eacute;e dans le champ Arguments de
compilateur suppl&eacute;mentaires de Flash Builder.
Non
Sans objet
packagetype
Pour les projets mobiles et de bureau AIR : sp&eacute;cifie le
type de package &agrave; utiliser lors de l’export du package
valid&eacute;.
Oui
Sans objet
Pour les projets mobiles, vous pouvez sp&eacute;cifier les types
&laquo; air &raquo;, &laquo; airi &raquo; ou &laquo; platform &raquo;. Si vous sp&eacute;cifiez &laquo; air &raquo;, un
seul fichier AIR commun &agrave; toutes les plateformes est
g&eacute;n&eacute;r&eacute;. Si vous sp&eacute;cifiez &laquo; airi &raquo;, un fichier airi est g&eacute;n&eacute;r&eacute;
pour chaque plateforme. Si vous sp&eacute;cifiez &laquo; platform &raquo;,
un fichier sp&eacute;cifique est g&eacute;n&eacute;r&eacute; pour chaque plateforme.
Par exemple, un fichier APK est g&eacute;n&eacute;r&eacute; pour la
plateforme Android et un fichier IPA est g&eacute;n&eacute;r&eacute; pour la
plateforme iOS.
Dans le cas de projets de bureau AIR, vous pouvez
sp&eacute;cifier les types de package &laquo; air &raquo;, &laquo; airi &raquo; ou &laquo; native &raquo;.
Chaque option g&eacute;n&egrave;re un seul fichier.
Derni&egrave;re mise &agrave; jour le 10/11/2011
116
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Attribut
Description
Obligatoire ?
Valeur par d&eacute;faut
password
Pour les projets AIR uniquement : le mot de passe du
certificat qui est utilis&eacute; pour signer le fichier AIR. Si cet
argument est omis, un message d’erreur s’affiche.
Non
Sans objet
Pour les projets mobiles uniquement : sp&eacute;cifie la
Oui
plateforme cible vers laquelle exporter la version valid&eacute;e.
Vous pouvez sp&eacute;cifier la plateforme en tant que
&laquo; android &raquo;, &laquo; ios &raquo; ou &laquo; qnx &raquo;. Utilisez une liste s&eacute;par&eacute;e
par des virgules pour sp&eacute;cifier plusieurs plateformes.
Sans objet
Avertissement : l’utilisation d’une valeur litt&eacute;rale pour
un mot de passe risque de compromettre la s&eacute;curit&eacute;.
platform
Remarque : dans le cas d’un projet mobile avec le type
de package &laquo; air &raquo;, cet attribut n’est pas requis.
project
Projet &agrave; g&eacute;n&eacute;rer. Indiquez le nom d’un projet dans
Oui
l’espace de travail Flash Builder, sans chemin d’acc&egrave;s. Par
exemple : &laquo; MonProjetFlex &raquo;.
Sans objet
publishsource
Indique si la source de l’application doit &ecirc;tre publi&eacute;e, ce
qui permet &agrave; l’utilisateur d’afficher les fichiers source &agrave;
l’aide du menu contextuel Afficher la source.
Non
false
timestamp
Pour les projets AIR uniquement : indique si le fichier AIR Non
g&eacute;n&eacute;r&eacute; inclut un horodatage.
false
Remarque : en cas d’omission, la valeur de l’attribut
d’horodatage pr&eacute;sente dans le fichier
.actionScriptProperties du projet est utilis&eacute;e. Si l’attribut
d’horodatage n’existe pas dans le fichier
.actionScriptProperties du projet, la valeur par d&eacute;faut
&laquo; false &raquo; est utilis&eacute;e.
verbose
La t&acirc;che &lt;fb.exportReleaseBuild&gt; g&eacute;n&egrave;re des
informations suppl&eacute;mentaires. Par exemple, elle
r&eacute;pertorie les fichiers qui ont &eacute;t&eacute; assembl&eacute;s dans le
fichier AIR et la dur&eacute;e de chaque &eacute;tape du processus.
Non
false
Sp&eacute;cification des attributs sp&eacute;cifiques &agrave; la plateforme pour les projets mobiles
Vous pouvez exporter les packages valid&eacute;s simultan&eacute;ment vers plusieurs plateformes en sp&eacute;cifiant des attributs
sp&eacute;cifiques &agrave; la plateforme. Vous pouvez utiliser les attributs sp&eacute;cifiques &agrave; la plateforme en ajoutant le pr&eacute;fixe
sp&eacute;cifique &agrave; la plateforme. Par exemple, pour utiliser l’attribut &laquo; certificate &raquo; pour la plateforme Android, sp&eacute;cifiez
&laquo; android.certificate &raquo; et pour la plateforme iOS, sp&eacute;cifiez &laquo; ios.certificate &raquo;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
117
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Plateforme Android
Attribut
Description
Obligatoire ?
android.airDownloadURL
URL de t&eacute;l&eacute;chargement de l’environnement d’ex&eacute;cution AIR si
celui-ci n’est pas install&eacute; sur un p&eacute;riph&eacute;rique de l’utilisateur au
lancement de l’application.
Non
Remarque : si vous ne sp&eacute;cifiez pas cet attribut, l’URL Android
Market par d&eacute;faut est utilis&eacute;e.
android.certificate
Chemin du certificat utilis&eacute; pour signer le fichier APK.
Oui, si vous n’avez pas d&eacute;fini le
chemin de certificat
Vous sp&eacute;cifiez cet attribut lorsque vous d&eacute;finissez l’attribut
correspondant &agrave; la plateforme
&laquo; packagetype &raquo; sur &laquo; platform &raquo; et que l’une des plateformes cibles Android dans le fichier
est Android.
.actionScriptProperties.
android.password
Mot de passe du certificat utilis&eacute; pour signer le fichier APK. Si cet
attribut est omis, un message d’erreur s’affiche.
Oui
Attribut
Description
Obligatoire ?
ios.certificate
Chemin du certificat (extension du fichier .p12) utilis&eacute; pour signer
le fichier IPA.
Oui, si vous n’avez pas d&eacute;fini le
chemin de certificat dans le fichier
.actionScriptProperties.
Plateforme iOS
Vous sp&eacute;cifiez cet attribut lorsque vous d&eacute;finissez l’attribut
&laquo; packagetype &raquo; sur &laquo; platform &raquo; et que l’une des plateformes cibles
est Apple iOS.
ios.packagetype
Type de package utilis&eacute; lors de l’export d’un fichier IPA. Sp&eacute;cifiez le Oui, si vous n’avez pas d&eacute;fini le
type de package en tant que &laquo; adhoc &raquo; pour la cr&eacute;ation de packages type de package dans le fichier
ad hoc et &laquo; appstore &raquo; pour la cr&eacute;ation de packages destin&eacute;s &agrave; l’App .actionScriptProperties.
Store d’Apple.
ios.password
Mot de passe du certificat utilis&eacute; pour signer le fichier IPA. Si cet
argument est omis, un message d’erreur s’affiche.
Oui
ios.provisioning
Chemin du fichier de configuration (extension de fichier
.mobileprovision) utilis&eacute; pour signer le fichier IPA.
Oui, si vous n’avez pas d&eacute;fini le
fichier de configuration dans le
fichier .actionScriptProperties.
Assistant Exporter vers une version valid&eacute;e
Lorsque vous ex&eacute;cutez l’assistant Exporter vers une version valid&eacute;e (Projet &gt; Exporter vers une version valid&eacute;e), les
param&egrave;tres que vous d&eacute;finissez dans l’assistant sont enregistr&eacute;s dans le fichier .actionScriptProperties. Une g&eacute;n&eacute;ration
par ligne de commande qui utilise la t&acirc;che fb.exportReleaseBuild r&eacute;cup&egrave;re les param&egrave;tres de l’assistant. L’assistant
Exporter vers une version valid&eacute;e enregistre les param&egrave;tres suivants :
• Afficher la source
Les fichiers source que vous sp&eacute;cifiez pour l’option Afficher la source sont enregistr&eacute;s. Si vous d&eacute;finissez le
param&egrave;tre publishsource sur fb.exportReleaseBuild, l’assistant inclut ces fichiers comme fichiers source pouvant
&ecirc;tre affich&eacute;s.
Important : pour les projets pour serveurs, vous pouvez s&eacute;lectionner le dossier des services &agrave; l’exportation des fichiers
source. L’exportation de fichiers impl&eacute;mentant des services a des implications en termes de s&eacute;curit&eacute;. Ces fichiers
peuvent donner acc&egrave;s &agrave; votre base de donn&eacute;es, noms d’utilisateurs et mots de passe inclus. Voir Exportation des fichiers
source vers la version valid&eacute;e d’une application.
• Pour les projets AIR, tous les fichiers de sortie suppl&eacute;mentaires dont vous d&eacute;terminez la prise en compte avec le
fichier AIR ou AIRI dans l’assistant.
Derni&egrave;re mise &agrave; jour le 10/11/2011
118
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Ex&eacute;cution des g&eacute;n&eacute;rations par ligne de commande sur Linux et d’autres plateformes
La t&acirc;che &lt;fb.exportReleaseBuild&gt; est uniquement prise en charge sur des plateformes Windows et Mac.
Si vous r&eacute;digez toutefois un script de g&eacute;n&eacute;ration pour une autre plateforme, utilisez l’option -dump-config dans le
compilateur mxmlc ou compc pour &eacute;crire les param&egrave;tres de configuration du compilateur dans un fichier. L’option load-config vous permettra ensuite de lire les options de configuration.
Modifiez les param&egrave;tres de configuration du fichier en fonction de vos besoins. Par exemple, changez
&lt;debug&gt;true&lt;/debug&gt; en &lt;debug&gt;false&lt;/debug&gt; pour que la g&eacute;n&eacute;ration nocturne g&eacute;n&egrave;re une version valid&eacute;e.
Ex&eacute;cution d’une g&eacute;n&eacute;ration par ligne de commande &agrave; l’aide des param&egrave;tres du compilateur Flash Builder
1 Dans Flash Builder, s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Compilateur Flex.
2 Dans le champ Arguments de compilateur suppl&eacute;mentaires, indiquez l’argument suivant :
-dump-config nom_du_chemin, o&ugrave; nom_du_chemin sp&eacute;cifie le chemin d’acc&egrave;s absolu &agrave; un fichier du syst&egrave;me.
3 Appliquez les modifications dans la fen&ecirc;tre du projet.
Les param&egrave;tres du compilateur sont &eacute;crits dans le fichier sp&eacute;cifi&eacute;. Supprimez l’argument -dump-config apr&egrave;s avoir
v&eacute;rifi&eacute; que le fichier a &eacute;t&eacute; &eacute;crit.
4 Modifiez les param&egrave;tres de configuration comme il convient.
5 Dans le script de g&eacute;n&eacute;ration, ex&eacute;cutez le compilateur afin qu’il int&egrave;gre les param&egrave;tres enregistr&eacute;s du compilateur :
mxmlc -load-config nom_du_chemin
Restrictions pour l’ex&eacute;cution des g&eacute;n&eacute;rations par ligne de commande
Certaines restrictions s’appliquent &agrave; l’ex&eacute;cution des g&eacute;n&eacute;rations par ligne de commande &agrave; l’aide de la t&acirc;che
&lt;fb.exportReleaseBuild&gt;.
Ex&eacute;cution des g&eacute;n&eacute;rations par ligne de commande sur des plateformes 64 bits
Flash Builder s’ex&eacute;cute sur des plateformes qui impl&eacute;mentent Java 32 bits. Pour ex&eacute;cuter une g&eacute;n&eacute;ration par ligne de
commande sur des plateformes prenant en charge Java 64 bits (Mac OS X Snow Leopard, par exemple), ajoutez -d32
aux options de ligne de commande qui sont transmises &agrave; Java. Par exemple :
java -d32 ...
Publication du code source
Une fois qu’une application est pr&ecirc;te &agrave; &ecirc;tre publi&eacute;e, Flash Builder vous permet de d&eacute;finir si les utilisateurs peuvent
visionner le code source ainsi que les ressources de l’application. A l’instar du langage HTML, les utilisateurs peuvent
acc&eacute;der &agrave; la source et la visionner dans un navigateur Web en s&eacute;lectionnant Afficher la source dans le menu contextuel.
Le visualiseur de source met en forme et colore le code afin d’en faciliter la lecture. Il constitue &eacute;galement un moyen
pratique de partager le code avec d’autres d&eacute;veloppeurs Flex et ActionScript 3.0.
Activation de l’option d’affichage de la source
1 Ouvrez l’ensemble du projet d’application dans l’&eacute;diteur, puis s&eacute;lectionnez Projet &gt; Exporter vers une version
valid&eacute;e.
2 S&eacute;lectionnez Activer l’affichage de la source ou, pour les projets ActionScript, Inclure la source.
3 Cliquez sur Choisir des fichiers source.
4 Dans la bo&icirc;te de dialogue Publier la source de l’application, s&eacute;lectionnez le ou les fichiers de l’application &agrave; inclure
dans le menu Afficher la source. Par d&eacute;faut, le fichier de l’application principale est s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
119
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Important : pour les projets pour serveurs, vous pouvez s&eacute;lectionner le dossier des services &agrave; l’exportation des fichiers
source. L’exportation de fichiers impl&eacute;mentant des services a des implications en termes de s&eacute;curit&eacute;. Ces fichiers
peuvent donner acc&egrave;s &agrave; votre base de donn&eacute;es, noms d’utilisateurs et mots de passe inclus. Voir Exportation des fichiers
source vers la version valid&eacute;e d’une application.
5 (Facultatif) Modifiez le dossier de sortie de la source. Par d&eacute;faut, un dossier d’affichage de la source est ajout&eacute; au
dossier de sortie du projet.
6 Cliquez sur OK.
Les utilisateurs ex&eacute;cutant l’application peuvent acc&eacute;der au code source en s&eacute;lectionnant Afficher la source dans le
menu contextuel. Le code source est affich&eacute; dans le navigateur Web par d&eacute;faut sous forme d’arborescence refl&eacute;tant la
structure des ressources (package, dossiers et fichiers) contenues dans l’application (que vous avez d&eacute;cid&eacute; de publier).
S&eacute;lectionnez un &eacute;l&eacute;ment source pour en afficher le code dans le navigateur. Les utilisateurs peuvent &eacute;galement
t&eacute;l&eacute;charger tous les fichiers source en cliquant sur le lien vers le fichier Download.zip.
Remarque : les restrictions de s&eacute;curit&eacute; d’Internet Explorer risquent d’entraver l’affichage du code source sur votre
ordinateur local. Dans ce cas, d&eacute;ployez l’application sur un serveur Web pour afficher la source.
Ajout du menu Afficher la source aux projets ActionScript
Dans les projets Flex, l’ajout de l’option Afficher la source &agrave; l’application s’effectue par l’interm&eacute;diaire de l’assistant
Exporter vers une version valid&eacute;e. Dans les applications ActionScript, ajoutez cette option manuellement.
La fonction suivante, contenue dans la structure Flex, peut &ecirc;tre utilis&eacute;e dans un constructeur d’application
ActionScript pour activer le menu d’affichage de la source :
com.adobe.viewsource.ViewSource.addMenuItem(obj:InteractiveObject, url:String,
hideBuiltins:Boolean = true)
L’exemple suivant illustre l’utilisation du code dans les applications ActionScript :
package {
import flash.display.MovieClip;
import com.adobe.viewsource.ViewSource;
public class MyASApp extends MovieClip
{
public function MyASApp()
{
ViewSource.addMenuItem(this, &quot;srcview/index.html&quot;);
// ... additional application code here
}
}
}
Cet exemple se base sur l’emplacement par d&eacute;faut du dossier source (srcview). Si vous modifiez l’emplacement du
dossier source, v&eacute;rifiez que le code utilise l’emplacement appropri&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
120
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Ex&eacute;cution et d&eacute;bogage des applications
Les applications sont ex&eacute;cut&eacute;es (et d&eacute;bogu&eacute;es) en fonction d’une configuration de lancement. La configuration de
lancement d’une nouvelle application Flex ou ActionScript sp&eacute;cifie l’emplacement des fichiers d’application g&eacute;n&eacute;r&eacute;s
et du fichier de l’application principale. Les configurations de lancement peuvent &ecirc;tre modifi&eacute;es ou personnalis&eacute;es.
Pour plus d’informations, voir &laquo; Cr&eacute;ation de configurations de lancement personnalis&eacute;es &raquo; &agrave; la page 123.
L’ex&eacute;cution des projets dans Flash Builder peut &ecirc;tre effectu&eacute;e de diff&eacute;rentes mani&egrave;res. Vous pouvez par exemple
utiliser la commande d’ex&eacute;cution &agrave; partir de la barre d’outils et du menu principal du workbench, de la vue Explorateur
de packages et des menus contextuels de l’&eacute;diteur de code.
Remarque : le bouton Ex&eacute;cuter comporte deux &eacute;l&eacute;ments : le bouton d’action principal et la liste d&eacute;roulante affichant les
fichiers d’application du projet pouvant &ecirc;tre ex&eacute;cut&eacute;s ou d&eacute;bogu&eacute;s. Cliquez sur le bouton d’action principal pour ex&eacute;cuter
le fichier d’application par d&eacute;faut. Vous pouvez &eacute;galement activer la liste d&eacute;roulante et s&eacute;lectionner l’un des fichiers
d’application du projet ainsi que cr&eacute;er ou modifier une configuration de lancement dans la bo&icirc;te de dialogue Cr&eacute;ation,
gestion et ex&eacute;cution d’une configuration.
Gestion des configurations de lancement
Les configurations de lancement permettent d’ex&eacute;cuter et de d&eacute;boguer des applications. Flash Builder comporte une
configuration de lancement par d&eacute;faut pour les applications Flex et ActionScript.
Une configuration de lancement d&eacute;finit le nom du projet, le fichier de l’application principale et le chemin des versions
d’ex&eacute;cution et de d&eacute;bogage de l’application. Flash Builder contient une configuration de lancement d’application par
d&eacute;faut. Cette configuration est utilis&eacute;e pour cr&eacute;er automatiquement des configurations de lancement pour chacun de
vos projets.
Cr&eacute;ation ou modification des configurations de lancement pour les applications Web
Un projet cr&eacute;&eacute; et g&eacute;n&eacute;r&eacute; est pr&ecirc;t &agrave; &ecirc;tre ex&eacute;cut&eacute; ou d&eacute;bogu&eacute;. L’ex&eacute;cution et le d&eacute;bogage des applications du projet sont
contr&ocirc;l&eacute;s par une configuration de lancement. Par d&eacute;faut, Flash Builder cr&eacute;e une configuration de lancement pour
chaque fichier d’application du projet ex&eacute;cut&eacute; ou d&eacute;bogu&eacute; pour la premi&egrave;re fois. Les configurations se basent sur la
configuration d’application par d&eacute;faut et peuvent &ecirc;tre modifi&eacute;es.
Derni&egrave;re mise &agrave; jour le 10/11/2011
121
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Les configurations de lancement sont g&eacute;r&eacute;es dans la bo&icirc;te de dialogue Cr&eacute;ation, gestion et ex&eacute;cution des
configurations.
Ouverture et modification d’une configuration de lancement
1 Dans l’Explorateur de packages Flex, s&eacute;lectionnez un projet.
2 Ouvrez un fichier de projet dans l’&eacute;diteur de code, puis s&eacute;lectionnez Ex&eacute;cuter &gt; Ex&eacute;cuter les configurations.
3 S&eacute;lectionnez la configuration de lancement que vous souhaitez modifier.
4 Adaptez les param&egrave;tres de la configuration, puis cliquez sur Ex&eacute;cuter ou D&eacute;boguer.
L’ex&eacute;cution des projets Web conduit &agrave; l’ouverture du fichier principal SWF de l’application dans le navigateur Web
par d&eacute;faut ou directement dans la version autonome de Flash Player.
Voir aussi
&laquo; Modification du navigateur Web par d&eacute;faut &raquo; &agrave; la page 125
&laquo; Ex&eacute;cution du fichier SWF de l’application dans la version autonome de Flash Player &raquo; &agrave; la page 125
Cr&eacute;ation ou modification des configurations de lancement pour les applications
d’ordinateur
Pour les applications d’ordinateur, vous pouvez cr&eacute;er des configurations de lancement qui remplaceront les
configurations par d&eacute;faut fournies par Flash Builder.
Lors de la cr&eacute;ation ou de la modification d’une configuration de lancement pour une application d’ordinateur, vous
devez sp&eacute;cifier des arguments de ligne de commande, un ID d’&eacute;diteur, un profil et des param&egrave;tres de format d’&eacute;cran.
Pour les applications d’ordinateur, la valeur de Profil peut &ecirc;tre soit desktop, soit extendedDesktop.
Derni&egrave;re mise &agrave; jour le 10/11/2011
122
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Pour cr&eacute;er une configuration de lancement :
1 S&eacute;lectionnez Ex&eacute;cuter &gt; Ex&eacute;cuter en tant que.
Pour les configurations de lancement de d&eacute;bogage, s&eacute;lectionnez Ex&eacute;cuter &gt; D&eacute;boguer en tant que. Pour les
configurations de lancement de profil, sp&eacute;cifiez Ex&eacute;cuter &gt; Profiler en tant que.
2 S&eacute;lectionnez le projet de bureau. Cliquez sur le bouton de cr&eacute;ation d’une configuration de lancement.
Acc&eacute;dez aux onglets Principal, Source et Commun pour sp&eacute;cifier les param&egrave;tres de la configuration.
3 S&eacute;lectionnez Ex&eacute;cuter, D&eacute;boguer ou Profiler pour ex&eacute;cuter l’application avec les param&egrave;tres d&eacute;finis.
Cliquez sur Fermer pour enregistrer les param&egrave;tres.
Cr&eacute;ation ou modification des configurations de lancement pour les applications mobiles
Avant d’ex&eacute;cuter ou de d&eacute;boguer une application mobile pour la premi&egrave;re fois, ouvrez la fen&ecirc;tre Configurations de
lancement pour d&eacute;finir une configuration de lancement. Vous pouvez cr&eacute;er une ou plusieurs configurations de
lancement pour une application. Le jeu de configurations de lancement que vous d&eacute;finissez est partag&eacute; entre
l’ex&eacute;cution et le d&eacute;bogage de l’application.
1 S&eacute;lectionnez Ex&eacute;cuter &gt; Ex&eacute;cuter les configurations pour ouvrir la bo&icirc;te de dialogue d’ex&eacute;cution des
configurations.
Pour ouvrir la bo&icirc;te de dialogue Configurations de d&eacute;bogage, s&eacute;lectionner Ex&eacute;cuter &gt; Configurations de d&eacute;bogage.
Voir Ex&eacute;cution et d&eacute;bogage d’une application mobile sur un p&eacute;riph&eacute;rique..
Vous pouvez &eacute;galement acc&eacute;der au menu Ex&eacute;cuter ou D&eacute;boguer les configurations dans la liste d&eacute;roulante du
bouton Ex&eacute;cuter ou D&eacute;boguer de la barre d’outils Flash Builder.
2 D&eacute;veloppez le nœud des applications mobiles. Cliquez sur le bouton Cr&eacute;e une configuration de lancement dans la
barre d’outils de la bo&icirc;te de dialogue.
3 S&eacute;lectionnez une plateforme cible dans la liste d&eacute;roulante.
4 Sp&eacute;cifiez une m&eacute;thode de lancement :
• Sur le bureau :
ex&eacute;cute l’application sur votre ordinateur &agrave; l’aide du AIR Debug Launcher, selon une configuration de
p&eacute;riph&eacute;rique sp&eacute;cifi&eacute;e. Cette m&eacute;thode de lancement n’est pas une vraie &eacute;mulation d’ex&eacute;cution de l’application
sur un p&eacute;riph&eacute;rique. Elle vous permet toutefois de voir la mise en forme de l’application et d’interagir avec
l’application.
Voir Pr&eacute;visualisation des applications avec ADL.
Cliquez sur Configurer pour modifier les configurations du p&eacute;riph&eacute;rique. Voir D&eacute;finition des configurations
des p&eacute;riph&eacute;riques.
• Sur le p&eacute;riph&eacute;rique :
installez et ex&eacute;cutez l’application sur votre p&eacute;riph&eacute;rique.
Flash Builder installe l’application sur votre p&eacute;riph&eacute;rique et lance l’application. Flash Builder acc&egrave;de au
p&eacute;riph&eacute;rique connect&eacute; au port USB de l’ordinateur. Pour plus d’informations, voir Ex&eacute;cution et d&eacute;bogage d’une
application mobile sur un p&eacute;riph&eacute;rique.
Les plateformes Windows n&eacute;cessitent un pilote USB pour connecter un p&eacute;riph&eacute;rique Android &agrave; l’ordinateur.
Pour plus d’informations, voir Installation de pilotes de p&eacute;riph&eacute;riques USB pour les p&eacute;riph&eacute;riques Android
(Windows).
Derni&egrave;re mise &agrave; jour le 10/11/2011
123
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Recherche de p&eacute;riph&eacute;riques connect&eacute;s
Lorsque vous ex&eacute;cutez ou d&eacute;boguez une application mobile sur un p&eacute;riph&eacute;rique, Flash Builder v&eacute;rifie les p&eacute;riph&eacute;riques
connect&eacute;s. Si Flash Builder d&eacute;tecte un seul p&eacute;riph&eacute;rique connect&eacute; en ligne, il d&eacute;ploie et lance l’application. Dans le cas
contraire, Flash Builder lance la bo&icirc;te de dialogue Choisir un p&eacute;riph&eacute;rique pour les sc&eacute;narios suivants :
• Aucun p&eacute;riph&eacute;rique n’est trouv&eacute;
• Un seul p&eacute;riph&eacute;rique d&eacute;connect&eacute; est trouv&eacute;
• Plusieurs p&eacute;riph&eacute;riques connect&eacute;s trouv&eacute;s
La bo&icirc;te de dialogue Choisir un p&eacute;riph&eacute;rique r&eacute;pertorie les p&eacute;riph&eacute;riques et leur &eacute;tat (en ligne ou d&eacute;connect&eacute;).
S&eacute;lectionnez le p&eacute;riph&eacute;rique &agrave; lancer.
D&eacute;bogage des applications mobiles
Vous pouvez d&eacute;boguer une application mobile &agrave; partir de votre ordinateur de d&eacute;veloppement ou d’un p&eacute;riph&eacute;rique.
Avant de d&eacute;boguer une application mobile, cr&eacute;ez une configuration de lancement. Voir &laquo; Gestion des configurations
de lancement &raquo; &agrave; la page 120.
Le d&eacute;bogage d’un p&eacute;riph&eacute;rique Android n&eacute;cessite l’installation d’Android 2.2 ou d’une version ult&eacute;rieure. Lorsque
vous ex&eacute;cutez une application sur un p&eacute;riph&eacute;rique &agrave; partir de Flash Builder, Flash Builder installe une version
d&eacute;bogu&eacute;e de l’application sur le p&eacute;riph&eacute;rique.
Pour plus d’informations, voir D&eacute;bogage d’une application mobile sur un p&eacute;riph&eacute;rique Google Android.
Le d&eacute;bogage d’une application sur un p&eacute;riph&eacute;rique Apple iOS n&eacute;cessite de grouper l’application sous forme de fichier
IPA (iOS Package) de d&eacute;bogage et d’installer manuellement l’application sur le p&eacute;riph&eacute;rique connect&eacute;.
Pour plus d’informations, voir D&eacute;bogage d’une application sur un p&eacute;riph&eacute;rique Apple iOS.
Remarque : si vous exportez une version valid&eacute;e vers un p&eacute;riph&eacute;rique, vous installez une version non d&eacute;bogu&eacute;e de
l’application. Toutefois, la version non d&eacute;bogu&eacute;e ne convient pas pour le d&eacute;bogage.
Cr&eacute;ation de configurations de lancement personnalis&eacute;es
Les configurations de lancement diff&egrave;rent selon que vous ex&eacute;cutez une application Web, d’ordinateur ou mobile. Vous
pouvez personnaliser les configurations de lancement que Flash Builder cr&eacute;e automatiquement pour vous.
1 Dans le menu Flash Builder, s&eacute;lectionnez Ex&eacute;cuter &gt; Ex&eacute;cuter les configurations.
2 Dans la bo&icirc;te de dialogue Cr&eacute;ation, gestion et ex&eacute;cution des configurations, s&eacute;lectionnez le type d’application &agrave;
configurer. Cliquez sur le bouton Nouveau de la barre d’outils.
3 Sp&eacute;cifiez un nom, un projet et un fichier d’application pour la configuration de lancement.
4 Modifiez les propri&eacute;t&eacute;s de configuration requises pour le type d’application que vous configurez.
5 Cliquez sur Appliquer pour enregistrer les param&egrave;tres ou sur Ex&eacute;cuter pour lancer l’application.
Personnalisation de la configuration de lancement pour lancer manuellement le navigateur
Lorsque vous ex&eacute;cutez l’application, Flash Builder lance automatiquement le navigateur. Vous pouvez, toutefois,
d&eacute;cider de lancer manuellement le navigateur &agrave; la place de Flash Builder. Pour ce faire :
1 Dans la liste des configurations, s&eacute;lectionnez la configuration de lancement du projet.
2 Dans l’onglet Principal, d&eacute;s&eacute;lectionnez l’option Utiliser la valeur par d&eacute;faut.
3 Modifiez l’URL ou le chemin par d&eacute;faut pour effectuer le lancement sur about:blank.
Derni&egrave;re mise &agrave; jour le 10/11/2011
124
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Ex&eacute;cution de la derni&egrave;re configuration lanc&eacute;e
❖ Cliquez sur le bouton Ex&eacute;cuter situ&eacute; dans la barre d’outils principale.
Si une configuration de lancement doit &ecirc;tre cr&eacute;&eacute;e, Flash Builder ouvre la bo&icirc;te de dialogue Configurations de
lancement.
Voir aussi
&laquo; Cr&eacute;ation ou modification des configurations de lancement pour les applications Web &raquo; &agrave; la page 120
&laquo; Cr&eacute;ation ou modification des configurations de lancement pour les applications d’ordinateur &raquo; &agrave; la page 121
&laquo; Cr&eacute;ation ou modification des configurations de lancement pour les applications mobiles &raquo; &agrave; la page 122
Version d&eacute;bogu&eacute;e de l’application
La version d&eacute;bogu&eacute;e de l’application contient des informations de d&eacute;bogage qui servent au d&eacute;bogage de l’application.
La version valid&eacute;e r&eacute;sultant de l’exportation ne contient aucune information de d&eacute;bogage. La taille de son fichier est
donc inf&eacute;rieure &agrave; celle du fichier de la version d&eacute;bogu&eacute;e. Un fichier d’enveloppe HTML contient un lien vers le fichier
SWF de l’application. Il intervient dans l’ex&eacute;cution ou le d&eacute;bogage de l’application dans un navigateur Web.
Remarque : les commandes Ex&eacute;cuter et D&eacute;boguer lancent la version de d&eacute;veloppement dans le dossier bin-debug (et non
dans le dossier de version valid&eacute;e, bin-release).
Dans une application standard, le dossier de sortie ressemble &agrave; l’exemple suivant.
Vous pouvez ex&eacute;cuter ou d&eacute;boguer vos applications Flex et ActionScript dans un navigateur, dans AIR ou sur votre
p&eacute;riph&eacute;rique mobile. Pour d&eacute;finir la mani&egrave;re dont les applications sont ex&eacute;cut&eacute;es ou d&eacute;bogu&eacute;es, modifiez la
configuration de lancement du projet (voir &laquo; Gestion des configurations de lancement &raquo; &agrave; la page 120).
Voir aussi
&laquo; D&eacute;bogage de l’application &raquo; &agrave; la page 137
Derni&egrave;re mise &agrave; jour le 10/11/2011
125
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Utilisation de la version de d&eacute;bogage de Flash Player
Par d&eacute;faut, Flash Builder ex&eacute;cute la version de d&eacute;bogage de Flash Player. Cette version est disponible sous forme de
plug-in ou de contr&ocirc;le ActiveX pour navigateur ou en tant que version autonome. Elle est install&eacute;e avec Flash Builder
mais peut &eacute;galement &ecirc;tre t&eacute;l&eacute;charg&eacute;e &agrave; partir du site Web d’Adobe.
Les programmes d’installation de la version de d&eacute;bogage de Flash Player se trouvent dans le r&eacute;pertoire Installation
d’Adobe Flash Builder/player de votre ordinateur.
Vous pouvez d&eacute;terminer par programmation la version de Flash Player ex&eacute;cut&eacute;e en utilisant la m&eacute;thode
Capabilities.isDebugger(). Pour plus d’informations, voir Determining Flash Player version in Flex.
Lorsque vous lancez ou d&eacute;boguez une application &agrave; partir de Flash Builder, vous pouvez sp&eacute;cifier la version de Flash
Player &agrave; utiliser.
Voir aussi
&laquo; Gestion de la version du lecteur Flash Player autonome &raquo; &agrave; la page 262
Ex&eacute;cution et d&eacute;bogage des applications dans un navigateur
Par d&eacute;faut, les chemins d’ex&eacute;cution et de d&eacute;bogage de la configuration de lancement des applications Web dirigent vers
les fichiers d’enveloppe HTML situ&eacute;s dans le dossier de sortie du projet. Les applications sont donc ex&eacute;cut&eacute;es et
d&eacute;bogu&eacute;es dans la version Flash Player int&eacute;gr&eacute;e dans le navigateur Web utilis&eacute;. Vous avez &eacute;galement la possibilit&eacute;
d’ex&eacute;cuter et de d&eacute;boguer les applications dans la version autonome de Flash Player (voir &laquo; Ex&eacute;cution du fichier SWF
de l’application dans la version autonome de Flash Player &raquo; &agrave; la page 125). Vous pouvez en outre remplacer le
navigateur Web standard par tout autre navigateur install&eacute; sur votre ordinateur (voir &laquo; Modification du navigateur
Web par d&eacute;faut &raquo; &agrave; la page 125).
Modification du navigateur Web par d&eacute;faut
L’ex&eacute;cution et le d&eacute;bogage des applications sont effectu&eacute;s dans le navigateur Web d&eacute;fini par d&eacute;faut. Vous ne pouvez
pas d&eacute;finir un navigateur Web diff&eacute;rent pour chaque configuration de lancement. Vous pouvez toutefois modifier le
navigateur Web d&eacute;fini pour le workbench, ce qui aura une incidence sur l’ex&eacute;cution et le d&eacute;bogage de toutes les
applications.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Navigateur Web.
2 S&eacute;lectionnez un navigateur dans la liste de ceux install&eacute;s sur le syst&egrave;me.
Remarque : l’option Utiliser le navigateur Web interne ne concerne pas l’ex&eacute;cution et le d&eacute;bogage des applications, ces
op&eacute;rations &eacute;tant toujours effectu&eacute;es dans un navigateur Web externe.
Vous pouvez &eacute;galement ajouter des navigateurs &agrave; la liste, en supprimer ou &eacute;diter ceux qui y sont r&eacute;pertori&eacute;s.
3 Cliquez sur OK pour appliquer les modifications.
Ex&eacute;cution du fichier SWF de l’application dans la version autonome de Flash
Player
Les applications peuvent &ecirc;tre ex&eacute;cut&eacute;es ou d&eacute;bogu&eacute;es dans la version autonome de Flash Player. Il vous suffit pour ce
faire de modifier l&eacute;g&egrave;rement la configuration de lancement. Vous pouvez sp&eacute;cifier la version de Flash Player &agrave; utiliser
lorsque vous ex&eacute;cutez et d&eacute;boguez vos applications. Pour plus d’informations, voir &laquo; Gestion de la version du lecteur
Flash Player autonome &raquo; &agrave; la page 262.
Derni&egrave;re mise &agrave; jour le 10/11/2011
126
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Ex&eacute;cution et d&eacute;bogage des applications dans la version autonome de Flash Player
1 Dans la bo&icirc;te de dialogue Cr&eacute;ation, gestion et ex&eacute;cution des configurations, s&eacute;lectionnez la configuration de
lancement que vous souhaitez modifier.
2 Dans l’onglet Principal, d&eacute;s&eacute;lectionnez l’option Utiliser la valeur par d&eacute;faut.
3 Cliquez sur le bouton Parcourir du champ Ex&eacute;cuter et/ou du champ D&eacute;boguer.
La bo&icirc;te de dialogue de s&eacute;lection d’un fichier s’ouvre, r&eacute;pertoriant le contenu du dossier de sortie de la g&eacute;n&eacute;ration.
4 S&eacute;lectionnez le fichier d’application SWF du r&eacute;pertoire bin-debug. Ne s&eacute;lectionnez pas le fichier SWF de l’&eacute;ventuel
r&eacute;pertoire bin-release, &eacute;tant donn&eacute; qu’il ne contient aucune information de d&eacute;bogage.
5 Cliquez sur Ouvrir pour s&eacute;lectionner le fichier et retourner &agrave; la bo&icirc;te de dialogue de configuration.
6 Validez les modifications apport&eacute;es et ex&eacute;cutez ou d&eacute;boguez l’application en utilisant la configuration modifi&eacute;e.
Comparaison des versions d&eacute;bogu&eacute;es et non d&eacute;bogu&eacute;es d’une application
Par d&eacute;faut, Flash Builder g&eacute;n&egrave;re des versions d&eacute;bogu&eacute;es du fichier SWF de l’application Flex et les enregistre dans le
r&eacute;pertoire bin-debug du projet. Le volume de cette application est sup&eacute;rieur &agrave; celui d’une version non d&eacute;bogu&eacute;e car il
contient du code et des m&eacute;tadonn&eacute;es suppl&eacute;mentaires utilis&eacute;es par le d&eacute;bogueur.
Pour g&eacute;n&eacute;rer une version non d&eacute;bogu&eacute;e de l’application, effectuez l’une des op&eacute;rations suivantes :
• S&eacute;lectionnez Projet &gt; Exporter vers une version valid&eacute;e. Cette op&eacute;ration cr&eacute;e un fichier SWF ou un fichier AIR non
d&eacute;bogu&eacute; dans le r&eacute;pertoire bin-release.
• Ajoutez -debug=false dans le champ Arguments de compilateur suppl&eacute;mentaires. Ceci faisant, un fichier SWF
non d&eacute;bogu&eacute; est g&eacute;n&eacute;r&eacute; o&ugrave; que vous exportiez le projet.
Exportation d’une application vers une version valid&eacute;e
Apr&egrave;s avoir termin&eacute; la cr&eacute;ation de votre application, si vous souhaitez la publier, vous pouvez exporter une version
valid&eacute;e de votre application. L’assistant Exporter une version valid&eacute;e de Flash Builder cr&eacute;e une version valid&eacute;e
optimis&eacute;e (fichier SWF ou AIR sans d&eacute;bogage) de votre application.
En fonction du type d’application, l’assistant vous guide &agrave; travers les &eacute;tapes de personnalisation et d’optimisation de
la cr&eacute;ation de package.
Une fois l’assistant ex&eacute;cut&eacute;, vous devrez proc&eacute;der &agrave; des op&eacute;rations suppl&eacute;mentaires pour d&eacute;ployer l’application sur un
serveur.
Application Web (ex&eacute;cution dans Adobe Flash Player)
1 S&eacute;lectionnez Projet &gt; Exporter vers une version valid&eacute;e pour ouvrir l’assistant correspondant.
2 S&eacute;lectionnez le projet et l’application que vous souhaitez exporter.
3 (Facultatif) S&eacute;lectionnez Activer l’affichage de la source pour permettre l’acc&egrave;s aux fichiers source &agrave; partir de
l’application export&eacute;e.
Cliquez sur Choisir des fichiers source pour sp&eacute;cifier les fichiers source &agrave; inclure. Outre les fichiers source sp&eacute;cifi&eacute;s,
l’assistant g&eacute;n&egrave;re un fichier archive ZIP contenant les fichiers source.
Derni&egrave;re mise &agrave; jour le 10/11/2011
127
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Important : pour les projets pour serveurs, vous pouvez s&eacute;lectionner le dossier des services &agrave; l’exportation des fichiers
source. L’exportation de fichiers impl&eacute;mentant des services a des implications en termes de s&eacute;curit&eacute;. Ces fichiers
peuvent donner acc&egrave;s &agrave; votre base de donn&eacute;es, noms d’utilisateurs et mots de passe inclus. Voir Exportation des fichiers
source vers la version valid&eacute;e d’une application.
4 Cliquez sur Terminer.
5 Copiez le dossier contenant la version export&eacute;e vers la racine Web du serveur h&eacute;bergeant l’application.
6 (Projets pour serveurs) Si vous exportez la version d’un projet sp&eacute;cifiant un type de serveur d’applications, d&eacute;ployez
les services et les autres fichiers c&ocirc;t&eacute; serveur &agrave; la racine Web du serveur cible.
Conservez la structure de r&eacute;pertoire utilis&eacute; lors du d&eacute;veloppement.
Cette &eacute;tape s’applique aux services ColdFusion, PHP, BlazeDS et Data Services. Le type de serveurs d’applications
est d&eacute;fini &agrave; la cr&eacute;ation du projet dans Flash Builder.
Si le serveur d’applications se trouve sur un h&ocirc;te diff&eacute;rent que l’application d&eacute;ploy&eacute;e, un fichier de r&eacute;gulation
interdomaines est n&eacute;cessaire pour acc&eacute;der &agrave; ces services. Cette mani&egrave;re de proc&eacute;der s’applique aux projets acc&eacute;dant
&agrave; des fichiers de service XML statiques ou &agrave; des fichiers locaux pour des services HTTP ou Web. Voir Utilisation
de fichiers de r&eacute;gulation interdomaines.
7 (Projets pour serveurs PHP uniquement) Ex&eacute;cutez les &eacute;tapes suppl&eacute;mentaires suivantes :
a Installez la structure Zend Framework sur le serveur. Voir Installation de Zend Framework.
b Modifiez le fichier amf-config.ini qui se trouve dans le dossier de sortie de la version export&eacute;e.
Pour zend_path, sp&eacute;cifiez le chemin absolu du r&eacute;pertoire d’installation de Zend Framework.
D&eacute;finissez amf.production sur true.
Saisissez pour webroot le chemin absolu vers la racine Web du serveur.
Application d’ordinateur (ex&eacute;cution dans Adobe AIR)
1 (Facultatif) Modifiez les param&egrave;tres du serveur dans les propri&eacute;t&eacute;s du projet.
Une application d’ordinateur export&eacute;e peut acc&eacute;der uniquement aux services utilis&eacute;s au cours du d&eacute;veloppement.
Si vous souhaitez modifier le serveur pour l’application d’ordinateur export&eacute;e, modifiez les param&egrave;tres du projet.
2 S&eacute;lectionnez Projet &gt; Exporter vers une version valid&eacute;e pour ouvrir l’assistant correspondant.
3 S&eacute;lectionnez le projet et l’application que vous souhaitez exporter.
Remarque : pour les applications AIR, Flash Builder ne peut pas rendre disponibles les fichiers sources de l’application
&agrave; partir de l’application export&eacute;e.
4 Indiquez l’emplacement vers lequel exporter le projet. L’emplacement par d&eacute;faut est le dossier de votre projet.
5 Pour exporter votre application AIR, vous devez ajouter une signature num&eacute;rique &agrave; votre cr&eacute;ation en s&eacute;lectionnant
l’un des &eacute;l&eacute;ments suivants :
• Signed AIR Package pour exporter un package AIR &agrave; signature num&eacute;rique.
• Signed Native Installer pour cr&eacute;er un programme d’installation &agrave; signature num&eacute;rique pour la plateforme cible,
&agrave; savoir Windows ou Mac OS X.
• Application sign&eacute;e avec environnement d’ex&eacute;cution int&eacute;gr&eacute; pour exporter l’application avec l’environnement
d’application AIR fourni.
• Intermediate AIRI package pour exporter un fichier qui pourra &ecirc;tre sign&eacute; plus tard.
Cliquez sur Suivant.
Derni&egrave;re mise &agrave; jour le 10/11/2011
128
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Pour plus d’informations sur la signature num&eacute;rique, voir la documentation d’Adobe Flash Builder &laquo; Signature
num&eacute;rique des applications AIR &raquo; &agrave; la page 132.
6 A la page Signature num&eacute;rique, proc&eacute;dez comme suit :
Sp&eacute;cifiez le certificat num&eacute;rique repr&eacute;sentant l’identit&eacute; de l’&eacute;diteur de l’application. Pour g&eacute;n&eacute;rer un certificat autosign&eacute;, cliquez sur Cr&eacute;er et saisissez les donn&eacute;es dans les champs obligatoires.
7 Dans la page Contenu du package, s&eacute;lectionnez les fichiers de sortie &agrave; inclure dans le fichier AIR ou AIRI.
8 Cliquez sur Terminer.
9 Copiez le projet .air vers l’ordinateur cible.
10 (Projets pour serveurs) Si vous exportez la version d’un projet sp&eacute;cifiant un type de serveurs d’applications,
d&eacute;ployez les services sur le serveur cible.
Cette &eacute;tape s’applique aux services ColdFusion, PHP, BlazeDS et LCDS. Le type de serveurs d’applications est d&eacute;fini
&agrave; la cr&eacute;ation du projet dans Flash Builder.
11 (Projets pour serveurs PHP uniquement) Ex&eacute;cutez les &eacute;tapes suppl&eacute;mentaires suivantes :
a Installez la structure Zend Framework sur le serveur. Voir Installation de Zend Framework.
b Modifiez le fichier amf-config.ini qui se trouve dans le dossier de sortie de la version export&eacute;e.
Pour zend_path, sp&eacute;cifiez le chemin absolu du r&eacute;pertoire d’installation de Zend Framework.
D&eacute;finissez amf.production sur true.
Saisissez pour webroot le chemin absolu vers la racine Web du serveur.
Cr&eacute;ation d’un fichier AIR interm&eacute;diaire
Vous pouvez cr&eacute;er un fichier AIR interm&eacute;diaire et le signer ult&eacute;rieurement. Utilisez cette option uniquement lorsque
vous proc&eacute;dez &agrave; des tests.
1 S&eacute;lectionnez Projet &gt; Exporter vers une version valid&eacute;e.
S&eacute;lectionnez le projet AIR que vous voulez exporter ainsi que le fichier vers lequel vous souhaitez exporter le projet.
Cliquez sur Suivant.
2 S&eacute;lectionnez l’option Exporter un fichier AIRI interm&eacute;diaire qui sera sign&eacute; ult&eacute;rieurement.
3 (Facultatif) Cliquez sur Suivant. S&eacute;lectionnez les fichiers de sortie qui devront &ecirc;tre inclus dans le fichier AIRI
export&eacute;.
Par d&eacute;faut, tous les fichiers sont inclus.
4 Cliquez sur Terminer.
Une fois g&eacute;n&eacute;r&eacute;, le fichier AIR interm&eacute;diaire peut &ecirc;tre sign&eacute; en utilisant l’outil ADT (AIR Developer Tool). Pour
plus d’informations sur l’outil de ligne de commande ADT, voir Signature d’un fichier interm&eacute;diaire AIR &agrave; l’aide
de l’outil ADT dans la documentation d’Adobe AIR.
Pour plus d’informations &agrave; propos de l’utilisation de l’outil AIR Developer Tool (ADT), voir la documentation Adobe
AIR &agrave; l’adresse www.adobe.com/go/learn_fbairdevelopertool_fr.
Ex&eacute;cution d’une application avec un moteur d’ex&eacute;cution captif
Les proc&eacute;dures d’ex&eacute;cution de l’application &agrave; l’issue du d&eacute;ploiement final diff&egrave;rent selon si le package est export&eacute; vers
Windows ou Mac.
Derni&egrave;re mise &agrave; jour le 10/11/2011
129
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Sous Windows
❖ Le package de l’application contient les fichiers d’application requis ainsi que l’environnement d’ex&eacute;cution pour
ex&eacute;cuter l’application. Les utilisateurs peuvent ex&eacute;cuter l’application imm&eacute;diatement apr&egrave;s la cr&eacute;ation du package.
Vous pouvez &eacute;galement utiliser des outils tiers pour cr&eacute;er un Windows Installer (MSI) &agrave; partir du package export&eacute;
de l’application.
Sous Mac
❖ Pour ex&eacute;cuter l’application, faites glisser le package d’application dans le dossier Applications.
Conversion de projets Flex en projets Adobe AIR
Vous pouvez convertir le type d’applications d’un projet Flex d’application Web (ex&eacute;cut&eacute;e dans Flash Player) en
application d’ordinateur (ex&eacute;cut&eacute;e dans Adobe AIR). La conversion entra&icirc;ne les modifications suivantes :
• Un fichier descripteur AIR est cr&eacute;&eacute; pour chaque application du projet.
• Les configurations de lancement du projet sont mises &agrave; jour de mani&egrave;re &agrave; &ecirc;tre lanc&eacute;es correctement dans Adobe AIR.
• Les param&egrave;tres des enveloppes HTML sont supprim&eacute;s.
• Les param&egrave;tres personnalis&eacute;s de Flash Player sont supprim&eacute;s.
• Le chemin d’acc&egrave;s &agrave; la biblioth&egrave;que est modifi&eacute; pour inclure le fichier airglobal.swc au lieu du fichier
playerglobal.swc.
Au cours de la conversion, vous pouvez d&eacute;finir pour chaque application du projet si vous souhaitez modifier les balises
Application de base en balises WindowedApplication. Si vous d&eacute;cidez de convertir ces balises, cette modification sera
la seule &agrave; intervenir dans le code d’application au cours de la conversion. Apr&egrave;s la conversion, examinez les attributs
des balises de base pour v&eacute;rifier que l’application est ex&eacute;cut&eacute;e correctement dans Adobe AIR.
Modification d’un projet d’application Web en projet d’application d’ordinateur
1 S&eacute;lectionnez le projet que vous souhaitez convertir.
Il doit s’agir d’un projet Flex avec type d’application Web (s’ex&eacute;cutant dans Flash Player).
2 Dans le menu contextuel du projet, s&eacute;lectionnez Ajouter/Modifier le type de projet &gt; Convertir en projet
Bureau/Adobe AIR.
3 Dans la bo&icirc;te de dialogue Convertir en projet Bureau/Adobe AIR, sp&eacute;cifiez si vous souhaitez apporter des
modifications au code :
• Convertir les balises Application en WindowedApplication
Les balises Application de toutes les applications existantes du projet sont converties en balises
WindowedApplication. Aucune autre modification ne sera apport&eacute;e au code. Examinez les attributs des balises
de base pour v&eacute;rifier que l’application est ex&eacute;cut&eacute;e correctement dans Adobe AIR.
Les nouvelles applications cr&eacute;&eacute;es dans le projet sont des applications d’ordinateur pouvant &ecirc;tre ex&eacute;cut&eacute;es dans
Adobe AIR.
• Ne r&eacute;&eacute;crire aucun code
Aucune modification n’est apport&eacute;e au code. Modifiez les applications dans le projet avant de pouvoir les
ex&eacute;cuter dans Adobe AIR.
Les nouvelles applications cr&eacute;&eacute;es dans le projet sont des applications d’ordinateur pouvant &ecirc;tre ex&eacute;cut&eacute;es dans
Adobe AIR.
Remarque : cette proc&eacute;dure ne peut pas &ecirc;tre annul&eacute;e.
Derni&egrave;re mise &agrave; jour le 10/11/2011
130
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
P&eacute;riph&eacute;riques mobiles (ex&eacute;cution dans Adobe AIR)
1 S&eacute;lectionnez Projet &gt; Exporter vers une version valid&eacute;e pour ouvrir l’assistant correspondant.
2 S&eacute;lectionnez le projet et l’application que vous souhaitez exporter.
3 S&eacute;lectionnez les plateformes cibles.
4 Indiquez l’emplacement vers lequel exporter le projet. Vous pouvez exporter le projet vers un ordinateur cible ou
un p&eacute;riph&eacute;rique connect&eacute;.
5 Par d&eacute;faut, le nom du fichier de base est le nom du projet. Vous pouvez modifier le nom du fichier, le cas &eacute;ch&eacute;ant.
6 Pour grouper votre application avec une signature num&eacute;rique pour chaque plateforme cible, s&eacute;lectionnez Packages
sign&eacute;s pour chaque plateforme cible.
Pour grouper votre application en tant qu’application AIR &agrave; signature num&eacute;rique pour l’ordinateur, s&eacute;lectionnez
Package AIR sign&eacute; pour l’installation sur l’ordinateur.
Pour exporter un fichier dont la signature peut &ecirc;tre effectu&eacute;e ult&eacute;rieurement, exportez un fichier interm&eacute;diaire AIRI.
Pour g&eacute;n&eacute;rer un certificat auto-sign&eacute;, cliquez sur Cr&eacute;er et saisissez les donn&eacute;es dans les champs obligatoires.
Cliquez sur Suivant.
Pour plus d’informations sur la signature num&eacute;rique, voir la documentation de Adobe Flash Builder &laquo; Signature
num&eacute;rique des applications AIR &raquo; &agrave; la page 132.
7 Dans la page Param&egrave;tres de packages, vous pouvez sp&eacute;cifier le certificat num&eacute;rique et le contenu du package. Selon
la plateforme cible, les param&egrave;tres varient. Ces param&egrave;tres sont utilis&eacute;s lors de la cr&eacute;ation du package d’une
application &agrave; l’aide des flux de travail Ex&eacute;cution/D&eacute;bogage ou Exporter vers une version valid&eacute;e.
Dans la page Signature num&eacute;rique, sp&eacute;cifiez le certificat num&eacute;rique P12 qui repr&eacute;sente l’identit&eacute; de l’&eacute;diteur de
l’application. Vous pouvez aussi sp&eacute;cifier un mot de passe pour le certificat s&eacute;lectionn&eacute;.
Pour la plateforme Apple iOS, convertissez le certificat Apple iPhone au format de fichier P12 et s&eacute;lectionnez un
fichier de configuration. Pour ce faire, vous devez d’abord obtenir un certificat de d&eacute;veloppement iPhone et un
profil de configuration mobile aupr&egrave;s d’Apple.
Pour plus d’informations, voir Pr&eacute;paration &agrave; la g&eacute;n&eacute;ration, au d&eacute;bogage et au d&eacute;ploiement d’une application iOS.
Vous pouvez ensuite choisir de d&eacute;ployer le package de la version finale dans le magasin Apple App ou en tant que
package ad-hoc pour une distribution limit&eacute;e.
Dans la page Contenu du package, s&eacute;lectionnez les fichiers de sortie que vous souhaitez inclure dans la version
finale de votre application.
Remarque : vous ne pouvez pas exclure le fichier SWF et le fichier descripteur de l’application, car ils sont requis pour
exporter un package valide.
Les fichiers suivants ne sont pas n&eacute;cessaires et sont par cons&eacute;quent automatiquement d&eacute;s&eacute;lectionn&eacute;s ou masqu&eacute;s :
• Fichiers .ipa
• Fichiers de certificat (.p12, .pfx, .provisioning)
• Fichiers .air, .airi
Pour la plateforme Google Android, s&eacute;lectionnez Installer et lancer l’application sur tout p&eacute;riph&eacute;rique connect&eacute;
pour exporter le projet vers un p&eacute;riph&eacute;rique connect&eacute;. L’application export&eacute;e s’installe sur le p&eacute;riph&eacute;rique.
Derni&egrave;re mise &agrave; jour le 10/11/2011
131
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Dans le cas o&ugrave; AIR n’est pas d&eacute;j&agrave; install&eacute; sur le p&eacute;riph&eacute;rique d’un utilisateur, vous pouvez s&eacute;lectionner ou sp&eacute;cifier
une URL afin de t&eacute;l&eacute;charger AIR pour le package d’application. L’URL par d&eacute;faut pointe vers un emplacement au
sein de l’App Store Android. Vous pouvez toutefois remplacer l’URL par d&eacute;faut en saisissant votre propre URL ou
en s&eacute;lectionnant l’URL qui pointe vers un emplacement de l’Amazon Appstore.
8 Cliquez sur Terminer.
Pour plus d’informations, voir Groupement et exportation d’une application mobile.
Cr&eacute;ation de packages d’application AIR
Cr&eacute;ation de packages d’application AIR
Une fois l’application achev&eacute;e et pr&ecirc;te &agrave; &ecirc;tre distribu&eacute;e (ou test&eacute;e &agrave; partir de l’ordinateur), elle doit &ecirc;tre mise en package
dans un fichier AIR. La cr&eacute;ation de packages se compose des &eacute;tapes suivantes :
• S&eacute;lection de l’application AIR &agrave; publier
• Affichage du code source (en pr&eacute;sence de l’autorisation requise) et s&eacute;lection des fichiers d’application &agrave; inclure
• S&eacute;lection d’un fichier AIR g&eacute;n&eacute;rique ou d’un programme d’installation natif pour l’installation de l’application
• Signature num&eacute;rique de l’application AIR par un certificat commercial de signature de code ou par la cr&eacute;ation et
l’application d’une signature autosign&eacute;e
• Cr&eacute;ation (facultative) d’un fichier AIR interm&eacute;diaire pouvant &ecirc;tre sign&eacute; ult&eacute;rieurement
Mise en package d’une application AIR
1 Ouvrez le projet et v&eacute;rifiez que l’application ne pr&eacute;sente aucune erreur de compilation ni d’ex&eacute;cution.
2 S&eacute;lectionnez Projet &gt; Exporter vers une version valid&eacute;e.
3 Si plusieurs projets et applications sont ouverts dans Flash Builder, s&eacute;lectionnez le projet AIR &agrave; assembler.
4 Vous pouvez &eacute;galement s&eacute;lectionner Activer l’affichage de la source pour permettre aux utilisateurs de visionner le
code source &agrave; l’ex&eacute;cution de l’application. Cliquez sur Choisir des fichiers source pour s&eacute;lectionner les fichiers &agrave;
exclure. Par d&eacute;faut, tous les fichiers source sont s&eacute;lectionn&eacute;s. Pour plus d’informations sur la publication des
fichiers source dans Flash Builder, voir l’Aide de Flash Builder.
Important : pour les projets pour serveurs, vous pouvez s&eacute;lectionner le dossier des services &agrave; l’exportation des fichiers
source. L’exportation de fichiers impl&eacute;mentant des services a des implications en termes de s&eacute;curit&eacute;. Ces fichiers
peuvent donner acc&egrave;s &agrave; votre base de donn&eacute;es, noms d’utilisateurs et mots de passe inclus. Voir Exportation des fichiers
source vers la version valid&eacute;e d’une application.
5 S&eacute;lectionnez l’option Exporter vers un fichier AIR ou l’option Exporter vers le programme d’installation natif.
Cliquez sur Suivant.
L’option Exporter vers un fichier AIR cr&eacute;e un fichier de programme d’installation g&eacute;n&eacute;rique permettant
l’installation de l’application sur les plateformes Windows ou Mac OS X.
L’option Exporter vers le programme d’installation natif cr&eacute;e un programme d’installation pour la plateforme cible
(Windows ou Mac OS X).
6 Vous avez &eacute;galement la possibilit&eacute; de renommer le fichier AIR g&eacute;n&eacute;r&eacute;. D&egrave;s que vous &ecirc;tes pr&ecirc;t &agrave; poursuivre, cliquez
sur Suivant pour apposer une signature num&eacute;rique sur l’application.
Derni&egrave;re mise &agrave; jour le 10/11/2011
132
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
Propri&eacute;t&eacute;s des projets pour la cr&eacute;ation de packages de projets de bureau
Vous pouvez g&eacute;rer le certificat num&eacute;rique du package et son contenu en s&eacute;lectionnant un projet et en visualisant ses
propri&eacute;t&eacute;s.
1 Dans l’Explorateur de packages, s&eacute;lectionnez un projet.
2 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s dans le menu principal ou s&eacute;lectionnez Propri&eacute;t&eacute;s dans le menu contextuel.
3 Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s du projet, s&eacute;lectionnez Paquet de g&eacute;n&eacute;ration Flex.
4 A la page Signature num&eacute;rique, proc&eacute;dez comme suit :
S&eacute;lectionnez le certificat num&eacute;rique que vous voulez utiliser pour assembler et signer l’application AIR. Pour
g&eacute;n&eacute;rer un certificat auto-sign&eacute;, cliquez sur Cr&eacute;er et saisissez les donn&eacute;es dans les champs obligatoires.
5 Sur la page Contenu du groupement :
S&eacute;lectionnez les fichiers que vous ne souhaitez pas inclure dans la version finale de votre application.
6 Cliquez sur OK.
Propri&eacute;t&eacute;s des projets pour la cr&eacute;ation de packages de projets mobiles
Vous pouvez g&eacute;rer le certificat num&eacute;rique du package et son contenu en s&eacute;lectionnant un projet et en visualisant ses
propri&eacute;t&eacute;s.
1 Dans l’Explorateur de packages, s&eacute;lectionnez un projet.
2 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s dans le menu principal ou s&eacute;lectionnez Propri&eacute;t&eacute;s dans le menu contextuel.
3 Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s du projet, s&eacute;lectionnez Paquet de g&eacute;n&eacute;ration Flex, puis s&eacute;lectionnez la
plateforme cible.
4 Dans la page Signatures num&eacute;riques :
S&eacute;lectionnez le certificat num&eacute;rique que vous voulez utiliser pour assembler et signer l’application mobile.
Pour la plateforme Apple iOS, s&eacute;lectionnez un fichier de configuration. Pour plus d’informations, voir Processus
de d&eacute;veloppement Apple iOS &agrave; l’aide de Flash Builder.
Pour la plateforme Google Android, vous pouvez s&eacute;lectionner un certificat num&eacute;rique ou g&eacute;n&eacute;rer un certificat
auto-sign&eacute;. Pour g&eacute;n&eacute;rer un certificat auto-sign&eacute;, cliquez sur Cr&eacute;er et saisissez les donn&eacute;es dans les champs
obligatoires.
5 Dans la page Contenu du groupement :
S&eacute;lectionnez les fichiers que vous ne souhaitez pas inclure dans la version finale de votre application.
6 Dans la page Autorisations :
Pour modifier les autorisations li&eacute;es aux applications mobiles pour Android, modifiez le fichier descripteur de
l’application (nom_app-app.xml). Pour plus d’informations, voir Choix des autorisations d’une application mobile.
7 Cliquez sur OK.
Signature num&eacute;rique des applications AIR
Lors de l’exportation de votre version valid&eacute;e, vous devrez ajouter une signature num&eacute;rique &agrave; votre application AIR.
Les possibilit&eacute;s suivantes s’offrent &agrave; vous :
•
Vous pouvez signer l’application &agrave; l’aide d’un certificat de signature de code commercial.
Derni&egrave;re mise &agrave; jour le 10/11/2011
133
UTILISATION DE FLASH BUILDER 4.6
Utilisation des projets dans Flash Builder
• Vous pouvez cr&eacute;er et utiliser un certificat num&eacute;rique autosign&eacute;.
• Vous pouvez assembler l’application et la signer plus tard.
Les certificats num&eacute;riques &eacute;mis par les autorit&eacute;s de certification, telles que VeriSign, Thawte, GlobalSign et
ChosenSecurity garantissent aux utilisateurs votre identit&eacute; en tant qu’&eacute;diteur. Les certificats num&eacute;riques v&eacute;rifient en
outre que le fichier d’installation n’a pas &eacute;t&eacute; modifi&eacute; depuis que vous l’avez sign&eacute;. Les certificats num&eacute;riques autosign&eacute;s
sont utilis&eacute;s dans le m&ecirc;me but, mais se distinguent par le fait qu’ils ne pr&eacute;sentent aucune validation par un tiers.
Vous pouvez &eacute;galement assembler l’application AIR sans signature num&eacute;rique en cr&eacute;ant un fichier AIR interm&eacute;diaire
(.air). La validit&eacute; de ce type de fichier est limit&eacute;e. Il ne peut en effet pas &ecirc;tre install&eacute;. Il est utilis&eacute; dans les proc&eacute;dures de
test (effectu&eacute;es par les d&eacute;veloppeurs) et peut &ecirc;tre lanc&eacute; avec l’outil de ligne de commande AIR ADT. AIR destine cette
fonctionnalit&eacute; aux environnements de d&eacute;veloppement au sein desquels la signature est prise en charge par un
d&eacute;veloppeur ou une &eacute;quipe sp&eacute;cifique. Cette mani&egrave;re de proc&eacute;der augmente le degr&eacute; de s&eacute;curit&eacute; de gestion des
certificats num&eacute;riques.
Pour plus d’informations sur la signature d’applications, voir Signature d’applications AIR dans la documentation
d’Adobe AIR.
Signature num&eacute;rique d’une application AIR
Vous pouvez apposer une signature num&eacute;rique sur une application AIR en s&eacute;lectionnant le certificat num&eacute;rique
existant ou en cr&eacute;ant un nouveau certificat autosign&eacute;.
1 S&eacute;lectionnez Projet &gt; Exporter vers une version valid&eacute;e.
S&eacute;lectionnez le projet AIR que vous voulez exporter ainsi que le fichier vers lequel vous souhaitez exporter le projet.
Cliquez sur Suivant.
2 S&eacute;lectionnez l’option Exporter et signer un fichier AIR avec un certificat num&eacute;rique.
3 Si vous disposez d&eacute;j&agrave; d’un certificat num&eacute;rique, cliquez sur Parcourir pour y acc&eacute;der, puis s&eacute;lectionnez-le.
4 Pour cr&eacute;er un certificat num&eacute;rique autosign&eacute;, cliquez sur Cr&eacute;er.
5 Sp&eacute;cifiez les informations requises et cliquez sur OK.
6 (Facultatif) Cliquez sur Suivant. S&eacute;lectionnez les fichiers de sortie qui devront &ecirc;tre inclus dans le fichier AIRI
export&eacute;.
Par d&eacute;faut, tous les fichiers sont inclus.
7 Cliquez sur Terminer pour cr&eacute;er le fichier AIR.
Derni&egrave;re mise &agrave; jour le 10/11/2011
134
Chapitre 5 : D&eacute;bogage d’outils dans Flash
Builder
Perspective D&eacute;bogage Flash
La perspective de d&eacute;bogage Flash fournit un jeu d’outils de d&eacute;bogage tr&egrave;s complet. Les outils de d&eacute;bogage vous
permettent :
• de d&eacute;finir et de g&eacute;rer des points d’arr&ecirc;t ;
• de d&eacute;terminer comment interrompre, reprendre ou quitter l’application ;
• d’avancer d’un pas avec et sans entr&eacute;e dans le code ;
• de contr&ocirc;ler des variables ;
• d’&eacute;valuer des expressions.
Des points d’arr&ecirc;t peuvent &ecirc;tre ajout&eacute;s &agrave; des lignes de code ex&eacute;cutables dans l’&eacute;diteur de code. La perspective D&eacute;bogage
appara&icirc;t automatiquement lorsque le premier point d’arr&ecirc;t est atteint. A ce stade, la perspective D&eacute;bogage Flash est
activ&eacute;e. Elle vous permet d’analyser l’&eacute;tat de l’application et de la g&eacute;rer en faisant appel aux outils de d&eacute;bogage. Pour
plus d’informations, voir &laquo; Lancement d’une session de d&eacute;bogage &raquo; &agrave; la page 138.
Derni&egrave;re mise &agrave; jour le 10/11/2011
135
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
Vous pouvez &eacute;galement ouvrir la perspective D&eacute;bogage manuellement en la s&eacute;lectionnant dans la barre des
perspectives. La barre des perspectives se trouve sur le c&ocirc;t&eacute; droit de la barre d’outils principale du workbench. La
perspective D&eacute;bogage contient les vues D&eacute;bogage, Points d’arr&ecirc;t, Console, Variables et Expressions.
Vue D&eacute;bogage
La vue D&eacute;bogage est le centre de contr&ocirc;le de la perspective D&eacute;bogage Flash. Elle permet de contr&ocirc;ler l’ex&eacute;cution d’une
application, d’interrompre, de reprendre ou de terminer l’application ainsi que d’avancer d’un pas dans le code avec
ou sans entr&eacute;e.
La vue D&eacute;bogage (dans d’autres d&eacute;bogueurs, cette option porte le nom pile des appels) affiche l’&eacute;l&eacute;ment de pile du
thread suspendu de l’application que vous d&eacute;boguez.
Les applications cr&eacute;&eacute;es avec Flex ne comportent qu’un seul thread (ce qui n’est pas le cas de Java, par exemple). Vous
ne pouvez d&eacute;boguer qu’une seule application &agrave; la fois. Au cours du d&eacute;bogage d’une application, vous ne pouvez donc
afficher les processus et la vue D&eacute;bogage que d’un seul thread d’ex&eacute;cution.
La vue D&eacute;bogage affiche la liste des fonctions appel&eacute;es jusqu’&agrave; ce point, dans l’ordre de leur appel. Par exemple, la
premi&egrave;re fonction appel&eacute;e appara&icirc;t en bas de la liste. Vous pouvez cliquer deux fois sur une fonction pour la d&eacute;placer
dans le script ; Flash Builder met &agrave; jour les informations de la vue Variables conform&eacute;ment au nouvel emplacement de
la fonction dans le script.
Vue Points d’arr&ecirc;t
La vue Points d’arr&ecirc;t r&eacute;pertorie tous les points d’arr&ecirc;t d&eacute;finis dans le projet. Cliquez deux fois sur un point d’arr&ecirc;t pour
afficher son emplacement dans l’&eacute;diteur. Vous pouvez &eacute;galement d&eacute;sactiver, ignorer et supprimer des points d’arr&ecirc;t.
Derni&egrave;re mise &agrave; jour le 10/11/2011
136
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
Vue Console
La vue Console affiche le r&eacute;sultat des instructions trace plac&eacute;es dans le code ActionScript ainsi que les informations
provenant du d&eacute;bogueur lui-m&ecirc;me (statut, avertissements et erreurs).
Vue Variables
La vue Variables affiche des informations sur les variables dans un cadre de pile s&eacute;lectionn&eacute;. Vous pouvez s&eacute;lectionner
les variables &agrave; surveiller (dans la vue Expressions) et modifier leurs valeurs dans la session de d&eacute;bogage. Au cours de
la session de d&eacute;bogage, vous pouvez visualiser les modifications apport&eacute;es au fichier SWF en cours d’ex&eacute;cution et
essayer des correctifs pour le probl&egrave;me que vous devez r&eacute;soudre.
La vue Variables fait appel &agrave; des ic&ocirc;nes et des superpositions pour donner des rep&egrave;res visuels sur le type de variable.
Vue Variables
Derni&egrave;re mise &agrave; jour le 10/11/2011
137
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
Les variables complexes peuvent &ecirc;tre d&eacute;velopp&eacute;es pour en afficher les membres. La vue Variables permet de contr&ocirc;ler
les variables en les ajoutant &agrave; la vue Expressions. Elle permet &eacute;galement de modifier la valeur des variables au cours de
la session de d&eacute;bogage. Vous pouvez &eacute;galement y d&eacute;finir des points de contr&ocirc;le (voir &laquo; Utilisation de points de
contr&ocirc;le &raquo; &agrave; la page 143).
Tous les membres de super-classes sont group&eacute;s dans un nœud d’arborescence distinct. Par d&eacute;faut, seuls les membres
de la classe actuelle sont affich&eacute;s. Ce regroupement permet de limiter le nombre de variables affich&eacute;es dans la vue.
Vue Expressions
La vue Expressions permet de surveiller un ensemble de variables critiques. Vous pouvez choisir les variables que vous
jugez critiques dans la vue Variables et les ajouter &agrave; la vue Expressions afin de les surveiller. Vous pouvez &eacute;galement
ajouter et &eacute;valuer des expressions de contr&ocirc;le. Il s’agit d’expressions de code &eacute;valu&eacute;es &agrave; chaque interruption du
d&eacute;bogage.
Voir aussi
&laquo; Ex&eacute;cution et d&eacute;bogage des applications &raquo; &agrave; la page 120
&laquo; D&eacute;bogage de l’application &raquo; &agrave; la page 137
D&eacute;bogage de l’application
Une fois les projets g&eacute;n&eacute;r&eacute;s en applications (voir &laquo; Cr&eacute;ation de projets &raquo; &agrave; la page 101), vous pouvez les d&eacute;boguer dans
Flash Builder.
Le d&eacute;bogage est similaire &agrave; l’ex&eacute;cution des applications. Toutefois, lorsque vous d&eacute;boguez, vous d&eacute;terminez le moment
o&ugrave; l’application s’arr&ecirc;te &agrave; des points sp&eacute;cifiques du code. Vous pouvez &eacute;galement d&eacute;finir si vous souhaitez contr&ocirc;ler
les variables importantes et vous pouvez tester des corrections sur votre code.
L’ex&eacute;cution et le d&eacute;bogage font appel &agrave; une configuration pour contr&ocirc;ler la mani&egrave;re dont les applications sont lanc&eacute;es.
Le d&eacute;bogage d’une application consiste &agrave; ex&eacute;cuter la version d&eacute;bogu&eacute;e du fichier d’application. Voir &laquo; Version
d&eacute;bogu&eacute;e de l’application &raquo; &agrave; la page 124.
Vous pouvez modifier le fichier de l’application principale par d&eacute;faut sp&eacute;cifi&eacute; dans la configuration de lancement de
m&ecirc;me que le chemin de lancement par d&eacute;faut, afin que l’application soit ex&eacute;cut&eacute;e ou d&eacute;bogu&eacute;e dans la version
autonome de Flash Player plut&ocirc;t que dans un navigateur Web. Voir &laquo; Ex&eacute;cution du fichier SWF de l’application dans
la version autonome de Flash Player &raquo; &agrave; la page 125.
Lors du d&eacute;bogage d’applications mobiles, utilisez la configuration de lancement pour sp&eacute;cifier s’il faut lancer
l’application sur l’ordinateur ou sur un p&eacute;riph&eacute;rique connect&eacute; &agrave; votre ordinateur.
Derni&egrave;re mise &agrave; jour le 10/11/2011
138
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
Voir aussi
&laquo; Perspective D&eacute;bogage Flash &raquo; &agrave; la page 134
&laquo; Ex&eacute;cution et d&eacute;bogage des applications &raquo; &agrave; la page 120
&laquo; Erreurs d’environnement Eclipse dans le fichier journal &raquo; &agrave; la page 103
Lancement d’une session de d&eacute;bogage
Pour lancer une session de d&eacute;bogage, ex&eacute;cutez la configuration de lancement de l’application dans la perspective
D&eacute;bogage Flash.
D&eacute;bogage d’une application
1 Dans l’Explorateur de packages, s&eacute;lectionnez le projet que vous souhaitez d&eacute;boguer.
2 Cliquez sur le bouton
situ&eacute; dans la barre d’outils principale.
Remarque : le bouton D&eacute;boguer comporte deux &eacute;l&eacute;ments : le bouton d’action principal et une liste d&eacute;roulante. La liste
d&eacute;roulante pr&eacute;sente les fichiers d’application du projet qui peuvent &ecirc;tre ex&eacute;cut&eacute;s ou d&eacute;bogu&eacute;s. Cliquez sur le bouton
d’action principal pour ex&eacute;cuter le fichier d’application par d&eacute;faut du projet. Vous pouvez &eacute;galement cliquer sur la
liste d&eacute;roulante et s&eacute;lectionner l’un des fichiers d’application du projet que vous voulez d&eacute;boguer. Vous pouvez en
outre ouvrir la bo&icirc;te de dialogue des configurations de lancement et cr&eacute;er ou &eacute;diter une configuration en cliquant sur
la commande D&eacute;boguer.
Vous pouvez &eacute;galement s&eacute;lectionner Ex&eacute;cuter &gt; D&eacute;boguer.
Si le projet n’a pas encore &eacute;t&eacute; g&eacute;n&eacute;r&eacute;, Adobe&reg; Flash&reg; Builder™ le g&eacute;n&egrave;re et l’ex&eacute;cute en mode de d&eacute;bogage.
3 L’application est affich&eacute;e dans le navigateur Web par d&eacute;faut ou dans la version autonome de Flash Player. Vous
pouvez ensuite faire appel au d&eacute;bogueur de Flash Builder pour interagir avec elle.
4 La perspective D&eacute;bogage Flash est activ&eacute;e dans le workbench &agrave; chaque point d’arr&ecirc;t rencontr&eacute;.
Lancement d’une session de d&eacute;bogage dans la configuration plug-in
L’action de la commande D&eacute;boguer de la version plug-in de Flash Builder est l&eacute;g&egrave;rement diff&eacute;rente. Elle n’ex&eacute;cute pas
le projet s&eacute;lectionn&eacute;, mais d&eacute;bogue la derni&egrave;re configuration &agrave; avoir &eacute;t&eacute; lanc&eacute;e. Vous pouvez &eacute;galement s&eacute;lectionner
une configuration parmi la liste de celles &agrave; avoir &eacute;t&eacute; lanc&eacute;es en dernier.
D&eacute;bogage d’une application AIR
Flash Builder prend enti&egrave;rement en charge le d&eacute;bogage des applications AIR.
1 Dans Flash Builder, ouvrez un fichier source pour l’application (un fichier MXML, par exemple).
2 Cliquez sur le bouton
situ&eacute; dans la barre d’outils principale.
L’application est lanc&eacute;e. Elle est ex&eacute;cut&eacute;e dans l’application ADL (AIR Debugger Launcher, application de d&eacute;bogage
du lanceur AIR). L’application de d&eacute;bogage de Flash Builder capture les &eacute;ventuels points d’interruption ou erreurs
d’ex&eacute;cution et vous permet de d&eacute;boguer l’application comme toute autre application d&eacute;velopp&eacute;e avec Flex.
Vous pouvez &eacute;galement d&eacute;boguer une application &agrave; partir de la ligne de commande en utilisant l’outil de ligne de
commande de l’application de d&eacute;bogage du lanceur AIR. Pour plus d’informations, voir Utilisation de l’application de
d&eacute;bogage du lanceur AIR (ADL) dans la documentation AIR.
Derni&egrave;re mise &agrave; jour le 10/11/2011
139
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
Ajout et suppression de points d’arr&ecirc;t
Les points d’arr&ecirc;t vous permettent d’interrompre l’ex&eacute;cution de votre application. En proc&eacute;dant ainsi, vous pouvez
inspecter votre code et utiliser les outils de d&eacute;bogage de Flash Builder pour explorer les options de r&eacute;solution des
erreurs. Les points d’arr&ecirc;t sont ajout&eacute;s dans l’&eacute;diteur de code et g&eacute;r&eacute;s dans la vue Points d’arr&ecirc;t lorsque vous d&eacute;boguez
les applications.
Ils sont plac&eacute;s au niveau des lignes de code ex&eacute;cutables. Le d&eacute;bogueur ne s’arr&ecirc;te qu’aux points d’arr&ecirc;t situ&eacute;s sur les
lignes pr&eacute;sentant les &eacute;l&eacute;ments suivants :
• Balises MXML contenant un gestionnaire d’&eacute;v&eacute;nement ActionScript, par exemple &lt;mx:Button
click=&quot;dofunction()&quot; ...&gt;
• Lignes ActionScript, telles que celles contenues dans une balise &lt;mx:Script&gt; ou dans un fichier ActionScript
• Toute ligne de code ex&eacute;cutable dans un fichier ActionScript
Vous pouvez d&eacute;finir des points d’arr&ecirc;t en cours de r&eacute;daction du code ou pendant le d&eacute;bogage.
Positionnement d’un point d’arr&ecirc;t dans l’&eacute;diteur de code
1 Ouvrez un fichier de projet contenant du code ActionScript.
2 Localisez la ligne de code sur laquelle vous souhaitez placer un point d’arr&ecirc;t et cliquez deux fois sur la barre de
rep&egrave;re pour en ajouter un.
La barre de rep&egrave;re longe le c&ocirc;t&eacute; gauche de l’&eacute;diteur de code.
Un point d’arr&ecirc;t est ajout&eacute; &agrave; la barre de rep&egrave;re ainsi qu’&agrave; la liste de la vue Points d’arr&ecirc;t de la perspective D&eacute;bogage
Flash.
A chaque fois que le d&eacute;bogueur rencontre un point d’arr&ecirc;t, l’application est interrompue et la perspective D&eacute;bogage
Flash est affich&eacute;e. La ligne de code est signal&eacute;e par un point d’arr&ecirc;t et mise en surbrillance dans l’&eacute;diteur de code. Vous
pouvez ensuite utiliser les commandes de d&eacute;bogage de la barre d’outils de la vue Points d’arr&ecirc;t pour interagir avec le
code. Voir &laquo; Vue Points d’arr&ecirc;t &raquo; &agrave; la page 135.
Suppression d’un point d’arr&ecirc;t dans l’&eacute;diteur de code
❖ Dans la barre de rep&egrave;re, cliquez deux fois sur un point d’arr&ecirc;t.
Le point d’arr&ecirc;t est supprim&eacute; de la barre de rep&egrave;re ainsi que de la vue Points d’arr&ecirc;t de la perspective D&eacute;bogage
Flash.
Suppression de points d’arr&ecirc;t de la vue Points d’arr&ecirc;t
Vous pouvez supprimer un seul, plusieurs ou tous les points d’arr&ecirc;t de la vue en utilisant les commandes de la barre
d’outils.
• S&eacute;lectionnez un ou plusieurs points d’arr&ecirc;t dans la liste, puis cliquez sur Supprimer les points d’arr&ecirc;t s&eacute;lectionn&eacute;s.
• Pour supprimer tous les points d’arr&ecirc;t en une seule action, cliquez sur Supprimer tous les points d’arr&ecirc;t.
Vous pouvez &eacute;galement d&eacute;sactiver les points d’arr&ecirc;t et les r&eacute;activer ult&eacute;rieurement.
Derni&egrave;re mise &agrave; jour le 10/11/2011
140
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
D&eacute;finition de points d’arr&ecirc;t conditionnels
Vous pouvez sp&eacute;cifier les conditions r&eacute;gissant l’interruption de l’ex&eacute;cution du d&eacute;bogueur par les points d’arr&ecirc;t. La
d&eacute;finition d’un point d’arr&ecirc;t conditionnel consiste &agrave; sp&eacute;cifier une expression ActionScript qui sera &eacute;valu&eacute;e au cours de
la session de d&eacute;bogage. Les points d’arr&ecirc;t conditionnels interrompent l’ex&eacute;cution lorsque l’une des conditions
suivantes est remplie :
• l’expression prend la valeur &laquo; true &raquo; ;
• la valeur de l’expression change ;
• le nombre d’instances sp&eacute;cifi&eacute; a &eacute;t&eacute; atteint.
D&eacute;finition d’un point d’arr&ecirc;t conditionnel
1 Dans le menu contextuel d’un point d’arr&ecirc;t, cliquez sur Propri&eacute;t&eacute;s du point d’arr&ecirc;t.
2 Dans la bo&icirc;te de dialogue qui s’ouvre, sp&eacute;cifiez les param&egrave;tres suivants :
• Activ&eacute;
Activez ou d&eacute;sactivez le point d’arr&ecirc;t.
• Nombre d’occurrences
S&eacute;lectionnez l’option Nombre d’occurrences afin de d&eacute;finir un compteur pour le point d’arr&ecirc;t. Saisissez un
nombre dans le champ Nombre d’occurrences.
Si vous activez les deux options, Nombre d’occurrences et Activer la condition, le nombre d’occurrences
repr&eacute;sente le nombre de fois que la condition sp&eacute;cifi&eacute;e est remplie (elle prend la valeur &laquo; true &raquo; ou elle change).
Si vous n’activez que l’option Nombre d’occurrences, le nombre d’occurrences repr&eacute;sente le nombre de fois que
le point d’arr&ecirc;t est atteint.
• Activer la condition
S&eacute;lectionnez l’option Activer la condition et saisissez une expression ActionScript &agrave; &eacute;valuer. Pour plus
d’informations sur les types d’expressions dont l’&eacute;valuation est prise en charge, voir &laquo; Exemples d’expressions &raquo;
&agrave; la page 141.
Remarque : Flash Builder v&eacute;rifie la syntaxe de l’expression et vous en signale les erreurs. La pr&eacute;sence d’un
op&eacute;rateur d’affectation dans l’expression d&eacute;clenche l’affichage d’un avertissement.
• Suspendre lorsque
Sp&eacute;cifiez &agrave; quel moment l’ex&eacute;cution doit &ecirc;tre interrompue : lorsque la condition a la valeur &laquo; true &raquo; ou lorsque
la valeur de la condition change.
Gestion des variables dans la vue Variables
Modification de la valeur d’une variable
1 S&eacute;lectionnez la variable que vous souhaitez modifier.
2 Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfonc&eacute;e (Mac OS) pour
afficher le menu contextuel et s&eacute;lectionnez Modifier la valeur.
3 Saisissez la nouvelle valeur et cliquez sur OK.
La variable contient la nouvelle valeur.
Les variables modifi&eacute;es sont affich&eacute;es en rouge.
Derni&egrave;re mise &agrave; jour le 10/11/2011
141
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
Recherche de variables
❖ Pour localiser une variable ou un membre de variable dans la vue Variables, s&eacute;lectionnez la vue, puis commencez
&agrave; saisir le nom de la variable recherch&eacute;e. Vous pouvez utiliser le caract&egrave;re g&eacute;n&eacute;rique (*) pour rechercher les mots
figurant dans le nom d’une variable (&laquo; *couleur &raquo;, par exemple).
Utilisation de la vue Expressions
En cours de d&eacute;bogage, vous pouvez analyser et modifier la valeur des variables contr&ocirc;l&eacute;es. Vous pouvez &eacute;galement
ajouter des expressions de contr&ocirc;le. Il s’agit d’expressions de code &eacute;valu&eacute;es &agrave; chaque interruption du d&eacute;bogage. Les
expressions de contr&ocirc;le sont utiles pour contr&ocirc;ler les variables susceptibles de d&eacute;passer l’&eacute;tendue et de ne pas &ecirc;tre
visibles dans la vue lorsque vous avancez d’un pas avec entr&eacute;e dans une fonction diff&eacute;rente.
Vous pouvez aussi placer le pointeur sur une expression ou une variable dans l’&eacute;diteur source afin d’afficher la valeur
de cette expression ou de cette variable dans une infobulle. Vous pouvez ajouter l’expression &agrave; la vue correspondante
en cliquant avec le bouton droit de la souris, puis en s&eacute;lectionnant la commande de contr&ocirc;le dans le menu contextuel.
Exemples d’expressions
Le d&eacute;bogueur de Flash Builder prend en charge une large gamme d’expressions simples et complexes. Le tableau
suivant r&eacute;pertorie des exemples d’expressions pouvant &ecirc;tre &eacute;valu&eacute;es en cours de session de d&eacute;bogage. Cette liste
d’expressions prises en charge n’est pas exhaustive et est fournie uniquement &agrave; titre indicatif.
Derni&egrave;re mise &agrave; jour le 10/11/2011
142
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
Exemples d’expressions prises en charge
Expression
Description
myString.length
Retourne la longueur d’une cha&icirc;ne.
myString.indexOf(‘@’)
Effectue le suivi de l’index du caract&egrave;re &laquo; @ &raquo;.
&quot;constant string&quot;.charAt(0)
Effectue le suivi du caract&egrave;re &agrave; un emplacement sp&eacute;cifique de la cha&icirc;ne. Les constantes de cha&icirc;ne
sont prises en charge.
employees.employee.@nom
&laquo; employees &raquo; est une variable XML. Ce type d’expression est utile pour d&eacute;boguer les applications
E4X.
x == null
Mots r&eacute;serv&eacute;s repr&eacute;sentant des valeurs dans les expressions.
user1 === user2
La plupart des op&eacute;rateurs ActionScript sont pris en charge.
MyClass.myStaticFunc()
Fonctions interpr&eacute;t&eacute;es comme une classe.
this.myMemberFunc()
Fonctions interpr&eacute;t&eacute;es en utilisant le mot-cl&eacute; this.
String.fromCharCode(33)
String est en fait une fonction, et non une classe, dont String.fromCharCode est un membre
dynamique.
myStaticFunc()
Ne peut &ecirc;tre &eacute;valu&eacute; que si myStaticFunc est visible &agrave; partir de la cha&icirc;ne d’&eacute;tendue actuelle.
myMemberFunc()
Ne peut &ecirc;tre &eacute;valu&eacute; que si myMemberFunc est visible &agrave; partir de la cha&icirc;ne d’&eacute;tendue actuelle.
Math.max(1,2,3)
Les fonctions math&eacute;matiques sont prises en charge.
mystring.search(/myregex/i)
Les expressions r&eacute;guli&egrave;res sont prises en charge.
[&quot;my&quot;, &quot;literal&quot;, &quot;array&quot;]
Cr&eacute;ation de tableaux.
new MyClass()
Instanciation de classes.
&quot;string&quot; + 3
Traitement correct d’une cha&icirc;ne plus un nombre entier.
x &gt;&gt;&gt; 2
Les op&eacute;rations de d&eacute;calage logique sont prises en charge.
3.5 + 2
Ex&eacute;cution correcte des op&eacute;rations arithm&eacute;tiques.
Limitations de l’&eacute;valuation des expressions
Il existe quelques limitations &agrave; l’&eacute;valuation des expressions.
• Les espaces de noms ne sont pas pris en charge.
• Les objets ins&eacute;r&eacute;s ne sont pas pris en charge.
• Le mot-cl&eacute; super n’est pas pris en charge.
• Les noms de classe complets ne sont pas pris en charge.
Par exemple, vous ne pouvez pas &eacute;valuer mx.controls.Button.
Vous pouvez faire r&eacute;f&eacute;rence au nom de classe non qualifi&eacute;. Par exemple, vous pouvez sp&eacute;cifier que Button fait
r&eacute;f&eacute;rence &agrave; mx.controls.Button.
En pr&eacute;sence d’un nom de classe ambigu (deux classes portant le m&ecirc;me nom dans deux packages diff&eacute;rents), il vous
est impossible de contr&ocirc;ler quelle classe est &eacute;valu&eacute;e. Vous pouvez cependant sp&eacute;cifier :
getDefinitionByName(&quot;mx.controls.Button&quot;)
• La plupart des expressions E4X peuvent &ecirc;tre &eacute;valu&eacute;es, mais les expressions de filtre E4X ne sont pas prises en
charge.
Derni&egrave;re mise &agrave; jour le 10/11/2011
143
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
Par exemple, vous ne pouvez pas &eacute;valuer myxml.(@id=='3')).
• Vous ne pouvez pas appeler des fonctions d&eacute;finies en tant que variables.
Utilisation de points de contr&ocirc;le
Au cours du d&eacute;bogage d’une application, vous pouvez d&eacute;finir des points de contr&ocirc;le pour des instances sp&eacute;cifiques de
variables. Ils auront pour t&acirc;che d’interrompre l’ex&eacute;cution &agrave; tout changement de valeur de la variable contr&ocirc;l&eacute;e. Les
points de contr&ocirc;le &eacute;tant d&eacute;finis pour l’instance sp&eacute;cifique d’une variable, ils ne peuvent pas &ecirc;tre plac&eacute;s dans l’&eacute;diteur
de code. Ils sont donc d&eacute;finis &agrave; partir de la vue Variables au cours de la session de d&eacute;bogage.
Pour la d&eacute;finition des points de contr&ocirc;le, veillez aux points suivants :
• A la fin d’une session de d&eacute;bogage, tous les points de contr&ocirc;le sont supprim&eacute;s.
• Vous ne pouvez pas d&eacute;finir des points de contr&ocirc;le sur les getter, mais vous pouvez en d&eacute;finir sur les champs des
getter.
Par exemple, vous ne pouvez pas d&eacute;finir un point de contr&ocirc;le sur width, mais vous pouvez en d&eacute;finir un sur
_width.
• Vous ne pouvez pas d&eacute;finir des points de contr&ocirc;le sur des variables locales, mais vous pouvez en d&eacute;finir sur les
membres des variables locales, ainsi que l’illustre le fragment de code suivant :
public class MyClass
{
// These are fields of a class, so you can set a watchpoint on
// 'memberInt', and on 'memberButton', and on 'memberButton._width':
private var memberInt:int = 0;
private var memberButton:Button = new Button();
public function myFunction():void {
// You CANNOT set a watchpoint on 'i', because it is local:
var i:int = 0;
// You CANNOT set a watchpoint on 'someButton', because it is local;
// but you CAN set a watchpoint on 'someButton._width':
var someButton:Button = new Button();
...
}
• L’ex&eacute;cution s’interrompt pour un point de contr&ocirc;le lorsque la valeur d’origine d’une instance d’objet change.
Ce comportement diff&egrave;re de l’utilisation d’une expression dans un point d’arr&ecirc;t conditionnel pour arr&ecirc;ter
l’ex&eacute;cution lorsque la valeur d’une variable change.
D&eacute;finition de points de contr&ocirc;le
❖ Deux m&eacute;thodes permettent de d&eacute;finir un point de contr&ocirc;le au cours d’une session de d&eacute;bogage :
• Dans la vue Variables, ouvrez le menu contextuel d’une variable et s&eacute;lectionnez Ajouter/Supprimer un point de
contr&ocirc;le.
• Dans le menu Ex&eacute;cuter de Flash Builder, s&eacute;lectionnez Ajouter un point de contr&ocirc;le.
Dans la bo&icirc;te de dialogue d’ajout d’un point de contr&ocirc;le, s&eacute;lectionnez la variable que vous souhaitez contr&ocirc;ler.
La vue Variables affiche une ic&ocirc;ne repr&eacute;sentant un crayon en regard de la variable pour laquelle un point de
contr&ocirc;le a &eacute;t&eacute; d&eacute;fini.
Derni&egrave;re mise &agrave; jour le 10/11/2011
144
UTILISATION DE FLASH BUILDER 4.6
D&eacute;bogage d’outils dans Flash Builder
Remarque : si vous tentez de d&eacute;finir un point de contr&ocirc;le pour un getter, une bo&icirc;te de dialogue s’ouvre. Elle sugg&egrave;re
une variable valide pour le point d’arr&ecirc;t. Si vous supprimez la variable sugg&eacute;r&eacute;e, la bo&icirc;te de dialogue r&eacute;pertorie toutes
les variables valides de l’objet.
Utilisation de la commande Ex&eacute;cuter jusqu’&agrave; la ligne
La commande Ex&eacute;cuter jusqu’&agrave; la ligne permet de quitter une boucle au cours d’une session de d&eacute;bogage.
Au cours du d&eacute;bogage, vous constaterez parfois que votre code ex&eacute;cute une boucle r&eacute;p&eacute;titive. Pour quitter cette boucle,
faites appel &agrave; la commande Ex&eacute;cuter jusqu’&agrave; la ligne situ&eacute;e dans le menu Ex&eacute;cuter.
Derni&egrave;re mise &agrave; jour le 10/11/2011
145
Chapitre 6 : Profilage d’outils dans Flash
Builder
Utilisez le profileur dans Adobe Flash&reg; Builder™ pour identifier les goulets d’&eacute;tranglement des performances et les
fuites de m&eacute;moire dans vos applications. Le profileur n’est disponible que dans Flash Builder Premium.
Perspective Profil Flash
Flash Builder Premium contient une perspective suppl&eacute;mentaire, la perspective Profil Flash. La perspective Profil
affiche plusieurs panneaux (ou vues) pr&eacute;sentant les donn&eacute;es de profilage sous diff&eacute;rentes formes. Lorsque vous
interagissez avec l’application, le profileur enregistre les donn&eacute;es concernant le statut de l’application, notamment le
nombre d’objets, leur taille, le nombre d’appels de la m&eacute;thode et le temps consacr&eacute; &agrave; ces appels.
Vues du profileur
Le profileur se compose de plusieurs vues (ou panneaux) pr&eacute;sentant de diff&eacute;rentes mani&egrave;res les donn&eacute;es de profilage.
Le tableau suivant pr&eacute;sente chacune de ces vues :
Vue
Description
Profiler
Affiche les applications actuellement connect&eacute;es, leur &eacute;tat et tous les instantan&eacute;s de m&eacute;moire et de
performances associ&eacute;s.
Les sessions de profilage d&eacute;marrent sans instantan&eacute;s de performances ou de m&eacute;moire.
Donn&eacute;es de profilage
enregistr&eacute;es
Affiche une liste d’instantan&eacute;s enregistr&eacute;s, class&eacute;s par application. Vous pouvez charger des donn&eacute;es de
profilage enregistr&eacute;es en cliquant deux fois sur l’instantan&eacute; enregistr&eacute; dans cette liste.
Pour plus d’informations, voir &laquo; Enregistrement et chargement des donn&eacute;es de profilage &raquo; &agrave; la page 166.
Objets actifs
Affiche des informations concernant les classes utilis&eacute;es par l’application en cours. Cette vue montre les
classes qui sont instanci&eacute;es, le nombre cr&eacute;&eacute;, combien se trouvent dans le segment m&eacute;moire et la quantit&eacute; de
m&eacute;moire que les objets actifs occupent.
Pour plus d’informations, voir &laquo; Affichage des informations dans la vue Objets actifs &raquo; &agrave; la page 146.
Instantan&eacute; de la
m&eacute;moire
Affiche l’&eacute;tat de l’application &agrave; un moment donn&eacute;. Cette vue contraste avec la vue Objets actifs, mise &agrave; jour en
continu. La vue Instantan&eacute; de la m&eacute;moire affiche le nombre d’objets r&eacute;f&eacute;renc&eacute;s et utilis&eacute;s dans l’application
et la quantit&eacute; de m&eacute;moire que chaque type d’objets utilisait &agrave; ce moment-l&agrave;.
Deux instantan&eacute;s de la m&eacute;moire pris &agrave; des moments diff&eacute;rents sont compar&eacute;s en vue de d&eacute;terminer les fuites
de m&eacute;moire qui existent entre les deux moments.
Vous pouvez afficher la vue Instantan&eacute; de la m&eacute;moire en cliquant sur le bouton Prendre un instantan&eacute; de la
m&eacute;moire puis en cliquant deux fois sur l’instantan&eacute; de m&eacute;moire dans la vue Profiler.
Pour plus d’informations, voir &laquo; Vue Instantan&eacute; de la m&eacute;moire &raquo; &agrave; la page 147.
Derni&egrave;re mise &agrave; jour le 10/11/2011
146
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Vue
Description
Objets vagabonds
Affiche les objets cr&eacute;&eacute;s entre deux instantan&eacute;s de m&eacute;moire qui existent toujours dans la m&eacute;moire ou qui n’ont
pas &eacute;t&eacute; nettoy&eacute;s. Vous pouvez cliquer deux fois sur le nom d’une classe dans la table pour ouvrir la vue
R&eacute;f&eacute;rences de l’objet. Celle-ci vous permet d’examiner la relation entre les objets s&eacute;lectionn&eacute;s et d’autres
objets.
Vous pouvez afficher la vue Objets vagabonds en s&eacute;lectionnant deux instantan&eacute;s de m&eacute;moire et en cliquant
sur le bouton Objets vagabonds.
Pour plus d’informations, voir &laquo; Vue Objets vagabonds &raquo; &agrave; la page 157.
Suivi des allocations
Affiche des statistiques li&eacute;es aux m&eacute;thodes lors de la comparaison de deux instantan&eacute;s de m&eacute;moire.
Vous pouvez afficher la vue Suivi des allocations en s&eacute;lectionnant deux instantan&eacute;s de m&eacute;moire et en cliquant
sur le bouton Afficher le suivi des allocations.
Pour plus d’informations, voir &laquo; Vue Suivi des allocations &raquo; &agrave; la page 151.
R&eacute;f&eacute;rences de l’objet
Affiche les objets et les objets qui les r&eacute;f&eacute;rencent.
Vous pouvez afficher la vue R&eacute;f&eacute;rences de l’objet en cliquant deux fois sur le nom d’une classe dans la vue
Instantan&eacute; de la m&eacute;moire ou Objets vagabonds.
Pour plus d’informations, voir &laquo; Vue R&eacute;f&eacute;rences de l’objet &raquo; &agrave; la page 149.
Statistiques de l’objet
Affiche des informations concernant l’appelant et l’appel&eacute; du groupe d’objets s&eacute;lectionn&eacute;.
Vous pouvez afficher la vue Statistiques de l’objet en cliquant deux fois sur une entr&eacute;e de la vue Suivi des
allocations.
Pour plus d’informations, voir &laquo; Vue Statistiques de l’objet &raquo; &agrave; la page 152.
Profil de performance
Affiche les performances des m&eacute;thodes de l’application au cours d’une p&eacute;riode donn&eacute;e. Cliquez ensuite sur le
nom d’une m&eacute;thode dans la table pour ouvrir la vue Statistiques de la m&eacute;thode, qui vous permet de d&eacute;tecter
les goulets d’&eacute;tranglement des performances.
Vous pouvez afficher la vue Profil de performance en cliquant deux fois sur l’un des instantan&eacute;s des
performances dans la vue Profiler.
Pour plus d’informations, voir &laquo; Vue Profil de performance &raquo; &agrave; la page 154.
Statistiques de la
m&eacute;thode
Affiche des statistiques concernant les performances du groupe de m&eacute;thodes s&eacute;lectionn&eacute;.
Vous pouvez afficher la vue Statistiques de la m&eacute;thode en cliquant deux fois sur une ligne de la vue Profil de
performance ou en y s&eacute;lectionnant une m&eacute;thode et en cliquant sur le bouton Ouvrir les statistiques de la
m&eacute;thode.
Pour plus d’informations, voir &laquo; Identification des caract&eacute;ristiques des performances des m&eacute;thodes &raquo; &agrave; la
page 156.
Utilisation de la
m&eacute;moire
Affiche sous forme de graphique les pics d’utilisation de la m&eacute;moire et l’utilisation actuelle de la m&eacute;moire dans
le temps.
Pour plus d’informations, voir &laquo; Graphique Utilisation de la m&eacute;moire &raquo; &agrave; la page 158.
Affichage des informations dans la vue Objets actifs
La vue Objets actifs affiche des informations concernant les classes utilis&eacute;es par l’application en cours. Cette vue
montre les classes qui sont instanci&eacute;es, le nombre cr&eacute;&eacute;, combien se trouvent dans la m&eacute;moire et la quantit&eacute; de m&eacute;moire
que les objets actifs occupent.
Le profileur met &agrave; jour en continu les donn&eacute;es dans la vue Objets actifs &agrave; mesure que vous profilez l’application. Vous
n’avez pas besoin d’actualiser la vue ou de garder le focus dessus pour mettre &agrave; jour les donn&eacute;es.
Pour pouvoir utiliser la vue Objets actifs, activez le profilage de la m&eacute;moire au d&eacute;marrage du profileur. C’est la valeur
par d&eacute;faut. Si vous fermez la vue Objets actifs et que vous voulez la rouvrir, d&eacute;ployez la liste d&eacute;roulante dans la vue
Profiler et s&eacute;lectionnez Surveiller les objets actifs.
Derni&egrave;re mise &agrave; jour le 10/11/2011
147
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
L’exemple suivant illustre la vue Objets actifs :
Le tableau suivant r&eacute;pertorie les colonnes de la vue Objets actifs :
Colonne
Description
Classe
Classes poss&eacute;dant des occurrences dans l’application en cours d’ex&eacute;cution.
Package
Package dans lequel se trouve chaque classe. Si la classe n’est pas dans un package, la valeur de ce
champ est le nom du fichier dans lequel se trouve la classe. Le nombre suivant le signe du dollar est un
identifiant unique de cette classe.
Si le champ Package est vide, la classe se trouve dans le package global ou le package non nomm&eacute;.
Occurrences cumul&eacute;es
Nombre total d’occurrences de chaque classe cr&eacute;&eacute;es depuis le d&eacute;marrage de l’application.
Occurrences
Nombre d’occurrences de chaque classe actuellement dans la m&eacute;moire. Cette valeur est toujours
inf&eacute;rieure ou &eacute;gale &agrave; la valeur contenue dans la colonne Occurrences cumul&eacute;es.
M&eacute;moire cumul&eacute;e
Quantit&eacute; totale de m&eacute;moire, exprim&eacute;e en octets, que toutes les occurrences de chaque classe ont
utilis&eacute;e, y compris les classes n’&eacute;tant plus dans la m&eacute;moire.
M&eacute;moire
Quantit&eacute; totale de m&eacute;moire, exprim&eacute;e en octets, que toutes les occurrences de chaque classe ont
utilis&eacute;e, y compris les classes n’&eacute;tant plus dans la m&eacute;moire. Cette valeur est toujours inf&eacute;rieure ou &eacute;gale
&agrave; la valeur contenue dans la colonne M&eacute;moire cumul&eacute;e.
Vous utilisez g&eacute;n&eacute;ralement les donn&eacute;es contenues dans la vue Objets actifs pour voir la quantit&eacute; de m&eacute;moire que les
objets utilisent. A mesure que les objets sont nettoy&eacute;s de la m&eacute;moire, l’utilisation du nombre d’occurrences et de la
m&eacute;moire diminue, mais l’utilisation des occurrences cumul&eacute;es et de la m&eacute;moire cumul&eacute;e augmente. Cette vue indique
&eacute;galement la fa&ccedil;on dont la m&eacute;moire est utilis&eacute;e lors de l’ex&eacute;cution de l’application.
Pour plus d’informations sur l’ex&eacute;cution et l’analyse des r&eacute;sultats du nettoyage de la m&eacute;moire, voir &laquo; R&eacute;cup&eacute;ration de
place &raquo; &agrave; la page 168.
Vous pouvez limiter les donn&eacute;es affich&eacute;es dans la vue Objets actifs gr&acirc;ce aux filtres du profileur. Pour plus
d’informations, voir &laquo; Filtres du profileur &raquo; &agrave; la page 172.
Vue Instantan&eacute; de la m&eacute;moire
La vue Instantan&eacute; de la m&eacute;moire propose des informations concernant l’utilisation des objets et de la m&eacute;moire de
l’application &agrave; un moment donn&eacute;. A la diff&eacute;rence de la vue Objets actifs, les donn&eacute;es de la vue Instantan&eacute; de la m&eacute;moire
ne sont pas mises &agrave; jour en continu.
Derni&egrave;re mise &agrave; jour le 10/11/2011
148
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Pour pouvoir utiliser la vue Instantan&eacute; de la m&eacute;moire, activez le profilage de la m&eacute;moire au d&eacute;marrage du profileur. Il
s’agit de la valeur par d&eacute;faut.
Cr&eacute;ation et affichage d’un instantan&eacute; de la m&eacute;moire
1 D&eacute;marrez une session de profilage.
2 Interagissez avec votre application jusqu’&agrave; atteindre un point dans l’&eacute;tat de l’application o&ugrave; vous voulez prendre un
instantan&eacute; de la m&eacute;moire.
3 S&eacute;lectionnez l’application dans la vue Profiler.
4 Cliquez sur le bouton Prendre un instantan&eacute; de la m&eacute;moire.
Le profileur cr&eacute;e un instantan&eacute; de la m&eacute;moire et y appose un cachet de date. Il d&eacute;clenche &eacute;galement implicitement
la r&eacute;cup&eacute;ration de place avant l’enregistrement de l’instantan&eacute; de m&eacute;moire.
5 Pour afficher les donn&eacute;es dans l’instantan&eacute; de m&eacute;moire, cliquez deux fois sur l’instantan&eacute; de m&eacute;moire dans la vue
Profiler.
L’exemple suivant illustre la vue Instantan&eacute; de la m&eacute;moire :
Le tableau suivant r&eacute;pertorie les colonnes de la vue Instantan&eacute; de la m&eacute;moire :
Colonne
Description
Classe
Classes qui avaient des occurrences dans la m&eacute;moire au moment o&ugrave; vous avez enregistr&eacute; l’instantan&eacute; de la
m&eacute;moire.
Package
Package dans lequel se trouve chaque classe. Si la classe n’est pas dans un package, la valeur de ce champ est
le nom du fichier dans lequel se trouve la classe. Le nombre suivant le signe du dollar est un identifiant unique
de cette classe.
Si le champ Package est vide, la classe se trouve dans le package global ou le package non nomm&eacute;.
Occurrences
Nombre d’occurrences de chaque classe dans la m&eacute;moire au moment o&ugrave; vous avez enregistr&eacute; l’instantan&eacute; de
la m&eacute;moire.
M&eacute;moire
Quantit&eacute; de m&eacute;moire, exprim&eacute;e en octets, que toutes les occurrences de chaque classe utilisaient au moment
de la prise de l’instantan&eacute; de m&eacute;moire.
L’instantan&eacute; de m&eacute;moire est g&eacute;n&eacute;ralement utilis&eacute; comme point de d&eacute;part pour d&eacute;terminer sur quelles classes vous
concentrer pour optimiser la m&eacute;moire ou trouver des pertes de m&eacute;moire. Pour ce faire, cr&eacute;ez plusieurs instantan&eacute;s de
m&eacute;moire &agrave; diff&eacute;rents moments, puis comparez les diff&eacute;rences dans les vues Objets vagabonds ou Suivi des allocations.
Vous pouvez enregistrer des instantan&eacute;s de la m&eacute;moire pour comparer l’&eacute;tat d’une application au cours d’une session
de profilage diff&eacute;rente. Pour plus d’informations, voir &laquo; Enregistrement et chargement des donn&eacute;es de profilage &raquo; &agrave; la
page 166.
Derni&egrave;re mise &agrave; jour le 10/11/2011
149
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Lorsque vous cliquez deux fois sur une ligne de la vue Instantan&eacute; de la m&eacute;moire, le profileur affiche la vue R&eacute;f&eacute;rences
de l’objet. Cette vue affiche les traces de pile correspondant aux occurrences de la classe en cours. Vous pouvez
consulter les traces de pile pour les occurrences de la classe en cours dans la vue R&eacute;f&eacute;rences de l’objet. Pour plus
d’informations sur la vue R&eacute;f&eacute;rences de l’objet, voir &laquo; Vue R&eacute;f&eacute;rences de l’objet &raquo; &agrave; la page 149.
Vous pouvez &eacute;galement sp&eacute;cifier quelles donn&eacute;es afficher dans la vue Instantan&eacute; de la m&eacute;moire gr&acirc;ce aux filtres du
profileur. Pour plus d’informations, voir &laquo; Filtres du profileur &raquo; &agrave; la page 172.
Vue R&eacute;f&eacute;rences de l’objet
La vue R&eacute;f&eacute;rences de l’objet affiche les traces de pile pour les classes qui ont &eacute;t&eacute; instanci&eacute;es dans l’application.
La vue R&eacute;f&eacute;rences de l’objet affiche des informations sur les occurrences de la classe s&eacute;lectionn&eacute;e sous forme
d’arborescence. La vue R&eacute;f&eacute;rences de l’objet affiche &eacute;galement les chemins d’acc&egrave;s aux r&eacute;f&eacute;rences arri&egrave;re de l’objet,
menant &agrave; la racine de la RP. S’il existe plusieurs occurrences d’un chemin d’acc&egrave;s &agrave; une r&eacute;f&eacute;rence d’objet, le chemin
d’acc&egrave;s n’est pas r&eacute;p&eacute;t&eacute;.
Pour ouvrir la vue R&eacute;f&eacute;rences de l’objet, cliquez deux fois sur le nom d’une classe dans les vues Instantan&eacute; de la
m&eacute;moire ou Objets vagabonds.
La vue R&eacute;f&eacute;rences de l’objet affiche les donn&eacute;es dans deux tables : Occurrences et Suivi des allocations.
La table Occurrences r&eacute;pertorie tous les objets contenant des r&eacute;f&eacute;rences &agrave; l’objet actuel. Le num&eacute;ro entre parenth&egrave;ses
figurant apr&egrave;s chaque nom de classe est repr&eacute;sent&eacute; en tant que nœud dans l’arborescence. Il repr&eacute;sente le nombre de
chemins d’acc&egrave;s menant &agrave; la racine de la RP &agrave; partir de ce nœud.
Vous ne pouvez pas voir le nombre de r&eacute;f&eacute;rences futures d’un objet. Un objet sans r&eacute;f&eacute;rences n’est pas list&eacute; dans cette
table. Cela ne devrait pas se produire, car l’objet en question doit &ecirc;tre nettoy&eacute; de la m&eacute;moire s’il ne poss&egrave;de aucune
r&eacute;f&eacute;rence.
L’exemple suivant illustre la table Occurrences de la vue R&eacute;f&eacute;rences de l’objet :
Le tableau suivant r&eacute;pertorie les colonnes de la table Occurrences :
Derni&egrave;re mise &agrave; jour le 10/11/2011
150
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Colonne
Description
Occurrence
Classe de l’objet contenant une r&eacute;f&eacute;rence &agrave; l’objet sp&eacute;cifi&eacute;. D&eacute;veloppez l’occurrence d’une classe pour
afficher les chemins menant &agrave; l’objet. Le nombre de chemins peut &ecirc;tre configur&eacute; en acc&eacute;dant &agrave; l’option
Filtres de la vue Instantan&eacute; de la m&eacute;moire.
Propri&eacute;t&eacute;
Propri&eacute;t&eacute; de l’objet contenant une r&eacute;f&eacute;rence &agrave; l’objet sp&eacute;cifi&eacute;. Par exemple, si vous avez un objet o avec
une propri&eacute;t&eacute; i, et que vous attribuez cette propri&eacute;t&eacute; pour qu’elle pointe sur l’&eacute;tiquette du bouton :
o.i = myButton.label;
Une r&eacute;f&eacute;rence est cr&eacute;&eacute;e &agrave; l’&eacute;tiquette monBouton.label &agrave; partir de la propri&eacute;t&eacute; i.
ID
Identifiant de r&eacute;f&eacute;rence de l’objet contenant la r&eacute;f&eacute;rence &agrave; l’objet s&eacute;lectionn&eacute;.
Racine de la RP
Indique si un objet poss&egrave;de une r&eacute;f&eacute;rence arri&egrave;re &agrave; la racine de la RP (r&eacute;cup&eacute;ration de place).
D&eacute;veloppez un nœud d’objet dans l’arborescence pour afficher s’il existe une r&eacute;f&eacute;rence arri&egrave;re &agrave; la
racine de la RP.
M&eacute;moire superficielle
Indique la taille de l’objet.
M&eacute;moire conserv&eacute;e
Indique la taille de l’objet et celle de tous les autres objets r&eacute;f&eacute;renc&eacute;s.
Les propri&eacute;t&eacute;s d’un objet s’affichent dans la vue Propri&eacute;t&eacute;s des objets. Cliquez deux fois sur une propri&eacute;t&eacute; pour voir la
hi&eacute;rarchie des propri&eacute;t&eacute;s de l’objet.
La table Suivi des allocations affiche la trace de la pile de l’occurrence s&eacute;lectionn&eacute;e dans la table Occurrences. Lorsque
vous s&eacute;lectionnez une occurrence dans la table Occurrences, le profileur affiche la pile d’appels de cette occurrence
dans la table Suivi des allocations.
L’exemple suivant illustre la table Suivi des allocations de la vue R&eacute;f&eacute;rences de l’objet :
Le tableau suivant r&eacute;pertorie les colonnes de la table Suivi des allocations :
Colonne
Description
M&eacute;thode
La m&eacute;thode de niveau sup&eacute;rieur de cette table est celle qui a cr&eacute;&eacute; l’occurrence de la classe r&eacute;pertori&eacute;e
dans la table Occurrences.
Vous pouvez d&eacute;velopper la m&eacute;thode pour en afficher la trace de pile. Cela peut vous aider &agrave; d&eacute;terminer
l’endroit o&ugrave; la pile d’appels a commenc&eacute;.
Emplacement
Fichier dans lequel la m&eacute;thode est d&eacute;finie.
Ligne
Num&eacute;ro de la ligne dans le fichier.
Vous pouvez afficher des donn&eacute;es dans cette table uniquement si vous activez le suivi d’allocations au d&eacute;marrage du
profileur.
Vous pouvez ouvrir le code source de la classe s&eacute;lectionn&eacute;e en cliquant deux fois sur une classe dans cette table.
Derni&egrave;re mise &agrave; jour le 10/11/2011
151
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Vue Suivi des allocations
La vue Suivi des allocations indique les m&eacute;thodes qui ont &eacute;t&eacute; appel&eacute;es entre deux instantan&eacute;s de m&eacute;moire et la quantit&eacute;
de m&eacute;moire consomm&eacute;e lors de ces appels de m&eacute;thode. Pour ouvrir la vue Suivi des allocations, s&eacute;lectionnez deux
instantan&eacute;s de m&eacute;moire puis cliquez sur le bouton Afficher le suivi des allocations. Pour plus d’informations sur
l’enregistrement d’un instantan&eacute; de la m&eacute;moire, voir &laquo; Vue Instantan&eacute; de la m&eacute;moire &raquo; &agrave; la page 147.
Le r&eacute;sultat de la comparaison des instantan&eacute;s de la m&eacute;moire est une liste de m&eacute;thodes que Flash Player a ex&eacute;cut&eacute;es
entre les deux instantan&eacute;s de m&eacute;moire. Pour chacune de ces m&eacute;thodes, le profileur indique le nombre d’objets cr&eacute;&eacute;s
dans cette m&eacute;thode.
Ces informations peuvent vous aider &agrave; optimiser les performances. Une fois que vous avez identifi&eacute; des m&eacute;thodes qui
cr&eacute;ent un nombre excessif d’objets, vous pouvez optimiser ces zones &agrave; probl&egrave;me.
Pour pouvoir utiliser la vue Suivi des allocations, activez le suivi des allocations au d&eacute;marrage du profileur. Cette
option est d&eacute;sactiv&eacute;e par d&eacute;faut.
L’exemple suivant illustre la vue Suivi des allocations :
Le tableau suivant r&eacute;pertorie les colonnes de la vue Suivi des allocations :
Colonne
Description
M&eacute;thode
M&eacute;thode appel&eacute;e pendant l’intervalle de l’instantan&eacute;. Cette colonne contient aussi la classe dont
l’occurrence a appel&eacute; cette m&eacute;thode.
Package
Package dans lequel se trouve chaque classe. Si la classe n’est pas dans un package, la valeur de ce
champ est le nom du fichier dans lequel se trouve la classe. Le nombre suivant le signe du dollar est un
identifiant unique de cette classe.
Si le champ Package est vide, la classe se trouve dans le package global ou le package non nomm&eacute;.
Occurrences cumul&eacute;es
Nombre d’objets instanci&eacute;s dans cette m&eacute;thode et toutes les m&eacute;thodes appel&eacute;es &agrave; partir de cette
m&eacute;thode.
Occurrences propres
Nombre d’objets instanci&eacute;s dans cette m&eacute;thode, &agrave; l’exception des objets instanci&eacute;s dans des appels de
m&eacute;thode suivants &agrave; partir de cette m&eacute;thode.
M&eacute;moire cumul&eacute;e
Quantit&eacute; de m&eacute;moire, exprim&eacute;e en octets, utilis&eacute;e par les objets instanci&eacute;s dans cette m&eacute;thode et
toutes les m&eacute;thodes appel&eacute;es &agrave; partir de cette m&eacute;thode.
M&eacute;moire propre
Quantit&eacute; de m&eacute;moire, exprim&eacute;e en octets, utilis&eacute;e par les objets instanci&eacute;s dans cette m&eacute;thode, &agrave;
l’exception de la m&eacute;moire utilis&eacute;e par les objets instanci&eacute;s dans des appels de m&eacute;thode suivants &agrave; partir
de cette m&eacute;thode.
Derni&egrave;re mise &agrave; jour le 10/11/2011
152
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Lors de l’enregistrement de m&eacute;thodes au cours d’intervalles d’&eacute;chantillonnage, le profileur consigne aussi les actions
internes de Flash Player. Ces actions apparaissent dans la liste de m&eacute;thodes entre crochets sous la forme [mouseEvent]
ou [newclass] ou avec des noms similaires. Pour plus d’informations sur les actions internes de Flash Player, voir
&laquo; Fonctionnement du profileur &raquo; &agrave; la page 161.
Pour ouvrir la vue Statistiques de l’objet, cliquez deux fois sur une ligne de la table Suivi des allocations. Cette vue
fournit des informations concernant les objets cr&eacute;&eacute;s dans la m&eacute;thode que vous avez s&eacute;lectionn&eacute;e. Elle permet aussi de
consulter en d&eacute;tail les objets cr&eacute;&eacute;s dans des m&eacute;thodes appel&eacute;es &agrave; partir de cette m&eacute;thode. Pour plus d’informations,
voir &laquo; Vue Statistiques de l’objet &raquo; &agrave; la page 152.
Vous pouvez limiter les donn&eacute;es affich&eacute;es dans la vue Suivi des allocations gr&acirc;ce aux filtres du profileur. Pour plus
d’informations, voir &laquo; Filtres du profileur &raquo; &agrave; la page 172.
Vue Statistiques de l’objet
La vue Statistiques de l’objet propose des statistiques concernant les performances du groupe d’objets s&eacute;lectionn&eacute;.
Cette vue permet d’identifier quelles m&eacute;thodes appellent un nombre disproportionn&eacute; d’autres m&eacute;thodes. Elle indique
&eacute;galement la quantit&eacute; de m&eacute;moire que les objets instanci&eacute;s dans ces appels de m&eacute;thode consomment. Vous pouvez
faire appel &agrave; la vue Statistiques de l’objet pour identifier d’&eacute;ventuelles fuites de m&eacute;moire et d’autres sources de
probl&egrave;mes de performances dans votre application.
Pour acc&eacute;der &agrave; la vue Statistiques de l’objet, s&eacute;lectionnez deux instantan&eacute;s de m&eacute;moire dans la vue Profiler et affichez
la comparaison dans la vue Suivi des allocations. Cliquez ensuit deux fois sur une ligne pour afficher les informations
dans la vue Statistiques de l’objet.
La vue comporte trois sections :
• Un r&eacute;capitulatif des statistiques de l’objet s&eacute;lectionn&eacute;, notamment le nombre d’occurrences et la quantit&eacute; de
m&eacute;moire utilis&eacute;e.
• La table Occurrences propres : liste d’objets instanci&eacute;s dans la m&eacute;thode s&eacute;lectionn&eacute;e dans la vue Suivi des
allocations. Elle ne r&eacute;pertorie pas les objets instanci&eacute;s dans les appels de m&eacute;thode suivants &agrave; partir de cette m&eacute;thode.
Le nombre d’objets dans cette liste correspond au nombre d’objets sp&eacute;cifi&eacute; dans la colonne Occurrences propres de
la vue Suivi des allocations.
• La table Occurrences de l’appel&eacute; : liste d’objets instanci&eacute;s dans les m&eacute;thodes appel&eacute;es par la m&eacute;thode s&eacute;lectionn&eacute;e
dans la vue Suivi des allocations. Elle ne comprend pas les objets instanci&eacute;s dans la m&eacute;thode m&ecirc;me. Le nombre
d’objets dans cette liste correspond au nombre d’objets sp&eacute;cifi&eacute; dans la colonne Occurrences cumul&eacute;es de la vue
Suivi des allocations.
Derni&egrave;re mise &agrave; jour le 10/11/2011
153
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
L’exemple suivant illustre le r&eacute;capitulatif de m&eacute;thodes et les tables Occurrences propres et Occurrences de l’appel&eacute; de
la vue Statistiques de l’objet :
Le tableau suivant r&eacute;pertorie les champs de la table Occurrences propres de la vue Statistiques de l’objet :
Colonne
Description
Classe
Classes qui ont &eacute;t&eacute; instanci&eacute;es uniquement dans la m&eacute;thode s&eacute;lectionn&eacute;e, &agrave; l’exception des classes
instanci&eacute;es dans des appels suivants &agrave; partir de cette m&eacute;thode.
Package
Package dans lequel se trouve chaque classe. Si la classe n’est pas dans un package, la valeur de ce champ
est le nom du fichier dans lequel se trouve la classe. Le nombre suivant le signe du dollar est un identifiant
unique de cette classe.
Si le champ Package est vide, la classe se trouve dans le package global ou le package non nomm&eacute;.
Occurrences propres
Nombre d’occurrences de cette classe cr&eacute;&eacute;es uniquement dans la m&eacute;thode s&eacute;lectionn&eacute;e, &agrave; l’exception des
occurrences cr&eacute;&eacute;es dans des appels suivants &agrave; partir de cette m&eacute;thode.
M&eacute;moire propre
Quantit&eacute; de m&eacute;moire, exprim&eacute;e en octets, utilis&eacute;e par les occurrences cr&eacute;&eacute;es uniquement dans la m&eacute;thode
s&eacute;lectionn&eacute;e, &agrave; l’exception de la m&eacute;moire utilis&eacute;e par les occurrences cr&eacute;&eacute;es dans des appels suivants &agrave; partir
de cette m&eacute;thode.
L’exemple suivant illustre la table Occurrences de l’appel&eacute; de la vue Statistiques de l’objet :
Le tableau suivant r&eacute;pertorie les champs de la table Occurrences de l’appel&eacute; de la vue Statistiques de l’objet :
Derni&egrave;re mise &agrave; jour le 10/11/2011
154
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Colonne
Description
Classe
Classes qui ont &eacute;t&eacute; instanci&eacute;es dans la m&eacute;thode s&eacute;lectionn&eacute;e, y compris les classes instanci&eacute;es dans des
appels suivants &agrave; partir de cette m&eacute;thode.
Package
Package dans lequel se trouve chaque classe. Si la classe n’est pas dans un package, la valeur de ce champ
est le nom du fichier dans lequel se trouve la classe. Le nombre suivant le signe du dollar est un identifiant
unique de cette classe.
Si le champ Package est vide, la classe se trouve dans le package global ou le package non nomm&eacute;.
Occurrences cumul&eacute;es
Nombre d’occurrences de cette classe cr&eacute;&eacute;es dans la m&eacute;thode s&eacute;lectionn&eacute;e et dans des appels suivants &agrave;
partir de cette m&eacute;thode.
M&eacute;moire cumul&eacute;e
Quantit&eacute; de m&eacute;moire, exprim&eacute;e en octets, utilis&eacute;e par les occurrences cr&eacute;&eacute;es dans la m&eacute;thode s&eacute;lectionn&eacute;e
et dans des appels suivants &agrave; partir de cette m&eacute;thode.
Vue Profil de performance
La vue Profil de performance est la principale vue &agrave; utiliser lors du profilage des performances. Elle propose des
statistiques telles que le nombre d’appels, la dur&eacute;e propre et la dur&eacute;e cumul&eacute;e pour les m&eacute;thodes appel&eacute;es au cours d’un
intervalle d’&eacute;chantillonnage particulier. Ces donn&eacute;es permettent d’identifier les goulets d’&eacute;tranglement des
performances.
Le processus de profilage des performances conserve une liste des m&eacute;thodes et des informations concernant ces
m&eacute;thodes qui ont &eacute;t&eacute; appel&eacute;es entre le moment o&ugrave; vous supprimez les donn&eacute;es de performances et le moment o&ugrave; vous
capturez les nouvelles donn&eacute;es. Cet &eacute;cart de temps est d&eacute;sign&eacute; par le terme de p&eacute;riode d’interaction.
Pour pouvoir utiliser la vue Profil de performance, activez le profilage des performances au d&eacute;marrage du profileur.
C’est la valeur par d&eacute;faut.
G&eacute;n&eacute;ration d’un profil de performance
1 Activez le profilage des performances et d&eacute;marrez une session de profilage.
2 Interagissez avec l’application jusqu’&agrave; atteindre le point o&ugrave; vous voulez commencer le profilage.
3 Cliquez sur le bouton R&eacute;initialiser les donn&eacute;es de performance.
4 Interagissez avec l’application et effectuez les actions &agrave; profiler.
5 Cliquez sur le bouton Capturer le profil de performance.
L’&eacute;cart de temps entre le moment o&ugrave; vous cliquez sur R&eacute;initialiser les donn&eacute;es de performance et le moment o&ugrave;
vous cliquez sur Capturer le profil de performance est la p&eacute;riode d’interaction. Si vous ne cliquez pas sur
R&eacute;initialiser les donn&eacute;es de performance, le profil de performance contiendra toutes les donn&eacute;es captur&eacute;es depuis
le premier d&eacute;marrage de l’application.
6 Cliquez deux fois sur le profil de performance dans la vue Profiler.
Derni&egrave;re mise &agrave; jour le 10/11/2011
155
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
L’exemple suivant illustre la vue Profil de performance :
Le tableau suivant r&eacute;pertorie les colonnes de la vue Profil de performance :
Colonne
Description
M&eacute;thode
Nom de la m&eacute;thode et classe &agrave; laquelle appartient la m&eacute;thode.
Les actions internes ex&eacute;cut&eacute;es par Flash Player s’affichent sous la forme d’entr&eacute;es entre crochets : par
exemple, [mark] et [sweep]. Vous ne pouvez pas changer le comportement de ces actions internes, mais
vous pouvez utiliser les informations les concernant pour aider au profilage et &agrave; l’optimisation. Pour plus
d’informations sur ces actions, voir &laquo; Fonctionnement du profileur &raquo; &agrave; la page 161.
Package
Package dans lequel se trouve la classe. Si la classe n’est pas dans un package, la valeur de ce champ est le
nom du fichier dans lequel se trouve la classe. Le nombre suivant le signe du dollar est un identifiant unique
de cette classe.
Si le champ Package est vide, la classe se trouve dans le package global ou le package non nomm&eacute;.
Appels
Nombre de fois o&ugrave; la m&eacute;thode a &eacute;t&eacute; appel&eacute;e au cours de la p&eacute;riode d’interaction. Si une m&eacute;thode est
appel&eacute;e un nombre disproportionn&eacute; de fois par rapport aux autres m&eacute;thodes, vous pouvez tenter
d’optimiser cette m&eacute;thode en vue de r&eacute;duire le temps d’ex&eacute;cution.
Dur&eacute;e cumul&eacute;e
Laps de temps total, exprim&eacute; en millisecondes, qu’ont mis &agrave; s’ex&eacute;cuter tous les appels &agrave; cette m&eacute;thode, et
tous les appels &agrave; des m&eacute;thodes suivantes, au cours de la p&eacute;riode d’interaction.
Dur&eacute;e propre
Laps de temps, exprim&eacute; en millisecondes, qu’ont mis &agrave; s’ex&eacute;cuter tous les appels &agrave; cette m&eacute;thode au cours
de la p&eacute;riode d’interaction.
Dur&eacute;e cumul&eacute;e moyenne
Laps de temps moyen, exprim&eacute; en millisecondes, qu’ont mis &agrave; s’ex&eacute;cuter tous les appels &agrave; cette m&eacute;thode,
et tous les appels &agrave; des m&eacute;thodes suivantes, au cours de la p&eacute;riode d’interaction.
Dur&eacute;e propre moyenne
Laps de temps moyen, exprim&eacute; en millisecondes, qu’a mis &agrave; s’ex&eacute;cuter cette m&eacute;thode au cours de la p&eacute;riode
d’interaction.
Si vous cliquez deux fois sur une m&eacute;thode dans la vue Profil de performance, Flex affiche des informations concernant
cette m&eacute;thode dans la vue Statistiques de la m&eacute;thode. Cela vous permet de consulter le d&eacute;tail de la pile d’appels d’une
m&eacute;thode donn&eacute;e. Pour plus d’informations, voir &laquo; Identification des caract&eacute;ristiques des performances des m&eacute;thodes &raquo;
&agrave; la page 156.
Vous pouvez limiter les donn&eacute;es affich&eacute;es dans la vue Profil de performance gr&acirc;ce aux filtres du profileur. Pour plus
d’informations, voir &laquo; Filtres du profileur &raquo; &agrave; la page 172.
Vous pouvez enregistrer les profils de performances pour une utilisation ult&eacute;rieure. Pour plus d’informations, voir
&laquo; Enregistrement et chargement des donn&eacute;es de profilage &raquo; &agrave; la page 166.
Derni&egrave;re mise &agrave; jour le 10/11/2011
156
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Identification des caract&eacute;ristiques des performances des m&eacute;thodes
La vue Statistiques de la m&eacute;thode pr&eacute;sente les caract&eacute;ristiques des performances de la m&eacute;thode s&eacute;lectionn&eacute;e. Vous
pouvez faire appel &agrave; la vue Statistiques de la m&eacute;thode pour identifier des goulets d’&eacute;tranglement dans l’application. En
affichant, par exemple, les temps d’ex&eacute;cution d’une m&eacute;thode, vous pouvez voir les m&eacute;thodes qui prennent un temps
disproportionn&eacute; pour s’ex&eacute;cuter. Vous pouvez ensuite optimiser de mani&egrave;re s&eacute;lective ces m&eacute;thodes.
Pour plus d’informations, voir &laquo; Vue Profil de performance &raquo; &agrave; la page 154.
Affichage des informations concernant les m&eacute;thodes dans la vue Statistiques de la m&eacute;thode
1 Cliquez deux fois sur une ligne dans la vue Profil de performance ou s&eacute;lectionnez une m&eacute;thode dans cette m&ecirc;me
vue.
2 Cliquez sur le bouton Ouvrir les statistiques de la m&eacute;thode.
La vue comporte trois sections :
• Un r&eacute;capitulatif des performances de la m&eacute;thode s&eacute;lectionn&eacute;e, notamment le nombre d’appels, la dur&eacute;e cumul&eacute;e et
la dur&eacute;e propre.
• La table Appelants : informations concernant les m&eacute;thodes qui ont appel&eacute; la m&eacute;thode s&eacute;lectionn&eacute;e. Dans certains
cas, il est important de savoir si la m&eacute;thode s&eacute;lectionn&eacute;e est trop appel&eacute;e, la fa&ccedil;on dont elle est utilis&eacute;e et si elle est
utilis&eacute;e correctement.
• La table Appel&eacute;s : informations concernant les m&eacute;thodes appel&eacute;es par la m&eacute;thode s&eacute;lectionn&eacute;e.
L’exemple suivant illustre le r&eacute;capitulatif de m&eacute;thodes et les tables Appelants et Appel&eacute;s de la vue Statistiques de la
m&eacute;thode :
Le tableau suivant r&eacute;pertorie les champs de la table Appelants de la vue Statistiques de la m&eacute;thode :
Colonne
Description
M&eacute;thode
M&eacute;thodes qui ont appel&eacute; la m&eacute;thode apparaissant dans le r&eacute;capitulatif de la partie sup&eacute;rieure de cette vue. Si
cette liste est vide, la m&eacute;thode cible n’a &eacute;t&eacute; appel&eacute;e par aucune m&eacute;thode qui n’est pas filtr&eacute;e.
Derni&egrave;re mise &agrave; jour le 10/11/2011
157
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Colonne
Description
Package
Package dans lequel se trouve chaque classe. Si la classe n’est pas dans un package, la valeur de ce champ est
le nom du fichier dans lequel se trouve la classe. Le nombre suivant le signe du dollar est un identifiant unique
de cette classe.
Si le champ Package est vide, la classe se trouve dans le package global ou le package non nomm&eacute;.
Dur&eacute;e cumul&eacute;e
Laps de temps, exprim&eacute; en millisecondes, qu’a mis &agrave; s’ex&eacute;cuter chaque m&eacute;thode appelante, et toutes les
m&eacute;thodes suivantes.
Dur&eacute;e propre
Laps de temps, exprim&eacute; en millisecondes, qu’a mis &agrave; s’ex&eacute;cuter chaque m&eacute;thode appelante, &agrave; l’exception des
m&eacute;thodes appel&eacute;es par les m&eacute;thodes suivantes.
Le tableau suivant r&eacute;pertorie les champs de la table Appel&eacute;s de la vue Statistiques de la m&eacute;thode :
Colonne
Description
M&eacute;thode
M&eacute;thodes appel&eacute;es par la m&eacute;thode apparaissant dans le r&eacute;capitulatif de la partie sup&eacute;rieure de cette vue. Si
cette liste est vide, la m&eacute;thode cible n’a &eacute;t&eacute; appel&eacute;e par aucune m&eacute;thode qui n’est pas filtr&eacute;e.
Package
Package dans lequel se trouve chaque classe. Si la classe n’est pas dans un package, la valeur de ce champ est
le nom du fichier dans lequel se trouve la classe. Le nombre suivant le signe du dollar est un identifiant unique
de cette classe.
Si le champ Package est vide, la classe se trouve dans le package global ou le package non nomm&eacute;.
Dur&eacute;e cumul&eacute;e
Laps de temps (exprim&eacute; en millisecondes) qu’a mis &agrave; s’ex&eacute;cuter chaque m&eacute;thode appel&eacute;e et toutes les
m&eacute;thodes suivantes.
Dur&eacute;e propre
Laps de temps (exprim&eacute; en millisecondes) qu’a mis &agrave; s’ex&eacute;cuter chaque m&eacute;thode appel&eacute;e, &agrave; l’exception des
m&eacute;thodes appel&eacute;es par les m&eacute;thodes suivantes.
Vous pouvez parcourir la pile d’appels pour rechercher des goulets d’&eacute;tranglement des performances en cliquant sur
les m&eacute;thodes dans la table Appelants ou Appel&eacute;s. Si vous cliquez deux fois sur une m&eacute;thode dans ces tables, le profileur
affiche le r&eacute;capitulatif de cette m&eacute;thode dans la partie sup&eacute;rieure de la vue Statistiques de la m&eacute;thode puis affiche les
appelants et les appel&eacute;s pour la m&eacute;thode nouvellement s&eacute;lectionn&eacute;e dans les deux tables.
Remarque : la dur&eacute;e cumul&eacute;e moins la dur&eacute;e propre dans cette vue n’&eacute;quivaut pas toujours &agrave; la dur&eacute;e cumul&eacute;e des
appelants. La raison en est que si vous remontez &agrave; un appelant, la dur&eacute;e cumul&eacute;e correspond &agrave; la dur&eacute;e propre de cet
appelant plus toutes les cha&icirc;nes &agrave; partir desquelles la m&eacute;thode de d&eacute;part a &eacute;t&eacute; appel&eacute;e, mais pas les autres appel&eacute;s.
Vous pouvez aussi utiliser les boutons Pr&eacute;c&eacute;dent, Suivant et Valeur par d&eacute;faut du profileur pour parcourir la pile
d’appels.
Vous pouvez limiter les donn&eacute;es affich&eacute;es dans la vue Statistiques de la m&eacute;thode gr&acirc;ce aux filtres du profileur. Pour
plus d’informations, voir &laquo; Filtres du profileur &raquo; &agrave; la page 172.
Vue Objets vagabonds
La vue Objets vagabonds pr&eacute;sente les diff&eacute;rences entre deux instantan&eacute;s de m&eacute;moire de l’application que vous profilez.
Les diff&eacute;rences que cette vue illustre sont le nombre d’occurrences d’objets dans la m&eacute;moire et la quantit&eacute; de m&eacute;moire
que ces objets utilisent. Ces donn&eacute;es sont utiles pour identifier les fuites de m&eacute;moire. Le laps de temps &eacute;coul&eacute; entre
deux instantan&eacute;s de la m&eacute;moire est l’intervalle d’instantan&eacute;s.
Pour ouvrir la vue Objets vagabonds, s&eacute;lectionnez deux instantan&eacute;s de m&eacute;moire et cliquez sur le bouton Objets
vagabonds. Pour plus d’informations sur l’enregistrement d’un instantan&eacute; de la m&eacute;moire, voir &laquo; Vue Instantan&eacute; de la
m&eacute;moire &raquo; &agrave; la page 147.
Derni&egrave;re mise &agrave; jour le 10/11/2011
158
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
L’exemple suivant illustre la vue Objets vagabonds :
Le tableau suivant r&eacute;pertorie les colonnes de la vue Objets vagabonds :
Colonne
Description
Classe
Classes cr&eacute;&eacute;es mais pas d&eacute;truites pendant l’intervalle d’instantan&eacute;s.
Package
Package dans lequel se trouve chaque classe. Si la classe n’est pas dans un package, la valeur de ce champ est
le nom du fichier dans lequel se trouve la classe. Le nombre suivant le signe du dollar est un identifiant unique
de cette classe.
Si le champ Package est vide, l’objet se trouve dans le package global ou le package non nomm&eacute;.
Occurrences
Nombre d’occurrences cr&eacute;&eacute;es pendant l’intervalle d’instantan&eacute;s. Diff&eacute;rence entre le nombre d’occurrences de
chaque classe dans le premier intervalle et dans le second intervalle.
Par exemple, si le premier instantan&eacute; contient 22 567 cha&icirc;nes et le second 22 861 cha&icirc;nes, la valeur de ce
champ est 294.
M&eacute;moire
Quantit&eacute; de m&eacute;moire allou&eacute;e pendant l’intervalle d’instantan&eacute;s. Diff&eacute;rence entre la quantit&eacute; de m&eacute;moire que
les instances de chaque classe ont utilis&eacute;e lors de la prise du premier instantan&eacute; et lors de la prise du second
instantan&eacute;.
Par exemple, si la classe Strings occupe 2 031 053 octets dans le premier instantan&eacute; et 2 029 899 dans le
second, la valeur de ce champ est 1 154 octets.
Pour plus d’informations sur l’identification de fuites de m&eacute;moire, voir &laquo; Localisation des fuites de m&eacute;moire &raquo; &agrave; la
page 169.
Graphique Utilisation de la m&eacute;moire
Le graphique Utilisation de la m&eacute;moire pr&eacute;sente la m&eacute;moire utilis&eacute;e par l’application que vous profilez. Cette valeur
est diff&eacute;rente de l’utilisation de la m&eacute;moire de Flash Player et son navigateur. La raison en est que cette valeur ne
comprend pas l’utilisation de la m&eacute;moire de l’agent du profileur ou du navigateur. Elle correspond uniquement &agrave; la
somme des objets actifs de l’application profil&eacute;e. En cons&eacute;quence, si vous comparez la valeur de l’utilisation de la
m&eacute;moire dans ce graphique &agrave; la quantit&eacute; de m&eacute;moire que le navigateur utilise telle qu’indiqu&eacute;e, par exemple, dans le
Gestionnaire des t&acirc;ches de Windows, vous obtenez des r&eacute;sultats diff&eacute;rents.
Derni&egrave;re mise &agrave; jour le 10/11/2011
159
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
L’image suivante pr&eacute;sente le graphique de la vue Utilisation de la m&eacute;moire :
La valeur de M&eacute;moire actuelle est &eacute;gale &agrave; la somme des totaux de la colonne M&eacute;moire de la vue Objets actifs, en
supposant que tous les filtres soient d&eacute;sactiv&eacute;s.
La valeur de M&eacute;moire maximale correspond &agrave; la quantit&eacute; la plus &eacute;lev&eacute;e de m&eacute;moire que cette application a utilis&eacute;e au
cours de la session de profilage en cours.
Le graphique Utilisation de la m&eacute;moire montre l’&eacute;tat de la m&eacute;moire de l’application au cours des 100 derni&egrave;res
secondes. Vous ne pouvez pas configurer ce nombre et vous ne pouvez pas enregistrer de donn&eacute;es historiques pour le
diagramme.
Si vous fermez le graphique Utilisation de la m&eacute;moire et que vous voulez le rouvrir, cliquez sur la liste d&eacute;roulante dans
la vue Profiler et s&eacute;lectionnez Utilisation de la m&eacute;moire.
Profilage d’une application
Le profileur permet d’identifier les probl&egrave;mes de performance et les fuites de m&eacute;moire des applications. Vous le lancez
dans Adobe Flash Builder, et comme vous interagissez avec votre application, le profileur enregistre les donn&eacute;es
concernant l’&eacute;tat de l’application. Les donn&eacute;es enregistr&eacute;es incluent le nombre d’objets, la taille de ces objets, le nombre
d’appels de m&eacute;thodes et le temps pass&eacute; dans ces appels de m&eacute;thodes.
Le profilage d’une application peut vous aider &agrave; comprendre les &eacute;l&eacute;ments suivants :
Fr&eacute;quence des appels : dans certains cas, les m&eacute;thodes faisant appel &agrave; un grand nombre de ressources sont appel&eacute;es
plusieurs fois, alors qu’un seul appel est n&eacute;cessaire. En identifiant les m&eacute;thodes les plus fr&eacute;quemment appel&eacute;es, vous
pouvez concentrer le temps que vous passez &agrave; ajuster les performances sur une zone plus r&eacute;duite de l’application, o&ugrave;
l’impact sur les performances peut &ecirc;tre plus important.
Dur&eacute;e de la m&eacute;thode : le profileur peut vous indiquer le temps pass&eacute; dans une m&eacute;thode particuli&egrave;re ou, si la m&eacute;thode
est appel&eacute;e plusieurs fois, le laps de temps moyen pass&eacute; dans cette m&eacute;thode au cours d’une session de profilage. Si vous
trouvez que certaines m&eacute;thodes entra&icirc;nent des goulets d’&eacute;tranglement des performances, vous pouvez tenter de les
optimiser.
Piles d’appels : en suivant la pile d’appels d’une m&eacute;thode, vous pouvez voir l’int&eacute;gralit&eacute; du chemin que poursuit
l’application lorsqu’elle appelle des m&eacute;thodes successives. Vous constatez parfois alors que des m&eacute;thodes sont appel&eacute;es
alors que cela n’est pas n&eacute;cessaire.
Nombre d’occurrences (allocation d’objet) : si vous constatez que le m&ecirc;me objet est cr&eacute;&eacute; plusieurs fois alors que seul
un nombre sp&eacute;cifique d’occurrences est requis, vous pouvez impl&eacute;menter un motif Singleton si vous n’avez r&eacute;ellement
besoin que d’un seul de ces objets. Vous pouvez &eacute;galement appliquer d’autres techniques permettant de r&eacute;duire
Derni&egrave;re mise &agrave; jour le 10/11/2011
160
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
l’allocation excessive d’objets. Si le nombre d’objets est important, mais n&eacute;cessaire, vous pouvez optimiser l’objet
m&ecirc;me afin de r&eacute;duire sa ressource Agr&eacute;gat et l’utilisation qu’il fait de la m&eacute;moire.
Taille de l’objet : si vous remarquez que certains objets sont de taille disproportionn&eacute;e, vous pouvez tenter de les
optimiser pour r&eacute;duire leur encombrement m&eacute;moire. Cette op&eacute;ration s’av&egrave;re particuli&egrave;rement utile si vous optimisez
des objets cr&eacute;&eacute;s de nombreuses fois dans l’application.
R&eacute;cup&eacute;ration de place : lorsque vous comparez des instantan&eacute;s de profilage, vous pouvez constater que certains objets
dont l’application n’a plus besoin sont toujours pr&eacute;sents et sont toujours stock&eacute;s en m&eacute;moire. Pour pr&eacute;venir ces pertes
de m&eacute;moire, vous pouvez ajouter une logique qui supprime toute r&eacute;f&eacute;rence restante &agrave; ces objets.
Le profilage est un processus d’it&eacute;ration et constitue une partie de chaque &eacute;tape du d&eacute;veloppement de l’application.
Pour identifier rapidement les zones d’erreur et tirer le meilleur profit du profilage, il est conseill&eacute; de profiler
l’application aussi t&ocirc;t et aussi souvent que possible dans le cycle de d&eacute;veloppement.
Types de profilage
Avant de faire appel au profileur, d&eacute;cidez du type de profilage que vous allez effectuer : profilage des performances ou
profilage de la m&eacute;moire.
Le profilage des performances est le processus de recherche de m&eacute;thodes de l’application qui s’ex&eacute;cutent lentement et
peuvent &ecirc;tre am&eacute;lior&eacute;es. Une fois identifi&eacute;es, ces zones &agrave; probl&egrave;mes peuvent &ecirc;tre optimis&eacute;es pour acc&eacute;l&eacute;rer l’ex&eacute;cution
de l’application et pour que celle-ci r&eacute;ponde plus rapidement aux interactions de la part de l’utilisateur. Lors du
profilage des performances, vous cherchez g&eacute;n&eacute;ralement deux choses : une m&eacute;thode appel&eacute;e une seule fois mais qui
met plus de temps &agrave; s’ex&eacute;cuter que des m&eacute;thodes similaires, ou une m&eacute;thode qui ne met pas autant de temps &agrave;
s’ex&eacute;cuter, mais qui est appel&eacute;e de nombreuses fois. Les donn&eacute;es de profilage des performances permettent d’identifier
les m&eacute;thodes que vous optimisez par la suite. Vous trouverez peut-&ecirc;tre que le fait de r&eacute;duire le nombre d’appels &agrave; une
m&eacute;thode est plus efficace que la restructuration du code au sein de la m&eacute;thode.
Le profilage de la m&eacute;moire est l’examen de la quantit&eacute; de m&eacute;moire qu’utilise chaque objet ou type d’objet de
l’application. Les donn&eacute;es de profilage de la m&eacute;moire s’utilisent de diverses fa&ccedil;ons : pour voir si des objets sont plus
volumineux que n&eacute;cessaire, pour voir si trop d’objets d’un m&ecirc;me type existent et pour identifier des objets qui ne sont
pas nettoy&eacute;s dans la m&eacute;moire (fuites de m&eacute;moire). Gr&acirc;ce aux donn&eacute;es de profilage de la m&eacute;moire, vous pouvez tenter
de r&eacute;duire la taille des objets, le nombre des objets cr&eacute;&eacute;s ou permettre le nettoyage des objets dans la m&eacute;moire en
supprimant les r&eacute;f&eacute;rences &agrave; ces objets.
Le profilage de la m&eacute;moire peut ralentir les performances de l’application car il fait appel &agrave; une plus grande quantit&eacute;
de m&eacute;moire que le profilage des performances. Ne faites appel au profilage de la m&eacute;moire qu’en cas de n&eacute;cessit&eacute;.
Il convient souvent d’effectuer &agrave; la fois un profilage des performances et un profilage de la m&eacute;moire pour trouver la
source des probl&egrave;mes de performances. Le profilage des performances permet d’identifier les m&eacute;thodes qui entra&icirc;nent
une allocation de m&eacute;moire excessive et un allongement des temps d’ex&eacute;cution. Vous pouvez ensuite recourir au
profilage de la m&eacute;moire afin d’identifier les fuites de m&eacute;moire dans ces m&eacute;thodes.
Lorsque vous savez quel profilage vous allez effectuer, vous pouvez d&eacute;marrer le profileur.
Ressources suppl&eacute;mentaires
Le profileur seul n’am&eacute;liore ni la taille, ni la vitesse, ni les performances per&ccedil;ues d’une application. Apr&egrave;s avoir utilis&eacute;
le profileur pour identifier les m&eacute;thodes et classes qui posent probl&egrave;mes, consultez les ressources suivantes dans la
documentation Flex, qui vous aideront &agrave; am&eacute;liorer l’application :
• Optimisation des applications dans Cr&eacute;ation et d&eacute;ploiement d’applications Adobe Flex 3
• Am&eacute;lioration des performances de d&eacute;marrage dans Cr&eacute;ation et d&eacute;ploiement d’applications Adobe Flex 3
Derni&egrave;re mise &agrave; jour le 10/11/2011
161
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Fonctionnement du profileur
Le profileur est un agent qui communique avec l’application s’ex&eacute;cutant dans Flash Player. Il se connecte &agrave;
l’application par l’interm&eacute;diaire d’une connexion &agrave; un socket local. Vous devrez donc &eacute;ventuellement d&eacute;sactiver votre
logiciel antivirus si ce dernier entrave la communication avec les sockets.
Lorsque le profileur est en cours d’ex&eacute;cution, il prend un instantan&eacute; des donn&eacute;es &agrave; intervalles courts et enregistre les
actions d’Adobe Flash Player &agrave; ces moments. C’est ce qu’on appelle l’&eacute;chantillonnage. Le profileur enregistre par
exemple une m&eacute;thode ex&eacute;cut&eacute;e par l’application au moment de la prise de l’instantan&eacute;. Si au moment de l’instantan&eacute;
suivant, l’application ex&eacute;cute toujours la m&ecirc;me m&eacute;thode, le profileur continue d’enregistrer l’heure. Lorsque le
profileur effectue l’instantan&eacute; suivant et que l’application est pass&eacute;e &agrave; l’op&eacute;ration suivante, le profileur peut consigner
le temps qu’il a fallu &agrave; la m&eacute;thode pour s’ex&eacute;cuter.
L’&eacute;chantillonnage vous permet de profiler sans ralentir notablement l’application. L’intervalle &eacute;coul&eacute; s’appelle la
fr&eacute;quence d’&eacute;chantillonnage, qui survient environ toutes les millisecondes pendant la p&eacute;riode de profilage. Cela signifie
que les op&eacute;rations ne sont pas toutes enregistr&eacute;es et que les instantan&eacute;s ne sont pas tous pr&eacute;cis &agrave; une fraction de
milliseconde pr&egrave;s. Cela vous permet toutefois d’avoir une id&eacute;e plus pr&eacute;cise des op&eacute;rations qui prennent plus de temps
que les autres.
En analysant les donn&eacute;es d’&eacute;chantillonnage, le profileur peut afficher toutes les op&eacute;rations effectu&eacute;es dans l’application
et enregistrer leur d&eacute;lai d’ex&eacute;cution. Il consigne &eacute;galement l’utilisation de la m&eacute;moire et les traces de pile et affiche les
donn&eacute;es dans une s&eacute;rie de vues, ou panneaux. Les appels de m&eacute;thode sont class&eacute;s par dur&eacute;e d’ex&eacute;cution et nombre
d’appels, ainsi que par nombre d’objets cr&eacute;&eacute;s dans la m&eacute;thode.
Le profileur calcule &eacute;galement les valeurs cumul&eacute;es des donn&eacute;es. Par exemple, si vous consultez des statistiques li&eacute;es
aux m&eacute;thodes, les donn&eacute;es cumul&eacute;es comprennent le temps et la m&eacute;moire allou&eacute;s au cours de cette m&eacute;thode, ainsi que
le temps et la m&eacute;moire allou&eacute;s au cours de toutes les m&eacute;thodes appel&eacute;es &agrave; partir de cette m&eacute;thode. Vous pouvez
effectuer une analyse plus pouss&eacute;e des appels de m&eacute;thode suivants, jusqu’&agrave; trouver la source des probl&egrave;mes de
performances.
Profilage d’API
Le profileur utilise les API ActionScript d&eacute;finies dans le packageflash.sampler.*. Ce package contient la Sample,
StackFrame, NewObjectSample et DeleteObjectSample. Vous pouvez faire appel aux m&eacute;thodes et aux classes
contenues dans ce package pour &eacute;crire votre propre application de profileur ou pour inclure un sous-ensemble de
fonctionnalit&eacute;s de profilage dans vos applications.
Outre les classes du package flash.sampler.*, le profileur utilise les m&eacute;thodes contenues dans la classe System.
Actions internes de Flash Player
Le profileur enregistre g&eacute;n&eacute;ralement des donn&eacute;es sur les m&eacute;thodes de la classe dont l’ex&eacute;cution &eacute;tait en cours au
moment de l’instantan&eacute; d’&eacute;chantillonnage. Il arrive toutefois que le profileur enregistre &eacute;galement des actions internes
de Flash Player. Ces actions, consign&eacute;es entre crochets, sont notamment [keyboardEvent], [mark] et [sweep].
Par exemple, si [keyboardEvent] se trouve dans la liste des m&eacute;thodes avec une valeur de 100, vous savez que le lecteur
a effectu&eacute; une action interne li&eacute;e &agrave; cet &eacute;v&eacute;nement au moins 100 fois au cours de la p&eacute;riode d’interaction.
Le tableau suivant d&eacute;crit les actions internes de Flash Player qui apparaissent dans les donn&eacute;es de profilage :
Derni&egrave;re mise &agrave; jour le 10/11/2011
162
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Action
Description
[generate]
Le compilateur juste &agrave; temps (JIT) g&eacute;n&egrave;re du code machine AS3.
[mark]
Flash Player marque les objets actifs pour la r&eacute;cup&eacute;ration de place.
[newclass]
Flash Player d&eacute;finit une classe. Cette op&eacute;ration a g&eacute;n&eacute;ralement lieu au d&eacute;marrage. Le chargement d’une
nouvelle classe peut avoir cependant lieu &agrave; tout moment.
[pre-render]
Flash Player se pr&eacute;pare &agrave; rendre les objets (notamment les calculs de g&eacute;om&eacute;trie et le parcours de la liste
d’affichage qui se produisent avant l’affichage).
[reap]
Flash Player r&eacute;cup&egrave;re les objets de d&eacute;compte diff&eacute;r&eacute; des r&eacute;f&eacute;rences (DRC, deferred reference counting).
[render]
Flash Player rend les objets dans la liste d’affichage (pixel par pixel).
[sweep]
Flash Player r&eacute;cup&egrave;re la m&eacute;moire des objets non marqu&eacute;s.
[verify]
Le compilateur JIT effectue la v&eacute;rification du code binaire d’ActionScript 3.0.
[event_typeEvent]
Flash Player distribue l’&eacute;v&eacute;nement sp&eacute;cifi&eacute;.
Ces informations peuvent vous aider &agrave; identifier d’&eacute;ventuels probl&egrave;mes de performances. Par exemple, si vous voyez
plusieurs entr&eacute;es pour [mark] et [sweep], vous pouvez partir du principe que plusieurs objets sont en cours de
cr&eacute;ation, puis sont marqu&eacute;s pour la r&eacute;cup&eacute;ration de place. En comparant ces nombres dans diff&eacute;rents profils de
performances, vous pouvez constater par vous-m&ecirc;me si les modifications que vous apportez sont efficaces.
Pour consulter les donn&eacute;es correspondant &agrave; ces actions internes, affichez un profil de performances dans la vue Profil
de performance ou un profil de m&eacute;moire dans la vue Suivi des allocations. Pour plus d’informations, voir &laquo; Vue Profil
de performance &raquo; &agrave; la page 154 et &laquo; Vue Suivi des allocations &raquo; &agrave; la page 151.
Utilisation du profileur
Le profileur n&eacute;cessite Flash Player version 9.0.124 ou une version ult&eacute;rieure. Vous pouvez profiler des applications qui
ont &eacute;t&eacute; compil&eacute;es pour Flex 2, Flex 2.0.1 et Flex 3. Vous pouvez utiliser le profileur pour profiler des applications
ActionScript 3.0 cr&eacute;&eacute;es avec Flash Authoring, ainsi que des applications d’ordinateur ex&eacute;cut&eacute;es sur Adobe&reg; AIR™.
Le profileur a besoin d’informations de d&eacute;bogage dans l’application que vous &ecirc;tes en train de profiler. Lorsque vous
compilez une application et que vous lancez le profileur, Flash Builder inclut par d&eacute;faut les informations de d&eacute;bogage
dans l’application. Vous pouvez inclure explicitement les informations de d&eacute;bogage dans n’importe quelle application
en d&eacute;finissant l’option d&eacute;bug du compilateur sur true. Si vous exportez une application par le biais de l’option
Exporter vers une version valid&eacute;e, l’application ne contient aucune information de d&eacute;bogage.
Barre d’outils du profileur
Le tableau suivant pr&eacute;sente les boutons de la barre d’outils du profileur :
Bouton
Nom
Description
Reprendre
Reprend la session de profilage. Cette option est active uniquement si le nom d’une
application est s&eacute;lectionn&eacute; et qu’elle est interrompue.
Interrompre
Interrompt la session de profilage. Cette option est active uniquement si le nom d’une
application est s&eacute;lectionn&eacute; et qu’elle est en cours d’ex&eacute;cution.
Arr&ecirc;ter
Met fin &agrave; la session de profilage. Cette option est active uniquement si le nom d’une
application est s&eacute;lectionn&eacute; et qu’elle n’a pas d&eacute;j&agrave; &eacute;t&eacute; ferm&eacute;e.
Derni&egrave;re mise &agrave; jour le 10/11/2011
163
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Bouton
Nom
Description
Lancer la r&eacute;cup&eacute;ration de
place
Demande &agrave; Flash Player de r&eacute;cup&eacute;rer de la place. Cette option est active uniquement si
le nom d’une application est s&eacute;lectionn&eacute; et qu’elle est en cours d’ex&eacute;cution.
Pour plus d’informations sur la r&eacute;cup&eacute;ration de place, voir &laquo; R&eacute;cup&eacute;ration de place &raquo; &agrave; la
page 168.
Prendre un instantan&eacute; de la
m&eacute;moire
Enregistre l’utilisation que fait une application de la m&eacute;moire pour que vous puissiez la
consulter ou la comparer &agrave; d’autres instantan&eacute;s.
Cette option est active uniquement si le nom d’une application est s&eacute;lectionn&eacute;, que
celle-ci est en cours d’ex&eacute;cution et si vous s&eacute;lectionnez Activer le profilage de la m&eacute;moire
dans la bo&icirc;te de dialogue de lancement. Le profileur ajoute de nouveaux instantan&eacute;s de
la m&eacute;moire en tant qu’enfants de l’application s&eacute;lectionn&eacute;e dans la vue Profiler.
Pour ouvrir le nouvel instantan&eacute; de m&eacute;moire dans la vue Instantan&eacute; de la m&eacute;moire,
cliquez deux fois sur l’entr&eacute;e d’instantan&eacute; de la m&eacute;moire.
La r&eacute;cup&eacute;ration de place se fait implicitement avant l’enregistrement d’instantan&eacute;s de la
m&eacute;moire. En d’autres termes, un clic sur le bouton Prendre un instantan&eacute; de la m&eacute;moire
&eacute;quivaut &agrave; un clic sur le bouton Lancer la r&eacute;cup&eacute;ration de place puis &agrave; un clic sur le
bouton Prendre un instantan&eacute; de la m&eacute;moire.
Pour plus d’informations sur l’utilisation des instantan&eacute;s de m&eacute;moire, voir &laquo; Vue
Instantan&eacute; de la m&eacute;moire &raquo; &agrave; la page 147.
Rechercher les objets
vagabonds
Compare deux instantan&eacute;s de la m&eacute;moire dans la vue Objets vagabonds.
Cette option est active uniquement si deux instantan&eacute;s de m&eacute;moire sont s&eacute;lectionn&eacute;s et
que l’option Activer le profilage de la m&eacute;moire est s&eacute;lectionn&eacute;e dans la bo&icirc;te de dialogue
de lancement.
Pour plus d’informations sur la vue Objets vagabonds, voir &laquo; Vue Objets vagabonds &raquo; &agrave; la
page 157.
Afficher le suivi des allocations Compare les m&eacute;thodes entre deux instantan&eacute;s de la m&eacute;moire dans la vue Suivi des
allocations.
Cette option est active uniquement si deux instantan&eacute;s de m&eacute;moire sont s&eacute;lectionn&eacute;s et
que l’option Activer le profilage de la m&eacute;moire est s&eacute;lectionn&eacute;e dans la bo&icirc;te de dialogue
de lancement.
Pour plus d’informations sur la vue Suivi des allocations, voir &laquo; Vue Suivi des allocations &raquo;
&agrave; la page 151.
R&eacute;initialiser les donn&eacute;es de
performance
Efface les donn&eacute;es de profilage des performances.
Cette option est active uniquement si le nom d’une application est s&eacute;lectionn&eacute;, que
celle-ci est en cours d’ex&eacute;cution, et si vous s&eacute;lectionnez Activer le profilage de la
m&eacute;moire dans la bo&icirc;te de dialogue de lancement.
G&eacute;n&eacute;ralement, vous cliquez sur ce bouton, vous interagissez avec l’application, puis vous
cliquez sur le bouton Capturer le profil de performance pour obtenir un instantan&eacute; des
performances de l’application &agrave; partir du moment o&ugrave; vous r&eacute;initialisez les donn&eacute;es.
Pour plus d’informations sur la vue Profil de performance, voir &laquo; Vue Profil de
performance &raquo; &agrave; la page 154.
Derni&egrave;re mise &agrave; jour le 10/11/2011
164
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Bouton
Nom
Description
Capturer le profil de
performance
Enregistre un nouvel instantan&eacute; des performances en tant qu’enfant de l’application
s&eacute;lectionn&eacute;e.
Cette option est active uniquement si le nom d’une application est s&eacute;lectionn&eacute;, que
celle-ci est en cours d’ex&eacute;cution, et si vous s&eacute;lectionnez Activer le profilage des
performances dans la bo&icirc;te de dialogue de lancement.
Pour ouvrir la vue Profil de performance, cliquez deux fois sur l’entr&eacute;e d’instantan&eacute; des
performances.
Pour plus d’informations sur la vue Profil de performance, voir &laquo; Vue Profil de
performance &raquo; &agrave; la page 154.
Supprimer
Supprime de la m&eacute;moire les donn&eacute;es de l’instantan&eacute; s&eacute;lectionn&eacute;. Un clic sur ce bouton
supprime aussi l’application de la vue du profil, si l’application a &eacute;t&eacute; ferm&eacute;e.
Cette option est activ&eacute;e uniquement si un instantan&eacute; de performances ou de m&eacute;moire
est s&eacute;lectionn&eacute;.
Sans objet
Enregistrer
Enregistre les donn&eacute;es de profilage sur le disque.
L’option Enregistrer est &eacute;galement disponible &agrave; partir du menu de la vue Profiler. Cette
option est active uniquement si le nom d’une application est s&eacute;lectionn&eacute;.
Certaines vues du profileur, telles que Statistiques de la m&eacute;thode et Statistiques de l’objet, poss&egrave;dent des boutons de
navigation qui permettent de parcourir la pile ou de modifier la vue. Le tableau suivant pr&eacute;sente les boutons de
navigation dans ces vues du profileur :
Bouton
Nom
Description
Pr&eacute;c&eacute;dent
Affiche toutes les m&eacute;thodes que vous avez parcourues &agrave; partir de la premi&egrave;re m&eacute;thode
s&eacute;lectionn&eacute;e, jusqu’&agrave; la m&eacute;thode en cours d’affichage.
Suivant
Affiche la m&eacute;thode en cours d’affichage et les m&eacute;thodes qui m&egrave;nent &agrave; la m&eacute;thode
s&eacute;lectionn&eacute;e. Cet &eacute;l&eacute;ment est actif une fois que vous &ecirc;tes revenu en arri&egrave;re.
Accueil
Affiche la m&eacute;thode s&eacute;lectionn&eacute;e.
Ouvrir le fichier source
Ouvre un &eacute;diteur de source qui affiche le code source de la m&eacute;thode s&eacute;lectionn&eacute;e.
Filtres
Vous permet de contr&ocirc;ler les m&eacute;thodes &agrave; inclure dans la table. Pour plus
d’informations, voir &laquo; Filtres du profileur &raquo; &agrave; la page 172.
Afficher/Masquer les m&eacute;thodes Affiche ou masque les m&eacute;thodes comportant un temps &eacute;gal &agrave; 0,00 dans la colonne de
de dur&eacute;e nulle
temps moyen, car elles n’apparaissent dans aucun &eacute;chantillon.
D&eacute;marrage, arr&ecirc;t et reprise du profileur
Vous pouvez profiler des applications que vous &ecirc;tes en train de cr&eacute;er dans Flash Builder. Flash Builder inclut des
informations de d&eacute;bogage lors de la compilation et de l’ex&eacute;cution d’une application lors d’une session de d&eacute;bogage.
Vous pouvez &eacute;galement profiler dans Flash Builder des applications externes que vous n’&ecirc;tes pas en train de
d&eacute;velopper, mais dont le fichier SWF est disponible avec une URL ou dans le syst&egrave;me de fichiers. Le fichier SWF d’une
application doit contenir des informations de d&eacute;bogage pour que vous puissiez la profiler. Pour plus d’informations,
voir &laquo; Profilage des applications externes &raquo; &agrave; la page 167.
D&eacute;but du profilage d’une application
1 Fermez toutes les occurrences du navigateur.
2 Ouvrez l’application dans Flash Builder.
Derni&egrave;re mise &agrave; jour le 10/11/2011
165
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
3 Cliquez sur le bouton Profiler nom_application dans la barre d’outils principale. Flash Builder vous invite &agrave; fermer
toutes les occurrences de vos navigateurs si ce n’est pas d&eacute;j&agrave; fait.
4 Cliquez sur OK. Flash Builder compile l’application et la lance dans une fen&ecirc;tre de navigateur distincte. Flash
Builder ouvre &eacute;galement la bo&icirc;te de dialogue Configurer le profileur.
5 S&eacute;lectionnez les options de la bo&icirc;te de dialogue Configurer le profileur puis cliquez sur Reprendre. Pour profiler
une application, s&eacute;lectionnez l’option Activer le profilage de la m&eacute;moire ou l’option Activer le profilage des
performances. Vous pouvez s&eacute;lectionner ces deux options lors du profilage d’une application.
Le tableau suivant pr&eacute;sente les options :
Param&egrave;tre
Description
Connect&eacute; &agrave; partir de
Indique le serveur depuis lequel vous lancez l’application. Si l’application s’ex&eacute;cute sur le m&ecirc;me
ordinateur que le profileur, cette valeur est localhost. Vous ne pouvez pas modifier cette valeur.
Vous pouvez toutefois profiler une application s’ex&eacute;cutant sur un ordinateur distinct. Voir
&laquo; Profilage des applications externes &raquo; &agrave; la page 167.
Application
Pr&eacute;cise l’application que vous &ecirc;tes sur le point de profiler. Vous ne pouvez pas modifier cette
valeur.
Activer le profilage de la
m&eacute;moire
Demande au profileur de recueillir des donn&eacute;es concernant la m&eacute;moire Utilisez cette option
pour d&eacute;tecter des fuites de m&eacute;moire ou un nombre excessif de cr&eacute;ations d’objets.
Si vous &ecirc;tes en train d’effectuer le profilage des performances, vous pouvez d&eacute;s&eacute;lectionner
cette option.
L’option Activer le profilage de la m&eacute;moire est s&eacute;lectionn&eacute;e par d&eacute;faut.
Surveiller les donn&eacute;es de
m&eacute;moire active
Demande au profileur d’afficher des donn&eacute;es concernant la m&eacute;moire dans la vue Objets actifs
lors du profilage. Cela n’est pas obligatoire pour le profilage de la m&eacute;moire ni le profilage des
performances. Vous pouvez s&eacute;lectionner cette option uniquement si vous avez s&eacute;lectionn&eacute;
Activer le profilage de la m&eacute;moire.
L’option Surveiller les donn&eacute;es de m&eacute;moire active est s&eacute;lectionn&eacute;e par d&eacute;faut.
G&eacute;n&eacute;rer des traces de pile
d’allocation d’objets
Demande au profileur de capturer une trace de pile &agrave; chaque cr&eacute;ation d’objet. L’activation de
cette option ralentit le profilage. Cette option n’est g&eacute;n&eacute;ralement s&eacute;lectionn&eacute;e qu’en cas de
n&eacute;cessit&eacute;. Elle n’est disponible que si l’option Activer le profilage de la m&eacute;moire a &eacute;t&eacute; activ&eacute;e.
L’option G&eacute;n&eacute;rer des traces de pile d’allocation d’objets est d&eacute;sactiv&eacute;e par d&eacute;faut.
Elle doit &ecirc;tre activ&eacute;e pour pouvoir afficher les informations li&eacute;es au suivi des allocations dans la
vue R&eacute;f&eacute;rences de l’objet ou Suivi des allocations.
Activer le profilage des
performances
Demande au profileur de recueillir les donn&eacute;es li&eacute;es &agrave; la trace de la pile aux intervalles
d’&eacute;chantillonnage. Utilisez ces &eacute;chantillons pour d&eacute;terminer les processus auxquels la majeure
partie du temps d’ex&eacute;cution de l’application est employ&eacute;e.
Si vous &ecirc;tes en train d’effectuer le profilage de la m&eacute;moire, vous pouvez d&eacute;s&eacute;lectionner cette
option.
L’option Activer le profilage des performances est s&eacute;lectionn&eacute;e par d&eacute;faut.
Vous pouvez changer les valeurs par d&eacute;faut de ces options en modifiant les pr&eacute;f&eacute;rences de profilage. Pour plus
d’informations, voir &laquo; D&eacute;finition des pr&eacute;f&eacute;rences du profileur &raquo; &agrave; la page 167.
6 Vous pouvez maintenant commencer &agrave; interagir avec l’application et &agrave; examiner les donn&eacute;es du profileur.
Derni&egrave;re mise &agrave; jour le 10/11/2011
166
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Interruption et reprise du profilage d’une application
Une fois que vous avez d&eacute;marr&eacute; le profileur, vous pouvez interrompre et red&eacute;marrer les applications dans la vue
Profiler. S&eacute;lectionnez une application puis s&eacute;lectionnez l’action &agrave; effectuer sur cette application. L’exemple suivant
illustre la vue Profiler avec plusieurs applications. Une application est en cours d’ex&eacute;cution ; toutes les autres sont
ferm&eacute;es.
Arr&ecirc;t du profilage d’une application
1 S&eacute;lectionnez l’application dans la vue Profiler.
2 Cliquez sur le bouton Arr&ecirc;ter pour mettre fin manuellement &agrave; la session de profilage. Cette op&eacute;ration ne ferme pas
le navigateur ni ne termine le processus Flash Player.
3 Pour retourner &agrave; la perspective D&eacute;veloppement Flex, s&eacute;lectionnez D&eacute;veloppement Flex dans la liste d&eacute;roulante de
perspective. Vous pouvez &eacute;galement changer les perspectives en appuyant sur les touches Ctrl+F8 sous Windows.
Enregistrement et chargement des donn&eacute;es de profilage
Une fois le profileur ex&eacute;cut&eacute;, vous pouvez enregistrer les donn&eacute;es afin de comparer un instantan&eacute; de la session de
profilage en cours avec un instantan&eacute; pris apr&egrave;s avoir modifi&eacute; le code. Vous pouvez ainsi d&eacute;terminer si vous avez
identifi&eacute; les causes responsables des probl&egrave;mes et si les modifications apport&eacute;es am&eacute;liorent les performances et
l’utilisation de la m&eacute;moire par l’application.
Lors de l’enregistrement des donn&eacute;es de profilage, vous enregistrez toutes les donn&eacute;es de l’application dans ce profil,
&agrave; savoir tous les profils de performance, les instantan&eacute;s de la m&eacute;moire et le suivi des allocations. Flash Builder
enregistre ces informations dans un groupe de fichiers binaires &agrave; l’emplacement que vous sp&eacute;cifiez.
Enregistrement des donn&eacute;es de profilage
1 S&eacute;lectionnez l’application dans la vue Profiler.
2 Ouvrez la liste d&eacute;roulante dans la vue Profiler et s&eacute;lectionnez Enregistrer. La bo&icirc;te de dialogue de s&eacute;lection de
dossier appara&icirc;t.
3 Choisissez un emplacement pour enregistrer les donn&eacute;es de profil et cliquez sur OK. Cr&eacute;ez un dossier pour chaque
jeu de donn&eacute;es de profilage &agrave; enregistrer. Si vous choisissez le m&ecirc;me dossier, les nouvelles donn&eacute;es remplacent les
anciennes.
R&eacute;cup&eacute;ration des donn&eacute;es de profilage enregistr&eacute;es
1 S&eacute;lectionnez la vue Donn&eacute;es de profilage enregistr&eacute;es.
2 Cliquez sur le bouton Ouvrir. La bo&icirc;te de dialogue Rechercher un dossier appara&icirc;t.
3 Recherchez le dossier contenant les donn&eacute;es de profilage de l’application, puis cliquez sur OK. Flash Builder affiche
les donn&eacute;es de profilage disponibles dans la vue Donn&eacute;es de profilage enregistr&eacute;es. Vous ne pouvez pas reprendre
l’application dans cette vue, mais vous pouvez afficher les instantan&eacute;s de la m&eacute;moire ou les autres donn&eacute;es que vous
avez enregistr&eacute;es.
Vous ne pouvez pas supprimer les donn&eacute;es d’application enregistr&eacute;es depuis Flash Builder.
Suppression des donn&eacute;es de profilage
1 S&eacute;lectionnez l’instantan&eacute; de l’application dans la vue Profiler.
2 Cliquez sur le bouton Supprimer.
Derni&egrave;re mise &agrave; jour le 10/11/2011
167
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
D&eacute;finition des pr&eacute;f&eacute;rences du profileur
Vous pouvez d&eacute;finir certaines pr&eacute;f&eacute;rences du profileur de mani&egrave;re telle &agrave; ce que les param&egrave;tres s’appliquent &agrave; toutes
les sessions de profilage. Ces param&egrave;tres vous permettent de d&eacute;finir le Flash Player/navigateur dans lequel vous
profilez l’application, ainsi que les filtres par d&eacute;faut et le num&eacute;ro de port sur lequel l’application est disponible, si
l’application profil&eacute;e s’ex&eacute;cute sur un serveur.
D&eacute;finition des pr&eacute;f&eacute;rences de Flash Builder pour plusieurs sessions de profilage
❖ Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Profileur.
S&eacute;lectionnez les options du menu Profileur pour y acc&eacute;der. Le tableau suivant r&eacute;pertorie les pr&eacute;f&eacute;rences que vous
pouvez d&eacute;finir :
Option de menu
Description
Profileur
S&eacute;lectionnez la m&eacute;thode de profilage par d&eacute;faut. Vous pouvez activer ou d&eacute;sactiver le profilage de la
m&eacute;moire et le profilage des performances.
Connexions
D&eacute;finissez le num&eacute;ro du port sur lequel Flash Builder &eacute;coute l’application profil&eacute;e.
Le num&eacute;ro de port par d&eacute;faut est 9999. Vous ne pouvez pas changer le port en 7935, car c’est le port utilis&eacute;
par le d&eacute;bogueur.
Filtres d’exclusion
D&eacute;finissez les packages par d&eacute;faut qui sont exclus des vues du profileur. Pour plus d’informations sur
l’utilisation des filtres, voir &laquo; Filtres du profileur &raquo; &agrave; la page 172.
Filtres d’inclusion
D&eacute;finissez les packages par d&eacute;faut qui sont inclus dans les vues du profileur. Tous les autres packages sont
exclus. Pour plus d’informations sur l’utilisation des filtres, voir &laquo; Filtres du profileur &raquo; &agrave; la page 172.
Lecteur/Navigateur
D&eacute;finissez l’emplacement du fichier ex&eacute;cutable de Flash Player et du navigateur que Flash Builder utilise
pour ex&eacute;cuter votre application profil&eacute;e.
Profilage des applications externes
Outre les applications que vous d&eacute;veloppez dans Flash Builder, vous pouvez profiler des applications externes. Il peut
s’agir de fichiers SWF situ&eacute;s dans n’importe quel emplacement accessible, notamment des applications situ&eacute;es sur un
serveur Web distant ou d’une application se trouvant dans votre syst&egrave;me de fichiers local.
Dans le cas d’un fichier SWF, vous pouvez sp&eacute;cifier une URL ou un emplacement de syst&egrave;me de fichiers. Si vous
indiquez une URL, Flash Builder lance le fichier SWF de l’application dans le navigateur par d&eacute;faut. Le navigateur doit
utiliser la version d&eacute;bogueur de Flash Player pour pouvoir profiler l’application correctement.
Si vous sp&eacute;cifiez un emplacement de syst&egrave;me de fichiers pour le fichier SWF, Flash Builder ouvre l’application dans la
version d&eacute;bogueur du Flash Player autonome. En r&egrave;gle g&eacute;n&eacute;rale, utilisez une URL pour demander le fichier.
L’ex&eacute;cution des applications dans la version autonome de Flash Player peut produire des r&eacute;sultats inattendus, plus
particuli&egrave;rement si l’application utilise des services distants ou des appels r&eacute;seau.
Profilage d’une application externe
1 Placez-vous dans la perspective Profil Flash.
2 S&eacute;lectionnez Profiler &gt; Profiler une application externe. La bo&icirc;te de dialogue Profiler une application externe
appara&icirc;t.
3 S&eacute;lectionnez l’option (par d&eacute;faut) Lancer l’application s&eacute;lectionn&eacute;e puis cliquez sur le bouton Nouveau. La bo&icirc;te de
dialogue Ajouter une application appara&icirc;t.
Vous pouvez aussi lancer l’application manuellement en s&eacute;lectionnant l’option Lancer l’application manuellement
hors Flash Builder.
Derni&egrave;re mise &agrave; jour le 10/11/2011
168
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
4 Saisissez l’emplacement du fichier SWF puis cliquez sur OK ou sur le bouton Parcourir et localisez votre application
dans votre syst&egrave;me de fichiers.
5 Cliquez sur le bouton Lancer. Si vous avez indiqu&eacute; une URL comme emplacement de l’application, Flash Builder
lance l’application &agrave; partir du navigateur par d&eacute;faut. Si vous avez sp&eacute;cifi&eacute; un emplacement de syst&egrave;me de fichiers
pour l’application, Flash Builder ouvre l’application dans la version autonome de Flash Player.
Si vous avez sp&eacute;cifi&eacute; un fichier SWF qui a &eacute;t&eacute; compil&eacute; sans informations de d&eacute;bogage, Flash Builder retourne une
erreur. Recompilez l’application avec l’option debug du compilateur d&eacute;finie sur true, puis relancez-la.
R&eacute;cup&eacute;ration de place
La r&eacute;cup&eacute;ration de place est l’action de supprimer de la m&eacute;moire des objets qui ne sont plus n&eacute;cessit&eacute;s. La m&eacute;moire
utilis&eacute;e par des occurrences n’ayant plus de r&eacute;f&eacute;rences &agrave; ces objets doit &ecirc;tre d&eacute;sallou&eacute;e pendant ce processus.
Flash Player nettoie la m&eacute;moire en fonction des besoins au cours du cycle de vie d’une application. Le d&eacute;r&eacute;f&eacute;rencement
d’un objet ne d&eacute;clenche pas le nettoyage de la m&eacute;moire. Ainsi, lorsque vous supprimez toutes les r&eacute;f&eacute;rences &agrave; un objet,
le nettoyage de la m&eacute;moire ne d&eacute;salloue pas n&eacute;cessairement la m&eacute;moire pour cet objet. Cet objet devient une cible
potentielle du nettoyage de la m&eacute;moire.
Le fait de cliquer sur le bouton Lancer la r&eacute;cup&eacute;ration de place ne garantit pas que tous les objets susceptibles d’&ecirc;tre
nettoy&eacute;s le soient. La r&eacute;cup&eacute;ration de place est g&eacute;n&eacute;ralement d&eacute;clench&eacute;e par l’allocation de m&eacute;moire &agrave; de nouvelles
ressources. En effet, lorsque de nouvelles ressources n&eacute;cessitent de la m&eacute;moire qui n’est pas disponible dans l’allocation
actuelle, la fonction de r&eacute;cup&eacute;ration de place s’ex&eacute;cute et lib&egrave;re de la m&eacute;moire signal&eacute;e pour la d&eacute;sallocation. Par
cons&eacute;quent, la suppression de toutes les r&eacute;f&eacute;rences &agrave; la m&eacute;moire ne signifie pas qu’elle sera nettoy&eacute;e imm&eacute;diatement,
mais bien qu’elle le sera probablement lors de la cr&eacute;ation et de l’utilisation d’autres occurrences. Si une application est
inactive, vous pouvez consulter l’allocation de sa m&eacute;moire. M&ecirc;me si certains objets sont marqu&eacute;s pour le nettoyage,
l’utilisation de la m&eacute;moire d’une application inactive ne change pas tant que vous ne commencez pas &agrave; interagir avec elle.
Flash Player alloue la m&eacute;moire en blocs de plusieurs octets, et non octet par octet. Si une partie d’un bloc est marqu&eacute;e
pour le nettoyage sans que d’autres parties le soient, le bloc n’est pas lib&eacute;r&eacute;. La r&eacute;cup&eacute;ration de place tente d’associer
les parties de la m&eacute;moire non utilis&eacute;es dans des blocs plus volumineux pouvant &ecirc;tre nettoy&eacute;s, mais cela ne se produit
pas syst&eacute;matiquement &agrave; chaque tentative de r&eacute;cup&eacute;ration.
La r&eacute;cup&eacute;ration de place se fait implicitement avant l’enregistrement d’instantan&eacute;s de la m&eacute;moire. En d’autres termes,
un clic sur le bouton Prendre un instantan&eacute; de la m&eacute;moire &eacute;quivaut &agrave; un clic sur le bouton Lancer la r&eacute;cup&eacute;ration de
place puis &agrave; un clic sur le bouton Prendre un instantan&eacute; de la m&eacute;moire.
Ex&eacute;cution de la r&eacute;cup&eacute;ration de place pendant le profilage d’une application
❖ S&eacute;lectionnez l’application dans la vue Profiler, puis cliquez sur le bouton Lancer la r&eacute;cup&eacute;ration de place.
Vous pouvez analyser l’efficacit&eacute; de ce processus en comparant deux instantan&eacute;s de m&eacute;moire, avant et apr&egrave;s le
nettoyage de la m&eacute;moire.
Identification des zones &agrave; probl&egrave;mes
Le profileur propose diff&eacute;rentes techniques d’identification des zones &agrave; probl&egrave;mes des applications.
Derni&egrave;re mise &agrave; jour le 10/11/2011
169
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Localisation des fuites de m&eacute;moire
L’un des probl&egrave;mes les plus courants auxquels les d&eacute;veloppeurs d’applications sont confront&eacute;s est celui des fuites de
m&eacute;moire. Celles-ci prennent souvent la forme d’objets qui ont &eacute;t&eacute; cr&eacute;&eacute;s dans un laps de temps donn&eacute; mais qui n’ont
pas &eacute;t&eacute; r&eacute;cup&eacute;r&eacute;s.
L’une des fa&ccedil;ons de les identifier consiste &agrave; observer le nombre de r&eacute;f&eacute;rences &agrave; un objet dans la table Occurrences de
la vue R&eacute;f&eacute;rences de l’objet. Vous pouvez g&eacute;n&eacute;ralement ignorer les r&eacute;f&eacute;rences provenant de propri&eacute;t&eacute;s et de liaisons
d’un document et rechercher des r&eacute;f&eacute;rences inattendues ou inhabituelles, plus particuli&egrave;rement des objets qui ne sont
pas des enfants de l’objet. Pour plus d’informations, voir &laquo; Vue R&eacute;f&eacute;rences de l’objet &raquo; &agrave; la page 149.
Vous pouvez &eacute;galement examiner les chemins menant aux occurrences d’un objet pour d&eacute;terminer si un chemin
poss&egrave;de une r&eacute;f&eacute;rence arri&egrave;re &agrave; la r&eacute;cup&eacute;ration de place (racine de la RP). Une occurrence dont la lib&eacute;ration &eacute;tait
attendue mais qui poss&egrave;de des r&eacute;f&eacute;rences &agrave; la racine de la RP indique une perte de m&eacute;moire. Dans ce cas, modifiez le
code de l’application de mani&egrave;re &agrave; supprimer toute r&eacute;f&eacute;rence &agrave; la racine de la RP. Une occurrence ne poss&eacute;dant plus
aucune r&eacute;f&eacute;rence &agrave; la racine de la RP est pr&ecirc;te &agrave; faire l’objet d’une r&eacute;cup&eacute;ration de place. Flash Player lib&egrave;re finalement
cette m&eacute;moire.
Une autre fa&ccedil;on de localiser les pertes de m&eacute;moire consiste &agrave; comparer deux instantan&eacute;s de m&eacute;moire dans la vue
Objets vagabonds, afin de d&eacute;terminer quels objets se trouvent toujours dans la m&eacute;moire apr&egrave;s une s&eacute;rie particuli&egrave;re
d’&eacute;v&eacute;nements.
Il est courant, pour nettoyer les liens de la m&eacute;moire, de faire appel aux m&eacute;thodes disconnect(), clearInterval()
et removeEventListener().
Recherche d’une r&eacute;f&eacute;rence arri&egrave;re &agrave; la racine de la RP pour une occurrence
1 Cr&eacute;ez un instantan&eacute; de la m&eacute;moire.
Voir &laquo; Cr&eacute;ation et affichage d’un instantan&eacute; de la m&eacute;moire &raquo; &agrave; la page 148.
2 Sp&eacute;cifiez le nombre de chemins de r&eacute;f&eacute;rence arri&egrave;re &agrave; rechercher.
Dans la vue Instantan&eacute; de la m&eacute;moire, indiquez le nombre maximal de chemins &agrave; rechercher ou s&eacute;lectionnez
Afficher tous les chemins de r&eacute;f&eacute;rences arri&egrave;re.
3 Cliquez deux fois sur une classe dans la vue Instantan&eacute; de la m&eacute;moire pour ouvrir la vue R&eacute;f&eacute;rences de l’objet.
4 D&eacute;veloppez les chemins r&eacute;pertori&eacute;s et regardez s’il existe une r&eacute;f&eacute;rence arri&egrave;re &agrave; la racine de la RP.
Rechercher les objets vagabonds
1 Cr&eacute;ez deux instantan&eacute;s de la m&eacute;moire.
Voir &laquo; Cr&eacute;ation et affichage d’un instantan&eacute; de la m&eacute;moire &raquo; &agrave; la page 148.
2 S&eacute;lectionnez les deux instantan&eacute;s de m&eacute;moire &agrave; comparer.
Remarque : si vous avez plus de deux instantan&eacute;s de la m&eacute;moire, vous ne pouvez pas en s&eacute;lectionner un troisi&egrave;me.
Vous pouvez seulement comparer deux instantan&eacute;s de m&eacute;moire en m&ecirc;me temps.
3 Cliquez sur le bouton Rechercher les objets vagabonds.
La vue Objets vagabonds mat&eacute;rialise d’&eacute;ventuelles fuites de m&eacute;moire. Les colonnes Occurrences et M&eacute;moire
indiquent les diff&eacute;rences entre le nombre d’occurrences d’une classe et la quantit&eacute; de m&eacute;moire consomm&eacute;e par ces
occurrences au cours de l’intervalle entre deux instantan&eacute;s. Si vous voyez une classe que vous ne vous attendiez pas
&agrave; voir cr&eacute;&eacute;e pendant ce laps de temps ou une classe que vous pensiez voir d&eacute;truite pendant ce laps de temps,
examinez l’application pour d&eacute;tecter si ces &eacute;l&eacute;ments peuvent &ecirc;tre &agrave; l’origine d’une fuite de m&eacute;moire.
Derni&egrave;re mise &agrave; jour le 10/11/2011
170
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
4 Pour d&eacute;terminer la fa&ccedil;on dont un objet de la vue Rechercher les objets vagabonds a &eacute;t&eacute; instanci&eacute;, cliquez deux fois
sur l’objet dans la vue. La vue R&eacute;f&eacute;rences de l’objet pr&eacute;sente la trace de pile de chaque occurrence que vous avez
s&eacute;lectionn&eacute;e.
Un moyen d’identifier une fuite de m&eacute;moire consiste dans un premier temps &agrave; d&eacute;terminer un ensemble d’&eacute;tapes que
vous pouvez r&eacute;p&eacute;ter de nombreuses fois avec l’application, l&agrave; o&ugrave; l’utilisation de la m&eacute;moire ne cesse d’augmenter. Il
est important d’effectuer ces &eacute;tapes au moins une fois dans l’application avant de prendre le premier instantan&eacute; de la
m&eacute;moire, de mani&egrave;re que tous les objets mis en m&eacute;moire cache ou que toute autre occurrence soient inclus dans cet
instantan&eacute;.
R&eacute;p&eacute;tez ces &eacute;tapes un certain nombre de fois (3, 7 ou un autre nombre premier) dans l’application. Prenez un second
instantan&eacute; de m&eacute;moire pour le comparer &agrave; l’instantan&eacute; de d&eacute;part. Dans la vue Rechercher les objets vagabonds, vous
trouverez peut-&ecirc;tre des objets vagabonds dot&eacute;s d’occurrences au nombre de multiples de 3 ou de 7. Ces objets
pr&eacute;sentent probablement des fuites. Cliquez deux fois sur les classes pour consulter les traces de pile de chacune des
occurrences.
Un autre moyen consiste &agrave; r&eacute;p&eacute;ter la s&eacute;quence d’&eacute;tapes sur une longue p&eacute;riode et d’attendre que l’utilisation de la
m&eacute;moire atteigne son maximum. Si elle n’augmente pas apr&egrave;s cela, il n’y a aucune fuite de m&eacute;moire pour cet ensemble
d’&eacute;tapes.
Parmi d’autres causes, les &eacute;couteurs d’&eacute;v&eacute;nement en attente sont souvent &agrave; l’origine de fuites de m&eacute;moire. La m&eacute;thode
removeEventListener() permet de supprimer un &eacute;couteur d’&eacute;v&eacute;nement qui n’est plus utilis&eacute;. Pour plus
d’informations, voir Cr&eacute;ation et destruction d’objets dans Utilisation d’Adobe Flex 4.
Analyse des temps d’ex&eacute;cution
En analysant les temps d’ex&eacute;cution des m&eacute;thodes et la quantit&eacute; de m&eacute;moire allou&eacute;e pendant ces appels de m&eacute;thode,
vous pouvez d&eacute;terminer &agrave; quels niveaux les ralentissements des performances surviennent.
Cette op&eacute;ration est utile notamment pour identifier le temps d’ex&eacute;cution des m&eacute;thodes appel&eacute;es fr&eacute;quemment, plut&ocirc;t
que celui des m&eacute;thodes qui le sont rarement.
D&eacute;termination de la fr&eacute;quence des appels de m&eacute;thodes
1 D&eacute;marrez une session de profilage et veillez &agrave; activer le profilage des performances lors de la configuration du
profileur sur l’&eacute;cran de d&eacute;marrage.
2 S&eacute;lectionnez l’application dans la vue Profiler.
3 Interagissez avec l’application jusqu’&agrave; atteindre le point o&ugrave; vous voulez commencer &agrave; analyser le nombre d’appels
de m&eacute;thode. Pour voir le nombre de fois qu’une m&eacute;thode a &eacute;t&eacute; appel&eacute;e lors du d&eacute;marrage de l’application,
n’interagissez pas avec l’application.
4 Cliquez sur le bouton R&eacute;initialiser les donn&eacute;es de performance. Toutes les donn&eacute;es de performance sont alors
effac&eacute;es, de mani&egrave;re telle &agrave; ce que le profil de performance suivant n’inclue que les donn&eacute;es saisies &agrave; compter de la
r&eacute;initialisation.
5 Interagissez avec l’application jusqu’&agrave; atteindre le point o&ugrave; vous voulez v&eacute;rifier le nombre d’appels de m&eacute;thode
depuis la r&eacute;initialisation des donn&eacute;es.
6 Cliquez sur le bouton Capturer le profil de performance.
7 Cliquez deux fois sur le profil de performance dans la vue Profiler.
8 Dans la vue Profil de performance, triez les donn&eacute;es selon la colonne M&eacute;thode et localisez votre m&eacute;thode dans la
liste.
Derni&egrave;re mise &agrave; jour le 10/11/2011
171
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
La valeur figurant dans la colonne Appels correspond au nombre de fois que cette m&eacute;thode a &eacute;t&eacute; appel&eacute;e au cours
de cet intervalle d’&eacute;chantillonnage. Il s’agit de l’&eacute;cart de temps qui s&eacute;pare le moment o&ugrave; vous avez cliqu&eacute; sur
R&eacute;initialiser les donn&eacute;es de performance et le moment o&ugrave; vous avez cliqu&eacute; sur Capturer le profil de performance.
Examinez les valeurs contenues dans les colonnes Dur&eacute;e cumul&eacute;e, Dur&eacute;e propre, Dur&eacute;e cumul&eacute;e moyenne et Dur&eacute;e
propre moyenne de la vue Profil de performance. Elles indiquent le temps d’ex&eacute;cution des m&eacute;thodes.
Comparez le temps mis par chaque m&eacute;thode pour s’ex&eacute;cuter au temps que mettent &agrave; s’ex&eacute;cuter toutes les m&eacute;thodes
appel&eacute;es par une m&eacute;thode particuli&egrave;re. En r&egrave;gle g&eacute;n&eacute;rale, si la dur&eacute;e propre ou la dur&eacute;e propre moyenne d’une
m&eacute;thode est &eacute;lev&eacute;e ou &eacute;lev&eacute;e par rapport &agrave; celle d’autres m&eacute;thodes, observez de plus pr&egrave;s la fa&ccedil;on dont la m&eacute;thode est
impl&eacute;ment&eacute;e et tentez de r&eacute;duire le temps d’ex&eacute;cution.
De la m&ecirc;me fa&ccedil;on, si la dur&eacute;e propre ou la dur&eacute;e propre moyenne d’une m&eacute;thode est faible, mais que la dur&eacute;e cumul&eacute;e
ou la dur&eacute;e cumul&eacute;e moyenne est &eacute;lev&eacute;, observez les m&eacute;thodes que cette m&eacute;thode appelle pour localiser les goulets
d’&eacute;tranglement.
Localisation d’une allocation excessive d’objets
Un moyen d’identifier les zones &agrave; probl&egrave;mes d’une application consiste &agrave; d&eacute;terminer &agrave; quels niveaux un nombre
excessif d’objets est cr&eacute;&eacute;. La cr&eacute;ation d’une occurrence d’un objet peut consommer un grand nombre de ressources,
plus particuli&egrave;rement si cet objet se trouve dans la liste d’affichage. L’ajout d’un objet &agrave; la liste d’affichage peut
engendrer un grand nombre d’appels &agrave; des m&eacute;thodes de style et de mise en forme, ce qui peut ralentir une application.
Dans certains cas, vous pouvez restructurer le code afin de r&eacute;duire le nombre d’objets cr&eacute;&eacute;s.
Une fois que vous avez d&eacute;termin&eacute; si la cr&eacute;ation de certains objets est superflue, vous pouvez d&eacute;cider s’il est raisonnable
ou utile de r&eacute;duire le nombre d’occurrences de cette classe. Vous pouvez par exemple d&eacute;terminer la taille des objets,
car les objets volumineux pr&eacute;sentent g&eacute;n&eacute;ralement le plus grand potentiel d’optimisation.
Pour savoir quels objets sont cr&eacute;&eacute;s en nombre important, vous pouvez comparer les instantan&eacute;s de m&eacute;moire de
l’application &agrave; deux moments.
Affichage du nombre d’occurrences d’une classe sp&eacute;cifique
1 D&eacute;marrez une session de profilage et veillez &agrave; activer le profilage de la m&eacute;moire lors de la configuration du profileur
sur l’&eacute;cran de d&eacute;marrage.
2 Interagissez avec l’application jusqu’&agrave; atteindre l’endroit dont vous souhaitez prendre un instantan&eacute; de la m&eacute;moire.
3 Cliquez sur le bouton Prendre un instantan&eacute; de la m&eacute;moire. Le profileur ajoute un nouvel instantan&eacute; de la m&eacute;moire
&agrave; la liste d’applications dans la vue Profiler.
4 Dans la vue Profiler, cliquez deux fois sur l’instantan&eacute; de la m&eacute;moire pour l’ouvrir.
5 Pour afficher le nombre d’occurrences d’une classe particuli&egrave;re, ainsi que la quantit&eacute; de m&eacute;moire que ces
occurrences utilisent, effectuez un tri selon la colonne Classe et localisez la classe dans cette colonne. Vous pouvez
aussi effectuer un tri selon les autres colonnes afin d’identifier rapidement les objets qui occupent le plus de
m&eacute;moire ou les objets comptant le plus grand nombre d’occurrences. Dans la plupart des cas, la classe Strings est
celle qui compte le plus d’occurrences et qui utilise le plus de m&eacute;moire.
Pour plus d’informations sur la vue Instantan&eacute; de la m&eacute;moire, voir &laquo; Vue Instantan&eacute; de la m&eacute;moire &raquo; &agrave; la page 147.
Localisation d’occurrences d’allocation excessive d’objets
1 D&eacute;marrez une session de profilage et veillez &agrave; activer le profilage de la m&eacute;moire lors de la configuration du profileur
sur l’&eacute;cran de d&eacute;marrage.
2 Interagissez avec l’application jusqu’&agrave; atteindre le premier endroit dont vous souhaitez prendre un instantan&eacute; de la
m&eacute;moire.
Derni&egrave;re mise &agrave; jour le 10/11/2011
172
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
3 Cliquez sur le bouton Prendre un instantan&eacute; de la m&eacute;moire.
Le profileur enregistre l’instantan&eacute; de la m&eacute;moire dans la vue Profiler en indiquant la date et l’heure.
4 Interagissez avec l’application jusqu’&agrave; atteindre le deuxi&egrave;me endroit dont vous souhaitez prendre un instantan&eacute; de
la m&eacute;moire.
5 Cliquez &agrave; nouveau sur le bouton Prendre un instantan&eacute; de la m&eacute;moire.
Le profileur enregistre le deuxi&egrave;me instantan&eacute; de la m&eacute;moire dans la vue Profiler en indiquant la date et l’heure.
6 S&eacute;lectionnez les deux instantan&eacute;s de m&eacute;moire &agrave; comparer.
Remarque : si vous avez plus de deux instantan&eacute;s de la m&eacute;moire, vous ne pouvez pas en s&eacute;lectionner un troisi&egrave;me.
Vous ne pouvez comparer que deux instantan&eacute;s de m&eacute;moire &agrave; la fois.
7 Cliquez sur le bouton Afficher le suivi des allocations.
La vue Suivi des allocations indique les m&eacute;thodes qui ont &eacute;t&eacute; appel&eacute;es entre les deux instantan&eacute;s et la quantit&eacute; de
m&eacute;moire consomm&eacute;e lors de ces appels de m&eacute;thode. Voir &laquo; Vue Suivi des allocations &raquo; &agrave; la page 151.
Filtres du profileur
La quantit&eacute; de donn&eacute;es contenue dans une vue du profileur peut quelquefois &ecirc;tre consid&eacute;rable et le niveau de d&eacute;tail
trop important. Les actions internes de Flash Player peuvent occulter les donn&eacute;es qui vous int&eacute;ressent v&eacute;ritablement,
telles que vos propres m&eacute;thodes et classes. En outre, Flash Player cr&eacute;e et d&eacute;truit de nombreux objets sans votre
intervention directe. Vous pouvez par cons&eacute;quent constater que des milliers de cha&icirc;nes ou de tableaux sont utilis&eacute;s
dans votre application.
Vous pouvez d&eacute;finir des filtres dans les vues suivantes :
• Objets actifs
• Instantan&eacute; de la m&eacute;moire
• Profil de performance
• Statistiques de la m&eacute;thode
• Suivi des allocations
Les filtres du profileur permettent de d&eacute;finir quels packages apparaissent dans les vues du profileur. Il existe deux types
de filtres :
Filtres d’exclusion : les filtres d’exclusion indiquent au profileur qu’il doit exclure de ses vues les packages qui
correspondent aux motifs de sa liste de motifs. Si vous faites appel, par exemple, &agrave; des commandes de cr&eacute;ation de
graphiques, mais que vous ne voulez pas les profiler, vous pouvez ajouter le motif mx.charts.* au filtre d’exclusion.
Vous pouvez &eacute;galement exclure des &eacute;l&eacute;ments int&eacute;gr&eacute;s globaux, ce qui comprend les classes globales String et Array.
Filtres d’inclusion : les filtres d’exclusion indiquent au profileur qu’il doit inclure dans ses vues uniquement les
packages qui correspondent aux motifs de sa liste de motifs. Si vous poss&eacute;dez, par exemple, un package personnalis&eacute;
nomm&eacute; com.mycompany.*, vous pouvez afficher des informations uniquement sur les classes contenues dans ce
package en l’ajoutant au filtre d’inclusion.
Les exclusions par d&eacute;faut sont les classes flash.*.*, spark.*.*, mx.*.*, ainsi que les classes d’infrastructure Flex dans le
package global ou non nomm&eacute;, ce qui comprend les classes globales String et Array. Cela signifie que les inclusions par
d&eacute;faut sont des classes personnalis&eacute;es se trouvant dans le package non nomm&eacute; et des classes personnalis&eacute;es dans des
packages hors infrastructure (telles que com.mycompany.MyClass).
Derni&egrave;re mise &agrave; jour le 10/11/2011
173
UTILISATION DE FLASH BUILDER 4.6
Profilage d’outils dans Flash Builder
Vous pouvez exclure les classes personnalis&eacute;es se trouvant dans le package non nomm&eacute; &agrave; partir des donn&eacute;es de
profilage. Pour ce faire, ajoutez &laquo; * &raquo; &agrave; la liste d’exclusion.
Nombre maximal de lignes visibles : l’option Nombre maximal de lignes visibles d&eacute;finit le nombre de rang&eacute;es de
donn&eacute;es qui peuvent &ecirc;tre affich&eacute;es dans une vue. Augmentez cette valeur si les donn&eacute;es que vous recherchez ne
s’affichent pas dans la vue. R&eacute;duisez cette valeur pour am&eacute;liorer les performances du profileur. Utilisez d’autres filtres
pour v&eacute;rifier que vous affichez les donn&eacute;es qui vous int&eacute;ressent.
Nombre maximal de chemins de r&eacute;f&eacute;rences arri&egrave;re &agrave; rechercher : l’option Nombre maximal de chemins de r&eacute;f&eacute;rences
arri&egrave;re &agrave; rechercher d&eacute;finit le nombre de chemins vers un objet r&eacute;f&eacute;renc&eacute; &agrave; afficher lorsque vous examinez les
r&eacute;f&eacute;rences d’un objet. Les chemins s’affichent selon le chemin le plus court. Par d&eacute;faut, les dix chemins les plus courts
s’affichent. Augmentez cette valeur pour afficher d’autres chemins ou s&eacute;lectionnez Afficher tous les chemins de
r&eacute;f&eacute;rences arri&egrave;re. L’affichage de chemins suppl&eacute;mentaires peut vous aider &agrave; trouver les objets qui ne sont plus
r&eacute;f&eacute;renc&eacute;s. Voir &laquo; Localisation des fuites de m&eacute;moire &raquo; &agrave; la page 169.
D&eacute;finition de pr&eacute;f&eacute;rences de filtres par d&eacute;faut
❖ Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Profileur &gt; Filtres d’inclusion ou Filtres
d’exclusion.
Lors de l’affichage des donn&eacute;es du profileur, celui-ci applique d’abord les filtres d’exclusion, puis les filtres d’inclusion.
Supposons que vous d&eacute;finissiez le filtre d’exclusion sur mx.controls.*, mais que vous d&eacute;finissiez le filtre d’inclusion sur
mx.*.*. Le profileur n’affiche aucune information concernant les classes du package mx.controls, m&ecirc;me si leur motif
correspond &agrave; la liste de motifs d’inclusion, car ce package est exclu. Supposons &eacute;galement que vous d&eacute;finissiez le filtre
d’exclusion sur mx.*.* et le filtre d’inclusion sur mx.controls.*. Le profileur n’affiche aucune information concernant
les classes du package mx.controls.* car elles ont &eacute;t&eacute; exclues avant l’inclusion du package.
Lorsque vous filtrez certains points de donn&eacute;es, les valeurs de pourcentage des colonnes sont ajust&eacute;es afin de refl&eacute;ter
uniquement le pourcentage de donn&eacute;es non filtr&eacute;es.
Le profileur conserve les filtres d’une session de profilage &agrave; l’autre pour la m&ecirc;me application.
Les param&egrave;tres de filtres ne sont pas h&eacute;rit&eacute;s par les vues secondaires. Par exemple, si vous appliquez un filtre aux
donn&eacute;es contenues dans la vue Instantan&eacute; de la m&eacute;moire, puis acc&eacute;dez &agrave; la vue R&eacute;f&eacute;rences de l’objet en cliquant deux
fois sur une m&eacute;thode, la vue R&eacute;f&eacute;rences de l’objet n’applique pas le m&ecirc;me filtre.
D&eacute;terminer si les donn&eacute;es sont filtr&eacute;es
1 Cliquez sur le bouton Filtres ou examinez le titre des tables de donn&eacute;es. Si des filtres sont appliqu&eacute;s, l’en-t&ecirc;te de la
colonne Package est Package (filtr&eacute;).
2 (Facultatif) R&eacute;initialisez les filtres aux valeurs par d&eacute;faut en cliquant sur le bouton Restaurer les valeurs par d&eacute;faut.
Derni&egrave;re mise &agrave; jour le 10/11/2011
174
Chapitre 7 : Outils de test unitaire dans
Flash Builder
Environnement de test FlexUnit
L’environnement de test FlexUnit permet de g&eacute;n&eacute;rer et de modifier des tests reproduisibles pouvant &ecirc;tre ex&eacute;cut&eacute;s &agrave;
partir de scripts ou directement dans Flash Builder. Flash Builder prend en charge les structures &laquo; open source &raquo;
FlexUnit 4 et FlexUnit 1.
Proc&eacute;dez comme suit :
• Cr&eacute;ez des scripts et des suites de tests unitaires.
Les assistants de Flash Builder vous guident tout au long de la cr&eacute;ation de scripts et de suites de tests en g&eacute;n&eacute;rant
du code stub pour les tests.
• Ex&eacute;cutez les scripts et les suites de tests.
Vous pouvez ex&eacute;cuter des scripts et des suites de tests de diff&eacute;rentes mani&egrave;res &agrave; partir de Flash Builder ou en dehors
de l’environnement Flash Builder. Les r&eacute;sultats des tests sont affich&eacute;s dans une application de test. Flash Builder
ouvre la vue R&eacute;sultat des tests unitaires FlexUnit permettant d’analyser l’ex&eacute;cution du test.
• A partir de la vue R&eacute;sultats des tests unitaires FlexUnit, acc&eacute;dez au code source.
Dans le panneau R&eacute;sultats des tests, cliquez deux fois sur un test pour en ouvrir l’impl&eacute;mentation.
Le panneau D&eacute;tails des tests ayant &eacute;chou&eacute; r&eacute;pertorie la source et le num&eacute;ro de la ligne correspondant &agrave; l’&eacute;chec. S la
source r&eacute;pertori&eacute;e se trouve dans l’espace de travail en cours d’utilisation, cliquez deux fois sur son nom pour
acc&eacute;der directement &agrave; l’&eacute;chec.
Pour comprendre les principes de base de Test Driven Development (TDD) et utiliser l’environnement de test de
FlexUnit, reportez-vous &agrave; l’article publi&eacute; dans l’Adobe Dev Center par Elad Elrom, professionnel de la
communaut&eacute; Adobe.
Cr&eacute;ation de tests FlexUnit
Vous pouvez cr&eacute;er des classes de scripts de tests et des suites de scripts de tests unitaires FlexUnit pour les types de
projets suivants :
• Projet Flex
• Projet Flex Mobile
• Projet de biblioth&egrave;que Flex
• Projet ActionScript
• Projet AIR
Lorsque vous cr&eacute;ez une classe de scripts de tests, vous pouvez sp&eacute;cifier les options suivantes :
• Le dossier src d’un projet Flex pour la classe
• Un package pour la classe
Derni&egrave;re mise &agrave; jour le 10/11/2011
175
UTILISATION DE FLASH BUILDER 4.6
Outils de test unitaire dans Flash Builder
• Les classes &agrave; tester
• Les m&eacute;thodes &agrave; tester pour chaque classe sp&eacute;cifi&eacute;e
Une suite de scripts de tests unitaires FlexUnit est une s&eacute;rie de tests bas&eacute;s sur des classes de scripts d&eacute;j&agrave; cr&eacute;&eacute;es, des
m&eacute;thodes sp&eacute;cifi&eacute;es dans ces classes et d’autres suites de scripts de tests.
Cr&eacute;ation d’une classe de scripts de tests unitaires FlexUnit
Lors de la cr&eacute;ation d’une classe de scripts de tests unitaires FlexUnit, Flash Builder g&eacute;n&egrave;re un fichier ActionScript pour
la classe de scripts de tests et le place dans un package de scripts de tests.
La proc&eacute;dure suivante part du principe que vous avez cr&eacute;&eacute; un projet Flash Builder, dans lequel vous souhaitez g&eacute;n&eacute;rer
et ex&eacute;cuter des tests unitaires FlexUnit.
1 S&eacute;lectionnez le projet Flex, puis Nouveau &gt; Classe de script de tests dans le menu contextuel.
Si le fichier du projet s&eacute;lectionn&eacute; correspond &agrave; une classe ActionScript, cette classe sera automatiquement
s&eacute;lectionn&eacute;e pour le script de test FlexUnit dans l’assistant Nouvelle classe de script de tests.
2 Dans l’assistant de cr&eacute;ation d’une classe de script de tests, indiquez si vous souhaitez cr&eacute;er une classe de style
FlexUnit 4 ou FlexUnit 1.
3 Attribuez-lui un nom.
4 (Facultatif) Sp&eacute;cifiez un dossier source et un package pour la classe de script de tests ou validez les param&egrave;tres par
d&eacute;faut.
Le dossier source par d&eacute;faut est le dossier src du projet en cours. Le package par d&eacute;faut est flexUnitTests, qui
correspond au niveau sup&eacute;rieur de la structure de packages par d&eacute;faut du projet.
5 (Facultatif) Activez la case S&eacute;lectionner la classe &agrave; tester et recherchez la classe voulue. Cliquez sur Suivant.
6 (Facultatif) S&eacute;lectionnez les m&eacute;thodes que vous souhaitez tester.
7 Cliquez sur Terminer.
Codez le script de test cr&eacute;&eacute; en vous basant sur les stubs de code g&eacute;n&eacute;r&eacute;s.
Cr&eacute;ation d’une suite de scripts de tests unitaires FlexUnit
Cette proc&eacute;dure part du principe que vous avez d&eacute;j&agrave; cr&eacute;&eacute; des classes de script de tests.
1 S&eacute;lectionnez le projet Flex, puis cr&eacute;ez une suite de script de tests &agrave; partir des menus contextuels en s&eacute;lectionnant
Nouveau &gt; Classe de suite de tests.
2 Dans l’assistant de cr&eacute;ation d’une classe de suite de tests, indiquez si vous souhaitez cr&eacute;er une classe de style
FlexUnit 4 ou FlexUnit 1.
3 Nommez la suite de tests.
4 Recherchez ensuite, dans les suites et les scripts de tests, les classes et les m&eacute;thodes &agrave; inclure dans la suite de tests.
Cliquez sur Terminer.
Personnalisation des classes de script et de suite de tests FlexUnit par d&eacute;faut
Vous pouvez personnaliser les classes et les scripts de test FlexUnit cr&eacute;&eacute;s par Flash Builder. Flash Builder fait appel &agrave;
des mod&egrave;les de fichiers pour cr&eacute;er les versions par d&eacute;faut de ces fichiers.
Derni&egrave;re mise &agrave; jour le 10/11/2011
176
UTILISATION DE FLASH BUILDER 4.6
Outils de test unitaire dans Flash Builder
Les mod&egrave;les de fichiers pour les tests FlexUnit se trouvent dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, sous Flash Builder &gt;
Mod&egrave;les de fichier &gt; FlexUnit. Les classes de suite et de script de tests FlexUnit 1 et FlexUnit 4 correspondent &agrave; des
mod&egrave;les distincts.
Pour plus d’informations sur la modification des mod&egrave;les de fichiers par d&eacute;faut, voir &laquo; Personnalisation des mod&egrave;les
de fichier &raquo; &agrave; la page 62.
Remarque : FlexUnitCompilerApplication.mxml et FlexUnitApplication.mxml d&eacute;rivent du mod&egrave;le pour
applications MXML Web ou d’ordinateur. Le mod&egrave;le utilis&eacute; d&eacute;pend de la configuration du projet Flex : pour une
application Web (s’ex&eacute;cute dans Adobe&reg; Flash&reg; Player) ou une application d’ordinateur (s’ex&eacute;cute dans Adobe AIR&reg;).
Voir aussi
R&eacute;f&eacute;rence de langage &laquo; open source &raquo; pour FlexUnit
Documentation &laquo; open source &raquo; pour FlexUnit
Ex&eacute;cution des tests FlexUnit
Les tests unitaires FlexUnit peuvent s’ex&eacute;cuter &agrave; l’int&eacute;rieur comme &agrave; l’ext&eacute;rieur de Flash Builder &agrave; l’aide des fichiers
SWF g&eacute;n&eacute;r&eacute;s pour le test unitaire FlexUnit. Dans les deux cas, les r&eacute;sultats des tests s’affichent dans la vue R&eacute;sultat des
tests unitaires FlexUnit.
Vous pouvez &eacute;galement configurer et enregistrer un test unitaire FlexUnit avant de l’ex&eacute;cuter.
Par d&eacute;faut, les tests FlexUnit sont ex&eacute;cut&eacute;s dans la perspective D&eacute;bogage Flash. Vous pouvez les lancer &agrave; partir des
perspectives de d&eacute;veloppement et de profilage Flash. Dans ce cas, Flash Builder basculera toutefois vers la perspective
de d&eacute;bogage &agrave; l’ex&eacute;cution du test.
Vous pouvez modifier la perspective par d&eacute;faut des tests FlexUnit. Ouvrez la fen&ecirc;tre des pr&eacute;f&eacute;rences et acc&eacute;dez &agrave; Flash
Builder &gt; FlexUnit.
Application de compilation FlexUnit et application FlexUnit
Lorsque vous cr&eacute;ez un script de test FlexUnit, Flash Builder cr&eacute;e l’application de compilation FlexUnit suivante et une
application FlexUnit :
• FlexUnitCompilerApplication.mxml
• FlexUnitApplication.mxml
Flash Builder utilise ces applications lors de la compilation et de l’ex&eacute;cution des tests FlexUnit. Flash Builder place les
applications dans le r&eacute;pertoire src du projet.
Cette application contient des r&eacute;f&eacute;rences &agrave; tous les scripts et &agrave; toutes les suites de tests FlexUnit g&eacute;n&eacute;r&eacute;s par Flash
Builder. Ce dernier place tous les tests FlexUnit &agrave; l’int&eacute;rieur des balises &lt;fx:Declarations&gt; de cette application. Vous
ne serez g&eacute;n&eacute;ralement pas amen&eacute; &agrave; &eacute;diter ou &agrave; modifier ce fichier directement.
Actualisez l’application de compilation FlexUnit dans les circonstances suivantes :
• Vous ajoutez manuellement un script de tests.
Si vous cr&eacute;ez une classe de script de tests sans utiliser l’assistant de cr&eacute;ation de script de tests, actualisez
FlexUnitCompilerApplication.mxml. Placez le nouveau script de tests dans le package avec les autres scripts.
• Vous renommez un script de tests.
Derni&egrave;re mise &agrave; jour le 10/11/2011
177
UTILISATION DE FLASH BUILDER 4.6
Outils de test unitaire dans Flash Builder
• Vous supprimez un script de tests.
Actualisez FlexUnitCompilerApplication.mxml :
1 Si cette vue n’est pas ouverte, vous pouvez y acc&eacute;der en s&eacute;lectionnant Fen&ecirc;tre &gt; Affichage d’une vue &gt; Autres &gt;
Flash Builder &gt; R&eacute;sultat des tests unitaires FlexUnit. Cliquez sur OK.
2 Dans la vue R&eacute;sultat des tests unitaires FlexUnit, cliquez sur le bouton Actualiser.
Ex&eacute;cution d’un test unitaire FlexUnit dans Flash Builder
Vous pouvez ex&eacute;cuter des tests FlexUnit pour un projet dans son ensemble ou pour des scripts de tests individuels.
Vous lancerez g&eacute;n&eacute;ralement l’ex&eacute;cution &agrave; partir du menu contextuel d’un projet ou d’un script de test individuel.
Vous pouvez toutefois &eacute;galement lancer les tests en acc&eacute;dant au menu Ex&eacute;cuter, en cliquant sur le bouton Ex&eacute;cuter ou
en s&eacute;lectionnant le bouton Ex&eacute;cuter des tests unitaires FlexUnit dans la vue R&eacute;sultat des tests unitaires FlexUnit.
L’ex&eacute;cution &agrave; partir du menu Ex&eacute;cuter de Flash Builder entra&icirc;ne l’ouverture d’une bo&icirc;te de dialogue de configuration
du test, dans laquelle vous pouvez s&eacute;lectionner les classes de test et les m&eacute;thodes &agrave; ex&eacute;cuter. Les scripts de tests pour
les projets de biblioth&egrave;que ne peuvent pas &ecirc;tre ex&eacute;cut&eacute;s &agrave; partir du menu Ex&eacute;cuter de Flash Builder.
Flash Builder fournit les raccourcis clavier suivants pour faciliter le lancement des tests FlexUnit :
•
Alt+Maj+A,F
Ex&eacute;cute tous les tests FlexUnit du projet.
•
Alt+Maj+E,F
Ex&eacute;cute le test FlexUnit s&eacute;lectionn&eacute;.
Ex&eacute;cutez les tests FlexUnit de la s&eacute;lection actuelle dans l’&eacute;diteur Voir &laquo; Configuration des tests FlexUnit &raquo; &agrave; la page 178.
1 S&eacute;lectionnez un projet et ex&eacute;cutez les tests :
Dans le menu contextuel du projet, s&eacute;lectionnez Ex&eacute;cuter des tests unitaires FlexUnit.
Dans le menu Ex&eacute;cuter ou dans la liste d&eacute;roulante du bouton Ex&eacute;cuter de Flash Builder, s&eacute;lectionnez Ex&eacute;cuter &gt;
Tests FlexUnit.
2 (Menu Ex&eacute;cuter de Flash Builder) Dans la bo&icirc;te de dialogue Ex&eacute;cution d’une configuration de test unitaire
FlexUnit, s&eacute;lectionnez les scripts de tests et les m&eacute;thodes &agrave; ex&eacute;cuter dans le cadre des tests. Cliquez sur OK pour
ex&eacute;cuter les tests.
3 Visionnez les r&eacute;sultats des tests.
Flash Builder g&eacute;n&egrave;re un fichier SWF dans le dossier bin-debug du projet.
Une application s’ouvre pour afficher des informations sur les tests et en indiquer la fin.
Le panneau R&eacute;sultat des tests unitaires FlexUnit s’ouvre et affiche les r&eacute;sultats des tests. Voir &laquo; Affichage des
r&eacute;sultats de l’ex&eacute;cution d’un test FlexUnit &raquo; &agrave; la page 179.
Ex&eacute;cution de tests FlexUnit individuels :
1 Dans l’Explorateur de projets, acc&eacute;dez au package flexUnitTest :
Dans le menu contextuel du fichier de test FlexUnit, s&eacute;lectionnez Ex&eacute;cuter des tests unitaires FlexUnit.
2 Visionnez les r&eacute;sultats des tests.
Flash Builder g&eacute;n&egrave;re un fichier SWF dans le dossier bin-debug du projet.
Derni&egrave;re mise &agrave; jour le 10/11/2011
178
UTILISATION DE FLASH BUILDER 4.6
Outils de test unitaire dans Flash Builder
Une application s’ouvre pour afficher des informations sur les tests et en indiquer la fin.
Le panneau R&eacute;sultat des tests unitaires FlexUnit s’ouvre et affiche les r&eacute;sultats des tests. Voir &laquo; Affichage des
r&eacute;sultats de l’ex&eacute;cution d’un test FlexUnit &raquo; &agrave; la page 179.
Ex&eacute;cution d’un test unitaire FlexUnit en dehors de l’environnement Flash
Builder
Cette proc&eacute;dure part du principe que vous avez d&eacute;j&agrave; ex&eacute;cut&eacute; un test unitaire FlexUnit dans Flash Builder et que Flash
Builder est en cours d’ex&eacute;cution.
1 Copiez le fichier SWF g&eacute;n&eacute;r&eacute; pour un test du dossier bin-debug du projet vers un dossier situ&eacute; en dehors de votre
environnement de d&eacute;veloppement.
Vous pouvez copier le fichier SWF g&eacute;n&eacute;r&eacute; automatiquement ou un fichier SWF provenant d’un test unitaire
FlexUnit que vous avez pr&eacute;c&eacute;demment enregistr&eacute; et configur&eacute;.
2 Ex&eacute;cutez la copie du fichier SWF.
Flash Player appara&icirc;t pour afficher des informations sur le test et indiquer la fin du test.
La vue R&eacute;sultat des tests unitaires FlexUnit s’ouvre dans Flash Builder et affiche les r&eacute;sultats du test.
Configuration des tests FlexUnit
1 Ouvrez la bo&icirc;te de dialogue Ex&eacute;cution d’une configuration de test unitaire FlexUnit.
Vous pouvez y acc&eacute;der &agrave; partir du menu Ex&eacute;cuter ou &agrave; partir de la vue R&eacute;sultat des tests unitaires FlexUnit :
• S&eacute;lectionnez un projet. Dans le menu Flash Builder, s&eacute;lectionnez Ex&eacute;cuter &gt; Ex&eacute;cuter des tests unitaires
FlexUnit.
• Dans la vue R&eacute;sultat des tests unitaires FlexUnit, cliquez sur le bouton Ex&eacute;cuter des tests unitaires FlexUnit.
Si cette vue n’est pas ouverte, vous pouvez y acc&eacute;der en s&eacute;lectionnant Fen&ecirc;tre &gt; Affichage d’une vue &gt; Autres &gt;
Flash Builder &gt; R&eacute;sultat des tests unitaires FlexUnit.
2 Dans la bo&icirc;te de dialogue Configuration de test, s&eacute;lectionnez les scripts et les m&eacute;thodes &agrave; enregistrer comme
configuration de test.
Remarque : la bo&icirc;te de dialogue Configuration de test n’est pas disponible si vous ex&eacute;cutez un test &agrave; partir du menu
contextuel de l’Explorateur de packages.
3 (Facultatif) S&eacute;lectionnez Charger pour importer une configuration pr&eacute;c&eacute;demment sauvegard&eacute;e dans un fichier XML.
4 Cliquez sur Enregistrer.
Flash Builder enregistre un fichier XML et un fichier MXML dans le dossier .FlexUnitSettings du projet.
Vous pouvez utiliser le fichier XML dans les scripts de g&eacute;n&eacute;ration pour ex&eacute;cuter le test.
Vous pouvez g&eacute;n&eacute;rer un fichier SWF &agrave; partir du fichier MXML. Ce fichier SWF peut servir &agrave; effectuer des tests en
dehors de l’environnement Flash Builder. Pour g&eacute;n&eacute;rer le fichier SWF, le fichier MXML est g&eacute;n&eacute;ralement copi&eacute;
dans le dossier src du projet.
Derni&egrave;re mise &agrave; jour le 10/11/2011
179
UTILISATION DE FLASH BUILDER 4.6
Outils de test unitaire dans Flash Builder
Affichage des r&eacute;sultats de l’ex&eacute;cution d’un test FlexUnit
Le panneau de la vue R&eacute;sultat des tests unitaires FlexUnit affiche les r&eacute;sultats d’un test unitaire FlexUnit, en d&eacute;taillant
les &eacute;checs. Vous pouvez parcourir les r&eacute;sultats, filtrer l’affichage, &eacute;crire les r&eacute;sultats dans un fichier et charger les
r&eacute;sultats &agrave; partir d’un fichier.
Vous pouvez &eacute;galement relancer les tests, annuler un test en cours d’ex&eacute;cution et effacer les r&eacute;sultats de la vue.
Si cette vue n’est pas ouverte, vous pouvez y acc&eacute;der en s&eacute;lectionnant Fen&ecirc;tre &gt; Affichage d’une vue &gt; Autres &gt; Flash
Builder &gt; R&eacute;sultat des tests unitaires FlexUnit.
Panneau R&eacute;sultats des tests
Ce panneau r&eacute;pertorie tous les tests de la s&eacute;rie, en indiquant si le test a &eacute;chou&eacute; ou r&eacute;ussi.
Cliquez deux fois sur un test de la liste pour y acc&eacute;der dans l’&eacute;diteur ActionScript.
Panneau D&eacute;tails des tests ayant &eacute;chou&eacute;
S&eacute;lectionnez un test dans le panneau R&eacute;sultats des tests pour afficher les d&eacute;tails de l’&eacute;chec.
Chaque d&eacute;tail indique le fichier source et la m&eacute;thode, y compris le num&eacute;ro de la ligne correspondant &agrave; l’&eacute;chec.
Si le fichier source appartient &agrave; l’espace de travail, cliquez deux fois dans la liste pour acc&eacute;der &agrave; l’&eacute;chec dans l’&eacute;diteur
ActionScript.
Menu de la vue R&eacute;sultats des tests unitaires FlexUnit
Dans le menu de la vue R&eacute;sultats des tests unitaires FlexUnit, vous pouvez proc&eacute;der comme suit :
• Filtrez les r&eacute;sultats affich&eacute;s.
Masquage du panneau D&eacute;tails des tests ayant &eacute;chou&eacute;.
Limitation de l’affichage aux tests ayant &eacute;chou&eacute;
• D&eacute;filement des tests affich&eacute;s dans le panneau R&eacute;sultat des tests
• Annulation d’un test en cours d’ex&eacute;cution
• Enregistrement des r&eacute;sultats ou de la configuration d’un test
• Chargement des r&eacute;sultats pr&eacute;c&eacute;demment enregistr&eacute;s dans un fichier
• Suppression des r&eacute;sultats du panneau
• R&eacute;ex&eacute;cution du test actuel. Vous pouvez choisir :
• d’ex&eacute;cuter tous les tests ;.
• d’ex&eacute;cuter uniquement les &eacute;checs ;
• d’ex&eacute;cuter le test s&eacute;lectionn&eacute;.
• Actualisation de la configuration FlexUnit
Si vous avez modifi&eacute; un test ou avez ajout&eacute; ou supprim&eacute; des tests, cliquez sur le bouton d’actualisation pour charger
la nouvelle configuration FlexUnit.
• Configuration et ex&eacute;cution de tests FlexUnit
Utilisez le bouton Ex&eacute;cuter des tests unitaires FlexUnit pour configurer et ex&eacute;cuter des tests FlexUnit.
Derni&egrave;re mise &agrave; jour le 10/11/2011
180
UTILISATION DE FLASH BUILDER 4.6
Outils de test unitaire dans Flash Builder
Prise en charge de FlexUnit pour les projets mobiles
Il vous est maintenant possible d’ex&eacute;cuter un test FlexUnit sur un p&eacute;riph&eacute;rique mobile. Dans le cas o&ugrave; vous ne disposez
pas de p&eacute;riph&eacute;rique mobile, vous pouvez en simuler un sur votre ordinateur et ensuite ex&eacute;cuter le test FlexUnit.
Ex&eacute;cution d’un test FlexUnit sur un p&eacute;riph&eacute;rique mobile
1 S&eacute;lectionnez un projet mobile et ex&eacute;cutez le test en s&eacute;lectionnant Ex&eacute;cuter &gt; Tests FlexUnit ou s&eacute;lectionnez
Ex&eacute;cuter des tests unitaires FlexUnit dans le menu contextuel.
2 Sp&eacute;cifiez une m&eacute;thode de lancement :
• Sur le bureau Ex&eacute;cute l’application sur votre ordinateur &agrave; l’aide de AIR Debug Launcher (ADL), selon une
configuration de p&eacute;riph&eacute;rique que vous avez sp&eacute;cifi&eacute;e.
• Sur le p&eacute;riph&eacute;rique ex&eacute;cute l’application FlexUnit sur un p&eacute;riph&eacute;rique mobile.
Flash Builder peut acc&eacute;der au p&eacute;riph&eacute;rique connect&eacute; au port USB de l’ordinateur ou au r&eacute;seau via une
connexion Wi-Fi. Une connexion socket et l’adresse IP de l’ordinateur permettent la communication entre
Flash Builder et l’application FlexUnit ex&eacute;cut&eacute;e sur le p&eacute;riph&eacute;rique.
Remarque : le test FlexUnit peut &ecirc;tre ex&eacute;cut&eacute; sur un p&eacute;riph&eacute;rique connect&eacute; au port USB de votre ordinateur, mais
les r&eacute;sultats du test pourront uniquement &ecirc;tre affich&eacute;s si la connexion Wi-Fi est activ&eacute;e sur le p&eacute;riph&eacute;rique.
Le num&eacute;ro de port utilis&eacute; par d&eacute;faut pour &eacute;tablir une connexion socket est 8765. Vous pouvez modifier ce
num&eacute;ro en acc&eacute;dant &agrave; la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et en s&eacute;lectionnant Flash Builder &gt; FlexUnit.
Si l’application FlexUnit ne parvient pas &agrave; &eacute;tablir une connexion avec le p&eacute;riph&eacute;rique, Flash Builder affiche
parfois une bo&icirc;te de dialogue vous demandant d’indiquer l’adresse IP de l’ordinateur. Assurez-vous que le
p&eacute;riph&eacute;rique est correctement connect&eacute; au r&eacute;seau sans fil et que l’ordinateur qui ex&eacute;cute Flash Builder est
accessible depuis ce r&eacute;seau.
3 Dans la fen&ecirc;tre de configuration de l’option Ex&eacute;cuter les tests unitaires FlexUnit, s&eacute;lectionnez les scripts et les
m&eacute;thodes &agrave; ex&eacute;cuter au cours du test. Cliquez sur OK pour ex&eacute;cuter les tests.
4 Visionnez les r&eacute;sultats des tests.
Flash Builder g&eacute;n&egrave;re un fichier SWF dans le dossier bin-debug du projet.
Une application s’ouvre pour afficher des informations sur les tests et en indiquer la fin.
Le panneau R&eacute;sultat des tests unitaires FlexUnit s’ouvre et affiche les r&eacute;sultats des tests. Voir &laquo; Affichage des
r&eacute;sultats de l’ex&eacute;cution d’un test FlexUnit &raquo; &agrave; la page 179.
Derni&egrave;re mise &agrave; jour le 10/11/2011
181
Chapitre 8 : D&eacute;veloppement d’applications
avec Flex
Flux de travail de base pour d&eacute;velopper une application
avec Flex
1 (Facultatif) Cr&eacute;ez ou importez un projet.
Pour cr&eacute;er un projet, dans Flash Builder, s&eacute;lectionnez Fichier &gt; Nouveau, puis le type de projet que vous voulez
ouvrir. L’assistant Nouveau projet diff&egrave;re selon le type de projet.
Dans certains cas, votre projet acc&egrave;de aux donn&eacute;es d’un serveur, tel qu’un serveur PHP, ColdFusion ou
d’application Java. Pr&eacute;cisez les informations d’acc&egrave;s au serveur lors de la cr&eacute;ation du projet. Pour plus
d’informations, voir &laquo; Cr&eacute;ation de projets dans Flash Builder &raquo; &agrave; la page 88.
Vous pouvez importer des projets qui ont d&eacute;j&agrave; &eacute;t&eacute; cr&eacute;&eacute;s ou export&eacute;s depuis Flash Builder. Pour plus d’informations,
voir &laquo; Exportation et importation de projets &raquo; &agrave; la page 95.
Vous pouvez &eacute;galement importer des projets qui ont &eacute;t&eacute; cr&eacute;&eacute;s dans Adobe Flash Catalyst. Pour plus d’informations,
voir &laquo; Utilisation de Flash Builder avec Flash Catalyst &raquo; &agrave; la page 250.
2 Cr&eacute;ez ou modifiez les fichiers source d’un projet.
Utilisez les &eacute;diteurs Flash Builder pour modifier les fichiers source d’un projet. Flash Builder inclut le mode Source
et le mode Cr&eacute;ation. De nombreux d&eacute;veloppeurs pr&eacute;sentent les &eacute;l&eacute;ments de l’interface utilisateur en mode Cr&eacute;ation
et entrent le code en mode Source.
Pour plus d’informations, voir &laquo; Outils de d&eacute;veloppement de code dans Flash Builder &raquo; &agrave; la page 48.
3 Cr&eacute;ez le projet.
Par d&eacute;faut, Flash Builder cr&eacute;e un projet &agrave; chaque fois que vous enregistrez un fichier dans le projet. Lorsque vous
cr&eacute;ez le projet, Flash Builder place les fichiers de sortie &agrave; l’emplacement appropri&eacute; au projet. Flash Builder vous
informe des erreurs ou avertissements rencontr&eacute;s lors de la cr&eacute;ation du projet.
Pour plus d’informations, voir &laquo; Cr&eacute;ation de projets &raquo; &agrave; la page 101.
4 Ex&eacute;cutez les applications du projet.
Chaque projet, &agrave; l’exception des projets de biblioth&egrave;que, peut contenir des fichiers d’application susceptibles d’&ecirc;tre
lanc&eacute;s dans les perspectives d’ex&eacute;cution, de d&eacute;bogage ou de profil de Flash Builder. Flash Builder d&eacute;finit une
perspective de lancement qui lui permet de lancer l’application. Vous pouvez modifier la perspective de lancement
par d&eacute;faut ou cr&eacute;er d’autres perspectives de lancement.
En ce qui concerne les projets AIR mobiles, vous devez configurer une perspective de lancement avant de lancer
l’application.
Pour plus d’informations, voir &laquo; Ex&eacute;cution et d&eacute;bogage des applications &raquo; &agrave; la page 120.
5 Testez le projet.
Utilisez les outils de d&eacute;bogage, de profilage et d’analyse de Flash Builder pour tester et optimiser vos projets. Vous
pouvez &eacute;galement utiliser l’environnement de test FlexUnit pour g&eacute;n&eacute;rer et modifier des tests reproduisibles
pouvant &ecirc;tre ex&eacute;cut&eacute;s &agrave; partir de scripts ou directement dans Flash Builder.
Derni&egrave;re mise &agrave; jour le 10/11/2011
182
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Pour plus d’informations, voir &laquo; D&eacute;bogage d’outils dans Flash Builder &raquo; &agrave; la page 134 et &laquo; Outils de test unitaire
dans Flash Builder &raquo; &agrave; la page 174.
Si votre application acc&egrave;de aux donn&eacute;es distantes, utilisez le moniteur de r&eacute;seau pour examiner les donn&eacute;es
transmises entre une application et un service de donn&eacute;es. Pour plus d’informations, voir &laquo; Surveillance des
applications qui acc&egrave;dent aux services de donn&eacute;es &raquo; &agrave; la page 224.
Utilisez le profileur Adobe Flex pour identifier les probl&egrave;mes de performance et les pertes de m&eacute;moire d’une
application. Pour plus d’informations, voir &laquo; Profilage d’outils dans Flash Builder &raquo; &agrave; la page 145.
6 D&eacute;ploiement d’une application.
Utilisez Flash Builder pour exporter une version valid&eacute;e d’une application, que vous pouvez utiliser pour distribuer
et d&eacute;ployer l’application. Le processus d’exportation d’une version valid&eacute;e d’une application varie selon le type de
projet.
Pour plus d’informations, voir &laquo; Exportation d’une application vers une version valid&eacute;e &raquo; &agrave; la page 126.
Cr&eacute;ation d’interfaces utilisateur
Bien que vous puissiez d&eacute;finir votre interface utilisateur compl&egrave;tement en mode Source, vous commencez
g&eacute;n&eacute;ralement par ajouter les &eacute;l&eacute;ments d’interface utilisateur en mode Cr&eacute;ation.
Pour plus d’informations, voir &laquo; Utilisation de composants visuels en mode Cr&eacute;ation MXML &raquo; &agrave; la page 22 et Cr&eacute;ation
de l’interface utilisateur.
Remarque : vous pouvez &eacute;galement ajouter &agrave; votre application des ressources cr&eacute;&eacute;es avec Adobe Flash&reg; Professional&reg;.
Voir &laquo; Cr&eacute;ation et modification de composants Flash &raquo; &agrave; la page 246.
Utilisation de formulaires
Le formulaire Spark vous permet de cr&eacute;er des formulaires complexes. Le formulaire Spark est un conteneur hautement
personnalisable qui prend en charge plusieurs cr&eacute;ations de formulaires. Vous pouvez &eacute;galement cr&eacute;er et modifier des
habillages pour le formulaire et les &eacute;l&eacute;ments de formulaire.
Pour plus d’informations sur l’utilisation du formulaire Spark et des conteneurs Spark FormHeading et Spark
FormItem, voir Utilisation de Flex 4.6.
Cr&eacute;ation d’un formulaire Spark (mode Cr&eacute;ation)
1 Cr&eacute;ez un composant MXML. Pour plus d’informations, voir &laquo; Cr&eacute;ation de composants MXML personnalis&eacute;s &raquo; &agrave; la
page 233.
2 En mode Cr&eacute;ation de l’&eacute;diteur, ajoutez un formulaire Spark au composant. S&eacute;lectionnez le composant de
formulaire dans la section Pr&eacute;sentation du panneau Composant, puis faites-le glisser dans la zone de cr&eacute;ation.
3 Indiquez la largeur et la hauteur du formulaire. S&eacute;lectionnez un habillage MXML ou Spark pour les &eacute;l&eacute;ments de
formulaire.
Lorsque vous s&eacute;lectionnez un habillage, un bloc &lt;fx:Style&gt; est cr&eacute;&eacute;. Par exemple, lorsque vous s&eacute;lectionnez
l’habillage Spark StackedFormItemSkin, le bloc de style suivant est cr&eacute;&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
183
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
&lt;fx:Style&gt;
@namespace s &quot;library://ns.adobe.com/flex/spark&quot;;
s|Form#form1 s|FormItem
{
skinClass: ClassReference(&quot;spark.skins.spark.StackedFormItemSkin&quot;);
}
s|Form#form1 s|FormHeading
{
skinClass: ClassReference(&quot;spark.skins.spark.StackedFormHeadingSkin&quot;);
}
&lt;/fx:Style&gt;
Si vous ne sp&eacute;cifiez pas d’habillage, les classes d’habillage par d&eacute;faut qui sont pr&eacute;sentes dans le package
spark.skins.spark sont utilis&eacute;es. Les classes d’habillage par d&eacute;faut sont utilis&eacute;es comme suit :
• Le formulaire utilise la classe FormSkin
• Le composant FormItem utilise la classe FormItemSkin
• Le composant FormHeading utilise la classe FormHeadingSkin
4 Faites glisser et d&eacute;posez le composant FormHeading dans le formulaire Spark, le cas &eacute;ch&eacute;ant. Lorsque vous
proc&eacute;dez ainsi, un code ressemblant au suivant est g&eacute;n&eacute;r&eacute; :
&lt;/s:Form&gt;
&lt;s:FormHeading label=&quot;Heading&quot;/&gt;
&lt;/s:Form&gt;
En mode Cr&eacute;ation, double-cliquez sur le composant FormHeading pour modifier le libell&eacute; du titre.
5 Faites glisser et d&eacute;posez les composants de formulaire requis dans le formulaire Spark, un composant TextInput
par exemple. Chaque composant que vous d&eacute;posez dans le formulaire g&eacute;n&egrave;re un &eacute;l&eacute;ment FormItem.
Par d&eacute;faut, une cha&icirc;ne Label est ajout&eacute;e &agrave; chaque &eacute;l&eacute;ment FormItem. Par exemple, si vous faites glisser et d&eacute;posez
un composant TextInput, un code ressemblant au suivant est g&eacute;n&eacute;r&eacute; :
&lt;s:Form&gt;
&lt;s:FormItem label=&quot;Label&quot;&gt;
&lt;s:TextInput/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
Pour ajouter une cha&icirc;ne helpContent au composant TextInput, s&eacute;lectionnez HelpContent dans l’inspecteur des
propri&eacute;t&eacute;s. Ensuite, un code ressemblant au suivant est g&eacute;n&eacute;r&eacute; :
&lt;s:Form&gt;
&lt;s:FormItem label=&quot;Label&quot;&gt;
&lt;s:helpContent&gt;
&lt;s:Label text=&quot;Help String&quot;&gt;&lt;/s:Label&gt;
&lt;/s:helpContent&gt;
&lt;s:TextInput/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
6 Vous pouvez utiliser la vue des propri&eacute;t&eacute;s pour configurer les propri&eacute;t&eacute;s du composant. Pour les propri&eacute;t&eacute;s qui
existent &eacute;galement dans le composant mx:Form correspondant, l’exp&eacute;rience utilisateur et les fonctionnalit&eacute;s sont
similaires.
Utilisez le panneau Style de la vue des propri&eacute;t&eacute;s pour modifier les habillages. Pour plus d’informations sur
l’application de styles aux composants, voir &laquo; Application des styles &raquo; &agrave; la page 191.
Derni&egrave;re mise &agrave; jour le 10/11/2011
184
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Vous pouvez &eacute;galement cr&eacute;er un habillage MXML personnalis&eacute; en fonction d’un mod&egrave;le. Pour plus d’informations,
voir &laquo; Cr&eacute;ation d’un habillage MXML personnalis&eacute; pour un formulaire &agrave; partir d’un mod&egrave;le (mode Cr&eacute;ation) &raquo; &agrave;
la page 186.
G&eacute;n&eacute;ration et modification d’habillages pour les &eacute;l&eacute;ments de formulaire Spark (mode
Cr&eacute;ation)
Les exemples ci-dessous vous expliquent comment cr&eacute;er des habillages MXML personnalis&eacute;s pour les &eacute;l&eacute;ments de
formulaire Spark. Certaines modifications peuvent &ecirc;tre effectu&eacute;es en mode Cr&eacute;ation ; d’autres n&eacute;cessiteront le passage
en mode Source. Ils se basent sur un projet Flex utilisant le th&egrave;me Spark par d&eacute;faut.
Cr&eacute;ation d’un habillage MXML personnalis&eacute; pour les &eacute;l&eacute;ments de formulaire &agrave; partir d’un mod&egrave;le (mode
Cr&eacute;ation)
1 En mode Cr&eacute;ation de l’&eacute;diteur, s&eacute;lectionnez Cr&eacute;er un habillage dans le menu contextuel de l’&eacute;l&eacute;ment de formulaire.
La bo&icirc;te de dialogue de cr&eacute;ation d’un habillage MXML s’ouvre.
Vous pouvez &eacute;galement ouvrir la bo&icirc;te de dialogue de cr&eacute;ation d’un habillage MXML avec d’autres m&eacute;thodes. En
mode Cr&eacute;ation de l’&eacute;diteur, s&eacute;lectionnez l’&eacute;l&eacute;ment de formulaire, puis proc&eacute;dez de l’une des fa&ccedil;ons suivantes :
• Dans la section Style de la vue des propri&eacute;t&eacute;s, s&eacute;lectionnez l’ic&ocirc;ne qui se trouve en regard du champ Habillage,
puis choisissez Cr&eacute;er un habillage.
• Dans le menu Fichier, s&eacute;lectionnez Nouveau &gt; Habillage MXML.
• Dans le menu Cr&eacute;ation, s&eacute;lectionnez Cr&eacute;er un habillage.
2 Dans la bo&icirc;te de dialogue de cr&eacute;ation d’un habillage MXML, sp&eacute;cifiez les &eacute;l&eacute;ments suivants :
• Dossier source et package de l’habillage g&eacute;n&eacute;r&eacute;.
• Nom de la classe d’habillage cr&eacute;&eacute;e.
• Composant h&ocirc;te s&eacute;lectionn&eacute;, par d&eacute;faut.
• (Recommand&eacute;) S&eacute;lectionnez Cr&eacute;er en tant que copie de et ne supprimez pas le code de style ActionScript. Si
vous &ecirc;tes novice en mati&egrave;re d’habillage, utilisez une copie pour vous lancer dans la cr&eacute;ation d’une classe
d’habillage.
(Utilisateurs avanc&eacute;s) Si vous savez comment cr&eacute;er des classes d’habillage, proc&eacute;dez de l’une des mani&egrave;res
suivantes :
Supprimez le code de style ActionScript ou ne cr&eacute;ez pas de copie d’une classe existante. Si vous ne cr&eacute;ez pas de
copie d’une classe existante, Flash Builder g&eacute;n&egrave;re un fichier de classe Skin vide comportant des commentaires
pour vous guider.
Les &eacute;tapes restantes de cette proc&eacute;dure supposent que vous avez suivi l’option recommand&eacute;e pour la g&eacute;n&eacute;ration
d’une classe d’habillage. Pour plus d’informations, voir &laquo; G&eacute;n&eacute;ration et modification d’habillages pour les
composants Spark &raquo; &agrave; la page 203.
3 Cliquez sur Terminer. Flash Builder g&eacute;n&egrave;re un fichier de classe Skin et l’ouvre en mode Cr&eacute;ation dans l’&eacute;diteur
MXML. Vous pouvez modifier l’habillage &agrave; l’aide des outils d’&eacute;dition de la section Style dans la vue des propri&eacute;t&eacute;s.
4 Vous &ecirc;tes invit&eacute; &agrave; appliquer le nouvel habillage &agrave; tous les &eacute;l&eacute;ments de formulaire. Lorsque vous proc&eacute;dez ainsi, un
bloc &lt;fx:Style&gt; indiquant le nouvel habillage est cr&eacute;&eacute;.
Par exemple, si vous appliquez l’habillage SkinnableContainerSkin &agrave; tous les &eacute;l&eacute;ments de formulaire, un code
ressemblant au suivant est g&eacute;n&eacute;r&eacute; :
Derni&egrave;re mise &agrave; jour le 10/11/2011
185
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
&lt;fx:Style&gt;
@namespace s &quot;library://ns.adobe.com/flex/spark&quot;;
s|Form#form1 s|FormItem
{
skinClass: ClassReference(&quot;spark.skins.spark.SkinnableContainerSkin&quot;);
}
&lt;/fx:Style&gt;
&lt;s:Form id=&quot;form1&quot; x=&quot;145&quot; y=&quot;81&quot;&gt;
&lt;s:FormHeading label=&quot;Heading&quot;/&gt;
&lt;s:FormItem label=&quot;Label&quot;&gt;
&lt;s:helpContent&gt;
&lt;s:Label text=&quot;Help String&quot;&gt;&lt;/s:Label&gt;
&lt;/s:helpContent&gt;
&lt;s:TextInput/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label=&quot;Label&quot;&gt;
&lt;s:helpContent&gt;
&lt;s:Label text=&quot;Help String&quot;&gt;&lt;/s:Label&gt;
&lt;/s:helpContent&gt;
&lt;s:TextInput/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
Si, toutefois, vous choisissez d’appliquer uniquement l’habillage &agrave; l’&eacute;l&eacute;ment de formulaire s&eacute;lectionn&eacute;, tous les
&eacute;l&eacute;ments de formulaire dot&eacute;s de cet habillage doivent imp&eacute;rativement comporter le m&ecirc;me nombre de colonnes.
Par exemple, si vous appliquez l’habillage SkinnableContainerSkin &agrave; un seul &eacute;l&eacute;ment de formulaire, un code
ressemblant au suivant est g&eacute;n&eacute;r&eacute; :
&lt;s:Form x=&quot;186&quot; y=&quot;127&quot;&gt;
&lt;s:FormHeading label=&quot;Heading&quot;/&gt;
&lt;s:FormItem label=&quot;Label&quot; skinClass=&quot;spark.skins.spark.SkinnableContainerSkin&quot;&gt;
&lt;s:helpContent&gt;
&lt;s:Label text=&quot;Help String&quot;&gt;&lt;/s:Label&gt;
&lt;/s:helpContent&gt;
&lt;s:TextInput/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label=&quot;Label&quot;&gt;
&lt;s:helpContent&gt;
&lt;s:Label text=&quot;Help String&quot;&gt;&lt;/s:Label&gt;
&lt;/s:helpContent&gt;
&lt;s:TextInput/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
D&eacute;finition d’habillages multiples pour diff&eacute;rents &eacute;l&eacute;ments de formulaire d’un m&ecirc;me formulaire (mode
Cr&eacute;ation)
Avant de d&eacute;finir plusieurs classes d’habillage pour les &eacute;l&eacute;ments d’un formulaire, voici quelques points &agrave; prendre en
compte.
• Si le formulaire comporte plusieurs &eacute;l&eacute;ments, il est recommand&eacute; d’utiliser la m&ecirc;me classe d’habillage pour tous les
&eacute;l&eacute;ments de formulaire. Toutefois, si vous choisissez de ne pas suivre cette recommandation,
• les &eacute;l&eacute;ments du formulaire doivent imp&eacute;rativement comporter le m&ecirc;me nombre de colonnes.
Pour d&eacute;finir une classe d’habillage, proc&eacute;dez comme suit :
1 En mode Cr&eacute;ation de l’&eacute;diteur, s&eacute;lectionnez l’&eacute;l&eacute;ment de formulaire.
Derni&egrave;re mise &agrave; jour le 10/11/2011
186
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
2 Dans la section Style de la vue des propri&eacute;t&eacute;s, cliquez sur Habillage, puis s&eacute;lectionnez une classe d’habillage. Un
message d’avertissement concernant l’utilisation recommand&eacute;e appara&icirc;t. S&eacute;lectionnez Appliquer uniquement aux
&eacute;l&eacute;ments s&eacute;lectionn&eacute;s.
3 R&eacute;p&eacute;tez ces &eacute;tapes pour chaque &eacute;l&eacute;ment de formulaire auquel vous souhaitez appliquer l’habillage.
G&eacute;n&eacute;ration et modification d’habillages pour les formulaires Spark
Les exemples ci-dessous vous expliquent comment cr&eacute;er des habillages MXML personnalis&eacute;s pour les formulaires
Spark. Ils se basent sur un projet Flex utilisant le th&egrave;me Spark par d&eacute;faut.
Cr&eacute;ation d’un habillage MXML personnalis&eacute; pour un formulaire &agrave; partir d’un mod&egrave;le (mode Cr&eacute;ation)
Pour cr&eacute;er un habillage MXML personnalis&eacute; pour le formulaire, vous pouvez ouvrir la bo&icirc;te de dialogue de cr&eacute;ation
d’un habillage MXML de l’une des fa&ccedil;ons suivantes.
En mode Cr&eacute;ation de l’&eacute;diteur, s&eacute;lectionnez le formulaire, puis proc&eacute;dez de l’une des fa&ccedil;ons suivantes :
• S&eacute;lectionnez Cr&eacute;er un habillage dans le menu contextuel du formulaire.
• Dans la section Style de la vue des propri&eacute;t&eacute;s, s&eacute;lectionnez l’ic&ocirc;ne qui se trouve en regard du champ Habillage, puis
choisissez Cr&eacute;er un habillage.
• Dans le menu Fichier, s&eacute;lectionnez Nouveau &gt; Habillage MXML.
• Dans le menu Cr&eacute;ation, s&eacute;lectionnez Cr&eacute;er un habillage.
Les &eacute;tapes restantes de cette proc&eacute;dure sont identiques &agrave; celles permettant de cr&eacute;er un habillage pour les &eacute;l&eacute;ments de
formulaire. Pour plus d’informations, voir &laquo; Cr&eacute;ation d’un habillage MXML personnalis&eacute; pour les &eacute;l&eacute;ments de
formulaire &agrave; partir d’un mod&egrave;le (mode Cr&eacute;ation) &raquo; &agrave; la page 184.
D&eacute;finition d’un habillage unique pour tous les &eacute;l&eacute;ments de formulaire d’un formulaire (mode Cr&eacute;ation)
Pour d&eacute;finir une seule classe d’habillage pour tous les &eacute;l&eacute;ments d’un formulaire, d&eacute;finissez l’habillage FormItem dans
le formulaire. Pour ce faire :
1 En mode Cr&eacute;ation de l’&eacute;diteur, s&eacute;lectionnez le formulaire.
2 Dans la section Commun de la vue des propri&eacute;t&eacute;s, s&eacute;lectionnez un habillage FormItem.
L’habillage s&eacute;lectionn&eacute; est appliqu&eacute; &agrave; tous les &eacute;l&eacute;ments de formulaire et un bloc &lt;fx:Style&gt; est cr&eacute;&eacute;. Par exemple,
si vous s&eacute;lectionnez l’habillage StackedFormItemSkin pour les &eacute;l&eacute;ments d’un formulaire, le bloc &lt;fx:Style&gt; est
g&eacute;n&eacute;r&eacute; comme suit :
&lt;fx:Style&gt;
@namespace s &quot;library://ns.adobe.com/flex/spark&quot;;
s|Form#form1 s|FormItem
{
skinClass: ClassReference(&quot;spark.skins.spark.StackedFormItemSkin&quot;);
}
s|Form#form1 s|FormHeading
{
skinClass: ClassReference(&quot;spark.skins.spark.StackedFormHeadingSkin&quot;);
}
&lt;/fx:Style&gt;
Derni&egrave;re mise &agrave; jour le 10/11/2011
187
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Utilisation des graphiques
Flash Builder vous permet d’ajouter des composants de repr&eacute;sentation graphique pour l’affichage des donn&eacute;es dans
l’interface utilisateur. Ces composants Flex vous permettent de cr&eacute;er des types de graphiques tr&egrave;s courants et d’en
d&eacute;terminer enti&egrave;rement l’aspect. Pour un r&eacute;capitulatif des graphiques disponibles, voir Chart types.
Pour plus d’informations sur la d&eacute;finition de donn&eacute;es de graphique, la mise en forme d’&eacute;l&eacute;ments de graphique et la
manipulation d’autres aspects des graphiques, voir Introduction aux graphiques.
Ajout d’un composant de repr&eacute;sentation graphique
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, faites glisser un composant de repr&eacute;sentation graphique de la vue
Composants vers la zone de cr&eacute;ation.
2 Saisissez un ID pour le graphique.
3 Pour afficher plusieurs s&eacute;ries de donn&eacute;es dans le graphique, cliquez sur le bouton Ajouter et saisissez le nom de la
nouvelle s&eacute;rie dans la bo&icirc;te de dialogue qui s’affiche.
Par exemple, le contr&ocirc;le ColumnChart contient deux s&eacute;ries de donn&eacute;es. La barre sur la gauche repr&eacute;sente le
b&eacute;n&eacute;fice brut sur six mois, et la suivante, le b&eacute;n&eacute;fice net pour la m&ecirc;me p&eacute;riode.
Supprimez une s&eacute;rie de donn&eacute;es en la s&eacute;lectionnant dans la liste et en cliquant sur le bouton Supprimer.
4 (Facultatif) S&eacute;lectionnez l’option Inclure une l&eacute;gende.
Cette option vous permet d’ajouter un contr&ocirc;le Legend au graphique. Ce contr&ocirc;le affiche l’&eacute;tiquette de chaque s&eacute;rie
de donn&eacute;es dans le graphique et une l&eacute;gende affichant l’&eacute;l&eacute;ment de repr&eacute;sentation graphique de la s&eacute;rie.
5 Cliquez sur OK pour ins&eacute;rer le graphique.
Application des th&egrave;mes
Les th&egrave;mes permettent de personnaliser l’aspect de vos applications. Flash Builder offre un choix de plusieurs th&egrave;mes.
Vous pouvez &eacute;galement importer d’autres th&egrave;mes ou cr&eacute;er les v&ocirc;tres.
Flash Builder comporte des th&egrave;mes Spark et Halo. Le th&egrave;me par d&eacute;faut pour les composants Flex 4.6 et 4 est Spark. et
celui des composants Flex 3 est Halo.
Pour plus d’informations sur la prise en charge des th&egrave;mes dans Flex, voir About themes.
Derni&egrave;re mise &agrave; jour le 10/11/2011
188
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Sp&eacute;cification d’un th&egrave;me
Sp&eacute;cifiez des th&egrave;mes par projet. Une fois que vous avez sp&eacute;cifi&eacute; un th&egrave;me pour un projet, toutes les applications du
projet le partagent.
1 Ouvrez la bo&icirc;te de dialogue S&eacute;lectionner le th&egrave;me du projet &agrave; partir de la vue Cr&eacute;ation ou de la vue Source de
l’&eacute;diteur MXML :
• (Vue Cr&eacute;ation) S&eacute;lectionnez le panneau Aspect. S&eacute;lectionnez ensuite le Th&egrave;me actuel.
• (Vue Source) Dans la barre de menus de Flash Builder, s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Th&egrave;me Flex.
2 S&eacute;lectionnez un th&egrave;me puis cliquez sur OK.
Th&egrave;mes mobiles
Lorsque vous cr&eacute;ez un projet Flex mobile, le th&egrave;me mobile par d&eacute;faut est appliqu&eacute;. Pour modifier le th&egrave;me mobile par
d&eacute;faut, voir Th&egrave;mes mobiles.
Le nombre de styles disponibles avec le th&egrave;me mobile est moins important qu’avec d’autres th&egrave;mes. Pour obtenir une
liste compl&egrave;te des styles pris en charge par le th&egrave;me mobile, voir Styles mobiles.
Importation de th&egrave;mes
Flash Builder vous permet d’importer des th&egrave;mes. Les fichiers correspondant &agrave; un th&egrave;me doivent &ecirc;tre inclus dans un
dossier. Tous les fichiers requis pour un th&egrave;me Flex doivent &ecirc;tre pr&eacute;sents.
Le nom du th&egrave;me est d&eacute;termin&eacute; par l’&eacute;l&eacute;ment de nom du fichier metadata.xml situ&eacute; dans le dossier des th&egrave;mes. Si
l’&eacute;l&eacute;ment de nom n’est pas pr&eacute;cis&eacute; ou si metadata.xml est absent, le th&egrave;me prend le nom du dossier des th&egrave;mes.
Pour plus d’informations sur le format requis pour les th&egrave;mes Flex, voir &laquo; Cr&eacute;ation de th&egrave;mes &raquo; &agrave; la page 189.
Les th&egrave;mes de Flash Builder peuvent prendre les formats suivants :
• Fichier de th&egrave;me ZIP
Extrayez le contenu du fichier ZIP avant d’importer le th&egrave;me. Le contenu extrait doit englober tous les fichiers
requis.
• Fichier CSS ou SWC pour un th&egrave;me
Le fichier CSS ou SWC doit se trouver dans un dossier contenant tous les fichiers requis pour un th&egrave;me Flex.
Lorsque vous importez un th&egrave;me &agrave; l’aide de Flash Builder, vous s&eacute;lectionnez le fichier CSS ou SWC correspondant
&agrave; ce th&egrave;me.
• Fichier MXP
Adobe Extension Manager CS5 vous permet d’assembler des fichiers correspondant &agrave; des th&egrave;mes Flex dans un
fichier MXP. Vous pouvez ensuite importer le th&egrave;me dans Flash Builder par le biais de l’Extension Manager.
Pour plus d’informations sur l’assemblage de th&egrave;mes dans un fichier MXP, voir &laquo; Cr&eacute;ation d’un fichier d’extension
(fichier MXP) pour un th&egrave;me Flex &raquo; &agrave; la page 190.
Importation de th&egrave;mes Flex &agrave; l’aide de Flash Builder
1 Ouvrez la bo&icirc;te de dialogue S&eacute;lectionner le th&egrave;me du projet &agrave; partir de la vue Cr&eacute;ation ou de la vue Source de
l’&eacute;diteur MXML :
• (Vue Cr&eacute;ation) S&eacute;lectionnez le panneau Aspect. S&eacute;lectionnez ensuite le Th&egrave;me actuel.
• (Vue Source) Dans la barre de menus de Flash Builder, s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Th&egrave;me Flex.
Derni&egrave;re mise &agrave; jour le 10/11/2011
189
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
2 S&eacute;lectionnez Importer un th&egrave;me, acc&eacute;dez au dossier contenant le th&egrave;me &agrave; importer, s&eacute;lectionnez le fichier CSS ou
SWC, puis cliquez sur OK.
Importation de th&egrave;mes Flex assembl&eacute;s dans un fichier MXP
1 Si vous ne l’avez pas encore fait, importez Adobe Flash&reg; Builder™ 4.6 dans Adobe Extension Manager CS5 :
Dans Adobe Extension Manager, s&eacute;lectionnez Fichier &gt; Importer produit.
2 Dans Adobe Extension Manager, s&eacute;lectionnez Flash Builder 4.6.
3 S&eacute;lectionnez Fichier &gt; Installer l’extension, acc&eacute;dez au fichier MXP correspondant au th&egrave;me, puis cliquez sur
Ouvrir.
Une fois que vous avez accept&eacute; la licence, Adobe Extension Manager installe le th&egrave;me dans Flash Builder. Il est
d&eacute;sormais disponible dans la bo&icirc;te de dialogue S&eacute;lectionner le th&egrave;me du projet de Flash Builder.
Remarque : vous pouvez &eacute;galement double-cliquer sur le fichier MXP pour lancer Adobe Extension Manager, qui
installe automatiquement le th&egrave;me.
T&eacute;l&eacute;chargement de th&egrave;mes
Vous pouvez t&eacute;l&eacute;charger des th&egrave;mes que vous pourrez ensuite importer dans Flash Builder.
T&eacute;l&eacute;chargement de th&egrave;mes Flex
1 Ouvrez la bo&icirc;te de dialogue S&eacute;lectionner le th&egrave;me du projet &agrave; partir de la vue Cr&eacute;ation ou de la vue Source de
l’&eacute;diteur MXML :
• (Vue Cr&eacute;ation) S&eacute;lectionnez le panneau Aspect. S&eacute;lectionnez ensuite le Th&egrave;me actuel.
• (Vue Source) Dans la barre de menus de Flash Builder, s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Th&egrave;me Flex.
2 S&eacute;lectionnez D&eacute;couvrir d’autres th&egrave;mes.
Flash Builder ouvre votre navigateur Web par d&eacute;faut &agrave; une page contenant des th&egrave;mes &agrave; t&eacute;l&eacute;charger. Vous pouvez
&eacute;galement acc&eacute;der &agrave; tout autre site contenant des th&egrave;mes Flex t&eacute;l&eacute;chargeables.
3 S&eacute;lectionnez un th&egrave;me Flex &agrave; t&eacute;l&eacute;charger.
Une fois le th&egrave;me t&eacute;l&eacute;charg&eacute;, vous pouvez l’importer, comme d&eacute;crit dans &laquo; Importation de th&egrave;mes &raquo; &agrave; la page 188.
Cr&eacute;ation de th&egrave;mes
Vous pouvez cr&eacute;er vos propres th&egrave;mes et les importer dans Flash Builder. Un th&egrave;me Flex contient g&eacute;n&eacute;ralement les
fichiers suivants :
• Des fichiers SWC, SWF, CSS, PNG et JPEG ainsi que d’autres fichiers composant le th&egrave;me.
Les fichiers composant le th&egrave;me peuvent varier, mais ils doivent comprendre un fichier SWC ou CSS.
• Fichier preview.jpg
Il s’agit du fichier image d’aper&ccedil;u pour le th&egrave;me. Si le dossier de th&egrave;me ne contient pas preview.jpg, Flash Builder
fait appel &agrave; une image d’aper&ccedil;u par d&eacute;faut pour le th&egrave;me.
• Fichier metadata.xml
Ce fichier contient des informations relatives au th&egrave;me, notamment les versions du SDK avec lesquelles le th&egrave;me
est compatible. Si le dossier de th&egrave;me ne contient pas ce fichier, Flash Builder en cr&eacute;e un lors de l’importation du
th&egrave;me.
Derni&egrave;re mise &agrave; jour le 10/11/2011
190
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Un th&egrave;me est g&eacute;n&eacute;ralement assembl&eacute; dans un fichier ZIP, mais celui-ci doit &ecirc;tre extrait avant l’importation du th&egrave;me
dans Flash Builder. Vous pouvez aussi assembler les fichiers de th&egrave;mes dans un fichier Adobe Extension Manager
(MXP) et utiliser Adobe Extension Manager pour importer le th&egrave;me dans Flash Builder.
Pour plus d’informations, voir About themes.
Fichier metadata.xml
Le tableau suivant r&eacute;pertorie les &eacute;l&eacute;ments pouvant &ecirc;tre inclus dans le fichier metadata.xml.
Nom d’&eacute;l&eacute;ment
Description
Name
Nom du th&egrave;me tel qu’il appara&icirc;t dans Flash Builder.
Lors de l’importation d’un th&egrave;me avec Flash Builder, vous pouvez remplacer le nom sp&eacute;cifi&eacute; dans le
fichier metadata.xml.
Category
Auteur du th&egrave;me. Cat&eacute;gorie sous laquelle le th&egrave;me est affich&eacute; dans Flash Builder.
sdks
Pr&eacute;cise les versions du Flex SDK avec lesquelles le th&egrave;me est compatible. C’est un &eacute;l&eacute;ment parent de
minVersionInclusive et maxVersionExclusive.
Si l’&eacute;l&eacute;ment sdks est absent, le th&egrave;me est valide pour tous les SDK.
minVersionInclusive
Version la plus ancienne du SDK de Flex avec laquelle ce th&egrave;me est compatible. Si cette information
est absente, ce th&egrave;me est compatible avec toutes les versions ant&eacute;rieures du SDK de Flex.
maxVersionExclusive
Version la plus r&eacute;cente du SDK de Flex avec laquelle ce th&egrave;me est compatible. Si cette information est
absente, ce th&egrave;me est compatible avec toutes les versions r&eacute;centes du SDK de Flex.
mainFile
Fichier de niveau sup&eacute;rieur pour l’impl&eacute;mentation du th&egrave;me. Ce fichier peut r&eacute;f&eacute;rencer d’autres
fichiers dans le th&egrave;me. Par exemple, un fichier CSS pourrait r&eacute;f&eacute;rencer un fichier SWC ou SWF.
L’argument -theme du compilateur r&eacute;f&eacute;rence le fichier sp&eacute;cifi&eacute;.
L’exemple suivant illustre un fichier metadata.xml standard correspondant &agrave; un th&egrave;me cr&eacute;&eacute; par la soci&eacute;t&eacute; ABC.
&lt;theme&gt;
&lt;name&gt;WindowsLookAlike&lt;/name&gt;
&lt;category&gt;ABC&lt;/category&gt;
&lt;sdks&gt;
&lt;minVersionInclusive&gt;2.0.1&lt;/minVersionInclusive&gt;
&lt;maxVersionExclusive&gt;4.0.0&lt;/maxVersionExclusive&gt;
&lt;/sdks&gt;
&lt;mainFile&gt;WindowsLookAlike.css&lt;/mainFile&gt;
&lt;/theme&gt;
Selon le fichier metadata.xml, le th&egrave;me est compatible avec le SDK de Flex 2.0.1. Il est aussi compatible avec des SDK
jusqu’&agrave; la version Flex 4.0.0 (non incluse). Lorsque ce th&egrave;me est s&eacute;lectionn&eacute;, WindowsLookAlike.css est le fichier
ajout&eacute; &agrave; l’argument de compilateur -themes.
Cr&eacute;ation d’un fichier d’extension (fichier MXP) pour un th&egrave;me Flex
Adobe Extension Manager CS5 vous permet de cr&eacute;er un fichier d’extension (fichier MXP) pour un th&egrave;me Flex. Vous
pouvez ensuite importer le fichier MXP dans Flash Builder par le biais d’Adobe Extension Manager CS5.
Placez tous vos fichiers de th&egrave;me dans un dossier hi&eacute;rarchique, puis cr&eacute;ez un fichier d’installation d’extensions (fichier
MXI), qu’Extension Manager utilise pour cr&eacute;er le fichier MXP. Pour plus d’informations sur le format d’un fichier
MXI, reportez-vous au document Format du fichier d’extension.
Lors de la cr&eacute;ation du fichier MXI, vous devez pr&eacute;ciser un chemin de destination pour chacun des fichiers du th&egrave;me.
Les chemins sont au format suivant :
Derni&egrave;re mise &agrave; jour le 10/11/2011
191
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
$flexbuilder/&lt;Theme Name&gt;
•
$flexbuilder est d&eacute;fini dans le fichier de configuration Flash Builder, XManConfig.xml. Extension Manager
d&eacute;veloppe $flexbuilder selon cette d&eacute;finition. XManConfig.xml se trouve &agrave; l’emplacement suivant dans votre
syst&egrave;me de fichiers :
/&lt;Install Dir&gt;/Flash Builder 4/configuration/XManConfig.xml
• &lt;Theme Name&gt; est le nom du dossier qui contient le th&egrave;me Flex.
Cr&eacute;ation d’un fichier d’extension MXP pour un th&egrave;me Flex
1 Placez tous les fichiers correspondant au th&egrave;me, notamment le fichier MXI, dans un dossier hi&eacute;rarchique.
2 Dans Extension Manager, s&eacute;lectionnez Fichier &gt; Empaqueter l’extension.
3 Acc&eacute;dez au fichier d’installation d’extension souhait&eacute; et s&eacute;lectionnez-le.
4 Recherchez un emplacement pour le fichier de package et nommez-le avec l’extension .mxp.
Vous pouvez ensuite tester le fichier d’extension en l’installant par le biais d’Extension Manager.
Ajout d’autres th&egrave;mes
Vous pouvez d&eacute;finir plusieurs fichiers de th&egrave;mes pour une application. En l’absence de chevauchement de styles, les
deux th&egrave;mes sont appliqu&eacute;s dans leur int&eacute;gralit&eacute;. D’autres aspects doivent &eacute;galement &ecirc;tre pris en consid&eacute;ration lors de
l’ajout de th&egrave;mes. L’un d’eux est l’ordre des fichiers de th&egrave;mes.
Pour ajouter des th&egrave;mes, utilisez le compilateur de ligne de commande mxmlc avec l’option de compilateur theme afin
de sp&eacute;cifier le chemin d’acc&egrave;s aux fichiers de th&egrave;mes.
Using themes fournit des informations sur la d&eacute;finition des arguments du compilateur et sur l’ordre des fichiers de
th&egrave;mes.
Application des styles
Les styles modifient l’aspect de l’application par la d&eacute;finition de valeurs pour les param&egrave;tres visuels des composants.
Vous pouvez d&eacute;finir des styles s’appliquant &agrave; tous les composants d’une application, &agrave; des composants individuels ou
&agrave; des groupes de composants r&eacute;f&eacute;renc&eacute;s par un s&eacute;lecteur de style.
Vous pouvez par exemple d&eacute;finir les styles suivants :
• Texte
Famille, taille, couleur et &eacute;paisseur de la police ainsi que d’autres param&egrave;tres d’affichage (gras, italique et soulign&eacute;,
par exemple).
• Bordure
Epaisseur, couleur, couleur au survol, style (pleine, incrust&eacute;, sortant, aucune), rayon de l’angle et autres.
• Couleur
Couleur de remplissage et alpha.
Remarque : les styles disponibles varient en fonction des composants.
Vous pouvez d&eacute;finir des propri&eacute;t&eacute;s de style de mani&egrave;re intraligne sur une balise MXML ou s&eacute;par&eacute;ment &agrave; l’aide de code
CSS. Le code CSS peut &ecirc;tre plac&eacute; &agrave; l’int&eacute;rieur de balises &lt;fx:Style&gt; dans une application ou dans un fichier CSS
distinct.
Derni&egrave;re mise &agrave; jour le 10/11/2011
192
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Lorsque vous appliquez des styles intralignes &agrave; des composants, vous pouvez convertir les styles des composants en
r&egrave;gle CSS dans une feuille de style externe. Vous pouvez utiliser l’&eacute;diteur CSS pour modifier les fichiers CSS.
Vous pouvez &eacute;galement convertir en styles les habillages appliqu&eacute;s &agrave; un composant.
Acc&eacute;dez au mode Cr&eacute;ation de l’&eacute;diteur MXML pour appliquer des styles &agrave; une application ou &agrave; des composants
sp&eacute;cifiques d’une application. Le mode Cr&eacute;ation vous permet en outre de convertir les styles ou les habillages appliqu&eacute;s
en feuilles de style CSS.
Comparaison des styles et des habillages
L’application d’un habillage consiste &agrave; changer l’aspect d’un composant par la modification ou le remplacement de ses
&eacute;l&eacute;ments visuels. Ces &eacute;l&eacute;ments peuvent &ecirc;tre compos&eacute;s d’images bitmap, de fichiers SWF ou de fichiers de classe qui
contiennent des m&eacute;thodes de dessin qui d&eacute;finissent des images vectorielles. Les habillages peuvent d&eacute;finir l’aspect d’un
composant dans divers &eacute;tats. Vous pouvez par exemple d&eacute;finir l’aspect des &eacute;tats up, down, over et disabled d’un
composant Button.
Flash Builder vous permet de convertir l’habillage d’un composant en styles CSS.
Application de styles
Acc&eacute;dez &agrave; la vue Aspect pour d&eacute;finir les styles valables pour l’ensemble de l’application. Flash Builder enregistre le style
d&eacute;fini dans cette vue en tant que s&eacute;lecteur de style CSS global.
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, ouvrez un fichier d’application MXML contenant plusieurs composants.
2 Dans la vue Aspect, sp&eacute;cifiez des styles globaux pour l’application.
Si la vue Aspect n’est pas ouverte, vous pouvez y acc&eacute;der en s&eacute;lectionnant Fen&ecirc;tre &gt; Affichage d’une vue &gt; Flash
Builder &gt; Aspect.
Une fois les styles appliqu&eacute;s, Flash Builder cr&eacute;e un s&eacute;lecteur de style CSS global pour le style sp&eacute;cifi&eacute;.
Si ce style est le premier r&eacute;f&eacute;renc&eacute; dans l’application, Flash Builder g&eacute;n&egrave;re un nouveau fichier CSS et le r&eacute;f&eacute;rence
dans le fichier de l’application MXML.
Si l’application r&eacute;f&eacute;rence d&eacute;j&agrave; un fichier CSS ou un bloc &lt;fx:Style&gt;, Flash Builder met &agrave; jour le fichier CSS avec
le s&eacute;lecteur de style global.
Application de styles intralignes &agrave; un composant
Vous pouvez d&eacute;finir des styles intralignes pour les composants dans la vue Propri&eacute;t&eacute;s.
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, ouvrez une application MXML contenant plusieurs composants.
2 S&eacute;lectionnez un composant et sp&eacute;cifiez les valeurs des propri&eacute;t&eacute;s de style dans la zone Style de la vue Propri&eacute;t&eacute;s.
La zone Style change, en fonction du composant s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
193
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Vue Propri&eacute;t&eacute;s affichant les styles d’un DataGrid
3 Dans la vue Propri&eacute;t&eacute;s, s&eacute;lectionnez la Vue par cat&eacute;gories pour r&eacute;pertorier tous les styles qui peuvent &ecirc;tre appliqu&eacute;s
au composant s&eacute;lectionn&eacute;.
Remarque : dans Flex, les noms de style compos&eacute;s peuvent &ecirc;tre orthographi&eacute;s &agrave; la mani&egrave;re des identifiants
ActionScript (fontFamily, par exemple) ou des styles HTML (font-family, par exemple).
4 Une fois un style sp&eacute;cifi&eacute;, basculez en mode Source pour afficher le code intraligne g&eacute;n&eacute;r&eacute; qui applique le style.
Application d’un style externe ou int&eacute;gr&eacute;
Vous pouvez int&eacute;grer des styles CSS dans un fichier d’application MXML ou r&eacute;f&eacute;rencer un fichier CSS externe.
L’exemple suivant illustre du code CSS appliquant des styles &agrave; tous les composants Spark Button d’une application. Ce
code g&eacute;n&egrave;re &eacute;galement le s&eacute;lecteurmyStyle qui peut &ecirc;tre appliqu&eacute; &agrave; n’importe quel composant :
Derni&egrave;re mise &agrave; jour le 10/11/2011
194
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
@namespace s &quot;library://ns.adobe.com/flex/spark&quot;;
@namespace mx &quot;library://ns.adobe.com/flex/mx&quot;;
s|Button { fontSize: 16pt; color: Red } /* type selector */
.myStyle { color: Red } /* class selector */
Pour les styles appliqu&eacute;s &agrave; des composants (par exemple s|Button), le s&eacute;lecteur pour composants doit sp&eacute;cifier un
espace de noms. Dans cet exemple, s|Button d&eacute;finit un style qui est automatiquement appliqu&eacute; &agrave; tous les composants
Spark Button.
Utilisez la notation &agrave; points CSS pour cr&eacute;er un s&eacute;lecteur pouvant &ecirc;tre appliqu&eacute; &agrave; n’importe quel composant. Dans cet
exemple, .myStyle ne doit pas d&eacute;clarer d’espace de noms et peut &ecirc;tre appliqu&eacute; &agrave; n’importe quel composant.
Flex d&eacute;finit un cadre pr&eacute;cis pour la cr&eacute;ation et l’application de styles. Pour plus d’informations, voir Using styles in Flex.
Application de styles &agrave; une application
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, cr&eacute;ez un fichier d’application MXML contenant plusieurs composants
Spark Button et un composant CheckBox.
2 (Styles int&eacute;gr&eacute;s) En mode Source, ajoutez le code suivant &agrave; l’application :
&lt;fx:Style&gt;
@namespace s &quot;library://ns.adobe.com/flex/spark&quot;;
@namespace mx &quot;library://ns.adobe.com/flex/halo&quot;;
s|Button { fontSize: 16pt; color: Red } /* type selector */
.myStyle { fontSize: 16pt; color: Blue } /* class selector */
&lt;/fx:Style&gt;
3 (Feuilles de style externes) Cr&eacute;ez une feuille de style qui impl&eacute;mente les s&eacute;lecteurs s|Button et .myStyle &agrave;
l’Etape 1. En mode Source, r&eacute;f&eacute;rencez le fichier &agrave; partir du fichier d’application MXML :
&lt;fx:Style source=&quot;styles.css&quot;/&gt;
4 Basculez en mode Cr&eacute;ation. Vous remarquerez que le style a &eacute;t&eacute; appliqu&eacute; aux composants Spark Button.
5 S&eacute;lectionnez le composant Check Box (Case &agrave; cocher) et dans la vue Propri&eacute;t&eacute;s, s&eacute;lectionnez ensuite Styles &gt;
myStyle.
Vous remarquerez que le stylemyStyle a &eacute;t&eacute; appliqu&eacute; au composant CheckBox.
Conversion en CSS
Vous pouvez convertir les styles intralignes et les habillages de composants en styles CSS. La proc&eacute;dure de conversion
vous permet de sp&eacute;cifier si les styles doivent &ecirc;tre appliqu&eacute;s de mani&egrave;re globale ou uniquement &agrave; un composant
sp&eacute;cifique. Vous pouvez &eacute;galement d&eacute;finir un s&eacute;lecteur de style CSS pour les styles g&eacute;n&eacute;r&eacute;s.
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, s&eacute;lectionnez un composant dans la zone de cr&eacute;ation. Utilisez les styles
intralignes ou sp&eacute;cifiez une propri&eacute;t&eacute; skinClass pour le composant.
Pour plus d’informations sur la sp&eacute;cification d’une propri&eacute;t&eacute; skinClass pour un composant, voir &laquo; G&eacute;n&eacute;ration et
modification d’habillages pour les composants Spark &raquo; &agrave; la page 203.
2 Dans la vue Propri&eacute;t&eacute;s, cliquez sur Convertir en CSS.
3 Si l’espace de travail contient plusieurs projets ouverts, s&eacute;lectionnez/d&eacute;s&eacute;lectionnez les fichiers de ressources &agrave;
enregistrer dans la bo&icirc;te de dialogue d’enregistrement de ressources. Cliquez ensuite sur OK.
4 Dans la bo&icirc;te de dialogue Nouvelle r&egrave;gle de style, s&eacute;lectionnez le fichier .css ou cliquez sur Nouveau pour en g&eacute;n&eacute;rer un.
Derni&egrave;re mise &agrave; jour le 10/11/2011
195
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
5 Sp&eacute;cifiez le Type de s&eacute;lecteur en s&eacute;lectionnant l’une des options suivantes :
• Tous les composants
Le style est global et est appliqu&eacute; &agrave; tous les composants de l’application.
• Tous les composants ayant le style
Les composants sp&eacute;cifient ce s&eacute;lecteur de style en utilisant l’attribut styleName. Si vous choisissez cette option,
sp&eacute;cifiez un nom pour le s&eacute;lecteur.
• Composant sp&eacute;cifique
Le style ne s’applique qu’au composant s&eacute;lectionn&eacute;.
• Composant sp&eacute;cifique ayant le style
Le style ne s’applique qu’au composant s&eacute;lectionn&eacute; et fait r&eacute;f&eacute;rence &agrave; ce style par le nom de s&eacute;lecteur de type. Si
vous choisissez cette option, sp&eacute;cifiez un nom pour le s&eacute;lecteur de type.
6 Cliquez sur OK.
Flash Builder g&eacute;n&egrave;re ou met &agrave; jour le fichier CSS sp&eacute;cifi&eacute;. Il modifie &eacute;galement le code source de l’application de
mani&egrave;re &agrave; r&eacute;f&eacute;rencer le s&eacute;lecteur de type dans le fichier CSS.
Il supprime les r&eacute;f&eacute;rences au style intraligne ou &agrave; la propri&eacute;t&eacute; skinClass pour le composant.
Modification de la r&egrave;gle de style
Lorsque des styles CSS externes sont d&eacute;j&agrave; appliqu&eacute;s &agrave; un composant, vous pouvez passer rapidement du composant &agrave;
l’&eacute;dition de ces styles.
1 S&eacute;lectionnez un composant.
2
Dans la vue Propri&eacute;t&eacute;s, cliquez sur le bouton Modifier la r&egrave;gle de style, situ&eacute; &agrave; droite de la liste d&eacute;roulante Style,
puis s&eacute;lectionnez le style &agrave; modifier.
Le fichier CSS s’ouvre en mode Cr&eacute;ation dans l’&eacute;diteur CSS. La vue Propri&eacute;t&eacute;s vous permet d’apporter des
modifications suppl&eacute;mentaires. Vous pouvez &eacute;galement modifier le fichier CSS en mode Source.
Cr&eacute;ation de fichiers CSS
Utilisez l’assistant Nouveau fichier CSS pour cr&eacute;er des fichiers CSS pour un projet. Cet assistant cr&eacute;e un fichier vide
que vous pouvez utiliser pour d&eacute;finir vos styles CSS.
Par d&eacute;faut, Flash Builder ajoute les espaces de noms par d&eacute;faut pour les styles Spark et MX.
Pour cr&eacute;er un fichier CSS vide :
1 Dans le menu Flash Builder, s&eacute;lectionnez Fichier &gt; Nouveau &gt; Fichier CSS.
2 Sp&eacute;cifiez un dossier source.
Le dossier source peut se trouver dans le projet actuel ou dans un autre projet.
3 Sp&eacute;cifiez un package pour le fichier.
S&eacute;lectionnez-le dans les packages disponibles dans le projet. Si vous souhaitez placer le fichier dans un nouveau
package, cr&eacute;ez d’abord ce dernier. S&eacute;lectionnez Fichier &gt; Nouveau package.
4 Sp&eacute;cifiez un nom pour le fichier.
5 Cliquez sur Terminer.
Derni&egrave;re mise &agrave; jour le 10/11/2011
196
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Flash Builder utilise des mod&egrave;les qui d&eacute;finissent le contenu des nouveaux fichiers. Vous avez la possibilit&eacute; de
personnaliser ces mod&egrave;les. Voir &laquo; Personnalisation des mod&egrave;les de fichier &raquo; &agrave; la page 62.
Utilisation de l’&eacute;diteur CSS
Flash Builder comporte un &eacute;diteur CSS que vous pouvez utiliser pour cr&eacute;er et modifier des feuilles de style pour votre
application. L’&eacute;diteur CSS est disponible uniquement en mode Source.
A la cr&eacute;ation d’une feuille de style, Flash Builder fournit les d&eacute;clarations suivantes pour les espaces de noms Spark et MX :
@namespace s &quot;library://ns.adobe.com/flex/spark&quot;;
@namespace mx &quot;library://ns.adobe.com/flex/mx&quot;;
Certains composants Spark et MX partagent le m&ecirc;me nom local. Prenons l’exemple d’un composant Spark Button
(dans le package spark.components.*)et d’un composant MX Button (dans le package mx.controls.*). Pour les
distinguer l’un de l’autre, vous pouvez sp&eacute;cifier des espaces de noms s’appliquant aux types dans le fichier CSS.
Si vous n’utilisez pas de s&eacute;lecteurs de type dans vos feuilles de style, vous n’avez pas besoin de d&eacute;clarer des espaces de
noms. Pour plus d’informations (illustr&eacute;es par des exemples), voir About namespaces in CSS.
Remarque : les styles sont trait&eacute;s diff&eacute;remment pour les applications utilisant le SDK Flex 3. Si votre projet Flex repose
sur le SDK Flex 3, l’&eacute;diteur CSS applique le comportement impl&eacute;ment&eacute; avec Flex Builder 3. Pour plus d’informations sur
l’utilisation de l’&eacute;diteur CSS avec les applications reposant sur le SDK Flex 3, voir la documentation de Flex Builder 3.
Ajout d’&eacute;tats d’affichage et de transitions
Adobe&reg; Flash&reg; Builder™ permet de cr&eacute;er des applications dont l’apparence varie selon les t&acirc;ches ex&eacute;cut&eacute;es par
l’utilisateur. Par exemple, l’&eacute;tat de base de l’application peut repr&eacute;senter la page d’accueil et inclure un logo, une barre
lat&eacute;rale et un message de bienvenue. Lorsque l’utilisateur clique sur un bouton de la barre lat&eacute;rale, l’apparence (l’&eacute;tat)
de l’application change de fa&ccedil;on dynamique et la zone de contenu principale est remplac&eacute;e par un formulaire de bon
de commande sans modifier la position du logo et de la barre lat&eacute;rale.
Flex vous permet d’appliquer cette interaction aux &eacute;tats d’affichage et aux transitions. Un &eacute;tat d’affichage repr&eacute;sente
l’un des diff&eacute;rents affichages que vous d&eacute;finissez pour une application ou un composant personnalis&eacute;. Une transition
consiste en un ou plusieurs effets regroup&eacute;s pour &ecirc;tre lanc&eacute;s lorsqu’un &eacute;tat d’affichage est modifi&eacute;. Une transition vise
&agrave; am&eacute;liorer le changement visuel d’un &eacute;tat &agrave; un autre.
A propos des &eacute;tats d’affichage et des transitions
Un &eacute;tat d’affichage repr&eacute;sente l’une des diff&eacute;rentes mises en forme que vous d&eacute;finissez pour une application ou un
composant MXML unique. Vous cr&eacute;ez une application ou un composant qui passe d’un affichage &agrave; un autre en
fonction des actions de l’utilisateur. Vous pouvez utiliser les &eacute;tats d’affichage pour cr&eacute;er une interface que l’utilisateur
peut personnaliser ou qui pr&eacute;sente progressivement davantage d’informations au fur et &agrave; mesure que l’utilisateur
ex&eacute;cute des t&acirc;ches sp&eacute;cifiques.
Chaque application ou composant d&eacute;fini dans un fichier MXML affiche toujours au moins un &eacute;tat, l’&eacute;tat de base,
repr&eacute;sent&eacute; par la pr&eacute;sentation par d&eacute;faut du fichier. Vous pouvez utiliser un &eacute;tat de base en tant que r&eacute;f&eacute;rentiel de
contenu, par exemple pour les barres de navigation ou les logos partag&eacute;s par toutes les vues dans une application ou
un composant afin d’assurer la coh&eacute;rence de l’affichage.
Vous cr&eacute;ez un &eacute;tat d’affichage en modifiant la pr&eacute;sentation d’un &eacute;tat existant ou en cr&eacute;ant une nouvelle pr&eacute;sentation.
Les modifications pouvant &ecirc;tre apport&eacute;es &agrave; un &eacute;tat existant sont l’&eacute;dition, le d&eacute;placement, l’ajout ou la suppression de
composants. La nouvelle pr&eacute;sentation correspond &agrave; ce que l’utilisateur voit lorsqu’il change d’&eacute;tat.
Pour obtenir une pr&eacute;sentation conceptuelle compl&egrave;te des &eacute;tats d’affichage, y compris des exemples, voir View states.
Derni&egrave;re mise &agrave; jour le 10/11/2011
197
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
G&eacute;n&eacute;ralement, vous n’ajoutez pas de pages &agrave; une application construite dans Flex comme vous le feriez dans une
application bas&eacute;e sur HTML. Vous cr&eacute;ez un fichier d’application MXML unique puis ajoutez diff&eacute;rentes mises en
forme modifiables lorsque l’application est ex&eacute;cut&eacute;e. Tout comme vous pouvez utiliser des &eacute;tats d’affichage pour ces
mises en forme, il est &eacute;galement possible d’utiliser le conteneur de navigateur ViewStack avec d’autres conteneurs de
navigateur.
La modification des &eacute;tats d’affichage de l’application change &eacute;galement l’apparence de l’interface utilisateur. Par
d&eacute;faut, les composants semblent sauter d’un &eacute;tat d’affichage &agrave; un autre. Vous pouvez adoucir cet effet en ajoutant des
transitions.
Une transition repr&eacute;sente un ou plusieurs effets visuels appliqu&eacute;s de fa&ccedil;on s&eacute;quentielle ou simultan&eacute;e lors du
changement d’un &eacute;tat d’affichage. Par exemple, vous souhaitez redimensionner un composant pour inclure un
nouveau composant lorsque l’application passe d’un &eacute;tat &agrave; un autre. Vous pouvez d&eacute;finir une transition qui r&eacute;duit
progressivement le premier composant tandis qu’un nouveau composant appara&icirc;t petit &agrave; petit &agrave; l’&eacute;cran.
Prise en charge des &eacute;tats d’affichage Flex 3
Flash Builder prend en charge les &eacute;tats d’affichage impl&eacute;ment&eacute;s dans Flex 3. Pour les projets bas&eacute;s sur le SDK Flex 3,
l’&eacute;diteur MXML r&eacute;tablit l’impl&eacute;mentation Flex Builder 3 pour ses deux modes (Cr&eacute;ation et Source). Pour plus
d’informations sur la modification des &eacute;tats pour le SDK Flex 3, voir la documentation de Flex Builder 3.
Cr&eacute;ation d’un &eacute;tat d’affichage
Par d&eacute;faut, une application comporte un seul &eacute;tat d’affichage, que vous utilisez g&eacute;n&eacute;ralement comme &eacute;tat de base.
Utilisez la vue Etats de Flash Builder pour ajouter des &eacute;tats suppl&eacute;mentaires et modifier la pr&eacute;sentation et les
composants de chaque &eacute;tat.
1 A l’aide des outils de pr&eacute;sentation de Flash Builder, cr&eacute;ez la pr&eacute;sentation de l’&eacute;tat de base de l’application ou du
composant.
Pour plus d’informations, voir &laquo; Cr&eacute;ation d’interfaces utilisateur &raquo; &agrave; la page 182.
2 Dans la vue Etats (Fen&ecirc;tre &gt; Affichage d’une vue &gt; Flash Builder &gt; Etats), cliquez sur le bouton Nouvel &eacute;tat de la
barre d’outils.
La bo&icirc;te de dialogue Nouvel &eacute;tat appara&icirc;t.
3 Entrez le nom du nouvel &eacute;tat.
4 Indiquez si vous voulez cr&eacute;er une copie d’un &eacute;tat existant ou si vous pr&eacute;f&eacute;rez cr&eacute;er un nouvel &eacute;tat vide. Cliquez sur OK.
5 Utilisez les outils de pr&eacute;sentation de Flash Builder pour modifier l’apparence de l’&eacute;tat.
Vous pouvez &eacute;diter, d&eacute;placer, ajouter ou supprimer des composants. Au fur et &agrave; mesure de vos modifications, les
changements d&eacute;finissant le nouvel &eacute;tat sont int&eacute;gr&eacute;s au code MXML.
6 D&eacute;finissez un gestionnaire d’&eacute;v&eacute;nement permettant &agrave; l’utilisateur d’afficher le nouvel &eacute;tat.
Pour plus d’informations, voir &laquo; Changement d’&eacute;tat d’affichage au moment de l’ex&eacute;cution &raquo; &agrave; la page 198.
Derni&egrave;re mise &agrave; jour le 10/11/2011
198
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
D&eacute;finition d’un &eacute;tat, qui n’est pas un &eacute;tat de base, comme &eacute;tat d’affichage de d&eacute;part
Par d&eacute;faut, une application affiche l’&eacute;tat de base au d&eacute;marrage. Vous pouvez toutefois param&eacute;trer l’affichage d’un &eacute;tat
au d&eacute;marrage de l’application.
1 Dans la vue Etats (Fen&ecirc;tre &gt; Etats), cliquez deux fois sur l’&eacute;tat d’affichage que vous voulez utiliser au d&eacute;marrage.
2 Dans la bo&icirc;te de dialogue Modifier les propri&eacute;t&eacute;s de l’&eacute;tat qui appara&icirc;t, s&eacute;lectionnez l’option D&eacute;finir comme &eacute;tat de
d&eacute;part, puis cliquez sur OK.
D&eacute;finition de l’&eacute;tat d’affichage d’un composant
Si l’application comporte plusieurs &eacute;tats, vous pouvez d&eacute;finir l’&eacute;tat d’affichage d’un seul composant.
1 Dans la vue Cr&eacute;ation de l’&eacute;diteur MXML, s&eacute;lectionnez un composant de la pr&eacute;sentation.
2 Dans la vue Propri&eacute;t&eacute;s, utilisez le champ Etats pour s&eacute;lectionner les &eacute;tats dans lesquels le composant est visible.
Changement d’&eacute;tat d’affichage au moment de l’ex&eacute;cution
Lors de l’ex&eacute;cution de l’application, les utilisateurs doivent passer d’un &eacute;tat d’affichage &agrave; un autre. Vous pouvez d&eacute;finir
les gestionnaires d’&eacute;v&eacute;nement pour les commandes utilisateur afin de permettre aux utilisateurs de changer d’&eacute;tat au
moment de l’ex&eacute;cution.
La m&eacute;thode la plus simple consiste &agrave; affecter la propri&eacute;t&eacute; currentState &agrave; l’&eacute;v&eacute;nement de clic d’un contr&ocirc;le tel qu’un
bouton ou un lien. La propri&eacute;t&eacute; currentState s&eacute;lectionne le nom de l’&eacute;tat d’affichage que vous souhaitez consulter
lorsque l’&eacute;v&eacute;nement de clic se produit. Dans le code, sp&eacute;cifiez la propri&eacute;t&eacute; currentState de la fa&ccedil;on suivante :
click=&quot;currentState='viewstatename'&quot;
Si l’&eacute;tat d’affichage est d&eacute;fini pour un composant sp&eacute;cifique, vous devez &eacute;galement pr&eacute;ciser le nom du composant,
comme illustr&eacute; ci-dessous :
click=&quot;currentState='componentID.viewstatename'&quot;
Pour plus d’informations, voir View states.
1 V&eacute;rifiez que l’&eacute;tat initial comporte un contr&ocirc;le cliquable, par exemple un contr&ocirc;le de type Button.
En mode Cr&eacute;ation de l’&eacute;diteur MXML, s&eacute;lectionnez le contr&ocirc;le et entrez la valeur suivante dans le champ Lors d’un
clic de la vue Propri&eacute;t&eacute;s :
currentState='viewstatename'
viewstatename est le nom de l’&eacute;tat.
2 Pour passer &agrave; l’&eacute;tat de base, saisissez :
currentState=''
'' est une cha&icirc;ne vide repr&eacute;sent&eacute;e par deux guillemets simples.
3 Pour v&eacute;rifier que les &eacute;tats changent correctement dans l’application lorsque vous cliquez sur le bouton, s&eacute;lectionnez
le bouton Ex&eacute;cuter de la barre d’outils de Flash Builder.
Vous pouvez d&eacute;finir une transition afin que le changement d’&eacute;tat soit visuellement plus fluide. Pour plus
d’informations, voir &laquo; Cr&eacute;ation d’une transition &raquo; &agrave; la page 201.
Derni&egrave;re mise &agrave; jour le 10/11/2011
199
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Cr&eacute;ation de groupes d’&eacute;tats d’affichage
Flex prend en charge les groupes d’&eacute;tats d’affichage. L’attribut stateGroups de la balise &lt;States&gt; vous permet de
regrouper un ou plusieurs &eacute;tats. Par exemple, si plusieurs composants apparaissent dans le m&ecirc;me jeu d’&eacute;tats
d’affichage, vous pouvez cr&eacute;er un groupe d’&eacute;tats d’affichage les contenant tous. L’attribution &agrave; la propri&eacute;t&eacute;
currentState de l’un des &eacute;tats d’affichage du groupe conduira ensuite &agrave; l’affichage des composants. Pour plus
d’informations, illustr&eacute;es d’exemples, voir Defining view state groups.
Le mode Cr&eacute;ation de l’&eacute;diteur MXML ne permet pas de modifier les groupes d’&eacute;tats. Basculez en mode Source pour
cr&eacute;er et modifier des groupes d’&eacute;tats. Le mode Source facilite la cr&eacute;ation et l’&eacute;dition de groupes d’&eacute;tats &agrave; travers les
conseils de code et la liste d&eacute;roulante Afficher &eacute;tat.
Si vous cr&eacute;ez un groupe d’&eacute;tats d’affichage, utilisez la vue Cr&eacute;ation avec prudence. La suppression d’un &eacute;tat dans la vue
Cr&eacute;ation peut conduire par inadvertance au maintien d’une r&eacute;f&eacute;rence &agrave; un composant supprim&eacute; dans un groupe
d’&eacute;tats.
Suppression d’un &eacute;tat d’affichage
Vous pouvez supprimer les &eacute;tats d’affichage d’une application dans la vue Cr&eacute;ation de l’&eacute;diteur MXML. Les groupes
d’&eacute;tats cr&eacute;&eacute;s devront toutefois &ecirc;tre supprim&eacute;s dans la vue Source. Vous &eacute;vitez ainsi de laisser par inadvertance une
r&eacute;f&eacute;rence &agrave; un composant dans un &eacute;tat supprim&eacute;.
1 Dans la vue Cr&eacute;ation de l’&eacute;diteur MXML, s&eacute;lectionnez l’&eacute;tat d’affichage que vous voulez supprimer de la vue Etats
(Fen&ecirc;tre &gt; Etats).
2 Cliquez sur le bouton Supprimer l’&eacute;tat dans la barre d’outils de la vue Etats.
Utilisation de plusieurs &eacute;tats dans une application
Si l’application comporte plusieurs &eacute;tats, le mode Cr&eacute;ation de l’&eacute;diteur MXML vous permet de changer de vue pour
chaque &eacute;tat, en affichant uniquement les composants d&eacute;finis pour un &eacute;tat sp&eacute;cifique. Vous pouvez sp&eacute;cifier l’&eacute;tat dans
lequel chaque composant est visible.
Modification du composant d’un &eacute;tat sp&eacute;cifique
1 Dans la vue Cr&eacute;ation de l’&eacute;diteur de source, utilisez la vue Etats pour ajouter un ou plusieurs &eacute;tats suppl&eacute;mentaires
&agrave; une application.
2 Utilisez la liste d&eacute;roulante Etat pour modifier la vue en choisissant l’&eacute;tat s&eacute;lectionn&eacute;.
3 Ajoutez, d&eacute;placez, supprimez ou modifiez les composants de l’&eacute;tat.
Les modifications que vous appliquez &agrave; un &eacute;tat donn&eacute; n’apparaissent pas dans les autres &eacute;tats, sauf si vous sp&eacute;cifiez
que le composant appara&icirc;t dans plusieurs &eacute;tats.
Sp&eacute;cification de l’affichage d’un composant dans plusieurs &eacute;tats
1 Dans la vue Cr&eacute;ation de l’&eacute;diteur de source, utilisez la vue Etats pour ajouter un ou plusieurs &eacute;tats suppl&eacute;mentaires
&agrave; une application.
2 S&eacute;lectionnez chaque composant d’un &eacute;tat.
3 Dans la vue Propri&eacute;t&eacute;s, s&eacute;lectionnez les &eacute;tats dans lesquels le composant appara&icirc;t.
Vous pouvez indiquer que le composant doit appara&icirc;tre dans tous les &eacute;tats ou vous pouvez s&eacute;lectionner un ou
plusieurs &eacute;tats dans lesquels le composant doit appara&icirc;tre.
Un composant, pour lequel un &eacute;tat particulier a &eacute;t&eacute; d&eacute;fini, ne s’affichera pas dans l’&eacute;diteur lorsqu’un &eacute;tat autre que
celui qui lui a &eacute;t&eacute; attribu&eacute; est s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
200
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Soyez prudent lorsque vous modifiez des applications contenant plusieurs &eacute;tats. Les composants semblent parfois
&laquo; dispara&icirc;tre &raquo; lorsque vous modifiez l’&eacute;diteur en le basculant sur un &eacute;tat qui ne contient aucun composant visible
dans un autre &eacute;tat.
Cr&eacute;ation et &eacute;dition d’&eacute;tats d’affichage dans le code source
Le mode Source de l’&eacute;diteur MXML comporte plusieurs fonctions pour la modification du code source des &eacute;tats
d’affichage.
Pour toute application d&eacute;clarant des &eacute;tats d’affichage, l’&eacute;diteur MXML comporte la liste d&eacute;roulante Afficher &eacute;tat.
Lorsque vous s&eacute;lectionnez un &eacute;tat d’affichage dans la liste Afficher &eacute;tat, la mise en &eacute;vidence dans l’&eacute;diteur des
composants qui ne figurent pas dans cet &eacute;tat est att&eacute;nu&eacute;e.
Les propri&eacute;t&eacute;s includeIn et excludeFrom des composants MXML sp&eacute;cifient l’&eacute;tat d’affichage ou le groupe d’&eacute;tats
dans lequel un composant s’affiche. Les conseils de code de l’&eacute;diteur MXML facilitent la s&eacute;lection d’un &eacute;tat d’affichage
ou d’un groupe d’&eacute;tats pour ces propri&eacute;t&eacute;s.
Vous pouvez &eacute;galement utiliser la notation &agrave; points pour les attributs de composants. Elle vous permet de sp&eacute;cifier
l’&eacute;tat d’affichage dans lequel l’attribut est appliqu&eacute;. Pour afficher par exemple un composant Button dans deux &eacute;tats
d’affichage et obtenir la modification de l’&eacute;tiquette en fonction de l’&eacute;tat, associez l’op&eacute;rateur point &agrave; la propri&eacute;t&eacute; label.
Les conseils de code de l’&eacute;diteur MXML facilitent la s&eacute;lection de l’&eacute;tat d’affichage. Par exemple :
&lt;s:Button label.State1=&quot;Button in State 1&quot; label.State2=&quot;Same Button in State 2&quot;&gt;
Exemple illustrant l’utilisation des &eacute;tats d’affichage dans le code source
1 Cr&eacute;ez une application contenant plus d’un &eacute;tat d’affichage.
En mode Source de l’&eacute;diteur MXML, ajoutez le code suivant apr&egrave;s la balise &lt;s:Application&gt;.
&lt;s:states&gt;
&lt;s:State name=&quot;State1&quot; /&gt;
&lt;s:State name=&quot;State2&quot; /&gt;
&lt;s:State name=&quot;State3&quot; /&gt;
&lt;/s:states&gt;
Notez l’affichage de la liste d&eacute;roulante Afficher &eacute;tat, une fois que des &eacute;tats ont &eacute;t&eacute; d&eacute;finis dans l’application.
2 En mode Source, ajoutez les composants Button suivants :
&lt;s:Button includeIn=&quot;State1&quot; label=&quot;Show State 2&quot;
click=&quot;currentState='State2'&quot; /&gt;
&lt;s:Button includeIn=&quot;State2&quot; label=&quot;Show State 3&quot;
click=&quot;currentState='State3'&quot; /&gt;
&lt;s:Button includeIn=&quot;State3&quot; label=&quot;Show State 1&quot;
click=&quot;currentState='State1'&quot; /&gt;
&lt;s:Button
label.State1=&quot;All States: State 1 Label&quot;
label.State2=&quot;All States: State 2 Label&quot;
label.State3=&quot;All States: State 3 Label&quot;
x=&quot;0&quot; y=&quot;30&quot;/&gt;
Par d&eacute;faut, l’&eacute;diteur affiche le code de tous les &eacute;tats.
Remarque : les gestionnaires d’&eacute;v&eacute;nement click des trois premiers boutons font d&eacute;filer les &eacute;tats d’affichage.
3 Restez en mode Source et s&eacute;lectionnez diff&eacute;rents &eacute;tats d’affichage dans la liste Afficher &eacute;tat.
L’&eacute;diteur affiche en gris clair le code des composants qui ne sont pas visibles dans l’&eacute;tat s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
201
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
L’int&eacute;gralit&eacute; du code peut &ecirc;tre modifi&eacute;e. L’att&eacute;nuation de la mise en &eacute;vidence des composants n’apparaissant pas
dans l’&eacute;tat d’affichage s&eacute;lectionn&eacute; facilite toutefois la gestion du code de chaque &eacute;tat d’affichage.
4 Basculez en mode Cr&eacute;ation de l’&eacute;diteur MXML.
S&eacute;lectionnez diff&eacute;rents &eacute;tats d’affichage dans la liste d&eacute;roulante Etat ou dans la vue Etats. L’&eacute;diteur affiche les
composants en fonction des propri&eacute;t&eacute;s d&eacute;finies pour l’&eacute;tat d’affichage s&eacute;lectionn&eacute;.
5 Ex&eacute;cutez l’application. Cliquez sur le bouton sup&eacute;rieur pour faire d&eacute;filer les &eacute;tats d’affichage.
Pour plus d’informations sur la cr&eacute;ation et la modification des &eacute;tats dans le code source, voir Create and apply view
states.
Cr&eacute;ation d’une transition
Lorsque vous modifiez les &eacute;tats d’affichage d’une application, les composants semblent sauter d’un &eacute;tat d’affichage &agrave;
un autre. Vous pouvez adoucir cet effet en ajoutant des transitions. Une transition consiste en un ou plusieurs effets
regroup&eacute;s pour &ecirc;tre lanc&eacute;s lorsqu’un &eacute;tat d’affichage est modifi&eacute;. Par exemple, vous pouvez d&eacute;finir une transition
utilisant un effet Resize de redimensionnement afin de r&eacute;duire progressivement un composant dans l’&eacute;tat d’affichage
d’origine et un effet Fade de fondu pour afficher progressivement un composant dans le nouvel &eacute;tat d’affichage.
1 Assurez-vous de cr&eacute;er au moins un &eacute;tat d’affichage en plus de l’&eacute;tat de base.
2 Dans la vue Source de l’&eacute;diteur MXML, d&eacute;finissez un objet Transition en ajoutant une balise &lt;s:transitions&gt;,
puis une balise enfant &lt;s:Transition&gt;, comme l’illustre l’exemple suivant :
&lt;s:transitions&gt;
&lt;mx:Transition id=&quot;myTransition&quot;&gt;
&lt;/mx:Transition&gt;
&lt;/s:transitions&gt;
Pour d&eacute;finir plusieurs transitions, ins&eacute;rez d’autres balises enfant &lt;s:Transition&gt; dans la balise
&lt;s:transitions&gt;.
3 Dans la balise &lt;s:Transition&gt;, d&eacute;finissez la modification de l’&eacute;tat d’affichage qui d&eacute;clenche la transition en
d&eacute;finissant les propri&eacute;t&eacute;s fromState et toState, comme l’illustre l’exemple suivant (en gras) :
&lt;s:transitions&gt;
&lt;mx:Transition id=&quot;myTransition&quot; fromState=&quot;*&quot; toState=&quot;checkout&quot;&gt;
&lt;/mx:Transition&gt;
&lt;/s:transitions&gt;
Dans l’exemple, vous sp&eacute;cifiez que vous souhaitez appliquer la transition lorsque l’application change d’un &eacute;tat
d’affichage (fromState=&quot;*&quot;) &agrave; l’&eacute;tat d’affichage intitul&eacute; checkout (toState=&quot;checkout&quot;). La valeur &quot;*&quot; est un
caract&egrave;re g&eacute;n&eacute;rique repr&eacute;sentant n’importe quel &eacute;tat d’affichage.
4 Dans la balise &lt;mx:Transition&gt;, indiquez si vous souhaitez que les effets s’ex&eacute;cutent de fa&ccedil;on parall&egrave;le ou
s&eacute;quentielle en ajoutant une balise enfant &lt;mx:Parallel&gt; ou &lt;mx:Sequence&gt;, comme l’illustre l’exemple suivant
(en gras) :
&lt;mx:Transition id=&quot;myTransition&quot; fromState=&quot;*&quot; toState=&quot;checkout&quot;&gt;
&lt;mx:Parallel&gt;
&lt;/mx:Parallel&gt;
&lt;/mx:Transition&gt;
Si vous souhaitez appliquer simultan&eacute;ment les effets, utilisez la balise &lt;mx:Parallel&gt;. Si vous souhaitez les
appliquer les uns apr&egrave;s les autres, utilisez la balise &lt;mx:Sequence&gt;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
202
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
5 Dans la balise &lt;mx:Parallel&gt; ou &lt;mx:Sequence&gt;, sp&eacute;cifiez le ou les composants cible de la transition en
d&eacute;finissant la propri&eacute;t&eacute; target (pour un composant cible) ou targets (pour plusieurs composants cible) selon
l’ID du ou des composants cible, comme l’illustre l’exemple suivant :
&lt;mx:Parallel targets=&quot;{[myVGroup1,myVGroup2,myVGroup3]}&quot;&gt;
&lt;/mx:Parallel&gt;
Dans cet exemple, trois conteneurs VGroup sont cibl&eacute;s. La propri&eacute;t&eacute; targets s&eacute;lectionne un tableau de plusieurs ID.
6 Dans la balise &lt;mx:Parallel&gt; ou &lt;mx:Sequence&gt;, sp&eacute;cifiez les effets &agrave; appliquer lors d’un changement d’&eacute;tat
d’affichage en ajoutant des balises enfant d’effet, comme l’illustre l’exemple suivant (en gras) :
&lt;mx:Parallel targets=&quot;{[myVBox1,myVBox2,myVBox3]}&quot;&gt;
&lt;mx:Move duration=&quot;400&quot;/&gt;
&lt;mx:Resize duration=&quot;400&quot;/&gt;
&lt;/mx:Parallel&gt;
Pour conna&icirc;tre la liste des effets possibles et savoir comment d&eacute;finir leurs propri&eacute;t&eacute;s, voir Introduction to effects.
7 Pour tester la transition, cliquez sur le bouton Ex&eacute;cuter de la barre d’outils de Flash Builder, puis changez d’&eacute;tat
apr&egrave;s le lancement de l’application.
Ajout d’interactivit&eacute; &agrave; l’aide d’effets
Un effet est la modification visible ou audible du composant cible se produisant sur une p&eacute;riode exprim&eacute;e en
millisecondes. Le fondu, le redimensionnement ou le d&eacute;placement d’un composant constituent des exemples d’effets.
Les effets sont g&eacute;n&eacute;r&eacute;s en r&eacute;ponse &agrave; un &eacute;v&eacute;nement, alors que l’&eacute;v&eacute;nement est souvent d&eacute;clench&eacute; par une action de
l’utilisateur, par exemple un clic sur un bouton. Les effets peuvent toutefois &ecirc;tre programm&eacute;s ou d&eacute;clench&eacute;s en r&eacute;ponse
&agrave; des &eacute;v&eacute;nements qui ne sont pas d&eacute;clench&eacute;s par l’utilisateur.
Vous pouvez par exemple cr&eacute;er un effet faisant rebondir l&eacute;g&egrave;rement un composant TextInput auquel l’utilisateur
acc&egrave;de par tabulation. Vous pouvez &eacute;galement appliquer un effet de fondu en sortie &agrave; un composant Label sur lequel
l’utilisateur fait glisser le curseur de la souris.
Dans Flash Builder, les effets peuvent &ecirc;tre d&eacute;finis en tant que propri&eacute;t&eacute;s des composants MXML. Acc&eacute;dez &agrave; la vue
Source de l’&eacute;diteur MXML pour impl&eacute;menter l’effet.
L’impl&eacute;mentation des effets varie suivant qu’il s’agit de composants Spark ou MX. Pour plus d’informations sur la
cr&eacute;ation d’effets en code MXML et ActionScript, voir Introduction to effects.
Cr&eacute;ation d’un effet pour un composant
Vous d&eacute;finissez les effets g&eacute;n&eacute;ralement en mode Source de l’&eacute;diteur MXML. Ils sont souvent invoqu&eacute;s &agrave; partir du
gestionnaire d’&eacute;v&eacute;nement d’un composant. Vous pouvez par exemple utiliser le gestionnaire d’&eacute;v&eacute;nement click pour
qu’un composant Button invoque un effet. Voir Applying effects.
Dans Flash Builder cependant, vous pouvez d&eacute;finir un effet pour une propri&eacute;t&eacute; d’un composant MXML.
1 Acc&eacute;dez au mode Cr&eacute;ation de l’&eacute;diteur MXML, puis cliquez sur un composant dans la zone de cr&eacute;ation.
2 D&eacute;finissez la propri&eacute;t&eacute; d’effet pour les composants Spark :
a Dans la vue Propri&eacute;t&eacute;s, s&eacute;lectionnez l’ic&ocirc;ne Vue par cat&eacute;gories.
b Dans la cat&eacute;gorie Effets, s&eacute;lectionnez une propri&eacute;t&eacute; et sp&eacute;cifiez un effet.
Vous pouvez par exemple sp&eacute;cifier l’effet Fade pour la propri&eacute;t&eacute; rollOverEffect d’un composant Button. Pour
obtenir une liste des effets disponibles, voir Available effects.
3 Enregistrez le fichier et ex&eacute;cutez-le pour visionner l’effet.
Derni&egrave;re mise &agrave; jour le 10/11/2011
203
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Modification de l’interface utilisateur &agrave; l’aide des habillages
Les classes d’habillage modifient l’aspect des contr&ocirc;les dans une interface utilisateur. La cr&eacute;ation, la modification et
l’importation d’habillages varient en fonction des composants (Spark ou MX).
A propos des habillages Spark
Les habillages Spark contr&ocirc;lent tous les &eacute;l&eacute;ments visuels d’un composant, dont sa pr&eacute;sentation. Ils peuvent contenir
plusieurs &eacute;l&eacute;ments, tels que des &eacute;l&eacute;ments graphiques, du texte, des images et des transitions. Les habillages Spark
prennent en charge les &eacute;tats. Vous pouvez utiliser un habillage pour d&eacute;finir l’aspect d’un composant pour chacun de
ses &eacute;tats. Les habillages sp&eacute;cifient g&eacute;n&eacute;ralement une taille minimale pour le composant. Pour plus d’informations sur
l’imp&eacute;mentation d’habillages Spark dans Flex, voir A propos des habillages Spark.
Flash Builder vous permet de g&eacute;n&eacute;rer et de modifier des habillages pour les composants Spark. En g&eacute;n&eacute;rant un
habillage, Flash Builder cr&eacute;e une classe d’habillage en MXML. Acc&eacute;dez &agrave; l’&eacute;diteur MXML pour modifier l’aspect d&eacute;fini
par l’habillage. Certaines modifications peuvent &ecirc;tre effectu&eacute;es en mode Cr&eacute;ation ; d’autres n&eacute;cessiteront le passage en
mode Source. Voir &laquo; G&eacute;n&eacute;ration et modification d’habillages pour les composants Spark &raquo; &agrave; la page 203.
A propos des habillages pour les composants MX
Les habillages des composants MX sont soit des graphiques bitmap, soit des graphiques vectoriels. Le graphique
bitmap (ou habillage graphique) se compose de pixels individuels formant une image. Le graphique vectoriel (ou
habillage par programmation) se compose d’une s&eacute;rie de d&eacute;finitions de ligne d&eacute;finissant les points de d&eacute;but et de fin,
l’&eacute;paisseur, la couleur et d’autres caract&eacute;ristiques de la ligne requises par Adobe&reg; Flash&reg; Player pour la dessiner. Pour
plus d’informations sur l’impl&eacute;mentation des habillages pour les composants MX dans Flex, voir About MX
component skinning.
Flash Builder vous permet d’importer des illustrations d’habillage pour des composants MX. Voir &laquo; Importation
d’illustrations d’habillage pour les composants MX &raquo; &agrave; la page 207.
Le package mx.skins.spark d&eacute;finit les habillages Spark pour les composants MX.
G&eacute;n&eacute;ration et modification d’habillages pour les composants Spark
Flash Builder vous permet de g&eacute;n&eacute;rer et de modifier des habillages pour les composants Spark. Lorsque vous g&eacute;n&eacute;rez
un habillage, Flash Builder utilise un habillage du th&egrave;me pour un projet. Le th&egrave;me par d&eacute;faut d’un projet est Spark.
Vous pouvez modifier le th&egrave;me d’un projet dans la vue Aspect. Voir &laquo; Application des th&egrave;mes &raquo; &agrave; la page 187.
Lors de la g&eacute;n&eacute;ration d’un habillage pour un composant, Flash Builder cr&eacute;e un fichier MXML qui impl&eacute;mente la classe
Skin pour le composant. Vous pouvez sp&eacute;cifier si vous souhaitez g&eacute;n&eacute;rer la classe Skin en tant que copie d’un habillage
existant ou g&eacute;n&eacute;rer un fichier de classe Skin vide.
Acc&eacute;dez aux modes Cr&eacute;ation et Source de l’&eacute;diteur MXML pour modifier l’habillage. En mode Cr&eacute;ation, s&eacute;lectionnez
les &eacute;l&eacute;ments d’habillage &agrave; modifier dans la vue Structure. Parcourez les &eacute;tats d’un composant dans la vue Etats.
Certaines parties d’un habillage ne sont pas modifiables en mode Cr&eacute;ation. Utilisez le mode Source pour modifier des
parties d’habillage qui ne sont pas disponibles en mode Cr&eacute;ation.
Certains composants contiennent des sous-composants. Par exemple, un composant HSlider contient des composants
Button qui d&eacute;finissent le curseur et le rail de HSlider. Les sous-composants sont habillables uniquement en mode
Source.
Etats des composants, parties d’habillage et composants h&ocirc;te
Les habillages d&eacute;finissent l’aspect de chaque &eacute;tat d’un composant. Un bouton Spark poss&egrave;de par exemple quatre &eacute;tats :
up, over, down et disabled. La g&eacute;n&eacute;ration d’un habillage pour un bouton Spark permet de sp&eacute;cifier l’aspect de chacun
de ces &eacute;tats.
Derni&egrave;re mise &agrave; jour le 10/11/2011
204
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Chaque composant poss&egrave;de des parties auxquelles il est possible d’appliquer un style. Par exemple, pour un composant
Button, vous pouvez choisir la couleur de remplissage, les attributs de texte de l’&eacute;tiquette et les composants Rect
formant la bordure du composant.
Lors de la cr&eacute;ation d’habillages pour un composant, Flash Builder permet de sp&eacute;cifier un composant h&ocirc;te sur lequel
l’habillage g&eacute;n&eacute;r&eacute; est bas&eacute;. Par d&eacute;faut, le composant h&ocirc;te est la classe de base du composant auquel l’habillage est
appliqu&eacute;. Cependant, vous pouvez s&eacute;lectionner un composant h&ocirc;te diff&eacute;rent.
Remarque : la sp&eacute;cification d’un composant h&ocirc;te pour une classe d’habillage est requise lors de la g&eacute;n&eacute;ration de classes
d’habillage &agrave; l’aide de Flash Builder. Cependant, la cr&eacute;ation de classes d’habillage directement dans le code source ne
n&eacute;cessite pas de composant h&ocirc;te.
Contrat d’habillage entre un habillage et son composant h&ocirc;te
Le contrat d’habillage entre une classe d’habillage et une classe de composants d&eacute;finit les r&egrave;gles &agrave; suivre par chaque
membre afin de pouvoir communiquer entre eux.
La classe d’habillage doit d&eacute;clarer des &eacute;tats d’habillage et d&eacute;finir l’apparence des parties d’habillage. De plus, les classes
d’habillage sp&eacute;cifient habituellement le composant h&ocirc;te et, parfois, effectuent une liaison aux donn&eacute;es d&eacute;finies sur le
composant h&ocirc;te.
La classe de composants d&eacute;clare la classe d’habillage qu’elle utilise. Elle doit &eacute;galement identifier des &eacute;tats d’habillage
et des parties d’habillage &agrave; l’aide de m&eacute;tadonn&eacute;es. Si la classe d’habillage &eacute;tablit une liaison aux donn&eacute;es du composant
h&ocirc;te, ce dernier doit d&eacute;finir ces donn&eacute;es.
Le tableau suivant d&eacute;taille les r&egrave;gles du contrat d’habillage.
Classe d’habillage
Composant h&ocirc;te
Obligatoire
?
Composant h&ocirc;te
&lt;fx:Metadata&gt;
[HostComponent(&quot;spark.components.Button&quot;)]
&lt;/fx:Metadata&gt;
Sans objet
Non
Etats d’habillage
&lt;s:states&gt;
&lt;s:State name=&quot;up&quot;/&gt;
&lt;/s:states&gt;
[SkinStates(&quot;up&quot;)];
public class Button {
...
}
Oui
[SkinPart(required=&quot;false&quot;)]
public var:upButton Button;
Oui
[Bindable]
public var title:String;
Non
Parties d’habillage &lt;s:Button id=&quot;upButton&quot;/&gt;
Donn&eacute;es
text=&quot;{hostComponent.title}&quot;
D&eacute;claration Skin
Dans Flash Builder, une d&eacute;claration Skin est le fichier qui impl&eacute;mente l’habillage pour un composant. Flex d&eacute;finit une
d&eacute;claration Skin pour chaque composant visuel. Lors de la g&eacute;n&eacute;ration d’un nouvel habillage pour un composant, Flash
Builder g&eacute;n&egrave;re la d&eacute;claration Skin.
Vous pouvez afficher la d&eacute;claration Skin de composants que vous avez s&eacute;lectionn&eacute;s :
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, s&eacute;lectionnez un composant Spark dans la zone de cr&eacute;ation.
2 Dans le menu contextuel du composant, s&eacute;lectionnez Ouvrir une d&eacute;claration d’habillage.
La classe impl&eacute;mentant l’habillage s’ouvre dans le mode Source de l’&eacute;diteur.
S’il s’agit d’une classe que vous avez cr&eacute;&eacute;e, vous pouvez modifier le fichier.
Derni&egrave;re mise &agrave; jour le 10/11/2011
205
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Vous pouvez &eacute;galement proc&eacute;der comme suit pour ouvrir un fichier de d&eacute;claration Skin :
•
Une fois le composant s&eacute;lectionn&eacute;, cliquez sur l’ic&ocirc;ne en regard du champ Habillage dans la section Style de la
vue Propri&eacute;t&eacute;s.
• S&eacute;lectionnez un composant Spark. En mode Source, s&eacute;lectionnez ensuite Naviguer &gt; Ouvrir la d&eacute;claration
d’habillage dans le menu Flash Builder.
G&eacute;n&eacute;ration et modification d’un habillage pour un composant Spark Button (mode Cr&eacute;ation)
Cet exemple illustre la g&eacute;n&eacute;ration d’une classe d’habillage pour un composant Spark Button, puis sa modification en
faisant appel &agrave; diff&eacute;rentes vues de Flash Builder. Il se base sur un projet Flex utilisant le th&egrave;me Spark par d&eacute;faut.
1 Cr&eacute;ez un fichier d’application. En mode Cr&eacute;ation de l’&eacute;diteur, ajoutez un composant Spark Button.
2 Dans le menu contextuel du composant Button, s&eacute;lectionnez Cr&eacute;er un habillage.
La bo&icirc;te de dialogue pour la cr&eacute;ation d’un habillage MXML s’ouvre.
Vous pouvez &eacute;galement proc&eacute;der comme suit pour acc&eacute;der &agrave; cette bo&icirc;te de dialogue :
•
Dans la section Style de la vue Propri&eacute;t&eacute;s, s&eacute;lectionnez l’ic&ocirc;ne en regard du champ Habillage.
• Dans le menu Flash Builder, s&eacute;lectionnez Nouveau &gt; Habillage MXML.
• En mode Cr&eacute;ation de l’&eacute;diteur, s&eacute;lectionnez Cr&eacute;ation &gt; Cr&eacute;er un habillage.
3 Dans la bo&icirc;te de dialogue de cr&eacute;ation d’un habillage MXML, sp&eacute;cifiez les &eacute;l&eacute;ments suivants :
• Dossier source et package de la d&eacute;claration Skin g&eacute;n&eacute;r&eacute;e
• Nom
Nom de la classe Skin cr&eacute;&eacute;e.
• Composant h&ocirc;te
Pour modifier le composant par d&eacute;faut, cliquez sur Parcourir et s&eacute;lectionnez un composant h&ocirc;te.
• (Recommand&eacute;) S&eacute;lectionnez Cr&eacute;er en tant que copie de et ne supprimez pas le code de style ActionScript.
Si vous &ecirc;tes novice en mati&egrave;re d’habillage, utilisez une copie pour vous lancer dans la cr&eacute;ation d’une classe Skin.
Modifiez le code de style ActionScript.
• (Utilisateurs avanc&eacute;s) Si vous savez comment cr&eacute;er des classes Skin, proc&eacute;dez de l’une des mani&egrave;res suivantes :
Supprimez le code de style ActionScript ou ne cr&eacute;ez pas de copie d’une classe existante.
Si vous ne cr&eacute;ez pas de copie d’une classe existante, Flash Builder g&eacute;n&egrave;re un fichier de classe d’habillage vide
comportant des commentaires pour vous guider.
Les &eacute;tapes restantes de cette proc&eacute;dure supposent que vous avez suivi l’option recommand&eacute;e pour la g&eacute;n&eacute;ration
d’une classe Skin.
4 Cliquez sur Terminer.
Flash Builder g&eacute;n&egrave;re un fichier de classe Skin et l’ouvre en mode Cr&eacute;ation dans l’&eacute;diteur MXML.
Le composant Button est s&eacute;lectionn&eacute;.
L’&eacute;tat Up du composant Button est s&eacute;lectionn&eacute; dans la vue Etats.
5 Pour chaque &eacute;tat du composant Button, modifiez les styles Texte, Arri&egrave;re-plan du contenu et Couleur.
Pour ce faire, utilisez les outils de modification de la section Style de la vue Propri&eacute;t&eacute;s.
6 Ouvrez la vue Structure.
Derni&egrave;re mise &agrave; jour le 10/11/2011
206
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Notez que le nœud de niveau sup&eacute;rieur (SparkSkin) est s&eacute;lectionn&eacute;.
7 Dans la vue Structure, s&eacute;lectionnez Rect shadow pour d&eacute;finir les styles de l’ombre du composant Button.
Notez que les outils de la section Style ne sont pas disponibles.
8 Passez en mode Source de l’&eacute;diteur.
Flash Builder met en &eacute;vidence le composant Rect qui d&eacute;finit l’ombre du composant Button. Modifiez l’ombre du
composant Button.
9 Enregistrez le fichier de classe Skin et le fichier d’application.
Le mode Cr&eacute;ation de l’&eacute;diteur MXML vous permet d’afficher l’habillage du bouton, en supposant que vous avez
suivi l’option recommand&eacute;e &agrave; l’&eacute;tape 3. Si les styles ne s’affichent pas, s&eacute;lectionnez l’ic&ocirc;ne Actualiser de la zone de
cr&eacute;ation.
Notez que le fichier d’application a ajout&eacute; une r&eacute;f&eacute;rence &agrave; la classe Skin que vous avez cr&eacute;&eacute;e.
10 Ex&eacute;cutez l’application pour voir comment l’habillage change en fonction des &eacute;tats Up, Over et Down du composant
Button.
Cr&eacute;ation et modification d’habillages pour les composants Spark (mode Source)
Vous pouvez ouvrir la bo&icirc;te de dialogue de cr&eacute;ation d’un habillage MXML directement en mode Source de l’&eacute;diteur.
Par exemple, pour cr&eacute;er une classe skinClass pour un composant Spark Button, proc&eacute;dez comme suit.
1 En mode Source de l’&eacute;diteur, placez votre curseur dans une balise &lt;s:Button&gt; et saisissez ce qui suit :
&lt;s:Button skinClass=&quot;
Apr&egrave;s avoir saisi le premier guillemet pour le nom de la classe skinClass, un menu contextuel s’affiche.
2 Avec Create Skin en surbrillance dans les conseils de code, la touche Entr&eacute;e ouvre la bo&icirc;te de dialogue de cr&eacute;ation
d’un habillage MXML.
Cette bo&icirc;te de dialogue est identique &agrave; celle qui s’ouvre en mode Cr&eacute;ation.
Pour cr&eacute;er une classe skinClass, voir les instructions dans &laquo; G&eacute;n&eacute;ration et modification d’un habillage pour un
composant Spark Button (mode Cr&eacute;ation) &raquo; &agrave; la page 205.
3 Cliquez sur Terminer.
Flash Builder g&eacute;n&egrave;re une nouvelle classe skinClass en fonction des s&eacute;lections effectu&eacute;es dans la bo&icirc;te de dialogue de
cr&eacute;ation d’un habillage MXML. L’&eacute;diteur passe en mode Source pour la nouvelle classe g&eacute;n&eacute;r&eacute;e.
4 Modifiez la classe skinClass.
Enregistrez le fichier de classe et le fichier d’application.
Remarque : vous pouvez convertir la classe d’habillage g&eacute;n&eacute;r&eacute;e au format CSS pour afficher les styles appliqu&eacute;s. Voir
&laquo; Conversion d’un habillage en style CSS &raquo; &agrave; la page 206.
Conversion d’un habillage en style CSS
Flash Builder vous permet de convertir l’habillage d’un composant en style CSS. L’avantage d’une telle conversion
r&eacute;side dans la possibilit&eacute; d’utiliser le style en tant que s&eacute;lecteur de type pour tous les composants de cette classe. Sinon,
d&eacute;finissez la propri&eacute;t&eacute; skinClass pour chaque composant.
La proc&eacute;dure suivante illustre la conversion de l’habillage d’un composant Spark Button en style CSS.
1 G&eacute;n&eacute;rez et &eacute;ditez l’habillage d’un composant Button.
2 En mode Cr&eacute;ation, s&eacute;lectionnez le composant. Dans la zone Style de la vue Propri&eacute;t&eacute;s, cliquez sur Convertir en CSS.
Derni&egrave;re mise &agrave; jour le 10/11/2011
207
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
3 Dans la bo&icirc;te de dialogue Nouvelle r&egrave;gle de style, s&eacute;lectionnez un fichier CSS pour le style ou cr&eacute;ez-en un.
En l’absence de fichier CSS dans le projet que vous souhaitez utiliser, cliquez sur Nouveau pour en cr&eacute;er un.
4 Sp&eacute;cifiez le Type de s&eacute;lecteur en s&eacute;lectionnant l’une des options suivantes :
• Tous les composants
Le style est appliqu&eacute; &agrave; tous les composants de l’application.
• Tous les composants ayant le style
Les composants sp&eacute;cifient ce s&eacute;lecteur de style d’apr&egrave;s son nom. Si vous choisissez cette option, sp&eacute;cifiez un nom
pour le s&eacute;lecteur de type.
• Composant sp&eacute;cifique
Le style ne s’applique qu’au composant s&eacute;lectionn&eacute;.
• Composant sp&eacute;cifique ayant le style
Le style ne s’applique qu’au composant s&eacute;lectionn&eacute; et fait r&eacute;f&eacute;rence &agrave; ce style par le nom de s&eacute;lecteur de type. Si
vous choisissez cette option, sp&eacute;cifiez un nom pour le s&eacute;lecteur de type.
5 Apr&egrave;s avoir sp&eacute;cifi&eacute; un Type de s&eacute;lecteur, cliquez sur OK.
Flash Builder g&eacute;n&egrave;re ou met &agrave; jour le fichier CSS sp&eacute;cifi&eacute;. Il modifie &eacute;galement le code source de l’application de
mani&egrave;re &agrave; r&eacute;f&eacute;rencer le s&eacute;lecteur de type dans le fichier CSS.
Il supprime les r&eacute;f&eacute;rences &agrave; la propri&eacute;t&eacute; skinClass pour le composant.
Importation d’illustrations d’habillage pour les composants MX
L’assistant Importation d’illustrations d’habillage permet l’importation d’illustrations graphiques vectorielles ainsi que
d’illustrations bitmap &agrave; partir des versions CS5 de Flash Professional, Fireworks, Illustrator et Photoshop. (pour les
illustrations bitmap, tout fichier .PNG, .JPG ou .GIF peut &ecirc;tre utilis&eacute;). L’illustration peut alors servir d’habillage pour
les composants Flex.
Remarque : Adobe propose un ensemble de mod&egrave;les d’habillage destin&eacute;s &agrave; faciliter la cr&eacute;ation d’habillages pour les
composants Flex int&eacute;gr&eacute;s. Ces mod&egrave;les, utilis&eacute;s avec Flash, Fireworks, Illustrator ou Photoshop, permettent de cr&eacute;er
l’illustration. Gr&acirc;ce &agrave; Flash, vous pouvez aussi cr&eacute;er des composants Flex personnalis&eacute;s totalement fonctionnels. Pour plus
d’informations, voir les articles sous Importation de ressources Flash Professional dans Flex.
1 S&eacute;lectionnez Fichier &gt; Importer &gt; Flash Builder &gt; Illustrations d’habillage.
2 Dans la bo&icirc;te de dialogue Importation d’illustrations d’habillage :
• Choisissez un dossier de bitmaps ou un fichier SWC ou SWF &agrave; partir duquel importer des habillages ou cliquez
sur Parcourir pour en localiser un. Les types de fichiers pris en charge sont les suivants :
• Les fichiers SWF AS3 et SWC AS3 cr&eacute;&eacute;s dans Adobe Flash Professional CS5
• Les fichiers de graphiques vectoriels cr&eacute;&eacute;s dans Adobe Illustrator&reg; et export&eacute;s en tant que fichiers SWF pour
Flash Player 8
• Les fichiers graphiques bitmap aux formats PNG, GIF et JPG
• S&eacute;lectionnez un dossier dans lequel importer les habillages. Il doit s’agir du dossier source d’un projet Flex (vous
pouvez &eacute;galement indiquer un sous-dossier du dossier source). Le dossier du projet Flex ouvert est s&eacute;lectionn&eacute;
par d&eacute;faut.
• Dans le champ Copier les illustrations dans le sous-dossier, le nom du dossier par d&eacute;faut est d&eacute;riv&eacute; du dossier
ou des ressources en cours d’importation. Cliquez sur Parcourir pour choisir un emplacement diff&eacute;rent.
Derni&egrave;re mise &agrave; jour le 10/11/2011
208
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
• Dans le champ Cr&eacute;er des r&egrave;gles de style d’habillage dans, pr&eacute;cisez un nom pour le fichier CSS qui contient les
r&egrave;gles de style. Le nom par d&eacute;faut est d&eacute;riv&eacute; du nom du dossier de l’illustration ou du fichier FLA en cours
d’importation.
• Cochez la case Supprimer toutes les r&egrave;gles existantes dans le fichier si vous voulez que le fichier CSS sp&eacute;cifi&eacute; soit
remplac&eacute; lors de l’importation (plut&ocirc;t que d’importer les habillages et de conserver d’autres d&eacute;finitions
existantes dans le fichier CSS). Par d&eacute;faut, la case est d&eacute;s&eacute;lectionn&eacute;e. Si le fichier CSS n’existe pas, elle est
d&eacute;sactiv&eacute;e.
• Dans le champ Appliquer les styles &agrave; l’application, la valeur par d&eacute;faut est le fichier s&eacute;lectionn&eacute; dans le
Navigateur Flex ou dans la vue d’&eacute;diteur active, ou le fichier de l’application principale du projet.
• Cliquez sur Suivant.
3 Dans la bo&icirc;te de dialogue Importation d’illustrations d’habillage suivante, s&eacute;lectionnez les habillages &agrave; importer et
pr&eacute;cisez quel type de style CSS et propri&eacute;t&eacute; de partie d’habillage seront utilis&eacute;s. Vous pouvez cocher les &eacute;l&eacute;ments un
par un ou cliquer sur S&eacute;lectionner tout ou D&eacute;s&eacute;lectionner tout.
• Si les &eacute;l&eacute;ments n’ont pas de style valide ou de nom de propri&eacute;t&eacute; de partie d’habillage, ils ne sont pas coch&eacute;s par
d&eacute;faut. Les exemples suivants illustrent la convention d’attribution de noms dans Flash Builder :
• Button_upSkin
• Button_glow_downSkin (correspond &agrave; la propri&eacute;t&eacute; downSkin de la r&egrave;gle de style Button.glow)
• TabBar-tab_upSkin (la propri&eacute;t&eacute; upSkin correspond &agrave; la propri&eacute;t&eacute; tabStyleName de la r&egrave;gle de style TabBar)
• MyCustomComponent_borderSkin
Pour les composants personnalis&eacute;s, l’&eacute;l&eacute;ment est coch&eacute; si le composant a &eacute;t&eacute; d&eacute;fini dans le projet vers lequel vous
effectuez l’importation.
• Choisissez au besoin un style et une partie d’habillage dans les listes d&eacute;roulantes de chaque colonne.
• Cliquez sur Terminer.
Un fichier CSS est cr&eacute;&eacute; et affich&eacute; dans la vue Source. Le fichier CSS est joint &agrave; l’application sp&eacute;cifi&eacute;e dans
l’assistant. Si vous importez un fichier SWC, il est ajout&eacute; automatiquement au chemin d’acc&egrave;s &agrave; la biblioth&egrave;que
du projet.
G&eacute;n&eacute;ration de rendus d’&eacute;l&eacute;ment personnalis&eacute;s
Vous pouvez g&eacute;n&eacute;rer des rendus d’&eacute;l&eacute;ment destin&eacute;s &agrave; des contr&ocirc;les bas&eacute;s sur une liste pour des applications
d’ordinateur et mobiles.
Pour les applications d’ordinateur, vous pouvez g&eacute;n&eacute;rer des rendus d’&eacute;l&eacute;ment personnalis&eacute;s destin&eacute;s &agrave; des contr&ocirc;les
bas&eacute;s sur une liste Spark, tels que List et ComboBox. Vous pouvez &eacute;galement utiliser les rendus d’&eacute;l&eacute;ment Spark avec
certains contr&ocirc;les MX, tels que MX DataGrid et MX Tree.
Pour les applications mobiles, vous pouvez g&eacute;n&eacute;rer des rendus d’&eacute;l&eacute;ment personnalis&eacute;s destin&eacute;s &agrave; des contr&ocirc;les bas&eacute;s
sur une liste mobile.
Utilisez des rendus d’&eacute;l&eacute;ment personnalis&eacute;s pour contr&ocirc;ler l’affichage d’un &eacute;l&eacute;ment de donn&eacute;es dans un conteneur
DataGroup, SkinnableDataContainer ou dans une sous-classe de ces conteneurs. L’aspect d&eacute;fini par un rendu
d’&eacute;l&eacute;ment peut inclure la police, la couleur d’arri&egrave;re-plan, la bordure et tout autre aspect visuel de l’&eacute;l&eacute;ment de
donn&eacute;es. Un rendu d’&eacute;l&eacute;ment peut &eacute;galement d&eacute;finir l’aspect d’un &eacute;l&eacute;ment de donn&eacute;es au moment o&ugrave; l’utilisateur
interagit avec celui-ci. Par exemple, le rendu d’&eacute;l&eacute;ment peut afficher l’&eacute;l&eacute;ment de donn&eacute;es d’une certaine mani&egrave;re
lorsque l’utilisateur d&eacute;place la souris sur ce dernier. Il l’affiche diff&eacute;remment lorsque l’utilisateur clique sur l’&eacute;l&eacute;ment
de donn&eacute;es.
Derni&egrave;re mise &agrave; jour le 10/11/2011
209
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Flash Builder permet de g&eacute;n&eacute;rer et de modifier des rendus d’&eacute;l&eacute;ment. Il utilise l’un des mod&egrave;les suivants pour g&eacute;n&eacute;rer
les rendus d’&eacute;l&eacute;ment pour une application d’ordinateur :
• Composants Spark
Utilisez ce mod&egrave;le pour les contr&ocirc;les bas&eacute;s sur une liste Spark, tels que List et ComboBox.
• MX Advanced DataGrid
• MX DataGrid
• MX Tree
Il utilise l’un des mod&egrave;les suivants pour g&eacute;n&eacute;rer les rendus d’&eacute;l&eacute;ment destin&eacute;s &agrave; des contr&ocirc;les bas&eacute;s sur une liste dans
une application mobile :
• El&eacute;ment de rendu d’ic&ocirc;ne
Utilisez ce mod&egrave;le pour cr&eacute;er un rendu d’&eacute;l&eacute;ment personnalis&eacute; destin&eacute; &agrave; des contr&ocirc;les bas&eacute;s sur une liste en
indiquant le libell&eacute;, le message et les propri&eacute;t&eacute;s de l’ic&ocirc;ne. Le fichier de rendu d’&eacute;l&eacute;ment est cr&eacute;&eacute; au format MXML.
Pour plus d’informations, voir &laquo; G&eacute;n&eacute;ration et modification d’un rendu d’&eacute;l&eacute;ment pour des composants mobiles
(mode Cr&eacute;ation) &raquo; &agrave; la page 210.
• Rendu d’&eacute;l&eacute;ment ActionScript personnalis&eacute;
Utilisez ce mod&egrave;le pour cr&eacute;er un rendu d’&eacute;l&eacute;ment standard destin&eacute; &agrave; des contr&ocirc;les bas&eacute;s sur une liste. Vous pouvez
ensuite personnaliser le rendu d’&eacute;l&eacute;ment afin de d&eacute;finir l’aspect de la liste, le cas &eacute;ch&eacute;ant. Le fichier de rendu
d’&eacute;l&eacute;ment est cr&eacute;&eacute; au format ActionScript.
Vous pouvez ouvrir l’assistant de cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment en mode Cr&eacute;ation et en mode Source de l’&eacute;diteur
MXML. Dans l’assistant de cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment, sp&eacute;cifiez un nom et un mod&egrave;le pour le rendu d’&eacute;l&eacute;ment.
Flash Builder g&eacute;n&egrave;re un fichier MXML ou ActionScript qui impl&eacute;mente le rendu d’&eacute;l&eacute;ment.
Les composants de l’application r&eacute;f&eacute;rencent le rendu d’&eacute;l&eacute;ment g&eacute;n&eacute;r&eacute; &agrave; l’aide de la propri&eacute;t&eacute; itemRenderer.
Pour plus d’informations sur la cr&eacute;ation et l’utilisation des rendus d’&eacute;l&eacute;ment, voir Custom Spark Item Renderers.
Apprenez-en davantage sur la cr&eacute;ation de rendus d’&eacute;l&eacute;ment Spark en lisant l’article de Balaji Sridhar, ing&eacute;nieur
Adobe Flash Builder.
G&eacute;n&eacute;ration et modification d’un rendu d’&eacute;l&eacute;ment pour un composant MX Tree (mode
Cr&eacute;ation)
Cet exemple g&eacute;n&egrave;re un rendu d’&eacute;l&eacute;ment pour un composant MX Tree et illustre comment combiner des vues Flash
Builder pour le modifier. Il se base sur un projet Flex utilisant le th&egrave;me Spark par d&eacute;faut.
1 Cr&eacute;ez un fichier d’application. En mode Cr&eacute;ation de l’&eacute;diteur, ajoutez un composant MX Tree &agrave; l’application.
Renseignez le composant Tree de donn&eacute;es affichables &agrave; l’ex&eacute;cution de l’application.
2 Dans le menu contextuel du composant Tree, s&eacute;lectionnez Cr&eacute;er un rendu d’&eacute;l&eacute;ment.
La bo&icirc;te de dialogue de cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment s’ouvre.
Pour ouvrir cette bo&icirc;te de dialogue, vous pouvez &eacute;galement proc&eacute;der comme suit.
•
Dans la section Commun de la vue Propri&eacute;t&eacute;s, s&eacute;lectionnez l’ic&ocirc;ne en regard du champ Rendu d’&eacute;l&eacute;ment.
• Dans le menu Flash Builder, s&eacute;lectionnez Nouveau &gt; Rendu d’&eacute;l&eacute;ment.
3 Dans la bo&icirc;te de dialogue de cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment, sp&eacute;cifiez ce qui suit :
• Dossier source et package pour la d&eacute;claration du rendu d’&eacute;l&eacute;ment g&eacute;n&eacute;r&eacute;
Derni&egrave;re mise &agrave; jour le 10/11/2011
210
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
• Nom
Nom de la classe de rendu d’&eacute;l&eacute;ment cr&eacute;&eacute;e.
• Mod&egrave;le
S&eacute;lectionnez le mod&egrave;le &agrave; utiliser lors de la g&eacute;n&eacute;ration du rendu d’&eacute;l&eacute;ment.
4 Cliquez sur Terminer.
Flash Builder g&eacute;n&egrave;re un fichier de classe ItemRenderer et l’ouvre en mode Cr&eacute;ation de l’&eacute;diteur MXML.
Le composant ItemRenderer est s&eacute;lectionn&eacute;.
L’&eacute;tat normal du composant Tree est s&eacute;lectionn&eacute; dans la vue Etats.
5 Modifiez l’aspect de chaque &eacute;tat du composant Tree dans la classe ItemRenderer g&eacute;n&eacute;r&eacute;e.
a Ouvrez la vue Structure.
Notez que le nœud de niveau sup&eacute;rieur (MXTreeItemRenderer) est s&eacute;lectionn&eacute;.
Dans la section Style de la vue Propri&eacute;t&eacute;s, modifiez l’aspect des &eacute;l&eacute;ments d’arborescence.
b Dans la vue Structure, s&eacute;lectionnez d’autres composants de MXTreeItemRenderer pour en modifier l’aspect.
Notez que les outils de la section Style ne sont pas toujours disponibles.
S’ils ne sont pas disponibles, utilisez le mode Source de l’&eacute;diteur pour d&eacute;finir l’aspect. Lorsque vous passez en
mode Source, la source du composant s&eacute;lectionn&eacute; dans la vue Structure est mise en &eacute;vidence.
6 Ex&eacute;cutez l’application pour d&eacute;couvrir comment la classe ItemRenderer modifie l’aspect du composant Tree.
G&eacute;n&eacute;ration et modification d’un rendu d’&eacute;l&eacute;ment pour des composants mobiles (mode
Cr&eacute;ation)
Cet exemple vise &agrave; g&eacute;n&eacute;rer un rendu d’&eacute;l&eacute;ment bas&eacute; sur une liste pour des composants mobiles. Il se base sur un projet
Flex Mobile utilisant le th&egrave;me Spark par d&eacute;faut.
1 Cr&eacute;ez un fichier d’application mobile. En mode Cr&eacute;ation de l’&eacute;diteur, ajoutez des composants &agrave; l’application.
2 Dans le menu contextuel du fichier d’application mobile, s&eacute;lectionnez Nouveau &gt; Rendu d’&eacute;l&eacute;ment. Vous pouvez
&eacute;galement cliquer sur Cr&eacute;er un rendu d’&eacute;l&eacute;ment dans la vue standard de l’inspecteur des propri&eacute;t&eacute;s.
La bo&icirc;te de dialogue de cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment s’ouvre.
3 Dans la bo&icirc;te de dialogue de cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment, sp&eacute;cifiez ce qui suit :
• Dossier source et package pour la d&eacute;claration du rendu d’&eacute;l&eacute;ment g&eacute;n&eacute;r&eacute;
• Nom
Nom de la classe de rendu d’&eacute;l&eacute;ment cr&eacute;&eacute;e.
• Mod&egrave;le
S&eacute;lectionnez le mod&egrave;le de liste des rendus d’&eacute;l&eacute;ments d’ic&ocirc;ne pour mobile.
• Champ du libell&eacute;
Nom du champ dans les donn&eacute;es que vous souhaitez d&eacute;finir comme libell&eacute;.
• Champ du message
Nom du champ dans les donn&eacute;es que vous souhaitez d&eacute;finir comme contenu du message.
• Champ de l’ic&ocirc;ne
Derni&egrave;re mise &agrave; jour le 10/11/2011
211
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Nom du champ dans les donn&eacute;es contenant le chemin d’acc&egrave;s &agrave; l’ic&ocirc;ne.
• Largeur de l’ic&ocirc;ne
Largeur de l’ic&ocirc;ne. La valeur par d&eacute;faut est 64 pixels.
• Hauteur de l’ic&ocirc;ne
Hauteur de l’ic&ocirc;ne. La valeur par d&eacute;faut est 64 pixels.
• Classe du d&eacute;corateur
S&eacute;lectionnez une image au format GIF, JPEG ou PNG. L’image s&eacute;lectionn&eacute;e est int&eacute;gr&eacute;e &agrave; l’application. Par
exemple, decoratorClass=&quot;@Embed('/foo/myfoo.png')&quot;
Vous pouvez &eacute;galement s&eacute;lectionner un fichier FXP. Ajoutez le chemin d’acc&egrave;s au fichier FXP pour r&eacute;f&eacute;rencer
le fichier FXG. Par exemple, decoratorClass=&quot;{assets.Chevron}&quot;
4 Cliquez sur Terminer.
Flash Builder g&eacute;n&egrave;re un fichier de classe ItemRenderer et l’ouvre en mode Cr&eacute;ation de l’&eacute;diteur MXML.
5 Ex&eacute;cutez l’application pour voir comment fonctionne le rendu ItemRenderer.
Cr&eacute;ation et modification de rendus d’&eacute;l&eacute;ments (mode Source)
Vous pouvez ouvrir la bo&icirc;te de dialogue de cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment directement en mode Source de l’&eacute;diteur.
Par exemple, proc&eacute;dez comme suit pour cr&eacute;er un rendu d’&eacute;l&eacute;ment pour un composant Spark List.
1 En mode Source de l’&eacute;diteur, placez votre curseur dans une balise &lt;s:List&gt; et saisissez ce qui suit :
&lt;s:List itemRender=&quot;
Apr&egrave;s avoir saisi le premier guillemet du nom de la classe du rendu d’&eacute;l&eacute;ment, un menu contextuel s’affiche.
2 Double-cliquez sur Cr&eacute;er un rendu d’&eacute;l&eacute;ment pour ouvrir la bo&icirc;te de dialogue de cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment
Cette bo&icirc;te de dialogue est identique &agrave; celle qui s’ouvre en mode Cr&eacute;ation.
Pour une application d’ordinateur, voir les instructions dans &laquo; G&eacute;n&eacute;ration et modification d’un rendu d’&eacute;l&eacute;ment
pour un composant MX Tree (mode Cr&eacute;ation) &raquo; &agrave; la page 209 sur la cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment.
Pour une application mobile, voir les instructions dans &laquo; G&eacute;n&eacute;ration et modification d’un rendu d’&eacute;l&eacute;ment pour
des composants mobiles (mode Cr&eacute;ation) &raquo; &agrave; la page 210 sur la cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment.
3 Cliquez sur Terminer.
Flash Builder g&eacute;n&egrave;re un nouveau rendu d’&eacute;l&eacute;ment en fonction des s&eacute;lections effectu&eacute;es dans la bo&icirc;te de dialogue de
cr&eacute;ation d’un rendu d’&eacute;l&eacute;ment L’&eacute;diteur passe en mode Source pour la nouvelle classe g&eacute;n&eacute;r&eacute;e.
4 Modifiez la classe du rendu d’&eacute;l&eacute;ment.
Enregistrez le fichier de classe et le fichier d’application.
D&eacute;claration ItemRenderer
Dans Flash Builder, une d&eacute;claration ItemRenderer est le fichier qui impl&eacute;mente le rendu ItemRenderer personnalis&eacute;
pour un composant.
Vous pouvez afficher la d&eacute;claration du rendu ItemRenderer personnalis&eacute; pour les composants que vous avez
s&eacute;lectionn&eacute;s :
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, s&eacute;lectionnez un composant pour lequel vous avez impl&eacute;ment&eacute; un rendu
d’&eacute;l&eacute;ment personnalis&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
212
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
2 Dans le menu contextuel du composant, s&eacute;lectionnez Ouvrir la d&eacute;claration d’un rendu d’&eacute;l&eacute;ment.
La classe impl&eacute;mentant le rendu d’&eacute;l&eacute;ment s’ouvre en mode Source de l’&eacute;diteur. Pour ouvrir la d&eacute;claration du rendu
d’&eacute;l&eacute;ment, vous pouvez &eacute;galement proc&eacute;der comme suit :
• S&eacute;lectionnez le composant en mode Cr&eacute;ation. Dans la section Commun de la vue Propri&eacute;t&eacute;s, s&eacute;lectionnez l’ic&ocirc;ne
en regard du champ Rendu d’&eacute;l&eacute;ment.
• S&eacute;lectionnez le composant. En mode Source, s&eacute;lectionnez ensuite Naviguer &gt; Ouvrir la d&eacute;claration d’habillage
dans le menu Flash Builder.
Liaison des contr&ocirc;les &agrave; des donn&eacute;es
Pour acc&eacute;der &agrave; un service de donn&eacute;es, Flash Builder fournit des outils permettant de lier les donn&eacute;es &agrave; des contr&ocirc;les
de donn&eacute;es, par exemple DataGrid. Il cr&eacute;e les colonnes d’un contr&ocirc;le DataGrid en fonction des donn&eacute;es retourn&eacute;es
par un service. Vous devrez g&eacute;n&eacute;ralement configurer les colonnes ainsi g&eacute;n&eacute;r&eacute;es. Flash Builder comporte un &eacute;diteur
pour la configuration des colonnes des composants DataGrid et AdvancedDataGrid.
Pour plus d’informations sur la liaison des donn&eacute;es aux contr&ocirc;les de donn&eacute;es, voir Liaison d’op&eacute;rations de service &agrave;
des contr&ocirc;les.
Configuration des composants DataGrid et Advanced DataGrid
Passez en mode Cr&eacute;ation de l’&eacute;diteur MXML pour configurer les colonnes DataGrid. La proc&eacute;dure suivante illustre la
configuration des colonnes d’un composant DataGrid acc&eacute;dant &agrave; un service de donn&eacute;es. La configuration des colonnes
d’un composant AdvancedDataGrid est analogue.
Configuration des colonnes d’un composant DataGrid
1 En mode Cr&eacute;ation de l’&eacute;diteur MXML, ajoutez un contr&ocirc;le DataGrid (ou AdvancedDataGrid). Liez-le aux donn&eacute;es
renvoy&eacute;es par un service de donn&eacute;es.
Pour plus d’informations, voir Liaison d’op&eacute;rations de service &agrave; des contr&ocirc;les.
2 S&eacute;lectionnez le contr&ocirc;le DataGrid, puis cliquez sur le bouton Configurer les colonnes de la vue Propri&eacute;t&eacute;s.
Vous pouvez &eacute;galement s&eacute;lectionner cette option dans le menu contextuel du contr&ocirc;le.
3 Dans la bo&icirc;te de dialogue Configurer les colonnes, utilisez les boutons Ajouter, Supprimer, Haut et Bas pour
ajouter, supprimer ou r&eacute;organiser les colonnes.
4 La Vue standard de cette bo&icirc;te de dialogue permet de modifier les principales propri&eacute;t&eacute;s d’une colonne
s&eacute;lectionn&eacute;e.
• Liaison de donn&eacute;es
S&eacute;lectionnez le champ de donn&eacute;es qui vous souhaitez afficher dans la colonne. La liste d&eacute;roulante Liaison au
champ r&eacute;pertorie tous les champs disponibles &agrave; partir des donn&eacute;es renvoy&eacute;es. Si le contr&ocirc;le DataGrid est
modifiable, vous pouvez d&eacute;terminer si les donn&eacute;es de cette colonne peuvent &ecirc;tre modifi&eacute;es.
Si les donn&eacute;es &agrave; afficher ne proviennent pas d’un service de donn&eacute;es, Liaison au champ se pr&eacute;sente sous la forme
d’une zone de texte permettant de repr&eacute;senter les colonnes d&eacute;finies dans la source de donn&eacute;es. Vous pouvez par
exemple saisir le nom des colonnes d&eacute;finies dans une XMLList. Si le nom sp&eacute;cifi&eacute; ne correspond &agrave; aucune source
de donn&eacute;es d&eacute;finie, la valeur est ignor&eacute;e et la colonne demeure vide.
Les colonnes ajout&eacute;es par programme &agrave; un contr&ocirc;le DataGrid ne peuvent pas &ecirc;tre configur&eacute;es &agrave; l’aide des
fonctions de liaison de donn&eacute;es.
• Propri&eacute;t&eacute;s g&eacute;n&eacute;rales
Derni&egrave;re mise &agrave; jour le 10/11/2011
213
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Sp&eacute;cifiez l’en-t&ecirc;te et la largeur de la colonne. D&eacute;finissez &eacute;galement si la colonne peut ou non &ecirc;tre
redimensionn&eacute;e ou tri&eacute;e.
La largeur doit &ecirc;tre exprim&eacute;e en pixels. La valeur par d&eacute;faut est 100 pixels. Si la valeur de la propri&eacute;t&eacute;
horizontalScrollPolicy du contr&ocirc;le DataGrid est false, toutes les colonnes visibles sont affich&eacute;es. Pour
garantir l’affichage de toutes les colonnes visibles, DataGrid ne respecte pas toujours la valeur sp&eacute;cifi&eacute;e pour la
largeur.
• Propri&eacute;t&eacute;s de texte
D&eacute;finissez le style de mise en forme du texte de la colonne.
5 La Vue avanc&eacute;e permet d’afficher et de modifier les param&egrave;tres de toutes les propri&eacute;t&eacute;s d’une colonne s&eacute;lectionn&eacute;e.
G&eacute;n&eacute;ration de gestionnaires d’&eacute;v&eacute;nement
Les applications con&ccedil;ues avec Flex sont g&eacute;r&eacute;es par les &eacute;v&eacute;nements. Les composants de l’interface utilisateur r&eacute;agissent
&agrave; divers &eacute;v&eacute;nements, par exemple lorsqu’un utilisateur clique sur un bouton ou lorsque l’initialisation d’un objet est
termin&eacute;e. Les gestionnaires d’&eacute;v&eacute;nement, r&eacute;dig&eacute;s en code ActionScript, d&eacute;finissent la mani&egrave;re dont les composants
r&eacute;agissent &agrave; l’&eacute;v&eacute;nement.
Remarque : vous pouvez &eacute;galement g&eacute;n&eacute;rer des gestionnaires d’&eacute;v&eacute;nement pour des &eacute;l&eacute;ments non visibles, tels que
RemoteObject et HTTPService.
Flash Builder assiste l’utilisateur par la g&eacute;n&eacute;ration des fonctions des gestionnaires d’&eacute;v&eacute;nement pour un composant.
Dans la fonction g&eacute;n&eacute;r&eacute;e, r&eacute;digez le code qui d&eacute;finit le comportement du composant en r&eacute;ponse &agrave; l’&eacute;v&eacute;nement.
L’assistance pour la g&eacute;n&eacute;ration des gestionnaires d’&eacute;v&eacute;nement est accessible :
• &agrave; partir de la vue Propri&eacute;t&eacute;s ;
• &agrave; partir du menu contextuel d’un &eacute;l&eacute;ment en mode Cr&eacute;ation de l’&eacute;diteur MXML ;
• &agrave; partir du menu contextuel d’un &eacute;l&eacute;ment en mode Source de l’&eacute;diteur MXML.
A propos des gestionnaires d’&eacute;v&eacute;nement g&eacute;n&eacute;r&eacute;s
Lorsque Flash Builder g&eacute;n&egrave;re une fonction de gestionnaire d’&eacute;v&eacute;nement, il place le gestionnaire d’&eacute;v&eacute;nement dans le
premier bloc Script du fichier. La fonction est plac&eacute;e &agrave; la fin du bloc Script. Le gestionnaire d’&eacute;v&eacute;nement g&eacute;n&eacute;r&eacute; a un
acc&egrave;s prot&eacute;g&eacute; et accepte la sous-classe appropri&eacute;e de la classe Event comme seul param&egrave;tre.
Flash Builder g&eacute;n&egrave;re soit un nom unique pour le gestionnaire d’&eacute;v&eacute;nement en fonction du nom de la classe du
composant, soit un nom personnalis&eacute; pour le gestionnaire d’&eacute;v&eacute;nement sp&eacute;cifi&eacute;. Si vous ne pr&eacute;cisez pas de nom
personnalis&eacute;, le nom est g&eacute;n&eacute;r&eacute; selon le processus suivant :
• Si une propri&eacute;t&eacute; ID est d&eacute;finie, Flash Builder en d&eacute;rive le nom.
• Si aucune propri&eacute;t&eacute; ID n’est d&eacute;finie pour le composant, Flash Builder g&eacute;n&egrave;re un nom unique, bas&eacute; sur le nom de la
classe du composant.
Vous devez fournir le corps du gestionnaire d’&eacute;v&eacute;nement. Le bloc de code suivant contient un gestionnaire
d’&eacute;v&eacute;nement g&eacute;n&eacute;r&eacute; pour un contr&ocirc;le Button.
Derni&egrave;re mise &agrave; jour le 10/11/2011
214
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
. . .
&lt;fx:Script&gt;
&lt;![CDATA[
protected function myButton_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:Button label=&quot;Button&quot; id=&quot;myButton&quot; click=&quot;myButton_clickHandler(event)&quot;/&gt;
. . .
Flash Builder d&eacute;signe un &eacute;v&eacute;nement par d&eacute;faut pour chaque composant de l’interface utilisateur. Par exemple,
l’&eacute;v&eacute;nement par d&eacute;faut d’un contr&ocirc;le Button est l’&eacute;v&eacute;nement click. Vous pouvez pr&eacute;ciser le gestionnaire d’&eacute;v&eacute;nement
pour l’&eacute;v&eacute;nement par d&eacute;faut dans la Vue standard de la vue Propri&eacute;t&eacute;s. Pour sp&eacute;cifier les gestionnaires d’autres
&eacute;v&eacute;nements, dans l’inspecteur de propri&eacute;t&eacute;s, s&eacute;lectionnez Vue par cat&eacute;gories &gt; Ev&eacute;nements.
Vous pouvez &eacute;galement g&eacute;n&eacute;rer des gestionnaires d’&eacute;v&eacute;nement en faisant appel &agrave; l’assistant de contenu en mode
Source.
G&eacute;n&eacute;ration de gestionnaires d’&eacute;v&eacute;nement &agrave; partir de la vue Propri&eacute;t&eacute;s
1 En mode Cr&eacute;ation, s&eacute;lectionnez un &eacute;l&eacute;ment, puis s&eacute;lectionnez la vue Standard dans l’inspecteur des propri&eacute;t&eacute;s.
La zone Commun comporte un champ d’&eacute;dition pour le gestionnaire d’&eacute;v&eacute;nement par d&eacute;faut.
2 Pour g&eacute;n&eacute;rer un gestionnaire pour l’&eacute;v&eacute;nement par d&eacute;faut :
a (Facultatif) Dans le champ de texte Lors d’un Ev&eacute;nement, saisissez un nom pour l’&eacute;v&eacute;nement.
Dans le champ Lors d’un clic d’un composant Button, indiquez par exemple MyButtonClick.
Si vous ne sp&eacute;cifiez aucun nom, Flash Builder g&eacute;n&egrave;re un nom unique pour l’&eacute;v&eacute;nement.
Lorsque vous pr&eacute;cisez un nom pour le gestionnaire d’&eacute;v&eacute;nement, vous avez la possibilit&eacute; de sp&eacute;cifier un
param&egrave;tre d’&eacute;v&eacute;nement. Si vous ne le faites pas, Flash Builder g&eacute;n&egrave;re le param&egrave;tre avec un type d’&eacute;v&eacute;nement
appropri&eacute;.
b Cliquez sur l’ic&ocirc;ne repr&eacute;sentant un &eacute;clair, puis s&eacute;lectionnez G&eacute;n&eacute;rer un gestionnaire d’&eacute;v&eacute;nement.
L’&eacute;diteur bascule en mode Source et met en &eacute;vidence le corps du gestionnaire d’&eacute;v&eacute;nement g&eacute;n&eacute;r&eacute;. Saisissez
l’impl&eacute;mentation de l’&eacute;v&eacute;nement.
3 Pour g&eacute;n&eacute;rer un gestionnaire pour un &eacute;v&eacute;nement d’un &eacute;l&eacute;ment s&eacute;lectionn&eacute; :
a Dans la Vue par cat&eacute;gories, d&eacute;veloppez le nœud Ev&eacute;nements afin d’afficher tous les &eacute;v&eacute;nements correspondant
&agrave; l’&eacute;l&eacute;ment.
b (Facultatif) Double-cliquez sur le nom de l’&eacute;v&eacute;nement pour activer la zone de texte du nom du gestionnaire
d’&eacute;v&eacute;nement et saisissez le nom.
c Cliquez sur l’ic&ocirc;ne dans le champ Valeur pour cr&eacute;er le gestionnaire d’&eacute;v&eacute;nement.
L’&eacute;diteur bascule en mode Source et met en &eacute;vidence le corps du gestionnaire d’&eacute;v&eacute;nement g&eacute;n&eacute;r&eacute;. Saisissez
l’impl&eacute;mentation de l’&eacute;v&eacute;nement.
G&eacute;n&eacute;ration de gestionnaires d’&eacute;v&eacute;nement &agrave; l’aide du menu contextuel d’un &eacute;l&eacute;ment
1 Dans la vue Cr&eacute;ation, ouvrez le menu contextuel d’un &eacute;l&eacute;ment.
Derni&egrave;re mise &agrave; jour le 10/11/2011
215
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
2 Effectuez l’une des actions suivantes :
• S&eacute;lectionnez l’&eacute;v&eacute;nement par d&eacute;faut pour l’&eacute;l&eacute;ment.
Par exemple, pour un &eacute;l&eacute;ment Button, s&eacute;lectionnez G&eacute;n&eacute;ration du gestionnaire de clics.
• Choisissez Afficher tous les &eacute;v&eacute;nements pour ouvrir la liste d’&eacute;v&eacute;nements dans la vue Propri&eacute;t&eacute;s.
Pr&eacute;cisez un gestionnaire d’&eacute;v&eacute;nement dans la vue Propri&eacute;t&eacute;s.
L’&eacute;diteur bascule en mode Source et met en &eacute;vidence le corps du gestionnaire d’&eacute;v&eacute;nement g&eacute;n&eacute;r&eacute;. Saisissez
l’impl&eacute;mentation de l’&eacute;v&eacute;nement.
G&eacute;n&eacute;ration de gestionnaires d’&eacute;v&eacute;nement &agrave; l’aide de l’assistant de contenu
1 Dans un bloc MXML en mode Source, cr&eacute;ez un composant, mais sans pr&eacute;ciser d’&eacute;v&eacute;nements.
2 Activez l’assistant de contenu pour les propri&eacute;t&eacute;s d’un composant en ins&eacute;rant un espace apr&egrave;s le nom de la classe.
3 Dans la liste de propri&eacute;t&eacute;s s&eacute;lectionn&eacute;es, s&eacute;lectionnez un &eacute;v&eacute;nement (doubleClick, par exemple).
4 Appuyez sur Ctrl+Espace et s&eacute;lectionnez G&eacute;n&eacute;rer un gestionnaire d’&eacute;v&eacute;nement.
Flash Builder g&eacute;n&egrave;re un nom unique pour le gestionnaire d’&eacute;v&eacute;nement et place ce dernier dans le bloc Script.
Remarque : si vous avez sp&eacute;cifi&eacute; un nom personnalis&eacute; pour le gestionnaire d’&eacute;v&eacute;nement, Flash Builder ne peut pas
g&eacute;n&eacute;rer le gestionnaire. Pour utiliser un nom personnalis&eacute;, g&eacute;n&eacute;rez d’abord un gestionnaire d’&eacute;v&eacute;nement, puis
modifiez-en le nom aussi bien dans la propri&eacute;t&eacute; event que dans le gestionnaire g&eacute;n&eacute;r&eacute;.
Cr&eacute;ation de gestionnaires d’&eacute;v&eacute;nement pour les composants
Vous pouvez cr&eacute;er des gestionnaires d’&eacute;v&eacute;nement pour les composants Flex en cliquant sur le bouton G&eacute;n&eacute;rer le
gestionnaire d’&eacute;v&eacute;nement pour les &eacute;v&eacute;nements r&eacute;pertori&eacute;s dans la vue Propri&eacute;t&eacute;s. Vous pouvez attribuer un nom au
gestionnaire d’&eacute;v&eacute;nement avant de le cr&eacute;er. Si vous ne sp&eacute;cifiez pas de nom personnalis&eacute;, Flash Builder g&eacute;n&egrave;re un nom
en fonction de la propri&eacute;t&eacute; ID du composant. Si la propri&eacute;t&eacute; ID n’est pas d&eacute;finie, Flash Builder g&eacute;n&egrave;re un nom unique
d&eacute;riv&eacute; du nom du composant.
G&eacute;n&eacute;ration d’un gestionnaire d’&eacute;v&eacute;nement pour un composant
1 Dans la vue Cr&eacute;ation de l’&eacute;diteur de code, s&eacute;lectionnez un composant.
2 Dans la vue Propri&eacute;t&eacute;s, s&eacute;lectionnez la Vue par cat&eacute;gories, d&eacute;veloppez la liste des &eacute;v&eacute;nements pour l’&eacute;l&eacute;ment
s&eacute;lectionn&eacute; et localisez l’&eacute;v&eacute;nement pour lequel vous souhaitez g&eacute;n&eacute;rer un gestionnaire d’&eacute;v&eacute;nement.
3 (Facultatif) Saisissez un nom pour le gestionnaire d’&eacute;v&eacute;nement dans le champ Valeur.
4 Cliquez sur le bouton G&eacute;n&eacute;rer le gestionnaire d’&eacute;v&eacute;nement.
L’&eacute;diteur ouvre la vue Source. Flash Builder ins&egrave;re le gestionnaire d’&eacute;v&eacute;nement &agrave; l’int&eacute;rieur d’un bloc &lt;Script&gt; et
ajoute la propri&eacute;t&eacute; d’&eacute;v&eacute;nement au composant. La propri&eacute;t&eacute; d’&eacute;v&eacute;nement &eacute;tablit une r&eacute;f&eacute;rence &agrave; l’&eacute;v&eacute;nement cr&eacute;&eacute;.
Remarque : vous pouvez &eacute;galement utiliser le menu contextuel pour cr&eacute;er des gestionnaires pour les principaux
&eacute;v&eacute;nements d’un composant. Par exemple, le menu contextuel d’un composant Button comporte l’option G&eacute;n&eacute;rer un
gestionnaire Click.
5 Ajoutez le code pour l’impl&eacute;mentation du gestionnaire d’&eacute;v&eacute;nement &agrave; la fonction de gestionnaire d’&eacute;v&eacute;nement
g&eacute;n&eacute;r&eacute;e.
Derni&egrave;re mise &agrave; jour le 10/11/2011
216
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Acc&egrave;s aux services de donn&eacute;es
Dans Flash Builder, vous interagissez avec des donn&eacute;es et des contr&ocirc;les g&eacute;r&eacute;s par des donn&eacute;es directement dans les
codes ActionScript et MXML. Vous pouvez travailler avec des donn&eacute;es, g&eacute;n&eacute;rer automatiquement des applications de
bases de donn&eacute;es et utiliser un code proxy pour les services Web, ainsi que g&eacute;n&eacute;rer et utiliser le code fonctionnant avec
Flex Ajax Bridge. Vous pouvez &eacute;galement g&eacute;rer les probl&egrave;mes de s&eacute;curit&eacute; d’acc&egrave;s aux donn&eacute;es d’Adobe Flash Player et
utiliser Flash Builder avec un service proxy.
Utilisation de donn&eacute;es dans Flash Builder
Dans Flash Builder, les donn&eacute;es sont manipul&eacute;es en modifiant directement les codes des applications ActionScript et
MXML.
Conteneurs et contr&ocirc;les g&eacute;r&eacute;s par les donn&eacute;es
fournit des composants de type conteneur et de type contr&ocirc;le &agrave; partir desquels vous pouvez cr&eacute;er les interfaces
utilisateur de vos applications Flex. Certains composants pr&eacute;sentent des donn&eacute;es que les utilisateurs peuvent
s&eacute;lectionner et avec lesquelles ils peuvent interagir lors de l’utilisation de l’application. Voici quelques exemples
d’utilisation des contr&ocirc;les g&eacute;r&eacute;s par les donn&eacute;es :
• Dans un formulaire pour la saisie d’une adresse, vous pouvez donner aux utilisateurs la possibilit&eacute; de s&eacute;lectionner
leur pays de r&eacute;sidence (par exemple) en utilisant les contr&ocirc;les ComboBox ou List.
• Dans une application de panier d’achats, vous pouvez utiliser un composant Spark List pour pr&eacute;senter les donn&eacute;es
des produits comportant des images. Pour le composant List, la pr&eacute;sentation peut prendre les valeurs suivantes :
VerticalLayout, HorizontalLayout ou TileLayout.
• Vous pouvez fournir des options standard de navigation en utilisant des conteneurs tels que les contr&ocirc;les TabBar
et ButtonBar.
Pour tous les contr&ocirc;les g&eacute;r&eacute;s par des donn&eacute;es, l’entr&eacute;e de donn&eacute;es est effectu&eacute;e par un fournisseur de donn&eacute;es.
Pour plus d’informations sur l’utilisation de contr&ocirc;les g&eacute;r&eacute;s par des donn&eacute;es, voir Spark list-based controls.
Fournisseurs de donn&eacute;es et collections
Un objet collection contient un objet de donn&eacute;es, par exemple Array ou XMList, et fournit un ensemble de m&eacute;thodes
permettant de consulter, trier, filtrer et modifier les &eacute;l&eacute;ments de donn&eacute;es de cet objet. Plusieurs contr&ocirc;les Adobe Flex,
d&eacute;sign&eacute;s par l’expression contr&ocirc;les de fournisseurs de donn&eacute;es, ont une propri&eacute;t&eacute; dataProvider renseign&eacute;e par une
collection.
Les exemples suivants illustrent comment un fournisseur de donn&eacute;es est d&eacute;fini (en tant qu’ArrayCollection
ActionScript) et utilis&eacute; par un contr&ocirc;le :
Derni&egrave;re mise &agrave; jour le 10/11/2011
217
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
&lt;!-- Simple example to demonstrate the Spark ComboBox control --&gt;
&lt;s:Application xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;
xmlns:s=&quot;library://ns.adobe.com/flex/spark&quot;
xmlns:mx=&quot;library://ns.adobe.com/flex/halo&quot;&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var complexDP:ArrayCollection = new ArrayCollection(
[
{ingredient:&quot;Salmon&quot;, category:&quot;Meat&quot;},
{ingredient:&quot;Potato&quot;, category:&quot;Starch&quot;},
{ingredient:&quot;Cucumber&quot;, category:&quot;Vegetable&quot;},
{ingredient:&quot;Steak&quot;, category:&quot;Meat&quot;},
{ingredient:&quot;Rice&quot;, category:&quot;Starch&quot;},
{ingredient:&quot;Cumin&quot;, category:&quot;Spice&quot;}
]
);
&lt;!-- Function to handel custom input strings --&gt;
private function myLabelToItemFunction(input:String):*
{
&lt;!-- Returns object that matches items in dataProvider --&gt;
return {ingredient:input, category:&quot;mystery&quot;};
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:Panel title=&quot;Spark ComboBox Example&quot; width=&quot;75%&quot; height=&quot;75%&quot;&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout paddingTop=&quot;10&quot; paddingLeft=&quot;10&quot;/&gt;
&lt;/s:layout&gt;
&lt;!-- Label that displayed current property values --&gt;
&lt;s:Label text=&quot;Index : {cb.selectedIndex}
Item : {cb.selectedItem.ingredient}
Type : {cb.selectedItem.category}&quot;/&gt;
&lt;!-- ComboBox with custom labelToItem function --&gt;
&lt;s:ComboBox
id=&quot;cb&quot;
dataProvider=&quot;{complexDP}&quot;
width=&quot;150&quot;
labelToItemFunction=&quot;{myLabelToItemFunction}&quot;
selectedIndex=&quot;0&quot;
labelField=&quot;ingredient&quot;/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;
Pour plus d’informations sur les fournisseurs de donn&eacute;es et les collections, voir Data providers and collections.
Derni&egrave;re mise &agrave; jour le 10/11/2011
218
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Acc&egrave;s aux donn&eacute;es distantes
Flex contient des composants d’acc&egrave;s aux donn&eacute;es bas&eacute;s sur une architecture orient&eacute;e services (Service-oriented
architecture, SOA). Ces composants utilisent des appels de proc&eacute;dure distants pour interagir avec des environnements
de serveur (PHP, Adobe ColdFusion&reg; et Microsoft ASP.NET, par exemple), afin de fournir des donn&eacute;es aux
applications et d’envoyer des donn&eacute;es aux sources de donn&eacute;es principales.
Selon le type d’interface dont vous disposez sur une application c&ocirc;t&eacute; serveur particuli&egrave;re, vous pouvez vous connecter
&agrave; une application via l’une des m&eacute;thodes suivantes :
• HTTP GET ou POST avec le composant HTTPService
• Services Web conformes au protocole SOAP avec le composant WebService
• Services distants AMF (Adobe Action Message Format) avec le composant RemoteObject
Remarque : lorsque vous utilisez Flash Builder pour d&eacute;velopper des applications acc&eacute;dant aux donn&eacute;es c&ocirc;t&eacute; serveur,
utilisez un fichier cross-domain.xml ou un proxy si vous acc&eacute;dez aux donn&eacute;es &agrave; partir d’un domaine diff&eacute;rent du
domaine &agrave; partir duquel l’application a &eacute;t&eacute; charg&eacute;e. Voir &laquo; Gestion de la s&eacute;curit&eacute; de Flash Player &raquo; &agrave; la page 248.
Flash Builder permet &eacute;galement la cr&eacute;ation d’applications utilisant Adobe ADEP Data Services, un produit distinct
offrant des fonctionnalit&eacute;s de service de donn&eacute;es avanc&eacute;es. ADEP Data Services propose des applications de service
d’appel de proc&eacute;dure distante (RPC), ainsi qu’une configuration de s&eacute;curit&eacute; avanc&eacute;e. Il offre &eacute;galement les services de
donn&eacute;es suivants :
Service de gestion de donn&eacute;es : ce service permet de cr&eacute;er des applications qui fonctionnent avec les donn&eacute;es
distribu&eacute;es. Le service de gestion de donn&eacute;es vous permet en outre de g&eacute;rer de vastes collections de donn&eacute;es et des
relations de donn&eacute;es imbriqu&eacute;es, telles que des relations un-&agrave;-un et un-&agrave;-plusieurs.
Service de message : ce service permet de cr&eacute;er des applications pouvant envoyer des messages &agrave; d’autres applications
et recevoir des messages d’autres applications, dont les applications cr&eacute;&eacute;es dans Flex et JMS (Java Message Service).
Flash Builder fournit des assistants et des outils permettant de se connecter aux services de donn&eacute;es et de lier des
op&eacute;rations de services de donn&eacute;es &agrave; des composants d’application. Voir Cr&eacute;ation d’applications centr&eacute;es sur les
donn&eacute;es avec Flash Builder.
Liaison de donn&eacute;es
Comme vous avez pu le constater dans l’exemple de code fourni dans &laquo; Fournisseurs de donn&eacute;es et collections &raquo; &agrave; la
page 216, la valeur de la propri&eacute;t&eacute; dataProvider du contr&ocirc;le ComboBox est &quot;{complexDP}&quot;. Il s’agit d’un exemple
de liaison de donn&eacute;es.
La liaison de donn&eacute;es copie la valeur d’un objet (la source) dans un autre objet (la destination). Une fois qu’un objet
est li&eacute; &agrave; un autre objet, les modifications apport&eacute;es &agrave; la source sont automatiquement r&eacute;percut&eacute;es dans la destination.
L’exemple suivant lie la propri&eacute;t&eacute; de texte d’un contr&ocirc;le TextInput (la source) &agrave; la propri&eacute;t&eacute; de texte d’un contr&ocirc;le
Label (la destination), de sorte &agrave; ce que le texte saisi dans le contr&ocirc;le TextInput s’affiche dans le contr&ocirc;le Label :
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;s:Application xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;
xmlns:s=&quot;library://ns.adobe.com/flex/spark&quot;
xmlns:mx=&quot;library://ns.adobe.com/flex/mx&quot; minWidth=&quot;955&quot; minHeight=&quot;600&quot;&gt;
&lt;fx:Declarations&gt;
&lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;
&lt;/fx:Declarations&gt;
&lt;s:TextInput id=&quot;LNameInput&quot; x=&quot;10&quot; y=&quot;10&quot;/&gt;
&lt;s:Label text=&quot;{LNameInput.text}&quot; x=&quot;10&quot; y=&quot;50&quot;/&gt;
&lt;/s:Application&gt;
Derni&egrave;re mise &agrave; jour le 10/11/2011
219
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Pour lier des donn&eacute;es d’un objet &agrave; un autre, vous pouvez faire appel &agrave; la syntaxe d’accolades ({ }) (comme l’illustre
l’exemple) ou &agrave; la balise &lt;fx:Binding&gt;. Pour plus d’informations, voir Utilisation de liaisons avec des mod&egrave;les de
donn&eacute;es et Liaison de donn&eacute;es.
Mod&egrave;les de donn&eacute;es
Un mod&egrave;le de donn&eacute;es est un objet que vous pouvez utiliser afin de stocker de mani&egrave;re temporaire des donn&eacute;es dans
la m&eacute;moire pour faciliter leur manipulation. Vous pouvez d&eacute;finir un mod&egrave;le de donn&eacute;es dans ActionScript et dans
MXML en utilisant une balise telle que &lt;fx:Model&gt; ou en utilisant tout objet contenant des propri&eacute;t&eacute;s. Par exemple,
le mod&egrave;le de donn&eacute;es suivant affiche des informations telles que le nom d’une personne, son &acirc;ge et son num&eacute;ro de
t&eacute;l&eacute;phone :
&lt;fx:Declarations&gt;
&lt;fx:Model id=&quot;reg&quot;&gt;
&lt;registration&gt;
&lt;name&gt;{nme.text}&lt;/name&gt;
&lt;email&gt;{email.text}&lt;/email&gt;
&lt;phone&gt;{phone.text}&lt;/phone&gt;
&lt;zip&gt;{zip.text}&lt;/zip&gt;
&lt;ssn&gt;{ssn.text}&lt;/ssn&gt;
&lt;/registration&gt;
&lt;/fx:Model&gt;
&lt;/fx:Declarations&gt;
Les champs d’un mod&egrave;le de donn&eacute;es peuvent contenir des donn&eacute;es statiques (comme l’illustre l’exemple). Vous
pouvez &eacute;galement avoir recours aux liaisons de donn&eacute;es pour transmettre des donn&eacute;es au mod&egrave;le de donn&eacute;es ou en
provenance de ce dernier.
Vous pouvez en outre d&eacute;finir le mod&egrave;le de donn&eacute;es dans un fichier XML. Vous r&eacute;f&eacute;rencez alors le fichier XML par le
biais du syst&egrave;me de fichiers ou d’une URL &agrave; l’aide de la propri&eacute;t&eacute; source de la balise &lt;fx:Model&gt;, comme l’illustre
l’exemple suivant :
&lt;fx:Model source=&quot;content.xml&quot; id=&quot;Contacts&quot;/&gt;
&lt;fx:Model source=&quot;http://www.somesite.com/companyinfo.xml&quot; id=&quot;myCompany&quot;/&gt;
Pour plus d’informations sur les mod&egrave;les de donn&eacute;es, voir Storing Data.
Validation de donn&eacute;es
La validation de donn&eacute;es v&eacute;rifie que les donn&eacute;es saisies par l’utilisateur dans l’application sont valides. Vous pouvez
par exemple utiliser un validateur de donn&eacute;es de code postal pour v&eacute;rifier que le code postal indiqu&eacute; par l’utilisateur
est valide.
Flex propose des validateurs pr&eacute;d&eacute;finis pour les types de donn&eacute;es suivants : carte de cr&eacute;dit, devise, date, adresse
&eacute;lectronique, num&eacute;ro, num&eacute;ro de t&eacute;l&eacute;phone, expression r&eacute;guli&egrave;re, s&eacute;curit&eacute; sociale, cha&icirc;ne et code postal.
Les validateurs de donn&eacute;es sont des composants Flex non visuels, ce qui signifie qu’ils ne sont pas accessibles &agrave; partir
de la vue Composants. Vous devez donc les ins&eacute;rer dans le code, comme l’illustre l’exemple MXML suivant :
&lt;!-- Define the ZipCodeValidator. --&gt;
&lt;mx:ZipCodeValidator id=&quot;zcV&quot; source=&quot;{zipcodeInput}&quot; property=&quot;text&quot;/&gt;
&lt;!-- Define the TextInput control for entering the zip code. --&gt;
&lt;s:TextInput id=&quot;zipcodeInput&quot;/&gt;
Dans cet exemple MXML, le validateur est d&eacute;fini avec la balise MXML appropri&eacute;e et est li&eacute; &agrave; la propri&eacute;t&eacute; ID d’un
contr&ocirc;le TextInput. Au moment de l’ex&eacute;cution, lorsque l’utilisateur saisit le num&eacute;ro de t&eacute;l&eacute;phone dans le contr&ocirc;le
TextInput, le num&eacute;ro est imm&eacute;diatement valid&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
220
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Vous pouvez utiliser les validateurs de donn&eacute;es dans ActionScript en d&eacute;finissant une variable en tant qu’instance d’une
classe de validateur, puis en cr&eacute;ant une fonction pour la lier au contr&ocirc;le de saisie.
Les validateurs de donn&eacute;es sont souvent utilis&eacute;s avec les mod&egrave;les de donn&eacute;es. Pour plus d’informations, voir
Validating Data.
Mise en forme des donn&eacute;es
La mise en forme correcte de certains types de donn&eacute;es dans l’application est garantie par l’utilisation de formateurs
de donn&eacute;es. Flex fournit des formateurs de donn&eacute;es pr&eacute;d&eacute;finis pour les types de donn&eacute;es suivants : devise, date,
num&eacute;ro, t&eacute;l&eacute;phone et code postal.
Les formateurs de donn&eacute;es sont li&eacute;s aux contr&ocirc;les de saisie. Ils mettent correctement en forme les donn&eacute;es saisies par
l’utilisateur. Par exemple, un utilisateur peut saisir une date au format suivant :
120105
Un formateur, li&eacute; au contr&ocirc;le de saisie de texte, stocke et affiche la date au format suivant :
12/01/05
A l’instar des validateurs de donn&eacute;es, les formateurs de donn&eacute;es sont des composants Flex non visuels que vous pouvez
utiliser avec des balises MXML ou des classes ActionScript.
Pour plus d’informations, voir Formatting Data.
Configuration de l’acc&egrave;s aux services de donn&eacute;es
L’assistant Nouveau projet pour les projets Flex et les projets Flex mobiles pr&eacute;sente des options de configuration
d’acc&egrave;s aux services de donn&eacute;es. Les &eacute;tapes de l’assistant sont identiques pour les projets Flex et les projets Flex mobiles.
Vous pouvez configurer l’acc&egrave;s aux types de services suivants :
Services PHP
Services ColdFusion
Services Java
ASP.NET
Configuration de l’acc&egrave;s aux services PHP
L’acc&egrave;s aux donn&eacute;es de services PHP pr&eacute;suppose l’existence d’un serveur h&eacute;bergeant les services. Il peut s’agir d’un
serveur local ou d’un serveur appartenant &agrave; un r&eacute;seau local.
1 Dans l’assistant Nouveau projet, indiquez l’emplacement du projet. Pour les projets mobiles, sp&eacute;cifiez les
param&egrave;tres mobiles.
Voir &laquo; Projets Flex &raquo; &agrave; la page 88 et &laquo; Projets Flex mobiles &raquo; &agrave; la page 34.
2 S&eacute;lectionnez PHP comme type de serveurs d’applications.
3 Sp&eacute;cifiez la racine Web et l’URL racine pour le service. Cliquez sur Valider la configuration.
La racine Web et l’URL racine sp&eacute;cifi&eacute;es appartiennent g&eacute;n&eacute;ralement &agrave; votre environnement local. Vous pouvez
toutefois &eacute;galement acc&eacute;der &agrave; des serveurs r&eacute;seau. V&eacute;rifiez que le r&eacute;pertoire est partag&eacute; et que le compte sous lequel
Flash Builder est ex&eacute;cut&eacute; poss&egrave;de des droits d’acc&egrave;s en &eacute;criture.
V&eacute;rifiez que vous avez mapp&eacute; ou mont&eacute; un lecteur pour le serveur r&eacute;seau. Sp&eacute;cifiez ensuite le chemin vers le
serveur. Le chemin d’acc&egrave;s est sp&eacute;cifique &agrave; la plateforme. Par exemple :
Derni&egrave;re mise &agrave; jour le 10/11/2011
221
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
(Windows) \\10.192.18.12\serveur\racine Web
(Windows) Z:\racine Web
(Mac) /Volumes/racine Web
4 (Facultatif) Sp&eacute;cifiez le dossier de sortie de l’application.
5 Cliquez sur Terminer ou sur Suivant pour acc&eacute;der &agrave; d’autres options de configuration.
Voir &laquo; Chemins de g&eacute;n&eacute;ration, extension natives et autres options de configuration du projet &raquo; &agrave; la page 94.
Configuration de l’acc&egrave;s aux services ColdFusion
Pour acc&eacute;der aux donn&eacute;es qui utilisent ColdFusion, vous devez disposer d’Adobe ColdFusion&reg; 8 ou d’Adobe
ColdFusion 9. Pour plus d’informations, consulter la page produit de ColdFusion.
1 Dans l’assistant Nouveau projet, indiquez l’emplacement du projet. Pour les projets mobiles, sp&eacute;cifiez les
param&egrave;tres mobiles.
Voir &laquo; Projets Flex &raquo; &agrave; la page 88 et &laquo; Projets Flex mobiles &raquo; &agrave; la page 34.
2 Pour le type de serveurs d’applications, s&eacute;lectionnez ColdFusion, puis choisissez l’une des options suivantes.
Utiliser le service d’acc&egrave;s aux objets distants : si vous d&eacute;sactivez l’option Utiliser le service d’acc&egrave;s aux objets
distants, sp&eacute;cifiez la racine Web et l’URL racine &agrave; l’&eacute;tape suivante.
Si vous activez l’option Utiliser le service d’acc&egrave;s aux objets distants, vous pouvez effectuer les choix suivants.
• ADEP Data Services
Sp&eacute;cifiez ADEP Data Services en tant que type d’application ColdFusion uniquement si votre installation
ColdFusion est configur&eacute;e pour ADEP Data Services 2.6.1 (anciennement connu sous le nom de LiveCycle Data
Services). Voir Integrating Adobe LiveCycle Data Services ES 2.6 with Adobe ColdFusion 8.
G&eacute;n&eacute;ralement, le type de serveurs d’applications pour ADEP Data Services n’est pas ColdFusion, mais Java. Voir
&laquo; Configuration de l’acc&egrave;s aux services Java &raquo; &agrave; la page 222.
• BlazeDS
Sp&eacute;cifiez BlazeDS comme type d’application ColdFusion uniquement si votre installation ColdFusion 8 est
configur&eacute;e pour Adobe BlazeDS 3.1. Reportez-vous &agrave; Integrating BlazeDS with a ColdFusion 8 Installation.
G&eacute;n&eacute;ralement, le type de serveurs d’applications pour BlazeDS n’est pas ColdFusion, mais Java. Voir
&laquo; Configuration de l’acc&egrave;s aux services Java &raquo; &agrave; la page 222.
• ColdFusion Flash Remoting
Activez cette option si vous pr&eacute;voyez d’utiliser les outils de d&eacute;veloppement centr&eacute;s sur les donn&eacute;es disponibles
avec Flash Builder. Cette option s’applique &eacute;galement si vous utilisez Flash Remoting pour invoquer des
m&eacute;thodes dans les composants ColdFusion (CFC). Voir Cr&eacute;ation d’applications centr&eacute;es sur les donn&eacute;es avec
Flash Builder.
3 Sp&eacute;cifiez un emplacement de serveur, une racine Web, une URL racine et une racine du contexte.
Pour l’acc&egrave;s &agrave; un service d’objets distants, vous pouvez d&eacute;finir une configuration ColdFusion autonome ou une
configuration ColdFusion d&eacute;ploy&eacute;e sur un serveur d’applications Java.
• Autonome
Activez l’option Autonome si l’installation ColdFusion utilise la configuration du serveur.
Sp&eacute;cifiez l’emplacement du serveur ColdFusion, de la racine Web et de l’URL racine.
Derni&egrave;re mise &agrave; jour le 10/11/2011
222
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
• D&eacute;ploy&eacute;(e) vers le serveur d’applications Java
Utilisez l’option D&eacute;ploy&eacute;(e) vers le serveur d’applications Java si votre installation ColdFusion fait appel aux
configurations multiserveurs ou Java.
Sp&eacute;cifiez la racine Web, l’URL racine et la racine du contexte. Si vous faites appel &agrave; la configuration
multiserveurs ColdFusion, vous ne devrez g&eacute;n&eacute;ralement pas sp&eacute;cifier la racine du contexte.
La racine du contexte correspond en r&egrave;gle g&eacute;n&eacute;rale au dernier segment du chemin racine de l’URL lorsque vous
d&eacute;ployez ColdFusion en tant qu’application Web dans la configuration Java ColdFusion.
Pour sp&eacute;cifier l’emplacement du serveur ou de la racine Web, recherchez un r&eacute;pertoire local ou saisissez le chemin
vers un r&eacute;pertoire situ&eacute; sur un serveur r&eacute;seau. V&eacute;rifiez que le r&eacute;pertoire est partag&eacute; et que le compte sous lequel
Flash Builder est ex&eacute;cut&eacute; poss&egrave;de des droits d’acc&egrave;s en &eacute;criture.
V&eacute;rifiez que vous avez mapp&eacute; ou mont&eacute; un lecteur r&eacute;seau pour le serveur r&eacute;seau. Le chemin au serveur r&eacute;seau est
fonction de la plateforme. Par exemple :
(Windows) \\10.192.18.12\serveur\racine Web
(Windows) Z:\racine Web
(Mac) /Volumes/racine Web
4 Cliquez sur Valider la configuration pour v&eacute;rifier l’exactitude des param&egrave;tres sp&eacute;cifi&eacute;s.
Si le r&eacute;pertoire de la racine Web n’est pas accessible en &eacute;criture, Flash Builder affiche un avertissement.
5 S&eacute;lectionnez un dossier de sortie pour l’application compil&eacute;e.
6 Cliquez sur Terminer ou sur Suivant pour acc&eacute;der &agrave; d’autres options de configuration.
Voir &laquo; Chemins de g&eacute;n&eacute;ration, extension natives et autres options de configuration du projet &raquo; &agrave; la page 94.
Configuration de l’acc&egrave;s aux services Java
Cette configuration de projet vous permet de cr&eacute;er des projets Flex utilisant des classes de service Java avec l’option de
service d’acc&egrave;s aux objets distants. Si aucune option n’est s&eacute;lectionn&eacute;e et qu’un serveur Java est utilis&eacute;, un dossier de
sortie est cr&eacute;&eacute; sous la racine du serveur. Si le plug-in Eclipse Web Tools Project (WTP) est install&eacute;, vous pouvez cr&eacute;er
des projets mixtes Java et Flex avec ou sans service d’acc&egrave;s aux objets distants.
Remarque : ADEP Data Service (anciennement connu sous le nom de LiveCycle Data Services) et BlazeDS prennent en
charge des versions sp&eacute;cifiques du SDK Flex. Consultez le Tableau de compatibilit&eacute; ADEP Data Services pour d&eacute;couvrir
les versions du SDK Flex prises en charge par votre version d’ADEP Data Service. Ce tableau de compatibilit&eacute; r&eacute;pertorie
&eacute;galement les versions du SDK Flex prises en charge par BlazeDS.
1 Dans l’assistant Nouveau projet, indiquez l’emplacement du projet. Pour les projets mobiles, sp&eacute;cifiez les
param&egrave;tres mobiles.
Voir &laquo; Projets Flex &raquo; &agrave; la page 88 et &laquo; Projets Flex mobiles &raquo; &agrave; la page 34.
2 S&eacute;lectionnez Java comme type de serveurs d’applications.
3 (Facultatif) Cochez l’option Utiliser le service d’acc&egrave;s aux objets distants.
Data Services ES est s&eacute;lectionn&eacute; par d&eacute;faut. Vous pouvez s&eacute;lectionner BlazeDS. Si vous avez install&eacute; WTP, vous
pouvez aussi choisir de cr&eacute;er un projet mixte Java et Flex faisant appel &agrave; WTP (le dossier source Java est s&eacute;lectionn&eacute;
pour vous).
Derni&egrave;re mise &agrave; jour le 10/11/2011
223
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
4 Configurez le serveur d’applications Java.
• Si vous s&eacute;lectionnez les options Utiliser le service d’acc&egrave;s aux objets distants et Data Services ES ou BlazeDS,
sp&eacute;cifiez les param&egrave;tres racine :
Dossier racine : emplacement physique du serveur d’applications Web qui affiche les donn&eacute;es de votre
application (par exemple, C:\Program Files\Apache Software Foundation\Tomcat
5.5\webapps\myservices). Si vous utilisez un serveur distant, il doit se trouve sur un lecteur mapp&eacute; ou
accessible par chemin d’acc&egrave;s UNC.
URL racine : URL racine de l’application Web. Cette URL correspond &agrave; l’emplacement physique nomm&eacute; dans
Dossier racine ci-dessus. Pour BlazeDS sur Tomcat, il peut s’agir de l’URL :
http://localhost:8080/myservices
Pour Data Services, l’URL racine par d&eacute;faut est :
http://localhost:8400/lcds/
Si vous utilisez un serveur distant, il peut s’agir de l’URL suivante :
http://myserver.com:8400/lcds/.
Racine du contexte : la racine du contexte correspond g&eacute;n&eacute;ralement au dernier segment du chemin de l’URL
racine. Pour les exemples de l’URL racine donn&eacute;s ci-dessus, la racine contextuelle serait /myservices pour
BlazeDS et /lcds pour Data Service.
• Si vous avez s&eacute;lectionn&eacute; l’option Cr&eacute;er un projet mixte Java/Flex &agrave; l’aide de WTP (avec ou sans ADEP Data
Services) :
• Indiquez le nom des dossiers source et des ex&eacute;cutions cible Java et Flex.
Lorsque vous cr&eacute;ez un projet Flex avec ADEP Data Services, Flash Builder cr&eacute;e un r&eacute;pertoire portant le m&ecirc;me
nom que le projet ou utilise un r&eacute;pertoire existant portant ce nom. Ce r&eacute;pertoire est un sous-r&eacute;pertoire du
dossier racine que vous avez sp&eacute;cifi&eacute; pour le projet.
• Avec Data Services ES, pr&eacute;cisez un fichier flex.war qui se trouve dans le dossier d’installation du serveur.
Remarque : quelle que soit l’option choisie pour un projet ADEP Data Services dans Flash Builder, sp&eacute;cifiez un dossier
racine et une URL racine. Ces valeurs mappent la racine d’une application Web ADEP Data Services. Si vous
d&eacute;s&eacute;lectionnez les options, saisissez uniquement la racine Web et l’URL racine.
5 Sp&eacute;cifiez l’emplacement auquel le projet sera compil&eacute;.
6 Cliquez sur Terminer ou sur Suivant pour acc&eacute;der &agrave; d’autres options de configuration.
Voir &laquo; Chemins de g&eacute;n&eacute;ration, extension natives et autres options de configuration du projet &raquo; &agrave; la page 94.
Cr&eacute;ation d’un projet Flex avec ASP.NET
Si Microsoft Windows et Microsoft Visual Web Developer sont install&eacute;s, vous pouvez cr&eacute;er des projets Flex d&eacute;ploy&eacute;s
avec ASP.NET. De plus, si vous avez acc&egrave;s &agrave; un serveur de d&eacute;veloppement Internet Information Service (IIS), vous
pouvez cr&eacute;er des projets Flex avec un dossier de sortie Flex sous IIS.
1 Dans l’assistant Nouveau projet, indiquez l’emplacement du projet. Pour les projets mobiles, sp&eacute;cifiez les
param&egrave;tres mobiles.
Voir &laquo; Projets Flex &raquo; &agrave; la page 88 et &laquo; Projets Flex mobiles &raquo; &agrave; la page 34.
2 S&eacute;lectionnez ASP.NET comme type de serveurs d’applications.
Derni&egrave;re mise &agrave; jour le 10/11/2011
224
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
3 S&eacute;lectionnez le serveur ASP.NET :
• Si vous utilisez un serveur de d&eacute;veloppement ASP.NET, vous n’avez pas besoin de pr&eacute;ciser l’emplacement du
serveur.
• Si vous utilisez IIS, entrez la racine de l’application Web et l’URL de l’application Web.
• Sp&eacute;cifiez le dossier de sortie de l’application
4 Cliquez sur Terminer ou sur Suivant pour acc&eacute;der &agrave; d’autres options de configuration.
Voir &laquo; Chemins de g&eacute;n&eacute;ration, extension natives et autres options de configuration du projet &raquo; &agrave; la page 94.
Modification des options de serveur des projets existants
Vous serez probablement amen&eacute; dans certains cas &agrave; modifier la configuration d’origine du serveur d’un projet. Pour
une application Web ou d’ordinateur, acc&eacute;dez &agrave; la fen&ecirc;tre des propri&eacute;t&eacute;s du projet concern&eacute;.
S&eacute;lectionnez l’option Serveur Flex pour ajouter ou modifier les options du serveur du projet.
• S&eacute;lectionnez Aucun pour supprimer la configuration serveur d’un projet.
La suppression de la configuration serveur d’un projet conduit &eacute;galement &agrave; la suppression de tout fichier SWC
ajout&eacute; au chemin d’acc&egrave;s &agrave; la biblioth&egrave;que pour ce type de serveur.
• S&eacute;lectionnez un type de serveur &agrave; modifier ou ajoutez la configuration serveur d’un projet.
Toutes les options de serveur pour la configuration serveur s&eacute;lectionn&eacute;e sont disponibles. Pour plus d’informations
sur les param&egrave;tres de configuration du serveur, voir &laquo; Projets Flex &raquo; &agrave; la page 88.
La modification du type de serveur d’un projet peut provoquer des erreurs dans le code existant reposant sur le type
de serveur d’origine. Recherchez et corrigez toutes les erreurs r&eacute;sultantes dans votre code.
Surveillance des applications qui acc&egrave;dent aux services
de donn&eacute;es
Le Moniteur de r&eacute;seau est un outil ing&eacute;nieux permettant de surveiller et de d&eacute;boguer les applications acc&eacute;dant aux
services de donn&eacute;es. Le Moniteur de r&eacute;seau permet d’analyser les donn&eacute;es transmises entre une application et un
service de donn&eacute;es. Il examine &eacute;galement les donn&eacute;es XML, AMF et JSON envoy&eacute;es avec les protocoles SOAP, AMF,
HTTP et HTTPS.
Le Moniteur de r&eacute;seau est disponible dans les vues Flash de d&eacute;veloppement et de d&eacute;bogage.
Activation de la surveillance du r&eacute;seau
Le Moniteur de r&eacute;seau peut &ecirc;tre activ&eacute; individuellement pour chaque projet Flex. L’&eacute;tat du moniteur (activ&eacute; ou
d&eacute;sactiv&eacute;) s’applique &agrave; toutes les applications de ce projet. Il est impossible d’activer ou de d&eacute;sactiver le Moniteur de
r&eacute;seau pour des applications individuelles.
Par d&eacute;faut, le Moniteur de r&eacute;seau n’est pas activ&eacute;. Activez le Moniteur de r&eacute;seau en s&eacute;lectionnant l’ic&ocirc;ne Activer le
moniteur dans la barre d’outils de la vue du Moniteur.
Cette proc&eacute;dure suppose que vous &ecirc;tes dans la perspective D&eacute;veloppement Flex ou D&eacute;bogage Flex.
1 Si la vue Moniteur de r&eacute;seau n’est pas ouverte, s&eacute;lectionnez Fen&ecirc;tre dans le menu Flash Builder, puis Affichage
d’une vue &gt; Flash Builder &gt; Moniteur de r&eacute;seau.
Derni&egrave;re mise &agrave; jour le 10/11/2011
225
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
2 Si le Moniteur de r&eacute;seau n’est pas activ&eacute;, cliquez sur le bouton Activer le moniteur de r&eacute;seau dans la barre d’outils
de la vue Moniteur de r&eacute;seau. Cet bouton permet de l’activer et de le d&eacute;sactiver.
Surveillance des services distants
Pour surveiller l’application, activez le Moniteur de r&eacute;seau et ex&eacute;cutez la version de d&eacute;veloppement ou de d&eacute;bogage de
l’application.
En g&eacute;n&eacute;ral, le Moniteur de r&eacute;seau capture et stocke toutes les donn&eacute;es d’&eacute;v&eacute;nements jusqu’&agrave; ce que vous quittiez
l’application ou effaciez les donn&eacute;es de mani&egrave;re explicite. Les &eacute;v&eacute;nements s’affichent dans l’ordre chronologique.
D&eacute;marrage d’une session de surveillance
1 Ex&eacute;cutez la version de d&eacute;veloppement ou de d&eacute;bogage de l’application qui acc&egrave;de aux services distants.
2 Pour chaque acc&egrave;s &agrave; un service distant, le Moniteur de r&eacute;seau r&eacute;pertorie les &eacute;l&eacute;ments suivants :
• Heure de la requ&ecirc;te
• Service
• Demande d’un service
• Heure de la r&eacute;ponse
• Temps &eacute;coul&eacute;
3 S&eacute;lectionnez un en-t&ecirc;te de colonne pour trier les donn&eacute;es renvoy&eacute;es en fonction des valeurs de ladite colonne.
Cliquez de nouveau sur la colonne pour inverser l’ordre des donn&eacute;es.
4 S&eacute;lectionnez les onglets de requ&ecirc;te et de param&egrave;tres situ&eacute;s au bas du moniteur pour afficher les d&eacute;tails de
l’op&eacute;ration.
Les donn&eacute;es envoy&eacute;es dans la requ&ecirc;te, ainsi que les autres informations concernant la requ&ecirc;te, peuvent &ecirc;tre
visualis&eacute;es &agrave; partir de ces onglets.
5 S&eacute;lectionnez les onglets de r&eacute;ponse et de r&eacute;sultats situ&eacute;s au bas du moniteur pour afficher les d&eacute;tails de la r&eacute;ponse.
Les donn&eacute;es envoy&eacute;es dans la requ&ecirc;te, ainsi que les autres informations concernant la r&eacute;ponse, peuvent &ecirc;tre
visualis&eacute;es &agrave; partir de ces onglets.
6 Double-cliquez sur une entr&eacute;e pour acc&eacute;der au code source de l’op&eacute;ration.
L’&eacute;diteur de source de Flash Builder s’ouvre ; la ligne correspondant au code source est mise en &eacute;vidence.
Remarque : dans la plupart des cas, le Moniteur de r&eacute;seau peut faire correspondre un &eacute;v&eacute;nement au code source Flex.
Certains &eacute;v&eacute;nements toutefois sont d&eacute;clench&eacute;s en dehors de la port&eacute;e du Moniteur de r&eacute;seau. Dans ce cas, le Moniteur
ne trouvera pas le code source Flex.
7 Cliquez sur le bouton Enregistrer de la barre d’outils du Moniteur de r&eacute;seau pour inscrire toutes les informations
saisies dans un fichier XML.
Remarque : utilisez le fichier XML g&eacute;n&eacute;r&eacute; pour &eacute;tudier les donn&eacute;es hors ligne. Il est impossible d’importer des donn&eacute;es
de ce fichier vers le Moniteur de r&eacute;seau.
8 Cliquez sur l’ic&ocirc;ne Effacer dans la barre d’outils du Moniteur de r&eacute;seau pour supprimer toutes les informations du
moniteur.
Derni&egrave;re mise &agrave; jour le 10/11/2011
226
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Interruption d’une session de surveillance
Vous pouvez interrompre, puis reprendre, la surveillance du r&eacute;seau. L’interruption et la reprise d’une session
s’appliquent &agrave; toutes les applications du projet Flex. Par exemple, il est impossible d’interrompre l’application d’un
projet et de continuer la surveillance d’une autre.
1 Cliquez sur le bouton Interrompre dans la barre d’outils du Moniteur de r&eacute;seau pour interrompre la surveillance
d’une session.
2 Cliquez sur le bouton Reprendre pour continuer la surveillance de la session.
Arr&ecirc;t d’une session de surveillance
Pour arr&ecirc;ter la surveillance d’une session, d&eacute;sactivez le Moniteur de r&eacute;seau.
1 (Facultatif) Fermez le Moniteur de r&eacute;seau.
Remarque : la fermeture du Moniteur de r&eacute;seau ne suffit pas &agrave; mettre un terme &agrave; la session de surveillance. La
surveillance reste active, m&ecirc;me si le Moniteur de r&eacute;seau est ferm&eacute;.
2 Cliquez sur le bouton Activer le moniteur.
Cette ic&ocirc;ne permet de l’activer et de le d&eacute;sactiver.
Remarque : la d&eacute;sactivation du Moniteur de r&eacute;seau s’applique &agrave; toutes les applications du projet Flex.
Prise en charge du protocole HTTPS
Le Moniteur de r&eacute;seau prend en charge la surveillance des appels HTTPS dirig&eacute;s vers un serveur certifi&eacute; par une
autorit&eacute; de certification ou par un certificat autosign&eacute;.
Pour surveiller les appels pass&eacute;s par protocole HTTPS, modifiez la pr&eacute;f&eacute;rence par d&eacute;faut du Moniteur de r&eacute;seau en
activant l’option Ignorer les v&eacute;rifications de s&eacute;curit&eacute; SSL. Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et acc&eacute;dez &agrave; Flash
Builder &gt; Moniteur de r&eacute;seau.
Affichage des donn&eacute;es du Moniteur de r&eacute;seau
Le volet de gauche du Moniteur de r&eacute;seau fournit des informations sur la source des donn&eacute;es. Il affiche les
informations suivantes :
• L’URL source du service de donn&eacute;es
• Le type de service affich&eacute; :
Par exemple RemoteService, HTTPService ou WebService.
• Le temps de demande, le temps de r&eacute;ponse et le temps &eacute;coul&eacute; pour la demande de donn&eacute;es
• Le nom de l’op&eacute;ration appel&eacute;e &agrave; partir du service de donn&eacute;es
Le Moniteur de r&eacute;seau comporte deux onglets, l’un pour l’affichage des donn&eacute;es de demande et l’autre pour l’affichage
des donn&eacute;es de r&eacute;ponse.
Les donn&eacute;es des demandes et r&eacute;ponses peuvent &ecirc;tre visionn&eacute;es en structure arborescente, dans une vue brute ou en
affichage hexad&eacute;cimal. Passez d’un affichage &agrave; l’autre en s&eacute;lectionnant l’ic&ocirc;ne correspondante.
• Arborescence
Affiche les donn&eacute;es XML, JSON et AMF en structure arborescente. L’arborescence est la vue par d&eacute;faut.
• Vue brute
Affiche les donn&eacute;es en cours de transfert.
Derni&egrave;re mise &agrave; jour le 10/11/2011
227
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
• Affichage hexad&eacute;cimal
Affiche les donn&eacute;es au format hexad&eacute;cimal. Cet affichage est indiqu&eacute; en particulier pour le d&eacute;bogage des donn&eacute;es
binaires envoy&eacute;es par l’interm&eacute;diaire d’un r&eacute;seau.
Par d&eacute;faut, le Moniteur de r&eacute;seau efface toutes les donn&eacute;es enregistr&eacute;es &agrave; chaque lancement d’une application. Vous
pouvez cependant modifier ce comportement par d&eacute;faut et conserver toutes les donn&eacute;es de surveillance. Les donn&eacute;es
conserv&eacute;es sont celles issues de toutes les applications de tous les projets. Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et
acc&eacute;dez &agrave; Flash Builder &gt; Moniteur de r&eacute;seau. D&eacute;sactivez l’option Effacer les entr&eacute;es au d&eacute;marrage.
Enregistrement des donn&eacute;es du Moniteur de r&eacute;seau
Vous pouvez enregistrer les donn&eacute;es du Moniteur de r&eacute;seau dans un fichier XML. Pour ce faire, cliquez sur le bouton
Enregistrer de la vue Moniteur de r&eacute;seau.
Surveillance de plusieurs applications
Vous pouvez surveiller plusieurs applications en m&ecirc;me temps. Il existe deux sc&eacute;narios possibles pour surveiller
plusieurs applications :
• Surveillance de plusieurs applications d’un m&ecirc;me projet
Vous pouvez uniquement disposer d’un Moniteur de r&eacute;seau par projet Flex. Lors de la surveillance de plusieurs
applications d’un m&ecirc;me projet, les &eacute;v&eacute;nements de toutes les applications s’affichent dans le moniteur en fonction
de l’heure &agrave; laquelle ils surviennent.
Le moniteur ne permet pas de filtrer les &eacute;v&eacute;nements selon une application sp&eacute;cifique.
• Surveillance de plusieurs applications dans diff&eacute;rents projets
Vous pouvez ouvrir un Moniteur de r&eacute;seau pour chaque projet Flex actif. Chaque Moniteur de r&eacute;seau est
ind&eacute;pendant : il affiche uniquement les &eacute;v&eacute;nements de son projet sp&eacute;cifique.
L’interruption ou la d&eacute;sactivation d’un Moniteur de r&eacute;seau dans un projet ne s’applique pas aux moniteurs d’autres
projets.
Surveillance des applications mobiles
Le Moniteur de r&eacute;seau permet d’analyser les donn&eacute;es transmises entre une application mobile et un service de
donn&eacute;es.
Vous pouvez param&eacute;trer le Moniteur de r&eacute;seau de mani&egrave;re &agrave; ce qu’il surveille les applications mobiles, suivez pour cela
la proc&eacute;dure suivante :
1 Ex&eacute;cutez la configuration de d&eacute;bogage de l’application avec le Moniteur de r&eacute;seau activ&eacute;.
2 Sp&eacute;cifiez une m&eacute;thode de lancement.
• Sur ordinateur : s&eacute;lectionnez cette m&eacute;thode de lancement si vous ne disposez pas de p&eacute;riph&eacute;rique mobile et
souhaitez surveiller l’application sur votre ordinateur.
S&eacute;lectionnez Dans le simulateur AIR afin de surveiller l’application sur un p&eacute;riph&eacute;rique simul&eacute; qui est cr&eacute;&eacute; &agrave;
l’aide d’ADL (AIR Debug Launcher). Le p&eacute;riph&eacute;rique est simul&eacute; en prenant compte de la configuration de
p&eacute;riph&eacute;rique que vous s&eacute;lectionnez.
• Sur le p&eacute;riph&eacute;rique : s&eacute;lectionnez cette m&eacute;thode de lancement pour surveiller l’application sur un p&eacute;riph&eacute;rique
mobile.
Derni&egrave;re mise &agrave; jour le 10/11/2011
228
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Cette m&eacute;thode de lancement est habituellement utilis&eacute;e afin de surveiller des applications qui acc&egrave;dent au code
natif du p&eacute;riph&eacute;rique. Flash Builder peut acc&eacute;der au p&eacute;riph&eacute;rique connect&eacute; au port USB de l’ordinateur ou au
r&eacute;seau via une connexion Wi-Fi.
Que vous utilisiez une connexion USB ou Wi-Fi, le Moniteur de r&eacute;seau enregistre uniquement les appels si le
p&eacute;riph&eacute;rique et l’ordinateur h&ocirc;te sont connect&eacute;s au m&ecirc;me r&eacute;seau via Wi-Fi.
Dans le cas o&ugrave; le Moniteur de r&eacute;seau ne parvient pas &agrave; &eacute;tablir une connexion Wi-Fi, Flash Builder affiche une
bo&icirc;te de dialogue qui vous demande d’indiquer l’adresse IP de l’ordinateur h&ocirc;te. Une fois la connexion &eacute;tablie,
les appels r&eacute;seau de l’application sont alors redirig&eacute;s vers Flash Builder via le r&eacute;seau Wi-Fi du p&eacute;riph&eacute;rique.
3 Surveillez l’application mobile de la m&ecirc;me fa&ccedil;on que vous surveillez une application Web ou d’ordinateur qui
acc&egrave;de aux services de donn&eacute;es. Pour plus d’informations, voir Surveillance des applications qui acc&egrave;dent aux
services de donn&eacute;es.
Limites du Moniteur de r&eacute;seau
La surveillance des donn&eacute;es du r&eacute;seau pr&eacute;sente les deux restrictions suivantes :
• Le Moniteur de r&eacute;seau ne prend pas en charge les applications cr&eacute;&eacute;es dans le cadre de projets purement
ActionScript ou de biblioth&egrave;que.
• De m&ecirc;me, il ne prend pas en charge le protocole Real Time Messaging Protocol (RTMP). Vous ne pouvez pas, par
exemple, surveiller de la vid&eacute;o en flux continu.
Utilisation de projets de biblioth&egrave;que Flex
Les projets de biblioth&egrave;que vous permettent de cr&eacute;er des biblioth&egrave;ques de code personnalis&eacute; que vous pouvez partager
entre vos applications ou distribuer &agrave; d’autres d&eacute;veloppeurs. Un projet de biblioth&egrave;que g&eacute;n&egrave;re un fichier SWC, c’est&agrave;-dire un fichier archive pour les composants Flex ainsi que pour d’autres ressources. Par exemple, la structure Flex
est contenue dans des fichiers SWC. Lorsque vous cr&eacute;ez un projet Flex, les fichiers SWC de la structure Flex sont
ajout&eacute;s au chemin de la biblioth&egrave;que du projet. Vous pouvez afficher et modifier le chemin de la biblioth&egrave;que dans la
page de propri&eacute;t&eacute;s du chemin de g&eacute;n&eacute;ration du projet (pour les projets Flex, s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin
d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration Flex).
Un fichier SWF est archiv&eacute; dans un fichier SWC contenant des composants, des ressources et un fichier catalog.xml,
fichier manifeste des &eacute;l&eacute;ments contenus dans le fichier SWF. Le fichier SWF contient g&eacute;n&eacute;ralement un ou plusieurs
composants et toute autre ressource requise. L’ajout de la biblioth&egrave;que &agrave; un projet vous permet d’utiliser ces
composants et en active les conseils de code.
Les biblioth&egrave;ques SWC constituent une m&eacute;thode pratique d’assemblage et de distribution des composants, mais
servent &eacute;galement de th&egrave;mes, l’aspect visuel des applications cr&eacute;&eacute;es dans Flex. Un fichier de th&egrave;me SWC contient un
fichier CSS ainsi que toutes les ressources graphiques associ&eacute;es. Pour plus d’informations sur la cr&eacute;ation et l’utilisation
des th&egrave;mes, voir About themes.
Les biblioth&egrave;ques sont utiles si vous cr&eacute;ez des composants int&eacute;gralement dans ActionScript et que vous les utilisez en
mode Cr&eacute;ation dans Flash Builder. Les composants ActionScript ne sont pas rendus visuellement en mode Cr&eacute;ation
tant qu’ils ne sont pas compil&eacute;s dans un fichier SWF. En ajoutant des composants ActionScript dans un projet de
biblioth&egrave;que, vous cr&eacute;ez un fichier SWF qui est contenu dans un fichier SWC. Vous pouvez ajouter la biblioth&egrave;que &agrave;
un chemin d’acc&egrave;s &agrave; la biblioth&egrave;que d’un projet et les composants ActionScript sont rendus visuellement en mode
Cr&eacute;ation lorsque vous les ajoutez &agrave; l’application.
Derni&egrave;re mise &agrave; jour le 10/11/2011
229
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Configuration de biblioth&egrave;ques pour vos applications
Vous pouvez utiliser les biblioth&egrave;ques SWC dans vos projets des fa&ccedil;ons suivantes.
Fusionn&eacute;es dans l’application : lorsque vous ajoutez un fichier SWC au chemin d’acc&egrave;s &agrave; la biblioth&egrave;que du projet, les
composants contenus dans la biblioth&egrave;que sont disponibles pour &ecirc;tre utilis&eacute;s dans l’application. Lorsque vous g&eacute;n&eacute;rez
l’application, seuls les composants de biblioth&egrave;que que vous avez utilis&eacute;s dans les faits sont compil&eacute;s dans le fichier
SWF de l’application. En d’autres termes, tout le code de votre application est fusionn&eacute; dans un seul fichier SWF. C’est
la fa&ccedil;on la plus courante et la plus simple d’utiliser les composants de biblioth&egrave;ques.
Externes &agrave; l’application : vous pouvez conserver les composants de biblioth&egrave;que s&eacute;par&eacute;ment du fichier SWF compil&eacute;
pour qu’ils ne soient pas fusionn&eacute;s dans le fichier. Le compilateur r&eacute;sout tout le code contenu dans la biblioth&egrave;que
utilis&eacute; par l’application, mais ne le fusionne pas dans le fichier SWF de l’application. L’avantage de cette m&eacute;thode est
de r&eacute;duire la taille du fichier SWF de l’application. Les composants contenus dans le fichier SWC sont extraits et
charg&eacute;s dans la m&eacute;moire selon les besoins, au moment de l’ex&eacute;cution.
Biblioth&egrave;que partag&eacute;e &agrave; l’ex&eacute;cution : dans les projets Flex uniquement, vous pouvez &eacute;galement utiliser des fichiers
SWC en tant que biblioth&egrave;que partag&eacute;e &agrave; l’ex&eacute;cution (Runtime Shared Library, RSL), qui s’apparente &agrave; une
biblioth&egrave;que &agrave; liaison dynamique sur d’autres plateformes. Vous pouvez utiliser des fichiers SWC en tant que
biblioth&egrave;que RSL si vous disposez d’un ensemble de composants qui sont utilis&eacute;s par plusieurs applications.
Le partage de composants entre applications &agrave; l’aide de ce type de biblioth&egrave;que pr&eacute;sente plusieurs avantages. Dans un
premier temps, la biblioth&egrave;que est charg&eacute;e en m&eacute;moire une fois, plac&eacute;e dans le cache, puis mise &agrave; disposition de toutes
les applications faisant appel &agrave; ces composants. Dans un second temps, les composants se trouvant dans la biblioth&egrave;que
sont charg&eacute;s uniquement selon les besoins, ce qui r&eacute;duit le temps de d&eacute;marrage de l’application, car la taille de
l’application est moindre. Le probl&egrave;me potentiel de cette m&eacute;thode est que la biblioth&egrave;que partag&eacute;e &agrave; l’ex&eacute;cution est
charg&eacute;e en m&eacute;moire dans son int&eacute;gralit&eacute;, plut&ocirc;t que les composants individuels que les applications utilisent. Pour
plus d’informations sur l’utilisation des fichiers SWC en tant que RSL, voir Runtime Shared Libraries.
Cr&eacute;ation de projets de biblioth&egrave;que Flex
Lorsque vous cr&eacute;ez un projet de biblioth&egrave;que, l’assistant Nouveau projet de biblioth&egrave;que Flex vous guide &agrave; travers les
diff&eacute;rentes &eacute;tapes et vous demande d’indiquer le nom du projet, son emplacement, ainsi que le chemin de g&eacute;n&eacute;ration.
La premi&egrave;re &eacute;tape de la cr&eacute;ation d’un fichier SWC dans Flash Builder est la cr&eacute;ation d’une projet de biblioth&egrave;que Flex.
Une fois le projet de biblioth&egrave;que cr&eacute;&eacute;, vous ajoutez des composants, sp&eacute;cifiez les &eacute;l&eacute;ments du projet de biblioth&egrave;que
&agrave; inclure dans le fichier SWC, puis g&eacute;n&eacute;rez le projet afin de cr&eacute;er le fichier SWC.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet de biblioth&egrave;que Flex.
2 Saisissez un nom de projet, puis pr&eacute;cisez les &eacute;l&eacute;ments suivants.
Emplacement du projet : l’emplacement par d&eacute;faut est l’espace de travail actuel. Sous Windows, l’emplacement de
l’espace de travail par d&eacute;faut est C:\Documents and Settings\nom d’utilisateurAdobe Flash Builder\. Sous
Macintosh, l’emplacement de l’espace de travail par d&eacute;faut est /Users/nom d’utilisateurAdobe Flash Builder/. Pour
choisir un emplacement de projet diff&eacute;rent, d&eacute;sactivez l’option Utiliser l’emplacement par d&eacute;faut.
Configuration : vous pouvez pr&eacute;ciser si le projet de biblioth&egrave;que Flex utilise des biblioth&egrave;ques g&eacute;n&eacute;riques ou
mobiles. Les biblioth&egrave;ques g&eacute;n&eacute;riques sont utilis&eacute;es dans les projets Web, d’ordinateur et mobiles.
Vous pouvez &eacute;galement sp&eacute;cifier si le projet de biblioth&egrave;que Flex doit &ecirc;tre compatible avec Flash Catalyst. Dans ce
cas, les biblioth&egrave;ques g&eacute;n&eacute;riques sont utilis&eacute;es. Les biblioth&egrave;ques mobiles ne sont pas prises en charge pour les
projets compatibles avec Flash Catalyst.
Version SDK Flex : choisissez la version par d&eacute;faut ou sp&eacute;cifiez-en une. Vous pouvez aussi cliquer sur le lien
Configurer les SDK Flex pour ajouter, modifier ou supprimer des SDK sur la page principale Pr&eacute;f&eacute;rences.
Derni&egrave;re mise &agrave; jour le 10/11/2011
230
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Inclure les biblioth&egrave;ques Adobe AIR : s&eacute;lectionnez cette option si votre biblioth&egrave;que doit utiliser des fonctions AIR,
telles que l’acc&egrave;s aux API AIR. Flash Builder change alors le chemin d’acc&egrave;s &agrave; la biblioth&egrave;que de ce nouveau projet
de biblioth&egrave;que Flex de mani&egrave;re qu’il contienne les fichiers airglobal.swc et airframework.swc. Les projets Web Flex
ne peuvent pas utiliser cette biblioth&egrave;que.
Ne s&eacute;lectionnez pas cette option si vous cr&eacute;ez une biblioth&egrave;que g&eacute;n&eacute;rique destin&eacute;e &agrave; une utilisation exclusive dans
une application Web, ou dans une application Web ou AIR.
3 Cliquez sur Suivant.
4 (Facultatif) D&eacute;finissez les informations concernant le chemin de g&eacute;n&eacute;ration. Vous pouvez, par exemple, ajouter des
dossiers au chemin source du projet qui contient les composants &agrave; inclure dans le fichier SWC. Vous pouvez
&eacute;galement ajouter d’autres projets, dossiers ou fichiers SWC de biblioth&egrave;que &agrave; inclure dans votre projet de
biblioth&egrave;que. Voir &laquo; Utilisation des fichiers SWC dans le cadre des projets &raquo; &agrave; la page 231.
5 Une fois les param&egrave;tres du projet saisis, cliquez sur Terminer.
Pour conna&icirc;tre les meilleures pratiques lors de la cr&eacute;ation de biblioth&egrave;ques Flex, voir l’article Three points to
remember when creating a library de Xavi Beumala, expert de la communaut&eacute; Adobe Flex.
Cr&eacute;ation d’un projet de biblioth&egrave;que AIR
Pour cr&eacute;er une biblioth&egrave;que de code AIR pour plusieurs projets AIR, g&eacute;n&eacute;rez un projet de biblioth&egrave;que AIR en faisant
appel &agrave; l’assistant standard de projet de biblioth&egrave;que Flex.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet de biblioth&egrave;que Flex.
2 Entrez un nom de projet.
3 Activez l’option Inclure les biblioth&egrave;ques Adobe AIR, puis cliquez sur Suivant.
4 Modifiez si n&eacute;cessaire le chemin de g&eacute;n&eacute;ration, puis cliquez sur Terminer. Pour plus d’informations sur la cr&eacute;ation
de projets de biblioth&egrave;que, voir &laquo; A propos des projets de biblioth&egrave;que &raquo; dans l’Aide de Flash Builder.
Ajout de composants &agrave; un projet de biblioth&egrave;que
Il existe plusieurs fa&ccedil;ons d’ajouter des composants &agrave; un projet de biblioth&egrave;que :
• Vous pouvez ajouter des composants, nouveaux ou existants personnalis&eacute;s, des classes ActionScript et d’autres
ressources au projet.
• Vous pouvez cr&eacute;er des liens avec des composants existant dans d’autres projets de l’espace de travail (voir &laquo; Liaison
&agrave; des ressources situ&eacute;es en dehors de l’espace de travail du projet &raquo; &agrave; la page 44).
• Vous pouvez ajouter un dossier li&eacute; qui contient des composants au chemin source du projet de biblioth&egrave;que (voir
&laquo; Ajout d’un dossier de ressources externes au chemin d’acc&egrave;s source &raquo; &agrave; la page 46).
Remarque : tous les composants que vous incluez dans le projet de biblioth&egrave;que doivent &ecirc;tre associ&eacute;s au projet de
biblioth&egrave;que (directement ou en tant que ressources li&eacute;es).
S&eacute;lection d’&eacute;l&eacute;ments du projet de biblioth&egrave;que &agrave; inclure dans le fichier SWC
Pour s&eacute;lectionner les &eacute;l&eacute;ments (composants et ressources) &agrave; inclure dans le fichier SWC, proc&eacute;dez comme suit :
1 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin de g&eacute;n&eacute;ration de la biblioth&egrave;que Flex.
Les composants que vous avez ajout&eacute;s au projet (soit directement soit en les reliant) s’affichent dans l’onglet Classes.
2 S&eacute;lectionnez les classes de composants &agrave; inclure dans le fichier SWC.
Derni&egrave;re mise &agrave; jour le 10/11/2011
231
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
3 (Facultatif) Sous l’onglet Ressources, s&eacute;lectionnez les ressources &agrave; inclure dans le fichier SWC.
4 Une fois que vous avez effectu&eacute; vos s&eacute;lections, cliquez sur OK.
Cr&eacute;ation d’un projet de biblioth&egrave;que
Une fois que vous avez s&eacute;lectionn&eacute; les &eacute;l&eacute;ments &agrave; inclure dans le fichier SWC et si vous avez s&eacute;lectionn&eacute; l’option de
g&eacute;n&eacute;ration automatique, le fichier SWC est compil&eacute; imm&eacute;diatement et g&eacute;n&eacute;r&eacute; dans le dossier de sortie du projet. Si
vous g&eacute;n&eacute;rez vos projets manuellement, vous pouvez cr&eacute;er le projet de biblioth&egrave;que quand vous le souhaitez en
s&eacute;lectionnant Projet &gt; G&eacute;n&eacute;rer le projet ou G&eacute;n&eacute;rer tout.
La cr&eacute;ation du projet de biblioth&egrave;que g&eacute;n&egrave;re un fichier SWC que vous pouvez partager avec d’autres applications ou
utilisateurs.
Un fichier SWC est un fichier archive. Vous pouvez l’ouvrir gr&acirc;ce &agrave; n’importe quel utilitaire d’archivage, tel que
WinZip. Les fichiers library.swf et catalog.xml sont contenus dans le fichier SWC, ainsi que les fichiers de propri&eacute;t&eacute;s
et autre ressources incorpor&eacute;es.
Vous pouvez exporter la biblioth&egrave;que sous la forme d’un r&eacute;pertoire ouvert plut&ocirc;t qu’en tant que fichier SWC. Vous
exportez g&eacute;n&eacute;ralement une biblioth&egrave;que en tant que r&eacute;pertoire ouvert si vous pr&eacute;voyez de faire appel au fichier
library.swf dans le fichier SWC en tant que biblioth&egrave;que RSL.
Pour ce faire, vous devez d&eacute;finir les options directory et output du compilateur. D&eacute;finissez l’option output comme
le nom du r&eacute;pertoire &agrave; cr&eacute;er et l’option directory sur true pour indiquer que vous voulez ouvrir le r&eacute;pertoire et non
un fichier SWC lorsque vous g&eacute;n&eacute;rez la biblioth&egrave;que. Pour modifier les options du compilateur, s&eacute;lectionnez Projet &gt;
Propri&eacute;t&eacute;s &gt; Compilateur de biblioth&egrave;que Flex et ajoutez les options au champ &laquo; Arguments suppl&eacute;mentaires de
compilateur &raquo;, par exemple :
-directory=true -output=myOpenDir
Flash Builder cr&eacute;e un r&eacute;pertoire dans le projet nomm&eacute; myOpenDir et y enregistre le contenu du fichier SWC.
Utilisation des fichiers SWC dans le cadre des projets
Pour pouvoir utiliser des fichiers SWC dans vos projets Flex, vous devez les ajouter au chemin d’acc&egrave;s &agrave; la biblioth&egrave;que
du projet. Les fichiers SWC peuvent se trouver dans le projet, dans un projet de biblioth&egrave;que Flex, dans un dossier
partag&eacute; dans l’espace de travail ou dans tout autre emplacement li&eacute; au projet (en utilisant un dossier partag&eacute; qui a &eacute;t&eacute;
ajout&eacute; au chemin source du projet, par exemple).
Lorsque vous utilisez des fichiers SWC dans des applications, certaines options de configuration d&eacute;terminent s’ils sont
li&eacute;s de mani&egrave;re statique ou dynamique &agrave; l’application, s’ils sont fusionn&eacute;s dans le fichier SWF de l’application ou s’ils
sont externes et si leur acc&egrave;s se fait s&eacute;par&eacute;ment au moment de l’ex&eacute;cution.
Ajout d’un fichier SWC au chemin d’acc&egrave;s &agrave; la biblioth&egrave;que
1 S&eacute;lectionnez un projet dans l’Explorateur de packages, puis cliquez sur Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin d’acc&egrave;s &agrave; la
g&eacute;n&eacute;ration Flex.
2 Cliquez sur l’onglet Chemin d’acc&egrave;s &agrave; la biblioth&egrave;que.
3 S&eacute;lectionnez l’une des options suivantes pour ajouter des fichiers SWC.
Ajouter un projet : ajoute un projet de biblioth&egrave;que Flex.
Ajouter un dossier SWC : permet d’ajouter un dossier contenant des fichiers SWC.
Ajouter un fichier SWC : ajoute un fichier SWC compil&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
232
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Ajouter un SDK Flex : permet d’ajouter d’autres SDK Flex. Ce bouton est d&eacute;sactiv&eacute; si le chemin d’acc&egrave;s &agrave; la
biblioth&egrave;que du projet contient d&eacute;j&agrave; un SDK Flex. Si vous supprimez le SDK Flex existant du chemin d’acc&egrave;s &agrave; la
biblioth&egrave;que, le bouton est activ&eacute;. Lorsque vous cliquez sur ce bouton, un nœud SDK Flex est ajout&eacute;, mais aucune
invite ne pr&eacute;cise lequel. Pour pr&eacute;ciser quel SDK Flex utiliser, s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Compilateur Flex.
4 Saisissez ou recherchez l’emplacement du ficher SWC, du projet ou du dossier, puis s&eacute;lectionnez-le. Cliquez sur OK.
Le fichier SWC, projet de biblioth&egrave;que ou dossier est ajout&eacute; au chemin d’acc&egrave;s &agrave; la biblioth&egrave;que.
Fusion du fichier SWC dans le fichier SWF de l’application au moment de la compilation
1 S&eacute;lectionnez un projet dans l’Explorateur de packages, puis cliquez sur Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin d’acc&egrave;s &agrave; la
g&eacute;n&eacute;ration Flex.
2 Sous l’onglet Chemin d’acc&egrave;s &agrave; la biblioth&egrave;que, s&eacute;lectionnez et d&eacute;veloppez l’entr&eacute;e du fichier SWC pour en afficher
les options.
3 Cliquez deux fois sur l’option Type de lien. La bo&icirc;te de dialogue Options de l’&eacute;l&eacute;ment de chemin d’acc&egrave;s &agrave; la
biblioth&egrave;que appara&icirc;t.
4 S&eacute;lectionnez l’option Fusionn&eacute; dans le code, puis cliquez sur OK.
Cette proc&eacute;dure &eacute;quivaut &agrave; utiliser l’option library-path du compilateur.
D&eacute;finition du fichier SWC en tant que fichier de biblioth&egrave;que externe
1 S&eacute;lectionnez un projet dans l’Explorateur de packages, puis cliquez sur Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin d’acc&egrave;s &agrave; la
g&eacute;n&eacute;ration Flex.
2 Sous l’onglet Chemin d’acc&egrave;s &agrave; la biblioth&egrave;que, s&eacute;lectionnez et d&eacute;veloppez l’entr&eacute;e du fichier SWC pour en afficher
les options.
3 Cliquez deux fois sur l’option Type de lien. La bo&icirc;te de dialogue Options de l’&eacute;l&eacute;ment de chemin d’acc&egrave;s &agrave; la
biblioth&egrave;que appara&icirc;t.
4 S&eacute;lectionnez l’option Externe, puis cliquez sur OK.
Cette proc&eacute;dure &eacute;quivaut &agrave; utiliser l’option external-library-path du compilateur.
Utilisation du fichier SWC en tant que biblioth&egrave;que RSL
Vous pouvez externaliser les &eacute;l&eacute;ments partag&eacute;s des fichiers SWF de vos applications en fichiers autonomes. Ces
fichiers autonomes peuvent se t&eacute;l&eacute;charger s&eacute;par&eacute;ment et &ecirc;tre mis en cache sur le client. Les &eacute;l&eacute;ments partag&eacute;s sont
transf&eacute;r&eacute;s et charg&eacute;s une seule fois sur le client, mais un nombre illimit&eacute; d’applications peut les utiliser au moment de
l’ex&eacute;cution. Ces fichiers partag&eacute;s sont connus sous le nom de biblioth&egrave;ques partag&eacute;es &agrave; l’ex&eacute;cution ou RSL (Runtime
Shared Libraries).
1 S&eacute;lectionnez un projet dans l’Explorateur de packages, puis cliquez sur Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin d’acc&egrave;s &agrave; la
g&eacute;n&eacute;ration Flex.
2 Sous l’onglet Chemin d’acc&egrave;s &agrave; la biblioth&egrave;que, s&eacute;lectionnez et d&eacute;veloppez l’entr&eacute;e du fichier SWC pour en afficher
les options.
3 Cliquez deux fois sur l’option Type de lien ou cliquez sur Modifier. La bo&icirc;te de dialogue Options de l’&eacute;l&eacute;ment de
chemin d’acc&egrave;s &agrave; la biblioth&egrave;que s’affiche.
4 S&eacute;lectionnez Biblioth&egrave;que RSL (Runtime Shared Library) comme type de lien.
5 Vous pouvez ajouter une URL pour sp&eacute;cifier o&ugrave; la biblioth&egrave;que SWC r&eacute;side lorsque l’application est d&eacute;ploy&eacute;e. Vous
pouvez &eacute;galement modifier une URL existante, si n&eacute;cessaire.
Derni&egrave;re mise &agrave; jour le 10/11/2011
233
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
6 S&eacute;lectionnez Charger de force le fichier RSL pour charger de force une biblioth&egrave;que RSL inutilis&eacute;e au cours de la
compilation.
7 Vous pouvez sp&eacute;cifier le domaine d’application dans lequel les biblioth&egrave;ques RSL interdomaines doivent &ecirc;tre
charg&eacute;es.
L’utilisation des fichiers SWC en tant que biblioth&egrave;que RSL simplifie le processus d’utilisation manuelle de
biblioth&egrave;ques RSL. Pour ce faire, extrayez le fichier SWF du fichier SWC et d&eacute;finissez les valeurs de l’option runtimeshared-library-path du compilateur.
Pour plus d’informations sur l’utilisation des fichiers SWC en tant que biblioth&egrave;que RSL, voir Runtime Shared
Libraries dans Utilisation d’Adobe Flex.
Cr&eacute;ation de composants MXML personnalis&eacute;s
Vous pouvez cr&eacute;er des composants personnalis&eacute;s pour ajouter certaines fonctions &agrave; un composant existant ou pour
cr&eacute;er un composant r&eacute;utilisable, tel qu’une zone de recherche ou l’affichage d’un &eacute;l&eacute;ment dans une grille de donn&eacute;es.
Vous pouvez &eacute;galement r&eacute;diger un nouveau composant, qui n’existe pas dans la structure Flex.
Les composants que vous cr&eacute;ez sont affich&eacute;s dans la vue Composants en mode Cr&eacute;ation. Vous pouvez distribuer les
composants &agrave; l’aide des fichiers SWC. Pour plus d’informations, voir &laquo; Utilisation des fichiers SWC dans le cadre des
projets &raquo; &agrave; la page 231.
Si le composant est cr&eacute;&eacute; principalement &agrave; partir de composants existants, l’utilisation de MXML en facilitera la
d&eacute;finition. Toutefois, s’il s’agit d’un nouveau type de composant, d&eacute;finissez-le en tant que composant ActionScript.
Pour plus d’informations, voir &laquo; Cr&eacute;ation d’une classe ActionScript &raquo; &agrave; la page 42.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Composant MXML.
La bo&icirc;te de dialogue pour la cr&eacute;ation d’un nouveau composant s’affiche :
2 Sp&eacute;cifiez le dossier parent pour le fichier du composant personnalis&eacute;.
Enregistrez le fichier dans un dossier situ&eacute; dans le r&eacute;pertoire du projet actuel ou dans le chemin source du projet
actuel. Le composant s’affichera ainsi dans la vue Composants.
3 Sp&eacute;cifiez le nom de fichier du composant.
Il d&eacute;finit le nom du composant. Par exemple, le nom du composant dont le fichier est nomm&eacute; LoginBox.mxml est
LoginBox.
4 Dans le champ Bas&eacute; sur, s&eacute;lectionnez le composant de base de votre composant personnalis&eacute;.
Les composants personnalis&eacute;s sont g&eacute;n&eacute;ralement d&eacute;riv&eacute;s de composants existants. Les composants de pr&eacute;sentation
personnalis&eacute;s se basent g&eacute;n&eacute;ralement sur des composants Container.
A partir de Flex 4, Flash Builder sugg&egrave;re spark.components.Group comme composant de base.
S&eacute;lectionnez Parcourir pour ouvrir la bo&icirc;te de dialogue Ouvrir un type, puis choisissez un composant.
Modifiez ou effacez le composant sugg&eacute;r&eacute; afin d’&eacute;largir la s&eacute;lection dans la bo&icirc;te de dialogue Ouvrir un type. Par
exemple, sp&eacute;cifiez spark.components. avant de cliquer sur Parcourir.
Vous pouvez filtrer la s&eacute;lection dans la bo&icirc;te de dialogue Ouvrir un type en fonction de vos besoins. Pour plus
d’informations sur l’utilisation de la bo&icirc;te de dialogue Ouvrir un type, voir &laquo; Navigation et affichage des classes &raquo; &agrave;
la page 81.
Derni&egrave;re mise &agrave; jour le 10/11/2011
234
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
5 (Facultatif) Si vous basez le composant sur un conteneur, vous avez la possibilit&eacute; de d&eacute;finir la largeur et la hauteur
du composant.
Vous pouvez saisir des valeurs fixes ou des pourcentages. Vous pouvez &eacute;galement vider les deux champs. Lorsque
vous cr&eacute;ez une instance du composant, vous pouvez remplacer la largeur et la hauteur du composant dans
l’instance.
Si vous saisissez des pourcentages ou ne sp&eacute;cifiez aucune valeur, vous avez la possibilit&eacute; de visualiser un aper&ccedil;u du
composant &agrave; diff&eacute;rentes tailles. Pour ce faire, utilisez la liste d&eacute;roulante situ&eacute;e dans la barre d’outils de la vue
Cr&eacute;ation de l’&eacute;diteur MXML. Pour plus d’informations, voir &laquo; Cr&eacute;ation de composants visuels &raquo; &agrave; la page 234.
6 Cliquez sur Terminer.
Flash Builder enregistre le fichier dans le dossier parent et l’ouvre dans l’&eacute;diteur.
Si vous avez enregistr&eacute; le fichier dans le projet actif ou dans le chemin source correspondant, Flash Builder affiche
&eacute;galement le composant dans la vue Composants pour permettre son insertion rapide dans les applications. Pour
plus d’informations, voir &laquo; Ajout de composants en mode Cr&eacute;ation MXML &raquo; &agrave; la page 23.
Remarque : la vue Composants ne r&eacute;pertorie que les composants personnalis&eacute;s visibles (c’est-&agrave;-dire ceux ayant h&eacute;rit&eacute;
de la classe UIComponent). Pour plus d’informations, voir le Guide de r&eacute;f&eacute;rence du langage ActionScript 3.0 pour la
plateforme Adobe Flash.
7 Cr&eacute;ez un composant personnalis&eacute;.
Pour plus d’informations, voir Simple MXML Components.
Cr&eacute;ation de composants visuels
Vous pouvez pr&eacute;senter un composant personnalis&eacute; visuellement dans l’&eacute;diteur MXML &agrave; l’instar d’un fichier
d’application MXML. Tous les outils du mode Cr&eacute;ation sont disponibles. Vous pouvez par exemple ajouter des
contr&ocirc;les enfant &agrave; partir de la vue Composants et d&eacute;finir les propri&eacute;t&eacute;s dans la vue Propri&eacute;t&eacute;s. Pour plus
d’informations, voir &laquo; Utilisation de composants visuels en mode Cr&eacute;ation MXML &raquo; &agrave; la page 22.
Les r&egrave;gles suivantes s’appliquent &agrave; la taille du composant personnalis&eacute; :
• Si le composant poss&egrave;de une hauteur et une largeur fixes, Flash Builder adapte automatiquement la zone de cr&eacute;ation
&agrave; ces dimensions.
• Si le composant ne poss&egrave;de pas de largeur et de hauteur ou si ces derni&egrave;res ont une valeur de 100%, vous pouvez
s&eacute;lectionner les dimensions de la zone de cr&eacute;ation dans la liste d&eacute;roulante de la barre d’outils de l’&eacute;diteur.
S&eacute;lectionnez diff&eacute;rentes dimensions afin d’obtenir diff&eacute;rents aper&ccedil;us du composant. Les dimensions par d&eacute;faut de
la zone de cr&eacute;ation sont de 400x300 pixels pour les conteneurs. Pour les contr&ocirc;les, la zone de cr&eacute;ation s’ajuste au
contenu.
• En pr&eacute;sence de valeurs autres que 100% pour la hauteur et la largeur, le composant est repr&eacute;sent&eacute; sous forme de
pourcentage de la dimension s&eacute;lectionn&eacute;e dans le menu de la zone de cr&eacute;ation.
D&eacute;finition de commentaires ASDoc pour les composants personnalis&eacute;s
Vous pouvez documenter les composants personnalis&eacute;s en ajoutant des commentaires ASDoc au code qui les
impl&eacute;mente. Les commentaires ASDoc sont ensuite disponibles dans l’assistant de contenu des &eacute;diteurs MXML et
ActionScript. Pour plus d’informations, voir &laquo; Assistant de contenu &raquo; &agrave; la page 48.
Ajoutez des commentaires ASDoc aux fichiers source ActionScript pour fournir la documentation de r&eacute;f&eacute;rence de
l’API. Vous pouvez &eacute;galement ajouter des commentaires ASDoc &agrave; des &eacute;l&eacute;ments MXML du document. Voir ASDoc
pour plus d’informations sur la cr&eacute;ation de commentaires ASDoc pour vos fichiers source.
Derni&egrave;re mise &agrave; jour le 10/11/2011
235
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Modification et distribution de composants MXML personnalis&eacute;s
Flash Builder repr&eacute;sente tous les composants personnalis&eacute;s visibles (c’est-&agrave;-dire tous ceux ayant h&eacute;rit&eacute; de
UIComponent) dans la vue Cr&eacute;ation de l’&eacute;diteur MXML. Vous pouvez double-cliquer sur un composant personnalis&eacute;
pour en ouvrir le fichier et le modifier.
1 Ouvrez un fichier MXML utilisant un composant personnalis&eacute;.
2 En mode Cr&eacute;ation, double-cliquez sur un composant personnalis&eacute;.
Le fichier du composant s’ouvre dans l’&eacute;diteur.
Vous pouvez &eacute;galement s&eacute;lectionner Ouvrir le composant personnalis&eacute; dans le menu contextuel.
3 Modifiez le composant personnalis&eacute;.
Distribuez les composants personnalis&eacute;s en cr&eacute;ant des projets de biblioth&egrave;que. Pour plus d’informations, voir
&laquo; Utilisation de projets de biblioth&egrave;que Flex &raquo; &agrave; la page 228.
Cr&eacute;ation de modules
Flash Builder permet de cr&eacute;er, d’ajouter, d’optimiser et de d&eacute;boguer des modules. Pour plus d’informations sur la
r&eacute;daction de code de module, voir Applications modulaires.
Les &eacute;tapes suivantes d&eacute;crivent la proc&eacute;dure de cr&eacute;ation d’un module dans Flash Builder. Apr&egrave;s avoir cr&eacute;&eacute; un module,
vous pouvez le compiler.
1 Dans Flash Builder, s&eacute;lectionnez Fichier &gt; Nouveau &gt; Module MXML. La bo&icirc;te de dialogue Cr&eacute;ation d’un(e)
module MXML s’affiche.
2 S&eacute;lectionnez un r&eacute;pertoire parent pour le module. Les modules sont habituellement stock&eacute;s dans le m&ecirc;me
r&eacute;pertoire que l’application principale, pour que les chemins relatifs des ressources partag&eacute;es soient identiques.
Les modules &eacute;tant ex&eacute;cutables, ils doivent se trouver dans le dossier source du projet.
3 Entrez un nom de fichier pour le module, par exemple MyModule.
4 Entrez les propri&eacute;t&eacute;s Largeur, Hauteur et Pr&eacute;sentation.
5 Indiquez si vous souhaitez ou non optimiser le module.
L’optimisation d’un module pour une application signifie que les classes utilis&eacute;es par l’application sont exclues du
module, ce qui peut contribuer &agrave; r&eacute;duire le volume de t&eacute;l&eacute;chargement des fichiers SWF. Pour plus d’informations,
voir &laquo; Optimisation de modules dans Flash Builder &raquo; &agrave; la page 239.
• Optimiser pour l’application
Si vous activez cette option, sp&eacute;cifiez l’application pour laquelle le module doit &ecirc;tre optimis&eacute;.
• Ne pas optimiser
Si vous activez cette option, toutes les classes sont incluses dans le module, qu’elles soient d&eacute;finies ou non dans
l’application principale, am&eacute;liorant ainsi les performances de la compilation d’incr&eacute;mentation. Vous pouvez en
outre charger le module dans n’importe quelle application, toutes ses d&eacute;pendances y &eacute;tant compil&eacute;es.
6 Cliquez sur Terminer.
Flash Builder ajoute un nouveau fichier de module MXML dans le projet.
Derni&egrave;re mise &agrave; jour le 10/11/2011
236
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Compilation des modules
Dans Flash Builder, vous pouvez ex&eacute;cuter le module comme une application ou g&eacute;n&eacute;rer le projet du module. Si les
modules figurent dans le m&ecirc;me projet que l’application, alors Flash Builder compile automatiquement les fichiers SWF
pour tous les modules du projet lorsque vous ex&eacute;cutez l’application. Les fichiers SWF sont ensuite charg&eacute;s dans
l’application lors de l’ex&eacute;cution.
Il est impossible d’ex&eacute;cuter le fichier SWF bas&eacute; sur un module comme un fichier SWF autonome ou de le charger dans
une fen&ecirc;tre de navigateur. Il doit &ecirc;tre charg&eacute; par une application en tant que module. Si vous ex&eacute;cutez le module dans
Flash Builder pour le compiler, fermez Adobe Flash Player ou la fen&ecirc;tre du navigateur et ignorez les erreurs
&eacute;ventuelles. Les modules ne doivent pas &ecirc;tre sollicit&eacute;s directement par Flash Player ou par l’interm&eacute;diaire d’un
navigateur.
Les fichiers SWF du module et le fichier SWF de l’application principale se trouvent g&eacute;n&eacute;ralement dans le m&ecirc;me
r&eacute;pertoire. Flash Builder compile toutefois les modules en m&ecirc;me temps que l’application, quel que soit leur
emplacement. Les modules peuvent se situer dans le m&ecirc;me r&eacute;pertoire que l’application ou dans des sous-r&eacute;pertoires.
Vous pouvez &eacute;galement cr&eacute;er un projet Flex ou ActionScript distinct pour chaque module ou groupe de modules. Il
en r&eacute;sulte une meilleure ma&icirc;trise de la compilation des modules, les options de compilateur de chaque projet pouvant
diff&eacute;rer de celles de l’application ou des autres modules. Cela permet &eacute;galement de compiler le ou les projets d’un
module sans compiler l’application. Cette approche requiert toutefois la compilation manuelle de chaque module
avant de compiler l’application. Une mani&egrave;re de proc&eacute;der consiste &agrave; compiler simultan&eacute;ment tous les projets ouverts
dans Flash Builder.
Si vous compilez les modules ind&eacute;pendamment de l’application principale, veillez &agrave; inclure ou exclure les informations
de d&eacute;bogage, selon que vous souhaitez d&eacute;boguer l’application et les modules. Pour plus d’informations, voir
&laquo; D&eacute;bogage de modules dans Flash Builder &raquo; &agrave; la page 240.
Le flux de travail dans Flash Builder est con&ccedil;u pour l’association de modules avec une m&ecirc;me application. Pour utiliser
des modules dans plusieurs applications, encapsulez &eacute;ventuellement le code dans une classe ou un composant de
biblioth&egrave;que &agrave; inclure dans un module simple pour chaque application. Contrairement aux biblioth&egrave;ques, les modules
ne sont pas destin&eacute;s &agrave; une utilisation dans le code commun &agrave; plusieurs applications.
Utilisation de plusieurs projets pour des modules
Lors de la d&eacute;finition de l’architecture de votre projet, vous pouvez d&eacute;cider d’inclure des modules dans votre projet
d’application, de cr&eacute;er un projet distinct pour chaque module ou de cr&eacute;er un projet distinct pour l’ensemble des
modules.
Utilisation d’un projet pour chaque module
L’utilisation d’un projet pour chaque module pr&eacute;sente les avantages suivants :
• Les projets de module peuvent figurer &agrave; un emplacement quelconque de l’espace de travail.
• Les projets de module peuvent disposer de param&egrave;tres de compilateur distincts, tel qu’un chemin d’acc&egrave;s &agrave; la
biblioth&egrave;que personnalis&eacute;.
Ils peuvent utiliser l’option de compilateur load-externs pour supprimer les d&eacute;pendances qui se recoupent.
L’utilisation d’un projet pour chaque module pr&eacute;sente les inconv&eacute;nients suivants :
• La m&eacute;moire n&eacute;cessaire augmente avec le nombre de projets.
• L’existence de nombreux projets dans un m&ecirc;me espace de travail peut augmenter son encombrement.
• Par d&eacute;faut, lorsque vous compilez l’application, tous les projets de module ne sont pas compil&eacute;s, m&ecirc;me s’ils ont subi
des modifications.
Derni&egrave;re mise &agrave; jour le 10/11/2011
237
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
• Pour optimiser la taille du fichier du module, appliquez manuellement les options de compilateur load-externs
et link-report.
Utilisation d’un projet pour l’ensemble des modules
Une approche semblable consiste &agrave; utiliser un m&ecirc;me projet pour l’ensemble des modules, en conservant l’application
dans son propre projet distinct. Certains inconv&eacute;nients, li&eacute;s &agrave; l’utilisation d’un m&ecirc;me projet &agrave; la fois pour l’application
et les modules, subsistent. Cette approche apporte toutefois de nombreux avantages d&eacute;coulant de l’utilisation d’un
projet distinct pour chaque module.
L’utilisation d’un projet pour l’ensemble des modules pr&eacute;sente les avantages suivants :
• Le projet de module peut figurer &agrave; un emplacement quelconque de l’espace de travail.
• Vous pouvez compiler s&eacute;par&eacute;ment les modules ou l’application, sans n&eacute;cessit&eacute; de compiler les deux simultan&eacute;ment.
• Le projet de module peut utiliser l’option de compilateur load-externs pour supprimer les d&eacute;pendances qui se
recoupent.
L’utilisation d’un projet de module pour l’ensemble des modules pr&eacute;sente les inconv&eacute;nients suivants :
• Tous les modules du projet de module doivent utiliser les m&ecirc;mes param&egrave;tres de compilateur, tel que le chemin
d’acc&egrave;s &agrave; la biblioth&egrave;que.
• Par d&eacute;faut, lorsque vous compilez l’application, le projet de module n’est pas compil&eacute;, m&ecirc;me s’il a subi des
modifications.
• Pour optimiser la taille du fichier du module, appliquez manuellement les options de compilateur load-externs
et link-report.
Cr&eacute;ation de projets pour des modules
Lors de la cr&eacute;ation d’un projet s&eacute;par&eacute; pour les modules, vous modifiez le dossier de sortie du projet de module sur un
r&eacute;pertoire utilis&eacute; par l’application. Vous supprimez &eacute;galement la cr&eacute;ation de fichiers d’enveloppe.
Cr&eacute;ation d’un projet distinct pour les modules dans Flash Builder
1 Cr&eacute;ez un projet principal.
2 Cr&eacute;ez un projet pour le ou les modules.
3 Dans le menu contextuel du projet du module, s&eacute;lectionnez Propri&eacute;t&eacute;s. La bo&icirc;te de dialogue Propri&eacute;t&eacute;s s’ouvre.
4 S&eacute;lectionnez l’option Chemin de g&eacute;n&eacute;ration Flex.
5 Modifiez le dossier de sortie de mani&egrave;re telle &agrave; ce qu’il pointe vers le r&eacute;pertoire des modules MainProject, comme
illustr&eacute; dans l’exemple ci-dessous :
${DOCUMENTS}\MainProject\assets
Cette modification redirige la sortie de compilation du module vers le r&eacute;pertoire des ressources du projet
d’application (MainProject). Dans l’application principale, vous pouvez d&eacute;finir la propri&eacute;t&eacute; url de ModuleLoader
sur les fichiers SWF du r&eacute;pertoire des ressources. La valeur de cette propri&eacute;t&eacute; est relative au dossier de sortie.
6 Cliquez sur OK pour enregistrer vos modifications.
7 Ouvrez &agrave; nouveau les propri&eacute;t&eacute;s du projet et s&eacute;lectionnez l’option Compilateur Flex.
8 D&eacute;s&eacute;lectionnez l’option G&eacute;n&eacute;rer le fichier d’enveloppe HTML afin d’&eacute;viter que le projet du module ne g&eacute;n&egrave;re les
fichiers d’enveloppe HTML. Ces fichiers ne sont g&eacute;n&eacute;ralement utilis&eacute;s que pour l’application et sont inutiles pour
les modules.
Derni&egrave;re mise &agrave; jour le 10/11/2011
238
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
9 Cliquez sur OK pour appliquer les modifications.
Compilation de projets pour les modules
La compilation de plusieurs projets dans Flash Builder est une op&eacute;ration courante. Il vous faut tout d’abord choisir
l’ordre dans lequel vous souhaitez compiler les projets. Vous pouvez ensuite compiler tous les projets en m&ecirc;me temps.
Compilation simultan&eacute;e de tous les projets dans Flash Builder
❖ Dans le menu principal, s&eacute;lectionnez Projets &gt; G&eacute;n&eacute;rer tout.
Flex g&eacute;n&egrave;re alors l’ensemble des projets de l’espace de travail. Les fichiers d’application sont ajout&eacute;s au dossier de
sortie de chaque projet. Si vous n’avez pas choisi l’enregistrement automatique des fichiers avant le d&eacute;but d’une
g&eacute;n&eacute;ration, vous &ecirc;tes invit&eacute; &agrave; enregistrer les fichiers.
Pour modifier l’ordre de g&eacute;n&eacute;ration, utilisez la bo&icirc;te de dialogue Ordre de g&eacute;n&eacute;ration. La modification de l’ordre de
g&eacute;n&eacute;ration n’est pas toujours n&eacute;cessaire. Les projets utilisant des modules ne doivent &ecirc;tre compil&eacute;s qu’avant
l’ex&eacute;cution de l’application de projet principale, et non lors de sa compilation. Dans la plupart des cas, l’ordre de
g&eacute;n&eacute;ration par d&eacute;faut ne doit pas &ecirc;tre modifi&eacute;.
Si toutefois vous souhaitez &eacute;liminer les d&eacute;pendances qui se recoupent, vous pouvez modifier l’ordre de g&eacute;n&eacute;ration afin
de compiler d’abord l’application principale. L’option de compilateur link-report permet alors de g&eacute;n&eacute;rer le rapport
de liaison. Lorsque vous compilez les modules, l’option de compilateur load-externs permet d’utiliser le rapport de
liaison g&eacute;n&eacute;r&eacute; par l’application principale. Pour plus d’informations sur la r&eacute;duction de la taille des modules, voir
&laquo; Optimisation de modules dans Flash Builder &raquo; &agrave; la page 239.
Modification de l’ordre de g&eacute;n&eacute;ration des projets
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Espace de travail &gt; Ordre de g&eacute;n&eacute;ration.
La bo&icirc;te de dialogue Ordre de g&eacute;n&eacute;ration appara&icirc;t.
2 D&eacute;s&eacute;lectionnez la case &agrave; cocher Utiliser l’ordre de g&eacute;n&eacute;ration par d&eacute;faut.
3 Utilisez les boutons Haut et Bas pour reclasser les projets de la liste Ordre de g&eacute;n&eacute;ration. Vous pouvez &eacute;galement
utilisez le bouton Supprimer un projet pour supprimer les projets qui ne font pas partie de l’application principale
ou qui ne sont pas des modules utilis&eacute;s par l’application. Dans ce cas, le projet supprim&eacute; sera g&eacute;n&eacute;r&eacute; mais
uniquement apr&egrave;s tous les autres projets de la liste.
4 Cliquez sur OK.
5 Modifiez si n&eacute;cessaire l’ordre de g&eacute;n&eacute;ration, puis cliquez sur OK.
En pr&eacute;sence de d&eacute;pendances entre des projets distincts de l’espace de travail, le compilateur d&eacute;termine
automatiquement l’ordre dans lequel les projets sont g&eacute;n&eacute;r&eacute;s afin de r&eacute;soudre correctement les d&eacute;pendances.
Si vous utilisez un projet distinct pour chaque module, vous pouvez compiler un seul module &agrave; la fois. Cela permet de
gagner du temps par rapport &agrave; la compilation simultan&eacute;e de tous les projets, ou par rapport &agrave; la compilation d’un seul
projet contenant tous les fichiers de modules et d’application.
Compilation du projet d’un seul module
1 Cliquez avec le bouton droit de la souris sur le fichier MXML du module dans le projet du module.
2 S&eacute;lectionnez Ex&eacute;cuter l’application. La fen&ecirc;tre du lecteur ou du navigateur tente d’ex&eacute;cuter le module apr&egrave;s sa
compilation. Vous pouvez fermer la fen&ecirc;tre du lecteur ou du navigateur et ignorer les messages d’erreur &eacute;ventuels
qui s’affichent lors de l’ex&eacute;cution. Les modules ne sont pas destin&eacute;s &agrave; une ex&eacute;cution directe dans le lecteur ou dans
un navigateur.
Derni&egrave;re mise &agrave; jour le 10/11/2011
239
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Ajout de modules au projet
Vous serez amen&eacute;, dans certaines situations, &agrave; utiliser des modules ne figurant pas dans le projet de l’application
principale. Le module peut provenir d’un projet distinct, vous pouvez alors utiliser des options de configuration
personnalis&eacute;es. Vous pouvez &eacute;galement vouloir partager le module entre plusieurs applications. Ajoutez le code source
du module au chemin source de l’application, puis ajoutez le module &agrave; la liste de modules de l’application afin de
pouvoir l’utiliser dans le projet.
Ajout d’un module pr&eacute;alablement compil&eacute; au projet
1 S&eacute;lectionnez l’application principale dans l’Explorateur de packages Flex.
2 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Chemin d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration Flex pour ajouter la source du module au chemin
source du projet d’application.
3 Cliquez sur le bouton Ajouter un dossier et acc&eacute;dez au chemin source du module. Cliquez sur OK pour s&eacute;lectionner
le module. R&eacute;p&eacute;tez cette proc&eacute;dure pour chaque module externe &agrave; ajouter au projet de l’application.
4 Cliquez &agrave; nouveau sur OK pour enregistrer vos modifications.
5 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Modules Flex pour ajouter le module &agrave; la liste de modules de l’application. La
bo&icirc;te de dialogue Modules Flex liste l’ensemble des modules ajout&eacute;s au projet actif ou figurant dans ce projet. Lors
de la cr&eacute;ation initiale d’un projet, cette bo&icirc;te de dialogue est vide.
6 Cliquez sur le bouton Ajouter. La bo&icirc;te de dialogue Ajouter un module s’affiche.
7 Utilisez le bouton Parcourir ou entrez l’emplacement du fichier MXML du module dans le champ Source. Tous les
modules figurant dans le chemin source du projet peuvent &ecirc;tre ajout&eacute;s &agrave; l’aide de cette bo&icirc;te de dialogue.
8 S&eacute;lectionnez l’une des options Taille du fichier SWF du module pour activer ou d&eacute;sactiver l’optimisation de
module. Si vous s&eacute;lectionnez Optimiser pour l’application, Flash Builder compile le module pour l’application
s&eacute;lectionn&eacute;e en excluant toutes les classes d&eacute;finies dans l’application principale. Il peut s’agir de classes de structure
ou de classes personnalis&eacute;es. Lorsque vous s&eacute;lectionnez cette option, le module ne peut pas &ecirc;tre utilis&eacute; dans une
autre application car la liste de classes exclues peut &ecirc;tre diff&eacute;rente. Pour plus d’informations, voir &laquo; Optimisation
de modules dans Flash Builder &raquo; &agrave; la page 239.
9 Cliquez sur OK pour enregistrer vos modifications. Flash Builder ajoute le module &agrave; la liste des modules disponibles
dans le projet de l’application.
Optimisation de modules dans Flash Builder
Dans Flash Builder, vous ne s&eacute;lectionnez g&eacute;n&eacute;ralement qu’une seule application par rapport &agrave; laquelle le module doit
&ecirc;tre optimis&eacute; lors de sa cr&eacute;ation initiale ou de son ajout au projet. Si vous d&eacute;cidez par la suite de changer l’application
vis&eacute;e par l’optimisation du module, ou de ne pas optimiser le module, vous pouvez modifier les propri&eacute;t&eacute;s du module
au sein du projet. Pour plus d’informations, voir Reducing module size.
Cette proc&eacute;dure part du principe que le module et l’application se trouvent dans le m&ecirc;me projet Flash Builder. Si les
modules se situent dans un projet distinct, ajoutez manuellement les options de compilateur load-externs et linkreport.
1 Cliquez avec le bouton droit de la souris sur le projet de l’application dans l’Explorateur de package Flex et
s&eacute;lectionnez Propri&eacute;t&eacute;s. La bo&icirc;te de dialogue Propri&eacute;t&eacute;s du projet s’ouvre.
2 Dans le volet de gauche, s&eacute;lectionnez Modules Flex.
3 S&eacute;lectionnez le module dans la liste et cliquez sur le bouton Modifier. La bo&icirc;te de dialogue Modifier le module
s’affiche.
4 Pour supprimer l’optimisation, s&eacute;lectionnez l’option Ne pas optimiser sous Taille du fichier SWF du module.
Derni&egrave;re mise &agrave; jour le 10/11/2011
240
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
5 Afin d’optimiser le module pour une autre application, s&eacute;lectionnez la nouvelle application dans la liste d&eacute;roulante
Optimiser pour l’application.
6 Cliquez sur OK.
Pour optimiser davantage la taille du fichier d’un module, vous pouvez supprimer les informations de d&eacute;bogage. Lors
de la g&eacute;n&eacute;ration d’un module dans Flash Builder, les informations de d&eacute;bogage y sont incluses par d&eacute;faut. En les
supprimant, vous pouvez r&eacute;duire la taille du module. Pour obtenir des instructions sur la proc&eacute;dure de suppression
des informations de d&eacute;bogage des modules, voir &laquo; D&eacute;bogage de modules dans Flash Builder &raquo; &agrave; la page 240.
D&eacute;bogage de modules dans Flash Builder
Pour d&eacute;boguer des modules et des applications, int&eacute;grez des informations de d&eacute;bogage dans les fichiers SWF lors de
leur compilation. Dans Flash Builder, ex&eacute;cutez l’application, puisque les informations de d&eacute;bogage sont incluses par
d&eacute;faut. A la ligne de commande, d&eacute;finissez l’option de compilateur debug sur true. La valeur par d&eacute;faut est true, mais
si vous l’avez d&eacute;sactiv&eacute;e dans un fichier de configuration, veillez &agrave; le remplacer.
Par d&eacute;faut, Flash Builder g&eacute;n&egrave;re un seul fichier SWF comprenant des symboles de d&eacute;bogage. Les instructions
D&eacute;boguer et Ex&eacute;cuter fonctionnent donc toutes les deux lors de l’ex&eacute;cution d’une application utilisant des modules
dans Flash Builder. Toutefois, l’inclusion de symboles de d&eacute;bogage dans le fichier SWF d’un module augmente sa taille.
Pour exclure les symboles de d&eacute;bogage avant le d&eacute;ploiement, d&eacute;sactivez le d&eacute;bogage des modules de l’application. Pour
ce faire, exportez la version valid&eacute;e des modules en s&eacute;lectionnant Projet &gt; Exporter une version valid&eacute;e.
Pour exclure les informations de d&eacute;bogage des fichiers SWF dans Flash Builder, vous pouvez d&eacute;finir l’option debug
sur false dans la zone de texte des arguments de compilateur suppl&eacute;mentaires, ou g&eacute;n&eacute;rer des fichiers SWF sans
d&eacute;bogage en les exportant &agrave; l’aide de la fonctionnalit&eacute; Exporter vers une version valid&eacute;e. Cela inclut les modules, s’ils
figurent dans le projet actif.
Si vous cr&eacute;ez un projet distinct pour les modules, vous pouvez activer ou d&eacute;sactiver le d&eacute;bogage pour l’ensemble du
projet sans modifier les param&egrave;tres de l’application principale.
Pour d&eacute;boguer un module, vous devez &eacute;galement d&eacute;boguer son application de chargement. Le d&eacute;bogueur Flex ne se
connecte pas aux applications d&eacute;pourvues d’informations de d&eacute;bogage, m&ecirc;me si les modules charg&eacute;s par l’application
les contiennent. En d’autres termes, vous ne pouvez pas exclure les informations de d&eacute;bogage de l’application si vous
souhaitez d&eacute;boguer le module qu’elle charge.
Lors de l’utilisation de modules dans une application AIR, le fichier SWF du module doit figurer dans le m&ecirc;me
r&eacute;pertoire que le fichier SWF de l’application, ou dans l’un de ses sous r&eacute;pertoires.
Int&eacute;gration de Flex avec les applications HTML
La fonction Cr&eacute;er un composant Ajax Bridge permet de g&eacute;n&eacute;rer un code JavaScript et un fichier d’enveloppe HTML
facilitant l’utilisation d’une application cr&eacute;&eacute;e dans Flex en JavaScript dans une page HTML. Elle peut &ecirc;tre utilis&eacute;e avec
la biblioth&egrave;que Flex Ajax Bridge JavaScript qui permet d’exposer une application au script dans le navigateur Web. Le
code JavaScript g&eacute;n&eacute;r&eacute; est l&eacute;ger puisqu’il est destin&eacute; &agrave; exposer la fonctionnalit&eacute; d&eacute;j&agrave; fournie par Flex Ajax Bridge. Pour
plus d’informations sur Flex Ajax Bridge, voir Flex Ajax Bridge.
La fonction Cr&eacute;er un composant Ajax Bridge g&eacute;n&egrave;re un code proxy JavaScript sp&eacute;cifique aux API d’application que
vous voulez appeler &agrave; partir de JavaScript. Vous pouvez g&eacute;n&eacute;rer du code pour toute classe ActionScript ou application
MXML dans un projet Flash Builder.
Derni&egrave;re mise &agrave; jour le 10/11/2011
241
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
Pour les fichiers d’application MXML, vous pouvez g&eacute;n&eacute;rer un code pour tous les &eacute;l&eacute;ments suivants ou une partie
d’entre eux dans le code MXML :
• Liste des &eacute;l&eacute;ments h&eacute;rit&eacute;s pouvant s’&eacute;tendre de fa&ccedil;on non r&eacute;cursive
• Propri&eacute;t&eacute;s publiques, incluant les balises avec les propri&eacute;t&eacute;s id
• Constantes publiques
• Fonctions publiques incluant les classes d&eacute;finies dans la ligne
Pour les classes ActionScript, vous pouvez g&eacute;n&eacute;rer un code pour tous les &eacute;l&eacute;ments suivants ou une partie d’entre eux :
• Liste des &eacute;l&eacute;ments h&eacute;rit&eacute;s
• Propri&eacute;t&eacute;s publiques (pour chaque propri&eacute;t&eacute;, affichage d’une m&eacute;thode get et set)
• Constantes publiques
• M&eacute;thodes publiques
Dans un r&eacute;pertoire que vous sp&eacute;cifiez, la fonction Cr&eacute;er un composant Ajax Bridge g&eacute;n&egrave;re des fichiers *.js et *.html
correspondant aux applications MXML et aux classes ActionScript s&eacute;lectionn&eacute;es pour la g&eacute;n&eacute;ration. Elle place une
copie de la biblioth&egrave;que Flex Ajax Bridge (fabridge.js) dans un sous-r&eacute;pertoire du r&eacute;pertoire de g&eacute;n&eacute;ration de code.
Cette fonction g&eacute;n&egrave;re &eacute;galement des fichiers d’aide MXML dans le r&eacute;pertoire src du projet ; ces fichiers sont utilis&eacute;s
pour finaliser la g&eacute;n&eacute;ration du code JavaScript.
G&eacute;n&eacute;ration de code Ajax Bridge
1 Cliquez avec le bouton droit sur un projet dans l’Explorateur de packages Flex et s&eacute;lectionnez Cr&eacute;er un composant
Ajax Bridge.
2 Dans la bo&icirc;te de dialogue Cr&eacute;ation d’un composant Ajax Bridge, s&eacute;lectionnez les applications MXML et les classes
ActionScript pour lesquelles vous souhaitez g&eacute;n&eacute;rer un code JavaScript. Vous pouvez s&eacute;lectionner la case &agrave; cocher
de niveau sup&eacute;rieur pour inclure l’int&eacute;gralit&eacute; du projet ou vous pouvez s&eacute;lectionner des membres sp&eacute;cifiques.
3 Sp&eacute;cifiez le r&eacute;pertoire dans lequel g&eacute;n&eacute;rer les classes de proxy.
4 Cliquez sur OK pour g&eacute;n&eacute;rer le code. L’exemple suivant illustre un fichier .js g&eacute;n&eacute;r&eacute; pour une application affichant
des images :
*
* You should keep your JavaScript code inside this file as light as possible,
* and keep the body of your Ajax application in separate *.js files.
*
* Do make a backup of your changes before regenerating this file. (Ajax Bridge
* display a warning message.)
*
* For help in using this file, refer to the built-in documentation in the Ajax Bridge
application.
*
*/
/**
* Class &quot;DisplayShelfList&quot;
* Fully qualified class name: &quot;DisplayShelfList&quot;
*/
function DisplayShelfList(obj) {
if (arguments.length &gt; 0) {
this.obj = arguments[0];
Derni&egrave;re mise &agrave; jour le 10/11/2011
242
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
} else {
this.obj = FABridge[&quot;b_DisplayShelfList&quot;].
create(&quot;DisplayShelfList&quot;);
}
}
// CLASS BODY
// Selected class properties and methods
DisplayShelfList.prototype = {
// Fields form class &quot;DisplayShelfList&quot; (translated to getters/setters):
// Methods form class &quot;DisplayShelfList&quot;:
getAngle : function() {
return this.obj.getAngle();
},
setAngle : function(argNumber) {
this.obj.setAngle(argNumber);
},
setCurrentPosition : function(argNumber) {
this.obj.setCurrentPosition(argNumber);
},
setSelectedIndex : function(argNumber) {
this.obj.setSelectedIndex(argNumber);
},
setPercentHeight : function(argNumber) {
this.obj.setPercentHeight(argNumber);
},
setPercentWidth : function(argNumber) {
this.obj.setPercentWidth(argNumber);
},
DisplayShelfList : function() {
return this.obj.DisplayShelfList();
},
setFirst : function(argNumber) {
this.obj.setFirst(argNumber);
},
setFormat : function(argString) {
this.obj.setFormat(argString);
},
setLast : function(argNumber) {
this.obj.setLast(argNumber);
}
}
/**
Derni&egrave;re mise &agrave; jour le 10/11/2011
243
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
* Listen for the instantiation of the Flex application over the bridge.
*/
FABridge.addInitializationCallback(&quot;b_DisplayShelfList&quot;, DisplayShelfListReady);
/**
* Hook here all of the code that must run as soon as the DisplayShelfList class
* finishes its instantiation over the bridge.
*
* For basic tasks, such as running a Flex method on the click of a JavaScript
* button, chances are that both Ajax and Flex have loaded before the
* user actually clicks the button.
*
* However, using DisplayShelfListReady() is the safest way, because it lets
* Ajax know that involved Flex classes are available for use.
*/
function DisplayShelfListReady() {
// Initialize the root object. This represents the actual
// DisplayShelfListHelper.mxml Flex application.
b_DisplayShelfList_root = FABridge[&quot;b_DisplayShelfList&quot;].root();
//
//
//
//
//
YOUR CODE HERE
var DisplayShelfListObj = new DisplayShelfList();
Example:
var myVar = DisplayShelfListObj.getAngle ();
b_DisplayShelfList_root.addChild(DisplayShelfListObj);
}
5 Modifiez les fichiers .js g&eacute;n&eacute;r&eacute;s. Dans la fonction xxxReady() des fichiers .js g&eacute;n&eacute;r&eacute;s, ajoutez le code &agrave; ex&eacute;cuter d&egrave;s
que la classe correspondante termine son instanciation sur Ajax Bridge. Selon l’application, le code par d&eacute;faut peut
&ecirc;tre g&eacute;n&eacute;r&eacute; dans cette m&eacute;thode. Le code en gras de l’exemple suivant illustre le code d’initialisation personnalis&eacute;
pour l’exemple d’application d’image.
...
function DisplayShelfListReady() {
// Initialize the root object. This represents the actual
// DisplayShelfListHelper.mxml Flex application.
b_DisplayShelfList_root = FABridge[&quot;b_DisplayShelfList&quot;].root();
// Create a new object.
DisplayShelfListObj = new DisplayShelfList();
// Make it as big as the application.
DisplayShelfListObj.setPercentWidth(100);
DisplayShelfListObj.setPercentHeight(100);
//Set specific attributes.
DisplayShelfListObj.setFirst(1);
DisplayShelfListObj.setLast(49);
DisplayShelfListObj.setFormat(&quot;./photos400/photo%02d.jpg&quot;);
//Add the object to the DisplayList hierarchy.
b_DisplayShelfList_root.addChild(DisplayShelfListObj.obj);
}
Derni&egrave;re mise &agrave; jour le 10/11/2011
244
UTILISATION DE FLASH BUILDER 4.6
D&eacute;veloppement d’applications avec Flex
6 Modifiez les fichiers .html g&eacute;n&eacute;r&eacute;s. Dans la partie des pages HTML contenant le texte d’indication d’emplacement
de la description, remplacez le texte par le code HTML &agrave; utiliser pour acc&eacute;der &agrave; l’application &agrave; partir de la page
HTML. Par exemple, ce code ajoute des boutons pour contr&ocirc;ler l’exemple d’application d’image :
&lt;h2&gt;Test controls&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input type=&quot;button&quot; onclick=&quot;DisplayShelfListObj.setCurrentPosition(0)&quot;
value=&quot;Go to first item&quot;/&gt;
&lt;/li&gt;
&lt;li&gt;&lt;input type=&quot;button&quot; onclick=&quot;DisplayShelfListObj.setCurrentPosition(3)&quot;
value=&quot;Go to fourth item&quot;/&gt;
&lt;/li&gt;
&lt;li&gt;&lt;input type=&quot;button&quot; onclick=&quot;DisplayShelfListObj.setSelectedIndex(0)&quot;
value=&quot;Go to first item (with animation)&quot;/&gt;
&lt;/li&gt;
&lt;li&gt;&lt;input type=&quot;button&quot; onclick=&quot;DisplayShelfListObj.setSelectedIndex(3)&quot;
value=&quot;Go to fourth item (with animation)&quot;/&gt;
&lt;/li&gt;
&lt;li&gt;&lt;input type=&quot;button&quot; onclick=&quot;alert(DisplayShelfListObj.getAngle())&quot;
value=&quot;Get photo angle&quot;/&gt;
&lt;/li&gt;
&lt;li&gt;&lt;input type=&quot;button&quot; onclick=&quot;DisplayShelfListObj.setAngle(15);&quot;
value=&quot;Set photo angle to 15&amp;deg;&quot;/&gt;
&lt;/li&gt;
&lt;/ul&gt;
7 Ouvrez la page HTML dans un navigateur Web pour ex&eacute;cuter l’application.
Derni&egrave;re mise &agrave; jour le 10/11/2011
245
Chapitre 9 : Utilisation de Flash Builder
avec Flash Professional
Utilisez les projets Flash Professional pour acc&eacute;der au code dans les fichiers FLA ou XFL cr&eacute;&eacute;s avec Flash
Professional CS5.5. En g&eacute;n&eacute;ral, vous cr&eacute;ez un projet et des fichiers dans Flash Professional, puis vous cr&eacute;ez un projet
correspondant dans Flash Builder pour modifier et d&eacute;boguer les fichiers. Cette fonctionnalit&eacute; permet aux
d&eacute;veloppeurs Flash Professional d’utiliser l’environnement de modification et de d&eacute;bogage que fournit Flash Builder.
Remarque : pour acc&eacute;der aux fonctions de Flash Professional dans Flash Builder, vous devez installer Flash
Professional CS5.5.
Cr&eacute;ation d’un projet Flash Professional
Pour cr&eacute;er un projet Flash Professional dans Flash Builder, vous devez avoir d&eacute;j&agrave; commenc&eacute; le projet dans Flash
Professional. C’est-&agrave;-dire que le fichier FLA ou XFL doit exister.
1 S&eacute;lectionnez Fichier &gt; Nouveau &gt; Projet Flash Professional.
2 Recherchez le fichier FLA ou XFL pour le projet.
Le nom du fichier est utilis&eacute; comme nom du projet.
3 Sp&eacute;cifiez l’emplacement du projet.
Vous pouvez utiliser l’emplacement par d&eacute;faut dans l’espace de travail ou rechercher un nouvel emplacement.
4 Cliquez sur Terminer.
Flash Builder ouvre le nouveau projet dans l’Explorateur de packages. Le dossier contenant le fichier FLA cible est
accessible. Le fichier FLA s&eacute;lectionn&eacute; devient le fichier cible du projet. Les fichiers ActionScript qui d&eacute;pendent des
fichiers cible peuvent &ecirc;tre modifi&eacute;s.
S’il n’est pas d&eacute;j&agrave; en cours d’ex&eacute;cution, Flash Professional d&eacute;marre.
Op&eacute;rations possibles dans un projet Flash Professional
Vous pouvez appliquer les op&eacute;rations suivantes aux fichiers source d’un projet Flash Professional :
• Modifier les fichiers ActionScript qui d&eacute;pendent du fichier FLA cible
• D&eacute;boguer le fichier dans le d&eacute;bogueur Flash Builder ou Flash Professional :
Lors de la modification des fichiers dans Flash Builder, vous pouvez d&eacute;finir des points d’arr&ecirc;t dans les fichiers
ActionScript du projet.
Pour d&eacute;boguer le fichier dans Flash Builder, s&eacute;lectionnez Ex&eacute;cuter &gt; D&eacute;boguer fichier ou cliquez sur le bouton
D&eacute;boguer dans la barre d’outils.
Pour d&eacute;boguer le fichier dans Flash Professional, s&eacute;lectionnez Ex&eacute;cuter &gt; D&eacute;boguer la s&eacute;quence ou cliquez sur le
bouton D&eacute;boguer la s&eacute;quence dans Flash Builder. Le d&eacute;bogueur Flash Professional reconna&icirc;t les points d’arr&ecirc;t
d&eacute;finis dans Flash Builder.
Derni&egrave;re mise &agrave; jour le 10/11/2011
246
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Professional
• Publier le fichier dans Flash Professional CS5.5 :
S&eacute;lectionnez Projet &gt; Publier la s&eacute;quence ou cliquez sur Publier dans le bouton Flash Professional de la barre
d’outils.
• Ex&eacute;cuter le fichier dans Flash Builder ou Flash Professional :
Pour ex&eacute;cuter le fichier dans Flash Builder, s&eacute;lectionnez Ex&eacute;cuter &gt; Ex&eacute;cuter fichier ou cliquez sur le bouton
Ex&eacute;cuter de la barre d’outils.
Pour ex&eacute;cuter le fichier dans Flash Professional, s&eacute;lectionnez Ex&eacute;cuter &gt; Tester la s&eacute;quence ou cliquez sur le bouton
Tester la s&eacute;quence de la barre d’outils.
D&eacute;finition des propri&eacute;t&eacute;s des projets Flash Professional
1 S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Flash Professional.
2 S&eacute;lectionnez Ajouter pour ajouter des fichiers suppl&eacute;mentaires au projet.
Un projet ne peut comporter qu’un seul fichier FLA ou XFL cible comme fichier cible par d&eacute;faut. Utilisez le bouton
D&eacute;finir par d&eacute;faut pour sp&eacute;cifier le fichier cible par d&eacute;faut du projet.
3 Cliquez sur OK.
Cr&eacute;ation et modification de composants Flash
Adobe Flash&reg; Professional CS5.5 cr&eacute;e des applications compatibles avec Adobe Flash Player 10 ou version ult&eacute;rieure.
Les applications cr&eacute;&eacute;es avec Flex prennent &eacute;galement en charge Flash Player 10 ou version ult&eacute;rieure, ce qui signifie
que vous pouvez importer dans vos applications des ressources issues de Flash Professional CS5.5. Vous pouvez cr&eacute;er
des contr&ocirc;les, des conteneurs, des habillages et d’autres ressources dans Flash Professional CS5.5, puis les importer
dans vos applications sous la forme de fichiers SWC. Pour plus d’informations sur la cr&eacute;ation de composants &agrave; l’aide
de Flash Professional CS5.5, voir Extensions pour la cr&eacute;ation d’habillages Flex et kit de composants Flex pour Flash
Professional.
La vue Cr&eacute;ation de l’&eacute;diteur Flash Builder vous permet d’ins&eacute;rer un nouveau composant Flash en ajoutant un espace
r&eacute;serv&eacute; pour un composant ou un conteneur Flash. Vous pouvez appeler Flash Professional CS5.5 &agrave; partir de Flash
Builder pour cr&eacute;er le composant ou conteneur. Vous pouvez &eacute;galement appeler Flash Professional CS5.5 pour
modifier les composants Flash cr&eacute;&eacute;s pr&eacute;c&eacute;demment.
Si l’application contient un composant SWFLoader destin&eacute; &agrave; lancer des fichiers SWF, vous pouvez d&eacute;marrer Flash
Professional CS5.5 pour cr&eacute;er ou modifier les fichiers FLA et SWF associ&eacute;s.
Cr&eacute;ation d’un composant ou d’un conteneur Flash
1 En mode Cr&eacute;ation de l’&eacute;diteur de Flash Builder, assurez-vous que la vue Composants est visible.
2 Dans le dossier Personnaliser de la vue Composants, faites glisser soit un Nouveau composant Flash soit un
Nouveau conteneur Flash vers la zone de cr&eacute;ation.
Vous pouvez ensuite redimensionner ou positionner le composant ou conteneur.
3 Dans le menu contextuel ou dans la Vue standard des Propri&eacute;t&eacute;s du fichier, s&eacute;lectionnez Cr&eacute;er dans Adobe Flash.
Derni&egrave;re mise &agrave; jour le 10/11/2011
247
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Professional
Remarque : vous pouvez &eacute;galement cliquer deux fois sur le composant dans la vue Cr&eacute;ation pour cr&eacute;er l’&eacute;l&eacute;ment dans
Adobe Flash.
4 Dans la bo&icirc;te de dialogue qui s’ouvre, pr&eacute;cisez le nom de la classe et du fichier SWC, puis cliquez sur Cr&eacute;er pour
ouvrir Adobe Flash Professional CS5.5.
5 Dans Flash Professional CS5.5, modifiez le composant ou conteneur. S&eacute;lectionnez Terminer lorsque vous avez fini
pour retourner &agrave; Flash Builder.
Modification d’un composant ou d’un conteneur Flash
Cette proc&eacute;dure suppose que vous avez d&eacute;j&agrave; ins&eacute;r&eacute; un composant ou un conteneur Flash dans Flash Builder.
1 En mode Cr&eacute;ation de l’&eacute;diteur Flash Builder, s&eacute;lectionnez le composant ou le conteneur Flash &agrave; modifier.
2 Dans le menu contextuel ou dans la Vue standard des Propri&eacute;t&eacute;s Flex, s&eacute;lectionnez Editer dans Adobe Flash.
Remarque : vous pouvez &eacute;galement cliquer deux fois sur le composant dans la vue Cr&eacute;ation pour modifier l’&eacute;l&eacute;ment
dans Adobe Flash.
3 Dans Flash Professional CS5.5, modifiez le composant ou conteneur. S&eacute;lectionnez Terminer lorsque vous avez fini
pour retourner &agrave; Flash Builder.
Cr&eacute;ation ou modification d’un fichier SWF associ&eacute; &agrave; un composant SWFLoader
Cette proc&eacute;dure suppose que l’application contient un composant SWFLoader.
1 En mode Cr&eacute;ation de l’&eacute;diteur Flash Builder, s&eacute;lectionnez le composant SWFLoader.
2 A partir du menu contextuel du composant ou de la Vue standard de la fen&ecirc;tre Propri&eacute;t&eacute;s, lancez Flash
Professional CS5.5 en effectuant l’une des op&eacute;rations suivantes :
• S&eacute;lectionnez Cr&eacute;er dans Adobe Flash pour cr&eacute;er un fichier SWF associ&eacute; au composant SWFLoader.
• S&eacute;lectionnez Editer dans Adobe Flash pour modifier le fichier SWF associ&eacute; au composant SWFLoader.
3 Une fois que vous avez fini de modifier le fichier, s&eacute;lectionnez Terminer pour retourner &agrave; Flash Builder.
Importation de ressources &agrave; partir de Flash CS3 ou version ult&eacute;rieure
Vous pouvez ajouter &agrave; l’interface utilisateur des composants Flash cr&eacute;&eacute;s avec Adobe Flash CS3 Professional.
Remarque : pour pouvoir cr&eacute;er des composants Flex dans Flash CS3, installez le kit de composants Flex pour Flash. Pour
plus d’informations, voir l’article Importation de ressources Flash CS Professional dans Adobe Flex.
1 V&eacute;rifiez que le composant Flash est enregistr&eacute; dans le chemin d’acc&egrave;s &agrave; la biblioth&egrave;que du projet en cours.
Le chemin d’acc&egrave;s &agrave; la biblioth&egrave;que pr&eacute;cise l’emplacement d’un ou de plusieurs fichiers SWC que l’application lie
au moment de l’ex&eacute;cution. Il est d&eacute;fini dans les param&egrave;tres du compilateur Flex pour le projet. Dans les nouveaux
projets, le dossier libs se trouve par d&eacute;faut sur le chemin d’acc&egrave;s &agrave; la biblioth&egrave;que.
Pour d&eacute;finir ou conna&icirc;tre le chemin d’acc&egrave;s &agrave; la biblioth&egrave;que, s&eacute;lectionnez le projet dans l’Explorateur de packages,
puis s&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s. Dans la bo&icirc;te de dialogue Propri&eacute;t&eacute;s, s&eacute;lectionnez la cat&eacute;gorie Chemin de
g&eacute;n&eacute;ration Flex, puis cliquez sur l’onglet Chemin d’acc&egrave;s &agrave; la biblioth&egrave;que. Pour plus d’informations, voir
&laquo; Cr&eacute;ation manuelle de projets &raquo; &agrave; la page 109.
Derni&egrave;re mise &agrave; jour le 10/11/2011
248
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Professional
2 Ouvrez un fichier MXML et ajoutez un composant Flash de l’une des fa&ccedil;ons suivantes :
• En mode Cr&eacute;ation dans l’&eacute;diteur MXML, d&eacute;veloppez la cat&eacute;gorie Personnaliser de la vue Composants puis faites
glisser le composant Flash vers le fichier MXML. Dans le cas de documents d&eacute;j&agrave; ouverts, cliquez sur le bouton
Actualiser (l’ic&ocirc;ne verte contenant des fl&egrave;ches) pour afficher le composant apr&egrave;s l’avoir ins&eacute;r&eacute;.
• En mode Source, entrez la balise de composant, puis faites appel &agrave; l’assistant de contenu pour terminer
rapidement la balise.
Gestion de la s&eacute;curit&eacute; de Flash Player
Flash Player n’autorise pas une application &agrave; recevoir des donn&eacute;es d’un domaine autre que celui &agrave; partir duquel il a &eacute;t&eacute;
charg&eacute;, &agrave; moins d’une autorisation explicite donn&eacute;e. Si vous chargez le fichier SWF d’application depuis
http://mydomain.com, il ne peut pas charger de donn&eacute;es depuis http://yourdomain.com. Ce sandbox de s&eacute;curit&eacute;
emp&ecirc;che une utilisation malveillante des fonctions de Flash Player (JaveScript utilise un mod&egrave;le de s&eacute;curit&eacute; similaire
pour emp&ecirc;cher toute utilisation malveillante de JavaScript).
Pour acc&eacute;der aux donn&eacute;es provenant d’une application d&eacute;velopp&eacute;e avec Flex, trois solutions s’offrent &agrave; vous :
• Ajoutez un fichier de r&eacute;gulation interdomaines &agrave; la racine du serveur Web h&eacute;bergeant le service de donn&eacute;es.
• Placez le fichier SWF d’application sur le m&ecirc;me serveur que celui h&eacute;bergeant le service de donn&eacute;es.
• Sur le serveur contenant le fichier SWF d’application, cr&eacute;ez un proxy qui appelle un service de donn&eacute;es h&eacute;berg&eacute; sur
un autre serveur.
Utilisation des fichiers de r&eacute;gulation interdomaines
Un fichier de r&eacute;gulation interdomaines est un simple fichier XML qui accorde &agrave; Flash Player l’autorisation d’acc&eacute;der
aux donn&eacute;es &agrave; partir d’un domaine autre que le domaine sur lequel r&eacute;side l’application. Sans ce fichier de r&eacute;gulation,
l’utilisateur est invit&eacute; &agrave; fournir une autorisation d’acc&egrave;s via une bo&icirc;te de dialogue. Cette situation est &agrave; &eacute;viter.
Le fichier de r&eacute;gulation interdomaines (intitul&eacute; crossdomain.xml) est plac&eacute; &agrave; la racine du serveur (ou des serveurs)
contenant les donn&eacute;es auxquelles vous souhaitez acc&eacute;der. L’exemple suivant illustre un fichier de r&eacute;gulation
interdomaines :
&lt;?xml version=&quot;1.0&quot;?&gt;
&lt;!DOCTYPE cross-domain-policy SYSTEM &quot;http://www.adobe.com/xml/dtds/cross-domain-policy.dtd&quot;&gt;
&lt;cross-domain-policy&gt;
&lt;allow-access-from domain=&quot;www.yourdomain.com&quot; /&gt;
&lt;/cross-domain-policy&gt;
Pour plus d’informations sur la configuration des fichiers de r&eacute;gulation interdomaines, voir S&eacute;curit&eacute;.
Configuration d’un proxy pour acc&eacute;der aux donn&eacute;es distantes
Pour g&eacute;rer la s&eacute;curit&eacute; de Flash Player, au lieu d’utiliser un fichier de r&eacute;gulation interdomaines, vous pouvez &eacute;galement
utiliser un proxy. ADEP Data Services et BlazeDS fournissent un syst&egrave;me de gestion proxy complet pour les
applications d&eacute;velopp&eacute;es avec Flex. Vous pouvez &eacute;galement cr&eacute;er un simple service proxy en utilisant un langage de
script Web tel que ColdFusion, JSP, PHP ou ASP.
Le service proxy traite les requ&ecirc;tes de l’application vers le service distant et r&eacute;pond du service distant vers l’application
(Flash Player).
Derni&egrave;re mise &agrave; jour le 10/11/2011
249
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Professional
Pendant le d&eacute;veloppement des applications, le proxy est souvent h&eacute;berg&eacute; sur l’ordinateur local. Pour ce faire, ex&eacute;cutez
un serveur Web et un langage de script sur votre ordinateur de d&eacute;veloppement local.
Configuration de Flash Builder pour l’acc&egrave;s par proxy aux donn&eacute;es distantes
Une fois que vous avez configur&eacute; un proxy pour acc&eacute;der aux donn&eacute;es d’un service distant, vous placez les fichiers
d’application dans le m&ecirc;me domaine que le proxy. Dans Flash Builder, vous pouvez modifier les param&egrave;tres de version
du projet et la configuration de lancement pour g&eacute;rer l’utilisation d’un proxy.
Si vous utilisez Flash Builder pour compiler vos applications et que le serveur proxy est &eacute;galement configur&eacute; sur votre
ordinateur de d&eacute;veloppement local, vous pouvez modifier les param&egrave;tres de version de projet de sorte &agrave; copier
automatiquement les fichiers d’application compil&eacute;s &agrave; l’emplacement appropri&eacute; sur votre serveur Web.
Modification d’un chemin de g&eacute;n&eacute;ration de projet
1 Dans l’Explorateur de packages Flex, s&eacute;lectionnez un projet.
2 Cliquez avec le bouton droit de la souris et s&eacute;lectionnez Propri&eacute;t&eacute;s. La bo&icirc;te de dialogue des propri&eacute;t&eacute;s du projet
s’affiche.
3 S&eacute;lectionnez la page Chemin de g&eacute;n&eacute;ration Flex.
4 Modifiez le dossier de sortie existant en saisissant un nouveau chemin ou en naviguant jusqu’au dossier appropri&eacute;
du serveur Web (C:\inetpub\wwwroot\myApp\, par exemple).
5 Cliquez sur OK.
Pour ex&eacute;cuter et d&eacute;boguer l’application &agrave; partir du serveur Web, modifiez la configuration de lancement du projet.
Remarque : si le serveur proxy n’est pas votre ordinateur local, copiez le contenu du r&eacute;pertoire bin sur le serveur avant
l’ex&eacute;cution ou le d&eacute;bogage du programme.
Modification de la configuration de lancement
1 Le fichier de l’application principale du projet &eacute;tant ouvert dans Flash Builder, cliquez avec le bouton droit dans
l’&eacute;diteur et s&eacute;lectionnez Ex&eacute;cuter en tant que &gt; Ex&eacute;cuter les configurations. La bo&icirc;te de dialogue Cr&eacute;ation, gestion
et ex&eacute;cution des configurations s’affiche.
2 Dans la liste des configurations, s&eacute;lectionnez la configuration de lancement du projet.
3 (Facultatif) Dans l’onglet Principal, d&eacute;s&eacute;lectionnez l’option Utiliser la valeur par d&eacute;faut pour modifier l’URL ou le
chemin &agrave; lancer.
4 Dans la zone de texte D&eacute;boguer, saisissez l’URL ou le chemin de la version de d&eacute;bogage de l’application.
5 Dans la zone de texte Profil, saisissez l’URL ou le chemin de la version du profileur de l’application.
6 Dans la zone de texte Ex&eacute;cuter, saisissez l’URL ou le chemin du fichier de l’application principale.
7 Cliquez sur Appliquer, puis sur Fermer.
Derni&egrave;re mise &agrave; jour le 10/11/2011
250
Chapitre 10 : Utilisation de Flash Builder
avec Flash Catalyst
Flux de travaux entre Flash Catalyst et Flash Builder
Flash Catalyst CS5.5 et Flash Builder 4.5 ou version sup&eacute;rieure permettent aux concepteurs et d&eacute;veloppeurs de
collaborer et de travailler ensemble sur des projets. Vous trouverez ci-dessous la pr&eacute;sentation de ces trois flux de
travaux courants.
Regardez cette vid&eacute;o de Steven Peeters, professionnel de la communaut&eacute; Adobe, qui offre un aper&ccedil;u des flux de
travaux entre Flash Catalyst et Flash Builder.
Flux de travail de cr&eacute;ation de structures filaires et de prototypes dans Flash
Catalyst
Ce flux de travail souligne un ensemble commun d’&eacute;tapes que les concepteurs effectueront souvent dans Flash Catalyst
et d’autres applications CS pour cr&eacute;er des structures filaires et &eacute;laborer rapidement des prototypes d’applications.
L’implication d’un d&eacute;veloppeur permet d’&eacute;tendre encore les projets Flash Catalyst &agrave; l’aide de Flash Builder, par
exemple pour se connecter &agrave; une base de donn&eacute;es ou &agrave; des services Web. Les flux de travaux 2 et 3 montrent comment
des fichiers et des parties d’applications, telles que des habillages et des composants, peuvent &ecirc;tre &eacute;chang&eacute;s entre
concepteurs et d&eacute;veloppeurs.
• Modifier en boucle l'illustration dans Illustrator, Photoshop
Concepteur
option
option
option
option 2
option
option 2
option
option 2
option
Publier un prototype
ou &eacute;tendre dans Builder
• Cr&eacute;er une structure
filaire dans
Flash Catalyst
ou
• Importer des
conceptions compl&egrave;tes
&agrave; partir de CS
• Cr&eacute;er et modifier les
&eacute;tats d'affichage
• Cr&eacute;er les composants • D&eacute;finir les interactions • Afficher un aper&ccedil;u
interactifs
et les transitions
et tester le projet
• Modifier en boucle
l'illustration dans les
applications CS
• D&eacute;finir ou modifier les
&eacute;tats des composants
Voir les flux de travail 2 ou 3
Planifier l’application : commencez par une sp&eacute;cification d&eacute;taill&eacute;e du projet. Cette sp&eacute;cification doit d&eacute;crire chaque
page ou &eacute;cran, les illustrations et les composants interactifs pr&eacute;sents sur chaque page, la navigation utilisateur et les
diff&eacute;rents &eacute;tats de chaque composant. La sp&eacute;cification doit d&eacute;crire &eacute;galement tous les composants de liste de donn&eacute;es
utilis&eacute;s pour r&eacute;cup&eacute;rer et afficher des donn&eacute;es externes.
Cr&eacute;er une structure filaire ou importer une conception compl&egrave;te : utilisez les outils graphiques disponibles dans Flash
Catalyst pour cr&eacute;er une structure filaire de la pr&eacute;sentation de l’application ou importez une composition &agrave; partir
d’Adobe Illustrator, Photoshop ou Fireworks.
Cr&eacute;er ou acqu&eacute;rir des illustrations et du contenu audio et vid&eacute;o suppl&eacute;mentaires : cr&eacute;ez des illustrations et du
contenu audio et vid&eacute;o suppl&eacute;mentaires pour l’application.
Derni&egrave;re mise &agrave; jour le 10/11/2011
251
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Catalyst
Importer des illustrations et du contenu audio et vid&eacute;o : importez les illustrations multicalques dans Flash Catalyst.
Vous pouvez &eacute;galement importer des fichiers graphiques individuels ou cr&eacute;er des graphiques simples &agrave; l’aide des outils
int&eacute;gr&eacute;s de dessin vectoriel. Importez des ressources suppl&eacute;mentaires, telles que des contenus vid&eacute;o, audio et SWF.
Pour les composants centr&eacute;s sur les donn&eacute;es, tels que les listes de donn&eacute;es, importez un &eacute;chantillon de donn&eacute;es
repr&eacute;sentatif (texte ou images). Pour plus d’informations, voir Importation d’illustrations.
Une fois une illustration import&eacute;e ou cr&eacute;&eacute;e dans Flash Catalyst, vous pouvez la modifier dans Illustrator ou
Photoshop, puis la renvoyer, ainsi modifi&eacute;e, &agrave; Flash Catalyst. L’aller-retour de modifications constitue une extension
des fonctionnalit&eacute;s de dessin et d’&eacute;dition graphique de Flash Catalyst et am&eacute;liore le processus de conception it&eacute;ratif. Pour
plus d’informations, voir Aller-retour de modification d’illustrations.
Cr&eacute;er et modifier les &eacute;tats d’affichage : cr&eacute;ez des &eacute;tats en fonction de la sp&eacute;cification du projet. Pour plus
d’informations, voir Types d’&eacute;tats.
Cr&eacute;er des composants interactifs et d&eacute;finir des &eacute;tats de composant : convertissez les illustrations en composants
pr&eacute;d&eacute;finis (boutons, barres de d&eacute;filement, listes de donn&eacute;es et ainsi de suite). Utilisez le panneau Biblioth&egrave;que
commune pour ajouter rapidement des composants courants d’aspect g&eacute;n&eacute;rique. Cr&eacute;ez des composants personnalis&eacute;s
pour les comportements que vous ne pouvez pas capturer &agrave; l’aide des composants int&eacute;gr&eacute;s. Pour plus d’informations,
voir Qu’est-ce qu’un composant ?
Pour les applications centr&eacute;es sur les donn&eacute;es, faites appel au panneau Donn&eacute;es en phase de conception pour cr&eacute;er des
composants de liste de donn&eacute;es. Les donn&eacute;es en phase de conception permettent l’utilisation de contenu factice
(enregistrements de base de donn&eacute;es ou images bitmap, par exemple) ne n&eacute;cessitant pas de connexion effective &agrave; un
syst&egrave;me back-end. Les d&eacute;veloppeurs Flex peuvent remplacer les donn&eacute;es en phase de conception par des donn&eacute;es
r&eacute;elles issues d’une base de donn&eacute;es ou d’un service Web. Pour plus d’informations sur l’utilisation des donn&eacute;es en
phase de conception, voir Lites de donn&eacute;es et panneaux de d&eacute;filement.
Cr&eacute;er ou modifier des &eacute;tats de composant : les composants peuvent avoir plusieurs &eacute;tats. Un bouton peut avoir par
exemple les &eacute;tats Haut, Dessus, Bas et D&eacute;sactiv&eacute;. Cr&eacute;ez ou modifiez les diff&eacute;rents &eacute;tats de chaque composant interactif
en fonction de la sp&eacute;cification du projet.
Remarque : les &eacute;tapes de cr&eacute;ation des &eacute;tats de page et des composants interactifs sont interchangeables. Certains
concepteurs pr&eacute;f&egrave;rent commencer par cr&eacute;er tous les composants interactifs avant de les ajouter aux pages et aux &eacute;tats.
D&eacute;finir les interactions et les transitions : ajoutez des interactions d&eacute;finissant ce qui se produit lorsque les utilisateurs
interagissent avec l’application. Vous pouvez par exemple cr&eacute;er des interactions d&eacute;finissant la transition d’un &eacute;tat de
page ou de composant vers un autre lorsque l’utilisateur clique sur un bouton. Vous pouvez &eacute;galement ajouter des
interactions d&eacute;clenchant la lecture d’animations, contr&ocirc;lant la lecture de vid&eacute;os ou ouvrant une URL. Utilisez le
panneau Sc&eacute;narios pour ajouter des transitions r&eacute;guli&egrave;res anim&eacute;es entre les &eacute;tats de page et de composant ainsi que
pour les modifier. Pour plus d’informations sur les interactions, voir D&eacute;finition de la navigation et du comportement
&agrave; l’aide des interactions. Pour plus d’informations sur les transitions, voir Animations.
Tester le projet : testez fr&eacute;quemment le projet au cours du d&eacute;veloppement pour vous assurer du bon fonctionnement
des interactions. Voir Aper&ccedil;u de votre projet dans un navigateur Web.
Derni&egrave;re mise &agrave; jour le 10/11/2011
252
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Catalyst
Flux de production pour &eacute;quipe r&eacute;duite entre Flash Catalyst et Flash Builder
Pour les projets simples faisant appel &agrave; une &eacute;quipe d’une ou deux personnes, les fichiers FXP peuvent permettre
d’&eacute;changer un projet Flex complet entre un concepteur travaillant sur Flash Catalyst et un d&eacute;veloppeur utilisant Flash
Builder. Le format FXP est un format d’archive contenant les dossiers, les fichiers et les m&eacute;tadonn&eacute;es d’un projet.
Concepteur
• Cr&eacute;er un prototype
• Importer FXP du d&eacute;veloppeur
• Exporter FXP au d&eacute;veloppeur
option
option 2
option
• Cr&eacute;er des habillages, ajouter une interactivit&eacute;
• Exporter FXP au d&eacute;veloppeur
D&eacute;veloppeur
option
option 2
option
Publier l'application
• Importer FXP du concepteur
• Importer FXP du concepteur
• D&eacute;velopper la logique applicative, la connectivit&eacute;
aux services Web et de donn&eacute;es, une pr&eacute;sentation
avanc&eacute;e, des composants personnalis&eacute;s
• Continuer &agrave; d&eacute;velopper la logique applicative,
la connectivit&eacute; aux services Web et de donn&eacute;es...
• Confirmer la compatibilit&eacute;...
• Confirmer la compatibilit&eacute;, exporter au format
FXP au concepteur
Un fichier FXP contient l’ensemble des ressources n&eacute;cessaires pour l’utilisation du projet dans Flash Builder. Par
l’interm&eacute;diaire du fichier FXP, le d&eacute;veloppeur peut fournir au concepteur des habillages, une pr&eacute;sentation de base,
l’animation et l’interactivit&eacute; de base pour le projet.
A l’aide de Flash Builder, le d&eacute;veloppeur peut ajouter les comportements de logique commerciale, de connectivit&eacute; de
donn&eacute;es, de pr&eacute;sentation avanc&eacute;e et des composants habillables personnalis&eacute;s. Il peut renvoyer le fichier FXP au
concepteur pour une modification ult&eacute;rieure des habillages, l’ajout de l’interactivit&eacute; et de l’animation au fur et &agrave; mesure
de l’avancement du projet. Le d&eacute;veloppeur doit assurer en permanence le maintien de la compatibilit&eacute; avec Flash
Catalyst dans le projet. Pour plus d’informations sur la compatibilit&eacute; avec Flash Catalyst dans Flash Builder, voir
Directives pour la cr&eacute;ation d’un projet compatible avec Flash Catalyst.
Si un travail de conception ult&eacute;rieur s’av&egrave;re n&eacute;cessaire, le concepteur peut rouvrir le fichier FXP dans Flash Catalyst et
modifier les habillages, la pr&eacute;sentation et l’interactivit&eacute; de base du projet. Il peut ensuite enregistrer le fichier FXP &agrave;
nouveau et permettre au d&eacute;veloppeur d’incorporer ces modifications dans le projet &agrave; l’aide de Flash Builder.
Remarque : certains composants et autres aspects du projet peuvent &ecirc;tre impossibles &agrave; modifier dans Flash Catalyst apr&egrave;s
leur modification dans Flash Builder.
Lorsqu’il est achev&eacute;, le projet peut &ecirc;tre finalis&eacute; et publi&eacute; dans Flash Builder.
Derni&egrave;re mise &agrave; jour le 10/11/2011
253
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Catalyst
Flux de production pour &eacute;quipe nombreuse entre Flash Builder et Flash
Catalyst
Pour les projets plus complexes, les d&eacute;veloppeurs peuvent permettre aux concepteurs de modifier des parties de la
cr&eacute;ation dans Flash Catalyst et d&eacute;placer ces parties uniquement dans un projet de biblioth&egrave;que Flex. Le d&eacute;veloppeur
peut ensuite r&eacute;f&eacute;rencer le projet de biblioth&egrave;que &agrave; partir du projet principal, puis exporter le projet de biblioth&egrave;que au
format FXPL. Le concepteur peut importer le fichier FXPL dans Flash Catalyst, apporter les modifications requises,
puis exporter le fichier FXPL pour le renvoyer au d&eacute;veloppeur.
Concepteur
option
option 2
option
• Importer FXPL du d&eacute;veloppeur
• Importer FXPL du d&eacute;veloppeur
• Cr&eacute;er des habillages visuels, ajouter une interactivit&eacute;
• Cr&eacute;er des habillages et une interactivit&eacute;
suppl&eacute;mentaires
• Exporter FXPL au d&eacute;veloppeur
• Exporter FXPL au d&eacute;veloppeur
D&eacute;veloppeur
option
option 2
option
option
option 2
option
• Cr&eacute;er un projet Flex compatible
Flash Catalyst
• Importer FXPL du concepteur et
fusionner les modifications
• Importer FXPL du concepteur
et fusionner les modifications
• Configurer un ou des projets
de biblioth&egrave;que
• Cr&eacute;er des biblioth&egrave;ques et des
composants habillables personnalis&eacute;s
suppl&eacute;mentaires
• Confirmer la compatibilit&eacute;...
• Cr&eacute;er des composants habillables
personnalis&eacute;s ; exporter FXPL au
concepteur
D&eacute;ployer l'application
• Confirmer la compatibilit&eacute;,
exporter au format FXPL
D&eacute;velopper la logique applicative, la connectivit&eacute; aux services Web et de donn&eacute;es, une pr&eacute;sentation avanc&eacute;e...
Le projet se compose d’un projet principal et de biblioth&egrave;ques de composants compl&eacute;mentaires. Seules les
biblioth&egrave;ques sont modifi&eacute;es dans Flash Catalyst. Pour cr&eacute;er une biblioth&egrave;que dans Flash Builder, voir &laquo; Cr&eacute;ation de
projets de biblioth&egrave;que Flex &raquo; &agrave; la page 229. Pour plus d’informations sur l’utilisation de biblioth&egrave;ques dans Flash
Catalyst, voir &laquo; Utilisation de projets de biblioth&egrave;que Flex &raquo; &agrave; la page 228.
Un fichier FXPL est export&eacute; depuis la biblioth&egrave;que du projet et contient des informations concernant le composant,
n&eacute;cessaires au d&eacute;veloppeur pour son utilisation dans Flash Builder. Dans Flash Builder, le d&eacute;veloppeur int&egrave;gre le
fichier FXPL en tant que partie d’un projet plus important.
Le d&eacute;veloppeur peut exporter des fichiers FXPL pour les renvoyer au concepteur, sous forme de composants
habillables personnalis&eacute;s modifiables dans Flash Catalyst. Pour plus d’informations sur la cr&eacute;ation de composants
habillables personnalis&eacute;s dans Flash Builder, voir &laquo; Cr&eacute;ation d’un composant ActionScript habillable &raquo; &agrave; la page 42.
Vous pouvez ensuite importer les ressources de conception dans Flash Builder sous forme de nouveau projet, puis
comparer et fusionner les modifications &agrave; l’aide des outils de Flash Builder. Pour plus d’informations, voir &laquo; Transfert
de fichiers entre Flash Builder et Flash Catalyst &raquo; &agrave; la page 256
Si un travail de conception suppl&eacute;mentaire s’av&egrave;re n&eacute;cessaire, vous pouvez transmettre les fichiers FXPL sous forme
d’allers-retours entre Flash Builder et Flash Catalyst. Assurez vous en permanence de maintenir la compatibilit&eacute; avec
Flash Catalyst dans le projet. Pour plus d’informations sur le maintien de la compatibilit&eacute; avec Flash Catalyst dans le
projet, voir &laquo; V&eacute;rification de la compatibilit&eacute; avec Flash Catalyst &raquo; &agrave; la page 255.
Derni&egrave;re mise &agrave; jour le 10/11/2011
254
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Catalyst
Vous pouvez ensuite utiliser les outils de Flash Builder pour cr&eacute;er une application enti&egrave;rement fonctionnelle. Vous
pouvez d&eacute;finir les services de donn&eacute;es qui extraient les donn&eacute;es au moment de l’ex&eacute;cution, puis lier les donn&eacute;es
renvoy&eacute;es aux composants visuels de votre projet. Par exemple, lorsque vous cliquez sur un bouton, vous pouvez
appeler un composant HTTPService. Le composant peut utiliser des appels de proc&eacute;dure &agrave; distance pour interagir avec
les environnements de serveur, tels que ColdFusion ou PHP, et fournir des donn&eacute;es &agrave; l’application. Pour plus
d’informations, voir Construction d’applications centr&eacute;es sur les donn&eacute;es avec Flash Builder.
Int&eacute;gration de Flash Catalyst et de Flash Builder
Structure de projet permettant d’assurer la compatibilit&eacute; avec Flash Catalyst
Flash Catalyst CS5.5 prend en charge un jeu partiel de fonctionnalit&eacute;s et de composants disponibles dans Flex 4.5 ou
version sup&eacute;rieure. Par cons&eacute;quent, il est important de structurer le projet pour un fonctionnement transparent dans
Flash Catalyst.
Planification du projet
Lors de la planification de votre projet, identifiez les parties visuelles appartenant au concepteur et les parties logiques
appartenant au d&eacute;veloppeur. En g&eacute;n&eacute;ral, le concepteur est charg&eacute; des objets visuels, des animations et de la
pr&eacute;sentation de base du projet. Le d&eacute;veloppeur est habituellement charg&eacute; de l’architecture, de la fonctionnalit&eacute; et de la
pr&eacute;sentation de niveau application du projet.
sh Catalyst et Flash Builder proposent plusieurs outils permettant de d&eacute;finir un contrat pr&eacute;cis entre conception et
d&eacute;veloppement. La s&eacute;paration du projet entre projet principal et projets de biblioth&egrave;que compatibles avec Flash
Catalyst d&eacute;finit clairement les parties du projet modifiables par le concepteur. L’utilisation de composants habillables
fournit une s&eacute;paration pr&eacute;cise entre la logique et les visuels au niveau du composant.
Utilisation de projets de biblioth&egrave;que
Les projets de biblioth&egrave;que permettent de s&eacute;parer la conception et la logique au niveau du projet. Il sont utilis&eacute;s par les
d&eacute;veloppeurs afin de s&eacute;parer des parties du projet devant &ecirc;tre modifi&eacute;es dans Flash Catalyst.
Les projets de biblioth&egrave;que simplifient &eacute;galement le processus de fusion, car g&eacute;n&eacute;ralement le d&eacute;veloppeur ne modifie
pas le projet de biblioth&egrave;que lorsqu’il est en cours d’utilisation par le concepteur.
Cr&eacute;ation d’un projet principal et d’un projet de biblioth&egrave;que compl&eacute;mentaire compatible avec Flash Catalyst
1 Cr&eacute;ez le projet Flex principal. Pour plus d’informations, voir &laquo; Projets Flex &raquo; &agrave; la page 88.
2 Cr&eacute;ez un projet de biblioth&egrave;que Flex.
Assurez-vous que le projet est compatible avec Flash Catalyst en s&eacute;lectionnant Rendre le projet compatible avec
Flash Catalyst dans l’assistant Nouveau projet de biblioth&egrave;que Flex. Pour plus d’informations, voir &laquo; Cr&eacute;ation de
projets de biblioth&egrave;que Flex &raquo; &agrave; la page 229.
3 Ajoutez le projet de biblioth&egrave;que au chemin de g&eacute;n&eacute;ration du projet Flex principal.
Pour ce faire, acc&eacute;dez &agrave; Projet &gt; Propri&eacute;t&eacute;s et s&eacute;lectionnez Chemin d’acc&egrave;s &agrave; la g&eacute;n&eacute;ration Flex. S&eacute;lectionnez
l’onglet Biblioth&egrave;que et cliquez sur Ajouter un projet. Pour plus d’informations, voir &laquo; Modification d’un chemin
de g&eacute;n&eacute;ration de projet &raquo; &agrave; la page 107.
4 Placez les composants habillables et les habillages dans le projet de biblioth&egrave;que et les fichiers de code dans le projet
principal.
Derni&egrave;re mise &agrave; jour le 10/11/2011
255
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Catalyst
Remarque : le projet principal d&eacute;pend du projet de biblioth&egrave;que. Par cons&eacute;quent, la biblioth&egrave;que ne peut contenir
aucun code d&eacute;pendant du projet principal et doit &ecirc;tre autonome.
Voir aussi
&laquo; Transfert de fichiers entre Flash Builder et Flash Catalyst &raquo; &agrave; la page 256
Utilisation de composants habillables
L’architecture d’habillage de Flex permet de cr&eacute;er des composants habillables pouvant &ecirc;tre &eacute;tendus, qui sont
compatibles avec Flash Catalyst. Gr&acirc;ce &agrave; la cr&eacute;ation de composants habillables dans Flash Builder et la cr&eacute;ation visuelle
d’habillages dans Flash Catalyst, vous pouvez s&eacute;parer la conception et la logique au niveau du composant.
Un composant habillable contient la partie logique d’un composant, tandis que l’habillage contient les &eacute;l&eacute;ments visuels
et les r&egrave;gles de pr&eacute;sentation. En outre, un composant habillable peut indiquer que son habillage contient des parties et
des &eacute;tats. Le composant h&ocirc;te peut contr&ocirc;ler les parties et les &eacute;tats de l’habillage par programmation. En restreignant la
communication entre le composant habillable et ses habillages aux parties et aux &eacute;tats, vous obtenez deux parties
ind&eacute;pendantes et flexibles. Pour plus d’informations sur la cr&eacute;ation de composants habillables personnalis&eacute;s dans
Flash Builder, voir Exemple : cr&eacute;ation d’un composant Spark habillable.
Apr&egrave;s la cr&eacute;ation d’une d&eacute;finition de composant habillable dans Flash Builder, cr&eacute;ez un exemple d’habillage initial.
Dans ce cas, si vous importez le projet dans Flash Catalyst, l’habillage appara&icirc;t dans le panneau Composants de Flash
Catalyst. Vous pouvez alors facilement modifier l’habillage dans Flash Catalyst. La cr&eacute;ation d’un exemple d’habillage
aide le concepteur &agrave; comprendre la structure de base de l’habillage.
Voir aussi
Composants habillables personnalis&eacute;s
&laquo; Cr&eacute;ation d’un composant ActionScript habillable &raquo; &agrave; la page 42
Skinning custom components using Flash Builder and Flash Catalyst (vid&eacute;o)
V&eacute;rification de la compatibilit&eacute; avec Flash Catalyst
Comme tout outil de codage visuel, Flash Catalyst prend en charge uniquement un sous-ensemble de code Flex.
Toutefois, Flash Builder fournit un v&eacute;rificateur de compatibilit&eacute; qui indique pr&eacute;cis&eacute;ment les parties du code pouvant
&ecirc;tre modifi&eacute;es dans Flash Catalyst.
Lorsque vous cr&eacute;ez un projet compatible avec Flash Catalyst dans Flash Builder, le v&eacute;rificateur de compatibilit&eacute; avec
Flash Catalyst (Projet &gt; Propri&eacute;t&eacute;s &gt; Flash Catalyst) est automatiquement activ&eacute;. Lorsque vous cr&eacute;ez un projet dans
Flash Catalyst et l’importez dans Flash Builder, il est automatiquement configur&eacute; pour &ecirc;tre compatible avec Flash
Catalyst. Si vous introduisez des incompatibilit&eacute;s lors de la modification du projet, Flash Builder affiche les erreurs de
compatibilit&eacute; dans la vue Erreurs en indiquant les parties du code pouvant &ecirc;tre modifi&eacute;es dans Flash Catalyst.
Vous ne devez pas n&eacute;cessairement r&eacute;soudre toutes les erreurs de compatibilit&eacute; avant d’ouvrir un projet dans Flash
Catalyst. La colonne &laquo; Type &raquo; de la vue Erreurs affiche l’impact de chaque erreur de compatibilit&eacute;. Les erreurs qui
emp&ecirc;chent l’ouverture du projet dans Flash Catalyst s’affichent sous forme d’avertissements. Les erreurs moins graves
s’affichent comme notifications d’&laquo; information &raquo;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
256
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Catalyst
Type d’incompatibilit&eacute;
Description
Incompatibilit&eacute; de projet
Le projet ne peut pas &ecirc;tre ouvert dans Flash Catalyst.
Incompatibilit&eacute; de fichier
Le fichier ne peut pas &ecirc;tre modifi&eacute; dans Flash Catalyst.
Toute incompatibilit&eacute; dans l’application principale rend le projet incompatible.
Incompatibilit&eacute; de composant habillable
Le composant ne peut pas &ecirc;tre habill&eacute; dans Flash Catalyst ou la partie d’habillage ne peut pas
&ecirc;tre affect&eacute;e dans Flash Catalyst.
Incompatibilit&eacute; de donn&eacute;es en phase de
conception
Les donn&eacute;es de liste sont contr&ocirc;l&eacute;es par un code d’application non modifiable dans Flash
Catalyst. Vous pouvez modifier l’aspect de la liste dans Flash Catalyst.
Avertissement de compatibilit&eacute; avec
Flash Catalyst
Cet avertissement n’affecte pas la capacit&eacute; de modification du projet dans Flash Catalyst. Il
peut toutefois indiquer une exp&eacute;rience de modification non transparente.
Pour plus d’informations sur les erreurs de compatibilit&eacute; avec Flash Catalyst, voir Directives sur la cr&eacute;ation d’un projet
compatible avec Flash Catalyst.
Voir aussi
Ensuring Compatibility in Flash Builder and Flash Catalyst Projects (vid&eacute;o)
Transfert de fichiers entre Flash Builder et Flash Catalyst
Les fichiers FXP permettent d’&eacute;changer un projet Flex complet ou des composants, des habillages de composant et des
ressources entre un concepteur et un d&eacute;veloppeur.
Pour les projets complexes, vous pouvez structurer l’interface utilisateur du projet sous forme de s&eacute;rie de composants
habillables et d’habillages, &agrave; l’aide d’un projet de biblioth&egrave;que. Pour plus d’informations, voir &laquo; Utilisation de projets
de biblioth&egrave;que Flex &raquo; &agrave; la page 228.
Vous pouvez ensuite transmettre des fichiers FXLP en allers-retours entre Flash Builder et Flash Catalyst afin
d’&eacute;changer uniquement les habillages de composants et les ressources de conception. Pour s’assurer que tout est fait
dans l’ordre, le concepteur peut importer les fichiers FXPL dans un projet Flash Catalyst, cr&eacute;er des habillages visuels
et ajouter l’interactivit&eacute;.
Utilisez les flux de production d’exportation et d’importation suivants pour transmettre les fichiers FXP et FXPL sous
forme d’allers-retours entre Flash Builder et Flash Catalyst.
Transfert de fichiers de Flash Builder &agrave; Flash Catalyst
• Pour exporter un fichier FXP ou FXPL de Flash Builder vers Flash Catalyst, s&eacute;lectionnez Projet &gt; Flash Catalyst &gt;
Exporter un projet Flash Catalyst.
• Pour importer le fichier FXP ou FXPL de Flash Builder dans Flash Catalyst, acc&eacute;dez &agrave; Fichier &gt; Importer et
s&eacute;lectionnez Fichier Adobe FXG (.fxg) ou Package de biblioth&egrave;que (.fxpl).
Transfert de fichiers de Flash Catalyst &agrave; Flash Builder
• Pour exporter un fichier FXP ou FXPL de Flash Catalyst vers Flash Builder, acc&eacute;dez &agrave; Fichier &gt; Exporter et
s&eacute;lectionnez Fichier Adobe FXG (.fxg) ou Package de biblioth&egrave;que (.fxpl).
• Pour importer un fichier FXP ou FXPL de Flash Catalyst dans Flash Builder, s&eacute;lectionnez Projet &gt; Flash Catalyst &gt;
Importer un projet Flash Catalyst.
Derni&egrave;re mise &agrave; jour le 10/11/2011
257
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Catalyst
Modification de fichiers FXP &agrave; l’aide de la commande Editer dans Flash Catalyst
Si Flash Builder et Flash Catalyst sont install&eacute;s sur le m&ecirc;me ordinateur, vous pouvez utiliser la commande Editer dans
Flash Builder pour modifier les fichiers FXP.
Pour plus d’informations, voir &laquo; Commande Editer dans Flash Catalyst &raquo; &agrave; la page 257.
Fusion de modifications de Flash Catalyst &agrave; Flash Builder
Lors de l’importation de fichiers FXP ou FXPL de Flash Catalyst dans Flash Builder, vous pouvez comparer et
fusionner les diff&eacute;rences entre les deux projets &agrave; l’aide de l’&eacute;diteur de comparaison. Vous pouvez &eacute;galement utiliser un
outil de fusion tiers de votre choix.
Lorsque vous cr&eacute;ez des &eacute;l&eacute;ments de conception dans Flash Catalyst, vous pouvez les int&eacute;grer dans Flash Builder en
important le fichier FXP ou FXPL avec les m&eacute;thodes suivantes.
• Importez les &eacute;l&eacute;ments de conception dans un nouveau projet, puis comparez et fusionnez les modifications &agrave; l’aide
des outils de Flash Builder.
• Importez le contenu de la biblioth&egrave;que dans le projet existant.
• Remplacez le fichier FXP existant avec la version mise &agrave; jour uniquement si aucune modification n’a &eacute;t&eacute; apport&eacute;e
au projet dans l’intervalle.
Remarque : il est impossible de remplacer les projets de biblioth&egrave;que (.fxpl).
Pour comparer les projets &agrave; l’aide de l’&eacute;diteur de comparaison, s&eacute;lectionnez les projets en maintenant la touche Ctrl
enfonc&eacute;e tout en cliquant sur les projets &agrave; comparer. Ensuite, cliquez avec le bouton droit de la souris sur les projets
s&eacute;lectionn&eacute;s et choisissez Comparer &gt; R&eacute;ciproquement. Les r&eacute;sultats s’affichent dans le panneau Comparaison de
texte.
Remarque : lors de la fusion, vous observez plusieurs modifications dans les fichiers de param&egrave;tres, tels que
actionScriptProperties, ou dans les fichiers en sortie, tels que bin-debug, ou dans d’autres parties du projet. Vous pouvez
g&eacute;n&eacute;ralement ignorer ces modifications et vous concentrer uniquement sur les modifications du dossier source.
Pour plus d’informations sur l’utilisation de l’&eacute;diteur de comparaison, voir la documentation d’Eclipse.
Commande Editer dans Flash Catalyst
Utilisez la commande Editer dans Flash Catalyst si vous disposez de Flash Builder et de Flash Catalyst sur le m&ecirc;me
ordinateur. Vous pouvez lancer Flash Catalyst depuis Flash Builder et apporter directement au projet toute
modification de conception n&eacute;cessaire, sans transmettre les fichiers entre Flash Builder et Flash Catalyst.
1 Pour lancer Flash Catalyst directement depuis Flash Builder, s&eacute;lectionnez Projet &gt; Flash Catalyst &gt; Editer le projet
dans Flash Catalyst.
Vous pouvez &eacute;galement s&eacute;lectionner Flash Catalyst &gt; Editer le projet dans Flash Catalyst dans le menu contextuel
du projet.
2 Modifiez la cr&eacute;ation de l’application, si n&eacute;cessaire. Lorsque vous modifiez le projet dans Flash Catalyst, le projet est
verrouill&eacute; dans Flash Builder. Le projet est verrouill&eacute; afin d’&eacute;carter toute modification conflictuelle.
3 Enregistrez les modifications et fermez le projet dans Flash Catalyst. Vous ne devez pas n&eacute;cessairement quitter
Flash Catalyst.
4 Dans Flash Builder, s&eacute;lectionnez Projet &gt; Reprendre le travail sur le projet dans Flash Builder. Vous pouvez
&eacute;galement s&eacute;lectionner Flash Catalyst &gt; Reprendre le travail sur le projet dans Flash Builder dans le menu
contextuel du projet.
Derni&egrave;re mise &agrave; jour le 10/11/2011
258
UTILISATION DE FLASH BUILDER 4.6
Utilisation de Flash Builder avec Flash Catalyst
Dans ce cas, vous &ecirc;tes invit&eacute; &agrave; enregistrer les modifications effectu&eacute;es dans Flash Catalyst. L’enregistrement des
modifications renvoie le projet r&eacute;cemment enregistr&eacute; dans Flash Builder. En arri&egrave;re plan, la version du projet
export&eacute;e initialement &agrave; partir de Flash Builder est supprim&eacute;e lorsque la version r&eacute;cemment enregistr&eacute;e du projet
est import&eacute;e avec succ&egrave;s &agrave; partir de Flash Catalyst.
Les modifications de cr&eacute;ation sont ajout&eacute;es au projet et le projet est ouvert pour &ecirc;tre modifi&eacute; dans Flash Builder.
Derni&egrave;re mise &agrave; jour le 10/11/2011
259
Chapitre 11 : Personnalisation de Flash
Builder
Adobe &reg; Flash&reg; Builder™ est un plug-in pour la plateforme de d&eacute;veloppement Eclipse. Outre les pr&eacute;f&eacute;rences g&eacute;n&eacute;rales
que vous avez sp&eacute;cifi&eacute;es pour Eclipse, sp&eacute;cifiez les pr&eacute;f&eacute;rences de Flash Builder. Les param&egrave;tres de certaines fonctions
devront &ecirc;tre d&eacute;finis &agrave; la fois dans les nœuds Eclipse et Flash Builder de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. Par exemple,
lorsque vous d&eacute;finissez vos pr&eacute;f&eacute;rences pour le d&eacute;bogueur Flash Builder, vous devez sp&eacute;cifier un comportement
personnalis&eacute; aussi bien sous Ex&eacute;cution/D&eacute;bogage d’Eclipse que sous Flash Builder &gt; D&eacute;boguer.
L’acc&egrave;s &agrave; la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences varie en fonction de la plateforme et de la version de Flash Builder (autonome
ou plug-in) utilis&eacute;es.
D&eacute;finition des pr&eacute;f&eacute;rences de Flash Builder
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences :
• (Windows) S&eacute;lectionnez Fen&ecirc;tre &gt; Pr&eacute;f&eacute;rences.
• (Macintosh, autonome) S&eacute;lectionnez Fen&ecirc;tre &gt; Pr&eacute;f&eacute;rences.
• (Macintosh, plug-in) S&eacute;lectionnez Eclipse &gt; Pr&eacute;f&eacute;rences.
2 D&eacute;veloppez le nœud Flash Builder pour afficher et sp&eacute;cifier les pr&eacute;f&eacute;rences de l’utilisateur.
Pr&eacute;f&eacute;rences Adobe
D&eacute;finissez les pr&eacute;f&eacute;rences pour les modules plug-in d’Adobe.
Configuration RDS
La configuration Remote Development Server (RDS) s’applique aux utilisateurs d’ADEP (Adobe Digital Enterprise
Platform) Data Services ou d’Adobe BlazeDS. RDS donne acc&egrave;s aux destinations Data Services et BlazeDS.
La configuration RDS par d&eacute;faut est le point de d&eacute;part pour l’&eacute;tablissement d’une connexion aux services de donn&eacute;es.
Modifiez la configuration par d&eacute;faut afin de permettre l’acc&egrave;s &agrave; votre serveur ou base de donn&eacute;es.
Pour plus d’informations sur la configuration RDS, voir la documentation d’ADEP Data Services.
Important : la configuration RDS pr&eacute;sente des implications en termes de s&eacute;curit&eacute;. Pour plus d’informations sur les
implications au niveau de la s&eacute;curit&eacute; du serveur d’applications, voir la documentation relative &agrave; ADEP Data Services.
Personnalisation du workbench
Vous pouvez personnaliser le workbench en fonction de vos besoins. Il vous est par exemple possible de d&eacute;finir
l’affichage des &eacute;l&eacute;ments dans la barre d’outils principale, de cr&eacute;er des raccourcis clavier ou encore de modifier les
polices et les couleurs de l’interface utilisateur.
Derni&egrave;re mise &agrave; jour le 10/11/2011
260
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
R&eacute;organisation de la barre d’outils principale
Flash Builder vous permet de r&eacute;organiser les sections de la barre d’outils principale. Les sections de la barre d’outils
principale sont s&eacute;par&eacute;es par un espace.
1 V&eacute;rifiez que la barre d’outils est d&eacute;verrouill&eacute;e. Dans le menu contextuel de la barre d’outils, d&eacute;s&eacute;lectionnez l’option
Verrouiller les barres d’outils.
2 Positionnez le pointeur sur la ligne verticale qui d&eacute;limite sur la gauche la section &agrave; d&eacute;placer.
3 Cliquez sur cette ligne et d&eacute;placez la section vers la gauche, la droite, le haut ou le bas. Rel&acirc;chez le bouton de la souris
pour positionner la section &agrave; son nouvel emplacement.
Afin d’&eacute;viter tout d&eacute;placement non intentionnel des barres d’outils, verrouillez-les de nouveau en activant l’option
correspondante de leur menu contextuel.
Modification des raccourcis clavier
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Touches.
2 Dans l’&eacute;cran Vue de la bo&icirc;te de dialogue Touches, s&eacute;lectionnez la commande &agrave; modifier.
3 Dans le champ Liaison, saisissez le nouveau raccourci clavier &agrave; lier &agrave; la commande.
4 Dans la liste d&eacute;roulante Quand, s&eacute;lectionnez &agrave; quel moment le raccourci clavier doit &ecirc;tre activ&eacute;.
5 Cliquez sur Appliquer ou sur OK.
Pour obtenir la liste de tous les raccourcis clavier, cliquez sur Aide &gt; Assistant de touches.
Modification des polices et des couleurs
Par d&eacute;faut, le workbench utilise les polices et les couleurs du syst&egrave;me d’exploitation de l’ordinateur. Vous pouvez
cependant personnaliser les polices et les couleurs de diff&eacute;rentes mani&egrave;res.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral &gt; Apparence &gt; Couleurs et polices.
2 D&eacute;veloppez les cat&eacute;gories Comparaison de texte, Couleurs et polices de base, CVS, D&eacute;boguer ainsi que Dossiers des
&eacute;diteurs et des vues pour rechercher et s&eacute;lectionner la police et les couleurs &agrave; modifier.
Remarque : vous pouvez &eacute;galement cliquer sur Utiliser la police du syst&egrave;me au lieu de Modifier pour laisser le syst&egrave;me
d’exploitation choisir une valeur de police appropri&eacute;e. Sous Windows par exemple, si vous s&eacute;lectionnez cette option,
Flash Builder utilise la police s&eacute;lectionn&eacute;e dans les propri&eacute;t&eacute;s d’affichage du Panneau de configuration de Windows.
3 D&eacute;finissez vos pr&eacute;f&eacute;rences en mati&egrave;re de police et de couleur.
Contr&ocirc;le du clic et du double-clic
Vous pouvez d&eacute;finir la r&eacute;action du workbench &agrave; un clic ou &agrave; un double-clic.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez G&eacute;n&eacute;ral.
2 Dans la section Mode d’ouverture, s&eacute;lectionnez les options voulues et cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 10/11/2011
261
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
D&eacute;finition des pr&eacute;f&eacute;rences du workbench
Vous pouvez d&eacute;finir les pr&eacute;f&eacute;rences de nombreux aspects du workbench. Vous pouvez par exemple configurer Flash
Builder de mani&egrave;re &agrave; ce qu’il vous invite &agrave; s&eacute;lectionner l’espace de travail au d&eacute;marrage, d&eacute;finir l’&eacute;diteur &agrave; utiliser &agrave;
l’ouverture de certains types de ressource ainsi que param&eacute;trer diff&eacute;rentes options pour l’ex&eacute;cution et le d&eacute;bogage de
vos applications.
Vos pr&eacute;f&eacute;rences Flash Builder s’appliquent uniquement &agrave; l’espace de travail actuel. Vous pouvez cependant exporter
les pr&eacute;f&eacute;rences du workbench et les importer dans un autre espace de travail. L’exportation des pr&eacute;f&eacute;rences est utile si
vous g&eacute;rez plusieurs espaces de travail ou si vous souhaitez partager les pr&eacute;f&eacute;rences du workbench avec d’autres
membres de votre &eacute;quipe de d&eacute;veloppement.
Vous pouvez &eacute;galement d&eacute;finir des pr&eacute;f&eacute;rences individuelles pour chaque projet d’un espace de travail, par exemple
d&eacute;finir des options de compilation ou de d&eacute;bogage distinctes pour chacun de vos projets Flex.
D&eacute;finition des pr&eacute;f&eacute;rences du workbench Flash Builder
1 Ouvrez la fen&ecirc;tre Pr&eacute;f&eacute;rences.
2 D&eacute;veloppez G&eacute;n&eacute;ral, choisissez l’une des cat&eacute;gories de pr&eacute;f&eacute;rences du workbench et modifiez-la si n&eacute;cessaire.
3 Cliquez sur OK.
Pr&eacute;f&eacute;rences de Flash Builder
Flash Builder
Avertissement avant la mise &agrave; niveau d’anciens projets Flash Builder
Flash Builder met &agrave; jour les projets qui ont &eacute;t&eacute; cr&eacute;&eacute;s dans l’une de ses versions ant&eacute;rieures. La mise &agrave; jour englobe la
mise en conformit&eacute; des fichiers et de la structure du projet avec la structure actuelle des projets Flash Builder. Un projet
converti ne pourra plus &ecirc;tre ouvert avec une version ant&eacute;rieure de Flash Builder.
Par d&eacute;faut, Flash Builder vous avertit avant de proc&eacute;der &agrave; la conversion. D&eacute;sactivez cette option pour que les
conversions s’effectuent sans avertissement.
Donn&eacute;es/Services
Les pr&eacute;f&eacute;rences disponibles pour Donn&eacute;es/Services sont d&eacute;crites ci-dessous. Elles s’appliquent &agrave; tous les projets se
trouvant dans votre environnement de d&eacute;veloppement Flash Builder.
Vous pouvez les remplacer pour chaque projet individuellement. S&eacute;lectionnez Projet &gt; Propri&eacute;t&eacute;s &gt; Donn&eacute;es/Services
pour remplacer les pr&eacute;f&eacute;rences qui y sont sp&eacute;cifi&eacute;es.
G&eacute;n&eacute;rateur de code
Flash Builder fournit un utilitaire de g&eacute;n&eacute;ration de code par d&eacute;faut pour g&eacute;n&eacute;rer l’acc&egrave;s aux services de donn&eacute;es. Faites
appel aux fonctions d’extensibilit&eacute; de Flash Builder pour cr&eacute;er vos propres utilitaires de g&eacute;n&eacute;ration de code et les
ajouter &agrave; Flash Builder en tant que plug-in. Pour plus d’informations, voir Guide de r&eacute;f&eacute;rence des API d’extensibilit&eacute;
de Flash Builder.
Toute extension de g&eacute;n&eacute;ration de code ajout&eacute;e &agrave; Flash Builder en tant que plug-in est r&eacute;pertori&eacute;e dans la liste
d&eacute;roulante G&eacute;n&eacute;rateur de code.
Derni&egrave;re mise &agrave; jour le 10/11/2011
262
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Activer l’utilisation de l’occurrence de service simple (singleton) lors de la g&eacute;n&eacute;ration de code pour le gestionnaire
de services
Par d&eacute;faut, cette option n’est pas activ&eacute;e. Au cours de la g&eacute;n&eacute;ration de code, chaque application client d’un projet cr&eacute;e
sa propre occurrence d’un service de donn&eacute;es.
Pour que les applications client du projet partagent une seule occurrence du service, activez cette option.
Cette option est disponible uniquement si vous s&eacute;lectionnez l’utilitaire de g&eacute;n&eacute;ration de code par d&eacute;faut de Flash
Builder.
D&eacute;bogage
Les options de d&eacute;bogage d&eacute;crites ci-dessous sont activ&eacute;es par d&eacute;faut. Pour les autres options affectant une session de
d&eacute;bogage, voir :
• Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral &gt; Navigateur Web
• Pr&eacute;f&eacute;rences &gt; Ex&eacute;cution/D&eacute;bogage
Avertissement en cas de tentative d’ouverture de plusieurs sessions de d&eacute;bogage
Certaines combinaisons de navigateurs et plateformes n’autorisent pas l’ex&eacute;cution en parall&egrave;le de plusieurs sessions de
d&eacute;bogage. Le d&eacute;marrage d’une seconde session de d&eacute;bogage entra&icirc;ne la fermeture ou la d&eacute;connexion de la premi&egrave;re
session.
Ne d&eacute;sactivez pas cette option si vous souhaitez que Flash Builder vous avertisse de la tentative de d&eacute;marrage d’une
seconde session de d&eacute;bogage.
Signalement des erreurs de s&eacute;curit&eacute; apr&egrave;s le lancement
Dans certains cas, le navigateur Web &eacute;met une erreur de s&eacute;curit&eacute; lorsqu’il ne peut pas lire le fichier de confiance de
s&eacute;curit&eacute; de Flash Player. Le red&eacute;marrage du navigateur Web suffit g&eacute;n&eacute;ralement &agrave; r&eacute;soudre ce probl&egrave;me.
Ne d&eacute;sactivez pas cette option si vous souhaitez que Flash Builder vous avertisse de ce type d’erreur de s&eacute;curit&eacute;.
Voir la note technique pour l’avertissement de s&eacute;curit&eacute; de Flash Player.
Appel automatique des fonctions getter
Au cours des &eacute;tapes d’une session de d&eacute;bogage, les variables repr&eacute;sentant les fonctions d’accesseur (getter) sont
automatiquement &eacute;valu&eacute;es. Ce comportement est g&eacute;n&eacute;ralement utile au cours d’une session de d&eacute;bogage.
D&eacute;sactivez cette option si vous ne souhaitez pas &eacute;valuer automatiquement les variables repr&eacute;sentant des fonctions
d’accesseur lors des &eacute;tapes d’une session de d&eacute;bogage.
Gestion de la version du lecteur Flash Player autonome
Lorsque vous lancez ou d&eacute;boguez une application &agrave; partir de Flash Builder, vous pouvez sp&eacute;cifier l’ex&eacute;cutable de Flash
Player &agrave; utiliser.
Pour ce faire, s&eacute;lectionnez Flash Builder &gt; D&eacute;boguer dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. D&eacute;finissez ensuite
l’emplacement du fichier ex&eacute;cutable de Flash Player que Flash Builder utilise pour d&eacute;boguer ou lancer votre
application.
Derni&egrave;re mise &agrave; jour le 10/11/2011
263
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Configurations de p&eacute;riph&eacute;riques
Flash Builder utilise les configurations de p&eacute;riph&eacute;rique lors de l’affichage d’un aper&ccedil;u des tailles d’&eacute;cran des
p&eacute;riph&eacute;riques dans la vue Cr&eacute;ation, ou lors du lancement d’applications sur l’ordinateur &agrave; l’aide d’AIR Debug
Launcher. Voir &laquo; Gestion des configurations de lancement &raquo; &agrave; la page 120.
Flash Builder fournit des configurations par d&eacute;faut pour les t&eacute;l&eacute;phones Nexus One, Droid, Apple iPad, Apple iPhone,
HTC et Samsung Android. Vous ne pouvez pas modifier les configurations par d&eacute;faut.
Editeurs Flash Builder
G&eacute;n&eacute;ral
Flash Builder fournit des options utilisateur pour la r&eacute;duction du code, en signalant les probl&egrave;mes &agrave; mesure que vous
saisissez le code et en utilisant le positionnement du caret au niveau du sous-mot.
Accolades
Flash Builder comporte des options pour la mise en retrait, l’insertion et la mise en &eacute;vidence d’accolades repr&eacute;sentant
des blocs de code.
Assistant de contenu
L’&eacute;diteur de source MXML ou ActionScript de Flash Builder fournit des conseils de code qui vous aident &agrave; compl&eacute;ter
vos expressions de code. Il facilite par exemple la s&eacute;lection des classes recommand&eacute;es, des propri&eacute;t&eacute;s et des &eacute;v&eacute;nements
disponibles.
• Activer l’activation automatique
D&eacute;sactivez l’option Activer l’activation automatique si vous ne souhaitez pas que les conseils de code soient
automatiquement affich&eacute;s en cours de frappe. Si cette option est d&eacute;sactiv&eacute;e, vous pouvez acc&eacute;der aux conseils de
code en appuyant sur les touches Ctrl+Espace.
• Activer apr&egrave;s
Sp&eacute;cifiez le d&eacute;lai en millisecondes devant s’&eacute;couler entre le moment auquel vous commencez &agrave; saisir du code et le
moment auquel les conseils de code doivent s’afficher. Par d&eacute;faut, ce d&eacute;lai est de 100 millisecondes.
• Utiliser des raccourcis personnalis&eacute;s suppl&eacute;mentaires
Vous pouvez non seulement acc&eacute;der aux conseils de code en appuyant sur Ctrl + Espace, mais aussi sp&eacute;cifier vos
propres touches de raccourci.
Saisissez les touches que vous souhaitez utiliser comme raccourcis pour acc&eacute;der aux conseils de code dans le code
MXML ou ActionScript. Si vous tapez sur une seule touche du raccourci, des conseils de code sont appel&eacute;s. Par
exemple, si vous sp&eacute;cifiez comme touches de raccourci ab. Une pression sur a ou sur b appelle l’assistant de code.
Voir aussi
&laquo; Outils de d&eacute;veloppement de code dans Flash Builder &raquo; &agrave; la page 48
Mise en retrait
Flash Builder fournit des options utilisateur permettant la mise en retrait &agrave; l’aide de tabulations au lieu d’espaces et la
mise en retrait automatique des nouvelles lignes de saisie.
Derni&egrave;re mise &agrave; jour le 10/11/2011
264
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de l’&eacute;diteur pour Flash Builder
Par d&eacute;faut, Flash Builder r&eacute;duit le code et met automatiquement les lignes en retrait en cours de saisie ou de collage de
texte dans l’&eacute;diteur de source. Vous pouvez d&eacute;sactiver les pr&eacute;f&eacute;rences par d&eacute;faut de ces fonctions.
Pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de l’&eacute;diteur pour Eclipse
Pour d&eacute;finir d’autres pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de l’&eacute;diteur, s&eacute;lectionnez Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral &gt; Editeurs.
Code ActionScript
Lorsque vous &eacute;ditez des fichiers ActionScript dans l’&eacute;diteur de source, Flash Builder fournit des fonctions par d&eacute;faut
pour le renvoi &agrave; la ligne et l’organisation du code. Par d&eacute;faut, Flash Builder place toutes les instructions d’importation
en t&ecirc;te du fichier ActionScript et supprime toutes celles qui ne sont pas r&eacute;f&eacute;renc&eacute;es dans le corps du code.
Par d&eacute;faut, la documentation de r&eacute;f&eacute;rence ActionScript disponible s’affiche simultan&eacute;ment aux conseils de code ou en
survolant un &eacute;l&eacute;ment de langage avec le curseur de la souris.
Chacune de ces fonctions par d&eacute;faut peut &ecirc;tre d&eacute;sactiv&eacute;e.
Lorsque vous saisissez un code ActionScript dans les &eacute;diteurs de Flash Builder, l’assistant de contenu vous propose une
liste d’options pour terminer votre expression de code. Vous pouvez compl&eacute;ter automatiquement votre code
ActionScript partiellement saisi en utilisant des touches de raccourci de remplissage. Pour ce faire, Flash Builder
fournit des touches de raccourci par d&eacute;faut. Vous pouvez choisir de remplacer les touches de raccourci par d&eacute;faut par
vos propres raccourcis. Vous pouvez aussi choisir d’ins&eacute;rer le code en appuyant sur la barre d’espacement.
Cycle d’assistance au contenu
Lors de la saisie de code ActionScript, appuyez plusieurs fois sur les touches Ctrl+Espace pour faire d&eacute;filer les filtres
pour les conseils de code affich&eacute;s.
Vous pouvez sp&eacute;cifier les conseils de code &agrave; afficher, ainsi que l’ordre de d&eacute;filement des conseils de code. Pour modifier
le param&egrave;tre par d&eacute;faut, proc&eacute;dez comme suit :
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Code ActionScript &gt; Cycle
d’assistance au contenu.
2 S&eacute;lectionnez un type d’indicateur et modifiez-en la position dans le cycle de d&eacute;filement en cliquant sur les boutons
Haut et Bas.
Le premier type d’indicateur de la liste sera affich&eacute; en premier.
Mise en retrait
Par d&eacute;faut, Flash Builder met en retrait le contenu du package, les d&eacute;clarations de fonction et les instructions switch.
Chacune de ces fonctions par d&eacute;faut peut &ecirc;tre d&eacute;sactiv&eacute;e.
Voir aussi
&laquo; Outils de d&eacute;veloppement de code dans Flash Builder &raquo; &agrave; la page 48
&laquo; Assistant de contenu &raquo; &agrave; la page 48
Mod&egrave;les de code
Vous pouvez personnaliser le code de remplacement pr&eacute;d&eacute;fini g&eacute;n&eacute;r&eacute; par Flash Builder lorsque vous cr&eacute;ez des
m&eacute;thodes ou des fonctions d’accesseur get et set, g&eacute;n&eacute;rez des gestionnaires d’&eacute;v&eacute;nement ou remplacez des m&eacute;thodes.
Derni&egrave;re mise &agrave; jour le 10/11/2011
265
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Flash Builder fournit &eacute;galement des mod&egrave;les de code pr&eacute;d&eacute;finis qui vous permettront de cr&eacute;er rapidement du code
MXML, ActionScript et CSS. Vous pouvez cr&eacute;er et modifier des mod&egrave;les de code. Vous pouvez &eacute;galement importer et
exporter les fichiers de mod&egrave;les de code.
Pour plus d’informations &agrave; propos de l’utilisation, de la cr&eacute;ation et de la modification des mod&egrave;les de code, voir
&laquo; Cr&eacute;ation et modification de mod&egrave;les de code &raquo; &agrave; la page 57.
Mode Cr&eacute;ation
Flash Builder comporte les pr&eacute;f&eacute;rences suivantes pour le mode Cr&eacute;ation de l’&eacute;diteur de source.
• Activer automatiquement les vues li&eacute;es &agrave; la cr&eacute;ation
Lors du passage en mode Cr&eacute;ation de l’&eacute;diteur de source, Flash Builder ouvre automatiquement les vues associ&eacute;es,
telles que Propri&eacute;t&eacute;s, Etats, Composants et Aspects.
D&eacute;sactivez cette pr&eacute;f&eacute;rence pour personnaliser le choix des vues qui s’ouvriront en mode Cr&eacute;ation.
• Activer l’alignement
En mode Cr&eacute;ation, Flash Builder comporte une grille invisible qui aligne automatiquement les composants ajout&eacute;s
ou d&eacute;plac&eacute;s.
D&eacute;sactivez cette pr&eacute;f&eacute;rence pour avoir une meilleure ma&icirc;trise du positionnement des composants.
• G&eacute;n&eacute;rer un rendu des habillages &agrave; l’ouverture d’un fichier
Le mode Cr&eacute;ation repr&eacute;sente les composants dot&eacute;s d’un habillage plac&eacute;s dans la zone de cr&eacute;ation.
Pour d&eacute;sactiver le rendu des habillages des composants en mode Cr&eacute;ation, d&eacute;s&eacute;lectionnez cette pr&eacute;f&eacute;rence.
• R&eacute;duire les expressions de liaison de donn&eacute;es
En mode Cr&eacute;ation, les expressions de liaison des donn&eacute;es ne refl&egrave;tent g&eacute;n&eacute;ralement pas pr&eacute;cis&eacute;ment la forme ou la
taille des donn&eacute;es auxquelles elles sont li&eacute;es.
Activez cette pr&eacute;f&eacute;rence pour autoriser le mode Cr&eacute;ation de l’&eacute;diteur &agrave; rendre les composants li&eacute;s &agrave; des expressions
de liaison de donn&eacute;es avec une plus grande pr&eacute;cision.
• Toujours mettre &agrave; jour les r&eacute;f&eacute;rences lors de la modification des ID dans la vue Propri&eacute;t&eacute;s
La modification d’un identifiant de composant dans la vue Propri&eacute;t&eacute;s peut avoir une incidence sur le code de
l’espace de travail qui fait r&eacute;f&eacute;rence &agrave; cet identifiant.
Activez cette pr&eacute;f&eacute;rence pour que Flash Builder mette automatiquement &agrave; jour toutes les r&eacute;f&eacute;rences aux ID de
composant lorsque vous modifiez un ID de composant dans la vue Propri&eacute;t&eacute;s.
• Toujours ouvrir les fichiers MXML dans l’&eacute;diteur de code
Lorsque vous ouvrez un fichier MXML dans l’Explorateur de packages, il est toujours ouvert dans le mode Source
de l’&eacute;diteur.
Si cette pr&eacute;f&eacute;rence est d&eacute;sactiv&eacute;e, le fichier MXML est ouvert dans le dernier mode dans lequel l’&eacute;diteur l’a ouvert.
Par exemple, supposons que le fichier MXML a &eacute;t&eacute; en dernier ouvert dans le mode Cr&eacute;ation, puis ferm&eacute;. Lors de la
prochaine ouverture de ce fichier MXML, l’&eacute;diteur ouvre &agrave; nouveau le fichier en mode Cr&eacute;ation.
Code MXML
Lorsque vous &eacute;ditez des fichiers MXML dans l’&eacute;diteur de source, Flash Builder fournit des fonctions par d&eacute;faut de
suggestion de code. Chacune de ces fonctions peut &ecirc;tre d&eacute;sactiv&eacute;e.
Derni&egrave;re mise &agrave; jour le 10/11/2011
266
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Cycle d’assistance au contenu
Flash Builder d&eacute;finit un comportement par d&eacute;faut pour l’assistant de contenu lors de l’&eacute;dition de fichiers MXML.
Lorsqu’il est disponible, l’assistant de contenu affiche des indicateurs sur les &eacute;l&eacute;ments de langage pouvant &ecirc;tre ins&eacute;r&eacute;s
dans le code. Pour parcourir les &eacute;l&eacute;ments affich&eacute;s dans la fen&ecirc;tre de l’assistant de contenu, appuyez plusieurs fois sur
les touches Ctrl+Espace.
Vous pouvez sp&eacute;cifier les conseils de code &agrave; afficher, ainsi que l’ordre de d&eacute;filement des conseils de code. Pour modifier
le param&egrave;tre par d&eacute;faut, proc&eacute;dez comme suit :
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Editeurs &gt; Code MXML &gt; Cycle
d’assistance au contenu.
2 Sp&eacute;cifiez les types d’indicateurs que vous souhaitez afficher.
3 S&eacute;lectionnez un type d’indicateur et modifiez-en la position dans le cycle de d&eacute;filement en cliquant sur les boutons
Haut et Bas.
Le premier type d’indicateur de la liste sera affich&eacute; en premier.
Voir aussi
&laquo; Assistant de contenu &raquo; &agrave; la page 48
&laquo; Outils de d&eacute;veloppement de code dans Flash Builder &raquo; &agrave; la page 48
Formatage
Par d&eacute;faut, Flash Builder formate le code MXML g&eacute;n&eacute;r&eacute; automatiquement. Par exemple, Flash Builder formate le code
MXML qui est g&eacute;n&eacute;r&eacute; automatiquement lorsque vous ajoutez un composant dans la vue Cr&eacute;ation ou lorsque vous
utilisez les outils Flash Builder pour vous connecter &agrave; un service de donn&eacute;es et acc&eacute;der aux donn&eacute;es.
Vous pouvez modifier l’ordre et le regroupement des attributs dans la bo&icirc;te de dialogue des pr&eacute;f&eacute;rences de formatage.
Le formatage ne s’applique pas au code r&eacute;dig&eacute; &agrave; la main. Pour formater un fragment de code r&eacute;dig&eacute; &agrave; la main,
s&eacute;lectionnez Source &gt; Appliquer le formatage (Ctrl+Maj+F). Le code est ensuite format&eacute;, que vous ayez ou non
s&eacute;lectionn&eacute; l’option Maintenir les attributs MXML organis&eacute;s.
Mise en retrait
Par d&eacute;faut, la mise en retrait du code s’effectue par tabulations. Ce param&egrave;tre peut &ecirc;tre modifi&eacute; en faveur de l’utilisation
d’espaces. La taille de la tabulation et de la mise en retrait par d&eacute;faut &eacute;quivaut &agrave; quatre espaces.
S&eacute;lectionnez ActionScript ou MXML sous Mise en retrait dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences afin d’afficher les
param&egrave;tres correspondants. Vous pouvez &eacute;galement personnaliser les m&eacute;thodes heuristiques de mise en retrait.
Coloration de la syntaxe
La coloration de la syntaxe et la mise en &eacute;vidence de texte dans les fichiers ActionScript, CSS et MXML sont d&eacute;finies
par d&eacute;faut. Ces param&egrave;tres par d&eacute;faut peuvent &ecirc;tre remplac&eacute;s. D&eacute;veloppez le nœud du langage et s&eacute;lectionnez une
fonction de langage pour remplacer la fonction par d&eacute;faut.
Les pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de l’&eacute;diteur pour Eclipse sont &eacute;galement disponibles. Voir :
• Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral &gt; Editeurs de texte
• Pr&eacute;f&eacute;rences &gt; G&eacute;n&eacute;ral &gt; Couleurs et polices
Derni&egrave;re mise &agrave; jour le 10/11/2011
267
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Associations de fichiers
Vous pouvez s&eacute;lectionner Flash Builder comme application par d&eacute;faut pour l’ouverture des fichiers MXML et
ActionScript. La sp&eacute;cification d’une association de fichiers remplace les param&egrave;tres du syst&egrave;me d’exploitation.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences et s&eacute;lectionnez Flash Builder &gt; Associations de fichiers.
2 S&eacute;lectionnez les options Fichiers ActionScript (*.as) et Fichiers MXML (*.mxml) pour d&eacute;finir les associations de
fichiers.
Exclusions de fichiers
Vous pouvez sp&eacute;cifier les types de fichier que vous souhaitez que Flash Builder ne copie pas dans le dossier de sortie
au cours de la compilation du projet.
1 Ouvrez la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, puis s&eacute;lectionnez Flash Builder &gt; Exclusions de fichiers.
2 Vous pouvez ajouter des extensions de nom de fichier et des noms de fichier, ou supprimer des &eacute;l&eacute;ments existants
de la liste.
3 Pour ajouter des extensions de nom de fichier ou des noms de fichier, cliquez sur Nouveau, puis indiquez une
extension de nom de fichier ou un nom de fichier valide.
4 Pour restaurer la liste par d&eacute;faut des extensions &agrave; n’importe quel moment, cliquez sur Restaurer les valeurs par
d&eacute;faut.
Mod&egrave;les de fichiers
Les mod&egrave;les de fichiers interviennent lors de la cr&eacute;ation de nouveaux fichiers MXML, ActionScript et CSS et peuvent
&ecirc;tre personnalis&eacute;s. Vous pouvez &eacute;galement importer et exporter des fichiers de mod&egrave;les.
Dans la zone Types de fichier, s&eacute;lectionnez le mod&egrave;le d’un type de fichier. Cliquez sur Editer pour le modifier.
D&eacute;sactivez l’option Mise en retrait automatique des nouveaux fichiers si vous ne souhaitez pas faire appel aux
pr&eacute;f&eacute;rences de mise en retrait de Flash Builder lors de la cr&eacute;ation de fichiers.
Vous pouvez modifier les pr&eacute;f&eacute;rences de mise en retrait de Flash Builder. Acc&eacute;dez &agrave; Pr&eacute;f&eacute;rences &gt; Flash Builder &gt; Mise
en retrait.
Voir aussi
&laquo; Personnalisation des mod&egrave;les de fichier &raquo; &agrave; la page 62
&laquo; Mise en retrait &raquo; &agrave; la page 263
FlexUnit
Mode de lancement par d&eacute;faut
Lorsque vous ex&eacute;cutez un test FlexUnit, Flash Builder est lanc&eacute; par d&eacute;faut en mode de d&eacute;bogage.
Cette pr&eacute;f&eacute;rence vous permet de modifier le mode de lancement de Flash Builder pour les tests FlexUnit.
Les modes de lancement par d&eacute;faut de Flash Builder sont les suivants :
• Mode Ex&eacute;cuter
Par d&eacute;faut, ce mode lance la perspective Flash.
• Mode D&eacute;boguer
Derni&egrave;re mise &agrave; jour le 10/11/2011
268
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Par d&eacute;faut, ce mode lance la perspective D&eacute;bogage Flash.
• Mode Profiler
Par d&eacute;faut, ce mode lance la perspective Profil Flash.
Les pr&eacute;f&eacute;rences Eclipse pour le lancement et les perspectives d&eacute;finissent les modes de lancement. Voir :
• Pr&eacute;f&eacute;rences &gt; Ex&eacute;cution/D&eacute;bogage &gt; Lancement
• Pr&eacute;f&eacute;rences &gt; Ex&eacute;cution/D&eacute;bogage &gt; Perspectives
Nom de l’application personnalis&eacute;e
Sp&eacute;cifiez le nom complet du fichier de l’application FlexUnit personnalis&eacute;e. Si le fichier de l’application FlexUnit
personnalis&eacute;e ne se trouve pas dans le projet Flex s&eacute;lectionn&eacute;, Flash Builder g&eacute;n&egrave;re automatiquement un fichier
d’application FlexUnit par d&eacute;faut.
Num&eacute;ro de port
Sp&eacute;cifie le num&eacute;ro de port &agrave; utiliser pour connecter Flash Builder &agrave; l’application FlexUnit sur le p&eacute;riph&eacute;rique mobile.
Le num&eacute;ro de port pr&eacute;sente une valeur de 8765 cod&eacute;e en dur.
Utilisation d’une structure alternative
Par d&eacute;faut, les fichiers SWC de la structure qui sont disponibles avec Flash Builder sont ajout&eacute;s au chemin de
g&eacute;n&eacute;ration FlexUnit.
Pour indiquer une structure FlexUnit diff&eacute;rente, s&eacute;lectionnez Use Alternative Framework. Acc&eacute;dez &agrave; l’emplacement
du r&eacute;pertoire de la structure que vous souhaitez s&eacute;lectionner.
Lorsque vous cr&eacute;ez une classe de cas de test ou une suite de cas de test FlexUnit pour le projet s&eacute;lectionn&eacute;, Flash Builder
ajoute automatiquement les fichiers SWC figurant dans le r&eacute;pertoire de la structure alternative au chemin de
g&eacute;n&eacute;ration de FlexUnit.
Lorsque vous cr&eacute;ez un r&eacute;pertoire de structure FlexUnit alternative, il est recommand&eacute; d’utiliser la structure de
r&eacute;pertoire suivante pour les fichiers SWC :
• Fichiers flexunit-x.x-as3_x.x.swc dans le dossier &laquo; ASProject &raquo;. Les fichiers SWC pr&eacute;sents dans ce dossier
sont automatiquement ajout&eacute;s au chemin de g&eacute;n&eacute;ration d’un projet ActionScript.
• Fichiers flexunit-x.x-flex_x.x.swc dans le dossier &laquo; FlexProject &raquo;. Les fichiers SWC pr&eacute;sents dans ce dossier
sont automatiquement ajout&eacute;s au chemin de g&eacute;n&eacute;ration d’un projet Flex.
• Les &eacute;ventuels autres fichiers SWC requis par votre projet ou par rapport auxquels votre code FlexUnit pr&eacute;sente des
d&eacute;pendances (qui ne figurent pas encore dans le chemin de g&eacute;n&eacute;ration) dans le dossier &quot;Commun&quot; Les fichiers SWC
pr&eacute;sents dans ce dossier sont automatiquement ajout&eacute;s au chemin de g&eacute;n&eacute;ration des projets ActionScript et Flex.
Si Flash Builder ne d&eacute;tecte pas la structure de r&eacute;pertoire recommand&eacute;e, le r&eacute;pertoire alternatif s&eacute;lectionn&eacute; est ajout&eacute;,
qu’il s’agisse d’un projet Flex ou ActionScript.
Paul Robertson, professionnel de la communaut&eacute; Adobe, a publi&eacute; sur son blog un article concernant la cr&eacute;ation
d’un framework FlexUnit personnalis&eacute;.
Derni&egrave;re mise &agrave; jour le 10/11/2011
269
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Voir aussi
&laquo; Environnement de test FlexUnit &raquo; &agrave; la page 174
&laquo; Perspectives et vues de Flash Builder &raquo; &agrave; la page 7
SDK Flex install&eacute;s
Flash Builder 4.6 installe le SDK Flex 4.6 et le SDK Flex 3.6. Il utilise en outre le SDK Flex 4.6 pour les projets pour
lesquels aucun SDK n’a &eacute;t&eacute; sp&eacute;cifi&eacute;.
Vous pouvez ajouter et supprimer des SDK ainsi que modifier le SDK utilis&eacute; par d&eacute;faut pour les projets n’en sp&eacute;cifiant
aucun. Flash Builder vous demande de choisir le SDK que vous souhaitez utiliser &agrave; l’importation de projets cr&eacute;&eacute;s avec
l’une de ses versions ant&eacute;rieures. Vous pouvez d&eacute;sactiver l’affichage de cette invite &agrave; l’importation de projets.
Les types de SDK disponibles sont les suivants :
SDK Adobe Flex gratuit : versions publi&eacute;es de produits Adobe officiels. Ces SDK contiennent diff&eacute;rents composants
source ouverts et ferm&eacute;s.
SDK Flex Open Source : ce type est destin&eacute; aux utilisateurs souhaitant un package ne contenant que du code &laquo; open
source &raquo;.
Modules compl&eacute;mentaires Adobe pour SDK Flex &laquo; open source &raquo; : ce package contient tous les &eacute;l&eacute;ments qui se
trouvent dans le SDK Flex Adobe et non dans le SDK Flex &laquo; open source &raquo;. Le t&eacute;l&eacute;chargement de ce fichier vous permet
d’aligner le SDK Flex &laquo; open source &raquo; sur le SDK Flex Adobe.
Ajout d’un SDK Flex
1 T&eacute;l&eacute;chargez un SDK Flex vers un emplacement temporaire de votre syst&egrave;me :
V&eacute;rifiez les pages de t&eacute;l&eacute;chargement pour obtenir des informations sur les diff&eacute;rents types de version, les conditions
requises et les licences.
• Download Flex 4.6 SDKs
• Download Flex 4.5 SDKs.
• Download Flex 4 SDKs.
• Download Flex 3 SDKs.
Remarque : si vous souhaitez utiliser une version stable et test&eacute;e, t&eacute;l&eacute;chargez une version d’&eacute;tape. Cette version a &eacute;t&eacute;
d&eacute;clar&eacute;e comme &eacute;tant une version majeure par l’&eacute;quipe de d&eacute;veloppement. Elle comporte une version sign&eacute;e des RSL
de la structure Flex (requis pour utiliser la mise en cache RSL).
2 Les SDK Flex t&eacute;l&eacute;charg&eacute;s sont au format ZIP. D&eacute;compressez le fichier ZIP dans un nouveau dossier sur votre
syst&egrave;me.
Pour plus de clart&eacute;, vous pouvez attribuer au dossier de niveau sup&eacute;rieur le num&eacute;ro de version du SDK.
Les SDK sont g&eacute;n&eacute;ralement plac&eacute;s dans le r&eacute;pertoire d’installation de Flash Builder &agrave; l’emplacement suivant :
&lt;Flash Builder Install Directory&gt;/sdks/
3 Dans les pr&eacute;f&eacute;rences de Flash Builder, s&eacute;lectionnez Flash Builder &gt; SDK Flex install&eacute;s.
4 Cliquez sur Ajouter, puis recherchez le SDK Flex d&eacute;compress&eacute;. Cliquez sur Appliquer.
5 Pour chaque projet utilisant le SDK Flex, acc&eacute;dez &agrave; cette bo&icirc;te de dialogue et s&eacute;lectionnez le SDK qui sera utilis&eacute; par
d&eacute;faut. Cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 10/11/2011
270
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Moniteur de r&eacute;seau
La page de pr&eacute;f&eacute;rences Moniteur de r&eacute;seau r&eacute;pertorie les ports sur lesquels le Moniteur de r&eacute;seau intercepte des
&eacute;v&eacute;nements et &eacute;coute les requ&ecirc;tes HTTP.
Par d&eacute;faut, le Moniteur de r&eacute;seau supprime au d&eacute;marrage toutes les entr&eacute;es. Cette pr&eacute;f&eacute;rence peut &ecirc;tre d&eacute;sactiv&eacute;e.
Vous pouvez &eacute;galement activer les pr&eacute;f&eacute;rences suivantes :
• Suspendre la surveillance au d&eacute;marrage
• Ignorer les v&eacute;rifications de s&eacute;curit&eacute; SSL
L’activation de cette pr&eacute;f&eacute;rence est utile pour surveiller le trafic r&eacute;seau &agrave; partir d’un serveur autosign&eacute;.
Profileur
Par d&eacute;faut, le profilage de la m&eacute;moire et le profilage des performances sont tous les deux activ&eacute;s.
• Profilage de la m&eacute;moire
Le profilage de la m&eacute;moire permet de d&eacute;terminer la quantit&eacute; de m&eacute;moire utilis&eacute;e par un objet ou un type d’objet
dans l’application. Faites appel au profilage de la m&eacute;moire pour diminuer la taille des objets, r&eacute;duire le nombre
d’objets cr&eacute;&eacute;s ou permettre le nettoyage des objets dans la m&eacute;moire en supprimant les r&eacute;f&eacute;rences &agrave; ces objets.
La quantit&eacute; de m&eacute;moire utilis&eacute;e par le profilage de la m&eacute;moire est bien sup&eacute;rieure &agrave; celle utilis&eacute;e par le profilage des
performances et peut donc ralentir votre application.
• Profilage des performances
Le profilage des performances recherche les m&eacute;thodes de l’application dont l’ex&eacute;cution est lente et qui sont
susceptibles de pouvoir &ecirc;tre am&eacute;lior&eacute;es ou optimis&eacute;es.
Vous pouvez d&eacute;finir les pr&eacute;f&eacute;rences suivantes pour le profileur :
• Connexions
Sp&eacute;cifiez le num&eacute;ro de port que Flash Builder &eacute;coute lors du profilage d’une application. Le num&eacute;ro de port par
d&eacute;faut est 9999. Ce port ne peut pas &ecirc;tre d&eacute;fini sur 7935, ce dernier &eacute;tant utilis&eacute; par le d&eacute;bogueur Flash.
• Filtres d’exclusion
D&eacute;finit les packages par d&eacute;faut qui sont exclus des vues du profileur.
• Filtres d’inclusion
D&eacute;finit les packages par d&eacute;faut qui sont inclus dans les vues du profileur. Tous les autres packages sont exclus.
• R&eacute;f&eacute;rences d’objet
Sp&eacute;cifie le nombre de chemins de r&eacute;f&eacute;rences arri&egrave;re &agrave; des occurrences d’un objet &agrave; afficher. Les chemins de
r&eacute;f&eacute;rences arri&egrave;re permettent de d&eacute;terminer si un chemin poss&egrave;de une r&eacute;f&eacute;rence arri&egrave;re &agrave; la r&eacute;cup&eacute;ration de place
(racine de la RP). Une occurrence dont la lib&eacute;ration est attendue mais qui poss&egrave;de des r&eacute;f&eacute;rences &agrave; la racine de la
RP indique une perte de m&eacute;moire.
Par d&eacute;faut, le profileur affiche dix chemins de r&eacute;f&eacute;rences arri&egrave;re. Vous pouvez augmenter cette valeur ou activer
l’option d’affichage de tous les chemins de r&eacute;f&eacute;rences arri&egrave;re.
• Lecteur/Navigateur
Vous pouvez sp&eacute;cifier quel lecteur Adobe Flash Player autonome et quel navigateur Web vous voulez utiliser pour
le profilage des applications externes. Utilisez une version de d&eacute;bogage de Flash Player pour profiler une
application.
Derni&egrave;re mise &agrave; jour le 10/11/2011
271
UTILISATION DE FLASH BUILDER 4.6
Personnalisation de Flash Builder
Lors du profilage d’applications externes, Flash Builder utilise par d&eacute;faut les lecteurs Flash Player suivants :
• URL vers un fichier SWF
Flash Builder lance le fichier SWF de l’application en utilisant le navigateur par d&eacute;faut du syst&egrave;me.
• Emplacement du fichier SWF sur le syst&egrave;me de fichiers
Flash Builder ouvre l’application avec la version par d&eacute;faut du d&eacute;bogueur du lecteur Flash Player autonome.
Voir aussi
&laquo; Utilisation du profileur &raquo; &agrave; la page 162
&laquo; Vues du profileur &raquo; &agrave; la page 145
Plateformes cible
Pour le d&eacute;veloppement d’applications mobiles destin&eacute;es &agrave; la plateforme Android, Flash Builder installe les parties
n&eacute;cessaires du SDK Android.
S&eacute;lection d’une interface r&eacute;seau principale
Lorsque vous d&eacute;boguez votre application via le r&eacute;seau, votre machine h&ocirc;te peut &ecirc;tre connect&eacute;e &agrave; plusieurs interfaces
r&eacute;seau simultan&eacute;ment. Toutefois, vous pouvez s&eacute;lectionner une interface r&eacute;seau principale &agrave; utiliser pour le d&eacute;bogage
dans le package APK Android ou le package iOS de d&eacute;bogage.
Voir aussi
Ex&eacute;cution et d&eacute;bogage des applications mobiles
Extension de Flash Builder
L’API d’extensibilit&eacute; de Flash Builder vous permet d’&eacute;tendre Flash Builder de mani&egrave;re &agrave; prendre en charge les
composants personnalis&eacute;s. Elle permet notamment d’&eacute;tendre les vues Cr&eacute;ation et Propri&eacute;t&eacute;s afin de garantir une prise
en charge correcte des composants personnalis&eacute;s.
Voir Flash Builder Design View extension FAQ pour obtenir les r&eacute;ponses aux questions les plus fr&eacute;quemment
pos&eacute;es concernant les extensions de la vue Cr&eacute;ation.
Vous pouvez &eacute;galement &eacute;tendre la prise en charge par Flash Builder des services disponibles &agrave; partir de l’assistant des
services.
Pour plus d’informations, voir Guide de r&eacute;f&eacute;rence des API d’extensibilit&eacute; de Flash Builder.
Derni&egrave;re mise &agrave; jour le 10/11/2011
Adobe Flash Builder 4.6 Manuel utilisateur

Manuels associés

Adobe

Flash Builder 4.6

Adobe

FLASH BUILDER 4.5

Adobe

FLASH BUILDER 4

Adobe

Flash Builder 4.7

Adobe

FLEX 4

TRIMBLE

Business Center

Adobe

Flex 4.6

Adobe

Flash CS3

Adobe

LiveCycle ES3

Adobe

FLASH CATALYST CS5.5

Adobe

ActionScript 3.0

MACROMEDIA

FLASH MX 2004-UTILISATION DE FLASH
