How to abstract the frontend part at max?

answered 2017-05-15 05:20:54 +0800

chillworld
5367 ● 4 ● 9
https://github.com/chillw...

In ZK you have <template>, and in zk 8 you could be using it like you want it.
attention, it's a zul template you will apply to that.

But, the strongest abstraction lays in MVVM with include

ZUL 1 :

<window  apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init(some.package.SomeVMClass')>
    <include src="/WEB-INF/webpages/zk/some/package/zul2.zul" query="@ref(vm.query)"/>
</window>

Now, you see that we include a page (the src could be given by the VM because every property could be data binded)
And we declared a viewmodel, and as a second abstraction, I declared query as reference in the include.

But now in the zul 2 page, we have acces to vm and query

ZUL 2 :

<div>
    <textbox value="@bind(query.filterText)"/>
    <textbox value="@bind(vm.someString)"/>
</div>

The @ref, in this example query you can use if the getter of the query are different for each include. (the include could be in 3 of 4 pages).
Now, you could have different VM's, but now we have contracted to the VM that we need a getter and setter for someString.

As long each VM that includes zul2 will have this getter, (and of course pass the query) the zul2 will work and is abstracted.

I use this a lot when I have multiple screens where the filter above is always the same, or it might have a small difference (What I can show/hide with another @ref value.

Now, you want to use HTML templates, in ZK I don't think full HTML templates are a good idea.
You could easily insert some ZUL page, where you use the native namespace to create your html.
But remember, databinding will not work with html or native namespace.

Chill.