Zscript to MVC Extractor"

From Documentation
(Created page with '{{ZKStudioEssentialsPageHeader}} == Introduction == == Step by Step == {{ZKStudioEssentialsPageFooter}}')
 
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZKStudioEssentialsPageHeader}}
 
{{ZKStudioEssentialsPageHeader}}
  
==  Introduction ==
+
{{Old Version|url=http://books.zkoss.org/wiki/ZK_Studio_Essentials|}}
 +
 
 +
 
 +
For better architecture and future maintainence, it's better to follow MVC pattern to implement a web application. The '''extractor''' helps you to refactor a ZUL with Zscript to MVC way by the rules mentioned in the smalltalk: [[Small_Talks/2008/August/ZK_MVC_Made_Easy | ZK MVC Made Easy]].
 +
 
 +
 
 
== Step by Step ==
 
== Step by Step ==
 +
 +
In the first, we have a ZUL file with event listener inside Zscript.
 +
<source lang="xml">
 +
<window id="win" >
 +
<button id="btn" onClick='alert("aaa");' />
 +
<button id="att">
 +
<attribute name="onClick">
 +
<![CDATA[
 +
alert("bbb");
 +
]]>
 +
</attribute>
 +
</button>
 +
</window>
 +
</source>
 +
 +
You can select a component, and then click the extractor icon in toolbar.
 +
 +
[[Image:studio_mvc_extract_1.png]]
 +
 +
Otherwise, select the tag of component and right click to show the context menu, and then click "ZK MVC Extractor".
 +
 +
[[Image:studio_mvc_extract_1_context.png]]
 +
 +
A dialog will be shown to ask you some detail configurations, just like new a java class. The default class name is based on the id of the selected component.
 +
 +
[[Image:studio_mvc_extract_2.png|900px]]
 +
 +
The modified ZUL file and generated java file would be like:
 +
 +
<source lang="xml">
 +
<window id="win" >
 +
<button id="btn"/>
 +
<button id="att">
 +
</button>
 +
</window>
 +
</source>
 +
 +
and
 +
 +
<source lang="java">
 +
import org.zkoss.zk.ui.Component;
 +
import org.zkoss.zk.ui.util.GenericForwardComposer;
 +
import org.zkoss.zul.Button;
 +
import org.zkoss.zul.Window;
 +
 +
public class WinViewCtrl extends GenericForwardComposer {
 +
 +
private Window win;
 +
private Button att;
 +
private Button btn;
 +
 +
@Override
 +
public void doAfterCompose(Component comp) throws Exception {
 +
super.doAfterCompose(comp);
 +
// TODO Auto-generated method stub
 +
 +
}
 +
 +
public void onClick$att() {
 +
//TODO: please check if you have use "self" or zscript functions here.
 +
 +
alert("bbb");
 +
 +
}
 +
 +
public void onClick$btn() {
 +
//TODO: please check if you have use "self" or zscript functions here.
 +
alert("aaa");
 +
}
 +
 +
}
 +
</source>
  
 
{{ZKStudioEssentialsPageFooter}}
 
{{ZKStudioEssentialsPageFooter}}

Latest revision as of 03:29, 23 September 2013

Zscript to MVC Extractor



Stop.png This documentation is for an older version of ZK. For the latest one, please click here.


For better architecture and future maintainence, it's better to follow MVC pattern to implement a web application. The extractor helps you to refactor a ZUL with Zscript to MVC way by the rules mentioned in the smalltalk: ZK MVC Made Easy.


Step by Step

In the first, we have a ZUL file with event listener inside Zscript.

<window id="win" >
	<button id="btn" onClick='alert("aaa");' />
	<button id="att">
		<attribute name="onClick">
		<![CDATA[
			alert("bbb");
		]]>
		</attribute>
	</button>
</window>

You can select a component, and then click the extractor icon in toolbar.

Studio mvc extract 1.png

Otherwise, select the tag of component and right click to show the context menu, and then click "ZK MVC Extractor".

Studio mvc extract 1 context.png

A dialog will be shown to ask you some detail configurations, just like new a java class. The default class name is based on the id of the selected component.

Studio mvc extract 2.png

The modified ZUL file and generated java file would be like:

<window id="win" >
	<button id="btn"/>
	<button id="att">		
	</button>
</window>

and

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Button;
import org.zkoss.zul.Window;

public class WinViewCtrl extends GenericForwardComposer {

	private Window win;
	private Button att;
	private Button btn;

	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		// TODO Auto-generated method stub

	}

	public void onClick$att() {
		//TODO: please check if you have use "self" or zscript functions here.

		alert("bbb");

	}

	public void onClick$btn() {
		//TODO: please check if you have use "self" or zscript functions here.
		alert("aaa");
	}

}



Last Update : 2013/09/23

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.