Status
Blog::Calendar
Blog::Navigation
Blog::Editing
Bookmarks::Blogroll
Blog::Referers
Today''s Page Hits: 103
Other sites
Powered by Roller Weblogger.
Today''s Page Hits: 103
Tuesday May 19, 2009
Thursday May 14, 2009 Databinding is a very useful feature to help us bind UI and model together, It decrease the line number of code of our project.;
Here, is example to show how to bind bean with macro component with data binding feature.
In this example, I have a PriceComp macro component , and have a Decimalbox inside it as a number member field. PriceComp delegates the number and forward the value to a decimalbox inside it.
public class PriceComp extends HtmlMacroComponent {
private int number;
Decimalbox db;
public void afterCompose(){
super.afterCompose();
db = (Decimalbox)getFellowIfAny("value");
if(db!=null){
db.setValue(new BigDecimal(number));
}else{
throw new IllegalStateException("component value not found");
}
}
public int getNumber() {
if(db!=null){
return db.getValue().intValue();
}
return number;
}
public void setNumber(int number) {
if(db!=null){
db.setValue(new BigDecimal(number));
}else{
this.number = number;
}
}
}
In the macro component template (~./myPrice.zul), it has a decimalbox , and it also forwards onChange event out to PriceComp as onNumberChange event
<zk>
<decimalbox id="value" forward="onChange=onNumberChange"/>
</zk>
You also need to write some configuration of this macro component. to enable default binding behavior, for example default save-when behavior of 'number' property is onNumberChange
<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
<addon-name>testapp</addon-name>
<language-name>xul/html</language-name>
<component>
<component-name>myPriceComponent</component-name>
<component-class>com.test.PriceComp
</component-class>
<macro-uri>~./myPrice.zul</macro-uri>
<extends>decimalbox</extends>
<annotation>
<annotation-name>default-bind</annotation-name>
<property-name>number</property-name>
<attribute>
<attribute-name>access</attribute-name>
<attribute-value>both</attribute-value>
</attribute>
<attribute>
<attribute-name>save-when</attribute-name>
<attribute-value>self.onNumberChange</attribute-value>
</attribute>
</annotation>
</component>
</language-addon>
Finally, a example to use databinding with this macro component.
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<zk>
<window title="bind macro component" border="normal" id="win">
<zscript><![CDATA[//@IMPORT
import com.test.*;
]]><![CDATA[//@DECLARATION
]]><![CDATA[
Bean bean = new Bean("Cat",35);
]]>
</zscript>
<hbox>
Name : <textbox value="@{bean.name}" /> |
Number : <myPriceComponent number="@{bean.amount}" />
</hbox>
<hbox>
Name : <label value="@{bean.name}" />
</hbox>
<hbox>
Number : <label value="@{bean.amount}" />
</hbox>
</window>
</zk>
Thursday April 16, 2009 Very tricky, use data binder can even link size of a window with other components.
try following example in zkdemo , click overlapped, resize the window.
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<zk>
<button label="overlapped" onClick="winActif.doOverlapped()" />
<label id="info" />
<window visible="false" title="Les actifs" id="winActif"
border="normal" closable="true" left="300px" top="100px" width="200px"
height="200px"
onClose="self.setVisible(false); event.stopPropagation();"
onSize='info.setValue(winActif.getWidth()+","+winActif.getHeight());'
sizable="true">
</window>
<hbox style="background-color:red"
width="@{winActif.width,load-when=winActif.onSize}"
height="@{winActif.height,load-when=winActif.onSize}">
Connected Box
</hbox>
</zk>
Thursday December 18, 2008 Fileupload is a very convenient component to do uploading file in ZK.
But, it auto transfers uploaded content to Text or Binary, in memory, in inputstream or in file, depends on a assumption(MimeType, uploaded size).
I am not sure it is good or not to provide such automation on it. for some case this automation is good.
Ok, In some case, such as save ulpoad content to file system or DB, I would like to control all the uploaded content, in other words, I want to always get a InputStream and flush it to some destination.
To accomplish is very simple.
1, if you use FileUpload.get(max), then you just assign a option alwaysNative to true[FileUpload.get(max,true)] and get uploaded file by Media.getStreamData():InputStream.
2.if you use<fileupload/>, then you just assign the attribute native to true , <fileupload native="true"/> , don't forget to add onUpload listener and get InputStream by event.getMedia().getStreamData().
Sunday December 14, 2008 I am busy on job, developing with Eclipse recently, always busy.
I had a speech on SUN Tech Days 2008 Taiwan on Nov. 17 , I forget to post to my blog, until this weekend.(I was planning hiking but the weather is bad this weekend, bad weekend.)
The topic is about ajax frameworks and toolkits, an hour speech. Of course I introduce ZK, also include jQuery, DWR and GWT.
The speech focus on how to access server side resource in these ajax frameworks. No winner in my speech, select the right solution for your case then you are the winner.
Thursday October 09, 2008 ZK announces a WYSIWYG feature preview of ZK Studio , the smalltalk here.
Here, I post another demo, it creates a Login window use ZULEditor, Palette and Outline.
Another feature not in the official demo, it doesn't break all the UI when you has a wrong zul file , for example a 'hbox' in a 'rows', or a 'row' in a 'column'. Visual Editor shows you the error message , not breaks full page.