Test : Déployer une application sur un serveur web
Télécharger les fichiers de la solution de test (ZIP, 14 MB)
Code
Aucune modification du code.
Didacticiel
Dans les trois précédents modules, vous avez appris à créer et déboguer une application Flex. Dans celui-ci, vous allez déployer l'application sur un serveur web.
Vous commencerez par créer une version validée de l'application. Vous examinerez ensuite le code à utiliser pour qu'une page web charge votre application Flex. Pour finir, vous étudierez les fichiers à placer sur le serveur web avec le fichier SWF.
Étape 1 : Créez une version validée.
Sélectionnez Projet > Exporter vers une version validée. Dans l'assistant Exporter vers une version validée, sélectionnez le projet et l'application et indiquez l'emplacement où la version validée doit être enregistrée (voir Figure 1).
Lorsque vous développez une application, une version de débogage est créée et stockée dans le dossier bin-debug du projet.
Si vous consultez l'explorateur de packages, vous verrez que le projet comporte à présent un dossier bin-release qui pointe vers le dossier d'exportation que vous venez d'indiquer (voir Figure 2).
Outre le fichier SWF, les dossiers bin-debug et bin-release contiennent de nombreux fichiers. Vous examinerez ces différents fichiers au cours des étapes suivantes.
Étape 2 : Comparez les tailles de fichier d'application SWF.
Cliquez avec le bouton droit de la souris sur le fichier SWF du répertoire bin-debug et sélectionnez Propriétés pour afficher son emplacement et sa taille. Répétez cette opération pour le fichier SWF du dossier bin-release.
En général, la taille du fichier SWF validé n'excède pas 100 Ko.
Étape 3 : Examinez les modèles HTML.
Examinez les fichiers utilisés pour générer votre application intégrée à un navigateur (voir Figure 3).
Les fichiers contenus dans ce dossier varient selon les paramètres du projet.
Par défaut, lorsque vous créez une application, ces modèles sont utilisés pour générer le fichier HTML et d'autres fichiers, qui sont ensuite placés dans les dossiers bin-debug et bin-release. Ils contiennent des variables renseignées par les propriétés du projet ou les attributs de la balise Application. Le rôle de chacun de ces fichiers est expliqué dans les deux étapes suivantes.
Étape 4 : Ouvrez le fichier FlexWebTestDrive.html.
Examinez le code généré pour l'incorporation de l'application Flex.
Pour afficher votre application, l'utilisateur a besoin d'une version bien particulière de Flash Player. Cela signifie que la page web dans laquelle l'application est incorporée doit également contenir du code pour vérifier la présence de la version minimale de Flash Player requise et du code pour aider les utilisateurs à mettre à jour ou à télécharger Flash Player s'ils ne disposent pas de la version appropriée. Le code principal, qui a pour but de vérifier la présence d'une version minimale de Flash Player, est fourni par SWFObject 2, bibliothèque standard conçue pour l'incorporation de fichiers SWF dans des pages HTML. Cette bibliothèque est intégrée à la page web :
<script type="text/javascript" src="swfobject.js"></script>
Par ailleurs, le fichier SWF est incorporé sur appel de la méthode embed() de swfobject :
swfobject.embedSWF(
"FlexWebTestDrive.swf", "flashContent", "100%", "100%",
swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);
Le premier argument correspond à l'emplacement du fichier SWF. Le deuxième argument est le nom du contenu de substitution (l'id d'une balise div défini plus loin dans le code) à afficher si Flash Player n'est pas disponible. Les troisième et quatrième arguments définissent la hauteur et la largeur de l'application. Par défaut, leur valeur est égale à 100 % dans l'enveloppe HTML générée, de sorte que l'application occupe entièrement la fenêtre du navigateur. Pour modifier la taille de l'application (afin qu'elle occupe un certain espace dans une page HTML, par exemple), remplacez ces arguments par d'autres valeurs absolues ou relatives.
Le cinquième argument indique la version minimale requise de Flash Player. Les applications Flex 4.5 requièrent la version 10.2.0 ou une version ultérieure de Flash Player. Le sixième argument ajoute Express Installation, un moyen rapide et transparent pour l'utilisateur de mettre Flash Player à jour s'il ne dispose pas de la version minimale. La valeur de cet argument est une chaîne vide (si Express Installation ne doit pas être installé) ou l'emplacement du fichier SWF offrant cette fonctionnalité : playerProductInstall.swf. Ces deux valeurs ont été définies dans le code JavaScript avant l'appel de embed().
Les trois derniers arguments servent à transmettre des données à l'application et à en définir les propriétés. Utilisez l'objet flashvars pour transmettre des données à l'application Flex à partir de la page web qui la contient. Par ailleurs, utilisez les objets params et attributes pour définir les paramètres d'affichage du fichier SWF dans le navigateur : qualité, alignement, échelle, transparence, etc.
Pour finir, observez la balise noscript, exécutée dans des navigateurs JavaScript désactivés. Elle contient deux balises object qui permettent d'incorporer un fichier SWF selon une méthode non-JavaScript.
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="100%" height="100%" id="FlexWebTestDrive">
<param name="movie" value="FlexWebTestDrive.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash"
data="FlexWebTestDrive.swf" width="100%" height="100%">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>Either scripts and active content are not permitted to
run or Adobe Flash Player version 10.2.0 or greater is not installed.
</p>
<!--<![endif]-->
<a href="/go/getflashplayer"><img src="http://adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" /></a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
La balise objectclassid est utilisée par Internet Explorer et les navigateurs qui implémentent Flash Player sous forme de contrôle ActiveX Flash. La seconde balise object est utilisée par les navigateurs qui mettent en œuvre Flash Player en tant que plug-in (Firefox, Safari ou Chrome, par exemple). Utilisez les balises param pour définir les paramètres SWF de ces deux balises object.
Si vous souhaitez modifier des propriétés SWF, veillez à bien définir les mêmes valeurs pour la balise swfobject et les deux balises object de la section noscript.
Pour incorporer l'application dans une page web sans utiliser l'enveloppe par défaut, vous devez vous assurer que ce code (ou une fonctionnalité équivalente) est entièrement présent dans la page web.
Étape 5 : Examinez les fichiers du dossier bin-release
Lors du déploiement de l'application sur un serveur web, il est préférable de placer tous les fichiers du dossier bin-release sur le serveur de production, par précaution. Dans l'immédiat, examinez chacun de ces fichiers pour savoir s'ils sont tous réellement indispensables.
Développeurs PHP utilisant Flash Builder pour PHP : Vous disposez également d'un fichier FlexWebTestDrive.php.
Chaque application Flex utilise la structure Flex, au moins partiellement. Afin de limiter la taille et les temps de téléchargement du fichier SWF, le code de la structure n'est pas compilé dans l'application. Il est en effet fourni séparément sous la forme d'un groupe de bibliothèques RSL (Runtime Shared Libraries) authentifié par Adobe. Ces bibliothèques sont téléchargées une fois pour toutes, placées en mémoire cache par Flash Player et utilisables avec n'importe quelle application Flex. Il s'agit des fichiers SWZ figurant dans les dossiers bin du projet.
Lorsqu'un utilisateur demande une application ayant recours à des bibliothèques RSL Adobe (ce qui est par défaut le cas de toutes les applications Flex 4 ou ultérieures), Flash Player utilise la version appropriée des fichiers de la structure mis en mémoire cache en local, le cas échéant. À défaut, il les télécharge sur le site web Adobe avant de les mettre en mémoire cache en local. Il est donc inutile de déployer ces fichiers SWZ sur votre serveur web. Vous pouvez néanmoins le faire si vous préférez les avoir à disposition sur votre serveur à des fins de reprise sur incident ou en cas de déploiement d'une application dans un environnement Internet protégé.
Le tableau ci-dessous répertorie et décrit chacun des fichiers présents dans les dossiers bin.
Fichier |
Description |
Déploiement ? |
|---|---|---|
FlexWebTestDrive.html |
Page HTML dans laquelle l'application Flex est incorporée. |
Déployez ce fichier ou une autre page de serveur web pour incorporer le fichier SWF et vérifier si la version minimale de Flash Player requise est disponible. |
FlexWebTestDrive.php |
Page PHP dans laquelle l'application Flex est incorporée. |
Déployez ce fichier ou une autre page de serveur web pour incorporer le fichier SWF et vérifier si la version minimale de Flash Player requise est disponible. |
FlexWebTestDrive.swf |
Votre application ! |
Toujours |
framework_x.swz |
Bibliothèque RSL contenant la structure Flex centrale. |
Non, fourni sur les serveurs Adobe. |
dossier history |
Contient des pages JavaScript, CSS et HTML servant à ajouter des hyperliens profonds pour parcourir l'application à l'aide des boutons Suivant et Précédent du navigateur ainsi qu'à créer des URL personnalisées pour l'ajout de signets. |
Si votre application utilise les hyperliens profonds. |
mx_x.swz |
Bibliothèque RSL contenant les composants MX. |
Non, fourni sur les serveurs Adobe. |
PlayerProductInstall.swf |
Fichier SWF utilisé avec swfobject pour ajouter Express Installation, un moyen rapide et transparent de mettre Flash Player à jour. |
Toujours, sauf si vous désactivez Express Installation. |
rpc_x.swz |
Bibliothèque RSL contenant les services de données qui émettent les appels de service web, HTTP ou Flash Remoting. |
Non, fourni sur les serveurs Adobe. |
spark_x.swz |
Bibliothèque RSL de composants Spark. |
Non, fourni sur les serveurs Adobe. |
sparkskins_x.swz |
Bibliothèque RSL d'enveloppes de composants MX. |
Non, fourni sur les serveurs Adobe. |
swfobject.js |
Code SWFObject 2 utilisé pour détecter Flash Player et incorporer un fichier SWF dans une page web. |
Toujours, sauf si vous n'utilisez pas swfobject pour incorporer le fichier SWF dans une page web. |
textLayout_x.swz |
Bibliothèque RSL contenant le framework TLF (Text Layout Framework) utilisé par les contrôles Text Spark. |
Non, fourni sur les serveurs Adobe. |
Étape 6 : Modifiez les paramètres du projet pour qu'aucun fichier ne soit généré dans le dossier history.
Sélectionnez Projet > Propriétés, affichez la page Compilateur Flex et désactivez la case à cocher Activer l'intégration avec le navigateur.
Réexaminez le dossier bin-debug. Le dossier history ne doit plus s'y trouver.
Dans ce didacticiel, vous avez appris à créer une version validée de l'application, à incorporer une application Flex dans une page web et à identifier les fichiers annexes nécessaires pour la déployer sur un serveur web. Dans le didacticiel suivant, vous apprendrez où placer le code de service, c'est-à-dire les fichiers de classe côté serveur, afin que l'application Flex puisse l'appeler.
Pour en savoir plus
Pour en savoir plus sur cette rubrique, consultez les ressources suivantes :
Documentation: Utilisation de Flash Builder 4.5
Documentation : Utilisation de Flex 4.5
+
Cette œuvre fait l’objet d’une licence Paternité - Pas d’utilisation commerciale - Partage des conditions Initiales à l’identique 3.0 Unported Creative Commons. Les autorisations qui n'entrent pas dans le cadre de cette licence, concernant les exemples de code inclus dans cette œuvre, sont disponibles auprès d'Adobe.
More Like This
- Test Drive: Deploy your application to a web server
- Test : Déployer une application sur un serveur web
- Test Flex : Créer une application en une heure
- Test Flex : Créer une application en une heure
- Test Flex : Créer une application en une heure
- Test Flex : Créer une application en une heure
- Test : Déployer une application sur un serveur web
- Test : Déployer une application sur un serveur web
- Test : Tester et déboguer le code