Votre première page Ellipse

Alexia Ramaïoli & Dominique Liard

Ellipse Framework est une solution de développement d'applications Web à base de technologies Java et JavaScript. Le but de ce framework est de vous garantir une "haute productivité" lors de la mise en œuvre de vos applications Web. Pour ce faire, un grand nombre d'éléments logiciels vous sont directement proposés par le framework afin d'adresser les principales problématiques de la mise en œuvre d'une application Web. Si vous choisissez le framework Ellipse pour vos développements d'applications Web en Java, il ne vous sera plus nécessaire de chercher à intégrer un certain nombre de solutions distinctes (un framework de développement Web en Java, un moteur de services Web, une API JavaScript complémentaire...) étant donné que le framework Ellipse cherche à répondre à cette problématique.

Parmi les principaux aspects traités par le framework, nous pouvons citer : concept de pages Web, de composants Web réutilisables et de services Web, API côté serveur en Java, API côté client en JavaScript, documentations Java/JavaScript fusionnées, composants Web évolués (DataGrid, histogrammes graphiques à partir de modèle de données, camemberts...), outils d'aide au débogage (moteur de traces), moteur de recherche intégré, moteur de statistiques de navigation... Notez aussi qu'un plugin pour l'EDI Eclipse a été développé afin de faciliter l'utilisation du framework : le plugin Ellipse. Ellipse Framework, ainsi que son plugin sont développés par la société Infini Software.

L'objectif de ce tutoriel est de vous montrer comment créer notre première application Web Ellipse ainsi que notre première page Web. Bien entendu, nous allons utiliser le plugin Ellipse afin de nous simplifier la construction de ces éléments.

Pour réagir à ce tutoriel, un espace de dialogue vous est proposé sur le forum Commentez

- Titre : Votre première page Ellipse

- Auteur : Alexia Ramaïoli & Dominique Liard

- Parution : 3 octobre 2011

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2011 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Création d'un nouveau projet Ellipse

- II. Analyse du projet généré

- III. Le modèle de page Web Ellipse

- IV. Mise en œuvre d'une page Ellipse

- V. La classe de page associée

- VI. Déploiement de l'application sur le serveur

- VII. Premiers tests

- VIII. Remerciements

I - Création d'un nouveau projet Ellipse

Démarrez votre IDE Eclipse : une boîte de dialogue devrait rapidement apparaître pour vous demander quel workspace ouvrir. Nous vous conseillons de créer un nouveau workspace de test afin de ne pas mélanger vos premiers tests du framework Ellipse avec d'éventuels autres projets. Un workspace (un espace de travail en français) est en fait un dossier contenant un certain nombre de projets (chaque projet étant lui-même un sous dossier) : pour créer un nouveau workspace, il vous suffit donc de renseigner un nouveau nom de dossier dans la boîte de dialogue. Si vous souhaitez qu'Eclipse ne vous repose plus la question et qu'il ouvre par défaut ce workspace lors de ses prochains démarrages, cochez la case "Use this as default and do not ask again". Finissez par cliquer sur "Ok". À titre d'exemple voici cette boîte de dialogue correctement renseignée.

Sélection de l'espace de travail (workspace)

Si une fenêtre Welcome vous est présentée, fermez cette fenêtre. Ouvrez le menu File et cliquez sur New, puis Other... (vous pouvez aussi directement appuyer sur les touches CTRL+N). Une boîte de dialogue doit apparaître : elle vous permettra de créer un nouvel élément en vous appuyant sur un assistant (un wizard). Sélectionnez-y l'assistant Java Web Project dans le dossier Java Web Development. La capture d'écran ci-dessous vous montre la localisation de cet assistant.

Création d'un nouveau projet Ellipse

Une boîte de dialogue apparaît : elle permet de configurer le projet à créer. Il est à noter qu'un projet Ellipse est en fait un projet Web Java EE avec quelques spécificités supplémentaires. C'est pour cela que l'assistant traditionnel Dynamic Web Project (pour générer un WAR Java EE) a été réutilisé et enrichi pour les besoins d'un projet Ellipse. Vous connaissez donc peut-être déjà en partie l'assistant considéré. Cet assistant va vous proposer plusieurs écrans successifs afin de collecter toutes les informations requises à la constitution du projet. La capture d'écran ci-dessous vous montre le premier écran de l'assistant. Cet écran requiert un nom pour votre nouveau projet Web : pourquoi pas Demo, mais tout autre nom conviendra tout aussi bien.

Création d'un nouveau projet Ellipse

Notez qu'un projet Web Java peut être associé à un serveur Java EE. Cela permettra de très facilement déployer l'application dans le serveur. Nous vous conseillons donc dès à présent d'y configurer notre Serveur Tomcat. Pour ce faire, cliquez sur le bouton New Runtime.... Une nouvelle boîte de dialogue apparaît : sélectionnez-y la localisation de votre serveur Tomcat (téléchargé durant le tutoriel précédent). Si vous souhaitez sélectionner un autre serveur, laissez-vous guider par l'assistant. La nouvelle capture d'écran ci-dessous vous montre un exemple de configuration pour un serveur HTTP Tomcat. Fermez ensuite cette boîte de dialogue afin de revenir à la précédente.

Création d'un nouveau projet Ellipse

Cliquez sur le bouton Next >. L'écran suivant permet de choisir les noms de deux répertoires. Le premier pour les codes sources et le second pour les binaires (les .class). Vous pouvez conserver les noms proposés par défaut. Cliquez de nouveau sur le bouton Next >. Un nouvel écran permet de choisir le nom du dossier contenant le WAR (nous allons revenir sur ce concept dans quelques instants). Acceptez là aussi les valeurs proposées et cliquez encore sur le bouton Next >.

Un dernier écran vous est proposé : il permet de configurer certains services proposés par le framework Ellipse. Effectivement, le framework Ellipse n'est pas qu'une simple librairie. Il impose une manière de travailler bien particulière (framework = cadre de travail) mais il définit aussi des services que vous pouvez démarrer au sein de vos applications. Parmi ces services, nous pouvons notamment citer :

- le service de trace Ellipse : il permet de tracer les requêtes demandées au serveur HTTP afin de permettre de déboguer vos applications. Chaque trace mémorise un ensemble d'informations relatives à la requête correspondante ainsi qu'à la réponse associée ;

- le service de statistiques : il permet de générer des courbes pour connaître la fréquentation journalière de votre application, les principaux navigateurs utilisés ainsi que les systèmes d'exploitation utilisés ;

- le service d'indexation : le framework Ellipse propose en moteur de recherche par mots-clés intégré. Vous pourrez ainsi aisément proposer des formulaires de recherche aux utilisateurs de l'application Web.

La capture d'écran ci-dessous vous montre la boîte de dialogue de configuration des services Ellipse.

Les services offerts par le framework Ellipse

Notez que pour l'heure, seul le service de traces est activé. Nous nous conseillons de conserver cette configuration. Vous retrouverez à tous moments la possibilité de mettre à jour cette configuration en passant par les propriétés de votre application Web. Il est bien entendu que ce dernier écran est spécifique à l'assistant de construction de projets Web Ellipse, contrairement aux écrans précédents qui eux sont proposés lors de la construction de tous projets Web java plus traditionnels.

II - Analyse du projet généré

Le framework Ellipse s'appuie sur la technologie Java EE est notamment sur le moteur de servlets. Par contre le modèle JSP (Java Server Pages) n'est pas directement utilisé par Ellipse. En conséquence, une application Web basée sur notre framework peut être déployée sur n'importe quel serveur d'applications Java EE (JBoss, Glassfish...). De même une application Web Ellipse respecte la structure du WAR (Web ARchive). Un WAR est une archive de type JAR compatible avec le standard Java EE : dans un serveur d'applications Java EE, on déploie notamment des WAR. Le diagramme suivant vous montre la structure d'un WAR.

La structure d'un WAR

Lorsque Eclipse génère un projet Web, il prépare la génération de ce WAR en produisant la structure de répertoires qui sera ultérieurement archivée dans ce WAR. Cette structure de répertoires est localisée dans le répertoire WebContent de votre projet. Il vous est possible de générer le WAR à tout moment via Eclipse : pour ce faire, cliquez avec le bouton droit de la souris sur votre projet, sélectionnez Export..., puis sélectionnez Web / WAR file.

Les pages Web Ellipse (reconnaissables à l'extension .wp) devront être placées directement dans le répertoire WebContent. Si votre application utilise des images, il vous est, pourquoi pas, possible de les placer dans un sous-répertoire Images, mais ce dossier n'est pas imposé par le standard Java EE. Je vous propose cela juste pour suggérer l'idée de structurer vos fichiers.

Par contre, le répertoire WEB-INF est très important. Il doit être obligatoirement orthographié en majuscules. Il contient l'ensemble des classes Java compilées (qu'elles soient archivées ou non). Les librairies Java devront être localisées dans le sous-répertoire WEB-INF/lib : il ne sera pas nécessaire de forcer la variable d'environnement CLASSPATH, car tout JAR (Java ARchive) placé dans ce répertoire est implicitement accessible. Les fichiers .class, non archivés, devront, quant à eux, être placés dans le sous-répertoire WEB-INF/classes.

Le framework Ellipse est diffusé sous forme d'un unique fichier JAR. Cela simplifie grandement l'installation du framework dans une application Web : effectivement, il suffit de copier son JAR dans le répertoire WEB-INF/lib de l'application considérée. Notez aussi que le plug-in Ellipse réalise automatiquement cette étape. En conséquence, vous devriez déjà trouver le JAR dans le projet que nous venons de construire.

Le répertoire WEB-INF contient aussi un fichier de configuration de votre application Web : le fameux WEB-INF/web.xml. Ce fichier est aussi appelé "descripteur de déploiement" (deployment descriptor). L'utilisation d'un descripteur de déploiement XML est, elle aussi, imposée par le standard Java EE. L'extrait de code suivant vous montre le contenu du descripteur de déploiement produit dans notre projet.

Descripteur de déploiement "web.xml"

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>Demo</display-name>
<context-param>
<param-name>TRACE_ENABLED</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>TRACE_LOCALHOST_ONLY</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>TRACE_URL</param-name>
<param-value>Trace.wp</param-value>
</context-param>
<context-param>
<param-name>TRACE_MAX_COUNT</param-name>
<param-value>1000</param-value>
</context-param>
<context-param>
<param-name>STATISTICS_ENABLED</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>SEARCH_ENGINE_ENABLED</param-name>
<param-value>false</param-value>
</context-param>
<listener>
<listener-class>corelib.services.web.webapplications.__ApplicationListener</listener-class>
</listener>
<listener>
<listener-class>corelib.services.web.webapplications.__SessionListener</listener-class>
</listener>
<servlet>
<servlet-name>Ellipse Servlet</servlet-name>
<servlet-class>corelib.services.web.webapplications.ControllerServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Ellipse Servlet</servlet-name>
<url-pattern>*.wp</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Ellipse Servlet</servlet-name>
<url-pattern>*.ws</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>Index.html</welcome-file>
</welcome-file-list>
</web-app>

En début de fichier, on trouve des informations relatives aux différents services Ellipse qui sont activés ou non. Bien entendu cette configuration dépend des informations saisies précédemment dans l'assistant de création du projet Web Ellipse. Ensuite des listeners Java EE sont enregistrés : je passe ce point qui pour l'heure ne nous intéresse pas réellement. Ensuite la servlet ControllerServlet, point d'entrée des requêtes Ellipse pour votre application, est déclarée et associée aux extensions .wp et .ws.

Il n'est pas nécessaire de déployer les codes sources de l'application dans le WAR, pour qu'il fonctionne. C'est pour cela qu'ils sont stockés à l'extérieur du dossier WebContent.

III - Le modèle de page Web Ellipse

Modèle de page Web Ellipse

Pourquoi parle-t-on de framework en parlant de la solution Ellipse ? Parce qu'elle essaye de vous imposer un cadre de travail structuré. De notre point de vue, une page Web contient trois types d'informations bien distincts (on peut même parler de quatre types si l'on rajoute les aspects liés aux styles CSS, mais oublions ce point pour le moment). Ces trois types d'informations sont "dispatchées" dans trois fichiers distincts, chacun d'entre eux ayant une responsabilité bien précise.

- La page Web Ellipse, écrite via un formalisme XML. La syntaxe XML étant bien plus stricte que celle de HTML 4.01, il vous est vivement conseillé de bien respecter cette syntaxe sans quoi une erreur sera produite systématiquement lors des demandes d'affichage de la page. Ce fichier XML pourra définir des tags HTML ainsi que des tags de composants Ellipse. Ces derniers seront préfixés d'un namespace (un espace de nom) ce qui permettra de facilement les distinguer des tags HTML (sans namespace).

- La classe de page, qui est un fichier Java traditionnel qui contient le code rattaché à la page, mais qui s'exécutera sur le serveur HTTP. Cette classe devra dériver de la classe corelib.services.web.webapplications.WebPage. Dans certains cas très basiques, on pourra se passer de cette classe et directement associer la page Web Ellipse à la classe corelib.services.web.webapplications.WebPage.

- Le fichier de code JavaScript qui contient le code rattaché au traitement de cette page, mais s'exécutant sur le navigateur utilisé. Ce fichier est facultatif.

Comme vous commencez à le comprendre on cherche à séparer la structure HTML, du code client JavaScript et du code serveur Java. Néanmoins pour lier tous les aspects d'une page Web, certaines règles devront être respectées. Nous conseillons aussi d'utiliser les mêmes noms de fichier aux extensions près. D'ailleurs dans le cas du fichier de code JavaScript, ce respect du nom est obligatoire si vous souhaitez que le fichier JavaScript soit automatiquement chargé par la page.

ATTENTION : CONTRAIREMENT À JSP, ELLIPSE NE PERMET PAS D'INJECTER DU CODE DIRECTEMENT DANS LA PAGE WEB, VIA UNE SÉQUENCE <%= %> OU ÉQUIVALENT.. Il est aussi fortement conseillé de ne mettre aucune ligne de code JavaScript dans la page Web : ce n'est pas la place de ce type de code.

C'est la page Web qui sera mise en relation avec la classe de page associée, néanmoins il ne s'agira pas d'un lien d'héritage. La page Web est un document XML, elle est chargée en mémoire dans le serveur par l'intermédiaire d'un DOM (Document Object Model). Elle ne servira pas à produire une classe de code Java qui aurait pu hériter de je ne sais quoi. Certains pourront insister sur le fait que ne pas compiler la page Web (comme c'est le cas dans beaucoup d'autres framework Web) induit des performances moins intéressantes, néanmoins cela confère d'autres possibilités en termes de génération de tags en dynamique. Nous y reviendrons ultérieurement.

IV - Mise en œuvre d'une page Ellipse

Pour mettre en œuvre notre première page Web, nous allons encore une fois utiliser un assistant Ellipse. En premier lieu, vérifier la perspective utilisée par Eclipse. Comme votre Eclipse peut intégrer un grand nombre de plug-ins, il pourrait vous proposer un très grand nombre d'assistants dans un éventuel menu contextuel. Pour éviter ce genre de problème, l'IDE Eclipse propose la notion de perspective. Une perspective est en quelque sorte une manière de voir votre IDE en fonction du travail en cours : du coup, un filtre est effectué sur les assistants et autres éléments présentés. Dans le cas présent, il vous est fortement conseillé de vous placer dans une perspective Ellipse, adaptée pour un développement d'application Web basé sur le framework Ellipse (bien entendu). Si ce n'est pas déjà le cas, changer de perspective en cliquant sur le bouton de changement de perspective localisé dans le coin supérieur droit de votre atelier. La capture d'écran suivante vous montre le résultat à obtenir au final.

La perspective en cours

Nous allons maintenant créer la page Web. Pour ce faire, placez la souris sur la vue Package Explorer. Cliquez avec le bouton droit : un menu contextuel apparaît. Sélectionnez-y New, puis Web Page, comme indiqué dans la capture d'écran ci-dessous. L'assistant de création de page Web devrait apparaître. Il est à noter que l'assistant est aussi accessible à partir du bouton New Web Page présent dans la barre d'outils de votre IDE (attention, pour visualiser ce bouton, il vous faut être en perspective Ellipse).

Lancement de l'assistance de création d'une nouvelle page Web Ellipse

Une boîte de dialogue devrait normalement apparaître. Elle va vous permettre de spécifier les caractéristiques des fichiers à générer : effectivement, comme nous l'avons vu plus haut, une page Web Ellipse peut être constituée de plusieurs fichiers (la page Web à proprement parler, le fichier de code client JavaScript et le fichier de code serveur en Java). Le seul fichier obligatoire est celui de la page Web. L'assistant vous permettra de choisir si les deux autres fichiers doivent être produits ou non. Bien entendu, si les fichiers n'ont pas tous été générés initialement, il vous sera possible par la suite et à tous moments de les rajouter. Veuillez renseigner la boîte de dialogue comme montré ci-dessous afin de produire votre première page Web ainsi que la classe Java associée.

L'assistance de création d'une nouvelle page Web Ellipse

Au terme de la construction des fichiers relatifs à votre page Web, un éditeur est ouvert. Il permettra, grâce aux onglets proposés en bas de l'éditeur, de visualiser le contenu de chaque fichier constituant cette page Web. Si un fichier n'a pas été initialement produit, l'onglet associé vous permettra de créer le fichier considéré. Les trois captures d'écran ci-dessous vous montrent le contenu de chaque onglet.

Le contenu de la page Web (FirstPage.wp)

L'éventuel contenu JavaScript (FirstPage.js)

L'éventuelle classe de page Java (FirstPage.java)

Nous allons maintenant nous intéresser au codage d'une page Web à proprement parler. Dans l'exemple proposé, nous allons définir un formulaire permettant de s'authentifier avec un login et un mot de passe. Pour définir les différents champs de formulaire, nous n'allons pas utiliser les tags HTML <input> traditionnels, mais nous allons plutôt utiliser les tags de composants Web Ellipse relatifs à la gestion des formulaires. Ceux-ci permettront de plus facilement récupérer les valeurs saisies côté serveur. De plus des composants Web de validation de champs de formulaire sont aussi proposés par le framework Ellipse : cela permettra de très facilement contrôler les saisies effectuées. Voici le contenu d'une telle page Web.

Contenu de la page Web (fichier FirstPage.wp)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
codeBehind="com.is.demo.FirstPage">
<head>
<title>Logon screen</title>
<link rel="stylesheet" type="text/css" href="CssStyles.css" />
</head>
<body>
<h1>Logon screen</h1> <br />

<web:Form focus="txtLogin" method="post">
<div align="center">
Login :
<web:TextBox id="txtLogin" value="AUser" />
<web:RequiredValidator componentToValidate="txtLogin"
errorMessage="Value is required" cssClass="Validator" />
<br/>

Password :
<web:TextBox id="txtPassword" value="P@ssw0rd" type="password" />
<web:RequiredValidator componentToValidate="txtPassword"
errorMessage="Value is required" cssClass="Validator" />
<br /> <br/>

<web:Button id="btnConnect" value="Connect" /> <br />
<web:OutputText id="lblResult" cssClass="Validator" />  <hr />

<div id="divTime" runAt="server"></div>
</div>
</web:Form>
</body>
</web:Html>

Comme vous pouvez le voir, nous sommes face à un fichier XML (eXtensible Markup Language) qui contient néanmoins un ensemble de tags HTML (HyperText Markup Language) pour définir la structure de la page. Mais si vous y regardez de plus près, il y a aussi d'autres tags préfixés par web:.

Ces tags permettent de créer des composants Ellipse côté serveur, qui après le traitement de la page, généreront du HTML. Cette approche permettra de créer des composants Web réutilisables, qui supporteront notamment des événements ainsi qu'un modèle de liaison de données (nous y reviendrons ultérieurement). Néanmoins il faut que le framework Ellipse puisse faire le lien entre la classe Java du composant et le tag équivalent dans la page Web. Pour ce faire, deux techniques sont envisageables.

TECHNIQUE 1 : vous utilisez le concept de namespace XML pour y stocker le package contenant la classe considérée. Le tag <corelib.services.web.components:Button /> permettra ainsi d'instancier un composant de type corelib.services.web.components.Button.

TECHNIQUE 2 : c'est celle montrée dans l'exemple de page Web précédent. Le langage XML permet de définir des alias sur les namespaces utilisés. Cela se fait traditionnellement sur le tag racine de votre document XML via la construction xmlns:alias="URI". Le framework Ellipse réutilise cette technique pour y définir des alias sur les packages utilisés. Ainsi, si l'on considère la page Web précédente, le tag <web:TextBox id="txtLogin" value="AUser" /> est basé sur l'alias web qui est mis en association (sur le tag <web:Html>) avec le package corelib.services.web.components. Bien entendu, ce package devra fournir une classe TextBoxTextBox.

Quelle que soit la technique utilisée, vous n'avez pas le choix sur le nom du tag. Si vous souhaitez créer un objet de type Button, la partie qui suit le caractère « : » devra obligatoirement être Button. Ensuite notez qu'une classe expose des propriétés : des méthodes d'accès aux attributs de la classe. En Java les accesseurs aux attributs respectent le modèle JavaBeans. Ellipse respecte donc aussi ce standard. En conséquence, <web:Button value="Hello" /> permettra de créer en mémoire, au niveau du serveur Web, un objet de type corelib.services.web.components.Button sur lequel la méthode setValue sera invoquée pour mémoriser la valeur "Hello".

Contrairement à la mise en œuvre d'une simple page Web, le framework Ellipse est très strict. Si un composant Web Ellipse ne correspond pas très exactement à une classe ou si un des attributs du tag ne correspond pas à une des propriétés de la classe considérée, une erreur vous sera retournée. Cela vous évitera de publier des erreurs que vous n'auriez pas visuellement décelées.

V - La classe de page associée

Dans l'absolu, une page Web Ellipse n'est pas obligée d'être associée à une classe de page Ellipse. Si vous ne souhaitez pas lui associer de code, vous devez utiliser l'attribut codeBehind="corelib.services.web.webapplications.WebPage" sur le tag <web:Html>. ATTENTION tout de même : si vous n'utilisez pas de classe de page, vous serez dans l'incapacité de définir des gestionnaires d'événements (côté serveur) sur vos composants Web Ellipse !

Si au contraire vous souhaitez fournir une classe de page, commencez en premier lieu par la coder. Une page Ellipse possède un cycle de vie bien particulier induit par le fonctionnement interne du framework. Nous reviendrons ultérieurement sur les détails du cycle de vie d'une page Ellipse. Néanmoins, pour réagir aux différentes étapes de ce cycle de vie, vous devez redéfinir certaines méthodes. Ces méthodes sont en fait définies sur la classe corelib.services.web.webapplications.WebPage : votre classe Java doit donc hériter de WebPage et redéfinir certaines méthodes-clés. Voici un exemple de classe de page Ellipse permettant de récupérer les données soumises par le formulaire précédemment proposé.

Contenu de la classe de page Web (fichier FirstPage.java)

01 package com.is.demo;
02
03 import corelib.services.web.components.Button;
04 import corelib.services.web.components.OutputText;
05 import corelib.services.web.components.TextBox;
06 import corelib.services.web.components.events.ActionEvent;
07 import corelib.services.web.components.events.ActionListener;
08 import corelib.services.web.webapplications.WebPage;
09 import corelib.services.web.webapplications.events.WebPageEvent;
10
11 public class FirstPage extends WebPage {
12
13       private TextBox     txtLogin    = null;
14       private TextBox     txtPassword = null;
15       private Button      btnConnect  = null;
16       private OutputText  lblResult   = null;
17
18
19       public void page_load( WebPageEvent webPageEvent ) {
20           this.traceLogger.info( "Virtual Caddy", "page_load" );
21           this.btnConnect.addActionListener( new ActionListener() {
22               public void actionPerformed( ActionEvent event ) {
23                   btnConnect_actionPerformed( event );
24               }
25           });
26       }
27
28       public void btnConnect_actionPerformed( ActionEvent event ) {
29           String login = txtLogin.getValue();
30           String password = txtPassword.getValue();
31
32           if ( login.equals( "AUser" ) && password.equals( "P@ssw0rd" ) ) {
33               this.session.setAttribute( "user", login );
34               this.redirect( "SelectArticle.wp" );
35           } else {
36               lblResult.setText( "Bad connection for user : " + login );
37             this.traceLogger.warning( "Virtual Caddy", "Bad connection" );
38             this.traceLogger.error( "Virtual Caddy", "Bad connection" );
39         }
40     }
41 }

Donc, comme nous l'avons dit, la ligne 11 déclare la classe en la faisant dériver de la classe WebPage. Ensuite, des attributs sont définis : ne cherchons pas à les instancier (ne placez pas de new), cela ne servirait à rien, car le framework Ellipse le fera automatiquement. Notez néanmoins que le nom de ces attributs ainsi que leur type doivent correspondre très exactement à ce qui est déclaré dans la page Web associée. Les données qui seront saisies (sur le navigateur), par le biais de ces composants, seront transférées dans la requête HTTP, récupérées par le framework Ellipse et stockées dans les instances de composants Web dont nous sommes en train de parler. Contrairement à certains frameworks de développement Web (servlet et JSP notamment), il n'est pas nécessaire d'extraire les données de la requête HTTP : cela est fait automatiquement.

Parmi ces quatre attributs, nous trouvons notamment deux zones de saisie de texte (ligne 13 et 14), un bouton de soumission du formulaire et un label permettant, lors de la réponse du serveur (vers le navigateur), de renvoyer un message suite à une mauvaise soumission du formulaire. Notez bien que ces trois types de composants Ellipse font partie du package corelib.services.web.components.

Ensuite, en ligne 19, nous avons la méthode page_load : elle a été redéfinie et fait partie du cycle de vie d'une page Ellipse. Elle sera appelée par le framework dès lors que la page sera entièrement construite au niveau du serveur Web, mais avant le renvoi de la réponse HTML. Cette méthode réalise deux choses : en ligne 20, une trace est ajoutée (vous pourrez la visualiser en demandant l'affichage des traces - http://localhost:8080/Demo/Trace.wp) et en ligne 21 un gestionnaire de clic sur le bouton est ajouté.

Attention, nous parlons ici d'un gestionnaire d'événement de type serveur. Si la personne visualisant la page clique sur le bouton du formulaire (dans le navigateur utilisé), les données saisies dans le formulaire sont envoyées au serveur, et la méthode btnConnect_actionPerformed sera alors invoquée. Notez que la gestion des événements suit la technique préconisée (toujours par le modèle JavaBeans) par Java : les fameux listeners (ou écouteurs en français).

Enfin, à partir de la ligne 28, nous trouvons le code de notre gestionnaire d'événement côté serveur. Celui-ci récupère les données saisies pour le login et le mot de passe (ligne 29 et 30) et vérifie si la connexion de cet utilisateur est autorisée ou non (ligne 32). Voici un couple login/password valide : Login=AUser et Password=P@ssw0rd (ce sont de plus les valeurs saisies par défaut dans le formulaire). Notez aussi qu'en cas d'échec, des traces en warning et en erreur sont produites.

Vous pouvez télécharger l'application de démonstration du framework Ellipse. En naviguant dans le code de cette application vous pourrez trouver une implémentation plus poussée de la validation de l'utilisateur. Ce code se trouve dans la classe UserHome : celle-ci se propose de simuler une base de données contenant une table d'utilisateurs autorisés à se connecter à notre application de démonstration.

VI - Déploiement de l'application sur le serveur

Pour déployer votre application Web dans votre serveur Java EE, il ne vous reste plus qu'à vous placer sur le fichier FirstPage.wp (dans l'explorateur de projet ou dans un éditeur), de cliquer avec le bouton droit de la souris et de sélectionner "Run As" / "Run On server". Acceptez les choix proposés : le serveur Web devrait démarrer et la page s'afficher dans le navigateur.

VII - Premiers tests

Si tout se passe bien, un écran d'authentification devrait apparaître. Testez cet écran avec une identité quelconque, puis testez ensuite le login et le password attendu et vous devriez ainsi passer à l'écran suivant (sauf que pour l'heure la page suivante n'existe pas et donc une erreur de type 404 devrait vous être proposée).

Ensuite, vous pouvez aussi essayer d'afficher les traces en utilisant l'adresse suivante : http://localhost:8080/Demo/Trace.wp. Vous devriez retrouver dans les rapports de traces, les informations qui y ont été consignées durant les différents essais d'authentification. La capture d'écran ci-dessous vous montre un exemple de cet écran de traces.

Utilisation des traces Ellipse

En cliquant sur l'une des traces, vous pouvez obtenir les informations associées à cette trace. En voici un exemple d'affichage.

Utilisation des traces Ellipse

VIII - Remerciements

Merci à Mickeal Baron d'avoir cru en Ellipse Framework, et nous avoir permis de publier nos tutoriels sur "Developpez.com".

Merci à Claude Leloup pour sa relecture orthographique.

Merci à tous ceux qui font confiance à Ellipse Framework.

L'équipe Ellipse.