Date Created: Mon 04-Oct-2010

Related Document Categories:



    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.

Middleware Mentor - Steven Charles Robinson

About Me

Steve Robinson has been working in IT for over 15 years and has provided solutions for many large-enterprise corporate companies across the world. Steve specialises in Java and Middleware consulting. Steve comes from both an administration and development background.

Before moving to JEE, Steve was an accomplished developer and consultant for both IBM Lotus Notes and Microsoft .NET Technologies.

Follow Steve as @stevencrobinson on twitter.

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

Oracle WebLogic Categories

JBoss Categories

Other Categories