Académique Documents
Professionnel Documents
Culture Documents
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
Apollo
Précis & concis
Éditions O’REILLY
18 rue Séguier
75006 Paris
france@oreilly.com
http://www.oreilly.fr/
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.
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.
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
vi
_Apollo.book Page i Vendredi, 8. juin 2007 1:50 13
Préface
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.
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
iii
_Apollo.book Page iv Vendredi, 8. juin 2007 1:50 13
Préface
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
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
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.
vii
_Apollo.book Page viii Vendredi, 8. juin 2007 1:50 13
Préface
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
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
ix
_Apollo.book Page x Vendredi, 8. juin 2007 1:50 13
Préface
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
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
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
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.
2
_Apollo.book Page 3 Vendredi, 8. juin 2007 1:50 13
4
_Apollo.book Page 5 Vendredi, 8. juin 2007 1:50 13
5
_Apollo.book Page 6 Vendredi, 8. juin 2007 1:50 13
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
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.
7
_Apollo.book Page 8 Vendredi, 8. juin 2007 1:50 13
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/
8
_Apollo.book Page 9 Vendredi, 8. juin 2007 1:50 13
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.
9
_Apollo.book Page 10 Vendredi, 8. juin 2007 1:50 13
10
_Apollo.book Page 11 Vendredi, 8. juin 2007 1:50 13
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.
11
_Apollo.book Page 12 Vendredi, 8. juin 2007 1:50 13
réseau
bureau
SWF HTML
HTML SWE
PDF PDF
runtime Apollo
12
_Apollo.book Page 13 Vendredi, 8. juin 2007 1:50 13
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
ASTUCE
Le Script Bridging sera étudié plus en détails dans le chapi-
tre 4.
ASTUCE
Les API d’Apollo seront accessible à la fois depuis Action-
Script et depuis JavaScript.
14
_Apollo.book Page 15 Vendredi, 8. juin 2007 1:50 13
15
_Apollo.book Page 16 Vendredi, 8. juin 2007 1:50 13
16
_Apollo.book Page 17 Vendredi, 8. juin 2007 1:50 13
ASTUCE
Une version béta de Flex Builder avec le support d’Apollo
est incluse avec la version Alpha.
17
_Apollo.book Page 18 Vendredi, 8. juin 2007 1:50 13
18
_Apollo.book Page 19 Vendredi, 8. juin 2007 1:50 13
Chapitre 2
Commencer le développement
d’applications Apollo
19
_Apollo.book Page 20 Vendredi, 8. juin 2007 1:50 13
20
_Apollo.book Page 21 Vendredi, 8. juin 2007 1:50 13
21
_Apollo.book Page 22 Vendredi, 8. juin 2007 1:50 13
22
_Apollo.book Page 23 Vendredi, 8. juin 2007 1:50 13
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
23
_Apollo.book Page 24 Vendredi, 8. juin 2007 1:50 13
24
_Apollo.book Page 25 Vendredi, 8. juin 2007 1:50 13
25
_Apollo.book Page 26 Vendredi, 8. juin 2007 1:50 13
26
_Apollo.book Page 27 Vendredi, 8. juin 2007 1:50 13
27
_Apollo.book Page 28 Vendredi, 8. juin 2007 1:50 13
</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
29
_Apollo.book Page 30 Vendredi, 8. juin 2007 1:50 13
30
_Apollo.book Page 31 Vendredi, 8. juin 2007 1:50 13
31
_Apollo.book Page 32 Vendredi, 8. juin 2007 1:50 13
</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
33
_Apollo.book Page 34 Vendredi, 8. juin 2007 1:50 13
35
_Apollo.book Page 36 Vendredi, 8. juin 2007 1:50 13
36
_Apollo.book Page 37 Vendredi, 8. juin 2007 1:50 13
Etapes suivantes
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
Chapitre 3 — Utiliser du HTML dans les applications Apollo créées avec Flex
40
_Apollo.book Page 41 Vendredi, 8. juin 2007 1:50 13
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.
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
42
_Apollo.book Page 43 Vendredi, 8. juin 2007 1:50 13
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
</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.
44
_Apollo.book Page 45 Vendredi, 8. juin 2007 1:50 13
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: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: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
<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: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:ApolloApplication>
48
_Apollo.book Page 49 Vendredi, 8. juin 2007 1:50 13
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
50
_Apollo.book Page 51 Vendredi, 8. juin 2007 1:50 13
<mx:Style>
.HTML {
backgroundColor: #000000;
paddingLeft: 4px;
paddingRight: 4px;
paddingTop: 4px;
paddingBottom: 4px;
}
</mx:Style>
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
<mx:Script>
<![CDATA[
public function initApp():void
{
html.htmlControl.addEventListener(
52
_Apollo.book Page 53 Vendredi, 8. juin 2007 1:50 13
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.
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
54
_Apollo.book Page 55 Vendredi, 8. juin 2007 1:50 13
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.
56
_Apollo.book Page 57 Vendredi, 8. juin 2007 1:50 13
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
58
_Apollo.book Page 59 Vendredi, 8. juin 2007 1:50 13
html.addEventListener(Event.COMPLETE, completeHandler);
html.loadString(xhtml.toXMLString());
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é.
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
60
_Apollo.book Page 61 Vendredi, 8. juin 2007 1:50 13
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
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.
64
_Apollo.book Page 65 Vendredi, 8. juin 2007 1:50 13
65
_Apollo.book Page 66 Vendredi, 8. juin 2007 1:50 13
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.
66
_Apollo.book Page 67 Vendredi, 8. juin 2007 1:50 13
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
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
68
_Apollo.book Page 69 Vendredi, 8. juin 2007 1:50 13
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.");
69
_Apollo.book Page 70 Vendredi, 8. juin 2007 1:50 13
70
_Apollo.book Page 71 Vendredi, 8. juin 2007 1:50 13
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.
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
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.
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.
72
_Apollo.book Page 73 Vendredi, 8. juin 2007 1:50 13
73
_Apollo.book Page 74 Vendredi, 8. juin 2007 1:50 13
74
_Apollo.book Page 75 Vendredi, 8. juin 2007 1:50 13
75
_Apollo.book Page 76 Vendredi, 8. juin 2007 1:50 13
76
_Apollo.book Page 77 Vendredi, 8. juin 2007 1:50 13
77
_Apollo.book Page 78 Vendredi, 8. juin 2007 1:50 13
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);
78
_Apollo.book Page 79 Vendredi, 8. juin 2007 1:50 13
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é.
79
_Apollo.book Page 80 Vendredi, 8. juin 2007 1:50 13
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
81
_Apollo.book Page 82 Vendredi, 8. juin 2007 1:50 13
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.
82
_Apollo.book Page 83 Vendredi, 8. juin 2007 1:50 13
83
_Apollo.book Page 84 Vendredi, 8. juin 2007 1:50 13
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>
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
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.
85
_Apollo.book Page 86 Vendredi, 8. juin 2007 1:50 13
86
_Apollo.book Page 87 Vendredi, 8. juin 2007 1:50 13
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
88
_Apollo.book Page 89 Vendredi, 8. juin 2007 1:50 13
}
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
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
91
_Apollo.book Page 92 Vendredi, 8. juin 2007 1:50 13
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");
}
var d:Dictionary;
if(!fichier_de_donnees.exists)
92
_Apollo.book Page 93 Vendredi, 8. juin 2007 1:50 13
{
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();
}
]]
</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
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
95
_Apollo.book Page 96 Vendredi, 8. juin 2007 1:50 13
96
_Apollo.book Page 97 Vendredi, 8. juin 2007 1:50 13
97
_Apollo.book Page 98 Vendredi, 8. juin 2007 1:50 13
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
99
_Apollo.book Page 100 Vendredi, 8. juin 2007 1:50 13
}
}
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>
101
_Apollo.book Page 102 Vendredi, 8. juin 2007 1:50 13
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
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
104
_Apollo.book Page 105 Vendredi, 8. juin 2007 1:50 13
105
_Apollo.book Page 106 Vendredi, 8. juin 2007 1:50 13
106
_Apollo.book Page 107 Vendredi, 8. juin 2007 1:50 13
NOTE
Dans la version Alpha 1 d’Apollo, la gestion de fenêtres sys-
tème multiples n’est que partiellement prise en charge.
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
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
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
110
_Apollo.book Page 111 Vendredi, 8. juin 2007 1:50 13
111
_Apollo.book Page 112 Vendredi, 8. juin 2007 1:50 13
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
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>
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
114
_Apollo.book Page 115 Vendredi, 8. juin 2007 1:50 13
115
_Apollo.book Page 116 Vendredi, 8. juin 2007 1:50 13
<![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
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
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.
118
_Apollo.book Page 119 Vendredi, 8. juin 2007 1:50 13
119
_Apollo.book Page 120 Vendredi, 8. juin 2007 1:50 13
verticalCenter="0" horizontalCenter="0"/>
</mx:ApolloApplication>
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
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
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
123
_Apollo.book Page 124 Vendredi, 8. juin 2007 1:50 13
124
_Apollo.book Page 125 Vendredi, 8. juin 2007 1:50 13
Annexe B
Outils en ligne de
commande d’Apollo
125
_Apollo.book Page 126 Vendredi, 8. juin 2007 1:50 13
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
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
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
131
_Apollo.book Page 132 Vendredi, 8. juin 2007 1:50 13
132
_Apollo.book Page 133 Vendredi, 8. juin 2007 1:50 13
Index
133
_Apollo.book Page 134 Vendredi, 8. juin 2007 1:50 13