Date Created: Mon 04-Oct-2010

Related Document Categories:

Get my WebSphere Application Server course here >> http://www.themiddlewareshop.com/products/



How to install the ZK Demo on your favourite J2EE server

Installing ZK Demo into Eclipse workspace

downloaded zk-demo-5.0.4.zip and explanded









First of all I had to delete the Test2 directory as it was not required and Eclipse was upset anyway due to some error in the test cases?



Click Finish

Drag and Drop EAR file into your favourite J2EE Server. In my case I used Oracle Weblogic downloaded from Oracle for free.


Once the application was started I could see the demo application suite




I am now going to try and understand how to create a menu based application. to do this I will evaluate the sample menus and then take the corresponding code and put into a separate project.

I selected the Toolbars and Menus option and found the Menu sample...




By looking at the WAR project in Eclipse I was able to see that the main menu was based on a properties files called zkdemo.properties and is used to provide URLS for the menu link as shown in the /userguide/index.zul file





/userguide/toolbar/menu.zul

I found that by analysing the file (menu.zul) that the path for the menu demo was as above. Upon opening this file we can see the source of the menulzul file. the code is listed below:

<?xml version="1.0" encoding="UTF-8"?>

<!--
menu.zul

{{IS_NOTE
Purpose:

Description:

History:
Thu Nov 13 16:07:16 TST 2008, Created by Flyworld
}}IS_NOTE

Copyright (C) 2008 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<window id="demo" apply="org.zkoss.zkdemo.userguide.DemoWindowComposer">
<html><![CDATA[
<h4>Menu</h4>
<p>Menu allows embedded images, vertical/horizontal orientation and nested menupopup/menuitem components.</p>
<p>Menu allows to combine with Colorbox. Please click "Spyglass" -> "Color Picker".</p>
]]></html>
<span sclass="edition-field">
Colorbox requires
<a href="http://www.zkoss.org/download/zk.dsp" sclass="edition-field" label=" ZK PE or EE."/>
</span>

<separator />
<tabbox width="100%" tabscroll="false">
<tabs>
<tab id="demoView" label="Demo"/>
<tab id="srcView" label="View Source"/>
</tabs>
<tabpanels>
<tabpanel>
<window id="view">
</window>
</tabpanel>

<tabpanel>
<panel>
<panelchildren>
<textbox id="codeView" class="code" rows="20" width="95%">
<attribute name="value"><![CDATA[
<zk>
<menubar id="menubar" width="100%">
<menu label="Project" image="/img/Centigrade-Widget-Icons/Briefcase-16x16.png">
<menupopup>
<menuitem image="/img/Centigrade-Widget-Icons/BriefcaseSpark-16x16.png" label="New"
onClick="alert(self.label)" />
<menuitem image="/img/Centigrade-Widget-Icons/BriefcaseOpen-16x16.png" label="Open"
onClick="alert(self.label)" />
<menuitem image="/img/Centigrade-Widget-Icons/DisketteBlack-16x16.png" label="Save"
onClick="alert(self.label)" />
<menuseparator />
<menuitem label="Exit" image="/img/Centigrade-Widget-Icons/DoorOpen-16x16.png" onClick="alert(self.label)" />
</menupopup>
</menu>
<menu label="Help" image="/img/Centigrade-Widget-Icons/QuestionmarkButton-16x16.png">
<menupopup>
<menuitem label="Index" onClick="alert(self.label)" />
<menu label="About">
<menupopup>
<menuitem label="About ZK"
onClick="alert(self.label)" />
<menuitem label="About Potix"
onClick="alert(self.label)" />
</menupopup>
</menu>
</menupopup>
</menu>
<menu image="/img/Centigrade-Widget-Icons/Spyglass-16x16.png">
<menupopup>
<menuitem label="Index" onClick="alert(self.label)" />
<menu label="Color Picker" content="#color=#184dc6"/>
</menupopup>
</menu>
</menubar>
<checkbox label="Vertical orient">
<attribute name="onCheck">
menubar.orient= self.checked ? "vertical" : "horizontal";
menubar.width = self.checked ? "100px" : "200px";
</attribute>
</checkbox>
<checkbox label="Autodrop">
<attribute name="onCheck">
menubar.autodrop = self.checked;
</attribute>
</checkbox>
</zk>
]]></attribute>
</textbox>
</panelchildren>
<toolbar mold="panel">
<button id="tryBtn" label="Try me!"/>
<button id="reloadBtn" label="Reload"/>
</toolbar>
</panel>
</tabpanel>
</tabpanels>
</tabbox>
</window>

=================================================

Basically we can see that creating a menu in ZK is very easy.

Get my WebSphere Application Server course here >> http://www.themiddlewareshop.com/products/

Steve Robinson - IBM Champion 2013

About Me

Steve Robinson has been working in IT for over 20 years and has provided solutions for many large-enterprise corporate companies across the world. Steve specialises in Java and Middleware.

In January 2013, I was awarded the prestigous 'IBM Champion' accolade.


  • Linked In
  • Twitter
  • About Me
  • My Blog
  • Contact Me

Read my books?

IBM WebSphere Application Server 8.0 Administration Guide

IBM WebSphere Application Server 8.0 Administration Guide

WebSphere Application Server 7.0 Administration Guide

WebSphere Application Server 7.0 Administration Guide

WebSphere Categories

Other Categories