Status

Blog::Calendar

« March 2010
SunMonTueWedThuFriSat
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
   
       
Today
XML

Blog::Navigation

Blog::Editing

Bookmarks::Blogroll

Blog::Referers

Today''s Page Hits: 243

Other sites

Google Analytics

Powered by Roller Weblogger.
All | JBoss&Seam | JSF | ZK | Music | General | Java
Main | Next page »
20090514 Thursday May 14, 2009
[ZK]Databinding with macro component

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>
20090416 Thursday April 16, 2009
ZK, A tricky example to connect size between window and other components.

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>
20081218 Thursday December 18, 2008
ZK, handle FileUpload with native way.

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().



20081009 Thursday October 09, 2008
A preview of ZK Studio Visual Editor (WYSIWYG Editor)

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.

 

20080821 Thursday August 21, 2008
A Way to set ZUL Editor read local zul.xsd file

In Eclipse,  follow below steps.

1.Window >> Preferences >> Web and XML > XML Catalog > Add(Button)
2.fill 'Add XML Catalog Entry' Dialog

Location : [the zul.xsd file location] <- set this first
Key Type : Schema Location
Key : http://www.zkoss.org/2005/zul/zul.xsd

3.save the configuration. 

20080623 Monday June 23, 2008
How to plug custom formula in to ZK Spreadsheet.

In ZK Spreadsheet, it provides a convenient way to plug any custom formula into it - use tag library. Only few steps need to do to add a custom formula into ZK Spreadsheet. In following example, I add a simple formula "ECHO" which concatenate all value into a string

1.Write a tag lib functions class file, in those functions you must declare two arguments (Object [] and XelContext) just like following example

public class CustomFunction {

    public static Object echo(java.lang.Object[] args, org.zkoss.xel.XelContext ctx){
        StringBuffer sb = new StringBuffer();
        sb.append("[");
        if(args!=null){
            for(int i=0;i<args.length;i++){
                if(i>0) sb.append(", ");
                if(args[i] instanceof RangeRef){
                    RangeRef ref = (RangeRef)args[i];
                    for(Iterator iter = ref.getCells().iterator();iter.hasNext();){
                        Cell cell = (Cell)iter.next();
                        sb.append(cell.getText());
                        if(iter.hasNext()) sb.append(", ");
                    }
                }else if(args[i]!=null){
                    sb.append(args[i].toString());
                }
            }
        }
        sb.append("]");
        return sb.toString();
    }
}

2.Write a tld file(customfunction.tld in this example) in WEB-INF, and point to the function you want to add.

<taglib>
    <uri>http://my.custom.function</uri>
    <description>Custom Function</description>
    <function>
        <name>ECHO</name>
        <function-class>
            my.CustomFunction
        </function-class>
        <function-signature>
            java.lang.Object echo(java.lang.Object[] args,
            org.zkoss.xel.XelContext ctx)
        </function-signature>
        <description></description>
    </function>
</taglib>

3.Add tab-lib directive in zul file and leave the prefix attribute a empty string.

<?taglib uri="/WEB-INF/customfunction.tld" prefix=""?>
<zk>
        <spreadsheet id="ss1" url="/WEB-INF/empty.xls" maxrows="500" maxcolumns="80" width="90%" height="300px"/>
</zk>

4.Use custom function in ZK Spreadsheet, following is the live demo

Copyright (C) 2003, 閣樓貓的五四三 (About Cat)