Ellipse Tutorial

Importation des fichiers Javascript Ellipse

Accès rapide :
La technique habituelle
La technique d'importation Ellipse au sein d'une page HTML
La technique d'importation Ellipse au sein d'une page Web Ellipse
Explications complémentaires

La technique habituelle

Depuis le départ, Javascript permet de lier un fichier de script à une page HTML. Pour ce faire il faut utiliser le tag <script>. Deux formes peuvent être utilisées : la plus ancienne utilise un attribut language la nouvelle utilise l'attribut type. Quelque soit la technique utilisée, le W3C recommande d'utiliser ces possibilités au sein du bloc <head> ... </head>. Voici un exemple d'utilisation.

 
01 <html>
02     <head>
03         <title>Sample HTML page</title>
04         <script language="javascript" src="file1.js"></script>
05         <script type="text/javascript" src="file2.js"></script>
06     </head>
07     <body>
08         <!-- suite -->
09     </body>
10 </html>

Fichier "InclusionJS.html"

ATTENTION : la fermeture du tag <script> est obligatoire. L'utilisation de la forme compacte (tag ouvrant et fermant à la fois) ne fonctionne pas.

Le problème de cette technique réside dans le fait que si un même fichier est inclus au moins deux fois à une même page HTML alors son contenu sera bien injecté (et donc exécuté) plusieurs fois durant le traitement de cette page. Cela peut entraîner des erreurs dans le meilleur des cas ou, pire encore, ne pas déclencher d'erreur mais impacter sur la cohérence des résultats calculés.

La technique d'importation Ellipse au sein d'une page HTML

Le framework Ellipse propose donc une autre technique d'importation de fichiers Javascript. Cette technique aura l'avantage de vérifier si, oui ou non, le fichier considéré est déjà importé dans la page. Si c'est le cas les nouvelles importations de ce fichier seront ignorées. Attention néanmoins à une chose : le script nécessaire à ce mécanisme d'importation est lui même stocké dans un fichier Javascript nommé : corelib/services/web/javascript/Core.js. Ce fichier devra, quand à lui, être importé de manière traditionnelle (utilisation du tag <script>).

Ce fichier défini la fonction importPackage : c'est elle qui permet l'importation des fichiers de scripts. Mais comme elle peut être utilisée à différents niveaux (dans les répertoires de votre projet Web), elle utilise une variable globale indiquant la base de l'URL à partir de laquelle l'application Web est accessible. Cette variable est nommée __APPLICATION_PATH__. Comme le montre l'exemple ci-dessous, il ne faut pas oublier de la définir. La page HTML suivante montre un exemple d'utilisation.

 
01 <html>
02     <head>
03         <title>Sample HTML page</title>
04         <script language="javascript">
05         <!--
06             var __APPLICATION_PATH__ = "http://localhost/demo/";
07         //-->
08         </script>
09         <script language="javascript" src="/corelib/services/web/javascript/Core.js"></script>
10         <script language="javascript">
11         <!--
12             importPackage( "corelib/services/web/javascript/jwt/MenuBar.js" );
13             importPackage( "corelib/services/web/javascript/jwt/Menu.js" );
14             importPackage( "corelib/services/web/javascript/jwt/MenuItem.js" );
15         //-->
16         </script>
17     </head>
18     <body>
19         <!-- suite -->
20     </body>
21 </html>

Fichier "InclusionEllipse.html"

Notez que pour une meilleur intégration avec la partie serveur, codée en Java, les noms de répertoires et les conventions de nommage utilisées par les fichiers de scripts Ellipse sont mis en correspondance avec les concepts de classes et de packages Java. D'ailleurs, les pages de documentation de type Javascript sont intégrées dans la javadoc du framework.

ATTENTION : les fichiers Javascript du framework Ellipse sont initialement stockés dans le jar (Java ARchive) du framework Ellipse (WEB-INF/lib/EllipseFramework.jar). Lors de la première demande d'une Web Page, la servlet corelib.services.web.webapplications.ControllerServlet se charge, notamment, de désarchiver les fichiers Javascript (la librairie JWT - Javascript Widget Toolkit). A partir de là, ils seront accessibles sur le système de fichiers.

La technique d'importation Ellipse au sein d'une page Web Ellipse

Si vous utilisez le framework Ellipse dans son intégralité (partie serveur et partie cliente), les choses deviennent plus simples encore. Effectivement, et dans cette alternative, la déclaration de la variable globale __APPLICATION_PATH__ et le chargement du fichier corelib/services/web/javascript/Core.js sont auto générés par l'intermédiaire du tag <web:Html>. Du coup la page Web ci-dessous réalise les mêmes chargements de fichiers Javascript que la page HTML vu dans la section précédente.

 
01 <?xml version="1.0" encoding="ISO-8859-1" ?>
02 <web:Html xmlns:web="corelib.services.web.components"
03           xmlns:demo="corelib.services.web.samples.virtualcaddy.webcomponents"
04           codeBehind="corelib.services.web.webapplications.WebPage">
05     <head>
06         <title>Sample HTML page</title>
07         <script language="javascript">
08         <!--
09             importPackage( "corelib/services/web/javascript/jwt/MenuBar.js" );
10             importPackage( "corelib/services/web/javascript/jwt/Menu.js" );
11             importPackage( "corelib/services/web/javascript/jwt/MenuItem.js" );
12         //-->
13         </script>
14     </head>
15     <body>
16         <!-- suite -->
17     </body>
18 </web:Html>

Fichier "Inclusion.wp"

Il faut même noter que dans le modèle de page Web Ellipse, une page web cherche automatiquement à charger un fichier de code Javascript du même nom (la page folder/Essai.wp cherche à charger le fichier folder/Essai.js). En conséquence, voici une autre manière de faire.

 
01 <?xml version="1.0" encoding="ISO-8859-1" ?>
02 <web:Html xmlns:web="corelib.services.web.components"
03           xmlns:demo="corelib.services.web.samples.virtualcaddy.webcomponents"
04           codeBehind="corelib.services.web.webapplications.WebPage">
05     <head>
06         <title>Sample HTML page</title>
07     </head>
08     <body>
09         <!-- suite -->
10     </body>
11 </web:Html>

Fichier "Inclusion.wp"

 
01 importPackage( "corelib/services/web/javascript/jwt/MenuBar.js" );
02 importPackage( "corelib/services/web/javascript/jwt/Menu.js" );
03 importPackage( "corelib/services/web/javascript/jwt/MenuItem.js" );
04 
05 // Suite

Fichier "Inclusion.js"

Explications complémentaires

Pour information, la fonction importPackage ne réalise pas l'injection d'un tag <script src="..."></script> pour charger le nouveau fichier de script. Effectivement cette technique est asynchrone (on sort de la fonction importPackage avant même que le fichier soit totalement chargé). A la place, nous utilisons une technique dérivée d'AJAX pour télécharger le fichier (le download ayant été configuré comme étant synchrone. Une fois le fichier téléchargé, son contenu intégral est injecté dans la page Web. Ainsi, vous pouvez utiliser le contenu de ce fichier de script immédiatement après son importation.

 
    // createAjaxObject is defined in "corelib/services/web/javascript/core.js" script file
    var ajaxObject = createAjaxObject();
    ajaxObject.open( "GET", __APPLICATION_PATH__ + packageName, false /*  synchronous download */ );
    ajaxObject.send( null );	
    window.document.write( "<script language='javascript'><!--\n" );
    window.document.write( ajaxObject.responseText + "\n" );
    window.document.write( "//--></script>\n" );

Extrait de code provenant du fichier "corelib/services/web/javascript/core.js"

ATTENTION : Ellipse Framework vous est proposé en version beta (d'évaluation) afin de vous permettre d'évaluer ce framework. Infini Software se dégage de toutes responsabilités relatives à l'utilisation de ce framework. De plus, Infini Software ne pourra nullement être tenu responsable de l'utilisation des informations présentes dans ces tutoriaux.