zkseam2, integrates ZK with Seam context

zkseasm2 - My parttime project that provides ZK and Seam2 integration.

project site : http://code.google.com/p/zkseam2/

Features of zkseam2

Seam components as ZK variables

You can access seam component as ZK variables in zscript or EL

zscript

You can directly use seam components as a variables in zscript. Following example shows how to persist a new Item entity by entityManager(Seam component, a J2EE EntityManager) in zscript.

data binding

Binding value to todoCtrl.current.name, todoCtrl could be a EJB or a JAVA Bean type Seam component.

i18n messages

Both ZK and Seam provide a i18n messages feature, if you want to access Seam i18n messages in ZK, you could use EL and access messages (a map type Seam component) with a string type message key.

Binding Seam Conversation Scope with ZK desktop

start a conversation

To start a Seam conversation and binding it to ZK desktop, you use DesktopConversaton.begin. After this invocation, I will eanble a long running Seam conversation and lifecyle is binding with ZK Deskotp, in the words, you will get same conversation scope Seam component in same desktop.

DesktopConversation.begin();

You usually begin a conversation in a conversation scope seam controller's creation method. for example :

@Name("winCtrl")
@Scope(ScopeType.CONVERSATION)
public class WinCtrl {
  @Create
  public void create(){
    DesktopConversation.begin();
  }
}

end a conversation

To end a Seam conversation and unbinding with ZK desktop, just call DesktopConversation.end()

DesktopConversation.end();

The conversation will be destroyed automatically when the desktop cleanup by zkau request or conversation timeout.

Inject ZK components into Seam component

inject implicit object

The string 'desktop','page'..etc are keywords to get these instance.

    @In(value="desktop",required=false)
    Desktop desktop;

    @In(value="page",required=false) //the first page in current desktop
    Page page;

    @In(value="execution",required=false)
    Execution exec;

inject named component

    @In(value="mypage1",required=false)
    Page page;

    @In(value="win",required=false)
    Window window;
    
    @In(value="win.btn",required=false)
    Button btn;
    
    @In(value="win.tb",required=false)
    Textbox textbox;

Until now, I have no idea how to bind zk IdSapce in seam, if you want to inject a component, you have to know the component path and replace the path character '/' by '.'.

Seam component as an action listener

action listener annotation in zul

To enable this, you have to add a zk directive as follow

<?init class="com.infinitiessoft.zkseam.zk.AnnotateActionBinderInit"?>

[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>

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>

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

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.

 

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.