Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This tutorial explains how to use a "rich client" web UI, inside OFBiz, via the ZK Rich framework (http://potix.com).  That is, a ZK frontend but an OFBiz backend.

Prerequisites

  1. Comfortable with installing and running OFBiz weekly build at the Windows Command Line
  2. EITHER an OFBiz build equal or greater than SVN tagA recent OFBiz build which includes https://issues.apache.org/jira/browse/OFBIZ-528Image Added committed.  COULD ANYONE TELL ME WHAT SVN REVISION THIS WAS?
  3. JDK 1.5, with JAVA_HOME environment variable set correctly
  4. Comfortable with configuring a J2EE webapp via web.xml
  5. A webapp (either your own or one of OFBiz's) already working, that you are happy to mess around with as a sandbox
  6. Comfortable with creating your own OFBiz component and using ofbiz-component.xml
  7. Wiki Markup
    \[Part 3 only\] Familiarity with the [Spring Framework|http://springframework.org], at least ApplicationContext and WebApplicationContext

...

2. Paste the following code into it: 

Code Block
 < <?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...

Code Block
 < <?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>

...