Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - Van Chan

Pages: [1]
1
ZK 範例 / ZK Data Binding 資料綑綁
« on: July 21, 2012, 11:56:59 PM »
ZK Data Binding 把Person Object 和ZUL 上 Component 綑綁在一起,使輸入的資料同步對應到各 Fields 中 

Sample05.zul
-------------------
Code: [Select]
<?page title="Data Binding" contentType="text/html;charset=UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<zk>
    <window id="win" title="ZK Data Binding SAMPLE05" width="600px" border="normal" closable="true" sizable="true"  apply="inisoft.mo.gui.Sample05">
        <grid>
<columns sizable="true">
<column label="Type" sort="auto" width="200px"/><column label="Content" width="360px"/>
</columns>
<rows>
<row>
<label value="First Name :"/><textbox id="txt_firstname" width="200px"/>
</row>
<row>
<label value="Last Name :"/><textbox id="txt_lastname" width="200px"/>
</row>
<row>
<label value="Tel :"/><textbox id="txt_tel"  width="200px"/>
</row>
                        <row>
<label value="Birthday :"/><datebox id="dat_birthday"  width="150px"/>
</row>
                        <row>
<label value=""/><button id="btn_Submit" label="Submit"  width="150px"/>
</row>
</rows>
</grid>
        <separator/>
        <vbox>
            <label value="Result : "/>
            <label id="lbl_info"/>
        </vbox>
    </window>
</zk>

Sample05.java
--------------------
Code: [Select]
package inisoft.mo.gui;

import inisoft.mo.value.object.Person;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zkplus.databind.AnnotateDataBinder;

import org.zkoss.zul.*;

/**
 * @author Van Chan
 */
public class Sample05 extends GenericForwardComposer{
    Window win;
    Textbox txt_firstname,txt_lastname,txt_tel;
    Datebox dat_birthday;
    Label lbl_info;
    Button btn_Submit;
    private AnnotateDataBinder binder;
    private Person person;
   
    @Override
    public void doAfterCompose(Component comp)throws Exception
    {
        super.doAfterCompose(comp);
       
        binder = new AnnotateDataBinder(win);
        person = new Person("Van","Chan","1234567",new Date("2000/1/1"));
        bindObject(person);       
    }
   
    public void bindObject(Object o)
    {
        binder.bindBean("person",o);
        binder.addBinding(txt_firstname, "value", "person.FirstName");
        binder.addBinding(txt_lastname, "value", "person.LastName");
        binder.addBinding(txt_tel, "value", "person.Tel");
        binder.addBinding(dat_birthday, "value", "person.Birthday");
        binder.loadAll();
    }
   
    public void onClick$btn_Submit(Event event)throws Exception{     
        Locale locale = Locale.ENGLISH;
        SimpleDateFormat dateFormat = new SimpleDateFormat("dd-MMM-yy",locale);
        String birthday=dateFormat.format(person.getBirthday());
       
        String details=person.getFirstName()+" / "+person.getLastName()+" / "+person.getTel()+" / "+birthday;
        lbl_info.setValue(details);     
    }
}


Person.java
------------------
Code: [Select]
package inisoft.mo.value.object;

import java.util.Date;

/**
 * @author Van Chan
 */
public class Person implements java.io.Serializable{
    private Integer personId;
    private String firstName;
    private String lastName;
    private String tel;
    private Date birthday;

    public Person() {
    }

    public Person(String firstName, String lastName, String tel, Date birthday) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.tel = tel;
        this.birthday = birthday;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public Integer getPersonId() {
        return personId;
    }

    public void setPersonId(Integer personId) {
        this.personId = personId;
    }

    public String getTel() {
        return tel;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }
 
}

2
ZK 範例 / ZK ZUL ZKScript EL forEach 簡單範例
« on: July 21, 2012, 06:23:31 PM »
ZK ZUL ZKScript EL forEach 簡單範例

Code: [Select]
<?xml version="1.0" encoding="UTF-8"?>
<zk>
    <window title="Vote" width="400px" border="normal" closable="true" sizable="true">
        Do you like money ?
        <label id="lbl"/>
        <separator/>
        <button label="Yes" onClick="lbl.value = self.label"/>
        <button label="No"  onClick="lbl.value = self.label"/>
    </window>
   
    <separator/>
    <window title="使用EL表達式對 id 進行引用" width="400px" height="100px" border="normal" closable="true" sizable="true" >
        <textbox id="txtbox" value="Van"/>
        <label value="${txtbox.value}"/>
    </window>
   
    <separator/>
    <window title="組件 forEach 應用" width="400px" height="200px" border="normal" closable="true" sizable="true" >
        <zscript>
            number = new String[]{"One","Two","Three","Four","Five"};
        </zscript>
        <listbox width="100px">
            <listitem label="${each}" forEach="${number}"/>
        </listbox>
    </window>
 </zk>


3
ZK 範例 / ZK Window ZUL XML 與 JAVA編程應用
« on: July 21, 2012, 05:03:44 PM »
這是一個Ajax應用 Sample03a.zul 和Sample03b.zul 都是做同樣事情, 由於ZK 提供兩種編程方式,第一種是純XML格式,第二種是XML+JAVA格式:
 
Sample03a.zul
--------------------
Code: [Select]
<?xml version="1.0" encoding="UTF-8"?>
<zk>
 <window id="win" title="ZK Window Property Control" width="400px" height="200px" border="normal" closable="true" sizable="true" >
     <button label="Change Window Title" onClick="win.title=&quot;ZK application with Ajax&quot;"/>
 </window>   
</zk>
Hints : 由於.zul文件是XML文件,使用雙引號字符("")時,必須轉換成 &quot; 才可以被XML解釋器正確地進行編譯


Sample03b.zul
--------------------
Code: [Select]
<?xml version="1.0" encoding="UTF-8"?>
<zk>
    <window id="win"  apply="inisoft.mo.gui.Sample03b"></window>
</zk>


Sample03b.java
--------------------
Code: [Select]
package inisoft.mo.gui;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Button;
import org.zkoss.zul.Window;

/**
 * @author Van Chan
 */
public class Sample03b extends GenericForwardComposer{
    Window win;
    Button btn;
    EventListener btnListener;
   
    public void doAfterCompose(Component comp)throws Exception
    {
        super.doAfterCompose(comp);
        win.setTitle("ZK Window Property Control");
        win.setWidth("400px");
        win.setHeight("200px");
        win.setBorder("normal");
        win.setClosable(true);
        win.setSizable(true);
       
        btn=new Button();
        btn.setLabel("Change Window Title");
        addListener(btn);
       
        win.appendChild(btn);
    }
   
    public void addListener(Button btn){
        btnListener = new EventListener()
        {
            public void onEvent(Event event)throws Exception{
                win.setTitle("ZK application with Java");
            }
        };
        btn.addEventListener(Events.ON_CLICK, btnListener);
    }
}

4
ZK 範例 / ZK Button Toolbarbutton onClick 事件
« on: July 21, 2012, 11:52:50 AM »
Sample02.zul
--------------------
Code: [Select]
<?page id="page_event_listener_sample02" title="" contentType="text/html;charset=UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<zk>
    <window id="win_event_listener_sample02" title="Button Toolbarbutton SAMPLE02" width="600px" border="normal" closable="true" onClose="self.detach();"  apply="inisoft.mo.gui.Sample02">
        <vbox>
            <button id="btn1" label="普通按鈕" />
            <button id="btn2" label="提示按鈕" />
            <toolbarbutton id="tbtn3" label="Toolbarbutton按鈕" width="120px" />
            <toolbarbutton id="tbtn4" label="開子網頁按鈕" width="120px" />
        </vbox>
    </window>
</zk>

Sample02.java
---------------------
Code: [Select]
package inisoft.mo.gui;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.Page;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Button;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Toolbarbutton;
import org.zkoss.zul.Window;

/**
 * @author Van Chan
 */
public class Sample02 extends GenericForwardComposer{
    Page page_event_listener_sample02;
    Window win_event_listener_sample02;
    Button btn1,btn2;
    Toolbarbutton tbtn3,tbtn4;
    @Override
    public void doAfterCompose(Component comp) throws Exception
    {
      super.doAfterCompose(comp);       
     
    }
   
    public void onClick$btn1(Event event)throws Exception{
           btn1.setLabel("Button 被點擊!"); 
    }
   
    public void onClick$btn2(Event event)throws Exception{
           Messagebox.show("提示 Messagebox !");
    }
   
    public void onClick$tbtn3(Event event)throws Exception{
           tbtn3.setLabel("Toolbarbutton 被點擊!");
    }
   
    public void onClick$tbtn4(Event event)throws Exception{
           Window win=(Window)Executions.createComponents("/form/Sample01.zul", null, null);
           win_event_listener_sample02.appendChild(win);
           win.setPosition("center");
           win.setSizable(true);
           win.doModal();
    }   
}

5
ZK 範例 / ZK Textbox Intbox 加入EventListener驗證
« on: July 21, 2012, 10:50:03 AM »
Sample01.zul
-------------------------
Code: [Select]
<?page id="page_listener_sample01" title="" contentType="text/html;charset=UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<zk> 
<window id="win_event_listener_sample01" title="EventListener SAMPLE" width="600px" border="normal" closable="true" onClose="self.detach();"  apply="inisoft.mo.gui.Sample01">
<vbox>
            <label value="文字驗證:"/>
            <textbox id="tbox_input" />
            <label value="數字驗證:"/>
            <intbox id="ibox_input" />
        </vbox>
    </window>
</zk>



Sample01.java
-------------------------
Code: [Select]
package inisoft.mo.gui;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Page;
import org.zkoss.zk.ui.WrongValueException;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Intbox;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Window;

/**
 * @author Van Chan
 */
public class Sample01 extends GenericForwardComposer {
    Page page_listener_sample01;
    Window win_event_listener_sample01;
    EventListener textboxListener,intboxListener;
    Textbox tbox_input;
    Intbox ibox_input;
       
    @Override
    public void doAfterCompose(Component comp) throws Exception
    {
      super.doAfterCompose(comp);     
      tbox_input.setWidth("200px");
      addValidationTextboxListener(tbox_input);     
     
      ibox_input.setWidth("100px");
      addValidationIntboxListener(ibox_input);
    } 
   
    public void addValidationTextboxListener(Textbox tbox){
           textboxListener = new EventListener()
           {
                public void onEvent(Event event) throws Exception {
                        String regularExpression="\\s+"; //for check long whitespace character
                        Textbox textbox=(Textbox)event.getTarget();
                        String value = "";
                        value = textbox.getValue()+"";                 
                        if("".equals(value) || value.matches(regularExpression)){
                            String ErrorMsg="Can not be empty, and not only contain blank characters !";
                            throw new WrongValueException(textbox,ErrorMsg);
                        }
                }
           };
           tbox.addEventListener(Events.ON_BLUR,textboxListener);
    }
   
    public void addValidationIntboxListener(Intbox ibox){
            intboxListener = new EventListener()
            {
                public void onEvent(Event event) throws Exception {
                        Intbox intbox=(Intbox)event.getTarget();
                        String value = "";
                        value = intbox.getValue()+"";
                       if("null".equals(value) || value.matches("\\s+")){
                           throw new WrongValueException(intbox, "Can not be empty, and not only contain blank characters !");
                       }
                }
            };
            ibox.addEventListener(Events.ON_BLUR, intboxListener);
    }
}

6
ZK 相關文件及教學 / ZK Installation Guide
« on: July 14, 2012, 04:33:08 PM »
For NetBeans IDE User

Install NetBeans REM

Install NetBeans
1. Download the latest NetBeans IDE from here.
2. Follow the installation wizard.

Install REM plugin
1. Download the latest REM plugin from here
2. Start NetBeans
3. On NetBeans' main menu bar, select Tools > Plugins.
4. Click on the "Downloaded" tab, followed by "Add Plugins" to open the file explore.
5. Navigate to where REM is downloaded and select the REM plugin.
6. Click "Install" and follow the NetBeans plugin manager prompts.

Reference Documents


For Eclipse User

Download Eclipse IDE

Download ZK Studio

Eclipse 3.7 (Indigo)
- Marketplace
  [Help] -> [Eclipse Marketplace]   http://marketplace.eclipse.org/content/zk-studio

- Update Site [Help] ->
  [Install New Software]  http://studio.zkoss.org/resource/plugins/eclipse_3_7

- Package
  Offline installation package download

- Release Note

- ZK Studio Installation Guide

Reference Documents

7
ZK 相關文件及教學 / ZK 介紹
« on: July 14, 2012, 03:43:45 PM »
ZK 介紹

ZK是一套以AJAX/XUL/Java為基礎的網頁應用程式開發框架,用於豐富網頁應用程式的使用介面。最大的好處是,在設計AJAX網路應用程式時,輕鬆簡便的操作就像設計桌面程式一樣。ZK包含了一個以AJAX為基礎、事件驅動(event-driven)、高互動性的引擎,同時還提供了多樣豐富、可重複使用的XUL與HTML組件,以及以XML為基礎的使用介面設計語言ZK User-interfaces Markup Language(ZUML)。

ZK提供超過120個XUL組件及80個XHMTL組件。舉凡listbox, slider, audio, slider, tree, combobox, tabbox, auto-completion等均有支援。ZK亦提供FCKeditor,Dojo, Google Maps,和SIMILE Timeline的組件,讓使用者直接以Java控制,無須使用JavaScript。

宫方網圵: www.zkoss.org
ZK中國  : zh.zkoss.org
DEMO   : www.zkoss.org/zkdemo/

Pages: [1]