# How to abstract the frontend part at max?

asked 2017-05-13 05:55:42 +0800

bwlobao
3 2

Hi!!! My name is Bruno, and im from Brazil. Im studying Zk studio since a few months ago cause of a new job, and im not good with the frontend part of developing. Usually i use templates to assist me on developing faster and more efficiently my projects focusing only on the backend part. But i didnt find any way to use a full html template into a zul file. Theres any way to do that? If there is, but not with html templates how can i do that? Thank you in advance!

delete retag edit

Sort by » oldest newest most voted

answered 2017-05-15 08:19:11 +0800

cor3000
3669 1 7

ZK has its own layout and themes when using the zul components. When integrating a 3rd party layout it's often easier to reuse the layout templates and styles. And build the UI based on zhtml components in the xhtml component set.

https://www.zkoss.org/wiki/ZKDeveloper'sReference/UIPatterns/HTMLTags/TheXHTMLComponent_Set

By default you can use the .zhtml file extension for easier integration with given html layouts. The integration then works best with shadow elements with are part of the ZK EE package. But using <include> or macro components also help splitting the overall layout into smaller (reusable) fragments.

Robert

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

chillworld
5153 3 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.

I think he is talking about html layout templates found all over the web. and not ZK <templates>.

( 2017-05-15 08:14:05 +0800 )edit

answered 2017-05-16 22:12:48 +0800

bwlobao
3 2

You both guys helped me a lot. Combining the two posts of yours now i can figure it out how to deal with my html layouts. Actually im going to use the html layouts to build my own library with separated elements just to use then with < include >`s into my projects. Thank you a lot @cor3000 and @chillworld!!!

you're welcome... I am glad I could "reduce your solution space".

( 2017-05-17 01:25:58 +0800 )edit