headermask image

header image

Publier une application SOLO

Dans ce tutoriel, je vais vous expliquer ma méthode pour mettre en place une application sur un serveur Web.
Comme la plupart des hébergeurs (en en particulier les FAI) ne mettent pas à la disposition des clients un serveur J2EE ou Tomcat, nous utiliserons la méthode SOLO.

Pour cet exemple je reprendrais l’application créée dans l’article Hello World en la modifiant légèrement.

Voilà le code de l’application HelloWorld :

Script LZX – Fichier HelloWorld.lzx de base -

  1.  <?xml version="1.0" encoding="UTF-8" ?>
  2.  <canvas>
  3.  <window title="Hello World" width="150" height="150">
  4.          <text align="center" valign="middle">Hello World</text>
  5.  </window>
  6.  </canvas>

Le but de l’opération est d’afficher la fenêtre Hello World au milieu de notre page web.
Pour cela, nous allons agrandir la fenêtre ainsi que définir une taille exacte pour le canvas, qui est en faîte la taille finale de notre application flash.

Modifiez le fichier ainsi :

Script LZX – Fichier HelloWorld.lzx final -

  1.  <?xml version="1.0" encoding="UTF-8" ?>
  2.  <canvas width="400" height="400" proxied="false">
  3.  <window title="Hello World" width="400" height="400">
  4.          <text align="center" valign="middle">Hello World</text>
  5.  </window>
  6.  </canvas>

Ici, nous avons utilisé les attributs width et height pour définir la longueur et la largeur du canvas et de la fenêtre, ainsi qu’un nouvel attribut « proxied="false" », cet attribut permet de spécifier au compilateur que l’application n’utilise pas le mode proxy, c’est-à-dire le serveur LPS, notre application est donc construite pour fonctionner en mode SOLO.

Lancez la compilation de l’application avec le bouton Run de l’interface.

Une fois l’application lancée dans le navigateur, vous remarquerez la barre en bas de la page.

Barre de compilation

Sur cette barre, cliquez sur le bouton SOLO, une nouvelle page apparaît, dans cette nouvelle page, à la ligne: « Title for web page: » entrez le titre de la page web, ici Hello World.

Dans les champ Width et Height vous pouvez entrer la largeur par hauteur de l’application, 400 et 400.

Cliquez sur le bouton Continue…

Dans la page qui suit, vous avez une vue de la page telle qu’elle sera découpée, cela a surtout un intérêt si vous avez spécifié des valeurs trop petites dans la page précédente, l’application sera tronquée :s

laissez les champs par défaut puis cliquez sur Continue…

Dans la page suivante, cliquez sur le lien « download solo-deploy.zip » pour télécharger l’archive contenant notre application. Nous allons modifier quelques éléments de cette archive pour rendre plus pratique la mise à jour du site ainsi que l’aspect de la présentation.

Lorsque vous décompressez l’archive vous voyez qu’elle contient aussi le code source de votre application et, ici ce n’est pas le cas, aussi les images utilisées. Pour optimiser un peu l’espace sur le serveur voilà les éléments fondamentaux à envoyer sur le serveur pour garantir le fonctionnement de l’application :

      > le répertoire lps
      > le fichier HelloWorld.lzx.html
      > le fichier HelloWorld.lzx.swf

Vous pouvez donc supprimer le fichier « HelloWorld.lzx » qui n’a pas de réelle utilité à moins de vouloir mettre à disposition de vos visiteurs le code source de l’application.

Par la suite, nous n’utiliserons pas cette méthode pour mettre en ligne les mises à jour du site web, la mise en page étant imposé (et très basique) il n’est en effet pas nécessaire de recréer les fichiers HTML et javascript à chaque fois car seul le fichier flash sera modifié.

Renommez le fichier « HelloWorld.lzx.swf » en « HelloWorld.swf », c’est en effet le nom du fichier flash créé dans le répertoire bin/ (ou workspace/HelloWorld/bin) de notre application. Comme il est identique à celui créé nous n’aurons, par la suite, qu’a copier le fichier du répertoire bin/ du projet pour mettre à jour l’application.

Le fichier flash renommé nous allons passer à la modification du fichier HelloWorld.lzx.html.

Je trouve la disposition un peu trop simple ( l’application est positionnée en haut à gauche), nous allons modifier le fichier pour positionner l’application au milieu de la page et prendre en compte le changement de nom du fichier flash. Nous en profiterons pour changer son nom qui n’a rien de pratique en « HelloWorld.html ».

Appliquez le code suivant dans le fichier :

Page HTML – Fichier HelloWorld.html -

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  <html>
  3.     <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.      <link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/favicon.ico">
  6.      <title> Hello World </title>
  1.  <style type="text/css">
  2.            html, body { margin: 5px 0px 5px 0px; padding: 0px; }
  3.            body { background-color: #ffffff; }
  4.            #conteneur {       
  5.                      position: absolute;
  6.                      left: 50%;
  7.                      top: 50%;
  8.                      width: 400px;        /* selon la largeur voulue */
  9.                      margin-left: -200px; /* moitié de width */         
  10.                      height: 400px;      /* selon la hauteur voulue */
  11.                      margin-top: -200px;  /* moitié de height */
  12.                      overflow: visible;
  13.            }
  14.  </style>
  1.  <script language="JavaScript1.1" src="lps/includes/vbembed.js" type="text/javascript"></script>
  2.      <script src="lps/includes/embed.js" type="text/javascript"></script>
  3.     </head>
  4.     <body>
  5.      <div id="conteneur">
  1.  <script type="text/javascript">
  2.          lzLPSRoot = '/lps-3.2';
  3.          lzCanvasRuntimeVersion = 7 * 1;
  4.          if (lzCanvasRuntimeVersion == 6) {
  5.             lzCanvasRuntimeVersion = 6.65;
  6.          }
  7.          if (isIE && isWin || detectFlash() >= lzCanvasRuntimeVersion) {
  8.             lzEmbed({url: 'HelloWorld.swf?&lzproxied=false&__lzhistconn='+top.connuid+'&__lzhisturl=' + escape('lps/includes/h.html?h='),
  9.                      bgcolor: '#ffffff',
  10.                      width: '400',
  11.                      height: '400',
  12.                      id: 'lzapp'}, lzCanvasRuntimeVersion);
  13.             lzHistEmbed(lzLPSRoot);
  14.          } else {
  15.             document.write('This application requires Flash player ' + lzCanvasRuntimeVersion + '. <a href="http://www.macromedia.com/go/getflashplayer" target="fpupgrade">Click here</a> to upgrade.');
  16.          }
  17.  </script>
  1.  <noscript>
  2.              Please enable JavaScript in order to use this application.
  3.            </noscript>
  4.      </div>
  5.     </body>
  6.  </html>

Je ne détaillerais pas la structure standard du fichier HTML, si vous avez tenu la lecture jusqu’ici c’est que vous la connaissez ;) .

Dans les parties un peu spéciales, la ligne « <link rel="SHORTCUT ICON"...» définit où se situe le favicon.ico (petite image relative à la page dans l’URL du navigateur ou l’onglet).

La partie CSS qui suit utilise en faîte la technique des marges négatives pour positionner notre application dans la page.

Les parties javascript qui suivent incluent les fichiers « vbembed.js », qui contient la fonction de détection de l’OS et du navigateur et « embed.js » qui permet l’intégration de l’application ainsi que la détection de la présence du plug-in flash.

Le script qui suit détecte la version du player flash installé, si elle est inférieure à celle de compilation de l’application, (flash 7 par défaut pour le moment), le scripte invite l’utilisateur à mettre à jour son plug-in, sinon l’application lance le fichier flash.

Enfin, si le plug-in flash est présent, mais pas activé, un message demande son activation.

Dans une application future, si vous voulez :

Changer la couleur de fond

      modifiez la partie CSS « body { background-color: #ffffff; } »
      dans la fonction de lancement du flash, l’attribut « bgcolor: ‘#ffffff’ »

Changer la taille de l’application

      modifiez la partie CSS: width et height et les parties margin-left et margin-top comme indiqué en commentaire.
      Dans la fonction de lancement du flash, les attributs : « width: ‘400′, height: ‘400′ »

Copiez tous les fichiers vers le répertoire de publication web et voyez le résultat.

Application publiée

Avec à la technique des marges négatives, vous pouvez utiliser n’importe quelle résolution, votre application sera toujours centrée dans le navigateur.

Cette fois-ci pas beaucoup de code LZX mais une partie essentielle dans la vie d’une application web.