The use Attribute
Embedding code improperly in pages might cause a maintenance headache, so it's best to separate control code from the code for the UI. There are two ways to separate code from views. First, you could put these control codes in a separate Java class, and then register event listeners to invoke the proper methods accordingly. For example, you could invoke your methods to initialize or to cancel a process by registering the onCreate , onOK , and onCancelQ event listeners to invoke those methods...
The ZK Pet Shop Data Model with Annotations
The data model of the ZK Pet Shop application is based on the data model of Java Pet Store 2.0. Figure 7-4 graphs the relationship among tables in the ZK Pet Shop. Figure 7-4. The data model of the ZK Pet Shop application Figure 7-4. The data model of the ZK Pet Shop application Table 7-3 lists the functions of each table included in this data model. Table 7-3. Functions of Tables in the ZK Pet Shop's Data Model Stores the descriptions and attributes of a pet Stores the subtype of a pet's...
Using Data Binding with the ZK Annotations Class
Follow these steps to use a data binding manager in your ZK application 1. Declare the ZK Annotation namespace using xmlns with a short prefix, for example, a lt window Note The xmlns element is used to declare the XML namespace adopted in the .zul page. 2. Initialize the AnnotateDataBinderlnit class in the page-creation phase lt init This initiator class will do following jobs a. Create a new AnnotateDataBinder instance. b. Set the AnnotateDataBinder instance as a variable, binder, in the...
Using Google Maps to Show Pet Locations
Google Maps is fully supported by ZK. To use Google Maps, you should first register for a key on the Google Maps API web site http www.google.com apis maps . Recall that Google requires you to register to get your web site a key before you can access the Google Maps database. After getting your key, copy it and paste in place of ABQIAAAA in lt script key ABQIAAA . . . gt as shown in Listing 6-24. Listing 6-24. The script Component for Using Google Maps lt script type text javascript src http...
Deploying and Testing zkdemoallwar
The last step is to download, from the ZK web site, the web application archive WAR file, zkdemo-all.war, which includes all necessary web-application-related files and Java archive JAR files, and then deploy it into your servlet container. 1. Download the latest version of the ZK demo file zk-demo-x.x.x.zip at http www.zkoss.org download . The x.x.x represents the number of the latest stable version of ZK. 2. Unzip the file that you downloaded from ZK's web site, and find the file...
Making ZK Work with Hibernate
Hibernate is an object-relational mapping ORM solution for the Java language. The main feature of Hibernate is that it simplifies the job of accessing a database, which usually requires tedious code in the form of select, add, delete and update Structured Query Language SQL statements. For instance, you could use the select SQL statement in Listing 7-3 to get information about a pet from the Item table using its ItemID. To code this with SQL, you have to write the SQL statement, manage the...
Configuring webxml
The web.xml file in the WEB-INF directory describes how a web application should be deployed. If you want to build your own ZK application, you have to properly set up the following configurations regarding servlets, listeners, and a filter in the file web.xml. Listing 2-1 shows an example web.xml lt description gt Used to clean up when a session is destroyed lt description gt lt display-name gt ZK Session Cleaner lt display-name gt lt listener gt lt description gt ZK loader for ZUML pages lt...
Getting a Component thats Outside the ID Space
It is easy to retrieve any component within another ID space by invoking the getFellow spaceOwnerID, componentID method, which is much the same as getting a file in a file folder. Listing 4-7 provides an example illustrating this idea. The window component is a typical space owner. In this example, there must be at least two ID spaces, since there are two window components in this page. Both of these ID spaces include a label component, and you could have the same identifier labelD for each of...
Setting Up the zul File Extension in the XML Editor
As mentioned before, Eclipse provides an XML editor. To use the XML editor to develop a ZK application, you need to associate .zul file extension with the XML editor. Follow these instructions to establish the association 1. From the Eclipse menu, select Window Preferences. You should see the Preferences dialog box pop up. 2. From the tree menu on the left side of the Preferences dialog box, select General Content Types. You should see the Content Types pane appear. 3. In the Content Types...
Customizing the Event Listener
To implement an EventListener component in ZK, you must implement the onEvent methods. Processing defined in onEvent will be executed when the event is triggered. In Listing 6-30, when the user clicks any pet in this grid, the event listener for that pet's marker MarkerListener will open the Gmarker matching the specified pet with the ID defined as a marker attribute of the pet's title and address. private static class MarkerListener implements EventListener public void onEvent Event event...
FCKeditor
FCKeditor is a well-known online rich text editor you can use lt fckeditor gt to incorporate FCKeditor into your web page. As an example, you could declare a web page with this line lt fckeditor height 300px gt Figure 4-7 shows what you will see on the screen. There are numerous buttons for effects to enrich the text. You can type words in the panel, highlight those words, and click any of the buttons to change the look of your words. Figure 4-7 shows what you will see on the screen. There are...
Creating the ZK Pet Shop Application
In this web application, I am going to throw away the heavy Java EE 5 platform and instead use lightweight technologies. For example, the EJB 3 persistent technology used in the Java Pet Store 2.0 will be replaced with a Hibernate persistent layer. And, of course, for the GUI parts, I will replace the JavaServer Faces technology with the ZK Ajax presentation framework. Since ZK Pet Shop application is built based on the model, view, controller MVC architecture, I would like to give you a brief...
Injecting Ajax to Your ZK Application
In this example, we are going to build a button in myhello.zul that will change the title of the window component if it is clicked. Please add the bold code in Listing 3-3 to myhello.zul. lt window id win title My Second window border normal height 200px width 200px closable true sizable true gt Hello, World lt button label change title onClick win.title amp quot ZK applicaiton with Ajax amp quot gt Here's what you're doing with the new code 1. Define an id for the window component. 2. Create a...
Creating the ZK Pet Shop Tables
Once you have downloaded and installed HSQLDB, the next step is to create a database and the required tables to go with it. Follow these steps to open a command line program and launch the database management client 2. Type cmd in the Open field, and click OK. 3. A black prompt window will open click in the black window. 5. Execute the following command to activate the database management client java -cp hsqldb.jar org.hsqldb.util.DatabaseManager Note Recall that Eclipse_HOME represents the...
zscript
The zscript element, shown in Listing 4-9, is a special ZUML element to define Java code to be evaluated when a ZUML page is rendered. It is most often used to initialize page or component creation or to declare global functions. lt window id winHello title Hello border normal gt lt button label Say Hello onClick sayHello gt lt zscript gt int count 1 void sayHello declare a global function alert Hello World count Every time you press the Say Hello button, the onClick event handler's...
ZK Ajax Framework
ZK is an event-driven, component-based framework to enable rich user interfaces for web applications. ZK includes an Ajax-based event-driven engine, a rich set of XML User Interface Language XUL and XHTML components, and a markup language called ZK User Interface Markup Language ZUML . With ZK, you represent your application in feature-rich XUL and XHTML components, and you manipulate them based on events triggered by user activity, as you have probably done for years in desktop applications....
Contents
About the About the Technical Part 1 Getting to Know the ZK Ajax Framework CHAPTER 1 What Is the ZK Ajax ZK Ajax Ajax Behind-the-Scenes Technology 5 A Presentation A Server-centric Event-Driven Framework 7 A Component-Based GUI Toolkit 7 CHAPTER 2 Getting Started with Installing the Java Runtime Installing the Java Servlet Using the Using the ZIP Deploying and Testing Relative Configuring Configuring CHAPTER 3 Building Your First ZK Your First ZK Application Hello World 17 The First ZK...