How to build your first ZK application with NetBeans

Author
Tommaso Fin, Jave EE developper, the InfoCamere Group, Italy.

Date
February 24, 2007

Version
ZK Studio 0.9

Requirements

1. NetBeans 5.5

2. The last version of ZK libraries

3. An Application Server. In this example we use JBoss.

Procedure

1. Launch the IDE NetBeans.

2. Open a new project (File > New Project...) and choose the Web

Application category (Web>Web Application).

3. Give to the project the name you like (for example helloworld), select the project path, the application server and click the finish button.

4. Open the Web Pages > WEB-INF > web.xml file.

and Substitute the content with the follow:

      <?xml version="1.0" encoding="UTF-8"?>
      <web-app id="WebApp_ID" version="2.4" 
        xmlns="http://java.sun.com/xml/ns/j2ee" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
        http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
          <display-name>
          helloworld</display-name>
          
          <!-- /// -->
          <!-- DSP -->
          <servlet>
              <description><![CDATA[
      The servlet loads the DSP pages.
              ]]></description>
              <servlet-name>dspLoader</servlet-name>
              <servlet-class>org.zkoss.web.servlet.dsp.InterpreterServlet</servlet-class>
          </servlet>
          <servlet-mapping>
              <servlet-name>dspLoader</servlet-name>
              <url-pattern>*.dsp</url-pattern>
          </servlet-mapping>
          <!-- /// -->

          <!-- //// -->
          <!-- ZK -->
          <listener>
              <description>Used to cleanup when a session is destroyed</description>
              <display-name>ZK Session Cleaner</display-name>
              <listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
          </listener>
          <servlet>
              <description>ZK loader for ZUML pages</description>
              <servlet-name>zkLoader</servlet-name>
              <servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
              <!-- Must. Specifies URI of the update engine (DHtmlUpdateServlet).
          It must be the same as <url-pattern> for the update engine.
          -->
              <init-param>
                  <param-name>update-uri</param-name>
                  <param-value>/zkau</param-value>
              </init-param>
              <load-on-startup>1</load-on-startup>
          </servlet>
          <servlet-mapping>
              <servlet-name>zkLoader</servlet-name>
              <url-pattern>*.zul</url-pattern>
          </servlet-mapping>
          <servlet-mapping>
              <servlet-name>zkLoader</servlet-name>
              <url-pattern>*.zhtml</url-pattern>
          </servlet-mapping>
          <servlet>
              <description>The asynchronous update engine for ZK</description>
              <servlet-name>auEngine</servlet-name>
              <servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
          </servlet>
          <servlet-mapping>
              <servlet-name>auEngine</servlet-name>
              <url-pattern>/zkau/*</url-pattern>
          </servlet-mapping>
          <!-- //// -->
        
          <welcome-file-list>
              <welcome-file>index.html</welcome-file>
              <welcome-file>index.htm</welcome-file>
              <welcome-file>index.jsp</welcome-file>
              <welcome-file>default.html</welcome-file>
              <welcome-file>default.htm</welcome-file>
              <welcome-file>default.jsp</welcome-file>
          </welcome-file-list>
      </web-app>

5. Right-Click to the library folder and select "Add JAR/Folder...".

Add all the ZK Jars in the folder ZK-X.X.X/dist/lib/ and ZK-X.X.X/dist/lib/ext.

6. Now we have all set for create the our first zul file. Right-Click on the Web Pages folder and choose New > File/Folder.

Select Other > Empty file.

Give it the name "helloworld.zul" and click Finish.

7. Set the content of helloworld.zul file like this:

      <?xml version="1.0" encoding="utf-8"?>
      <?page title="ZK::Hello World!"?>
      <window title="My First window" border="normal" width="200px">
          Hello, World!
      </window>

8. Now we can run the project (F6) and see our first ZK page (if you test te project locally shold be at http://localhost:8080/helloworld/helloworld.zul)

Tommaso Fin is a Jave EE developer working for the InfoCamere Group, Italy. He has got a degree in Informatic Engenieering and have about 2 years of experience in LAMP architecture managment and development. He is now focusing on the development of web applications with a massive use of databases data.

Copyright © Tommaso Fin. This article is licensed under GNU Free Documentation License.