Creating a Simple Sightseeing Application"

From Documentation
Line 1: Line 1:
 +
=Before You Start=
 +
 +
Translations are available in [[ZK_Getting_Started/Creating_a_Simple_Application|English]] and [[ZK_Getting_Started_es/Creating_a_Simple_Application|Español]].
 +
 +
'''Other resources'''
 +
 +
* [[ZK_Getting_Started/Tutorial|Tutorial]] - A brief tutorial guides you through the most fundamental features and concepts of ZK.
 +
* [[ZK_Installation_Guide_fr/Quick_Start/Create_and_Run_Your_First_ZK_Application_with_Eclipse_and_ZK_Studio|Creating Hello World with Eclipse and ZK Studio]] - Step by step to create a Web application from scratch with Eclipse and [http://www.zkoss.org/product/zkstudio.dsp ZK Studio].
 +
* [[ZK_Getting_Started_fr/Creating_a_Database-driven_Application|Creating a database driven application]] - Step by step to create a database-driven application.
 +
 
=Introduction=
 
=Introduction=
  

Revision as of 10:19, 29 September 2010

Before You Start

Translations are available in English and Español.

Other resources

Introduction

Ce tutoriel est un guide rapide qui met l'accent sur l'explication des forces de ZK à partir d'un exemple. Si vous préférez un tutoriel pas à pas, merci de vous rendre ici Tutoriel pas à pas.

Dans ce tutoriel, nous allons présenter deux manières de construire une application web utilisant Ajax avec ZK, une manière standard (sans liaison de données), et une manière avancée (avec liaison de données).

Un exemple tiré du monde réel Live Demo

Supposons que vous vouliez mettre en place une application de tourisme avec Google Maps comme suit. La page est divisée en trois parties, un tableau à gauche, une Map Google à droite, et une fenêtre au pied de la page.

Resort-s.jpg

  • Ajax en Action: lorsque l'utilisateur choisit un élément dans le tableau, sa localisation sera affichée sur la Map Google, et ses coordonnées seront inscrites dans la fenêtre.

Le Modèle de Données

Suivant les éléments requis dans l'application web, le modèle de données nécessite quatre attributs : nom, description, latitude et longitude.

public class Resort {
 private String _name;
 private String _description;
 private Double _latitude;
 private Double _longitude;

 public Resort(){};
 public Resort(String name, String description, Double latitude, Double longitude) {
  _name = name;
  _description = description;
  _latitude = latitude;
  _longitude = longitude;
 }
 // getter and setter methods are omitted.
 }

Une manière standard de procéder (sans liaison de données)

Avant toute chose, la manière standard de construire une application web avec ZK va être introduite. Dans cet exemple, vous allez apprendre comment utiliser ZK, et expérimenter sa puissance.

Réaliser le design de l'interface utilisateur en utilisant le langage à balises ZK

Le premier fichier que nous développons est resort.zul, il inclut une listbox (table), une gmaps(Google Maps), et un groupbox(pane).

Dans ce fichier zul (resort.zul), il n'y a aucun code Java ou scripts, et la clarté de la page est gardée. Ces codes sont définis dans un fichier Java distinct — ResortController.java.

L'interaction entre le fichier zul et le fichier Java dépend des agissements de l'utilisateur. Quand l'utilisateur sélectionne un élément de la listbox, l'évènement onSelect est déclenché, et la méthode refreshUI() du ResortController.java est invoquée pour afficher l'élément sélectionné sur la Map Google, et pour indiquer les coordonnées de cet élément.

<!-- resort.zul -->
<window id="win" use="org.zkforge.resort.ui.ResortController" title="ZK Tutorial" width="1024px" border="normal">
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG
8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA" type="text/javascript"/>
 <hbox>
<listbox id="lb" onSelect="win.refreshUI()">
  <listhead sizable="true">
   <listheader label="Name" width="100px"/>
   <listheader label="Description" width="250px"/>
  </listhead>
  <listitem forEach="${win.resorts}" value="${each}">
   <listcell label="${each.name}" />
   <listcell label="${each.description}" />
  </listitem>
 </listbox>
<gmaps id="gmap" zoom="16" showTypeCtrl="true" mapType="satellite" showLargeCtrl="true" width="610px"
 height="400px">
  <ginfo id="ginfo"/>
 </gmaps>
 </hbox>
<groupbox mold="3d" width="100%">
  <caption label="Resort"/>
  Name:       <textbox id="name" disabled="true"/>
  Description:<textbox id="desc" disabled="true"/>
  Latitude:   <doublebox id="lat" disabled="true"/>
  Longitude:  <doublebox id="lng" disabled="true"/>
 </groupbox>
</window>

Manipuler des composants UI avec Java

Dans le fichier Java(ResortController.java), on récupère les composants UI par leur id, et y plaçons les données de l'élément sélectionné. Ensuite, le moteur ZK met automatiquement la page web à jour dans Ajax.

<!--ResortController.java -->
public class ResortController extends Window {
 List _resorts = new ArrayList();

 public ResortController(){
  _resorts.add(new Resort("La Tour Eiffel",
    "Insolite ! Découvrez la Tour Eiffel autrement.",48.8585599391,2.2945332527));
  _resorts.add(new Resort("Buckingham Palace",
    "The official London residence of the sovereign.",51.5013698182,-0.1416689157));
  _resorts.add(new Resort("東京タワ",
    "総數4萬の光ファンタジーと都內最大級15mのツリー!",35.6583487578,139.7457217178));
  _resorts.add(new Resort("Der Kölner Dom",
    "Offizieller Name Hohe Domkirche St. Peter und Maria",50.9414206771,6.9586372375));
 }

 public void refreshUI(){
  Listbox lb = (Listbox) getFellow("lb");
  Resort resort = (Resort) lb.getSelectedItem().getValue();
  ((Textbox)getFellow("name")).setValue(resort.getName());
  ((Textbox)getFellow("desc")).setValue(resort.getName());
  ((Doublebox)getFellow("lat")).setValue(resort.getLatitude());
  ((Doublebox)getFellow("lng")).setValue(resort.getLongitude());

  Gmaps gmap = (Gmaps) getFellow("gmap");
  Ginfo ginfo = (Ginfo) getFellow("ginfo");
  ginfo.setLat(resort.getLatitude());
  ginfo.setLng(resort.getLongitude());
  ginfo.setContent(resort.getDescription());
  gmap.panTo(resort.getLatitude(),resort.getLongitude());
  gmap.setZoom(16);
  gmap.openInfo(ginfo);
 }
 public List getResorts() {
  return _resorts;
 }
 public void setResorts(List resorts) {
  _resorts = resorts;
 }
}

Dans cet exemple, vous pouvez constater la simplicité pour construire avec ZKk une application web utilisant Ajax. Le visionneur et le contrôleur sont clairement distincts. De plus, aucun JavaScript n'est nécessaire! La meilleure façon d'utiliser Ajax est de ne même pas connaître sont existence.

Une manière avancée de procéder (avec liaison de données)

Pour simplifier la maintenance de consistance des données entre le data bean et l'interface utilisateur, ZK fournit un mécanisme de liaison de données. La seule chose nécessaire est la définition de la relation entre le data bean et les composants de l'interface, et la liaison de données maintiendra la consistance entre les deux de manière automatique.

Define Relations between Data Bean and UI Components

Une façon simple de procéder est de définir ces relations directement dans la page web. Une des différences majeures est que nous ajoutons un autre data bean qui représente l'élément sélectionné, et ensuite y lier tous les composants ZK correspondants.

<!-- resort_databind.zul -->
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window id="win" use="org.zkforge.resort.ui.ResortController2" title="ZK Tutorial" width="1024px" border="normal">
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG
8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA"  type="text/javascript"/>
 <hbox>
<listbox model="@{win.resorts}" selectedItem="@{win.selected}" onSelect="win.refreshUI()">
  <listhead sizable="true">
   <listheader label="Name" width="100px"/>
   <listheader label="Description" width="250px"/>
  </listhead>
  <listitem self="@{each=resort}">
   <listcell label="@{resort.name}" />
   <listcell label="@{resort.description}" />
  </listitem>
 </listbox>
 <gmaps id="gmap" zoom="16" showTypeCtrl="true" mapType="satellite" showLargeCtrl="true" width="610px"
  height="400px">
  <ginfo id="ginfo" lng="@{win.selected.longitude}" lat="@{win.selected.latitude}"
  content="@{win.selected.description}"/>
 </gmaps>
 </hbox>
 <groupbox id="gb" mold="3d" width="100%">
  <caption label="Resort"/>
  Name:<textbox id="name" value="@{win.selected.name}" disabled="true"/>
  Description:<textbox  id="desc" value="@{win.selected.description}" disabled="true"/>
  Latitude:<doublebox id="lat" value="@{win.selected.latitude}" disabled="true"/>
  Longitude:<doublebox id="lng" value="@{win.selected.longitude}" disabled="true"/>
 </groupbox>
</window>

Revoir le fichier Java

Grâce à la liaison de données, les codes de manutention dans ResortController.java sont davantage réduits. Dès que l'utilisateur sélectionne un élément différent, le data bean sera changé, et toutes les données des composants ZK correspondant seront automatiquement mises à jour.

<!--ResortController2.java -->

public class ResortController extends Window {
 List _resorts = new ArrayList();
 Resort _selected = new Resort();

 public ResortController(){
  _resorts.add(new Resort("La Tour Eiffel",
    "Insolite ! Découvrez la Tour Eiffel autrement.",48.8585599391,2.2945332527));
  _resorts.add(new Resort("Buckingham Palace",
    "The official London residence of the sovereign.",51.5013698182,-0.1416689157));
  _resorts.add(new Resort("東京タワ",
    "総數4萬の光ファンタジーと都內最大級15mのツリー!",35.6583487578,139.7457217178));
  _resorts.add(new Resort("Der Kölner Dom",
    "Offizieller Name Hohe Domkirche St. Peter und Maria",50.9414206771,6.9586372375));
 }

 public void refreshUI(){
  Gmaps gmap = (Gmaps) getFellow("gmap");
  Ginfo ginfo = (Ginfo) getFellow("ginfo");
  gmap.panTo(ginfo.getLat(),ginfo.getLng());
  gmap.setZoom(16);
  gmap.openInfo(ginfo);
 }
 public List getResorts() {
  return _resorts;
 }
 public void setResorts(List resorts) {
  _resorts = resorts;
 }
 public Resort getSelected() {
  return _selected;
 }
 public void setSelected(Resort selected) {
  _selected = selected;
 }
}

Installer l'application Web

  1. Installer le SDK Java
    Si vous n'avez pas encore installé le SDK Java, merci de télécharger et d'installer SUN Java Standard SDK.
  2. Installer un Servlet Container
    Si vous n'avez pas un Servlet Container, merci de télécharger et d'installer Apache Tomcat.
  3. Télécharger l'Application Web
    Télécharger les fichiers ici.
  4. Décompresser le fichier
    Décompressez resort.zip, et copiez resort.war dans $TOMCAT_HOME/webapps/.
  5. Démarrez votre Server Web, et ouvrez votre navigateur à l'adresse http://localhost:8080/resort/resort.zul