網頁

▼

2018/6/12

ZK 如何在include的zul頁面中切換成另一個zul

假設今天有個main.zulinclude了inner1.zul。若要在inner1.zul直接換成inner2.zul的作法如下。

main.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window>
    <include id="include" src="/inner1.zul"/>
</window>
</zk>

在inner1.zul中設計一個按鈕，點選該按鈕後會切換成inner2.zul。

inner1.zul

<zk>
    <div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('idv.matt.vm.Inner1VM')"> 
        <button label="To inner2" onClick="@command('toInner2')"/>
    </div>
</zk>

要在inner1.zul綁定的Inner1VM中取得main.zul的Include元件並設定為inner2.zul的位置即可。

package idv.matt.vm;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;

import org.zkoss.zk.ui.Page;
import org.zkoss.zul.Include;


public class Inner1VM {
    
//    @Command
//    public void toInner2(@ContextParam(ContextType.PAGE) Page page) {
//        // 透過Page元件取得Root component後，再用Component.query()搜尋id取得Include元件
//        Include include = (Include) page.getFirstRoot().query("#include"); // <include>的id="include"
//        include.setSrc("/inner2.zul"); // 修改<include>的src值
//        
//    }

    // 可改用@SelectorParam
    @Command
    public void toInner2(@SelectorParam("#include") Include include) {
        include.setSrc("/inner2.zul"); // 修改<include>的src值 
    }
    
}

不過這樣的做法違背了MVVM不應該知道UI元件的存在的初衷，應該將main.zul的include設為<include src="@load(currentUrl)">，然後在inner1.zul用@global-command()來通知main.zul的ViewModel MainVM中的@GlobalCommand 方法來更新currentUrl的值。請參考How to pass value between two include child pages and ViewModels。

將參數傳遞至include頁面的方法請參考傳遞參數至include的zul頁面及ViewModel


參考：

沒有留言:

張貼留言