Vous êtes sur la page 1sur 154

_Apollo.book Page 1 Vendredi, 8.

juin 2007 1:50 13

Apollo
Précis & concis
_Apollo.book Page 2 Vendredi, 8. juin 2007 1:50 13
_Apollo.book Page 3 Vendredi, 8. juin 2007 1:50 13

MIKE CHAMBERS, ROBERT L. DIXON & JEFF


SWARTZ

Apollo
Précis & concis

Traduction de David DERAEDT

Éditions O’REILLY
18 rue Séguier
75006 Paris
france@oreilly.com
http://www.oreilly.fr/

Cambridge • Cologne • Farnham • Paris • Pékin


Sebastopol • Taipei • Tokyo
_Apollo.book Page 4 Vendredi, 8. juin 2007 1:50 13

L’édition originale de ce livre a été publiée aux États-Unis par O’REILLY &
Associates sous le titre Apollo for Flex : Pocket Guide, ISBN 0-596-51391-7.

© O’REILLY & Associates, 2007

Couverture conçue par 2-84177-444-9

Édition : Dominique BURAUD

Mise en page : pbi1@mac.com

Les programmes figurant dans ce livre ont pour but d’illustrer les sujets
traités. Il n’est donné aucune garantie quant à leur fonctionnement une
fois compilés, assemblés ou interprétés dans le cadre d’une utilisation
professionnelle ou commerciale.

© ÉDITIONS O’REILLY, Paris, 2007


ISBN 2-84177-444-9

Toute représentation ou reproduction, intégrale ou partielle, faite sans le consente-


ment de l’auteur, de ses ayants droit, ou ayants cause, est illicite (loi du 11 mars
1957, alinéa 1er de l’article 40). Cette représentation ou reproduction, par quelque
procédé que ce soit, constituerait une contrefaçon sanctionnée par les articles 425
et suivants du Code pénal. La loi du 11 mars 1957 autorise uniquement, aux termes
des alinéas 2 et 3 de l’article 41, les copies ou reproductions strictement réservées à
l’usage privé du copiste et non destinées à une utilisation collective d’une part et,
d’autre part, les analyses et les courtes citations dans un but d’exemple et d’illustra-
tion.
_Apollo.book Page v Vendredi, 8. juin 2007 1:50 13

Table des matières

Préface i
Chapitre 1 - Introduction à Apollo
Une courte histoire des applications web 1
Les problèmes induits par la délivrance d’applications via le
navigateur 4
Présentation de l’environnement d’exécution Apollo 6
Les technologies fondamentales d’Apollo 7
Chapitre 2 - Commencer le développement d’applications
Apollo
Installer l’environnement d’exécution Apollo Alpha 1 19
Outils nécessaires pour le développement d’applications
Apollo 21
Créer une première application Apollo 25
Etapes suivantes 37
Chapitre 3 - Utiliser du HTML dans les applications
Apollo créées avec Flex
Le support du HTML dans Apollo 40
Utiliser le composant Flex HTML 42
Utiliser la classe HTMLControl 53
Le Script Bridging : faire communiquer ActionScript et
JavaScript 56
Chapitre 4 - Utiliser l’API de système de fichiers
Le modèle de sécurité 64
Accéder aux fichiers et aux répertoires 64
Versions asynchrones et synchrones des méthodes 68
Lire le contenu des répertoires 70
Récupérer les informations d’un fichier 71

v
_Apollo.book Page vi Vendredi, 8. juin 2007 1:50 13

Apollo — précis & concis

Copier et déplacer des fichiers et des répertoires 72


Créer des fichiers et des répertoires 73
Supprimer des fichiers et des répertoires 74
Lire et écrire des fichiers 74
Chapitre 5 - Apollo par l’exemple
Travailler avec le système de fichiers 81
Travailler avec du HTML 101
Utiliser l’API de fenêtrage 105
Annexe A - Paquetages et classes d’Apollo
Annexe B - Outils en ligne de commande d’Apollo
AMXMLC 126
ADL 126
ADT 127
Index 129

vi
_Apollo.book Page i Vendredi, 8. juin 2007 1:50 13

Préface

Cet ouvrage constitue une introduction au développement


d’applications pour la version Alpha 1 publique d’Adobe
Apollo, un nouvel environnement d’exécution1 multi-plate-
formes pour applications de bureau. Bien qu’Apollo permette
le développement d’applications basées à la fois sur Flash et sur
HTML, cet ouvrage se concentre essentiellement sur la création
d’applications Apollo avec le framework Flex.
Ce livre offre un aperçu d’Apollo. Il montre comment préparer
votre environnement de développement, et étudie ses nou-
velles fonctionnalités ainsi que ses API. Au terme de sa lecture,
vous devriez avoir une bonne compréhension de ce qu’est
Apollo et de la manière de créer des applications Apollo avec
Flex.

Conventions de nommage de
l’environnement d’exécution Apollo
L’environnement d’exécution Apollo permet aux développeurs
de mettre à profit un certain nombre de technologies web afin
de déployer leurs applications web vers le bureau. En effet, le
nombre de technologies actuelles est si important qu’il semble
difficile de les suivre toutes. Le tableau suivant liste les termes
utilisés dans cet ouvrage et de leur signification :

Nom Signification
Apollo L’environnement d’exécution multi-plateformes
pour le bureau qui permet l’exécution d’applica-
tions Apollo.

1 Dans cet ouvrage, l’expression environnement d’exécution fait réfé-


rence à la notion de runtime parfois employée, notamment par Ado-
be.
i
_Apollo.book Page ii Vendredi, 8. juin 2007 1:50 13

Préface

Nom Signification
Application Application construite avec du Flash, du HTML
Apollo et/ou du PDF et qui s’exécute avec Apollo.
Flash N’importe quel contenu inclus dans un format
de fichier SWF 9 qui s’exécute dans le lecteur
Flash ou dans Apollo.
ActionScript Le langage de programmation basé sur ECMA-
Script utilisé pour programmer du contenu
Flash. Sauf mention contraire, cet ouvrage se
réfère toujours à ActionScript 3.
HTML Langage à balises pour le Web utilisé pour créer
et mettre en page des pages web.
JavaScript Implémentation d’ECMAScript pour le Web
utilisée pour programmer le contenu des applica-
tions HTML.
PDF Portable Document Format, format permettant
la distribution et l’affichage de documents élec-
troniques.
Framework Flex Framework basé sur XML et ActionScript créé
pour faciliter le développement d’applications
Internet riches avec Flash. Dans cet ouvrage,
chaque mention faite au Framework Flex se
réfère à Flex 2.0 ou supérieur.
Flex Builder Environnement de développement basé sur
Eclipse utilisé pour créer des applications
Internet riches à l’aide de Flash et d’ActionScript.

Contenu de l’ouvrage
Ce livre offre un aperçu de ce qu’est Apollo. Il explique tout
d’abord comment préparer votre environnement de développe-
ment pour commencer à créer des applications. Il se penche
ensuite sur deux de ses nouvelles API (HTML et File). Enfin, il
montre comment réaliser un certain nombre de tâches cou-
rantes relatives à la programmation avec Apollo.
D’une manière générale, les fonctionnalités déjà présentes dans
la version alpha sont relativement stables et ne devraient pas
changer radicalement (bien qu’elles puissent être légèrement

ii
_Apollo.book Page iii Vendredi, 8. juin 2007 1:50 13

Préface

remaniées suite aux divers retours des développeurs). En


revanche, les fonctionnalités mentionnées et qui ne sont pas
encore implémentées sont suceptibles d’être modifiées dans les
prochaines versions d’Apollo.
Il faut également noter que la version Alpha 1 d’Apollo est
incomplète. Un nombre significatif de fonctionnalités n’ont pas
encore été implémentées et/ou incluses dans cette version.
La liste suivante est une liste partielle des fonctionnalités
incluses dans Apollo version Alpha 1 :
• support de Mac (OS X 10.4, Intel et PPC) ;
• support de Windows (Windows XP et Windows Vista Home
Premium Edition) ;
• installation d’applications ;
• API d’entrée/sortie de fichier ;
• toutes les fonctionnalités de Flash Player 9, pile réseau
incluse ;
• API de fenêtrage (incomplète) ;
• outils en ligne de commande (ADL et ADT) ;
• HTML dans du contenu Flash ;
• applications HTML, au niveau le plus haut ;
• communication entre ActionScript et JavaScript ;
• support de Flex Builder et du Framework Flex pour créer
des applications Apollo ;
• arguments d’application en ligne de commande ;
• icônes d’applications.
La liste suivante est une liste partielle des fonctionnalités pré-
vues pour Apollo 1.0 qui ne sont pas incluses dans la version
Alpha 1.
• support du PDF ;
• API de menu multi-plateformes ;

iii
_Apollo.book Page iv Vendredi, 8. juin 2007 1:50 13

Préface

• contrôle du clic-droit et du menu contextuel ;


• support complet du HTML ;
• notifications système ;
• API de données en mode déconnecté ;
• glisser-déposer ;
• accès au presse-papiers « riche » ;
• association des types de fichiers.
Nous mentionnerons chaque fonctionnalité susceptible d’être
modifiée dans les versions ultérieures d’Apollo.

Ce que signifie Alpha


Comme nous l’avons vu dans la section précédente, la version
Alpha 1 d’Apollo est loin d’être complète et certaines fonction-
nalités ne sont que partiellement implémentées. Par
conséquent, l’implémentation et la disponibilité de certaines
fonctionnalités sont susceptibles de changer radicalement entre
la version Alpha et la version 1.0.
Cela s’applique également au contenu de cet ouvrage. Ce livre a
été écrit avant que la version Alpha 1 ne soit finalisée, il est
donc possible que certaines API ou fonctionnalités aient chan-
gées entre temps. C’est tout particulièrement vrai en ce qui
concerne le nom des API. Si quelque chose ne fonctionne pas
de la manière décrite dans cet ouvrage, vous devriez consulter
la documentation en ligne, qui contient toujours les informa-
tions les plus récentes sur les API de la version Alpha 1.
Vous pouvez trouver les dernières informations et documenta-
tions sur le site : http://www.adobe.com/go/apollo.

Notre public
Nous espérons que ce livre s’adresse à vous, mais afin d’en être
certain, voici ce que la lecture de ce livre présuppose, ainsi que
le type de développeur auquel il s’adresse.

iv
_Apollo.book Page v Vendredi, 8. juin 2007 1:50 13

Préface

Ce livre présupose que le lecteur soit quelque peu familier avec


la création de contenu et d’applications Flash créées avec le Fra-
mework Flex et ActionScript 3.0.
Vous devez connaître les technologies web telles que Flash,
Flex, HTML et JavaScript, ainsi que les concepts de base du
développement sur le Web.

A qui s’adresse ce livre ?


Ce livre s’adresse aux développeurs qui désirent utiliser leurs
connaissances du framework Flex pour créer et déployer des
applications Flash vers le bureau via Apollo. Si vous n’avez
aucune expérience du développement avec le framework Flex,
nous vous suggérons de consulter les informations et vidéos
d’introduction à Flex disponibles sur le site : http://
www.adobe.com/go/flex.

A qui ce livre ne s’adresse pas ?


Bien qu’il soit possible de créer des applications basées sur
HTML et JavaScript avec la version Alpha 1 d’Apollo, ce livre
ne détaille pas le développement de telles applications. Si vous
êtes développeur HTML et JavaScript et que vous vous inté-
ressez à la création d’applications avec Apollo, ce guide peut
vous fournir un bon aperçu d’Apollo et de ses fonctionnalités.
Mais, dans ce cas, vous devriez probablement consulter la docu-
mentation et les articles du site web d’Apollo pour trouver des
informations plus spécifiques au HTML et à JavaScript.

Organisation de ce livre
Ce livre contient les chapitres et annexes suivants :
Chapitre 1, Introduction à Apollo
Aperçu général de ce qu’est Apollo et du type d’applications
visées.

v
_Apollo.book Page vi Vendredi, 8. juin 2007 1:50 13

Préface

Chapitre 2, Commencer le développement d’applications Apollo


Astuces sur la manière de démarrer votre développement
Apollo et étapes à suivre pour créer votre première applica-
tion Apollo.
Chapitre 3, Utiliser HTML dans les applications Apollo créées avec
Flex
Traite de la manière dont le HTML peut être utilisé dans des
applications Flash et couvre la communication JavaScript/
ActionScript grâce au Script Bridging.
Chapitre 4, Utiliser l’API de système de fichiers
Présente l’API de fichier d’Apollo, et explique comment uti-
liser les API synchrones et asynchrones.
Chapitre 5, Apollo par l’exemple
Fournit des trucs et astuces pour accomplir certaines tâches
quotidiennes dans le développement d’applications Apollo,
le tout présenté au format de la collection par l’exemple des
éditions O’Reilly.
Annexe A, P aquetages et Classes d’Apollo
Propose une liste des nouvelles API Apollo ajoutées à
ActionScript, ainsi que celles qui ont été modifiées.
Annexe B, Outils en ligne de commande d’Apollo
Fournit une liste des outils en ligne de commande spécifi-
ques à Apollo, ainsi que leurs options.

Bien utiliser cet ouvrage


Ce livre peut à la fois être utilisé comme une introduction et un
aperçu d’Apollo, ainsi que comme un guide qui vous aide,
étape par étape, pour démarrer le développement d’applica-
tions Apollo. Bien qu’il puisse paraître tentant de vous plonger
immédiatement à l’intérieur de telle ou telle section spécifi-
ques, il est fortement conseillé de lire au moins les deux
premiers chapitres, qui fournissent un aperçu d’Apollo, et trai-
tent de la manière dont vous préparez votre environnement de
développement pour créer des applications Apollo. Il vous sera

vi
_Apollo.book Page vii Vendredi, 8. juin 2007 1:50 13

Préface

alors beaucoup plus facile de vous plonger dans les sections qui
vous intéressent.
Une fois que vous aurez parcouru ce livre et compris les bases
de la création d’une application Apollo avec Flex, vous pourrez
alors l’utiliser comme référence en vous rendant directement
dans certaines sections lorsque vous aurez besoin de régler un
problème donné. En particulier, les sections qui concernent les
fichiers, le HTML et la partie Apollo par l’exemple devraient
s’avérer bien utiles lors de vos développement d’applications.
Enfin, ce livre n’est qu’une introduction à Apollo et ne couvre
pas l’ensemble de ses fonctionnalités. Il a pour but de com-
pléter et non de remplacer la documentation exhaustive
d’Apollo fournie par Adobe. Essayez d’aller au moins jeter un
œil à la documentation d’Apollo pour vérifier que vous con-
naissez toutes les API et fonctionnalités qui ne sont pas traitées
dans ce livre.

Conventions utilisées dans ce livre


Les conventions typographiques suivantes sont utilisées dans ce
livre :
Interface
Indique le titre des menus, les options des menus, les bou-
tons des menus et les racourcis clavier (tels que Alt et Ctrl).
Italique
Met en valeur les termes nouveaux, URL, adresses de cour-
rier électronique, noms de fichiers, extensions de fichiers,
chemins, répertoires et outils Unix.
Largeur fixe
Désigne les commandes, options, variables, attributs, tou-
ches, fonctions, types, classes, espaces de nom, méthodes,
modules, propriétés, paramètres, valeurs, objets, événe-
ments, gestionnaire d’événement, balises XML et HTML,
macros, contenus des fichiers ou sortie des commandes.

vii
_Apollo.book Page viii Vendredi, 8. juin 2007 1:50 13

Préface

Largeur fixe gras


Montre les commandes ou autre texte qui devraient être
tapés de manière litérale par l’utilisateur.
Largeur fixe italique
Désigne le texte qui devrait être remplacé par des valeurs
fournies par l’utilisateur.

Licence et exemples de code


Cet ouvrage, y compris l’ensemble de ses textes et exemples de
code, est sous licence Creative Commons 2.5 : Attribution-Non-
commercial-Share Alike.
Vous pouvez consulter cette licence sur le site http://creativecom-
mons.org/licenses/by-nc-sa/2.5/ou, en envoyant une lettre à
Creative Commons, 543 Howard Street, 5th Floor, San Fran-
cisco, California, 94105, USA.

Plus d’informations sur la licence Creative Commons sont


accessibles sur le site http://www.creativecommons.org.

Support et informations complémentaires


Ressources en ligne sur Apollo
Bien qu’Apollo soit une technologie récente, il existe déjà un
grand nombre de ressources disponibles qui vous permettront
d’en savoir plus à propos d’Apollo et du développement
d’applications Internet riches.

Le site d’Apollo
Le site de référence pour s’informer, télécharger et consulter la
documentation d’Apollo :
http://www.adobe.com/go/apollo

viii
_Apollo.book Page ix Vendredi, 8. juin 2007 1:50 13

Préface

La FAQ développeurs d’Apollo


FAQ officielle qui répond aux questions les plus communes
concernant Apollo :
http://www.adobe.com/go/apollofaq

Le pôle de développement Apollo


Le pôle de développement, avec des articles, des informations et
des ressources sur le développement d’applications pour
Apollo :
http://www.adobe.com/go/apollodevcenter

La référence de l’API Apollo


La référence de l’API ActionScript 3 Apollo :
http://www.adobe.com/go/apolloapi

Documentation d’Apollo
La documentation complète d’Apollo :
http://www.adobe.com/go/apollodocs

Le Forum Apollo
Forum officiel d’Adobe Forum pour discuter d’Apollo :
http://www.adobe.com/go/apolloforums

La Liste de diffusion Apollo coders


Liste de diffusion concernant le développement d’applications
Apollo :
http://www.adobe.com/go/apollolist

ix
_Apollo.book Page x Vendredi, 8. juin 2007 1:50 13

Préface

Le weblog de Mike Chambers


Blog de Mike Chambers. Cet auteur, membre de l’équipe
Apollo, publie souvent des billets qui concernent Apollo :
http://www.adobe.com/go/mikechambers

La catégorie Apollo de MXNA


La catégorie Apollo de MXNA liste tous les articles concernant
Apollo publiés au sein de la communauté de développement
Adobe :
http://www.adobe.com/go/apollomxna

Le pôle de développement Flex


Pôle de développement avec des articles, des informations et
des ressources sur le framework Flex :
http://www.adobe.com/go/flex2_devcenter

OnFlex.org
Blog dirigé par Ted Patrick, qui publie fréquemment des billets
sur les enjeux du développement avec Flex :
http://www.onflex.org

La liste de diffusion Flex coders


Liste de diffusion qui traite du développement avec le fra-
mework Flex :
http://tech.groups.yahoo.com/group/flexcoders/

Le blog Universal Desktop


Le blog de Ryan Stewart, qui se concentre sur les derniers déve-
loppements du monde des applications Internet riches :
http://blogs.zdnet.com/Stewart/

x
_Apollo.book Page xi Vendredi, 8. juin 2007 1:50 13

Préface

Votre avis
Merci d’adresser vos commentaires et questions non techni-
ques concernant ce livre à l’éditeur :
Editions O’Reilly
18 rue Séguier
75006 Paris
Il existe une page Internet pour ce livre où sont listés les errata
et autres informations complèmentaires. Vous pouvez y accéder
en vous rendant sur la page :
http://www.oreilly.fr/catalogue/2841774449
Pour plus d’informations concernant nos livres, conférences,
centre de ressources et le réseau O’Reilly, consultez notre site
Internet :
http://www.oreilly.fr

À propos des auteurs


Mike Chambers
Mike Chambers a passé ces huit dernières années à créer des
applications pour l’environnement d’exécution Flash. Pendant
cette période, il a travaillé avec de nombreuses technologies
telles que Flash, Generator, .NET, Central, Flex et Ajax. Il est
actuellement chef de produit senior pour les relations déve-
loppeurs d’Apollo. Il a écrit et participé à de nombreuses
conférences sur Flash, les applications Internet riches et il est le
co-auteur de Flash Enabled: Flash Design and Development for
Devices ainsi que de Generator and Flash Demystified.
Mike a obtenu un Master en études économiques et euro-
péennes internationales à la John Hopkins School of Advanced
International Studies (SAIS) en 1998.
Quand il ne programme pas, Mike joue à Halo 2, essaie de se
remettre de son addiction à World of Warcraft, ou il joue avec
ses deux filles, Isabel et Aubrey.

xi
_Apollo.book Page xii Vendredi, 8. juin 2007 1:50 13

Préface

Robert L. Dixon
Rob Dixon a commencé le développement d’applications Flash
en 1998, époque à laquelle on ne parlait pas encore d’applica-
tions Internet riches. Il est actuellement architecte pour le
groupe Platform Documentation à Adobe. Il a développé des
exemples d’applications et des documentations pour des pro-
duits tels que Apollo, ActionScript, Flash Player et Central. Il a
participé à la rédaction de Programming ActionScript 3.0 et de
ActionScript Language Reference.
Dans une vie antérieure, il a programmé des jeux vidéos, réa-
lisé des sites Internet, créé des logiciels d’entreprises avec Java et
.NET, et participé à de nombreuses conférences concernant le
développement de logiciels. Il a écrit un livre sur CASE à
l’époque où c’était à la mode.
Le week-end, vous le trouverez généralement en train de faire
des randonnées ou du vélo dans les environs de Marin County,
en Californie, si vous cherchez bien (ou que vous planquez une
tête chercheuse dans sa veste).

Jeff Swartz
Jeff Swartz a commencé à travailler pour Macromedia
(aUjourd’hui Adobe Systems) en 1992 et a participé à un grand
nombre de projets multimédias et d’applications Internet. Il est
actuellement rédacteur technique en chef du projet Apollo. Jeff
a obtenu un diplôme en informatique et mathématiques à
l’Université d’Illinois à Urbana-Champaign et a étudié au
département d’intelligence artificielle de l’université
d’Edinburgh.
Le public des alentours de la baie de San Francisco Bay Area a
subi les activités de Jeff au trombone. Il a également travaillé en
tant que Big Frank, le « hot dog dansant », pour la société
Vienna Beef.

xii
_Apollo.book Page xiii Vendredi, 8. juin 2007 1:50 13

Préface

Remerciements
Les auteurs remercient Mark Nichoson de Adobe et Steve
Weiss, Phil Dangler et Mary Brady de O’Reilly pour avoir rendu
possible la sortie de ce livre dans un délai incroyablement
court.
Merci à toute l’équipe Apollo pour son dévouement et son diffi-
cile travail pour terminer la version 1.0. Nous remercions
particulièrement Chris Brichford, Ethan Malasky, Stan Switzer
et Oliver Goldman (tous membres de l’équipe Apollo) pour
leur lecture de ce livre et leurs retours.

xiii
_Apollo.book Page xiv Vendredi, 8. juin 2007 1:50 13
_Apollo.book Page 1 Vendredi, 8. juin 2007 1:50 13

Chapitre 1

Introduction à Apollo

Apollo est un nouvel environnement d’exécution multi-plate-


formes pour le bureau developpé par Adobe. Il permet aux
développeurs d’utiliser les technologies web pour créer et
déployer des applications Internet riches et des applications
web vers le bureau.
Afin de mieux comprendre ce que permet Apollo, et quels pro-
blèmes il tente de résoudre, il peut s’avérer utile de s’intéresser
à l’histoire, relativement courte, des applications web.

Une courte histoire des applications web


Ces deux dernières années, un nombre croissant d’applications
se sont déplacées du bureau vers le navigateur web. Un certain
nombre de facteurs ont conduit à cette situation, parmi
lesquels :
• la croissance d’Internet en tant que moyen de commu-
nication ;
• la relative facilité de déploiement des applications web ;
• la possibilité de viser des systèmes d’exploitation multiples
via le navigateur ;
• la maturité de certaines technologies de plus haut niveau tel-
les que le navigateur et le lecteur Flash.
Les premières applications web ont d’abord été créées à l’aide
du HTML et de JavaScript, et se fondaient principalement sur
les interactions clients/serveur et le rafraîchissement des pages.
Ce modèle était cohérent avec la volonté d’afficher de simples
documents, ce pour quoi le navigateur a été créé à l’origine.
1
_Apollo.book Page 2 Vendredi, 8. juin 2007 1:50 13

Chapitre 1 — Introduction à Apollo

Mais il constituait une expérience utilisateur assez pauvre en ce


qui concerne l’affichage d’applications.
Néanmoins, avec l’arrivée à maturité du lecteur Flash, et plus
récemment grâce aux fonctionnalités de type Ajax dans le navi-
gateur, il est devenu possible pour les développeurs de
s’éloigner du modèle d’applications basé sur des pages. En
d’autres termes, les développeurs ont pu commencer à offrir des
applications plus riches via le navigateur. Dans un document de
mars 2002, Macromedia a introduit le terme d’application
Internet riche (ou RIA pour Rich Internet Application), afin de
décrire ces nouveaux types d’applications dans le navigateur qui
« mélangent contenu, logique applicative et communica-
tion...afin de rendre Internet plus facile d’utilisation et plus
agréable ». Ces applications ont permis des expériences plus
riches, plus proches de celles fournies par les applications
bureau, tout en conservant la nature multi-plateformes du
Web :
Le maître-mot des applications Internet est disponibilité. À
terme, le Web doit être synonyme de contenu et d’applications
disponibles n’importe où, indépendamment de la plate-forme
ou du périphérique utilisé à cette fin. Les clients multimédias
doivent couvrir et supporter tous les systèmes d’exploitation
courants, ainsi que la plus vaste gamme de nouvelles plates-
formes matérielles, telles que les téléphones intelligents, les
ordinateurs de poche, les décodeurs, les consoles de jeu et les
nouveaux périphériques Internet.

NOTE
Vous pouvez retrouver le document complet et plus d’infor-
mations sur les RIA à l’adresse : http://www.adobe.com/fr/
devnet/richclient.pdf.

Le document poursuit la liste des fonctionnalités qui définis-


sent les RIA :

2
_Apollo.book Page 3 Vendredi, 8. juin 2007 1:50 13

Une courte histoire des applications web

• fournir un environnement d’exécution rapide et de haute


performance pour le code, le contenu et les commu-
nications ;
• intégrer le contenu, les communications et les interfaces
d’application dans un environnement commun ;
• fournir un modèle objet puissant et évolutif pour
l’interactivité ;
• permettre la rapidité du développement d’application grâce
aux composants et à la réutilisation du code ;
• permettre l’utilisation des services Web et des services de
données fournis par les serveurs d’applications ;
• prendre en charge les clients connectés et hors connexion ;
• permettre un déploiement aisé sur de multiples plateformes
et périphériques.
Ce mouvement tendant à fournir une expérience plus riche,
plus proche du bureau, dans le navigateur (expérience permise
par le lecteur Flash, et, plus récemment, par les techniques
Ajax) a conduit à une explosion des applications web.
Aujourd’hui, le Web s’est fermement établi en tant que plate-
forme de déploiement d’applications offrant des bénéfices à la
fois aux utilisateurs et aux développeurs. Parmis ces bénéfices,
on peut noter :
• la possibilité de viser de multiples plateformes et systèmes
d’exploitation ;
• le fait de développer avec des programmes d’assez haut
niveau et des langages de mise en forme ;
• permettre à l’utilisateur final d’accéder à ses applications
depuis, virtuellement, n’importe quel ordinateur connecté à
Internet.
La croissance des applications web s’observe à la fois dans le
mouvement Web 2.0, qui se constitue presque entièrement
d’applications web et d’API, ainsi que dans l’adoption des appli-
cations web en tant que modèle économique par de grandes
sociétés et organisations.
3
_Apollo.book Page 4 Vendredi, 8. juin 2007 1:50 13

Chapitre 1 — Introduction à Apollo

Les problèmes induits par la délivrance


d’applications via le navigateur
À mesure que les applications web se sont complexifiées, elles
ont commencé à atteindre les limites du navigateur et de leur
propre ergonomie. Leur succès allant grandissant, ces pro-
blèmes deviennent de plus en plus importants et visibles, et
démontrent qu’il reste un nombre significatif de problèmes à
résoudre à la fois pour les développeurs et pour les utilisateurs
finaux, lorsqu’une application est déployée via le navigateur.
Le navigateur web a d’abord été créé pour afficher des docu-
ments HTML. En effet, la logique de fond du navigateur s’est
peu éloignée de ce but. Ce conflit fondamental entre des fonc-
tionnalités basées, soit sur l’affichage de documents, soit sur
l’exécution d’applications, crée un certain nombre de pro-
blèmes lors du déploiement d’applications via le navigateur.

Des interfaces utilisateurs en conflit


Les applications déployées via le navigateur ont leur propre
interface utilisateur, qui entre souvent en conflit avec l’inter-
face utilisateur du navigateur. Ce modèle d’une application
située à l’intérieur d’une autre application a souvent pour con-
séquence une contradiction des interfaces utilisateurs. Cette
situation peut conduire, au mieux, à une certaine confusion
pour l’utilisateur, et au pire, à l’échec de l’application.
L’exemple classique est celui du bouton retour. Ce dernier fait
sens lorsque l’on consulte des documents, mais rarement dans
le contexte d’une application. Bien qu’il existe un certain
nombre de solutions qui tentent de résoudre ce problème,
celles-ci sont mises en œuvre de manière incohérente ; les utili-
sateurs ne sauront donc sans doute pas si telle ou telle
application supporte le bouton retour, ou si il forcera leur
application à se décharger, ce qui conduira à la perte de leurs
données.

4
_Apollo.book Page 5 Vendredi, 8. juin 2007 1:50 13

Les problèmes induits par la délivrance d’applications via le navigateur

La distance vis-à-vis du bureau


En partie à cause du modèle de sécurité du Web (qui restreint
l’accès aux machines des utilisateurs), les applications qui s’exé-
cutent dans le navigateur ne supportent pas, la plupart du
temps, le type d’interaction utilisateur avec le système d’exploi-
tation auquel l’utilisateur pourrait s’attendre. Par exemple,
vous ne pouvez pas déposer un fichier dans une application
située dans le navigateur afin que celle-ci agisse sur le fichier.
Les applications web ne peuvent pas non plus interagir avec les
autres applications qui se trouvent sur l’ordinateur de
l’utilisateur.
Les RIA ont tenté d’améliorer cette situation en créant des
interfaces plus riches, plus proches des applications. Mais elles
ne sont pas parvenues à surmonter les limites fondamentales de
la séparation entre le navigateur et le bureau.

Une expérience en ligne


Parce que les applications web sont délivrées depuis un serveur
et ne résident pas sur l’ordinateur des utilisateurs, elles sont
d’abord une expérience qui a lieu en ligne. Bien qu’il existe des
tentatives pour rendre possible l’accès à des applications en
mode déconnecté, il n’existe pas de modèle de développement
cohérent. Elles ne parviennent donc pas à s’exécuter sur diffé-
rents navigateurs et requièrent souvent que l’utilisateur
interagisse avec son navigateur de manière complexe et peu
intuitive.

Le plus petit dénominateur commun


Enfin, avec la complexité grandissante des applications web, et
alors qu’elles repoussent toujours plus loin les limites de Java-
Script et DHTML, les développeurs font de plus en plus souvent
face aux différences entre les navigateurs et les API. Bien que
ces problèmes puissent bien souvent être surmontés avec un
code spécifique au navigateur, cela conduit à un code de plus en

5
_Apollo.book Page 6 Vendredi, 8. juin 2007 1:50 13

Chapitre 1 — Introduction à Apollo

plus difficile à maintenir et éloigne d’un modèle de développe-


ment basé sur les fonctionnalités.
Bien que les frameworks JavaScript soient un moyen populaire
pour tenter de régler ces problèmes, ils ne peuvent offrir plus
que ce que le navigateur ne leur permet. Ils reposent bien sou-
vent sur le plus petit dénominateur commun des
fonctionnalités des différents navigateurs, afin de faciliter le
modèle de développement. Bien que ce problème n’affecte pas
les RIA basées sur Flash, la conséquence pour les applications
basées sur JavaScript ou DHTML est une expérience utilisateur
et un modèle d’interaction fondés sur ce plus petit dénomina-
teur commun, une charge de développement et de tests accrue,
ainsi que des coûts de déploiement plus élevés.
Le fait que les applications web aient connu un tel essort
malgré ces limites démontre bien l’attractivité qu’exerce une
plateforme qui dispose d’un bon modèle de développement,
capable d’offrir une même application à différents systèmes
d’exploitation. Une plateforme qui offrirait la disponibilité et le
modèle de développement d’un navigateur, tout en apportant
les fonctionnalités et la richesse des applications de bureau,
offrirait le meilleur des deux mondes. C’est précisément
l’objectif d’Apollo.

Présentation de l’environnement
d’exécution Apollo
Alors finalement Apollo, qu’est-ce que c’est ? Comment peut-il
améliorer le développpement et le déploiement des applica-
tions web ?
Apollo est le nom de code d’un nouvel environnement d’exécu-
tion multi-systèmes d’exploitation actuellement développé par
Adobe qui permet aux développeurs web de se fonder sur leurs
compétences actuelles (telle que Flash, Flex, HTML, JavaScript
et PDF) pour créer et déployer des applications Internet riches
et du contenu pour le bureau.

6
_Apollo.book Page 7 Vendredi, 8. juin 2007 1:50 13

Les technologies fondamentales d’Apollo

En un mot, il offre une plateforme entre le bureau et le naviga-


teur qui combine la disponibilité et la facilité de
développement qu’offre le Web avec les fonctionnalités et la
richesse du bureau.

NOTE
Apollo est le nom de code du projet. Le nom définitif n’a pas
encore été annoncé au moment de l’écriture de cet ouvrage.

Il est important de revenir un instant en arrière et de préciser ce


qu’Apollo n’est pas.
Apollo n’est pas un environnement d’exécution généraliste
pour le bureau ayant pour but de concurrencer les applications
de plus bas niveau. Cela signifie que vous ne voudriez probable-
ment pas créer du Photoshop avec Apollo. Le cas classique de
l’utilisation d’Apollo est de permettre de déployer des applica-
tions Internet riches sur le bureau. C’est une distinction très
importante mais assez subtile, car le fait d’amener les RIA vers
le bureau est le premier objectif des fonctionnalités présentes
dans Apollo 1.0.
Au cœur d’Apollo, on retrouve les technologies web, qui per-
mettent aux programmeurs web de développer pour le bureau,
et de déployer vers le bureau, en utilisant les mêmes technolo-
gies et le même modèle de développement qu’ils utilisent
aujourd’hui pour déployer des applications sur le Web.

Les technologies fondamentales d’Apollo


Il y a trois technologies fondamentales au cœur d’Apollo, que
l’on distingue en deux categories : les technologies applicatives
et celles relatives aux documents.

Les technologies applicatives fondamentales


Les technologies applicatives sont les technologies qui sont utili-
sées à la base des applications Apollo. Apollo connaît deux

7
_Apollo.book Page 8 Vendredi, 8. juin 2007 1:50 13

Chapitre 1 — Introduction à Apollo

technologies applicatives fondamentales : Flash et HTML, qui


peuvent tout deux être utilisés pour créer et déployer des appli-
cations Apollo.

Flash
L’une des technologies centrales d’Apollo est le lecteur Flash.
Pour être plus précis, Apollo a été créé à partir du lecteur
Flash 9, qui inclut le langage ActionScript 3 basé sur ECMA-
Script ainsi que la machine virtuelle Tamarin (qui sera utilisée
pour interpréter JavaScript dans les prochaines versions de
Firefox).

ASTUCE
Vous trouverez des informations complémentaires concer-
nant le projet Open Source Tamarin sur le site de Mozilla
http://www.mozilla.org/projects/tamarin/

En plus de toutes les API du lecteur Flash déjà existantes que


l’on retrouve dans Apollo, certaines d’entre elles ont été éten-
dues et/ou améliorées. Parmi les fonctionnalités que le lecteur
Flash apporte à Apollo, on retrouve :
• le moteur d’interprétation à la volée ActionScript, pour la
performance des applications ;
• la pile réseau complète, avec HTTP, RTMP, ainsi que le
binaire et les sockets XML ;
• le moteur d’affichage vectoriel et les API de dessin ;
• un large support des médias tels que les bitmaps, les vec-
teurs, l’audio et la vidéo.
Bien entendu, puisque le framework Flex2 a été créé à partir
d’ActionScript 3, vous pouvez également profiter de toutes les
fonctionnalités de Flex pour créer des applications Apollo.

8
_Apollo.book Page 9 Vendredi, 8. juin 2007 1:50 13

Les technologies fondamentales d’Apollo

HTML
La seconde technologie applicative au cœur d’Apollo est
HTML. Il s’agit d’un moteur d’affichage HTML complet, qui
supporte les technologies et standards suivants :
• HTML
• JavaScript
• CSS
• XHTML
• Document Object Model (DOM)
Oui, vous lisez bien. Vous n’avez pas besoin d’utiliser Flash
pour créer des applications Apollo. Vous pouvez créer une
application complète en utilisant uniquement HTML et Java-
Script. Cela surprend souvent les développeurs qui s’attendent à
ce qu’Apollo se concentre uniquement sur Flash. Pourtant,
Apollo est un environnement d’exécution qui s’adresse aux
développeurs Web qui utilisent les technologies web. Or,
quelles technologies sont plus proches du Web que HTML et
JavaScript ?
Le moteur HTML utilisé dans Apollo est le moteur Open Source
WebKit. Celui-ci est utilisé dans bon nombre de navigateurs, tels
que KHTML sous KDE et Safari sur Mac OS X.

ASTUCE
Vous trouverez des informations complémentaires sur le
projet Open Source WebKit sur le site http://www.webkit.org.

Pourquoi WebKit?. Adobe a passé un temps considérable à


rechercher un moteur HTML pour Apollo, et a utilisé un cer-
tain nombre de critères qui l’ont finalement conduit à choisir
WebKit.

Un projet ouvert. Adobe savait dès le départ qu’il ne voulait


pas créer puis maintenir son propre moteur d’affichage HTML.

9
_Apollo.book Page 10 Vendredi, 8. juin 2007 1:50 13

Chapitre 1 — Introduction à Apollo

Non seulement cela aurait impliqué un travail des plus consé-


quents, mais en plus, aurait compliqué la tâche des
développeurs qui auraient dû se familiariser avec un moteur
d’affichage HTML supplémentaire.
WebKit apporte à Apollo un moteur complet, en développe-
ment continu par une communauté solide qui compte à la fois
des développeurs individuels et de grandes sociétés telles que
Nokia et Apple. Cela permet à Adobe de se concentrer sur les
corrections de bogues et les fonctionnalités, et signifie égale-
ment que Adobe peut contribuer de manière active à WebKit
tout en profitant des contributions faites par les autres mem-
bres du projet WebKit.

Une technologie qui a fait ses preuves et que les développeurs


connaissent bien. Comme souligné plus haut, l’un des plus
importants problèmes des développements web complexes est
le fait de devoir assurer la cohérence de leur application entre
les différents navigateurs. Quelque chose peut parfaitement
fonctionner avec Firefox sur Mac, et totalement échouer dans
Internet Explorer sur Windows. Par conséquent, tester et débo-
guer du contenu basé sur un navigateur peut être un vrai
cauchemard pour les développeurs.
Adobe voulait s’assurrer que les développeurs étaient déjà fami-
liers avec le moteur HTML utilisé dans Apollo, et qu’ils
n’allaient pas devoir apprendre les nouveaux problèmes et
autres bogues qu’impliquent un nouveau moteur. Puisque
Safari (qui a été créé à partir de WebKit) est le navigateur par
défaut de Mac OS X, on peut estimer que les développeurs le
connaissent bien.

Un impact minimum sur le poids de l’environnement


d’exécution Apollo. Le poids visé pour Apollo est compris
entre 5 et 9 Mo. Le code de base de WebKit ayant été bien écrit
et organisé, il a un impact restreint sur le poids final de l’envi-
ronnement d’exécution Apollo. En effet, le poids de la version
actuelle, qui supporte Flash et le HTML, est d’un tout petit peu
plus de 5 Mo.

10
_Apollo.book Page 11 Vendredi, 8. juin 2007 1:50 13

Les technologies fondamentales d’Apollo

La capacité de pouvoir s’exécuter sur des appareils mobiles.


Bien que la première version d’Apollo ne tourne que sur les
ordinateurs individuels, la vision à long terme d’Adobe est
d’étendre l’environnement d’exécution Apollo aux téléphones
cellulaires et autres appareils. WebKit a prouvé sa capacité à
s’exécuter sur de tels appareils et a été porté sur des téléphones
par Nokia et Apple.

Les technologies de document fondamentales


Les technologies de document au sein d’Apollo font référence
aux technologies dont le but principal est d’afficher et d’inte-
ragir avec des documents électroniques.
Le PDF et le HTML sont les technologies de document fonda-
mentales disponibles avec Apollo.

Le PDF
Les fonctionnalités relatives au PDF ne sont pas incluses dans la
version Alpha 1 d’Apollo, nous ne pouvons donc pas entrer
dans les détails de son implémentation. Néanmoins, dans les
applications Apollo classiques, celles qui seront fondées à la fois
sur du contenu Flash et du HTML, on pourra utiliser du con-
tenu de type PDF et interagir avec lui.

Le HTML
Le HTML a d’abord été conçu comme une technologie de docu-
ment. Il permet aujourd’hui un contrôle riche et robuste sur le
contenu, la mise en pages du texte et sur les styles. Le HTML
peut être utilisé comme une technologie de document au sein
d’Apollo, à la fois au sein d’applications HTML existantes et
dans des applications basées sur Flash.

Contenu d’une application Apollo


Maintenant que nous connaissons les technologies dont peu-
vent disposer les applications qui s’exécutent au sein de

11
_Apollo.book Page 12 Vendredi, 8. juin 2007 1:50 13

Chapitre 1 — Introduction à Apollo

l’environnement d’exécution Apollo (voir la figure 1-1), pen-


chons-nous sur la manière dont on peut les combiner pour
créer une application.

services de socket services web sur HTTP

réseau occasionnellement connecté

réseau
bureau

SWF HTML
HTML SWE

PDF PDF

runtime Apollo

Mac Windows Linux


(après 1.0)

Figure 1.1. Structure d’une application Apollo


Les applications peuvent être constituées de la combinaison sui-
vante de technologies :
• Flash uniquement (Flex inclus) ;
• basées sur Flash, avec du contenu HTML ;
• HTML/JavaScript seulement ;
• basées sur HTML/JavaScript, avec du contenu Flash ;
• toutes les combinaisons peuvent également utiliser du con-
tenu PDF.

12
_Apollo.book Page 13 Vendredi, 8. juin 2007 1:50 13

Les technologies fondamentales d’Apollo

Intégration des technologies et Script Bridging


Parce que WebKit et le lecteur Flash sont tous deux inclus dans
l’environnement d’exécution, ils sont intégrés ensemble à un
très bas niveau. Par exemple, lorsque du HTML est inclus dans
un contenu Flash, il est en fait affiché via Flash, ce qui, entre
autres choses, signifie que vous pouvez appliquer au HTML
tout ce que vous pouvez appliquer à un bitmap dans Flash
(flou, rotation, transformation, etc.).
Cette intégration de bas niveau s’applique également aux
moteurs de scripts au sein d’Apollo (qui exécutent ActionScript
et JavaScript). Apollo permet de faire du script bridging1 entre
les deux langages et environnements, ce qui rend possible ce
qui suit :
• le code JavaScript peut appeler des API ActionScript ;
• le code ActionScript peut appeler les API JavaScript ;
• le code ActionScript peut manipuler directement le DOM
HTML ;
• on peut écouter des événements dans les deux sens entre
JavaScript et ActionScript.
Notez bien que le script bridging permet de « passer par
référence ». Ainsi, lorsque l’on passe un objet depuis Action-
Script vers JavaScript (ou vice versa), les changements effectués
sur cette instance dans un environnement affecteront l’ins-
tance dans l’autre environnement. Entre autres choses, cela
permet de maintenir une référence vers des nœuds HTML
depuis ActionScript et de les modifier, ou encore, d’écouter des
événements.

1 Le script bridging est le nom donné à la technique qui permet aux lan-
gages ActionScript et JavaScript de communiquer entre eux

13
_Apollo.book Page 14 Vendredi, 8. juin 2007 1:50 13

Chapitre 1 — Introduction à Apollo

Cette communication de bas niveau entre scripts et environne-


ments facilite la création d’applications qui combinent HTML
et Flash.

ASTUCE
Le Script Bridging sera étudié plus en détails dans le chapi-
tre 4.

Au final, si vous êtes développeur web, vous possédez déjà les


compétences nécessaires à la création d’une application Apollo.

Les fonctionnalités propres à Apollo


Si Apollo n’apportait pas d’API ou de fonctionnalités supplé-
mentaires et qu’il permettait simplement à des applications
web de s’exécuter sur le bureau, cela n’aurait pas grand interêt.
Par chance, Apollo fournit un jeu d’API et une intégration avec
le bureau qui permet aux développeurs de construire des appli-
cations qui profitent du fait qu’elles s’exécutent sur le bureau.

Les API d’Apollo


En plus de toutes les fonctionnalités et API déjà offertes par le
lecteur Flash et le moteur WebKit, Apollo fournit ses propres
fonctionnalités et API.

ASTUCE
Les API d’Apollo seront accessible à la fois depuis Action-
Script et depuis JavaScript.

Parmis ces nouvelles fonctionnalités, on trouve :


• une API d’entrée/sortie de fichiers ;
• une API de fenêtrage native ;
• une API de menu native ;

14
_Apollo.book Page 15 Vendredi, 8. juin 2007 1:50 13

Les technologies fondamentales d’Apollo

• une API Online/Offline qui permet de savoir quand la con-


nectivité réseau change ;
• des API de cache et de synchronisation des données afin de
faciliter le développement d’applications qui fonctionnent à
la fois en ligne et en mode déconnecté ;
• un contrôle complet sur le chrome (ensemble des éléments
d’interface utilisateur d’une fenêtre spécifiques à un système
d’exploitation) de l’application ;
• des API de stockage et de préférences locales ;
• des API de notification système (liées aux mécanismes spéci-
fiques au système d’exploitation) ;
• des API de mise à jour d’application.
Notez que ces fonctionnalités peuvent être implémentées direc-
tement dans l’environnement d’exécution Apollo ou au niveau
du framework (avec Flex et JavaScript), ou encore en combi-
nant les deux.

L’intégration d’Apollo au bureau


Comme mentionné plus haut, les applications déployées dans
le navigateur ne peuvent gérer les mêmes interactions que les
applications de bureau. Cela peut conduire à des applications
aux interactions peu pratiques pour l’utilisateur, puisqu’elles
sont différentes de celles auxquelles il est habitué.
Puisqu’une application Apollo est une application de bureau,
elle peut fournir à l’utilisateur le type d’interaction que l’utilisa-
teur est en droit d’attendre. Parmis ces fonctionnalités, on
retrouve :
• les rituels d’installation et de désinstallation appropriés ;
• les options d’installation bureau (raccourcis, etc.) ;
• le glissé-déposé riche :
– entre le système d’exploitation et les applications Apollo ;
– entre applications Apollo ;

15
_Apollo.book Page 16 Vendredi, 8. juin 2007 1:50 13

Chapitre 1 — Introduction à Apollo

– entre les applications natives et les applications Apollo ;


• le support du presse-papiers riche ;
• les notifications système ;
• les icônes ;
• la possibilité pour les applications de s’exécuter en tâche de
fond.
Une fois installée, une application Apollo est une application
native comme les autres, ce qui signifie que le système d’exploi-
tation et les utilisateurs peuvent interagir avec elle comme ils le
font avec n’importe quelle autre application. Par exemple, le
préchargement ou le basculement d’une application à une
autre fonctionne de la même manière avec Apollo qu’avec les
applications natives.
Le but est que l’utilisateur final ne sache pas qu’il est entrain
d’exécuter une application Apollo. Il doit pouvoir interagir
avec elle de la même manière qu’il le ferait avec n’importe
quelle autre application bureau.

Les outils de développement d’Apollo


L’une des raisons pour lesquelles les applications web ont eu
tant de succès est qu’elles permettent aux développeurs de
déployer facilement des applications que les utilisateurs peu-
vent exécuter quel que soit leur système d’exploitation. Qu’ils
soient sous Mac, Windows, Linux, Solaris ou téléphone cellu-
laire, les applications web sont disponibles.
Néanmoins, ce succès est dû non seulement à un déploiement
multi-plateformes, mais aussi à la nature même de l’environne-
ment de développement. Celui-ci permet à n’importe quel
développeur de développer pour cette technologie. Ni l’envi-
ronnement d’exécution, ni les outils de développement ne sont
spécifiques à un système d’exploitation.
C’est également vrai en ce qui concerne Apollo. Apollo apporte
non seulement la disponibilité multi-plateformes des applica-
tions web, mais, de manière toute aussi importante, une

16
_Apollo.book Page 17 Vendredi, 8. juin 2007 1:50 13

Les technologies fondamentales d’Apollo

application Apollo peut être développée et empaquetée sur vir-


tuellement n’importe quel système d’exploitation.
En réalité, Apollo lui-même n’a ni compilateur, ni IDE (envi-
ronnement de développement intégré) spécialisé. Ses
applications ne sont constituées que de contenu web, tels que
du Flash ou du HTML. N’importe quel éditeur de fichier
HTML ou JavaScript peut créer une application Apollo.

ASTUCE
Une version béta de Flex Builder avec le support d’Apollo
est incluse avec la version Alpha.

Puisque que les applications Apollo sont construites à l’aide de


technologies déjà existantes, telles que HTML ou Flash, vous
pouvez utiliser les mêmes outils que vous employez déjà pour
un contenu destiné à un navigateur pour créer des applications
Apollo. Le SDK d’Apollo fournit un certain nombre d’outils en
ligne de commande gratuits, qui permettent de tester, débo-
guer et empaquetter des applications Apollo avec virtuellement
n’importe quel outil de développement et de conception.
ADL Permet aux applications Apollo d’être exécutées sans
avoir à les installer.
ADT Crée des paquetages d’installation distribuables à
partir d’applications Apollo.

Bien qu’Adobe permettra à ses propres outils de développe-


ment Web de créer du contenu Apollo, ils ne seront pas
indispensables. En utilisant les outils Apollo en ligne de com-
mande, vous pouvez créer une application avec n’importe quel
outil de développement web. Vous pouvez utiliser les mêmes
outils de développement et de conception que vous utilisez
aujourd’hui.
ASTUCE
Le processus de développement sera abordé en détails dans
le chapitre 2.

17
_Apollo.book Page 18 Vendredi, 8. juin 2007 1:50 13

Chapitre 1 — Introduction à Apollo

Apollo signifie-t-il la fin des applications web au


sein du navigateur?
À ce stade, vous vous demandez peut être : « Bien, Apollo a
l’air génial ! Pourquoi est-ce que quelqu’un s’amuserait encore
à vouloir déployer une application dans un navigateur ? »
Apollo sonne-t-il le glas des applications dans le navigateur ?
Non.
Répétons-le encore une fois : non.
Apollo résoud la plupart des problèmes de déploiement d’appli-
cations vers le navigateur. Néanmoins, il reste des avantages à
ce type de déploiement. Le fait qu’il existe de si nombreuses
applications web, malgré les défauts évoqués plus haut
démontre ces avantages. Quand ces derniers surpassent les
inconvénients, les développeurs continueront de vouloir
déployer leur application via le navigateur web.
Mais le choix n’est pas forcément si tranché. Puisque les appli-
cations Apollo sont créées en utilisant des technologies web,
une application créée pour être déployée vers le navigateur
peut aisément être transformée en application Apollo. Vous
pourriez avoir une application basée sur le Web qui connaisse
des fonctionnalités propres au navigateur, ainsi qu’une version
Apollo qui profite des avantages du bureau. Les deux versions
pourraient partager les mêmes technologies, les mêmes lan-
gages et le même code.
Les applications Apollo sont un complément aux applications
web. Elles ne les remplacent pas.

18
_Apollo.book Page 19 Vendredi, 8. juin 2007 1:50 13

Chapitre 2

Commencer le développement
d’applications Apollo

Ce chapitre traite de la manière de préparer votre environne-


ment de développement à la création d’applications Apollo
avec le framework Flex. Les points suivants seront abordés :
• où trouver les outils et ressources nécessaires au développe-
ment d’applications Apollo ;
• comment mettre en place votre environnement de
développement ;
• comment développer, tester et déployer une simple applica-
tion de type Hello world.
Ce chapitre contient également toutes les informations néces-
saires à la compilation, au test, à l’empaquetage et à la
distribution d’applications Apollo.

Installer l’environnement d’exécution


Apollo Alpha 1
Vous devrez installer l’environnement d’exécution Apollo
Alpha 1 sur votre ordinateur ainsi que sur tous les ordinateurs
sur lesquels vous voudrez exécuter des applications Apollo. Le
fichier d’installation d’Apollo Alpha 1 est disponible sur le site
d’Adobe à l’adresse suivante : http://www.adobe.com/go/apollo

19
_Apollo.book Page 20 Vendredi, 8. juin 2007 1:50 13

Chapitre 2 — Commencer le développement d’applications Apollo

Installation sous Windows


Pour installer l’environnement d’exécution Apollo sur un ordi-
nateur Windows :
1. Téléchargez le fichier d’installation de l’environnement
d’exécution Apollo Alpha 1 pour Windows sur la page http://
www.adobe.com/go/apollo.
2. Ouvrez le fichier ZIP.
3. Double-cliquez sur le fichier Apollo.msi.
4. Une fenêtre d’installation s’affiche alors.
5. Quand l’installation est terminée, cliquez sur le bouton OK.

Installation sous Mac OS


Pour installer l’environnement d’exécution Apollo sous Mac
OS :
1. Téléchargez le fichier d’installation de l’environnement
d’exécution Apollo Alpha 1 pour Mac sur la page http://
www.adobe.com/go/apollo.
2. Ouvrez le fichier zip et double-cliquez sur le fichier Adobe
Apollo.dmg.
La fenêtre Adobe Apollo s’affiche alors.
3. Double-cliquez sur le fichier Adobe Apollo.pkg.
La fenêtre Install Adobe Apollo s’affiche alors.
4. Cliquez sur le bouton Continuer dans le coin en bas à gauche
de la fenêtre.
La fenêtre Sélectionner la Destination s’affiche alors.
5. Choisissez un volume de destination et cliquez sur le bouton
Continuer.
Le bouton Installation rapide s’affiche alors.
6. Cliquez sur le bouton Installer, dans le coin en bas à gauche
de la fenêtre.

20
_Apollo.book Page 21 Vendredi, 8. juin 2007 1:50 13

Outils nécessaires pour le développement d’applications Apollo

7. Une fois l’installation terminée, cliquez sur le bouton


Fermer, dans le coin en bas à droite de la fenêtre
d’installation.

Outils nécessaires pour le


développement d’applications Apollo
Vous devez installer l’environnement d’exécution Apollo
Alpha 1 sur votre ordinateur (voir la section précédente).
Pour développer des applications Apollo avec Flex, vous aurez
besoin de l’un des outils suivants :
Adobe Flex Builder 2.0.1 avec les extensions Apollo pour Flex Builder
2.0.1
Flex Builder 2.0.1 est un IDE complet pour développer et
déboguer des applications Flex.
Les extensions Apollo pour Flex Builder 2.0.1 permettent de
développer, de déboguer et d’empaqueter des applications
Apollo depuis Flex Builder 2.0.1. Elles fournissent une assis-
tance pour l’API Apollo. Elles contiennent également les
outils et ressources du SDK Apollo. Les extensions Apollo
pour Flex Builder 2.0.1 sont disponibles sur la page http://
www.adobe.com/go/apollo.
Le SDK Apollo
Le SDK Apollo est téléchargeable gratuitement depuis le site
d’Adobe. Bien qu’il ne dispose, ni d’interface visuelle, ni des
outils de débogage disponibles avec Flex Builder 2.0.1, il est
pourvu d’un compilateur Flex complet en ligne de
commande.
Le SDK Apollo contient les outils qui permettent de déve-
lopper, déboguer et empaqueter des applications Apollo.
Vous pouvez télécharger le SDK Apollo sur la page http://
www.adobe.com/go/apollo.

21
_Apollo.book Page 22 Vendredi, 8. juin 2007 1:50 13

Chapitre 2 — Commencer le développement d’applications Apollo

Télécharger et mettre en place Flex Builder 2.0.1


et les extensions Apollo
Une version d’essai de Flex Builder 2.0.1 est disponible sur le
site adobe.com : http://www.adobe.com/products/flex/flexbuilder/.
Les versions béta des extensions Apollo pour Flex Builder 2.0.1
sont disponibles sur le site web d’Adobe à l’adresse : http://
www.adobe.com/go/apollo.
Ces extensions pour Flex Builder permettent de créer, déve-
lopper, déboguer et déployer des applications Apollo depuis
Flex Builder.
Pour installer et configurer les extensions Apollo pour Flex
Builder :
1. Installez Flex Builder 2.0.1 (soit en version autonome, soit
en version Plug-in pour Eclipse).
2. Exécutez le fichier d’installation des extensions Apollo pour
Flex Builder. Acceptez le contrat de licence et, lorsqu’on
vous le propose, naviguez vers le répertoire qui contient Flex
Builder 2.0.1.

Télécharger et mettre en place le SDK Apollo


Si vous n’utilisez pas Flex Builder 2.0.1, vous devrez installer le
SDK Apollo qui est disponible gratuitement sur le site web
d’Adobe à la page : http://www.adobe.com/go/apollo.
Vous devrez également avoir installé un environnement d’exé-
cution Java ou un kit de développement Java sur votre
ordinateur. Si Java n’est pas encore installé et configuré sur
votre ordinateur, vous pouvez le télécharger depuis la page :
http://www.java.com/fr/download/.
Suivez alors les directives pour l’installer et le configurer.
Le SDK Apollo contient les ressources listées dans le tableau qui
suit.

22
_Apollo.book Page 23 Vendredi, 8. juin 2007 1:50 13

Outils nécessaires pour le développement d’applications Apollo

Elément Description
ADL Utilisé pour lancer et tester une application
Apollo sans avoir à l’installer en premier lieu.
ADT Utilisé pour empaqueter une application
Apollo afin de la distribuer.
Fichiers apollo- Bibliothèques contenant les classes de bases et
framework.swc et de framework d’Apollo que le compilateur
apolloglobal.swc MXMLC utilise lorsque vous compilez un
fichier SWF en vue d’une utilisation au sein
d’une application Apollo.
Fichier Exemple de fichier descriptif d’application,
application.xml utilisé pour indiquer les paramètres d’une
application.
Fichier Le schéma XML du fichier application.xml.
application.xsd

Installation et configuration sous Mac OS


Sous Mac OS, suivez les étapes suivantes :
1. Téléchargez le fichier apollo_sdk.zip sur votre bureau.
2. Créez un sous-répertoire Apollo_SDK dans le répertoire
/Applications (le répertoire Applications situé à la racine de
votre ordinateur). Vous pouvez placer le SDK à un autre
endroit, mais veillez dans ce cas à bien remplacer le chemin
dans les instructions qui suivent.
3. Double-cliquez sur le fichier ZIP et copiez puis collez son
contenu dans le répertoire Apollo_SDK. (Par exemple, le
fichier .bin devra se trouver à la racine du répertoire Apollo_
SDK.)
4. Ouvrez le répertoire /Applications/Apollo_SDK/runtime et
double-cliquez sur le fichier Adobe Apollo.dmg.
5. Déposez le dossier Adobe Apollo.framework contenu dans le
fichier DMG dans le répertoire /Applications/Apollo_SDK/
runtime (dans le Finder).
Cela installe l’environnement d’exécution Apollo utilisé par
ADL.

23
_Apollo.book Page 24 Vendredi, 8. juin 2007 1:50 13

Chapitre 2 — Commencer le développement d’applications Apollo

6. La prochaine étape consiste à s’assurer que les outils en ligne


de commande ont été ajoutés au chemin système et qu’ils
peuvent donc s’exécuter depuis n’importe quel répertoire.
Ouvrez une nouvelle fenêtre du Terminal de Mac OS.
La session du Terminal doit s’ouvrir sur votre répertoire uti-
lisateur. Si ce n’est pas le cas, naviguez jusqu’à lui.
7. Tapez :
open -e .profile
Le fichier .profile s’ouvre dans l’éditeur de texte de votre
ordinateur.
8. Ajoutez cette ligne à la fin du fichier :
export PATH=$PATH:/Applications/Apollo_SDK/bin/
Si un chemin PATH est déjà indiqué dans ce fichier, ajoutez-
y le chemin du SDK Apollo.
9. Enregistrez le fichier.
10. Dans le Terminal, tapez :
source .profile
Cela aura pour effet d’appliquer les modifications.
À l’heure de la rédaction, la version en cours est une béta.
Ainsi, ne vous étonnez pas si par la suite vous rencontrez des
différences. La page http://labs.adobe.com/wiki/index.php/Apollo:
Documentation:Set_up_instructions_for_Flex_SDK_users vous don-
nera toutes les informations nécessaires.

Installation et configuration sous Windows


Sous Windows, suivez avec précaution les étapes suivantes :
1. Téléchargez le fichier ZIP du SDK Apollo.
2. Ouvrez le fichier apollo_sdk.zip puis extrayez son contenu
dans C:\Program Files\apollo_sdk.

24
_Apollo.book Page 25 Vendredi, 8. juin 2007 1:50 13

Créer une première application Apollo

3. Ouvrez la boîte de dialogue des propriétés système et cliquez


sur l’onglet Avancé. Vous le trouverez dans les paramètres
système du panneau de configuration.
4. Cliquez sur le bouton Variables d’environnement.
5. sélectionnez PATH et cliquez sur le bouton Modifier. Ajouter
le chemin vers le répertoire bin à la fin de la valeur actuelle
de la variable :
; C:\Program Files\Apollo_SDK\bin\

Créer une première application Apollo


Le processus de développement d’une application Apollo peut
être résumé en quatre étapes :
1. Créer un fichier descriptif de l’application.
2. Concevoir et programmer l’application.
3. Tester et déboguer l’application.
4. Empaqueter l’application en vue de la distribuer.
Ce chapitre décrit ces étapes à l’aide d’une application très
simple de type Hello World. En suivant ces étapes, vous pourrez
vérifier que votre environnement de développement fonc-
tionne correctement. Après avoir écrit cette première
application Apollo, vous serez assuré que votre environnement
de développement est bien en place et qu’il est correctement
configuré.
En créant cette première application, vous apprendrez à réa-
liser les tâches suivantes :
• écrire un simple code MXML pour une application Apollo ;
• tester et déboguer une application ;
• empaqueter l’application dans un fichier AIR qui pourra
être distribué aux utilisateurs, afin qu’ils installent l’applica-
tion sur leur ordinateur.

25
_Apollo.book Page 26 Vendredi, 8. juin 2007 1:50 13

Chapitre 2 — Commencer le développement d’applications Apollo

Les étapes de création et de développement sont différentes


selon que vous utilisiez Flex Builder tool ou le SDK Apollo. Des
sections séparées existent donc pour chacun de ces outils.
Des idées d’applications plus interessantes seront données dans
les chapitres 3 et 5.

Créer et déboguer l’application Hello World avec


Flex Builder 2.0.1
Si vous n’avez pas installé Flex Builder 2.0.1 et que vous uti-
lisez le SDK Apollo, rendez-vous directement à la section Créer
et déboguer l’application Hello World avec le SDK Apollo, page 30.
Avec Flex Flex Builder 2.0.1, une application Apollo se crée de
la même manière qu’une application Flex pour le Web. Pour
commencer, suivez ces étapes :
1. Ouvrez Flex Builder 2.0.1.
2. Choisissez File → New → Other. La boîte de dialogue New
s’affiche alors.
3. Ouvrez le dossier Flex et sélectionnez Apollo Project. Cliquez
alors sur le bouton Next.
La boîte de dialogue New Apollo Project (figure 2-1) s’affiche.
4. Laissez sélectionnées les options de base et cliquez sur le
bouton Next.
5. Dans la page suivante de la boîte de dialogue, tapez
HelloWorld dans le champ Project Name et gardez sélec-
tionnée l’option Use Default Location. Cliquez alors sur le
bouton Next.
Ne cliquez pas encore sur le bouton Finish.
6. Dans la page suivante de la boîte de dialogue (setting build
paths), ne procédez à aucune modification et appuyez sur le
bouton Next.
Ne cliquez pas encore sur le bouton Finish.
Le panneau Application XML Properties s’affiche.

26
_Apollo.book Page 27 Vendredi, 8. juin 2007 1:50 13

Créer une première application Apollo

Figure 2.1. La boîte de dialogue New Apollo Project


7. Spécifiez les paramètres suivants pour l’application Apollo :

Champs Entrez ceci


ID com.oreilly.apollo.gettingStarted.HelloWorld
Name Hello World
Publisher Votre nom
Description Exemple d’application Apollo
Copyright ©Votre nom. Tous droits réservés.

Le champ ID doit contenir une valeur qui identifie de


manière unique votre application. Pour ce faire, il est cou-
rant de commencer cet ID par l’adresse d’un domaine que
vous détenez (tel que com.oreilly.apollo dans cet exemple).

27
_Apollo.book Page 28 Vendredi, 8. juin 2007 1:50 13

Chapitre 2 — Commencer le développement d’applications Apollo

Le champ Name définit le nom de l’application tel qu’il sera


affiché pour ses utilisateurs. Les valeurs Publisher,
Description et Copyright sont optionnelles. Elles seront affi-
chées lors de l’installation de l’application.
Les valeurs entrées dans le panneau Application XML seront
enregistrées dans le fichier descriptif de l’application, sous le
nom HelloWorld-app.xml.
8. Enfin, cliquez sur le bouton Finish en bas de la boîte de
dialogue.
Maintenant que le projet Apollo a été mis en place, vous
pouvez écrire le code MXML de cette application :
1. Ouvrez le fichier HelloWorld.mxml (il doit normalement déjà
être ouvert dans le panneau d’édition de Flex Builder). Pour
l’instant, il doit ressembler à ceci :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/ 2006/
mxml"
layout="absolute">

</mx:ApolloApplication>
Modifiez le code comme suit :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/
mxml"
layout="absolute"
title="Hello World"
backgroundColor="0xFFCC00">
<mx:Label text="Hello Apollo"
fontSize="18"
horizontalCenter="0"
verticalCenter="0"/>

</mx:ApolloApplication>
Les principales modifications apportées ont été de :

28
_Apollo.book Page 29 Vendredi, 8. juin 2007 1:50 13

Créer une première application Apollo

• définir les attributs title et backgroundColor du


composant ApolloApplication, comme montré dans le
code ;
• ajouter un composant Label et définir ses attributs text,
horizontalCenter et verticalCenter.
2. Enregistrez le fichier.
Vous pouvez désormais tester l’application.
3. Cliquez sur le bouton Debug ou sélectionnez Run → Debug
pour déboguer l’application.
L’application résultante doit ressembler à la figure 2-2 (avec
un chrome dépendant du système d’exploitation sur lequel
vous développez).

Figure 2.2. Hello World


4. Flex Builder 2.0.1 indique toutes les erreurs dans le panneau
Console. Si vous rencontrez des erreurs, assurez-vous que
vous avez bien suivi les étapes de ce tutoriel.
5. Vous pouvez créer des points d’arrêt et utiliser les outils de
débogage de Flex Builder de la manière dont vous le feriez
avec une autre application Flex 2.0.
L’application est désormais prête à être empaquetée pour afin
d’être distribuée. Rendez-vous directement à la section Empa-
queter et distribuer l’application Hello World, page 33.

29
_Apollo.book Page 30 Vendredi, 8. juin 2007 1:50 13

Chapitre 2 — Commencer le développement d’applications Apollo

Créer et déboguer l’application Hello World avec


le SDK Apollo
Si vous avez installé Flex Builder 2.0.1 et que vous avez suivi les
instructions précédentes, vous pouvez passer cette section.
Dans ce tutoriel, vous allez créer les fichiers sources pour une
application Apollo, puis tester l’application avec le compilateur
en ligne de commande du SDK Apollo.
Avant de commencer, assurez-vous que vous avez bien installé
le SDK Apollo et que vous avez configuré votre système afin de
pouvoir travailler avec ces outils.
Tout d’abord, créez un répertoire pour votre projet. Ce réper-
toire contiendra tous les fichiers sources de ce projet.
Ensuite, créez le fichier descriptif de l’application, que l’on
appelle aussi parfois le fichier XML de l’application :
1. Ouvrez un éditeur de texte et tapez le texte suivant dans un
nouveau fichier :
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/apollo/application/
1.0.M3"appId="com.oreilly.apollo.gettingStarted.HelloWorld"
version="1.0">
<properties>
<name>Hello World</name>
<publisher>Your name </publisher>
<description>A sample Apollo application.
</description>
<copyright>(C) 2007 Your name. All rights reserved.
</copyright>
</properties>
<rootContent systemChrome="standard"
transparent="false">
HelloWorld.swf
</rootContent>
</application>

30
_Apollo.book Page 31 Vendredi, 8. juin 2007 1:50 13

Créer une première application Apollo

Voici les paramètres les plus importants de ce fichier :


• La valeur de l’attribut appId doit identifier votre application
de manière unique. Pour ce faire, il est courant de commen-
cer cet ID par l’adresse d’un domaine que vous détenez (tel
que com.oreilly.apollo dans cet exemple).
• L’attribut name définit le nom de l’application tel qu’il sera
affiché pour ses utilisateurs.
• Les valeurs publisher, description, et copyright sont option-
nelles. Elles sont affichées lors de l’installation de l’applica-
tion.
• L’élément rootContent identifie le fichier SWF qui sera la
racine de l’application (vous compilerez bientôt ce fichier
SWF).
• L’attribut systemChrome a pour valeur standard. Cela signifie
que l’application utilisera le system chrome, le jeu standard
d’éléments d’interface utilisateur définit par le système
d’exploitation pour une fenêtre d’application normale. Ces
éléments incluent des bordures, une barre de titre, des bou-
tons pour minimiser et maximiser la fenêtre et un bouton
de fermeture. Vous pouvez également supprimer le chrome
système en attribuant la valeur none à cet attribut, puis en
définissant votre propre custom chrome pour la fenêtre de
l’application. Pour plus d’information, voir les sections Ren-
dre une fenêtre transparente et Utiliser vos propres éléments de
chrome de fenêtre au chapitre 5.
• L’attribut transparent a pour valeur false. Cela signifie que
le fond de l’application sera opaque plutôt que transparent.
Pour plus d’informations sur la transparence d’une fenêtre,
voir la section Rendre une fenêtre transparente au chapitre 5.
2. Enregistrez le fichier dans votre répertoire d’application et
donnez-lui le nom HelloWorld-app.xml.

31
_Apollo.book Page 32 Vendredi, 8. juin 2007 1:50 13

Chapitre 2 — Commencer le développement d’applications Apollo

Vous allez maintenant créer le code MXML de cette


application :
1. Créez un nouveau fichier dans votre éditeur de texte.
2. Ajoutez le contenu suivant :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
title="Hello World"
backgroundColor="0xFFCC00">

<mx:Label text="Hello Apollo"


fontSize="18"
horizontalCenter="0"
verticalCenter="0"/>

</mx:ApolloApplication>
Ceci représente le code source MXML de l’application :
• Le composant ApolloApplication est une sous-classe de
du composant Application de Flex 2. Il représente la
fenêtre principale de l’application. La valeur de l’attribut
title apparaîtra dans la barre de titre de la fenêtre
principale.
• Le composant Label est utilisé pour afficher le texte Hello
Apollo.
3. Enregistrez le fichier sous le nom HelloWorld.mxml.
Vous allez maintenant pouvoir compiler le fichier SWF, à l’aide
de l’outil en ligne de commande amxmlc : l’utilitaire amxmlc
appelle le compilateur MXMLC avec les options lui indiquant
comment utiliser les bibliothèques Apollo.
1. Ouvrez le Terminal sous Mac OS ou l’invite de commandes
sous Windows.
2. Utilisez la commande cd pour naviguer vers le répertoire
que vous avez créé pour ce projet Hello World.

32
_Apollo.book Page 33 Vendredi, 8. juin 2007 1:50 13

Créer une première application Apollo

3. Tapez la ligne de commande suivante et appuyez sur la


touche Entrée :
amxmlc HelloWorld.mxml
4. Si aucune erreur n’est générée, le compilateur génère le
fichier HelloWorld.swf dans le répertoire du projet.
Vous pouvez désormais tester l’application, en utilisant l’outil
en ligne de commande ADL :
1. Tapez le texte suivant dans la fenêtre de ligne de
commande :
adl application.xml
2. Si aucune erreur n’est générée, l’application Hello World
s’ouvre (figure 2-3).

Figure 2.3. Hello World

Empaqueter et distribuer l’application Hello


World
Les applications Apollo sont empaquetées dans un fichier AIR.
Il s’agit d’un fichier d’installation qui contient le fichier SWF
racine de l’application, le fichier descriptif de l’application, ainsi
que tout autre élément, tels que des images ou des fichiers
HTML, qui doivent être installés avec l’application.

33
_Apollo.book Page 34 Vendredi, 8. juin 2007 1:50 13

Chapitre 2 — Commencer le développement d’applications Apollo

Les utilisateurs ayant installé l’environnement d’exécution


Apollo peuvent double-cliquer sur un fichier AIR pour ins-
taller l’application sur leur machine.
Flex Builder 2.0.1 dispose des commandes nécessaires pour
empaqueter automatiquement votre application en fichier AIR.
Si vous utilisez le SDK Apollo pour compiler votre application,
vous pouvez utiliser l’Apollo Developer Tool (ADT) pour créer le
fichier AIR.

Empaqueter l’application avec Flex Builder 2.0.1


1. Assurez-vous que le projet Hello World est ouvert dans Flex
Builder.
2. Sélectionnez File → Export depuis le menu principal de Flex
Builder.
Flex Builder affiche alors la boîte de dialogue Export.
3. Sélectionnez la ligne Deployable AIR File et cliquez sur le
bouton Next.
Le panneau suivant se nomme AIR Deployment Export
Wizard, comme le montre la figure 2-4.

Figure 2.4. Panneau Air Deployment Export Wizard


34
_Apollo.book Page 35 Vendredi, 8. juin 2007 1:50 13

Créer une première application Apollo

4. Trouvez, puis sélectionnez le fichier HelloWorld-app.xml dans


la liste, puis cliquez sur le bouton Next. La figure 2-5 montre
une copie d’écran de ce panneau.

Figure 2.5. Panneau de sélection du fichier pour l’exportation


5. Dans le panneau suivant, vous pouvez sélectionner tous les
éléments auxiliaires (tels que des fichiers SWF, des fichiers
HTML ou encore des fichiers media) qui vous désirez inclure
dans votre application Apollo. Dans le cas présent, notre
application Hello World ne contient aucun élément
auxiliaire.
6. Vous pouvez également modifier la destination du fichier
AIR qui sera créé. Dans cet exemple nous allons conserver la
destination par défaut. La figure 2-6 montre une copie
d’écran de ce panneau.
7. Cliquez sur le bouton Finish pour générer le fichier AIR.
8. Testez le fichier AIR généré en le lançant depuis votre
système d’exploitation pour vérifier que l’application Hello
World s’installe correctement.

35
_Apollo.book Page 36 Vendredi, 8. juin 2007 1:50 13

Chapitre 2 — Commencer le développement d’applications Apollo

Figure 2.6. Panneau Air Deployment Export Wizard

Empaqueter l’application avec ADT


Si vous n’utilisez pas Flex Builder 2.0.1, vous devrez utiliser
l’outil ADT (figure 2-6) pour empaqueter l’application Apollo
dans un fichier AIR.
1. Ouvrez le Terminal sous Mac OS ou l’invite de commande
sous Windows.
2. Utilisez la commande cd pour naviguer vers le répertoire du
projet que vous avez créé pour ce projet Hello World.
3. Tapez le texte suivant (sur une seule ligne) et appuyez sur la
touche Entrée :
adt -package HelloWorld.air HelloWorld-app.xml HelloWorld.swf
L’outil ADT crée le fichier HelloWorld.air dans le répertoire
du projet.
4. Testez le fichier AIR généré en le lançant depuis votre
système d’exploitation afin de vérifier que l’application
Hello World s’installe correctement.

36
_Apollo.book Page 37 Vendredi, 8. juin 2007 1:50 13

Etapes suivantes

Distribuer et installer votre application


Vous pouvez distribuer votre application Apollo en distribuant
le fichier AIR de cette application.
Les utilisateurs doivent d’abord installer l’environnement d’exé-
cution Apollo (disponible à la page http://www.adobe.com/go/
apollo). Ils peuvent ensuite exécuter le fichier AIR pour lancer
l’installation de votre application.

ASTUCE
Dans une version future, vous pourrez créer des installa-
teurs capables de vérifier que l’environnement d’exécution
Apollo est présent sur la machine de l’utilisateur et de l’ins-
taller dans le cas contraire.

Etapes suivantes
Votre environnement de développement Apollo est désormais
prêt. Vous avez su créer, empaqueter et exécuter l’application
Hello World. Il est donc temps d’en apprendre un peu plus sur
ce qui fait la force d’Apollo. Les chapitres suivants présenteront
ses fonctionnalités les plus importantes.

ASTUCE
Si vous avez l’intention de distribuer votre application
Apollo via un lien sur une page Web, assurez-vous de bien
associer le type MIME AIR à votre serveur web. Par exem-
ple, sur un serveur HTTP Apache, vous devriez ajouter la
ligne suivante au fichier httpd.conf :
AddType application/vnd.adobe.apollo-install-package .air

37
_Apollo.book Page 38 Vendredi, 8. juin 2007 1:50 13
_Apollo.book Page 39 Vendredi, 8. juin 2007 1:50 13

Chapitre 3

Utiliser du HTML
dans les applications
Apollo créées avec Flex

Avec Apollo, les développeurs disposent d’une nouvelle


manière d’afficher du HTML dans leurs applications pour le
bureau. Cette nouvelle fonctionnalité permet de :
• charger et afficher des pages web complètes (HTML et
XHTML) depuis des URL locales et distantes, ou depuis une
chaîne de caractères ;
• accéder au DOM (Document Object Model) complet et le
manipuler ;
• appeler des fonctions JavaScript et faire référence à des
objets JavaScript depuis votre code ActionScript et vice
versa ;
• modifier le composant Flex HTML dans l’interface de votre
application comme vous le feriez avec n’importe quel com-
posant d’interface utilisateur de Flex ;
• modifier graphiquement l’objet HTMLControl ou le compo-
sant Flex HTML comme n’importe quel Sprite ou
DisplayObject avec ActionScript.
La nouvelle classe flash.html.HTMLControl prend en charge le
chargement, l’affichage et l’exécution de script d’un code
HTML. Le nouveau composant Flex HTML, qui se fonde sur la
classe HTMLControl, dispose des mêmes capacités d’affichage
HTML tout en étant intégré au sein du framework d’interface
utilisateur de Flex.
39
_Apollo.book Page 40 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

Une application dont les besoins d’affichage et de navigation


HTML sont assez simples peut utiliser le composant Flex HTML
avec très peu, voire aucun, code ActionScript. Bien entendu,
des fonctionnalités plus complexes nécessiteront la rédaction
d’un programme ActionScript ou JavaScript.
Ce chapitre décrit les capacités d’Apollo en matière de HTML,
en offrant un grand nombre de petits exemples afin que vous
puissiez rapidement commencer à écrire des applications qui
profitent de cette fonctionnalité.
Vous pouvez également vous référer à la section Travailler avec
du HTML du chapitre 5 pour en savoir plus sur l’utilisation du
HTML avec Apollo.

Le support du HTML dans Apollo


La classe HTMLControl d’Apollo utilise WebKit (www.webkit.org)
en tant que moteur d’affichage HTML. WebKit est un moteur
de navigateur web Open Source qui, a l’origine, a été utilisé dans
le navigateur Safari.
La classe HTMLControl d’Apollo est capable d’afficher du con-
tenu HTML 4 ou XHTML. Elle supporte totalement le standard
CSS 1.0 et presque complètement CSS 2.1 et CSS 3. Le DOM
(Document Object Model) accepte le standard W3C DOM
Niveau 2 (www.w3.org/DOM ).
La classe HTMLControl prend totalement en charge le langage
JavaScript, qui est basé sur le standard ECMAScript 3. Vos
applications Flex, Flash et ActionScript peuvent donc désor-
mais utiliser les méthodes et propriétés JavaScript afin de
disposer d’interactions de type AJAX et créer une expérience
utilisateur encore meilleure.
La classe HTMLControl a même la capacité d’embarquer des
fichiers SWF, ce qui signifie que vous pouvez exécuter des appli-
cations Flash ou Flex au sein d’un objet HTMLControl dans une
application Apollo. Néanmoins, cette fonctionnalité n’est pas
encore disponible dans la version Alpha publique.

40
_Apollo.book Page 41 Vendredi, 8. juin 2007 1:50 13

Le support du HTML dans Apollo

Ni la classe Apollo HTMLControl, ni le composant Flex HTML ne


disposent de toutes les fonctionnalités d’un navigateur web
complet. En revanche, vous pouvez utiliser l’un comme l’autre
pour construire vos propres navigateurs web.

ASTUCE
Les fonctionalités relatives au HTML de la version Alpha 1
d’Apollo ne sont que partiellement implémentées. Des fonc-
tionnalités supplémentaires, des API, ainsi que de nouveaux
événements sont actuellement en développement.

La classe HTMLControl et le composant Flex


HTML
La nouvelle classe flash.html.HTMLControl offre des méthodes
et propriétés qui ont pour objet de récupèrer, de charger et
d’afficher le contenu HTML. Puisque c’est une sous-classe de la
classe flash.display.DisplayObject, on peut la manipuler au
sein de la display list comme n’importe quel instance de la
classe DisplayObject.
Le composant Flex HTML présente la classe HTMLControl en tant
que UIComponent, lui offrant par là même tous les bénéfices du
framework d’interface utilisateur de Flex.
Le tableau suivant liste les similarités et les différences fonction-
nelles entre le composant Flex HTML et la classe HTMLControl.

Capacités Composant Flex HTML Classe HTMLControl


Superclasse mx.core.Scroll- flash.display.Sprite
ControlBase
Charger du HTML En affectant la En appelant la méthode
par une URL propriété location load()
Charger du HTML En affectant la En appelant la méthode
depuis une chaîne propriété htmlText loadString()
de caractères

41
_Apollo.book Page 42 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

Capacités Composant Flex HTML Classe HTMLControl


Accéder ou mani- En utilissant les En utilisant les
puler le DOM propriétés propriétés window ou
javascriptWindow ou window.document
javascriptDocument
Evénements • locationChange • domInitialize
diffusés • htmlTextChanged • complete
• domInitialize • htmlBoundsChange
• htmlRender • htmlRender
• complete • scroll
Autres capacités • Peut être utilisé dans • Peut écouter les
une interface Flex modifications des
sans code supplémen- limites du contenu
taire HTML affiché
• Peut se voir appliqué • Peut contrôler la posi-
des styles CSS tion du défilement
• Peut être utilisé • Ne dispose pas de bar-
comme Item res de défilement
Renderer
• Dispose de barres de
défilement

Utiliser le composant Flex HTML


Le composant Flex HTML offre un support complet du HTML. Il
peut être facilement intégré à une application Flex et son inter-
face de programmation est similaire aux autres composants
Flex.
Le composant HTML peut être déclaré dans un code MXML
comme n’importe quel autre composant Flex. Voici un
exemple qui applique au composant HTML la hauteur et la lar-
geur de la fenêtre dans laquelle il est contenu :
<mx:HTML id="html" width="100%" height="100%" />

42
_Apollo.book Page 43 Vendredi, 8. juin 2007 1:50 13

Utiliser le composant Flex HTML

Naviguer vers une page web


Vous pouvez indiquer au composant HTML une page web à
charger en assignant à sa propriété location une chaîne URL
valide. L’exemple suivant applique à l’instance HTML une
valeur d’URL spécifique :
html.location = "http://www.adobe.com";
La chaîne d’URL doit comprendre la portion initiale du schéma
de représentation de l’URL, par exemple "http://".
Le tableau suivant montre les schémas de représentation de
l’URL que la classe HTMLControl supporte actuellement. Y figu-
rent des protocoles standard, ainsi que trois nouveaux
protocoles qui spécifient les fichiers que l’on trouve dans les
répertoires connus par une application Apollo :

Chaîne de protocole Description


http: Identifie une ressource web à charger en utili-
sant le protocole standard HTTP (HyperText
Transfer Protocol).
https: Identifie une ressource web à charger en utili-
sant les protocoles de communication sécu-
risés TLS (Transport Layer Security) ou SSL
(Secure Sockets Layer).
file: Spécifie un fichier à charger depuis le
système de fichier local.
app-storage: Identifie un fichier à charger depuis le réper-
toire de stockage de l’application.
app-resource: Identifie un fichier à charger depuis le réper-
toire d’installation de l’application.

Pour plus d’informations à propos des schémas de représenta-


tion URI des emplacements des répertoires les plus courants,
voir la section Propriétés de la classe File pour accéder aux répertoires
les plus courants, page 65 du chapitre 4.
Le composant HTML n’offre pas d’élément d’interface permet-
tant d’entrer ou de choisir l’URL à charger. Votre application
doit fournir à l’utilisateur d’autres moyens de sélectionner le

43
_Apollo.book Page 44 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

contenu qui sera chargé dans le composant HTML. Par exemple,


une application pourrait présenter une liste d’URL ou de sites
web qu’un utilisateur pourrait choisir, ou bien présenter les élé-
ments d’interface standard d’un navigateur web tels que :
• un champ texte pour saisir l’URL d’une page web ;
• des boutons Précédent et Suivant ;
• une fenêtre Historique.
Voici un exemple qui crée l’un des navigateurs les plus simples
que l’on ait jamais fait. Il contient un seul et unique champ
texte pour entrer les URL :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">

<mx:TextInput id="urlTxt" width="100%"


enter="html.location=urlTxt.text;"
text="http://www.adobe.com" />
<mx:HTML id="html" width="100%" height="100%"
location="http://www.adobe.com" />

</mx:ApolloApplication>
Quand l’utilisateur entre une nouvelle URL dans le champ
texte, l’événement enter déclenche un code qui définit la pro-
priété location du composant HTML et lui affecte la valeur de la
propriété text du composant TextInput.

Charger du HTML depuis une chaîne de


caractères
Votre application peut également assigner du contenu HTML
au composant HTML avec une chaîne de caractères. Cela vous
permet d’utiliser ce composant pour créer un contenu HTML
complexe au sein de votre application Flex. Pour ce faire, assi-
gnez une chaîne contenant un texte HTML valide à la propriété
htmlText.

44
_Apollo.book Page 45 Vendredi, 8. juin 2007 1:50 13

Utiliser le composant Flex HTML

Cette chaîne peut être un simple texte qui inclut des balises
HTML, comme ici :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initApp()">

<mx:Script>
<![CDATA[
public function initApp():void
{
<application
xmlns="http://ns.adobe.com/apollo/application/1.0.M3"
appId="com.oreilly.apollo.examples.SampleTransparent"
version="1.0">
this.html.htmlText = initHtml;
}
]]>
</mx:Script>

<mx:HTML id="html" width="100%" height="100%" />

</mx:ApolloApplication>
La chaîne pourait également contenir une page HTML com-
plète, avec ses éléments <html>, <head> et <body> , comme dans
cet exemple :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initApp()">

<mx:Script>
<![CDATA[
public function initApp():void
{
var initHtml:String = "<html><head> \

45
_Apollo.book Page 46 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

<title='Exemple de page'/> \
<body bgcolor='#ccddee'><h1>Exemple de page</h1> \
<p>Ceci est une page <b>HTML</b> \
complète faite avec une <em>chaîne</em>.</p></html>
</body>";

this.html.htmlText = initHtml;
}
]]>
</mx:Script>

<mx:HTML id="html" width="100%" height="100%" />

</mx:ApolloApplication>
Les balises HTML de la chaîne doivent se conformer à la spécifi-
cation HTML 4. Il n’est pas nécessaire que la chaîne contienne
du XHTML, même si vous pouvez, si vous le désirez, charger du
XHTML dans le composant HTML.
L’exemple suivant montre une application qui déclare un con-
tenu XHTML en tant que classe XML ActionScript (utilisant la
syntaxe E4X) et qui affiche alors ce XHTML dans le composant
HTML :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initApp()">

<mx:Script>
<![CDATA[
public function initApp():void
{
var initXml:XML =
<html>
<head>
<title>Exemple XHTML</title>
</head>
<body bgcolor='#DDCCEE'>

46
_Apollo.book Page 47 Vendredi, 8. juin 2007 1:50 13

Utiliser le composant Flex HTML

<h1>Exemple XHTML</h1>
<p>Ceci est un objet <b>XHTML</b>
converti en <em>chaîne</em>.</p>
</body>
</html>;
this.html.htmlText = initXml.toXMLString();
}
]]>
</mx:Script>

<mx:HTML id="html" width="100%" height="100%" />

</mx:ApolloApplication>
La chaîne chargée peut également contenir du code JavaScript
et des déclarations de styles CSS, ou encore, des liens vers des
fichiers sources JavaScript ou des feuilles de styles externes.
Le composant HTML déclenche un événement htmlTextChanged
dès que la propriété htmlText se voit modifiée.
Vous pouvez récupérer le HTML chargé en tant que chaîne de
caractère en lisant la valeur de la propriété htmlText. La pro-
priété htmlText enregistre la chaîne de caractères qui a été
chargée.
Lorsque le contenu HTML est chargé en affectant une chaîne de
caractères à la propriété location, la propriété htmlText aura la
valeur null. Si vous avez besoin de déterminer si le contenu
actuel du composant HTML a été chargé depuis une URL ou
depuis une chaîne, vous pouvez vérifier la propriété htmlText.
Si sa valeur est non-null, alors le contenu actuel a été chargé
depuis une chaîne de caractères. Dans le cas contraire, le con-
tenu actuel a été chargé depuis une URL.
L’application de l’exemple suivant écoute l’événement
htmlTextChanged et affiche des informations concernant la
source du contenu qui a été chargé :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication

47
_Apollo.book Page 48 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" creationComplete="initApp()">

<mx:Script>
<![CDATA[
public function initApp ():void
{
this.html.addEventListener("htmlTextChanged",
onHtmlTextChanged);
var initHtml:String = "<h1>Exemple: l'événement
htmlTextChanged " +
"</h1> \n" +
"Au depart ce contenu est une "+
"<em>chaîne</em> "+
"<b>HTML</b>.";
this.html.htmlText = initHtml;
}
public function onHtmlTextChanged(evt:Event):void
{
if (this.html.htmlText)
{
trace("Contenu créé depuis une chaîne");
}
else
{
trace("Contenu chargé depuis une URL.");
}
}
]]>
</mx:Script>
<mx:TextInput id="urlTxt" width="100%"
enter="html.location=urlTxt.text;"
text="http://www.adobe.com" />

<mx:HTML id="html" styleName="HTML"


width="100%" height="100%"/>

</mx:ApolloApplication>

48
_Apollo.book Page 49 Vendredi, 8. juin 2007 1:50 13

Utiliser le composant Flex HTML

Savoir quand la propiété location a été modifiée


Votre application peut définir explicitement la propriété loca-
tion du composant HTML, mais cette propriété peut également
changer lorsque :
• l’utilisateur clique sur un hyperlien ;
• une page HTML redirige automatiquement vers une autre
page ;
• la propriété window.location du DOM est modifiée par un
code JavaScript.
Quand la propriété location est modifiée, le composant HTML
diffuse un événement locationChange. Cet événement est
déclenché avant que le site de l’URL n’ait été contacté et avant
qu’un quelconque contenu HTML n’ait été récupéré. Votre
application pourrait donc répondre à l’événement
locationChange afin de mettre à jour l’affichage de certains élé-
ments de l’interface utilisateur avant que le site soit contacté,
ou encore manipuler l’URL au préalable.
L’événement locationChange est le premier d’une série d’événe-
ments qui sont déclenchés lorsque la propriété location est
modifiée. Voici la séquence des événements déclenchés quand
une valeur est assignée à la propriété location :
1. Une chaîne de caractère d’URL est affectée à la propriété
location.
2. L’événement locationChange est diffusé.
3. Une connexion HTTP est créée et le transfert des données
commence.
4. L’événement domInitialize est diffusé quand le DOM vide
initial est créé.
5. Le contenu HTML ou XHTML est chargé.
6. Les ressources externes, telles que les images, sont récupé-
rées et chargées.

49
_Apollo.book Page 50 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

7. Le contenu est affiché et un événement htmlRender est


diffusé. L’événement htmlRender peut être déclenché
plusieurs fois, à mesure que les ressources externes sont ajou-
tées au contenu et que celui-ci est redessiné.
8. L’événement complete est diffusé quand l’ensemble du
contenu HTML et les ressources externes ont été chargées et
affichées et après que l’événement JavaScript load ait été
diffusé. (L’événement load est un événement standard
diffusé par le moteur JavaScript HTML et n’est pas spéci-
fique à Apollo.)
Une séquence d’événements similaire se déroule quand la pro-
priété htmlText est modifiée, quoique dans ce cas c’est
l’événement htmlTextChanged qui est diffusé plutôt que l’événe-
ment locationChange.

Manipuler le DOM HTML


En écoutant l’événement domInitialize, votre application peut
accéder au DOM initial, vide, avant que la page ne soit chargée.
Il est donc possible d’injecter des variables ou des objets dans le
DOM avant que les éléments de la page ne soient chargés et
avant qu’un quelconque code JavaScript ne soit exécuté.
Après que la page ait été chargée, le composant HTML diffusera
l’événement complete. À ce moment précis, votre application
peut récupérer le contenu du DOM en utilisant les propriétés
javaScriptWindow et javaScriptDocument.
La propriété javascriptWindow représente l’objet JavaScript
Window du DOM, l’objet le plus haut de sa hiérarchie. La pro-
priété javaScriptDocument représente l’objet window.document
du DOM. L’objet window.document décrit l’ensemble du con-
tenu HTML chargé par le composant HTML.

50
_Apollo.book Page 51 Vendredi, 8. juin 2007 1:50 13

Utiliser le composant Flex HTML

Appliquer des styles CSS au composant HTML


À l’image d’autres sous-classes de la classe UIComponent, le com-
posant HTML peut se voir appliqué des styles à l’aide de
déclarations de style CSS. Ces déclarations affectent l’aspect
extérieur du composant HTML. Elles ne modifient pas le texte ou
l’affichage du contenu HTML à l’intérieur du composant. Si
vous désirez modifier les styles au sein du document HTML,
vous devrez utiliser la balise HTML <style> à l’intérieur même
de son contenu.
Le nom du style CSS par défaut du composant HTML est HTML.
L’exemple suivant utilise un style CSS afin d’encadrer le com-
posant d’une bordure noire de 4 pixels de large :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">

<mx:Style>
.HTML {
backgroundColor: #000000;
paddingLeft: 4px;
paddingRight: 4px;
paddingTop: 4px;
paddingBottom: 4px;
}
</mx:Style>

<mx:TextInput id="urlTxt" width="100%"


enter="html.location=urlTxt.text;"
text="http://www.adobe.com" />

<mx:HTML id="html" width="100%" height="100%"


location="http://www.adobe.com"
styleName="HTML" />
</mx:ApolloApplication>

51
_Apollo.book Page 52 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

Manipuler le composant HTML en tant que Sprite


Le composant HTML est un descendant de la classe
DisplayObject, il peut donc être inséré dans la display list et y
être manipulé comme n’importe quel display object. Par
exemple, votre application pourrait faire l’une des choses sui-
vantes au composant HTML :
• l’insérer sous ou entre d’autres display objects ;
• appliquer des filtres afin de le rendre flou, modifier ses cou-
leurs, changer son apparence ;
• utiliser des matrices de transformation pour l’agrandir, le
retrécir, le tourner ou le déformer.
Pour observer un exemple de modification de l’affichage du
composant HTML, voir Modifier l’apparence du composant HTML
dans le chapitre 5.

Accéder à l’objet HTMLControl sous-jacent


Il y a certaines choses que le composant Flex HTML ne peut effec-
tuer directement, comme lire ou assigner la position du
défilement, ou surveiller les modifications survenues aux
limites d’affichage du contenu.
Si votre application recourt à un composant Flex HTML, celui-ci
peut utiliser sa propriété htmlControl pour faire référence à
l’objet HTMLControl sous-jacent, comme montré dans l’exemple
suivant :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx=
"http://www.adobe.com/2006/mxml"
layout="vertical" creationComplete="initApp()">

<mx:Script>
<![CDATA[
public function initApp():void
{
html.htmlControl.addEventListener(

52
_Apollo.book Page 53 Vendredi, 8. juin 2007 1:50 13

Utiliser la classe HTMLControl

Event.SCROLLED,
onHtmlScrolled);
}
public function onHtmlScrolled(evt:Event):void
{
trace("Les nouvelles valeurs de défilement sont " +
html.htmlControl.scrollX + "," +
html.htmlControl.scrollY);
}
]]>
</mx:Script>
<mx:TextInput id="urlTxt" width="100%"
enter="html.location=urlTxt.text;"
text="http://www.adobe.com" />

<mx:HTML id="html"
width="100%" height="100%"
location="http://www.adobe.com" />
</mx:ApolloApplication>
Tout d’abord, la méthode initApp() crée un écouteur pour
l’événement contentScroll de l’objet html.htmlControl. Quand
l’événement contentScroll est reçu, la méthode
onHtmlScrolled() exécute et affiche les valeurs des propriétés
scrollX and scrollY de l’objet HTMLControl sous-jacent.

Utiliser la classe HTMLControl


Il est plutôt facile de déposer un composant Flex HTML dans
l’interface utilisateur de votre application et de l’utiliser pour
charger des pages web et naviguer. Néanmoins, il est parfois
plus facile de travailler directement avec la classe HTMLControl
avec ActionScript.
Cette section met en avant certaines des différences entre la
classe HTMLControl et le composant Flex HTML et expose quel-
ques fonctionnalités supplémentaires de la classe HTMLControl.

53
_Apollo.book Page 54 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

Charger du HTML depuis une URL


Pour charger du HTML depuis une URL distante avec le com-
posant Flex HTML, vous devez affecter à la propriété location
une chaîne qui contient cette URL.
La classe HTMLControl gère les choses différemment. Pour
charger du contenu dans un objet HTMLControl depuis une URL
distante, vous devez appeler la méthode load(), en lui passant
un paramètre de type URLRequest.
L’exemple suivant montre un appel à la méthode load() :
var html:HTMLControl = new HTMLControl();
var str:String = "http://www.oreilly.com/");
var req:URLRequest = new urlRequest(str);
html.load(req);

Charger une chaîne contenant du texte HTML


Vous pouvez charger une chaîne de texte HTML dans un objet
HTMLControl en appellant la méthode loadString() de l’objet,
comme suit :
var simpleHtml:String =
"<html><body><p>Bonjour</p></body></html>;
var html:HTMLControl = new HTMLControl();
html.loadString(simpleHtml);
À l’instar du composant HTML, la valeur de la chaîne peut con-
tenir du texte avec quelques balises HTML ou une page HTML
complète avec ses balises <html>, <head> et <body>, ou encore du
contenu XHTML valide.
Vous pouvez également gérer le contenu XHTML en utilisant
une instance de la classe XML, puis en utilisant la méthode
XML.toXMLString() afin de créer une chaîne à la passer à la
méthode HTMLControl.loadString().
Dans la plupart des cas, la méthode loadString(), à l’image de
son pendant, la méthode load(), s’exécute de manière asyn-
chrone et diffuse un événement complete lorsque la chaîne a été
chargée et affichée dans l’objet HTMLControl. Néanmoins, si la

54
_Apollo.book Page 55 Vendredi, 8. juin 2007 1:50 13

Utiliser la classe HTMLControl

chaîne HTML ne contient aucune référence à des ressources


externes, la méthode loadString() s’exécute de manière syn-
chrone. Cela signifie que l’ensemble du contenu HTML de la
chaîne est chargé et affiché dans l’objet HTMLControl avant que
votre prochaine ligne de script ne reprenne la main. Vous
pouvez vérifier si la chaîne HTML a été chargée de manière syn-
chrone en utilisant la propriété loaded, comme le montre
l’exemple suivant :
var html:HTMLControl = new HTMLControl();
html.loadString(content);
if (html.loaded)
{
trace( "La méthode loadString() a été synchrone." );
}
Même si le méthode loadString() s’exécute de manière syn-
chrone, un événement complete est diffusé lorsque le contenu
est chargé et affiché.

Manipuler le DOM HTML


Tout comme pour le composant HTML, la classe HTMLControl dif-
fuse un événement domInitialize quand le DOM vide du
départ est créé et diffuse alors un événement complete quand la
page HTML est totalement chargée et affichée.
Après l’un ou l’autre de ces événements, votre application peut
accéder au DOM de l’objet HTMLControl en utilisant la pro-
priété window, qui représente l’objet JavaScript Window le plus
haut de la hiérarchie.
Après réception de l’événement complete, le DOM se trouvera
totalement renseigné. La propriété window.document contiendra
l’ensemble du contenu HTML chargé par le composant HTML.

Savoir quand les limites du contenu ont changé


On entend par limites du contenu, ou content bounds, la taille
du contenu HTML affiché, barres de défilement exclues. Ces
limites peuvent se voir modifiées lorsqu’un nouveau contenu

55
_Apollo.book Page 56 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

est chargé dans une page existante. Par exemple, un script pour-
rait charger une nouvelle image dans un espace plus petit que
cette image. Dans ce cas, les positions des autres éléments
HTML pourraient être modifiées et les limites du contenu
seraient par là même repoussées.
Votre application peut être avertie d’une modification de ces
limites en écoutant l’événement htmlBoundsChange de la classe
HTMLControl.

Le Script Bridging : faire communiquer


ActionScript et JavaScript
Apollo présente une fonctionnalité des plus intéressantes. Il
permet de croiser le code ActionScript (contenu dans des
fichiers SWF) et le code JavaScript (dans des pages HTML).
Le code ActionScript d’un fichier SWF peut accéder au DOM
(Document Object Model) HTML et au code JavaScript d’une
page HTML chargée en tant qu’objet enfant du fichier SWF. De
la même manière, le code JavaScript dans une page HTML
chargée dans un objet HTMLControl (ou un composant Flex HTML)
peut accéder au contenu ActionScript du fichier SWF parent.
De plus, le contenu HTML chargé par Apollo peut accéder aux
classes natives ActionScript.
De nombreuses utilisations potentielles en découlent :
• le code ActionScript peut contrôler et altérer le DOM d’une
page HTML ;
• le code ActionScript peut lire ou écrire des variables Java-
Script dans une page HTML. Il peut également appeler des
méthodes JavaScript ;
• une page HTML peut accéder aux objets et méthodes
ActionScript du fichier SWF qui la contient ;
• le code JavaScript d’une page HTML peut appeler n’importe
quelle classe native d’ActionScript 3.0. Par exemple, il pour-
rait créer une instance d’un objet Sound ou Socket.

56
_Apollo.book Page 57 Vendredi, 8. juin 2007 1:50 13

Le Script Bridging : faire communiquer ActionScript et JavaScript

Manipuler le DOM depuis ActionScript


Lorsque le contenu HTML est chargé, il diffuse l’événement
complete. À ce moment précis, vous pouvez examiner et mani-
puler le DOM.
Par exemple, observez le simple document HTML suivant :
<html>
<style>
.test { fontFamily:"Arial"; fontSize:"12" }
</style>
<body>
<p id="p1">Hi,
<span id="nomDUtilisateur" class="test">
Bob</span>.
</p>
</body>
</html>
Après que l’objet HTMLControl qui charge ce HTML ait diffusé
l’événement complete, votre application peut manipuler le
DOM, comme montré ici :
var html:HTMLControl = new HTMLControl();
var urlReq:URLRequest = new URLRequest("test.html");
html.load(urlReq);
html.addEventListener(Event.COMPLETE, completeHandler);
private function completeHandler(event:Event):void {
var doc:JavaScriptObject = html.window.document;
doc.getElementById("nomDUtilisateur").innerHTML = "Sue";
}
La propriété html.window.document est retournée en tant qu’ins-
tance de la classe JavaScriptObject. Un objet JavaScriptObject
fait référence à un objet spécifique dans une page HTML et
permet à votre code ActionScript d’appeler n’importe quelle
méthode ou d’accéder à n’importe quelle propriété de cet objet.
Dans la plupart des cas, le plus simple est d’utiliser la syntaxe à
point d’ActionScript afin de faire directement référence aux

57
_Apollo.book Page 58 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

propriétés et méthodes du DOM. L’exemple suivant montre


comment accéder aux détails d’une déclaration de style :
html.window.document.styleSheets[0].cssRules[0].style.
fontSize = "32";

Écouter les événements JavaScript depuis


ActionScript
Vous pouvez déclarer une fonction ActionScript en tant que
gestionnaire d’un événement JavaScript, ce qui vous permet
d’appeler directement les méthodes ActionScript depuis le code
JavaScript.
Par exemple, examinez cette simple page HTML :
<html>
<body>
<a id="monLien" href="http://www.oreilly.com">Test</a>
</body>
</html>
Dans l’application suivante, l’objet HTMLControl charge ce con-
tenu HTML et diffuse alors l’événement complete, ce qui
déclenche la méthode completeHandler(). La méthode
completeHandler() crée une référence vers l’objet JavaScript
myLink, qui représente la balise anchor d’un hyperlien dans le
DOM. Elle définit ensuite le gestionnaire onclick de la balise
pour le diriger vers la méthode clickHandler() du code
ActionScript (ce qui, au passage, écrasera un éventuel gestion-
naire d’événement onclick). Par conséquent, lorsque
l’utilisateur clique sur l’hyperlien, la méthode clickHandler()
est appelée :
var html:HTMLControl = new HTMLControl();
var xhtml:XML =
<html>
<body>
<a id="monLien" href="#">Test</a>
</body>
</html>;

58
_Apollo.book Page 59 Vendredi, 8. juin 2007 1:50 13

Le Script Bridging : faire communiquer ActionScript et JavaScript

html.addEventListener(Event.COMPLETE, completeHandler);

html.loadString(xhtml.toXMLString());

private function completeHandler(event:Event):void {


var myLink:Object = html.window.document.
getElementById("monLien");
myLink.onclick = clickHandler;
}

private function clickHandler(event:Object):void {


trace("cliqué");
}

ASTUCE
Vous pouvez également utiliser des gestionnaires d’événe-
ments DOM Niveau 2, quoique cette fonctionnalité ne soit
pas finalisée dans la version Alpha 1, au moment où cet
ouvrage a été rédigé.

Appeler des fonctions JavaScript depuis


ActionScript
Lorsqu’un composant HTML (ou un objet HTMLControl) diffuse
l’événement complete, vous pouvez appeler ses fonctions depuis
ActionScript.
Par exemple, le code suivant appelle la méthode JavaScript
alert() quand la page HTML est chargée :
var html:HTMLControl = new HTMLControl();
var urlReq:URLRequest = new URLRequest("test.html");
html.addEventListener(EventComplete, completeHandler);

private function completeHandler (event: Event):void {


html.window.alert("Bonjour depuis ActionScript.");
}

59
_Apollo.book Page 60 Vendredi, 8. juin 2007 1:50 13

Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex

Vous pouvez également appeler vos propres fonctions Java-


Script et accéder aux propriétés dans une page HTML. Par
exemple, observez le document HTML suivant :
<html>
<script>
greeting = "bonjour";
function reverseStr(str) {
returnStr = "";
for (i = 0; i < str.length; i++) {
returnStr = str.charAt(i) + returnStr;
}
return returnStr;
}
</script>
<body>
<p>Test page</p>
</body>
</html>
Depuis ActionScript, vous pouvez accéder à la variable Java-
Script dénommée greeting et la fonction JavaScript
reverseStr() après que l’objet HTMLControl ait diffusé un événe-
ment complete :
var html:HTMLControl = new HTMLControl();
var urlReq:URLRequest = new URLRequest("test.html");
htmlControlObj.addEventListener(Event.COMPLETE,
completeHandler);

private function completeHandler(event:Event):void {


trace(html.window.greeting); // bonjour
trace(html.window.reverseStr("foo")); // oof
}

Appeler des fonctions ActionScript depuis


JavaScript
L’un des aspects les plus puissants d’Apollo est la possibilité
d’appeler de l’ActionScript depuis du JavaScript. Un code Java-

60
_Apollo.book Page 61 Vendredi, 8. juin 2007 1:50 13

Le Script Bridging : faire communiquer ActionScript et JavaScript

Script dans une page HTML chargée par un objet HTMLControl


peut appeler les méthodes et propriétés de l’objet ActionScript
parent qui contient l’objet HTMLControl. Il peut également
appeler les classes et méthodes natives d’ActionScript. Ceci peut
être réalisé en utilisant un objet JavaScript dénommé runtime,
qui est accessible depuis n’importe quel contenu JavaScript
chargé par Apollo.
Par exemple, le code JavaScript suivant appelle la méthode
ActionScript trace() :
runtime.trace("Bonjour depuis JavaScript.");
Cet aspect du script-bridging met à la disposition du code JavaS-
cript un nombre important de fonctionalités ActionScript très
utiles. Par exemple, le code JavaScript suivant utilise la classe
ActionScript Sound pour lire un fichier MP3 :
urlReq = new runtime.flash.net.URLRequest("test.mp3");
sound = new runtime.flash.media.Sound(urlReq);
sound.play();
Afin de permettre ce type de script-bridging JavaScript-vers-
ActionScript, vous devez affecter la valeur true à la propriété
exposeRuntime de l’objet HTMLControl :
var html:HTMLControl = new HTMLControl();
html.attachexposeRuntime = true;

ASTUCE
Le kit de développement Apollo incluera des classes Java-
Script qui rendront l’appel des API Apollo et ActionScript
un peu plus intuitif. Celles-ci ne sont pas incluses la version
Alpha 1 d’Apollo.

61
_Apollo.book Page 62 Vendredi, 8. juin 2007 1:50 13
_Apollo.book Page 63 Vendredi, 8. juin 2007 1:50 13

Chapitre 4

Utiliser l’API de système de


fichiers

Apollo fournit une API d’entrée/sortie de fichiers qui permet


aux applications de lire et écrire des fichiers et des répertoires
sur l’ordinateur de l’utilisateur. L’API d’entrée/sortie de fichiers
dispose des fonctionnalités suivantes :
• créer et supprimer des fichiers et des répertoires ;
• copier et déplacer des fichiers et des répertoires ;
• lister le contenu des répertoires ;
• récupérer les informations système sur les fichiers et
répertoires ;
• lire et écrire des fichiers binaires ;
• lire et écrire des fichiers texte ;
• sérialiser et désérialiser des objets ActionScript.
La fonctionnalité de bas niveau permettant de travailler avec le
système de fichiers est accessible via ActionScript. Le fra-
mework Flex pour Apollo fournit des composants pour
travailler avec les fichiers et les répertoires, mais il s’agit de
composants graphiques qui ne permettent pas d’accéder aux
opérations fondamentales d’entrée/sortie.
En plus des informations données dans ce chapitre, vous
pouvez étudier les exemples présentés dans la section Travailler
avec le système de fichiers au chapitre 5. Ces exemples illustrent
un certain nombre de concepts décrits dans ce chapitre et four-
nissent des codes MXML que vous pouvez tester avec Flex
Builder ou le SDK APollo.
63
_Apollo.book Page 64 Vendredi, 8. juin 2007 1:50 13

Chapitre 4 — Utiliser l’API de système de fichiers

Le modèle de sécurité
Dans sa version définitive, Apollo fournira un modèle de sécu-
rité complet permettant l’accès aux ressources locales telles que
le système de fichiers. Néanmoins, ce modèle de sécurité n’a pas
encore été implémenté dans la version Alpha 1 d’Apollo.
Il est important de rappeler que les applications Apollo sont
installées sur l’ordinateur de l’utilisateur et s’exécutent sur
celui-ci. Leur contexte et leur modèle de sécurité sont différents
de ceux des navigateurs. Par conséquent, les règles qui s’appli-
quent au téléchargement et à l’exécution d’autres applications
s’appliquent également au téléchargement et à l’exécution
d’applications Apollo. Les utilisateurs ne doivent télécharger et
installer des applications que depuis des sources dignes de
confiance.

Accéder aux fichiers et aux répertoires


Les applications Apollo peuvent s’exécuter sur différentes plate-
formes, dont Windows et Mac OS. L’API de fichier d’Apollo
utilise une syntaxe de code indépendante de toute plateforme,
de sorte que vous n’ayez à pas à écrire de code spécifique à un
quelconque système d’exploitation.
Par exemple, la manière dont vous représentez un chemin vers
un fichier diffère entre Mac OS et Windows :
• Sous Mac OS, un chemin de fichier classique est de la forme
/Users/joe/Documents/test.txt ;
• Sous Windows, un chemin de fichier classique de Windows
est de la forme C:\Documents and Settings\joe\Mes Docu-
ments\test.txt
Néanmoins, vous pouvez utiliser exactement les mêmes compo-
sants, classes, méthodes et propriétés d’Apollo pour accéder aux
fichiers, quelque soit le système d’exploitation.
Un objet ActionScript File est un pointeur vers un fichier ou
un répertoire. La classe File connaît une propriété statique

64
_Apollo.book Page 65 Vendredi, 8. juin 2007 1:50 13

Accéder aux fichiers et aux répertoires

documentsDirectory qui désigne un objet File qui pointe vers le


répertoire des documents de l’utilisateur. Il s’agit du répertoire
Mes Documents sous Windows (My Documents en version
anglaise), et du sous-répertoire Documents du répertoire de l’uti-
lisateur sous Mac OS, comme illustré dans le code suivant :
trace(File.documentsDirectory.nativePath)
// Sous Windows :
// C:\Documents and Settings\joe\Mes Documents
// Sous Mac OS : /Users/joe/Documents
Dès lors que vous faites pointer un objet File vers un réper-
toire, vous pouvez utiliser la méthode resolve() pour le
modifier afin de le faire pointer vers un fichier ou un sous-
répertoire contenu dans ce répertoire (ou l’un de ses sous-réper-
toires). Par exemple, le code suivant crée un sous-répertoire
ApolloTest dans le répertoire document de l’utilisateur :
var nouveauRep:File = File.documentsDirectory;
nouveauRep = nouveauRep.resolve("ApolloTest");
nouveauRep.createDirectory();
Un objet File peut pointer vers un fichier ou un répertoire exis-
tant ou non, comme dans l’exemple précédent. Cela vous
permet de faire pointer un objet File vers l’emplacement d’un
répertoire qui vous désirez créer.

Propriétés de la classe File pour accéder aux


répertoires les plus courants
La classe File inclut les propriétés statiques suivantes, qui poin-
tent vers des emplacements de répertoires d’usage courant :

65
_Apollo.book Page 66 Vendredi, 8. juin 2007 1:50 13

Chapitre 4 — Utiliser l’API de système de fichiers

Propriété Description
File.appStorageDirectory Chaque application Apollo installée se
voit attribué un répertoire unique de
stockage appelé application storage
directory. C’est un endroit approprié
au stockage de fichiers auxquels
l’application pourrait avoir besoin
d’accéder, mais que l’utilisateur n’a
pas besoin de voir (par exemple les
fichiers d’historiques d’événements,
les fichiers de cache ou les fichiers de
préférences).
File.appResourceDirectory Le répertoire d’installation de l’appli-
cation.
File.currentDirectory Il s’agit du répertoire depuis lequel le
fichier a été lancé. Vous pouvez
l’utiliser afin de résoudre le chemin de
fichier d’un paramètre en ligne de
commandes passé à l’application.
File.desktopDirectory Il s’agit du répertoire du bureau de
l’utilisateur.
File.documentsDirectory Il s’agit du répertoire Mes Documents
sous Windows et du sous-répertoire
Documents du répertoire de l’utilisa-
teur sous Mac OS.
File.userDirectory Il s’agit du répertoire de l’utilisateur.
Par exemple, sous Mac OS, il s’agit du
répertoire Users/nomdutilisateur, et
sous Windows c:\\Document and
Settings\nomdutilisateur.

Les propriétés url et nativePath d’un objet File


La propriété url d’un objet File renvoie l’emplacement d’un
fichier ou d’un dossier sous la forme d’une chaîne de caractères
indépendante de toute plateforme. Cette chaîne commence par
un schéma URL, tel que file, comme montré ici :
var repertoire:File = File.userDirectory;
trace(repertoire.url)

66
_Apollo.book Page 67 Vendredi, 8. juin 2007 1:50 13

Accéder aux fichiers et aux répertoires

// sous Windows : file:///C:/Documents%20and%20Settings/


// nomdutilisateur
// sous Mac OS : file:///Users/nomdutilidateur
La propriété nativePath d’un objet File renvoie pour sa part
une chaîne de caractères qui est spécifique à Windows ou Mac
OS. Par exemple, vous pouvez utiliser ce code pour pointer vers
un chemin précis sur un ordinateur Windows :
var fichier:File = new File();
fichier.nativePath = "c:/ApolloTest/surprise.txt";
Néanmoins, il est généralement conseillé de commencer avec
l’une des propriétés statiques listées dans la table de la section
précédente (telle que File.appStorageDirectory), qui pointe
vers un répertoire connu sur le système d’exploitation, puis
d’utiliser la méthode resolve() afin de créer un chemin relatif à
partir de ce répertoire, comme dans le code suivant :
var historique:File = File.appStorageDirectory;
historique = historique.resolve("log.txt");
Utilisez le répertoire de stockage de l’application pour stocker
les fichiers auxquels vous voulez que votre application puisse
accéder dans le futur, mais que l’utilisateur final n’a pas à con-
naître. Par exemple, c’est un endroit approprié pour stocker les
fichiers de préférences.

Les schémas URI


Un schéma URI est spécifié au début d’une URL, comme file
dans l’exemple suivant :
file:///c:/ApolloTest/test.txt
En plus du schéma URI file, Apollo prend en charge les nou-
veaux schémas URI app-storage et app-resource.

app-storage
Identifie le répertoire de stockage de l’application, comme
montré dans l’exemple suivant :

67
_Apollo.book Page 68 Vendredi, 8. juin 2007 1:50 13

Chapitre 4 — Utiliser l’API de système de fichiers

var historique:File = File.appStorageDirectory;


historique = historique.resolve("log.txt");
trace(historique.url); // app-storage:/log.txt

app-resource
Identifie le répertoire d’installation de cette application,
comme montré ici :
var repDinstall:File = new File();
repDinstall.url = "app-resource:/";
repDinstall = repDinstall.resolve("HelloWorld-app.xml");
trace(repDinstall.url); // app-resource:/HelloWorld-app.xml

file
La propriété url d’un objet File renvoie un schéma URL file :
var fichier:File = File.documentsDirectory;
fichier = fichier.resolve("ApolloTest/test.txt");
trace(fichier.url);
// Sous Windows :
// file:///C:/Documents%20and %20Settings/ ... /test.txt
// Sous Mac OS :
// file:///Users/nomDutilisateur/Documents/ ... /test.txt

Versions asynchrones et synchrones des


méthodes
Certaines méthodes de la classe File (telles que File.copy-
File() et File.copyFileAsync()) et de la classe FileStream ont à
la fois une version synchrone et une version asynchrone.
Les méthodes synchrones ne relâchent pas le contrôle avant que
l’opération sur le fichier soit terminée. Les méthodes asyn-
chrones, pour leur part, s’exécutent en arrière-plan, ce qui
permet à d’autres processus ActionScript d’avoir lieu dans le
même temps. Lorsqu’une opération asynchrone sur un fichier
se termine, un événement est diffusé afin de notifier aux écou-
teurs que l’opération est terminée.

68
_Apollo.book Page 69 Vendredi, 8. juin 2007 1:50 13

Versions asynchrones et synchrones des méthodes

Voici un exemple de copie de fichier à l’aide de la méthode syn-


chrone copyTo() :
var fichier1:File =
File.documentsDirectory.resolve("ApolloTest/test.txt");
var fichier2:File =
File.documentsDirectory.resolve("ApolloTest/copy of
test.txt");
fichier1.copyTo(fichier2);
trace("Texte qui ne sera pas affiché avant que le fichier ne
soit copié.");
Voici un exemple de copie de fichier avec la méthode asyn-
chrone copyToAsync() :
var fichier1:File =
File.documentsDirectory.resolve("ApolloTest/test.txt");
var fichier2:File =
File.documentsDirectory.resolve("ApolloTest/copy of
test.txt");
fichier1.copyToAsync(fichier2);

fichier1.addEventListener(Event.COMPLETE, completeHandler);
trace("Cette ligne s'exécute avant que l'événement complete ne
survienne.");
trace("De même pour cette ligne.");

private function completeHandler(event:Event):void {


trace("C'est fait.");
}
Le tableau suivant liste les méthodes asynchrones de la classe
File (qui connaissent toutes une méthode synchrone équiva-
lente) et les événements diffusés après que la méthode ait été
appelée :

Méthodes asynchrones de la Evénements


classe File
copyToAsync() complete, ioError
deleteDirectoryAsync() complete, ioError
deleteFileAsync() complete, ioError

69
_Apollo.book Page 70 Vendredi, 8. juin 2007 1:50 13

Chapitre 4 — Utiliser l’API de système de fichiers

Méthodes asynchrones de la Evénements


classe File
listDirectoryAsync() directoryListing, ioError
moveToAsync() complete, ioError
moveToTrashAsync() complete, ioError

Pour ouvrir un fichier, vous pouvez utiliser, soit la méthode


open(), soit la méthode openAsync(), de l’objet FileStream. La
première ouvre le fichier pour des opérations synchrones et la
seconde ouvre le fichier pour des opérations asynchrones. Pour
plus d’informations, voir la section Les méthodes open() et openA-
sync(), page 76.
Utilisez les méthodes asynchrones lorsque vous voulez vous
assurer que d’autres processus ActionScript, tels que l’anima-
tion d’une barre de progression, continuent pendant que
l’opération sur le fichier a lieu. Par exemple, vous pourriez uti-
liser la méthode open() (synchrone) d’un objet FileStream si
vous vous apprêtez à écrire un petit fichier (1 Mo ou moins) et
utiliser la méthode openAsync() pour écrire des fichiers plus
gros, ou quand la taille du fichier est inconnue.
Pour plus d’informations sur les méthodes asynchrones en
général, voir le chapitre Handle events de Programming in
ActionScript 3.0, disponible sur la page :
http://livedocs.macromedia.com/flex/2/docs/Part5_ProgAS.html

Lire le contenu des répertoires


La méthode File.listDirectory() renvoie un tableau qui liste
les objets File représentant les fichiers et répertoires contenus
dans le répertoire spécifié. Par exemple, le code suivant liste le
contenu du répertoire du bureau :
var repertoire:File = File.desktopDirectory;
var contenus:Array = repertoire.listDirectory();
for (var i:uint = 0; i < contenus.length; i++) {

70
_Apollo.book Page 71 Vendredi, 8. juin 2007 1:50 13

Récupérer les informations d’un fichier

if (contenus[i].isDirectory) {
trace(contenus[i].name);
} else {
trace(contenus[i].name,
contenus[i].size,
"octets");
}
}
La méthode File.listDirectory() renvoit uniquement les
fichiers et répertoires au niveau de la racine d’un répertoire.
Elle ne récupère pas récursivement le contenu de ses sous-réper-
toires. Vous pouvez, bien entendu, écrire un code pour
parcourir les sous-répertoires. Mais dans ce cas, voyez s’il ne
serait pas préférable d’utiliser la méthode File.listDirec-
toryAsync() afin que d’autres processus ActionScript puissent
continuer pendant la création de la liste du contenu du
répertoire.
Voir également la section Récuperer le contenu d’un répertoire au
chapitre 5.

Récupérer les informations d’un fichier


La classe File comprend un certain nombre de propriétés qui
contiennent des informations à propos d’un fichier ou d’un
répertoire.

Propriété Description
exists Détermine si un fichier existe ou non. Il est inté-
ressant de vérifier cette propriété avant de lire,
écrire, copier ou déplacer un fichier, par exemple.
isDirectory Détermine si un objet File pointe vers un réper-
toire (true) ou un fichier (false). Vous devrez
probablement vérifier cette propriété avant de
tenter d’exécuter des opérations propres aux
répertoires, telles que la méthode
listDirectory(), ou propres aux fichiers, telles
que la lecture d’un fichier.
isHidden Détermine si le fichier ou le répertoire est caché.

71
_Apollo.book Page 72 Vendredi, 8. juin 2007 1:50 13

Chapitre 4 — Utiliser l’API de système de fichiers

Propriété Description
nativePath Renvoie le chemin spécifique au système
d’exploitation vers le fichier ou le répertoire.
parent Renvoie le répertoire parent de l’instance de la
classe File.
url Renvoie le chemin indépendant du système
d’exploitation vers le fichier ou le répertoire.

La classe File hérite également des propriétés suivantes de la


classe FileReference :

Propriété Description
creationDate La date à laquelle le fichier ou le répertoire a été
créé.
modificationDate La date à laquelle le fichier ou le répertoire a été
modifié.
name Le nom du fichier ou du dossier.
size La taille du fichier, en octets.

Copier et déplacer des fichiers et des


répertoires
Les méthodes File.copyTo() et File.moveTo() copient ou dépla-
cent un fichier ou un répertoire vers un nouvel emplacement.
Par exemple, le code suivant copie le fichier test.txt dans le sous-
repértoire Apollo Test du répertoire des documents de l’utilisa-
teur vers le sous-répertoire User Data du répertoire de stockage
de l’application :
var fichier1:File = File.documentsDirectory.resolve("Apollo
Test/test.txt");
var destination:File = File.appStorageDirectory.resolve("User
Data");
destination.createDirectory();
var fichier2:File = destination.resolve("test.txt");
fichier1.copyTo(fichier2);

72
_Apollo.book Page 73 Vendredi, 8. juin 2007 1:50 13

Créer des fichiers et des répertoires

Notez l’appel à la méthode File.createDirectory(), qui


garantit que le répertoire de destination existe.
Le code suivant déplace le sous-répertoire Apollo Test 1 du réper-
toire des documents de l’utilisateur vers le sous-répertoire
Apollo Test 2 (ce qui a pour effet de renommer le répertoire) :
var rep1:File = File.documentsDirectory;
rep1 = rep1.resolve("Apollo Test 1");
var rep2:File = File.documentsDirectory;
rep2 = rep2.resolve("Apollo Test 2");
rep1.moveTo(rep2);
Vous aurez peut-être intérêt à utiliser les versions asynchrones
de ces méthodes, File.copyToAsync() et File.moveToAsync(), si
l’opération de copie ou de déplacement est susceptible de
prendre un certain temps.
Chacune de ces méthodes inclut un paramètre clobber, auquel
vous pouvez assigner la valeur true pour faire en sorte que
l’opération écrase les fichiers existants. Par défaut, ce para-
mètre a pour valeur false.

Créer des fichiers et des répertoires


Les méthodes statiques de la classe File File.createTempFile()
et File.createTempDirectory() vous permettent de créer un
fichier ou un répertoire temporaire. Apollo s’assure que le
fichier ou le répertoire temporaire créé par ces méthodes est
nouveau et unique. Par exemple, le code suivant crée un fichier
temporaire :
var stockageTampon:File = File.createTempFile();
Les fichiers et répertoires temporaires ne sont automatique-
ment supprimés qu’à la clôture de l’application Apollo. La
plupart du temps, vous voudrez supprimer les fichiers et réper-
toires temporaires avant la clôture de l’application. Pour plus
d’informations, voir la section Supprimer des fichiers et des réper-
toires, page 74.

73
_Apollo.book Page 74 Vendredi, 8. juin 2007 1:50 13

Chapitre 4 — Utiliser l’API de système de fichiers

La méthode File.createDirectory() vous permet de créer un


répertoire à l’emplacement spécifié par l’objet File :
var repertoire:File = File.documentsDirectory;
repertoire = repertoire.resolve("ApolloTest");
repertoire.createDirectory();
Lorsque vous ouvrez un objet FileStream avec les droits en écri-
ture, les répertoires sont automatiquement créés, si besoin.
Pour plus d’informations à propos des objets FileStream, voir la
section Lire et écrire des fichiers.

Supprimer des fichiers et des répertoires


La méthode File.deleteFile() supprime de manière perma-
nente un fichier, et la méthode File.deleteDirectory()
supprime de manière permanente un répertoire. La méthode
File.moveToTrash() vous permet de déplacer un fichier ou un
répertoire vers la corbeille du système.
Chacune de ces méthodes connaît également un équivalent
asynchrone.

Lire et écrire des fichiers


La classeFileStream fournit des méthodes qui permettent à
votre application de lire et écrire des fichiers.
Voici le processus général de lecture et d’écriture d’un fichier :
1. Créez un objet File qui pointe vers le fichier que vous
voulez lire ou écrire.
Pour plus de détails, voir la section Accéder aux fichiers et aux
répertoires, page 64.
2. Créez une instance de la classe FileStream, par exemple :
var flux:FileStream = new FileStream();.
3. Appelez la méthode FileStream.open() ou FileStream.
openAsync(), en passant l’objet File comme paramètre file

74
_Apollo.book Page 75 Vendredi, 8. juin 2007 1:50 13

Lire et écrire des fichiers

et en passant le mode de fichier approprié comme para-


mètre fileMode. Par exemple :
flux.open(fichier, FileMode.READ);
Pour plus d’informations, voir la section Modes d’ouverture de
fichiers, page 78.
4. Si vous appelez la méthode FileStream.openAsync( ), créez
les gestionnaires d’événement appropriés.
Pour plus d’informations, voir la section Les méthodes open() et
openAsync(), page 76.
5. Appelez la méthode de lecture et écriture appropriée pour
vous données.
Pour plus d’informations, voir la section Les méthodes de lec-
ture et d’écriture, page 79.
6. Fermez le fichier avec la méthode FileStream.close( ). Par
exemple :
flux.close();
Les étapes 3, 4, et 5 sont décrites plus en détail dans les sections
qui suivent. Voici d’abord un exemple de code décrivant com-
ment lire le texte UTF-8 d’un fichier de manière synchrone :
var fichier:File = File.appStorageDirectory;
fichier = fichier.resolve("settings.xml");
var flux:FileStream = new FileStream();
flux.open(fichier, FileMode.READ);
var donnees:String = flux.readUTFBytes(flux.bytesAvailable);
flux.close();
Voici un code qui lit les mêmes données de manière
asynchrone :
var fichier:File = File.appStorageDirectory;
fichier = fichier.resolve("settings.xml");
var flux:FileStream = new FileStream();
flux.openAsync(fichier, FileMode.READ);
flux.addEventListener(Event.COMPLETE, lireLesDonnees);
var donnees:String;

75
_Apollo.book Page 76 Vendredi, 8. juin 2007 1:50 13

Chapitre 4 — Utiliser l’API de système de fichiers

private function lireLesDonnees(evenement:Event):void {


donnees = flux.readUTFBytes(flux.bytesAvailable);
flux.close();
}

Les méthodes open() et openAsync()


Votre application doit d’abord ouvrir un fichier avant de pou-
voir le lire ou l’écrire.
Lorsque vous ouvrez un fichier avec la méthode
FileStream.openAsync(), le fichier sera ouvert pour des opéra-
tions asynchrones et vous devrez créer des gestionnaires
d’événements pour suivre sa progression.
La méthode FileStream.open(), pour sa part, ouvre le fichier
pour des opérations synchrones. Si votre application ouvre le
fichier en utilisant une méthode synchrone, tous les appels de
méthodes suivants qui lisent ou écrivent le fichier seront égale-
ment réalisés de manière synchrone. Dans les exemples
suivants, chaque appel à stream.open(),
stream.writeUTFBytes() et stream.close() seront terminés
avant de procéder au prochain appel de méthode.
var fichier:File = File.documentsDirectory;
fichier = fichier.resolve("ApolloTest/test.txt");
var flux:FileStream = new FileStream()
flux.open(fichier, FileMode.WRITE);
flux.writeUTFBytes("Voici un texte.");
flux.close();
L’avantage d’ouvrir un fichier pour des opérations synchrones
est que vous avez moins de code à écrire pour accomplir une
tâche donnée. L’inconvénient est que l’exécution du reste du
code ActionScript est repoussée si l’opération sur le fichier
prend du temps. Par conséquent, si vous travaillez avec des
fichiers de grande taille ou que vous ouvrez des fichiers qui sont
partagés sur un réseau lent, vous devriez envisager de recourir à
la méthode FileStream.openAsync( ).

76
_Apollo.book Page 77 Vendredi, 8. juin 2007 1:50 13

Lire et écrire des fichiers

Quand vous utilisez la méthode openAsync(), les processus sui-


vant sont gérés de manière asynchrone :
Fermeture du fichier
L’objet FileStream diffuse un événement close lorsque le
fichier est fermé.
Lecture du fichier dans le tampon de lecture
L’objet FileStream diffuse des événements progress à mesu-
re que les données sont lues et un événement complete une
fois que toutes les données sont lues. Néanmoins, une fois
les données lues, l’appel à une méthode de lecture, telle que
readBytes(), est un processus synchrone.
Erreurs d’entrée/sortie
L’objet FileStream diffuse un événement ioError lors-
qu’une erreur est rencontrée. Cela peut arriver pour diverses
raisons, telles que la tentative d’ouvrir un fichier qui n’exis-
te pas, ou d’écrire un fichier vérouillé. Néanmoins, certaines
erreurs, telles qu’essayer de lire un fichier qui n’a pas été
ouvert, lèvent des exceptions (plutôt que de diffuser des évé-
nements ioError) car l’environnement d’exécution Apollo
peut détecter les conditions de l’erreur de manière
instantanée.
Avant d’appeler la méthode FileStream.openAsync(), votre
application devrait mettre en place des gestionnaires d’événe-
ments appropriés.
L’exemple suivant ouvre un fichier en mode de lecture asyn-
chrone. Après l’ouverture du fichier, l’événement complete sera
diffusé (à moins qu’une erreur ne survienne, auquel cas c’est
l’événement ioError qui sera diffusé). La méthode
completeHandler() appelle alors la méthode FileStream. read-
Bytes(), qui démarre la lecture des données du fichier en tant
que tableau d’octets, en mode asynchrone. Quand tous les
octets ont été lus depuis le fichier, l’événement complete est
diffusé :
var fichier:File =
File.documentsDirectory.resolve("ApolloTest/test.txt");

77
_Apollo.book Page 78 Vendredi, 8. juin 2007 1:50 13

Chapitre 4 — Utiliser l’API de système de fichiers

var flux:FileStream = new FileStream();

flux.addEventListener(ProgressEvent.PROGRESS,
progressHandler);
flux.addEventListener(Event.COMPLETE, completeHandler);
flux.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
flux.addEventListener(Event.CLOSE, closeHandler);

flux.openAsync(fichier, FileMode.READ);

var donnees:ByteArray = new ByteArray();


private function progressHandler(evenement:ProgressEvent):void
{
trace(flux.bytesAvailable, "octets lus.");
}
private function completeHandler(evenement: Event):void {
donnees = flux.readBytes(flux.bytesAvailable);
flux.close();
}
private function ioErrorHandler(evenement:IOErrorEvent):void {
trace("Une erreur d'entrée/sortie a été rencontrée.");
}
private function closeHandler(evenement: Event):void {
trace("Fichier fermé.");
}

Modes d’ouverture de fichiers


Les méthodes FileStream.open() et FileStream.openAsync()
acceptent deux paramètres : le paramètre file, qui correspond
au fichier que vous désirez ouvrir, et le paramètre fileMode, qui
est une chaîne de caractères qui définit les capacités de l’objet
FileStream. Les valeurs possibles pour le paramètre fileMode
sont définies en tant que constantes dans la classe FileMode.
Par exemple, le code suivant ouvre le fichier de manière syn-
chrone pour des opérations d’écriture, mais pas pour des
opérations de lecture :
flux.open(fichier, FileMode.WRITE);

78
_Apollo.book Page 79 Vendredi, 8. juin 2007 1:50 13

Lire et écrire des fichiers

Voici les contantes de FileMode et leurs significations :

Constantes de la Définition
classe FileMode
FileMode.APPEND Le fichier est ouvert en mode d’écriture seule et
toutes les données écrites sont ajoutées à la fin du
fichier. À l’ouverture, si le fichier n’existe pas, il
est créé.
FileMode.READ Le fichier est ouvert en mode de lecture seule. Le
fichier doit exister (les fichiers manquants ne sont
pas créés).
FileMode.UPDATE Le fichier est ouvert en mode de lecture/écriture,
et les données peuvent être écrites à n’importe
quel endroit dans le fichier ou ajoutées à la fin. À
l’ouverture, si le fichier n’existe pas, il est créé.
FileMode.WRITE Le fichier est ouvert en mode d’écriture seule. Si
le fichier n’existe pas, il sera créé. Si le fichier
existe, il sera écrasé.

Les méthodes de lecture et d’écriture


La classe FileStream inclut un certain nombre de méthodes de
lecture et d’écriture, chacune correspondant au format des don-
nées lues ou écrites. Par exemple, vous pouvez utiliser les
méthodes readUTFBytes() et writeUTFBytes() afin de lire ou
d’écrire un tableau d’octets, tandis que les méthodes readByte()
et writeByte() lisent ou écrivent un octet à la fois. En tout et
pour tout, il y a 26 méthodes de lecture et d’écriture. Pour plus
de détail sur chacune de ces méthodes, référez-vous à leur des-
cription dans le document ActionScript 3.0 Language Reference,
qui est fournit avec Apollo Alpha 1.
Bien que la lecture et l’écriture de données puissent sembler
banales, vous devriez prendre en compte l’encodage du texte
d’un fichier. Les méthodes readUTFBytes() et writeUTFBytes()
fournissent un moyen de lire et d’écrire du texte encodé en
UTF-8. Les méthodes readMultiByte() et writeMultiByte() vous
permettent de spécifier un encodage de caractère différent pour
les données du fichier. Il y a également d’autres facteurs à
prendre en considération. Par exemple, un fichier UTF peut

79
_Apollo.book Page 80 Vendredi, 8. juin 2007 1:50 13

Chapitre 4 — Utiliser l’API de système de fichiers

commencer par un caractère BOM (byte order mark) UTF, qui


définit l’encodage UTF et l’ordre des octets (ou endianness) des
données.
Pour plus d’informations, voir la section Data formats, and choo-
sing the read and write methods to use du guide Apollo Developer’s
Guide (http://www.adobe.com/go/apollodocs).

Plus d’informations
Pour des exemples de lecture et d’écriture de fichiers, voir les
sections suivantes du chapitre 5 :
• Ecrire un fichier texte depuis une chaîne de caractères
• Lire un fichier texte dans une chaîne de caractères
• Encoder les données d’un Bitmap au format PNG ou JPEG
et l’écrire dans le système de fichiers
• Sérialiser et désérialiser les objets ActionScript dans le sys-
tème de fichiers

80
_Apollo.book Page 81 Vendredi, 8. juin 2007 1:50 13

Chapitre 5

Apollo par l’exemple

Ce chapitre donne des solutions à quelques problèmes rencon-


trés couramment lors de la création d’applications Apollo. Ces
solutions illustrent un certain nombre de concepts décrits dans
les chapitres précédents et fournissent un code MXML fonc-
tionnel que vous pourrez tester en utilisant Flex Builder ou le
SDK Apollo.

Travailler avec le système de fichiers


Apollo vous permet d’accéder au système de fichiers de l’ordi-
nateur de l’utilisateur. Cette section donne quelques solutions
aux problèmes rencontrés lorsque l’on travaille avec le système
de fichiers.
Pour une approche plus conceptuelle des fonctionnalités
d’Apollo relatives au système de fichiers, voir la section Accéder
au système de fichiers.

Ecrire un fichier texte depuis une chaîne de


caractères
Problème
Vous voulez écrire les données d’un objet ActionScript String
dans un fichier texte, de manière synchrone.

81
_Apollo.book Page 82 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Solution
Appelez la méthode appropriée d’un objet FileStream, telle
que writeUTF().

Explications
Cet exemple utilise un objet File appelé fichier qui repré-
sente un fichier test.txt situé dans un sous-répertoire dénommé
Apollo Test, lui-même situé dans le répertoire des documents
de l’utilisateur :
var fichier:File = File.documentsDirectory
fichier = fichier.resolve("Apollo Test/test.txt");
On utilise la classe FileStream pour ouvrir, lire, écrire et fermer
les fichiers. Un paramètre fileMode est passé à la méthode
open() (ou la méthode openAsync(), si vous voulez que l’opéra-
tion se déroule de manière asynchrone) afin de spécifier les
capacités de l’objet FileStream. Dans le cas suivant,
FileMode.WRITE fournit un accès en écriture au fichier :
var flux:FileStream = new FileStream()
flux.open(fichier, FileMode.WRITE);

ASTUCE
Les modes FileMode.APPEND et FileMode.UPDATE don-
nent également un accès en écriture. Cet exemple utilise le
mode FileMode.WRITE parce qu’il crée le fichier si celui-ci
n’existe pas encore et écrase les données existantes, le cas
échéant. Pour plus d’informations, voir la description de la
classe FileMode de la section ActionScript 3.0 Language
Reference de la documentation d’Apollo.

Il existe un grand nombre de méthodes de lecture et d’écriture


dans la classe FileStream. Cet exemple utilise la méthode
writeUTFBytes(), qui écrit une chaîne de caractères dans un
fichier en utilisant un encodage de caractères UTF-8.

82
_Apollo.book Page 83 Vendredi, 8. juin 2007 1:50 13

Travailler avec le système de fichiers

Vous pourriez également utiliser la méthode


writeMultiByte(), qui vous permet de spécifier un encodage de
caractère pour les données. Par exemple, le code suivant écrit
les données avec l’encodage par défaut utilisé par le système
d’exploitation hôte :
flux.writeMultiByte(fichier, File.systemCharset);
Dans cet exemple, la propriété File.systemCharset est passée
en tant que paramètre charSet de la méthode
readMultiByte(). Apollo prend en charge d’autres encodages
de caractères, tels que "shift-jis" et "iso-8859-1". Pour plus
d’informations, voir l’annexe "Supported Character Sets" de la
section ActionScript 3.0 Language Reference de la documentation
d’Apollo.
Notez bien que dans ce code, les caractères de retour chariot
(\r) et de saut de ligne (\n) de la chaîne de caractères sont rem-
placés par le caractère de fin de ligne approprié au système
d’exploitation (qui est disponible via la propriété statique
File.lineEnding) :
chaine = chaine.replace(/[\r|\n]/g, File.lineEnding);
Sous Windows, le caractère de fin de ligne des fichiers texte est
le caractère de retour chariot (\r), suivi du caractère de saut de
ligne (\n). Sous Mac OS, seul le caractère de fin de ligne (\n) est
utilisé.
Voici le code MXML complet d’une application qui écrit un
fichier texte encodé en UTF-8 depuis une chaîne de caractères :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import flash.filesystem.*;
public function enregistre():void {
var fichier:File = File.documentsDirectory;
fichier = fichier.resolve("Apollo Test/
test.txt");

83
_Apollo.book Page 84 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

var flux:FileStream = new FileStream()


flux.open(fichier, FileMode.WRITE);
var chaine:String = saisie.text;
chaine = chaine.replace(/\r/g, File.lineEnding);

flux.writeUTFBytes(chaine);
flux.close();
trace("Le Fichier est écrit.");
}
]]>
</mx:Script>
<mx:TextArea id="saisie" width="100%" height="100%"
text="Saisissez le texte ici."/>
<mx:Button label="Enregistrer" click="enregistre()" />
</mx:ApolloApplication>

Lire un fichier texte dans une chaîne de caractères


Problème
Vous désirez lire les données d’un fichier texte dans un objet
ActionScript String, de manière synchrone.

Solution
Appelez la méthode de lecture appropriée d’un objet
FileStream, telle que readUTF().

Explications
Cet exemple utilise un objet File appelé fichier, qui pointe
vers le fichier test.txt d’un sous-répertoire dénommé Apollo
Test, situé dans le répertoire des documents de l’utilsateur :
var fichier:File = File.documentsDirectory
fichier = fichier.resolve("Apollo Test/test.txt");
On utilise la classe FileStream pour ouvrir, lire, écrire et fermer
les fichiers. Un paramètre fileMode est passé à la méthode
open() (ou la méthode openAsync(), si vous voulez que l’opéra-

84
_Apollo.book Page 85 Vendredi, 8. juin 2007 1:50 13

Travailler avec le système de fichiers

tion se déroule de manière asynchrone) afin de spécifier les


capacités de l’objet FileStream. Dans notre cas, FileMode.READ
fournit un accès en lecture au fichier :
flux = new FileStream();
flux.open(fichier, FileMode.READ);

ASTUCE
Le mode FileMode.UPDATE offre un accès en lecture au
fichier, de même qu’un accès en écriture, ce dont nous ne
voulons pas dans notre exemple. Nous préférerons donc uti-
liser ici le mode FileMode.READ. Pour plus d’informations,
voir la description de la classe FileMode de la section
ActionScript 3.0 Language Reference de la documentation
d’Apollo.

Il existe un grand nombre de méthodes de lecture et d’écriture


dans la classe FileStream. Ce code utilise la méthode
readUTFBytes(), qui lit une chaîne encodée en UTF-8 dans le
tampon de lecture.
Vous pourriez également utiliser la méthode readMultiByte(),
qui vous permet de spécifier un encodage de caractère à utiliser
pour interpréter les données. Par exemple, le code suivant lit les
données en utilisant l’encodage de caractères par défaut du sys-
tème d’exploitation hôte :
chaine = flux.readMultiByte(fichier, File.systemCharset);
Ici, la propriété File.systemCharset est passée en tant que
paramètre charSet de la méthode readMultiByte(). Apollo
prend en charge d’autres encodages de caractères, tels que
« shift-jis« et « iso-8859-1 ». Le choix de l’encodage de carca-
tères dépend du format des données du fichier. Pour plus
d’informations, voir l’annexe Supported Character Sets de la sec-
tion ActionScript 3.0 Language Reference de la documentation
d’Apollo.
Notez bien que le code suivant remplace le caractère de fin de
ligne spécifique au système d’exploitation (qui est disponible

85
_Apollo.book Page 86 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

via la propriété statique File.lineEnding) avec le caractère de


saut de ligne (\n), qui est utilisé dans les champs de texte des
fichiers SWF :
chaine = chaine.replace(File.lineEnding, "\n");
Sous Windows, le caractère de fin de ligne des fichiers texte est
le caractère retour chariot (\r), suivi du caractère de saut de
ligne (\n). Sous Mac OS, seul le caractère de fin de ligne (\n) est
utilisé.
Voici le code MXML complet d’une simple application qui lit
un fichier texte encodé en UTF-8 dans une chaîne de
caractères :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import flash.filesystem.*;
public var flux:FileStream;
public function lireFichier():void {
var fichier:File = File.documentsDirectory;
fichier = fichier.resolve("Apollo Test/test.txt");
flux = new FileStream();
flux.open(fichier, FileMode.READ);
var chaine:String = flux.
readUTFBytes(flux.bytesAvailable);
flux.close();
chaine = chaine.replace(File.lineEnding, "\n");
log.text = chaine;
}
]]>
</mx:Script>
<mx:TextArea id="log" width="100%" height="100%"/>
<mx:Button label="Ouvrir" click="lireFichier()" />
</mx:ApolloApplication>

86
_Apollo.book Page 87 Vendredi, 8. juin 2007 1:50 13

Travailler avec le système de fichiers

Encoder des données Bitmap au format PNG ou


JPEG, et les enregistrer dans le système de fichier
Problème
Vous voulez enregistrer les données bitmap d’une application
Apollo dans un fichier .png ou .jpg qui pourra être ouvert par
d’autres applications.

Solution
Téléchargez la classe JPEGEncoder ou la classe PNGEncoder
depuis la bibliothèque Open Source corelib, puis passez un
objet ActionScript BitmapData à la méthode encode() de la
classe JPEGEncoder ou PNGEncoder. Passez ensuite l’objet
ByteArray retourné par la méthode encode() à la méthode
writeBytes() d’un objet FileStream.

Explications
L’un des avantages d’ActionScript est la possibilité d’écrire des
bibliothèques de classes réutilisables. Sur le site Adobe Labs, le
projet corelib contient des classes pour le hachage MD5, la séria-
lisation JSON, l’analyse syntaxique des chaînes et des dates, et
bien d’autres choses encore.
On trouve dans la bibliothèque corelib des classes pour encoder
en JPEG et en PNG.
Bien que les fichiers Apollo puissent charger et afficher des
images, il n’existe pas de mécanisme interne de conversion
d’images bitmap au format JPEG ou PNG. Les classes
JPEGEncoder et PNGEncoder, publiées sur le site web Adobe
Labs, nous proposent cette fonctionnalité.
1. Téléchargez le fichier corelib.zip depuis la page du projet, sur
le site Google Code :
http://code.google.com/p/as3corelib/
2. Décompressez le fichier.

87
_Apollo.book Page 88 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

3. Copiez le répertoire src/com du fichier ZIP vers le répertoire


de votre projet, afin que qu’un répertoire com soit créé à
l’interieur du répertoire du projet.
Le code suivant charge un fichier JPG dénommé test.jpg dans
un composant Flex Image :
<mx:Image id="img" source="test.jpg" />
L’utilisateur clique sur le bouton
Rendre floue
, qui applique un filtre de flou à l’objet Image (en ajoutant un
nouvel objet BlurFilter au tableau filters de l’objet Image) :
var filtre:BlurFilter = new BlurFilter();
img.filters = [filtre];
Lorsque l’utilisateur clique sur le bouton Enregistrer, l’applica-
tion commence alors le traitement de l’image. Tout d’abord, les
données de l’image sont converties dans un objet BitmapData,
qui est alors passé à la méthode encode() de l’objet
JPEGEncoder :
var bmpData:BitmapData =
new BitmapData(img.width, img.height);
bmpData.draw(img);
var encodeurJPG:JPEGEncoder = new JPEGEncoder();
var octetsJPG:ByteArray = encodeurJPG.encode(bmpData);
Ensuite, le tableau d’octets renvoyé par l’appel à la méthode
encode() est écrit dans un fichier :
var fichier:File = File.desktopDirectory.resolve("test-
flou.jpg");
var flux:FileStream = new FileStream();
flux.open(fichier, FileMode.WRITE);
flux.writeBytes(octetsJPG, 0, octetsJPG.length);
flux.close();
Le code File.desktopDirectory.resolve("test-flou.jpg")
renvoie un objet File qui pointe vers le fichier test-flou.jpg sur le
bureau de l’utilisateur. L’objet FileStream ouvre ce fichier en

88
_Apollo.book Page 89 Vendredi, 8. juin 2007 1:50 13

Travailler avec le système de fichiers

écriture, puis la méthode writeBytes() écrit les données du


tableau d’octets dans ce fichier.
Voici le code MXML complet de cet exemple. Notez que vous
aurez besoin de la classe JPEGEncoder, comme mentionné plus
haut :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/
mxml" layout="vertical">
<mx:Script>
<![CDATA[
import flash.filesystem.*;
import com.adobe.images.JPEGEncoder;
public function flouterImage():void {
var filtre:BlurFilter = new BlurFilter();
img.filters = [filtre];

}
public function enregistrerImage():void {
var bmpData:BitmapData = new
BitmapData(img.width, img.height);
bmpData.draw(img);
var encodeurJPG:JPEGEncoder = new
JPEGEncoder();
var octetsJPG:ByteArray =
encodeurJPG.encode(bmpData);
var fichier:File =
File.desktopDirectory.resolve("test-flou.jpg");
var flux:FileStream = new FileStream();
flux.open(fichier, FileMode.WRITE);
flux.writeBytes(octetsJPG, 0, octetsJPG.length);
flux.close();
}
]]>
</mx:Script>
<mx:Image id="img" source="test.jpg" />
<mx:Button label="Rendre floue" click="flouterImage()" />
<mx:Button label="Enregistrer" click="enregistrerImage()" />
</mx:ApolloApplication>

89
_Apollo.book Page 90 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Sérialiser et désérialiser les objets dans le système


de fichier
Problème
Vous souhaitez enregistrer les données d’un objet ActionScript
d’une application Apollo dans un fichier, puis ouvrir le fichier
pour recontsruire l’objet ActionScript.

Solution
Utilisez les méthodes writeObject() et readObject() de la
classe FileStream.

Explications
Les méthodes The writeObject() et readObject() de la classe
FileStream vous permettent de sérialiser et désérialiser dans un
fichier n’importe quel objet ActionScript. L’objet est sérialisé
dans le système de fichier au format AMF (Action Message
Format).
Voici un exemple de code pour sérialiser et désérialiser une
occurence de la classe Dictionary dans le système de fichier.
Tout d’abord, nous enregistrons le type Dictionary auprès du
lecteur :
registerClassAlias("flash.utils.Dictionary", Dictionary);
L’API registerClassAlias nous assure que le type de la classe
de l’objet est encodé et enregistré avec les données sérialisées. Si
la classe n’était pas enregistrée, l’instance de la classe sérialisée
serait traitée comme un objet de type Object.
Puis, nous créons un fichier qui pointe vers l’emplacement où
l’objet sérialisé sera stocké (dans ce cas, il s’agit d’un fichier
dénommé data.db dans le répertoire de stockage de
l’application) :
fichier_de_donnees = File.appStorageDirectory.resolve("data.db");
Lorsque l’on appuie sur le bouton Sérialiser, le code crée et
remplit un objet Dictionary, puis utilise la méthode
90
_Apollo.book Page 91 Vendredi, 8. juin 2007 1:50 13

Travailler avec le système de fichiers

writeObject de la classe FileStream afin d’écrire l’objet dans le


système de fichier, au format AMF :
private function serialisation(evenement:MouseEvent):void
{
var d:Dictionary = new Dictionary();
d["key_a"] = "valeur_a";
d["key_b"] = "valeur_b";
d["key_c"] = "valeur_c";
d["key_d"] = "valeur_d";
var fs:FileStream = new FileStream();
fs.open(fichier_de_donnees, FileMode.WRITE);
fs.writeObject(d);
fs.close();
}
Lorsque l’on appuie sur le bouton Désérialiser, l’objet
Dictionary sérialisé est lu depuis le système de fichier et on
affiche ses valeurs :
var d:Dictionary;
if(!fichier_de_donnees.exists)
{
champDeSortie.text += "Le fichier de données sérialisées
n'existe pas : " +
fichier_de_donnees.nativePath + "\n";
}
var fs:FileStream = new FileStream();
fs.open(fichier_de_donnees, FileMode.READ);
d = (fs.readObject() as Dictionary);
fs.close();
champDeSortie.text += "Dictionnaire désérialisé\n";
for (var clef:String in d)
{
champDeSortie.text += clef + " : " + d[clef] + "\n";
}
Notez que nous avons tout d’abord vérifié que le fichier séria-
lisé existe bien. Voici le code complet :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"

91
_Apollo.book Page 92 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

layout="absolute"
creationComplete="demarrage()">
<mx:Script>
<![CDATA[
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;
import flash.filesystem.File;
import flash.net.registerClassAlias;
private var fichier_de_donnees:File;
private function demarrage():void
{
registerClassAlias("flash.utils.Dictionary",
Dictionary);
fichier_de_donnees =
File.appStorageDirectory.resolve("data.db");
}

private function serialisation(evenement:MouseEvent):


void
{
var d:Dictionary = new Dictionary();
d["key_a"] = "valeur_a";
d["key_b"] = "valeur_b";
d["key_c"] = "valeur_c";
d["key_d"] = "valeur_d";
var fs:FileStream = new FileStream();
fs.open(fichier_de_donnees, FileMode.WRITE);
fs.writeObject(d);
fs.close();
champDeSortie.text += "Dictionnaire
sérialisé dans : " +
fichier_de_donnees.nativePath + "\n";
}
private function deserialisation(evenement:MouseEvent):
void
{

var d:Dictionary;
if(!fichier_de_donnees.exists)

92
_Apollo.book Page 93 Vendredi, 8. juin 2007 1:50 13

Travailler avec le système de fichiers

{
champDeSortie.text += "Le fichier
de données sérialisées n'existe pas : "
+ fichier_de_donnees.nativePath + "\n";
}
var fs:FileStream = new FileStream();
fs.open(fichier_de_donnees, FileMode.READ);
d = (fs.readObject() as Dictionary);
fs.close();

champDeSortie.text += "Dictionnaire désérialié\n";


for (var clef:String in d)
{
champDeSortie.text += clef + " : " + d[clef] +
"\n";
}

}
]]
</mx:Script>
<mx:TextArea id="champDeSortie" left="10" right="10"
top="10" bottom="62"/>
<mx:Button label="Sérialiser" bottom="10" right="21"
click="serialisation(event)"/>
<mx:Button label="Désérialiser" bottom="10" right="103"
click="deserialisation(event)"/>
</mx:ApolloApplication>
Vous pouvez tester l’action de sérialisation en suivant les étapes
suivantes :
1. Exécutez l’application.
2. Sérialisez les données en appuyant sur le bouton Sérialiser.
3. Redémarrez l’application.
4. Chargez puis désérialisez les données en appuyant sur le
bouton Désérialiser.
Vous devez alors constater que les données sont présentes alors
même que l’application a redémarré.

93
_Apollo.book Page 94 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Naviguer vers un fichier


Problème
Vous voulez utiliser les composants Flex Apollo pour mettre en
place un code permettant de naviguer vers un fichier.

Solution
Utilisez l’un de ces composants Flex pour travailler avec le sys-
tème de fichier :
FileSystemComboBox
FileSystemDataGrid
FileSystemHistoryButton
FileSystemList
FileSystemTree
Tous ces composants offrent la même interface utilisateur à la
fois sous Mac OS et sous Windows.

ASTUCE
La version Apollo Alpha 1 ne prend pas totalement en
charge les boîtes de dialogues natives du système d’exploita-
tion ayant pour but d’enregistrer ou de naviguer vers les
fichiers. La prise en charge totale de ces boîtes de dialogues
sera disponible lors de la version 1.0.

Explications
Cet exemple utilise le composant FileSystemTree, qui vous
permet de naviguer parmis les fichiers de votre ordinateur. En
outre, il y a un composant bouton sur lequel est indiqué
« Infos » et un composant TextArea pour afficher les informa-
tions concernant l’objet sélectionné, voir la figure 5-1.

94
_Apollo.book Page 95 Vendredi, 8. juin 2007 1:50 13

Travailler avec le système de fichiers

Figure 5.1. Exemple de naviguateur de fichier


L’événement doubleClick du composant FileSystemTree et
l’événement click du bouton « Infos » appellent la méthode
donnerDetails() :
<mx:FileSystemTree id="arbre" height="100%" width="100%"
doubleClick="donnerDetails()"/>
<mx:Button label="Infos" click="donnerDetails()" />
La méthode donnerDetails() vérifie si un élément est bien
sélectionné dans le composant FileSystemTree. Si c’est le cas, il
appelle soit la méthode donnerDetailsFichier(), soit la
méthode donnerDetailsRepertoire() :
public function donnerDetails():void {
var noeud:File = arbre.selectedItem as File;
if(noeud != null) {
if(noeud.isDirectory) {
donnerDetailsRepertoire(noeud);
} else {
donnerDetailsFichier(noeud);
}
}
}
La méthode donnerDetailsFichier() et la méthode
donnerDetailsRepertoire() affichent dans le composant
TextArea les détails concernant l’élément sélectionné :

95
_Apollo.book Page 96 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

public function donnerDetailsFichier(file:File):void {


infoTxt.htmlText = "<b>Fichier:</b> " + fichier.name + "\n";
infoTxt.htmlText += "<p><b>Chemin:</b> " + fichier.nativePath
+ "\n";
infoTxt.htmlText += "<p><b>Taille:</b> "
+ fichier.size + "\n";
var typeDuFichier:String =
fichier.url.substr(fichier.url.lastIndexOf("."));
infoTxt.htmlText +=
"<p><b>Type:</b> " + typeDuFichier + "\n";
}
public function donnerDetailsRepertoire(rep:File):void {
infoTxt.htmlText = "<p><b>Répertoire:</b> " +
rep.name + "\n";
infoTxt.htmlText += "<p><b>Chemin:</b> " +
rep.nativePath ;
}
Notez que vous pouvez choisir d’utiliser d’autres composants de
fichier Flex tels que :
FileSystemComboBox
FileSystemDataGrid
FileSystemHistoryButton
FileSystemList
...ou une combinaison de plusieurs d’entre eux, selon vos
besoins.
Voici le code MXML complet de cet exemple :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
applicationComplete="init()">
<mx:Script>
<![CDATA[
import flash.filesystem.File;
public function init():void {
arbre.directory = File.documentsDirectory;
}

96
_Apollo.book Page 97 Vendredi, 8. juin 2007 1:50 13

Travailler avec le système de fichiers

public function donnerDetails():void {


var noeud:File = arbre.selectedItem as File;
if(noeud != null) {
if(noeud.isDirectory) {
donnerDetailsRepertoire(noeud);
} else {
donnerDetailsFichier(noeud);
}
}
}
public function donnerDetailsFichier(fichier:File):void {
infoTxt.htmlText =
"<b>Fichier:</b> " + fichier.name + "\n";
infoTxt.htmlText += "<p><b>Chemin:</b> "
+ fichier.nativePath + "\n";
infoTxt.htmlText += "<p><b>Taille:</b> "
+ fichier.size + "\n";
var typeDuFichier:String =
fichier.url.substr(fichier.url.lastIndexOf("."));
infoTxt.htmlText +=
"<p><b>Type:</b> " +
typeDuFichier + "\n";
}
public function donnerDetailsRepertoire(rep:File):void {
infoTxt.htmlText =
"<p><b>Répertoire:</b> " + rep.name + "\n";
infoTxt.htmlText +=
"<p><b>Chemin:</b> " + rep.nativePath ;
}
]]>
</mx:Script>
<mx:FileSystemTree id="arbre" height="100%" width="100%"
doubleClick="donnerDetails()"/>
<mx:Button label="Infos" click="donnerDetails()" />
<mx:TextArea id="infoTxt" width="100%" height="200"/>
</mx:ApolloApplication>

97
_Apollo.book Page 98 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Obtenir la liste du contenu d’un répertoire


Problème
Vous désirez obtenir un tableau ActionScript qui représente la
liste du contenu d’un répertoire.

Solution
Utilisez la méthode listDirectory() d’un objet File qui
pointe vers un répertoire. Cette méthode renvoie un tableau
d’objets File correspondants aux fichiers de ce répertoire.

Explications
Vous pouvez utiliser les propriétés statiques de la classe File et
la méthode resolve() afin d’obtenir un objet File qui pointe
vers le répertoire dont vous voulez lister le contenu (Pour plus
d’informations, voir la section Accéder aux fichiers et aux réper-
toires du chapitre 4). Par exemple, le code suivant crée un objet
File dénommé repertoire afin de pointer vers le sous-réper-
toire Apollo Test du répertoire des documents de l’utilisateur :
var repertoire:File = File.documentsDirectory.resolve("Apollo
Test");
Vous pouvez dès lors utiliser la méthode listDirectory() pour
obtenir la liste du contenu du répertoire :
var listeDesFichiers:Array = repertoire.listDirectory();
Avant d’appeler la méthode listDirectory(), vous devriez
peut être vérifier que le répertoire existe et que l’objet File
pointe bien vers un répertoire et non un fichier. Vous pouvez
vérifier les propriétés exists et isDirectory de l’objet
directory, comme le montre le code suivant :
if (repertoire.exists && repertoire.isDirectory) {
var listeDesFichiers = repertoire.listDirectory();
}

98
_Apollo.book Page 99 Vendredi, 8. juin 2007 1:50 13

Travailler avec le système de fichiers

Vous pouvez également utiliser la méthode


listDirectoryAsync() si vous voulez que le reste de votre code
ActionScript continue à s’exécuter pendant que la liste du
répertoire est créée. L’objet File (qui représente le répertoire)
diffusera un événement directoryListing lorsque la liste sera
prête. L’événement directoryListing connaît une propriété
files qui est un tableau d’objets File correspondant aux
fichiers du répertoire. Le code suivant montre comment
obtenir la liste du contenu d’un répertoire de manière
asynchrone :
var repertoire:File =
File.documentsDirectory.resolve("Apollo Test");
if(repertoire.isDirectory && repertoire.exists) {
repertoire.listDirectoryAsync();
repertoire.addEventListener(FileListEvent.DIRECTORY_LISTING,
gestionnaireListeRep);
}
var listeDesFichiers:Array;
private function
gestionnaireListeRep(evenement:FileListEvent):void {
listeDesFichiers = evenement.files;
}
La figure 5-2 montre une application qui calcule la taille de tous
les fichiers situés à la racine du répertoire sélectionné dans le
composant Flex FileSystemTree.

99
_Apollo.book Page 100 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Figure 5.2. La liste d’un répertoire


Voici le code MXML complet de cette application :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx= "http://www.adobe.com/2006/mxml"
layout="vertical"
applicationComplete="init()"
title="Exemple de liste du contenu d'un répertoire">
<mx:Script>
<![CDATA[
import flash.filesystem.File;
public function init():void {
arbre.directory = File.documentsDirectory;
}
public function donnerDetails():void {
var noeud:File = arbre.selectedItem as File;
if(noeud != null && noeud.isDirectory) {
calculeTailleRacine(noeud);
100
_Apollo.book Page 101 Vendredi, 8. juin 2007 1:50 13

Travailler avec du HTML

}
}
public function calculeTailleRacine(rep:File):void {
var taille:Number = 0;
var fichiers:Array = rep.listDirectory();
for (var i:uint; i < fichiers.length; i++) {
if (!fichiers[i].isDirectory) {
taille += fichiers[i].size;
}
}
infoTxt.htmlText =
"<p><b>Répertoire:</b> "
+ rep.name + "\n";
infoTxt.htmlText +=
"<p><b>Chemin:</b> "
+ rep.nativePath + "\n" ;
infoTxt.htmlText +=
"<p><b>Taille totale
des fichiers à la racine :</b> "
+ taille + " octets";
}
]]>
</mx:Script>
<mx:FileSystemTree id="arbre" height="100%"
width="100%"/>
<mx:Button label="Calculer la taille des fichiers à la racine"
click= "donnerDetails()" />
<mx:TextArea id="infoTxt" width="100%" height="100"/>
</mx:ApolloApplication>

Travailler avec du HTML


Le composant Flex HTML et la classe the HTMLControl ActionS-
cript 3.0 fournissent à l’environnement d’exécution Apollo des
fonctionnalités évoluées vis-à-vis du HTML. Cette section en
donne quelques exemples simples. Pour plus d’informations,
voir le chapitre 3.

101
_Apollo.book Page 102 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Savoir quand une page est totalement chargée


Problème
Vous voulez accéder au contenu d’une page HTML une fois que
celle-ci est complètement chargée.

Solution
Ecoutez l’événement complete diffusé par le composant HTML
après qu’une page web ait été totalement chargée puis affichée.
Attendez la réception de cet événement avant d’essayer de récu-
pérer ou de modifier le contenu HTML.

Explications
Le code suivant montre comment une application peut écouter
puis répondre à la réception de l’événement complete :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
public function chargementFinit():void
{
var titre:String = html.javascriptDocument.title;
trace("La page : " + title + " est chargée.");
}
]]>
</mx:Script>
<mx:HTML id="html" width="100%" height="100%"
location="http://www.oreilly.com"
complete="chargementFinit()" />
</mx:ApolloApplication>
A la réception de l’événement complete, la méthode
onHtmlComplete() s’exécute. A ce moment là, tout le HTML a

102
_Apollo.book Page 103 Vendredi, 8. juin 2007 1:50 13

Travailler avec du HTML

bien été chargé et affiché, la méthode onHtmlComplete() peut


donc obtenir et afficher le titre de la page chargée en utilisant la
propriété javascriptDocument.

Modifier l’apparence du composant HTML


Problème
Vous voulez appliquer des effets visuels à une page HTML après
que celle-ci ait été chargée.

Solution
Utilisez les filtres ou les transformations géométriques et modi-
fiez les propriétés relatives à l’apparence héritées de la classe
DisplayObject.

Explications
Comme le composant Flex HTML est un display object (élément
faisant partie de la liste des objets que le lecteur Flash doit affi-
cher), vous pouvez utiliser n’importe quelle des propriétés de la
classe ActionScript DisplayObject avec ce composant (ou son
objet HTMLControl sous-jacent). Parmi ces propriétés, on peut
citer les filtres, la rotation ou encore la transparence alpha.
Par exemple, vous pouvez appliquer un filtre
ColorMatrixFilter à un composant HTML et utiliser des com-
posants HSlider pour ajuster les niveaux de rouge, de vert, de
bleu et de transparence alpha que ce filtre contrôle, comme le
montre la figure 5-3.

103
_Apollo.book Page 104 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Figure 5.3. Le composant HSlider en action


Quand la valeur de l’un des curseurs change, la méthode
changeFilter() est appellée et applique un filtre
ColorMatrixFilter basé sur les valeurs de ces curseurs :
public function appliqueFiltreCM():void {
var matrice:Array = new Array();
matrice = matrice.concat([curseurRouge.value, 0, 0, 0, 0]); // rouge
matrice = matrice.concat([0, curseurVert.value, 0, 0, 0]); // vert
matrice = matrice.concat([0, 0, curseurBleu.value, 0, 0]); // bleu
matrice = matrice.concat([0, 0, 0, curseurAlpha.value, 0]); // alpha
var filtreCM:ColorMatrixFilter = new ColorMatrixFilter(matrice);
html.filters = [filtreCM];
}
L’exemple suivant montre le code MXML complet et le code
source ActionScript de l’application :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" alpha="1">
<mx:Script>
<![CDATA[

104
_Apollo.book Page 105 Vendredi, 8. juin 2007 1:50 13

Utiliser l’API de fenêtrage

public function appliqueFiltreCM():void {


var matrice:Array = new Array();
matrice = matrice.concat([curseurRouge.value, 0, 0, 0, 0]); // r
matrice = matrice.concat([0, curseurVert.value, 0, 0, 0]); // v
matrice = matrice.concat([0, 0, curseurBleu.value, 0, 0]); // b
matrice = matrice.concat([0, 0, 0, curseurAlpha.value, 0]); // a
var filtreCM:ColorMatrixFilter = new ColorMatrixFilter(matrice);
html.filters = [filtreCM];
}
]]>
</mx:Script>
<mx:HTML id="html" location="http://www.oreilly.com"
width="100%" height="100%" />
<mx:HSlider value="1" width="100%" id="curseurRouge"
minimum="0" maximum="1" labels="['0%', '100%']"
change="appliqueFiltreCM()" />
<mx:HSlider value="1" width="100%" id="curseurVert"
minimum="0" maximum="1" labels=
"['0%', '100%']" change="appliqueFiltreCM()" />
<mx:HSlider value="1" width="100%" id="cuseurBleu"
minimum="0" maximum="1" labels=
"['0%', '100%']" change="appliqueFiltreCM()" />
<mx:HSlider value="1" width="100%" id="curseurAlpha"
minimum="0" maximum="1" labels="['0%', '100%']"
change="appliqueFiltreCM()" />
</mx:ApolloApplication>

Utiliser l’API de fenêtrage


L’API de fenêtrage d’Apollo vous permet de créer des applica-
tion qui utilisent des chromes personnalisés et d’appliquer une
transparence au fond de l’application.
Vous pouvez également utiliser le chrome système (figure 5-4),
l’interface standard des fenêtres utilisés par Mac OS et
Windows.

105
_Apollo.book Page 106 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Figure 5.4. Les chromes système de Mac OS (en haut)


et Windows (en bas)
Vous pouvez également définir votre propre chrome (figure 5-
5), qui peut appliquer une transparence partielle au fond de
votre application.

106
_Apollo.book Page 107 Vendredi, 8. juin 2007 1:50 13

Utiliser l’API de fenêtrage

Figure 5.5. Chrome personnalisé

NOTE
Dans la version Alpha 1 d’Apollo, la gestion de fenêtres sys-
tème multiples n’est que partiellement prise en charge.

La section suivante donne des exemples qui montrent le fonc-


tionnement de l’API de fenêtrage.

Rendre une fenêtre transparente


Problème
Vous désirez que votre application ait un fond partiellement
transparent.

Solution
Dans le fichier descriptif de l’application, donnez la valeur none
au paramètre systemChrome et la valeur true au paramètre
transparent. D’autre part, vous devez affecter un nombre com-
pris entre 0 et 1 à la propriété alpha du composant à la racine
de votre application.

107
_Apollo.book Page 108 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Explications
Le fichier descriptif de l’application (également connu sous le
nom de fichier application.xml) contient des paramètres pour
définir le chrome et la transparence de la fenêtre principale
d’une application :
systemChrome
Vous pouvez lui donner la valeur standard pour que l’appli-
cation utilise le chrome système, ou none ou définir votre
propre chrome de fenêtre.
transparent
Si vous avez donné la valeur none au paramètre
systemChrome, vous pouvez donner la valeur true au para-
mètre transparent, ce qui vous permettra d’appliquer une
transparence partielle au fond de votre fenêtre d’applica-
tion. Il faudra alors donner une valeur à la propriété alpha
du composant à la racine de votre code MXML.
Le fichier descriptif de l’application définit les paramètres d’une
application.
Définissez les valeurs des attributs systemChrome et
transparent de la propriété rootContent du fichier applica-
tion.xml (le fichier descriptif de l’application) comme suit :
<?xml version="1.0" encoding="UTF-8"?>
<application
xmlns="http://ns.adobe.com/apollo/application/1.0.M3"
appId="com.oreilly.apollo.examples.SampleTransparent"
version="1.0">
<properties>
<name>Exemple d'application transparente</name>
<publisher>Supers Applis Apollo SA</publisher>
<description>Application de test</description>
<copyright>(c)2007</copyright>
</properties>
<rootContent systemChrome="none" transparent="true"
visible="true">main.swf</rootContent>
</application>

108
_Apollo.book Page 109 Vendredi, 8. juin 2007 1:50 13

Utiliser l’API de fenêtrage

Dès lors, vous pouvez donnez une valeur de transparence dans


la balise racine ApolloApplication de votre application, en
donnant pour valeur à la propriété alpha un nombre compris
entre 0 et 1, par exemple 0.5 pour une transparence à 50% :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
title="Test de transparence"
alpha="0.5">
<mx:TextArea
text="Notez la transparence."
textAlign="center"
width="100%"
height="100%"/>
</mx:ApolloApplication>

Utiliser vos propres éléments de chrome de fenêtre


Problème
Vous voulez améliorer l’interface utilisateur de votre applica-
tion grâce des boutons personnalisés pour minimiser,
maximiser, restaurer et fermer la fenêtre de l’application.

Solution
Dans le fichier descriptif de votre application, donnez la valeur
none à l’attribut systemChrome et la valeur true à l’attribut
transparent. Créez alors vos propres boutons ou autres compo-
sants d’interface qui appellent les méthodes minimize(),
maximize(), restore() et close() de l’objet window.

Explications
Par défaut, l’attribut systemChrome d’une nouvelle application
Apollo a pour valeur standard. Cela a pour effet d’afficher le
jeu standard d’éléments de chrome de fenêtre, tels qu’une barre
de titre, des boutons pour minimiser, maximiser et fermer la
109
_Apollo.book Page 110 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

fenêtre du système d’exploitation sur lequel votre application


est exécutée.
Si vous voulez afficher votre propre jeu d’éléments de chrome
de fenêtre, vous devrez d’abord donner la valeur none à
l’attribut systemChrome dans le fichier descriptif de l’applica-
tion. En outre, si vous voulez que votre application dispose
d’un fond partiellement transparent, donnez la valeur true à
l’attribut transparent, puis donnez une valeur comprise entre
0 et 1 à la propriété alpha du composant racine de votre code
MXML. Pour plus de détails sur la manière de modifier ce para-
mètre, voir la section Rendre une fenêtre transparente.
Lorsque vous disposez l’interface de votre application, assurez-
vous que les conteneurs et autres éléments interface s’adaptent
correctement à la taille de la fenêtre de votre application quand
celle-ci change.
Vous devrez ensuite créer les éléments d’interface qui déclen-
chent la minimisation, la maximisation, et la fermeture de la
fenêtre. La plupart du temps, ces éléments seront des boutons
(comme dans l’exemple suivant qui utilise trois composants
boutons Flex).
Pour minimiser la fenêtre, l’application devra appeler la
méthode NativeWindow.minimize(). La plupart du temps, le
système d’exploitation gère la tâche consistant à restaurer la
fenêtre à sa taille précédente quand l’utilisateur clique sur un
petit bouton ou une icône représentant l’application mini-
misée. Néanmoins, si vous voulez que la fenêtre soit restaurée
en réponse à un autre événement, tel que la réception d’une
requête depuis un serveur, l’application devra appeler elle
même la méthode NativeWindow.restore().
Pour maximiser la fenêtre, l’application peut appeler la
méthode NativeWindow.maximize(). La méthode
NativeWindow.restore() peut également être utilisée pour ren-
voyer une fenêtre maximisée à sa taille et à sa position
précédentes.

110
_Apollo.book Page 111 Vendredi, 8. juin 2007 1:50 13

Utiliser l’API de fenêtrage

Enfin, l’appel à la méthode NativeWindow.close() démarre le


processus de fermeture de la fenêtre et arrête l’application.
L’exemple suivant affiche trois boutons en haut à droite de la
fenêtre pour minimiser, maximiser et fermer l’application. Ces
boutons sont très simples puisqu’ils utilisent des caractères à la
place des icônes. Pour un jeu de bouton plus séduisant, il fau-
drait utiliser des icônes. L’exemple utilise également des
déclarations de styles CSS style afin de donner aux éléments de
l’interface une allure de petite application de bureau :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()"
layout="vertical" verticalGap="0">
<mx:Style>
Application {
backgroundColor:#669977;
paddingLeft: 2;
paddingRight: 2;
paddingTop: 3;
paddingBottom: 2;
borderStyle: outset;
}
.barreDeTitre {
backgroundColor: #006633;
fontFamily: Georgia,"Times New Roman",Times,serif;
fontSize: 12;
fontWeight: bold;
color: #FFFFFF;
paddingLeft: 3;
paddingRight: 3;
paddingTop: 3;
}
.chromeBtn {
fontFamily: Verdana,Arial,Helvetica,sans;
fontSize: 10;
}
.contenu {
backgroundColor: #FFFFFF;

111
_Apollo.book Page 112 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

backgroundAlpha:0.7;
}
</mx:Style>
<mx:Script>
<![CDATA[
public var estMaximise:Boolean = false;
private function minimiser(evt:MouseEvent):void
{
stage.window.minimize();
}
private function maximiser(evt:MouseEvent):void
{
if (this.isMaximized)
{
stage.window.restore();
this.estMaximise = false;
}
else
{
stage.window.maximize();
this.estMaximise = true;
}
}
private function fermer(evt:MouseEvent):void
{
stage.window.close();
}
]]>
</mx:Script>
<mx:HBox id="barreDeTitre" width="100%"
horizontalGap="1" styleName="barreDeTitre">
<mx:Label id="TexteTitre" width="100%"
text="Exemple de chrome de fenêtre personnalisé" />
<mx:Button id="minimiserBtn" label="_"
width="20" height="16"
styleName="chromeBtn"
click="minimiser(event)" />
<mx:Button id="maximiserBtn" label='{"\u25A2"}'
width="20" height="16"

112
_Apollo.book Page 113 Vendredi, 8. juin 2007 1:50 13

Utiliser l’API de fenêtrage

styleName="chromeBtn"
click="maximiser(event)" />
<mx:Button id="fermerBtn" label="X"
width="20" height="16"
styleName="chromeBtn"
click="fermer(event)" />
</mx:HBox>
<mx:VBox id="contenu" styleName="contenu"
width="100%" height="100%" />
</mx:Application>

Déplacer et redimensionner une fenêtre qui utilise


un chrome personnalisé
Problème
Votre fenêtre n’utilise pas les éléments de chrome du système
d’exploitation, mais vous voulez faire en sorte que la fenêtre
puisse être déplacée et redimensionnée.

Solution
Ecoutez les événements mouseDown qui surviennent à des empla-
cements spécifiques de la fenêtre, puis appelez la méthode
NativeWindow.startMove() ou la méthode Window.resize(),
selon le cas.

Explications
Quand l’attribut systemChrome a pour valeur none dans le
fichier descriptif de l’application, la fenêtre de celle-ci ne
prendra pas en charge le déplacement ni le redimensionement.
La plupart du temps, les processus de déplacement et de redi-
mensionement commencent pour l’utilisateur par le fait de
cliquer sur un bouton de la souris. Votre application peut
écouter l’événement mouseDown pour savoir quand le bouton de
la souris a été cliqué puis vérifier l’emplacement du pointeur
pour décider si l’utilisateur désire déplacer ou redimensionner
la fenêtre.
113
_Apollo.book Page 114 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Dans le code suivant, le fait de cliquer sur la barre de titre


démare le processus de déplacement, alors qu’un clic sur les
bordures extérieures de la fenêtre démarre le processus de
redimensionnement.
Cet exemple limite la zone utilisée pour le déclenchement d’un
déplacement en écoutant uniquement les événements
mouseDown du conteneur barreDeTitre, comme ceci :
this.barreDeTitre.addEventListener(MouseEvent.MOUSE_DOWN,
cliqueSurBarreDeTitre);
La méthode onMouseDownInTitleBar() appelle la méthode
NativeWindow.startMove() pour commencer le processus de
déplacement de la fenêtre en fonction du pointeur de la souris,
et ce tant que l’utilisateur conserve le bouton de la souris
appuyé. Quand il relâche le bouton de la souris, la fenêtre
arrête son déplacement.
Votre application doit uniquement démarrer le processus de
déplacement. C’est l’environement d’exécution qui gère le
mouvement de la fenêtre et l’arrête lorsque le bouton de la
souris est relâché.
Pour déclencher le redimensionnement, l’application écoute
l’événement mouseDown n’importe où dans la fenêtre princi-
pale, comme ceci :
this.addEventListener(MouseEvent.MOUSE_DOWN, cliqueSurFenetre);
La méthode onMouseDownInWindow() cherche alors à savoir si le
pointeur de la souris se situe sous la barre de titre et dans
l’espace de 20 pixels au bord extérieur de la fenêtre. Si c’est le
cas, elle détermine quelle est la direction du redimensionne-
ment et appelle la méthode NativeWindow.resize() de
manière appropriée.
Tout comme pour le déplacement, votre application doit uni-
quement démarrer le processus de redimensionnement. C’est
l’environnement d’exécution qui se charge de modifier la taille
de la fenêtre et arrête lorsque le bouton de la souris est relâché.

114
_Apollo.book Page 115 Vendredi, 8. juin 2007 1:50 13

Utiliser l’API de fenêtrage

Voici le code source complet de cet exemple. Les styles et le


bouton de fermeture sont les mêmes que pour l’exemple
montré dans la section précédente Utiliser vos propres élé-
ments de chrome de fenêtre :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()"
layout="vertical"
verticalGap="0">
<mx:Style>
Application {
backgroundColor:#669977;
paddingLeft: 2;
paddingRight: 2;
paddingTop: 3;
paddingBottom: 2;
borderStyle: outset;
}
.barreDeTitre {
backgroundColor: #006633;
fontFamily: Georgia,"Times New Roman",Times,serif;
fontSize: 12;
fontWeight: bold;
color: #FFFFFF;
paddingLeft: 3;
paddingRight: 3;
paddingTop: 3;
}
.chromeBtn {
fontFamily: Verdana,Arial,Helvetica,sans;
fontSize: 10;
}
.contenu {
backgroundColor: #FFFFFF;
backgroundAlpha:0.7;
}
</mx:Style>
<mx:Script>

115
_Apollo.book Page 116 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

<![CDATA[
import mx.events.ResizeEvent;
public var estMaximise:Boolean = false;
public static var TAILLE_DE_POIGNEE_DE_REDIM:int = 20;
private function initApp():void {
// L'utilisateur peut uniquement déplacer
// la fenêtre en appuyant
// la souris sur la barre de titre
this.barreDeTitre.addEventListener(MouseEvent.MOUSE_DOWN,
cliqueSurBarreDeTitre);
// L'utilisateur peut uniquement redimensionner en cliquant
// puis en déplaçant les marges externes de la fenêtre
// sous la barre de titre
this.addEventListener(MouseEvent.MOUSE_DOWN,
cliqueSurFenetre);
}
private function
cliqueSurBarreDeTitre(evt:MouseEvent):void {
stage.window.startMove();
}
private function cliqueSurFenetre(evt:MouseEvent):void {
var xPos:Number = evt.stageX;
var yPos:Number = evt.stageY;
var direction:String = NativeWindowResize.NONE;
if (!this.estMaximise && yPos > this.barreDeTitre.height) {
if (yPos > this.height - TAILLE_DE_POIGNEE_DE_REDIM) {
// Redim. vers le bas
if (xPos > this.width - TAILLE_DE_POIGNEE_DE_REDIM) {
// Redim. vers la droite
direction =
NativeWindowResize.BOTTOM_RIGHT;
}
else if (xPos < TAILLE_DE_POIGNEE_DE_REDIM) {
// Redim. vers la gauche
direction = NativeWindowResize.BOTTOM_LEFT;
}
else {
direction = WindowResize.BOTTOM;
}
}
116
_Apollo.book Page 117 Vendredi, 8. juin 2007 1:50 13

Utiliser l’API de fenêtrage

else {
// Pas de redim. vertical
if (xPos > this.width - TAILLE_DE_POIGNEE_DE_REDIM) {
// Redim uniquement à droite
direction = NativeWindowResize.RIGHT;
}
else if (xPos < TAILLE_DE_POIGNEE_DE_REDIM) {
// Redim. uniquement à gauche
direction = NativeWindowResize.LEFT;
}
}
if (direction != NativeWindowResize.NONE) {
stage.window.startResize(direction);
}
}
}
private function fermer(evt:MouseEvent):void {
stage.window.close();
}
]]>
</mx:Script>
<mx:HBox id="barreDeTitre" width="100%"
horizontalGap="1" styleName="barreDeTitre">
<mx:Label id="titreFenetre" width="100%"
text="Exemple de déplacement et de redimensionnement" />
<mx:Button id="btFermer" label="X"
width="20" height="16"
styleName="chromeBtn"
click="fermer(event)" />
</mx:HBox>
<mx:VBox id="contenu" styleName="contenu"
width="100%" height="100%" />
</mx:Application>
Bien sûr, il serait opportun de modifier la forme du pointeur de
la souris lorsque celui-ci se trouve au dessus d’une zone qui
permet le redimensionnement, mais nous laissons au lecteur le
soin d’accomplir ce travail.

117
_Apollo.book Page 118 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

Créer l’ombre portée d’une fenêtre


Problème
Vous voulez que la fenêtre principale de votre application des-
sine une ombre sur le bureau et sur les fenêtres des autres
applications.

Solution
Dans le fichier descriptif de l’application, donnez la valeur none
au paramètre systemChrome et la valeur true au paramètre
transparent, puis définissez les styles dropShadowEnabled et
dropShadowColor du composant ApolloApplication.

Explications
Une application Apollo paramétrée pour utiliser un chrome
personnalisé peut dessiner une ombre sur les bordures de la
fenêtre principale, comme le montre la ffigure 5-6.

Figure 5.6. Ombre portée


Tout d’abord, assurez-vous que les paramètres de votre applica-
tion systemChrome et transparent ont bien pour valeurs
respectives none et true. Dans Flex Builder, vous pouvez le faire
lors de la dernière étape de la boîte de dialogue New Apollo

118
_Apollo.book Page 119 Vendredi, 8. juin 2007 1:50 13

Utiliser l’API de fenêtrage

Project. Si vous utilisez le SDK Apollo, modifiez les valeurs des


attributs systemChrome et transparent de la propriété
rootContent du fichier descriptif de votre application comme
suit :
<application
xmlns="http://ns.adobe.com/apollo/application/1.0.M3"
appId="com.oreilly.apollo.examples.DropShadow"
version="1.0">
<properties>
<name>ExempleOmbreOReilly</name>
<publisher>Supers Applis Apollo SA</publisher>
</properties>
<rootContent systemChrome="none" transparent="true"
visible="true">
DropShadowTest.swf
</rootContent>
</application>
Pour plus d’informations, voir la section précédente Rendre
une fenêtre transparente.
Puis, dans la balise racine ApolloApplication du code MXML,
déclarez les valeurs des styles dropShadowEnabled,
dropShadowColor, shadowDirection, et shadowDistance :
dropShadowColor="0xFF00FF" dropShadowEnabled="true"
shadowDirection="right"
shadowDistance="10"
Ceux-ci définissent les paramètres de l’ombre.
Voici le code MXML complet de cet exemple :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
dropShadowColor="0xFF00FF" dropShadowEnabled="true"
shadowDirection="right" shadowDistance="10"
backgroundColor="0xFFFFFF"
height="200" width="300" title="Exemple d'ombre de fenêtre">
<mx:Text text="Notez l'ombre portée."

119
_Apollo.book Page 120 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

verticalCenter="0" horizontalCenter="0"/>
</mx:ApolloApplication>

Enregistrer et restaurer la taille et la position


d’une fenêtre
Problème
Vous désirez enregistrer la position et la taille d’une fenêtre
dans un fichier de préférences, puis utiliser les dernières valeurs
enregistrées pour définir la position et la taille de l’application à
lors de son prochain démarrage.

Solution
Enregistrez la propriété bounds de l’objet NativeWindow dans un
fichier et lisez cette propriété dans le fichier au démarrage de
l’application.

Explications
L’API de fenêtrage d’Apollo contient des méthodes permettant
de redimensionner et de repositionner les fenêtres.
Cet exemple stocke les coordonnées de la fenêtre dans un
fichier de préférences chaque fois que l’utilisateur repositionne
ou redimensionne la fenêtre.
L’objet NativeWindow d’un display object donné s’obtient au
travers de la propriété window de la propriété stage de ce dis-
play object :
stage.window
Quand l’utilisateur redimensionne ou reposistionne la fenêtre,
la fenêtre diffuse un événement move ou resize. La méthode
init() de notre exemple, qui est exécutée lors de l’affichage de
l’application, définit des gestionnaires d’événements de ces
événements :
stage.window.addEventListener(NativeWindowBoundsEvent.MOVE,
relacheSouris);

120
_Apollo.book Page 121 Vendredi, 8. juin 2007 1:50 13

Utiliser l’API de fenêtrage

stage.window.addEventListener(NativeWindowBoundsEvent.RESIZE,
relacheSouris);
La méthode setMouseUpHandler() écoute l’événement
mouseUp :
public function relacheSouris(evt:NativeWindowBoundsEvent):void {
this.addEventListener(MouseEvent.MOUSE_UP, enregistre);
}
L’objet NativeWindow connaît une propriété bounds qui définit
les coordonnées et la taille de la fenêtre :
stage.window.bounds
La propriété bounds est un objet Rectangle qui définit les
limites de la fenêtre. La classe Rectangle est définit au sein du
paquetage flash.geom.
Lorsque l’utilisateur relâche la souris (et que la fenêtre est redi-
mensionnée ou repositionnée), la méthode saveData() écrit la
propriété bounds d’un objet NativeWindow dans un fichier,
défini par l’objet File dénommé prefs :
private function enregistre(evt:MouseEvent):void {
stage.window.removeEventListener(MouseEvent.MOUSE_UP, enregistre);
var flux:FileStream = new FileStream();
flux.open(prefs, FileMode.WRITE);
flux.writeObject(stage.window.bounds);
flux.close();
}
La méthode init() de notre exemple vérifie également que le
fichier de préférence existe bel et bien. Si c’est le cas, c’est que
l’application a déjà enregistré la propriété bounds de l’objet
NativeWindow dans un fichier. Elle lit alors ce fichier et ajuste la
propriété bounds de l’objet NativeWindow afin de la faire corres-
pondre aux valeurs définies dans le fichier :
if (prefs.exists) {
var flux:FileStream = new FileStream();
flux.open(prefs, FileMode.READ);
var limites:Rectangle = fluxreadObject();
stage.window.bounds = limites;

121
_Apollo.book Page 122 Vendredi, 8. juin 2007 1:50 13

Chapitre 5 — Apollo par l’exemple

flux.close();
}
Pour plus d’informations sur la manière dont on utilise les
objets File et FileStream dans cette application afin de lire et
écrire un objet dans un fichier, voir la section précédente Séria-
liser et désérialiser les objets ActionScript dans le système de
fichier.
Voici le code MXML complet de cette application :
<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import flash.filesystem.*;
public function enregistre():void {
var fichier:File = File.documentsDirectory;
fichier = fichier.resolve("Apollo Test/
test.txt");
var flux:FileStream = new FileStream()
flux.open(fichier, FileMode.WRITE);
var chaine:String = saisie.text;
chaine = chaine.replace(/\r/g, File.lineEnding);
flux.writeUTFBytes(chaine);
flux.close();
trace("Le Fichier est écrit.");
}
]]>
</mx:Script>
<mx:TextArea id="saisie" width="100%" height="100%"
text="Saisissez le texte ici."/>
<mx:Button label="Enregistrer" click="enregistre()" />
</mx:ApolloApplication>

122
_Apollo.book Page 123 Vendredi, 8. juin 2007 1:50 13

Annexe A

Paquetages et classes d’Apollo

Le tableau A-1 liste les paquetages et les classes ActionScript de


la version Alpha 1 d’Apollo.

Tableau A-1. Les classes ActionScript d’Apollo


Paquetage Classes
flash.display flash.display.NativeWindow
flash.display.NativeWindowDisplayState
flash.display.NativeWindowIcon
flash.display.NativeWindowInitOptions
flash.display.NativeWindowResize
flash.display.NativeWindowSystemChrome
flash.events flash.events.FileListEvent
flash.events.InvokeEvent
flash.eventsHTMLUncaughtJavaScrip-
tExceptionEvent
flash.events.NativeWindowBoundsEvent
flash.events.NativeWindowDisplayStateEvent
flash.events.NativeWindowErrorEvent
flash.filesystem flash.filesystem.File
flash.filesystem.FileMode
flash.filesystem.FileStream
flash.html flash.html.HTMLControl
flash.html.JavaScriptFunction
flash.html.script.JavaScriptObject
flash.system flash.system.Shell
flash.system.NativeWindowCapabilities
flash.system.Updater

123
_Apollo.book Page 124 Vendredi, 8. juin 2007 1:50 13

Annexe A — Paquetages et classes d’Apollo

Le tableau A-2 fait la liste des classes de composants Flex


d’Apollo.

Tableau A-2. Les classes de composants Flex d’Apollo


Package Classes
mx.core mx.core.ApolloApplication
mx.controls mx.controls.FileSystemComboBox
mx.controls.FileSystemDataGrid
mx.controls.FileSystemEnumerationMode
mx.controls.FileSystemHistoryButton
mx.controls.FileSystemList
mx.controls.FileSystemSizeDisplayMode
mx.controls.FileSystemTree
mx.controls.HTML

Certaines des classes situées au coeur d’ActionScript ont été


modifiées pour prendre en charge Apollo. Le tableau A-3 fait la
liste des classes qui ont été modifiées des des nouvelles
méthodes et propriétés qu’elles proposent.

Tableau A-3. Modifications apportées par Apollo aux classes


existantes
Classe Nouvelle méthode ou propriété
flash.display.Stage window, propriété
flash.events.Event DOM_INITIALIZE, constante
HTML_BOUNDS_CHANGE, constante
HTML_RENDER, constante
LOCATION_CHANGE, constante
NETWORK_CHANGE, constante
flash.system.Security APPLICATION, constante
flash.utils.ByteArray deflate(), méthode
inflate(), méthode
flash.net.URLRequest followRedirects, propriété
manageCookies, propriété
shouldAuthenticate, propriété
shouldCacheResponse, propriété
useCache, propriété

124
_Apollo.book Page 125 Vendredi, 8. juin 2007 1:50 13

Annexe B

Outils en ligne de
commande d’Apollo

Le SDK Apollo propose les outils en ligne de commande sui-


vants :
AMXMLC
Outil en ligne de commande qui enveloppe le compilateur
MXMLC pour configurer celui-ci afin d’utiliser les classes
Apollo.
ADL
Utilisez cet outil pour lancer et tester les applications Apol-
lo sans avoir à les installer.
ADT
Utilisez cet outil pour empaqueter une application Apollo
en un fichier AIR que vous pourrez redistribuer.
Ces outils sont également disponibles au sein des extensions
Apollo pour Flex Builder. Ils sont installés dans le sous-réper-
toire bin.
Cette annexe liste les options de chacun de ces outils en ligne de
commande.
Pour voir des exemples illustrant l’utilisation de ces outils,
rendez-vous au chapitre 2.

125
_Apollo.book Page 126 Vendredi, 8. juin 2007 1:50 13

Annexe B — Outils en ligne de commande d’Apollo

AMXMLC
AMXMLC est une simple enveloppe autour du comilateur Flex
MXMLC qui crée les liens vers les bibliothèques Apollo
appropriées.
On l’utilise comme MXMLC :
amxmlc monAppTest.mxml
Ce script est inclus dans le répertoire bin du répertoire du SDK
Apollo.
Le premier paramètre passé au compilateur est l’emplacement
du fichier MXML à compiler (monAppTest.mxml dans l’exemple
précédent).
Il y a un grand nombre d’options pour le compilateur MXMLC.
Pour plus d’informations sur ces options, voir :
http://livedocs.macromedia.com/flex/201/html/compilers_123_
24.html

ADL
ADL est un outil en ligne de commande qui lance une applica-
tion Apollo, en se basant sur son fichier application.xml, sans
nécessiter l’installation préalable de l’application. C’est particu-
lièrement utile pour tester et déboguer l’application.
Typiquement, vous appelez l’outil ADL en passant un para-
mètre : le chemin vers le fichier descriptif de l’application (le
fichier .xml de l’application) :
adl application.xml
La syntaxe complète de la commande ADL est :
adl ( -runtime <chemin-vers-repertoire-
environnementDexecution> )? <chemin-vers-app-xml>
<chemin-vers-repertoire-racine>? ( -- ... )?
Voici une description des paramètres de ligne de commande
pour ADL :

126
_Apollo.book Page 127 Vendredi, 8. juin 2007 1:50 13

ADT

Option Description
-runtime Paramètre optionnel qui spécifie le répertoire qui
contient l’environnement d’exécution Apollo à
utiliser.
chemin-app-xml Fichier descriptif application.xml de l’application à
lancer.
chemin-vers- Paramètre optionnel qui spécifie le répertoire qui
repertoire- contient le fichier descriptif application.xml.
racine
-- N’importe quel paramètre indiqué après celui-ci
sera passé à l’application en tant que paramètre
de démarrage en ligne de commande .

ADT
ADT est un outil en ligne de commande qui crée des paque-
tages d’applications Apollo sous la forme de fichiers AIR
reditribuables. L’environnement d’exécution d’Apollo peut
alors installer l’application Apollo depuis ce fichier AIR.
Typiquement, vous appelez l’outil ADT de la manière suivante :
adt -package HelloWorld.air application.xml HelloWorld.swf
Dans cet exemple, l’outil ADT crée un fichier AIR dénommé
HelloWorld.air en se basant sur le fichier descriptif d’application
application.xml.
La syntaxe d’une commande ADT est la suivante :
adt -package <fichier-air> <app-xml> <fichierOuRepertoire>* (
-C <repertoire>
<fichierOuRepertoire>+ )*
Voici les options en ligne de commande disponibles pour ADT :

Option Description
-package Le premier paramètre doit être -package.
fichicer-air Le chemin relatif ou absolu vers le fichier
AIR que ADT doit créer.
app-xml Le chemin relatif ou absolu vers le fichier
descriptif de l’application de l’application.

127
_Apollo.book Page 128 Vendredi, 8. juin 2007 1:50 13

Annexe B — Outils en ligne de commande d’Apollo

Option Description
fichierOuRepertoire Un ou plusieurs noms de fichiers ou de
repértoiresqui identifient les autres fichiers
à inclure dans le paquetage. Chaque nom de
fichier ou de répertoire successif doit être
séparé par un espace.
Si un nom de répertoire est spécifié, alors
tous les fichiers de ce répertoire et ses sous-
répertoires seront inclus. Néanmoins, les
fichiers cachés du système de fichiers seront
ignorés.
Si l’un des noms de fichier listé est le même
que le fichier spécifié dans le paramètre
<app.xml> il sera alors ignoré; il ne sera
donc pas ajouté une seconde fois au paque-
tage.
Ces fichiers et répertoires seront copiésdans
le répertoire d’installation de l’application
lorsque celle-ci sera installée.
-C <repertoire> Ceci modifie le répertoire racine de tous les
fichiers ou répertoires listés dans la ligne de
commande.

128
_Apollo.book Page 129 Vendredi, 8. juin 2007 1:50 13

Index
Symboles installer l'environnement 19
"passer par référence", script Mac, installer et configurer 23
bridging 13 outils de développement 15
, balise 51 Windows, installer et
configurer 24
A Apollo Developer Tool (ADT) 34
ActionScript ii, 8 apollo_sdk.zip 23
appeler JavaScript 13, 37, 56 apolloframework.swc, fichier 22
DOM, manipuler 57 apolloglobal.swc, fichier 22
sérialiser/désérialiser les objets appareils mobiles 11
dans le système de fichiers 90 appId, attribut 30
ADL application 16 application.xml, fichier 22
ADL, application 22, 126 applications
Adobe 1 distribuer/installer 37
projets Open Source et 9 empaqueter/distribuer 33
télécharger Flex Builder 2.0.1 22 Flex 2.0 SDK, utiliser 30
ADT (Apollo Developer Tool) 16, Flex Builder 2.01, créer/débo-
22, 34, 126 guer avec 26
AIR Deployment Export applications (Web) 1
Wizard 34 applications bureau
AIR MIME type 37 applications web et 4
AIR, fichiers 33 applications de bureau 1, 15
Ajax 2 applications web 11
Alpha 1, viii histoire 1
installer 19 problèmes de 4
AMXMLC 125 app-resource 67
amxmlc, outil 30 chaîne de protocole 43
API d'entrée/sortie 63 app-storage 67
API de programmation 14 chaîne de protocole 43
API de système de fichiers 81 app-user-dir
sérialiser/désérialiser les objets chaîne de protocole 43
dans 90 asynochrones, versions 68
API, système de fichier attribut transparent
encoder, données bitmap 87 (systemChrome) 118
Apollo
fonctionnalités 14 B
histoire des applications web BitmapData, objet 87
et 1 bouton retour (navigateurs) 4

129
_Apollo.book Page 130 Vendredi, 8. juin 2007 1:50 13

Apollo — précis & concis

C deleteFileAsync(), méthode 70
cd, commande 30 DHTML 5
chaines DisplayObject, classe 52, 103
charger du HTML depuis 44 DOM (Document Object
chaînes Model) 9, 37
charger du HTML depuis 54 ActionScript, manipuler
fichiers texte avec 57
lire dans 84 HTML, manipuler 50, 55
fichiers texte, écrire depuis 81 domInitialize
changeFilter(), méthode 103 Flex HTML, composant 41
chrome personnalisé 113 HTML, composant Flex 50
chrome système 107 HTMLControl, classe 55
clickHandler( ), méthode 58 données bitmap 87
close(), méthode 109 E
complete, événement encode(), méthode 87
Flex HTML, composant 41 extensions Apollo 21
HTML , composant Flex 50
completeHandler( ), méthode 58 F
content bounds 55 Fenêtre, API 105
contentScroll, événement 53 fenêtres transparentes 107
copyTo(), méthode 68 fichiers
copyToAsync(), méthode 68, 70, accéder 64, 71
73 chaînes, lire dans 84
createDirectory(), méthode 72 copier 72
createTempDirectory(), lecture/écriture 74
méthode 73 naviguer 94
createTempFile(), méthode 73 file
CSS (Cascading Style Sheets) 9 , chaîne de protocole 43
HTML, composant, appliquer File, classe 65
des styles à 51 contenu du répertoire,
support de 40 obtenir 98
custom chrome, interface 31 FileMode 78
FileMode.APPEND 79
D FileMode.READ 79
deleteDirectory(), méthode 73 FileMode.UPDATE 79
deleteDirectoryAsync(), FileMode.WRITE 78
méthode 70 FileStream, classe 74
deleteFile(), méthode 73 encoder, données bitmap 87

130
_Apollo.book Page 131 Vendredi, 8. juin 2007 1:50 13

Index

FileSystemTree, composant 94 htmlControl, propriété 52


Firefox 8 htmlRender
développeurs web et 9 Flex HTML, composant 41
Flash ii, 8 HTML, composant Flex 50
flash.display, paquetage 120 htmlText, propriété 44
flash.display.Stage, classe 120 htmlTextChanged 42, 47
flash.events, paquetage 120 HTTP 8
flash.filesystem, paquetage 120 http
flash.html, paquetage 120 , chaîne de protocole 43
flash.html.HTMLControl, https
classe 37 , chaîne de protocole 43
flash.system.Security, classe 120
flash.utils.ByteArray
I
init(), méthode 120
paquetage 120
initApp( ), méthode 53
Flex 2, SDK 22, 30
installer Apollo 19
Flex Builder ii, 17
interface utilisateur (UI) 4
outils pour 21
Internet Explorer 10
Flex HTML, composant 41
fonds partiellement J
transparents 107 Java runtime environment 22
framework Flex 2 8 Java, kit de développement 22
H JavaScript ii, 5, 9
ActionScript, appeler 13
HTML ii, 9, 101
appeler ActionScript 37, 56
applications Flex, utiliser
applications web, histoire et 1
dans 37
HTMLControl, classe 40
applications web, histoire et 1
javascriptDocument, propriété
DOM, manipuler 50
(HTML, composant Flex) 51
technologies de document et 10
javascriptWindow, propriété
WebKit, moteur 9
(HTML, composant Flex) 51
htmlBoundsChange (HTML
JPEG, format 87
Control, classe) 56
JPEGEncoder, classe 87
HTMLControl
classe, événements JavaScript, K
écouter depuis ActionScript 58 KHTML 9
HTMLControl, classe 37, 53
ActionScript, manipuler le L
DOM depuis 57 Lecteur Flash
WebKit, utiliser 40 applications web, histoire et 1

131
_Apollo.book Page 132 Vendredi, 8. juin 2007 1:50 13

Apollo — précis & concis

lecteur Flash MXML 25


API de programmation et 14
N
name, attribut 30
(linefeed), saut de ligne 82
nativePath, propriété (objet
linefeed (\n), saut de ligne 82
File) 66
listDirectory(), méthode 98
NativeWindow.startMove(),
listDirectoryAsync(), méthode 70,
méthode 113
98
noms de code pour Apollo 6
load( ),méthode
loadString( ), méthode et 54 O
loadString( ), méthode 54 Objet File (ActionScript) 64
location, propriété (Flex, HTML, onHtmlComplete(), méthode 102
composant) 43 onMouseDownInTitleBar(),
location, changement et 49 méthode 113
locationChanged (Flex, HTML, onMouseDownInWindow(),
composant) 49 méthode 113
locationChanged (HTML, open(), méthode 70, 76, 84
composant Flex) 50 openAsync(), méthode 70, 76, 84
logDirectoryDetails(), méthode 94 outils de développement 15
logFileDetails(), méthode 94 outils en ligne de commande 17
M P
Mac OS, Apollo, installer 20 PDF, vi
maximize(), méthode 109 technologies de document et 10
message URL http PNG, format 87
//www.adobe.com/go/apollo 21 PNGEncoder, classe 87
//www.mozilla.org/projects/tam projets Open Source 9
arin/ 8
message URL, http R
//www.webkit.org 9 readByte(), méthode 79
méthodes d'écriture 79 readMultiByte(), méthode 82, 84
méthodes de lecture 79 readObject(), méthode 90
minimize(), méthode 109 readUTF(), méthode 84
modèles de securité 64 readUTFBytes(), méthode 79, 84
moteur d'affichage vectoriel 8 répertoires
moveToAsync(), méthode 70, 73 accéder 64
moveToTrashAsync(), contenu, lire 70
méthode 70 copier 72
mx.controls, paquetage 120 lecture/écriture 74
mx.core, paquetage 120 liste, obtenir 98

132
_Apollo.book Page 133 Vendredi, 8. juin 2007 1:50 13

Index

resize(), méthode 113 window.location, propriété


resolve(), méthode 65, 66, 98 location, changement et 49
restore(), méthode 109 Windows, Apollo, installer 19
\r (return) 82 Windows, première
return (\r) 82 application 25
RIA (Rich Internet Application) 1 writeMultiByte(), méthode 82
Rich Internet Application (RIA) 2 writeObject(), méthode 90
rootContent, élément 30, 118 writeUTF(), méthode 81
RTMP 8 writeUTFBytes(), méthode 82
writeUTHBytes(), méthode 79
S
Safari, navigateur 9 X
script bridging 56 XHTML 9, 40
sécurité, modèle du Web 5 XML 8
setMouseUpHandler(),
méthode 120
startMove(), méthode 113
SWF, fichiers 56
compiler 30
synchrones, versions 68
system chrome, interface 31
T
Tamarin, machine virtuelle 8
technologies de document 11
TextInput, champ 44
transparent, attribut 30
U
UI (interface utilisateur) 4
UIComponent, classe 51
URI schémas 67
url, propriété (objet File) 66
W
W3C DOM Niveau 2, standard 40
WebKit
HTML, support dans Apollo 40
intégration des technologies et
script bridging 13

133
_Apollo.book Page 134 Vendredi, 8. juin 2007 1:50 13