ZK Simple Sightseeing Application Part 1

After reading the following article,
http://books.zkoss.org/wiki/ZK_Getting_Started/Creating_a_Simple_Sightseeing_Application

I decided to connect with the DB and to make database driven application.



Let me split this tasks into different part as follows

Part 1 :  Make the application to work with ZK6 Version
Part 2 :  Using mysql, create the table and insert some values into the table for sight seeing, then
             connect with DB Using hybrid and retrieve the list from the DB.


Here is the Part 1

Environment

1. ZK 6 CE Version
2. Java 1.6 JRE



Step : 1

Create a New ZK Project. Let us name this project as ResortHib


Step : 2 Creating resort.zul

Right Click on Webcontent folder and Click New->Zul File and give the file name as resort.zul
Remove the default content in the resort.zul file and paste the following content.
        [Note: Same content of the resort.zul from the ZK Simple Sightseeing Application. No Change]

Here is the code for resort.zul

<?script content="zk.googleAPIkey='ABQIAAAAmGxmYR57XDAbAumS9tV5fxQXyylOlR69a1vFTcUcpV6DXdesOBSMEHfkewcSzwEwBT7UzVx8ep8vjA'"?>

<window id="win" title="ZK Tutorial" border="normal"
 apply="org.zkforge.resort.ui.ResortController" width="1024px">
<hbox>
<listbox id="lb" hflex="1">
<listhead sizable="true">
<listheader label="Name" width="100px"/>
<listheader label="Description" width="285px"/>
</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 readonly="true" id="name"/>
Description:<textbox readonly="true" id="desc"/>
Longitude:<doublebox readonly="true" id="longtitude"/>
Latitude:<doublebox readonly="true" id="latitude"/>
</groupbox>
</window>



Step : 2 Creating Resort.java

Right click on Java Resources and Click New->Class. Give package name as
        org.zkforge.resort.model and class name as Resort.java

Copy all the code from ZK Simple Sightseeing Application Resort.java and paste here.

Here is the Resort.Java code


package org.zkforge.resort.model;

import java.util.LinkedList;
import java.util.List;

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

    public String getName() {
        return _name;
    }

    public void setName(String name) {
        _name = name;
    }

    public String getDescription() {
        return _description;
    }

    public void setDescription(String description) {
        _description = description;
    }

    public double getLatitude() {
        return _latitude;
    }

    public void setLatitude(double latitude) {
        _latitude = latitude;
    }

    public double getLongitude() {
        return _longitude;
    }

    public void setLongitude(double longitude) {
        _longitude = longitude;
    }

    public static List<Resort> getAll() {
        List<Resort> resorts = new LinkedList<Resort>();
        resorts.add(new Resort("La Tour Eiffel", "Insolite ! D\351couvrez la Tour Eiffel autrement.", 48.858559939099997D, 2.2945332527D));
        resorts.add(new Resort("Buckingham Palace", "Buckingham Palace is the official London residence of the sovereign.", 51.501369818199997D, -0.14166891570000001D));
        resorts.add(new Resort("\u6771\u4EAC\u30BF\u30EF", "\u7DCF\u65704\u4E07\u306E\u5149\u30D5\u30A1\u30F3\u30BF\u30B8\u30FC\u3068\u90FD\u5185\u6700\u5927\u7D1A15\uFF4D\u306E\u30C4\u30EA\u30FC\uFF01", 35.658348757799999D, 139.7457217178D));
        resorts.add(new Resort("Der K\366lner Dom", "Offizieller Name Hohe Domkirche St. Peter und Maria", 50.941420677099998D, 6.9586372374999996D));
        resorts.add(new Resort("ecosmos", "ecosmos Office", 12.956048, 77.590599));
     
        return resorts;
    }
 
 
}


Step : 3 Creating ResortController.java

Right click on Java Resources->Src and Click New->Class. Give package name as
        org.zkforge.resort.ui and class name as ResortController

Copy all the code from ZK Simple Sightseeing Application ResortController.java and paste here.

Here is the ResortController.java code


package org.zkforge.resort.ui;

import org.zkforge.resort.model.Resort;
import org.zkoss.gmaps.Ginfo;
import org.zkoss.gmaps.Gmaps;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Doublebox;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListitemRenderer;
import org.zkoss.zul.Textbox;

/**
*
* @author Phoenix
*
*/
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();
        double longtitudeValue = resort.getLongitude();
     
        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);
    }
}




    After you copied, the first two lines will show error

import org.zkoss.gmaps.Ginfo;
import org.zkoss.gmaps.Gmaps;


    We need to put the gmap jar file in our lib folder. In order to do this, copy the gmapsz.jar
    file from the downloaded folder and paste in our webcontent->weblib folder.


    Now, again the following line will show the error
 

lb.setItemRenderer(new ListitemRenderer() {
public void render(Listitem item, Object data) throws Exception {


    The error because the above method has been depreciated in zk6. So let us use the latest method.
    Delete the doAfterCompose method and replace with the following

 
@SuppressWarnings({ "unchecked"})
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);

lb.setItemRenderer(new ListitemRenderer() {
@Override
public void render(Listitem item, Object arg1, int arg2)
throws Exception {
Resort value = (Resort) arg1;
item.appendChild(new Listcell(value.getName()));
item.appendChild(new Listcell(value.getDescription()));
item.setValue(value);

}
});
lb.setModel(new ListModelList(Resort.getAll()));
}

Step 4:  Run the application

       Double click resort.zul and right click and say run as -> Run on server.

       You can see the output in the internal browser.
     

Next Part 2, we will modify the ZK Project to retrive the data from the Database using hibernate.