AdSense

網頁

2018/6/11

ZK 使用MVVM查詢並使用Grid呈現查詢結果

本使用ZK MVVM來做一個模擬查詢的簡單功能。

首先建立一個有查詢按鈕的main.zul頁面，並預期在按下查詢按鈕後會將結果顯示在頁面下方的<grid>。

main.zul

<?page title="main" contentType="text/html;charset=UTF-8"?>
<zk>
    <window id="mainWindow" 
        apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('idv.matt.vm.MainVM')">
        
        <button label="查詢" onClick="@command('queryUserList')"/><!-- 點擊後會呼叫 MainVM.queryList() -->
        <separator bar="true"/>
        <grid model="@load(vm.userList)">
            <columns>
                <column label="名稱"/>
                <column label="年紀"/>
            </columns>
            <template name="model"><!-- <template>不用放在<rows>標籤中，至於為什麼我也搞不懂 -->
                <row>
                    <cell><label value="@load(each.name)"/></cell><!-- each是template中代表集合中每個物件的變數名稱，這邊即為User -->
                    <cell><label value="@load(each.age)"/></cell>
                </row>
            </template>
        </grid>
    </window>
</zk>

建立套用在main.zul的ViewModel。

MainVM.java

package idv.matt.vm;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;

import idv.matt.entity.User;

public class MainVM {
    
    private List<User> userList = new ArrayList<User>();
    
    @Command // 按下查詢按鈕後，因為設定了@command('queryUserList')，所以會呼叫此方法
    @NotifyChange("userList") // 意思是方法執行後會改變userList的狀態，所以請Composer去通知畫面重新載入userList的內容
    public void queryUserList() { 
        System.out.println("queryUserList()");

        // 以下模擬查詢出5個User並放入userList
        User user1 = new User("john", 30);
        User user2 = new User("ken", 33);
        User user3 = new User("Sandy", 25);
        User user4 = new User("Bill", 29);
        User user5 = new User("Mary", 31);
        
        userList.add(user1);
        userList.add(user2);
        userList.add(user3);
        userList.add(user4);
        userList.add(user5);
        
    }

    public List<User> getUserList() {
        return userList;
    }
    public void setUserList(List<User> userList) {
        this.userList = userList;
    }
    
}

User.java

package idv.matt.entity;

public class User {
    
    private String name;
    private Integer age;
    
    public User() {}
    
    public User(String name, Integer age) {
        this.name = name;
        this.age = age;
    }
    
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getAge() {
        return age;
    }
    public void setAge(Integer age) {
        this.age = age;
    }

}

參考：

標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

AdSense