Creating a Simple Sightseeing Application"

From Documentation
 
(16 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
=Before You Start=
 +
 +
Translations are available in [[ZK_Getting_Started/Creating_a_Simple_Sightseeing_Application|English]] and [[ZK_Getting_Started_pt/Creating_a_Simple_Sightseeing_Application|Português]].
 +
 +
'''Other Introductions'''
 +
 +
* [[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]] - A tutorial exploring some of ZK's elements and how they work together to create a database-driven application
 +
* [[ZK Essentials]] - A book which walks you through the key concepts and features by building a working application from the ground up
 +
 
=Introduction=
 
=Introduction=
  
Line 19: Line 30:
 
<source lang="java">
 
<source lang="java">
 
public class Resort {
 
public class Resort {
private String _name;
+
    private String _name;
private String _description;
+
    private String _description;
private Double _latitude;
+
    private double _latitude;
private Double _longitude;
+
    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.
  
public Resort(){};
+
    public static List<Resort> getAll() {
public Resort(String name, String description, Double latitude, Double longitude) {
+
      // Details are omitted.
  _name = name;
+
    }
  _description = description;
+
}
  _latitude = latitude;
 
  _longitude = longitude;
 
}
 
// getter and setter methods are omitted.
 
}
 
 
</source>
 
</source>
  
Line 49: Line 67:
 
<source lang="xml">
 
<source lang="xml">
 
<!-- resort.zul -->
 
<!-- resort.zul -->
<window id="win" use="org.zkforge.resort.ui.ResortController" title="ZK Tutorial" width="1024px" border="normal">
+
<?script
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG
+
  content="zk.googleAPIkey='ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA'"?>
8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA" type="text/javascript"/>
+
 
<hbox>
+
<window id="win" title="ZK Tutorial" border="normal"
<listbox id="lb" onSelect="win.refreshUI()">
+
apply="org.zkforge.resort.ui.ResortController">
  <listhead sizable="true">
+
<hbox>
  <listheader label="Name" width="100px"/>
+
<listbox id="lb" hflex="1">
  <listheader label="Description" width="250px"/>
+
<listhead sizable="true">
  </listhead>
+
<listheader label="Name" width="100px"/>
  <listitem forEach="${win.resorts}" value="${each}">
+
<listheader label="Description"/>
  <listcell label="${each.name}" />
+
</listhead>
  <listcell label="${each.description}" />
+
</listbox>
  </listitem>
+
<gmaps id="gmap" zoom="16" showTypeCtrl="true" mapType="satellite"  
</listbox>
+
                  showLargeCtrl="true" width="610px" height="400px">
<gmaps id="gmap" zoom="16" showTypeCtrl="true" mapType="satellite" showLargeCtrl="true" width="610px"
+
<ginfo id="ginfo"/>
height="400px">
+
</gmaps>
  <ginfo id="ginfo"/>
+
</hbox>
</gmaps>
+
<groupbox id="gb" mold="3d" width="100%">
</hbox>
+
<caption label="Resort"/>
<groupbox mold="3d" width="100%">
+
Name:<textbox disabled="true" id="name"/>
  <caption label="Resort"/>
+
Description:<textbox disabled="true" id="desc"/>
  Name:       <textbox id="name" disabled="true"/>
+
Longitude:<doublebox disabled="true" id="longtitude"/>
  Description:<textbox id="desc" disabled="true"/>
+
Latitude:<doublebox disabled="true" id="latitude"/>
  Latitude:   <doublebox id="lat" disabled="true"/>
+
</groupbox>
  Longitude: <doublebox id="lng" disabled="true"/>
 
</groupbox>
 
 
</window>
 
</window>
 
</source>
 
</source>
Line 83: Line 99:
  
 
<source lang="java">
 
<source lang="java">
<!--ResortController.java -->
+
// ResortController.java
public class ResortController extends Window {
+
public class ResortController extends GenericForwardComposer {
List _resorts = new ArrayList();
 
  
public ResortController(){
+
    private static final long serialVersionUID = -4023064279380075239L;
  _resorts.add(new Resort("La Tour Eiffel",
+
    private Listbox lb;
     "Insolite ! Découvrez la Tour Eiffel autrement.",48.8585599391,2.2945332527));
+
     private Gmaps gmap;
  _resorts.add(new Resort("Buckingham Palace",
+
    private Ginfo ginfo;
     "The official London residence of the sovereign.",51.5013698182,-0.1416689157));
+
     private Textbox name;
  _resorts.add(new Resort("東京タワ",
+
    private Textbox desc;
     "総數4萬の光ファンタジーと都內最大級15mのツリー!",35.6583487578,139.7457217178));
+
     private Doublebox latitude;
  _resorts.add(new Resort("Der Kölner Dom",
+
     private Doublebox longtitude;
     "Offizieller Name Hohe Domkirche St. Peter und Maria",50.9414206771,6.9586372375));
 
}
 
  
public void refreshUI(){
+
    public void doAfterCompose(Component comp) throws Exception {
  Listbox lb = (Listbox) getFellow("lb");
+
        super.doAfterCompose(comp);
  Resort resort = (Resort) lb.getSelectedItem().getValue();
+
       
  ((Textbox)getFellow("name")).setValue(resort.getName());
+
        lb.setItemRenderer(new ListitemRenderer() {
  ((Textbox)getFellow("desc")).setValue(resort.getName());
+
            public void render(Listitem item, Object data) throws Exception {
  ((Doublebox)getFellow("lat")).setValue(resort.getLatitude());
+
                Resort value = (Resort)data;
  ((Doublebox)getFellow("lng")).setValue(resort.getLongitude());
+
                item.appendChild(new Listcell(value.getName()));
 +
                item.appendChild(new Listcell(value.getDescription()));
 +
                item.setValue(value);
 +
            }
 +
        });
 +
       
 +
        lb.setModel(new ListModelList(Resort.getAll()));
 +
    }
 +
   
 +
    public void onSelect$lb() {
 +
        refreshUI();
 +
    }
  
  Gmaps gmap = (Gmaps) getFellow("gmap");
+
    private void refreshUI() {
  Ginfo ginfo = (Ginfo) getFellow("ginfo");
+
        Resort resort = (Resort) lb.getSelectedItem().getValue();
  ginfo.setLat(resort.getLatitude());
+
        double latitudeValue = resort.getLatitude().doubleValue();
  ginfo.setLng(resort.getLongitude());
+
        double longtitudeValue = resort.getLongitude().doubleValue();
  ginfo.setContent(resort.getDescription());
+
       
  gmap.panTo(resort.getLatitude(),resort.getLongitude());
+
        name.setValue(resort.getName());
  gmap.setZoom(16);
+
        desc.setValue(resort.getName());
  gmap.openInfo(ginfo);
+
        latitude.setValue(resort.getLatitude());
}
+
        longtitude.setValue(resort.getLongitude());
public List getResorts() {
+
        ginfo.setLat(latitudeValue);
  return _resorts;
+
        ginfo.setLng(longtitudeValue);
}
+
        ginfo.setContent(resort.getDescription());
public void setResorts(List resorts) {
+
        gmap.panTo(latitudeValue, longtitudeValue);
  _resorts = resorts;
+
        gmap.setZoom(16);
}
+
        gmap.openInfo(ginfo);
 +
    }
 
}
 
}
 
</source>
 
</source>
Line 134: Line 159:
 
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.
 
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.
  
<source lang="java">
+
<source lang="xml">
 
<!-- resort_databind.zul -->
 
<!-- resort_databind.zul -->
 
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
 
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window id="win" use="org.zkforge.resort.ui.ResortController2" title="ZK Tutorial" width="1024px" border="normal">
+
<?script
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG
+
  content="zk.googleAPIkey='ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA'" ?>
8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA"  type="text/javascript"/>
+
 
<hbox>
+
<window id="win"  
<listbox model="@{win.resorts}" selectedItem="@{win.selected}" onSelect="win.refreshUI()">
+
  apply="org.zkforge.resort.ui.ResortController2" title="ZK Tutorial" width="1024px" border="normal">
  <listhead sizable="true">
+
<hbox>
  <listheader label="Name" width="100px"/>
+
<listbox id="lb" model="@{win$ResortController2.resorts}" selectedItem="@{win$ResortController2.selected}">
  <listheader label="Description" width="250px"/>
+
<listhead sizable="true">
  </listhead>
+
<listheader label="Name" width="100px"/>
  <listitem self="@{each=resort}">
+
<listheader label="Description"/>
  <listcell label="@{resort.name}" />
+
</listhead>
  <listcell label="@{resort.description}" />
+
<listitem self="@{each=resort}">
  </listitem>
+
<listcell label="@{resort.name}" />
</listbox>
+
<listcell label="@{resort.description}" />
<gmaps id="gmap" zoom="16" showTypeCtrl="true" mapType="satellite" showLargeCtrl="true" width="610px"
+
</listitem>
  height="400px">
+
</listbox>
  <ginfo id="ginfo" lng="@{win.selected.longitude}" lat="@{win.selected.latitude}"
+
<gmaps id="gmap" zoom="16" showTypeCtrl="true" mapType="satellite"  
  content="@{win.selected.description}"/>
+
          showLargeCtrl="true" width="610px" height="400px">
</gmaps>
+
<ginfo id="ginfo" />
</hbox>
+
</gmaps>
<groupbox id="gb" mold="3d" width="100%">
+
</hbox>
  <caption label="Resort"/>
+
<groupbox id="gb" mold="3d" width="100%">
  Name:<textbox id="name" value="@{win.selected.name}" disabled="true"/>
+
<caption label="Resort"/>
  Description:<textbox  id="desc" value="@{win.selected.description}" disabled="true"/>
+
Name:<textbox id="name" value="@{win$ResortController2.selected.name}" disabled="true"/>
  Latitude:<doublebox id="lat" value="@{win.selected.latitude}" disabled="true"/>
+
Description:<textbox  id="desc" value="@{win$ResortController2.selected.description}" disabled="true"/>
  Longitude:<doublebox id="lng" value="@{win.selected.longitude}" disabled="true"/>
+
Longitude:<doublebox id="lng" value="@{win$ResortController2.selected.longitude}" disabled="true"/>
</groupbox>
+
Latitude:<doublebox id="lat" value="@{win$ResortController2.selected.latitude}" disabled="true"/>
 +
</groupbox>
 
</window>
 
</window>
 
</source>
 
</source>
Line 172: Line 198:
  
 
<source lang="java">
 
<source lang="java">
<!--ResortController2.java -->
+
// ResortController2.java
 +
public class ResortController2 extends GenericForwardComposer {
 +
 
 +
    private static final long serialVersionUID = -7504093487870918898L;
 +
    private List<Resort> _resorts;
 +
    private Resort _selected;
 +
    private Gmaps gmap;
 +
    private Ginfo ginfo;
 +
 
 +
    public void doAfterCompose(Component comp) throws Exception {
 +
        super.doAfterCompose(comp);
 +
        setResorts(Resort.getAll());
 +
        _selected = new Resort();
 +
    }
 +
   
 +
    public void onSelect$lb() {
 +
        refreshUI();
 +
    }
 +
 
 +
    private void refreshUI() {
 +
        double latitude = _selected.getLatitude().doubleValue();
 +
        double longtitude = _selected.getLongitude().doubleValue();
 +
       
 +
        ginfo.setLat(latitude);
 +
        ginfo.setLng(longtitude);
 +
        ginfo.setContent(_selected.getDescription());
 +
        gmap.panTo(latitude, longtitude);
 +
        gmap.setZoom(16);
 +
        gmap.openInfo(ginfo);
 +
    }
 +
 
 +
    public Resort getSelected() {
 +
        return _selected;
 +
    }
  
public class ResortController extends Window {
+
    public void setSelected(Resort selected) {
List _resorts = new ArrayList();
+
        _selected = selected;
Resort _selected = new Resort();
+
    }
  
public ResortController(){
+
    public void setResorts(List<Resort> _resorts) {
  _resorts.add(new Resort("La Tour Eiffel",
+
        this._resorts = _resorts;
    "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(){
+
    public List<Resort> getResorts() {
  Gmaps gmap = (Gmaps) getFellow("gmap");
+
        return _resorts;
  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;
 
}
 
 
}
 
}
 
</source>
 
</source>
Line 213: Line 249:
 
=Installer l'application Web=
 
=Installer l'application Web=
 
#Installer le SDK Java
 
#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.
+
#:Si vous n'avez pas encore installé le SDK Java, merci de télécharger et d'installer [http://java.sun.com/javase/downloads/index.jsp SUN Java SDK].
 
#Installer un Servlet Container
 
#Installer un Servlet Container
#:Si vous n'avez pas un Servlet Container, merci de télécharger et d'installer Apache Tomcat.
+
#:Si vous n'avez pas un Servlet Container, merci de télécharger et d'installer [http://tomcat.apache.org/download-55.cgi Apache Tomcat].
 
#Télécharger l'Application Web
 
#Télécharger l'Application Web
#:Télécharger les fichiers ici.
+
#:Télécharger les fichiers [http://downloads.sourceforge.net/zkforge/zkresort-0.8.zip ici].
 
#Décompresser le fichier
 
#Décompresser le fichier
 
#:Décompressez resort.zip, et copiez resort.war dans $TOMCAT_HOME/webapps/.
 
#:Décompressez resort.zip, et copiez resort.war dans $TOMCAT_HOME/webapps/.
 
#Démarrez votre Server Web, et ouvrez votre navigateur à l'adresse http://localhost:8080/resort/resort.zul
 
#Démarrez votre Server Web, et ouvrez votre navigateur à l'adresse http://localhost:8080/resort/resort.zul
 +
 +
----
 +
{{LastUpdated}}

Latest revision as of 08:14, 17 December 2010

Before You Start

Translations are available in English and Português.

Other Introductions

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.

    public static List<Resort> getAll() {
       // Details 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 -->
<?script 
  content="zk.googleAPIkey='ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA'"?>

<window id="win" title="ZK Tutorial" border="normal"
 apply="org.zkforge.resort.ui.ResortController">
	<hbox>
		<listbox id="lb" hflex="1">
			<listhead sizable="true">
				<listheader label="Name" width="100px"/>
				<listheader label="Description"/>
			</listhead>
		</listbox>	
		<gmaps id="gmap" zoom="16" showTypeCtrl="true" mapType="satellite" 
                  showLargeCtrl="true" width="610px" height="400px">
			<ginfo id="ginfo"/>
		</gmaps>
	</hbox>
	<groupbox id="gb" mold="3d" width="100%">
		<caption label="Resort"/>
		Name:<textbox disabled="true" id="name"/>
		Description:<textbox disabled="true" id="desc"/>
		Longitude:<doublebox disabled="true" id="longtitude"/>
		Latitude:<doublebox disabled="true" id="latitude"/>
	</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 GenericForwardComposer {

    private static final long serialVersionUID = -4023064279380075239L;
    private Listbox lb;
    private Gmaps gmap;
    private Ginfo ginfo;
    private Textbox name;
    private Textbox desc;
    private Doublebox latitude;
    private Doublebox longtitude;

    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        
        lb.setItemRenderer(new ListitemRenderer() {
            public void render(Listitem item, Object data) throws Exception {
                Resort value = (Resort)data;
                item.appendChild(new Listcell(value.getName()));
                item.appendChild(new Listcell(value.getDescription()));
                item.setValue(value);
            }
        });
        
        lb.setModel(new ListModelList(Resort.getAll()));
    }
    
    public void onSelect$lb() {
        refreshUI();
    }

    private void refreshUI() {
        Resort resort = (Resort) lb.getSelectedItem().getValue();
        double latitudeValue = resort.getLatitude().doubleValue();
        double longtitudeValue = resort.getLongitude().doubleValue();
        
        name.setValue(resort.getName());
        desc.setValue(resort.getName());
        latitude.setValue(resort.getLatitude());
        longtitude.setValue(resort.getLongitude());
        ginfo.setLat(latitudeValue);
        ginfo.setLng(longtitudeValue);
        ginfo.setContent(resort.getDescription());
        gmap.panTo(latitudeValue, longtitudeValue);
        gmap.setZoom(16);
        gmap.openInfo(ginfo);
    }
}

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" ?>
<?script 
  content="zk.googleAPIkey='ABQIAAAACZ90QS5pNiEvbXhI0k2NLRTGXUEQDrMr1bP0DVG8X36ZVCheaRQMK05Rsdneh4skNF6KXaLI8maLlA'" ?>

<window id="win" 
  apply="org.zkforge.resort.ui.ResortController2" title="ZK Tutorial" width="1024px" border="normal">
	<hbox>
	<listbox id="lb" model="@{win$ResortController2.resorts}" selectedItem="@{win$ResortController2.selected}">
		<listhead sizable="true">
			<listheader label="Name" width="100px"/>
			<listheader label="Description"/>			
		</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" />
	</gmaps>
	</hbox>
	<groupbox id="gb" mold="3d" width="100%">
		<caption label="Resort"/>
		Name:<textbox id="name" value="@{win$ResortController2.selected.name}" disabled="true"/>
		Description:<textbox  id="desc" value="@{win$ResortController2.selected.description}" disabled="true"/>
		Longitude:<doublebox id="lng" value="@{win$ResortController2.selected.longitude}" disabled="true"/>
		Latitude:<doublebox id="lat" value="@{win$ResortController2.selected.latitude}" 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 ResortController2 extends GenericForwardComposer {

    private static final long serialVersionUID = -7504093487870918898L;
    private List<Resort> _resorts;
    private Resort _selected;
    private Gmaps gmap;
    private Ginfo ginfo;

    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        setResorts(Resort.getAll());
        _selected = new Resort();
    }
    
    public void onSelect$lb() {
        refreshUI();
    }

    private void refreshUI() {
        double latitude = _selected.getLatitude().doubleValue();
        double longtitude = _selected.getLongitude().doubleValue();
        
        ginfo.setLat(latitude);
        ginfo.setLng(longtitude);
        ginfo.setContent(_selected.getDescription());
        gmap.panTo(latitude, longtitude);
        gmap.setZoom(16);
        gmap.openInfo(ginfo);
    }

    public Resort getSelected() {
        return _selected;
    }

    public void setSelected(Resort selected) {
        _selected = selected;
    }

    public void setResorts(List<Resort> _resorts) {
        this._resorts = _resorts;
    }

    public List<Resort> getResorts() {
        return _resorts;
    }
}

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 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

Last Update : 2010/12/17