Online Training

Tutoriel pas à pas

Ceci est un tutoriel d'introduction pour les nouveaux utilisateurs de ZK. Nous allons vous guider dans le développement d'une application Web simple utilisant une base de données, et fournir les explications pas à pas. Bien que ce didacticiel soit destiné aux nouveaux utilisateurs de ZK, il exige de la part des nouveaux utilisateurs un peu d'expérience avec Java. Et c'est tout ce qu'il faut savoir pour le développement d'une application Web utilisant AJAX avec ZK.

Pour ce tutoriel, il est supposé que vous avez installé JDK (1.4 ou supérieur), et un container de servlet (ex.Tomcat).

This tutoriel est divisé en deux parties,

  • Partie 1, l'interface utilisateur
  • Partie 2, la liaison de l'interface utilisateur à la base de données

Si vous êtes intéressé par le développement d'une application propre à vous, vous devriez lire ceci sur la façon de configurer le dossier de développement.

Une première application ZK (To do list)

Supposons, pour palier à notre distraction, que nous nécessitions une application capable de gérer les évènements à venir. Nous allons créer une simple application Web avec une base de données derrière. Une base de données JAVA (HSQL DB) sera utilisée car elle ne nécessite l'installation d'aucun serveur de base de données.

Essayez cette application   Live Demo

  1. Téléchargez le fichier todo.zip, et dézipper le fichier qui inclut un fichier war et un dossier
  2. Déployez cette application sous Tomcat en copiant le fichier todo.war dans le dossier $TOMCAT_HOME/webapps/. Tomcat se chargera du reste, dézippage et déploiement compris.
  3. Copiez le dossier hsqldb (fichiers de la base de données) à la racine du répertoire de développement.(ex.C:\)
  4. Démarrez votre Tomcat.
  5. Ouvrez votre navigateur, et tapez l'adresse http://localhost:8080/todo/todo.zul (le numéro de port dépend de la configuration de votre Tomcat), vous devriez voir la page montrée ci-dessous.

Scenario courant

  • Encodez les informations relatives à un évènement, et appuyez sur le bouton Add pour l'insérer dans la base de données.
  • Sélectionnez n'importe quelle ligne dans le tableau pour afficher et modifier, dans les champs en dessous, les information relatives à un évènement, ensuite appuyez sur le bouton Update pour mettre à jour l'évènement.
  • Sélectionnez une ligne dans le tableau, et cliquez sur le bouton Delete pour effacer l'évènement correspondant.

Pages Interface Utilisateurs

Votre premier composant ZK

La première étape consiste en la création d'un fichier dont l'extension est zul, prenons pour l'exemple todo.zul, et placez ce fichier dans le home directory de votre application web, par exemple, $TOMCAT_HOME/webapps/ProjectName/. Déclarer un composant ZK est identique à l'utilisation d'HTML, et déclarez votre premier composant window comme suit,


<window title="To do list" width="640px" border="normal">
</window>

Démarrez ensuite Tomcat, et utilisez votre navigateur pour vous rendre à l'adresse, ex: http://localhost:8080/todo/todo.zul. le résultat est présenté ci-dessous, une window intitulée “To do List”.

Dans ZK, tout est composant, vous pouvez donc changer le titre, la largeur, ou la bordure de cette window selon vos préférences. C'est simple et intuitif. Essayez de modifier ces attributs et observez le résultat.

Relations hiérarchiques entre les composants ZK

Ensuite, essayons d'enrichir cette page avec davantage de composants ZK. Si nous devons présenter des données dans un tableau, nous pourrions déclarer un composant listbox qui est utilisé pour afficher des données dans les tags du composant window comme suit,


<window title="To do list" width="640px" border="normal">
 <listbox id="box" multiple="true" rows="4">
  </listbox>
</window>

Dans cet exemple, le composant listbox est devenu un "enfant" du composant window. Oui, il existe une relation hiérarchique entre les composants ZK. Donc, vous allez vous heurter à une erreur de l'UI si vous déclarer un composant de façon erronée. Par exemple, déclarer un composant window comme étant un enfant d'un composant listbox va poser un problème.

Un composant imbriqué

Dans la déclaration de la listbox, l'attribut id est utilisé pour spécifier un identifiant (“box”) de la listbox de sorte que nous utiliserons “box” pour faire référence à la listbox. De plus, la listbox est un composant imbriqué , qui inclut deux composants fils, listhead (aka: colonne du tableau), et listitem (aka: ligne du tableau).


<window title="To do list" width="640px" border="normal">
 <listbox id="box" multiple="true" rows="4">
  <listhead>
   </listhead>
   <listitem>
   </listitem>
 </listbox>
</window>

Bien que l'on n'ait pas encore terminé, déclarons 3 composants listheader à l'intérieur des balises de listhead vu que nous avons besoin de 3 colonnes dans ce tableau (“Item”, “Priority” et “Date”) comme suit,


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
      <listheader label="Priority" width="50px" />
      <listheader label="Date" width="90px" />
  </listhead>
  <listitem>
  </listitem>
 </listbox>
</window>

Et le résultat est ci-dessous,

Vu que nous avons 3 colonnes dans ce tableau, chaque ligne nécessite 3 champs. Il faut donc déclarer 3 composants listcell à l'intérieur des balises des composants listitem.


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
   <listheader label="Priority" width="50px" />
   <listheader label="Opened" width="90px" />
  </listhead>
  <listitem>
   <listcell/>
      <listcell/>
      <listcell/>
  </listitem>
 </listbox>
</window>
La structure imbriquée du composant listbox est comme suit, 

+listbox
  +listhead
    listheader
  +listitem
    listcell

Composants pour l'entrée des données

En plus d'afficher les évènements dans la listbox, il est nécessaire d'entrer des informations décrivant l'évènement, tels que son nom (au format texte), sa priorité (par une valeur numérique), et sa date (par un format date). Nous allons donc déclarer une textbox, une intbox, et une datebox dans les balises du composant window comme suit,


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
   <listheader label="Priority" width="50px" />
   <listheader label="Opened" width="90px" />
  </listhead>
  <listitem>
   <listcell/>
   <listcell/>
   <listcell/>
  </listitem>
 </listbox>
  <listcell/>
  Item:<textbox id="name" cols="50" />
    Priority:<intbox id="priority" cols="1" />
    Date:<datebox id="date" cols="8"/>
    <button label="Add" width="36px" height="24px"/>
    <button label="Update" width="46px" height="24px"/>
    <button label="Delete" width="46px" height="24px"/>
</window>

Le résultat est illustré ci-dessous,

Composants de Layout

Pour différencier ces composants d'entrée de données par rapport au composant listbox du début dans le layout, nous déclarons un composant groupbox chargé de grouper les composants d'entrée de données ensemble, et une bordure est dessinée autour de ces 3 composants.


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
   <listheader label="Priority" width="50px" />
   <listheader label="Opened" width="90px" />
  </listhead>
  <listitem>
   <listcell/>
   <listcell/>
   <listcell/>
  </listitem>
 </listbox>
    <groupbox>
              <caption label="Event" />
       Item: <textbox id="name" cols="50" />
       Priority: <intbox id="priority" cols="1" />
       Date: <datebox id="date" cols="8">
       <button label="Add" width="36px" height="24px"/>
       <button label="Update" width="46px" height="24px"/>
       <button label="Delete" width="46px" height="24px"/>
    </groupbox>
</window>

En plus du composant groupbox, nous déclarons un composant caption pour afficher un label “Event” au dessus du grooupebox. Le composant caption fonctionne de manière similaire à l'élément HTML bien connu. Le résultat est affiché ci-dessous,

Maintenant que la partie interface utilisateur est achevée, l'étape suivante consiste en la liaison de la page avec la base de données.

Voir la Partie 2.