Separate Java Code from zul pages(jsf style)

asked 2007-02-06 12:32:06 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4141716

By: loukili

In the past, the web has been very difficult to code and debug, because of java calls inside tags, later Jsf comes with a fashion manner to resolve this issue and simplify coding and thinking methodologies to approximate .NET. But Jsf still Web-1 style and lot of coding required even if we use Ajax or Ajax4Jsf.

Zul and others frameworks like Thinwire and Echo come with other thinking manner to simplify web development by introducing the desktop principe with the power of Ajax in backend. I appriciate the work done by ZK team and I appriciate the design done by Echo too.

When thinking on ZK, we remember VB or Delfi Style of applications, that what we need in the future, and specialy for large projects. But the question still open : Using the power of ZK, how to decouple web design (presentation) from java code (business logic) ?

J2ee4All team has created a subproject called j2ee4all-web using ZK by adding skining and decoupling design from java code by introducing some concepts on the top of ZK.

j2ee4all-web introduces a desktop config file to configure desktop skins, pages, listeners, events and shares.

Here is a short view :

Zul Page:

<pre style="color: blue; ">
<?xml version="1.0" encoding="utf-8"?>

<?page id="firstPage"?>

<zk>
<window id="firstWnd" title="First Window" binding="window">
<intbox />
<button id="btn1" label="my Button" binding="button" />
</window>
</zk>
</pre>

Zul Page Bean :

<pre style="color: blue; ">

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zul.Button;
import org.zkoss.zul.Window;

import com.qlogic.products.web2.core.AbstractPage;

public class FirstPage extends AbstractPage {

private static final long serialVersionUID = 923792546959253831L;

int cnt;
private Window window;
private Button button;

public void onClickButton (Event event) {
window.setStyle ("border: " + (++cnt) + "px solid red");
button.setStyle ("color: red");
}

public Window getWindow() {
return window;
}

public void setWindow(Window window) {
this.window = window;
}

public Button getButton() {
return button;
}

public void setButton(Button button) {
this.button = button;
}

}
</pre>

When the btn1 onClick event is fired, it's intercepted by the FirstPage class and onClickButton method is executed.
Note that j2ee4all-web2 try to find a method called onClickBtn1 or onClickButton or just onClick.

j2ee4all-web added the notion of binding to avoid the use of ZK getFellow and lets the developer to concentrate on her/his PageBean and the business logic behind his action.

Like that, we use the power of ZK and j2ee4all. This technique doesn't override or modify ZK behaviour.

You can add this fonctionnalities to existing applications like skining zk-demo.

To do so, place j2ee4all.jar and j2ee4all-web.jar in your WEB-INF/lib, and zk.xml in WEB-INF

Here a minimal zk.xml file
<pre style="color: blue; ">
<zk>

<system-config>
<max-event-threads>100</max-event-threads>
<max-upload-size>5120</max-upload-size>
<response-charset>UTF-8</response-charset>
<ui-factory-class>
com.qlogic.products.web2.core.BaseUiFactory
</ui-factory-class>
</system-config>

</zk>
</pre>

and a file called desktop.xml :

<pre style="color: blue; ">
<?xml version="1.0" encoding="UTF-8"?>

<bean name="desktop" value="com.qlogic.products.web2.core.DesktopDefinition">
<string name="pkg" value="com.qlogic.products.web2.examples" />
<string name="skin" value="standard" />
<map name="pages" type="java.util.Map">
<bean name="firstPage" value="${corePkg}.PageListenerDefinition">
<class name="listener" value="${pkg}.FirstPage" />
<string-array name="listenTo">
<static-field value="${events}.ON_CREATE" />
<static-field value="${events}.ON_CLICK" />
</string-array>
</bean>
</map>
</bean>

</pre>

To configure a page you just add an xml fragment similare to <font color="red">bean name="firstPage"...</font> by giving your page bean listener class <font color="red"><class name="listener"
value="${pkg}.FirstPage" /></font>
and the events that will be intercepted by your page bean <font color="red"><string-array name="listenTo"></font>

Note that the link between your page and the page bean is the page id specified in the zul page <font color="red"><?page id="firstPage"?></font>

Visit <a href="http://sourceforge/projects/j2ee4all">J2ee4All Project</a> for more details by exploring the source code.