Page History

...

• This webapp only: put them in webapp/WEB-INF/lib
• All webapps in this OFBiz component: put them somewhere relative to the root dir of this component (for instance lib/zk), then refer to them in your ofbiz-component.xml like so: <classpath type="jar" location="lib/zk/*"/>
• All of your webapps (sure?): put them somewhere on the framework classpath, for instance: OFBIZ_DIR/framework/base/lib3. Now we must register the various bits of the ZK engine in our webapp.   Edit your web.xml, and without removing anything you have registered, insert the following snippets...

  Code Block

  <!--- ZK: 1.1: servlet for ZK pages --> <servlet> <description>ZK loader for evaluating ZK pages</description> <servlet-name>zkLoader</servlet-name> <servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class> <init-param> <param-name>update-uri</param-name> <param-value>/zkau</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <!--- ZK: 1.2: map.zul and .zhtml requests to this 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> <!--- ZK: 2.1: servlet which handles client-server comms --> <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> <!--- ZK: 3: make sure the browser will treat relevant file types correctly --> <mime-mapping> <extension>js</extension> <mime-type>application/x-javascript</mime-type> </mime-mapping> <mime-mapping> <extension>zhtml</extension> <mime-type>text/html</mime-type> </mime-mapping> <mime-mapping> <extension>zul</extension> <mime-type>text/html</mime-type> </mime-mapping>

  4. Restart OFBiz and check that nothing nasty comes out in the logs!

Part 1 - your first ZUL page

...

2. Paste the following code into it: 

<?page title="Incredible Browser"?> <!-- sets browser window title -->

<window title="Incredible Window"> <!-- creates a window within body -->
 Click here: <button label="Yes here!"/>
</window>

...

3.  Now visualize it in your browser via the obvious URL (just as if it were a JSP).   So far, clicking the button does nothing so let's put in a bit of interactivity.  Alter your ZUL to look like the following...

<?page title="Incredible Browser"?> <!-- sets browser window title -->

<window title="Incredible Window"> <!-- creates a window within body -->
 <zscript> <!--  ONE -->
  clickCount = 0;   //TWO
  clickIt()
  {
	 clickCount++;  //register the click
	 countLabel.value = "Clicks: " + clickCount; //update the screen to show new value  THREE
  }
 </zscript>
 Click here: <button label="Yes here!" onClick="clickIt()"/>
 <label id="countLabel" value="Clicks: ${clickCount}"/> <!--  FOUR --></window>

...

Part 2: Integration with OFBiz backend - directTODO

In this part, we will do something really useful for the first time - get an OFBiz entity from a list, alter it, and persist the changes.  Note that I will NOT explain here, how to go one step further and use services.   This is because the approach is basically identical to what I show here with a delegator - except of course you will use a dispatcher!

In this example, let's assume that our objective is to show a dropdown list of all the Person entities stored in OFBiz, and allow the user to alter their first name.

 1. Lets start off by getting a delegator and using it to list all the Person entities - we will store the result in a variable.  The code should be pretty self evident, it is simply beanshell, using familiar OFBiz API classes.  The interesting bit is in the screen, where we use the special forEach attribute to iterate all the Persons and make a dropdown list from them.  We can access fields on the GenericValues with the Expression Language DOT notation.   And finally, see how we use the value attribute of each listitem, to hold a reference to the Person - not its PK but the GenericValue object itself.  This will come in handy in the next step.

Part 3: Integration with OFBiz backend - via Spring

...