Hello World

Comme tout bon tuto en ligne, commençons avec un exemple qui effectue un simple "Hello World!". Ce projet permettra de mettre en place les bases d'une application.

Si cela n'est pas déjà fait, veuillez débuter avec le document 01 - intro.md qui construit l'environnement que nous utilisons dans le présent exercice.

Structure de l'application

On commence par créer l'arborescence de l'application. Dans le cas présent, on peut se contenter d'un fichier de configuration et d'un script. Dans la version actuelle, Ewt est pré-configuré pour charger les applications depuis le dossier /opt/ewt/. Nous allons donc construire notre application à cet endroit. L'arborescence aura la forme suivante:

C:\opt\ewt
└───hello
    ├───policies
    │   └───main.policy
    ├───scripts
    │   └───hello.script
    └───config.xml

Fichier de configuration config.xml

Commençons par la configuration. Nous pouvons construire le fichier de configuration ainsi:

<?xml version="1.0" encoding="UTF-8"?>
<config>
  <admin>
    <runMode>dev</runMode>
  </admin>
  <notifications>
    <notification name="incoming-get-request:web">hello.script</notification>
  </notifications>
</config>

Le bloc admin contient des paramètres d'administration de l'application. Ici nous y définissons le mode d'exécution de l'application (élément runMode). Le mode dev est réservé au développement. Si on ne le spécifie pas explicitement, le moteur considère que l'application fonctionne en mode production, ce qui est moins pratique pour le développement.

Le bloc notifications permet d'indiquer que l'on veut notifier le script hello.script lorsqu'une requête arrive via GET sur la servlet web.

Script hello.script

Le fichier hello.script est le cœur de notre application. Il a pour rôle de traiter la requête reçue du client et d'y répondre. Nous pouvons le construire ainsi:

var name = $request.getLogin();
$response.addContent("Hello ${name} !");

Le script est très simple : il récupère le login de l'utilisateur connecté et retourne un message qui reprend cette valeur.

Encoding

Le script ci-dessus ne contient pas de caractères spéciaux, mais il est malgré tout recommandé de le sauvegarder avec un encoding utf-8 car par défaut le moteur charge le script selon ce charset.

Si toutefois il ne devait pas être possible d'utiliser ce charset, vous pouvez alors utiliser un autre charset et le déclarer via une annotation, par exemple @encoding("iso-8859-1"). Cette annotation doit figurer en tant que première ligne du fichier.

Test

Pour tester l'application, il suffit de démarrer Tomcat et de se connecter sur l'application via l'URL http://localhost:8080/ewt/web/hello.

Normalement, le serveur d'application devrait afficher un prompt pour demander un login et un mot de passe. Vous pouvez inscrire les éléments que nous avons définis dans le fichier tomcat-users.xml. Dans notre exemple, nous avons utilisé les valeurs user et 1234.

Une fois l'authentification effectuée, l'application devrait afficher une page avec le texte Hello user !.

Interaction

Ajoutons un peu d'interaction entre la page web et l'application. Pour ce faire, nous allons:

1. modifier l'application pour permettre de saisir un champ
2. ajouter une fonction d'envoi de formulaire par POST
3. traiter le formulaire et y répondre

Le traitement de formulaire reçu via POST suppose que notre script soit notifié lorsque ce type d'événement se produit. Nous commençons donc par ajouter ce type de notification à notre configuration. Pour cela, éditez le fichier config.xml et ajoutez la notification suivante à la suite de la notification déjà en place:

<notification name="incoming-post-request:web">hello.script</notification>

Nous modifions ensuite le script pour qu'il soit en mesure de réaliser les trois opérations décrites ci-dessus (ajouter un champ de formulaire, ajouter une fonction d'envoi de formulaire et traiter sa valeur lorsque le formulaire est renvoyé). La nouvelle version du script devient alors:

var name = $request.getLogin();
if ($$.notification.name == "incoming-post-request") {
  name = $request.getParameter("name");
}

$response.setContentType("text/html");

$response.addContent(
  `<html><body><form method="post">
     <h1>Hello ${name} !</h1>
     <p>Your name: <input type="text" name="name" value="${name}"/></p>
     <p><button type="submit">send</button></p>
   </form></body></html>`::t);

La première ligne est identique à celle du script initial.

Notre script étant maintenant appelé à la fois dans le cas de requêtes GET et de requêtes POST, il faut distinguer les deux cas. Le bloc if ($$.notification.name == "incoming-post-request") { ... } permet de traiter le cas où le script est invoqué suite à une requête de type POST (notification incoming-post-request). Dans ce cas, l'instruction $request.getParameter("name") permet de récupérer la valeur du champ name reçu dans le formulaire HTML.

La suite du code sert à construire la réponse HTML. En premier lieu, l'instruction $response.setContentType() est ajoutée pour forcer le Content-Type de l'entête de notre réponse à text/html. Cela permet de s'assurer que la réponse sera bien interprétée comme du HTML. À noter au passage que l'on aurait également pu noter

$response.setHeaders({
  "Content-Type": "text/html"
});

La suite du code consiste à construire la réponse HTML. On y retrouve le code qui affiche le message Hello ... ! ainsi que les nouvelles lignes ajoutées à notre réponse HTML.

Le champ de formulaire <input type="text" name="name" value="${name}"/> est le champ dans lequel l'utilisateur est invité à saisir une valeur. Il s'agit ni plus ni moins que du champ dont on a récupéré la valeur par l'instruction $request.getParameter("name") plus haut.

Notez au passage les délimiteurs ` utilisés pour le code HTML. Ici, on utilise ce délimiteur pour éviter de devoir échapper les " des attributs d'éléments. Pour information, Ewt autorise 3 types de délimiteurs: ", ' et `. Tous les trois sont identiques et permettent de définir une chaîne de caractères sur une ou plusieurs lignes.

Le suffixe de chaîne ::t indique que l'on souhaite ignorer les retours lignes et les indentations de la chaîne dans la valeur finale. Le langage supporte d'autres types de suffixes qui sont décrits dans la documentation de référence.

Test

Notre application étant très basique, elle n'intègre pas de fonctionnalité permettant de recharger la configuration à la volée. Par conséquent, la solution la plus simple pour forcer un rechargement de config consiste à redémarrer le serveur d'application.

Une fois que c'est fait, nous pouvons voir le résultat en ouvrant l'URL http://localhost:8080/ewt/web/hello dans un navigateur. On peut alors modifier la valeur du champ et soumettre le formulaire. La nouvelle valeur est alors prise en compte dans le titre.

Conclusion

Nous avons vu ici comment construire une application très basique. En particulier, cela a permis de montrer comment un script peut construire des pages et des formulaires. Cependant, le cas d'exemple montré ici n'est pas représentatif d'une application Ewt standard. On se rend assez vite compte que construire une application de gestion de données de cette façon deviendrait vite fastidieux. De plus, la page que nous avons construite est assez pauvre du point de vue du style.

Dans la prochaine leçon, nous allons mettre en place une description métier qui permet de gérer des données de façon plus pratique. L'application utilisera un jeu de styles pré-construits.