How to abstract the frontend part at max?

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

bwlobao gravatar image bwlobao
3 2

updated 2017-05-13 16:11:24 +0800

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 flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

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

cor3000 gravatar image cor3000
4351 2 7
ZK Team

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.


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.


link publish delete flag offensive edit

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

chillworld gravatar image chillworld flag of Belgium
5322 4 9

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)"/>

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 :

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

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.


link publish delete flag offensive edit


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

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

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

bwlobao gravatar image 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!!!

link publish delete flag offensive edit


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

cor3000 ( 2017-05-17 01:25:58 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




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

Seen: 40 times

Last updated: May 16 '17

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More