Status
Blog::Calendar
Blog::Navigation
Blog::Editing
Bookmarks::Blogroll
Blog::Referers
Today''s Page Hits: 383
Other sites
Powered by Roller Weblogger.
Today''s Page Hits: 383
Thursday April 26, 2007
MyPanel
Forge Component
MyPanel.java :
package atticcomp;
import org.zkoss.zk.au.Command;
import org.zkoss.zk.au.impl.GenericCommand;
import org.zkoss.zk.ui.HtmlBasedComponent;
import org.zkoss.zk.ui.event.Events;
public class MyPanel extends HtmlBasedComponent {
private static final long
serialVersionUID =
public String getOuterAttrs() {
StringBuffer sb = new
StringBuffer();
// note 1
sb.append(Events.isListenerAvailable(this, "onPanelCancel",
true) ? " z.onPanelCancel=\"true\"" : " ");
sb.append(" " +
super.getOuterAttrs());
return sb.toString();
}
//note 2
static {
new
GenericCommand("onPanelOK", Command.IGNORE_OLD_EQUIV);
new
GenericCommand("onPanelCancel", Command.IGNORE_OLD_EQUIV);
};
}
l
Note1: because in attic.js file, MyPanel_onCancel is
send by check ASAP, (MyPanel_onOK is send immediately), so, I check any ASAP
listener of "onPanelCancel" which available there. if ture,then write
z.onPanelCancel out to make MyPanel_onCancel asap too.
l
Note2: register onPanelOK
and onPanelCancel commond, a command should start with "on" string, and
you don't need to register generic Event like "onClick", ZK register that
already.
mypanel.dsp : default mold
<%@ taglib
uri="/WEB-INF/tld/web/core.dsp.tld" prefix="c" %>
<%@ taglib uri="/WEB-INF/tld/zk/core.dsp.tld"
prefix="u" %>
<c:set var="self"
value="${requestScope.arg.self}"/>
<table
id="${self.uuid}"${self.outerAttrs}${self.innerAttrs}
z.type="atticz.attic.MyPanel" >
<tr>
<td>
<c:forEach
var="child" items="${self.children}">
${u:redraw(child,
null)}
</c:forEach>
</td>
</tr>
<tr>
<td>
<span
id="${self.uuid}!okbtn" style="border:1px
solid;cursor:pointer" onclick="MyPanel_onOK('${self.uuid}')">
OK </span>
<span
id="${self.uuid}!cancelbtn" style="border:1px solid;cursor:pointer"
onclick="MyPanel_onCancel('${self.uuid}')"> CANCEL </span>
</td>
</tr>
</table>
l
atticz.attic.MyPanel on in z.type means bind this component by script in
atticz.attic module's zhMyPanel object.
l
okbtn/cancelbtn will
invoke MyPanel_onOK/MyPanel_onCancel and pass uuid of this component as
parameter.
l
different mold just show
different layout of <table/>
mypanel_top.dsp :
<%@ taglib
uri="/WEB-INF/tld/web/core.dsp.tld" prefix="c" %>
<%@ taglib
uri="/WEB-INF/tld/zk/core.dsp.tld" prefix="u" %>
<c:set var="self"
value="${requestScope.arg.self}"/>
<table
id="${self.uuid}"${self.outerAttrs}${self.innerAttrs}
z.type="atticz.attic.MyPanel" >
<tr>
<td>
<span
id="${self.uuid}!okbtn" style="border:1px
solid;cursor:pointer" onclick="MyPanel_onOK('${self.uuid}')">
OK </span>
<span
id="${self.uuid}!cancelbtn" style="border:1px
solid;cursor:pointer"
onclick="MyPanel_onCancel('${self.uuid}')"> CANCEL </span>
</td>
</tr>
<tr>
<td>
<c:forEach
var="child" items="${self.children}">
${u:redraw(child,
null)}
</c:forEach>
</td>
</tr>
</table>
mypanel_right.dsp :
<%@
taglib uri="/WEB-INF/tld/web/core.dsp.tld" prefix="c" %>
<%@
taglib uri="/WEB-INF/tld/zk/core.dsp.tld" prefix="u" %>
<c:set
var="self" value="${requestScope.arg.self}"/>
<table
id="${self.uuid}"${self.outerAttrs}${self.innerAttrs}
z.type="atticz.attic.MyPanel" >
<tr>
<td>
<c:forEach
var="child" items="${self.children}">
${u:redraw(child, null)}
</c:forEach>
</td>
<td width="40px"
valign="top">
<span
id="${self.uuid}!okbtn" style="border:1px
solid;cursor:pointer" onclick="MyPanel_onOK('${self.uuid}')">
OK </span>
<br/>
<span
id="${self.uuid}!cancelbtn" style="border:1px
solid;cursor:pointer"
onclick="MyPanel_onCancel('${self.uuid}')"> CANCEL </span>
</td>
</tr>
</table>
attic.js / MyPanel : define to method of MyPanel. I don't know much detail about this, HaHa~.
zkMyPanel = {};
zkMyPanel.init =
function (cmp) {
};
zkMyPanel.cleanup =
function (cmp) {
};
zkMyPanel.setAttr =
function (elm, name, value) {
return false;
};
function
MyPanel_onOK(uuid){
var comp = $e(uuid);
var evt = {uuid: uuid, cmd: "onPanelOK", data: null};
//note1
zkau.send(evt);
}
function
MyPanel_onCancel(uuid){
var comp = $e(uuid);
var evt = {uuid: uuid, cmd: "onPanelCancel", data:
null};
//note2
zkau.send(evt, zkau.asapTimeout(comp,
"onPanelCancel"));
}
l
Note1:send immediately
l
Note2:send if ASAP or Send when next ASAP request send to
server, zkau.asapTimeout will check comp and return timeout of comp is there is
a z.onPanelCancel=true attribute in comp (see also MyPanel.getOuterAttrs()), otherwise zkau.asapTimeout
return -1 means don't send this event until next ASAP event is sent(send
together).
Sample file :
<?xml
version="1.0" encoding="utf-8"?>
<window
id="w" title="Woo"
style="width:400px" border="normal">
<zscript>
int count;
</zscript>
<MyPanel id="p1">
<label
value="name1:"/><textbox />
<attribute
name="onPanelCancel">
// listener by attribute is
a ASAP listener
alert("P1:"+event.toString());
</attribute>
</MyPanel>
<MyPanel id="p2"
mold="right">
<label
value="name2:"/><textbox />
<attribute
name="onCreate">
p2.addEventListener("onPanelCancel",new
org.zkoss.zk.ui.event.EventListener(){
public boolean isAsap() {
return true;
}
public void onEvent(Event event) {
alert("P2:"+event);
}
});
</attribute>
</MyPanel>
<MyPanel id="p3"
mold="top">
<label
value="name3:"/><textbox />
<attribute
name="onCreate">
p3.addEventListener("onPanelCancel",new
org.zkoss.zk.ui.event.EventListener(){
public boolean isAsap() {
return false;
}
public void onEvent(Event event) {
alert("P3:"+event);
}
});
</attribute>
</MyPanel>
</window>
There
are 3 MyPanel use different mold, and alos 3 Listener register by attribute or
in onCreate Event.
When
you click CANCEL in p1 or p2, a alert window will display immediately , but if
you click CANCEL on p3, this 「onPanelCancel」 event will not send until next
ASAP event is sent (click CANCEL then click OK, a alert will show after you
click OK).
Runtime
result
:
