0

Using template for rendering native html elements

asked 2014-03-12 18:34:07 +0800

SOffermann gravatar image SOffermann
1

Hello,

I hope someone can help me with the following problem:

I try to render native html by using the template component of zk. I tried the following, but it does not work, because the children attribute seems to be ignored on native components:

<h:ul children="@load(vm.items) @template('itemTmpl')">
  <zk:template name="itemTmpl" var="item">
    <h:li>
      <zk:label value="@load(item.label)"/>
    </h:li>
  </zk>
</h:ul>

I also tried to use the special zk component which is not rendered in the client. But this way it also does not work, because zk gives me the log information, that the children attribute is ignored on that component.

<h:ul>
  <zk:zk children="@load(vm.items) @template('itemTmpl')">
    <zk:template name="itemTmpl" var="item">
      <h:li>
        <zk:label value="@load(item.label)"/>
      </h:li>
    </zk>
  </zk>
</h:ul>

Is there any other solution to render the required ul/li html construct in zk ? My problem is, tht I must use a predefined css and there is no possibility to adapt the css to use zk components like listbox or grid.

Thanks for any help.

Sven

delete flag offensive retag edit

Comments

5 Answers

Sort by » oldest newest most voted
1

answered 2014-03-18 14:52:21 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

Sven, i have changed a little the snippet above and it works(!)

The native ul component does not ignore the "children" attribute:

<window apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('snippets.LayoutsVM')" 
        border="none"  
        xmlns:n="native"
        style="overflow: auto;">

<n:div class="row">
   <n:div class="col-sm-7">
      <panel border="normal" height="50em" mold="bs" id="membersPanel">
         <caption>
             <label value="Members"/>
         </caption>
         <panelchildren style="overflow: auto;">
            <n:ul class="list-group" children="@bind(vm.membersModel)" >
               <template name="children" var="member">
                  <n:li class="list-group-item">
                     <hlayout>
                        <image src="@load('images/members/'.concat(member.photo))"/>
                        <vlayout>
                           <label value="@bind(member.name)" />
                           <button sclass="btn btn-primary btn-sm" label="Edit" />
                        </vlayout>
                     </hlayout>
                  </n:li>
               </template>
            </n:ul>
         </panelchildren>
      </panel>
   </n:div>
</n:div>

</window>

I am using ZK 7 on Windows 7 pro with Chrome ver. 33 and Firefox ver 27.

Inspect the ul html element and here is the produced html:

<div id="dVEP8" style="overflow: auto; height: 333px;">
     <ul id="dVEP9" class="list-group">
          <li class="list-group-item">
               <div id="dVEPr1" class="z-hlayout">

If this code is not working for you then maybe a ZK expert should explain us what's wrong... (if something is wrong)

Costas

link publish delete flag offensive edit
0

answered 2014-03-17 10:17:54 +0800

SOffermann gravatar image SOffermann
1

Hi chillworld,

thank you for your words.

I solved the problem by implementing two custom components to render ul and li elements. Even if it feels a little bit to overact, it solves my problem, because every component derived from HtmlBasedComponent supports the children attribute and the rendering of child components by using templates.

Greeings, Sven

link publish delete flag offensive edit
0

answered 2014-03-17 15:16:03 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2014-03-17 15:28:47 +0800

Sven,

maybe the following snippet can help you. I have used this technique to display a ZK 7 page with a "native" bootstrap look & feel and it works fine:

<window apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('snippets.LayoutsVM')" 
        border="none"  
        xmlns:n="native"
        style="overflow: auto;">

<n:div class="row">
   <n:div class="col-sm-7">
      <panel border="normal" height="50em" mold="bs" id="membersPanel">
         <caption>
             <label value="Members"/>
         </caption>
         <panelchildren style="overflow: auto;">
            <n:ul class="list-group">
            <div children="@bind(vm.membersModel)">
               <template name="children" var="member">
                  <n:li class="list-group-item">
                     <hlayout>
                        <image src="@load('images/members/'.concat(member.photo))"/>
                        <vlayout>
                           <label value="@bind(member.name)" />
                           <button sclass="btn btn-primary btn-sm" label="Edit" />
                        </vlayout>
                     </hlayout>
                  </n:li>
               </template>
            </div>
            </n:ul>
         </panelchildren>
      </panel>
   </n:div>
</n:div>

</window>

As you can see i am using native bootstrap styling. So, if the style you have been given is bootstrap based then it should work. Is this what you want?

Costas

link publish delete flag offensive edit
0

answered 2014-03-17 15:48:57 +0800

SOffermann gravatar image SOffermann
1

Hi Costas,

thank you for your solution.

Before I have implemented the custom components to render ul and li element, I have also tried your solution. In my case this does not work, because in the predefined css stylesheet I must use, the styling of the li element is defined as a direct child element of the ul element (ul > li). SO in my case the extra div between the ul and the li element breaks the css.

But with other configurations your solution may be a possible workaround, even if the extra div element breaks the html specification, which does not allow div elements as childrens of ul elements.

Greetings, Sven

link publish delete flag offensive edit
0

answered 2015-02-08 04:20:00 +0800

yagamipaul gravatar image yagamipaul
15 2

updated 2015-02-08 04:36:54 +0800

hi, i'm having a similar problem. The rendering of native content inside the children template work, but when the model is updated the native content is not rendered anymore, just Zk components. I try with the xhtml namespace, but doesn´t work.

edited: Found the answer (I'm using Zk 7.0.3 CE, native namespace as default)

I've used the xhtml namespace on the tbody to use the children attribute, previously i was using vlayout inside tbody, that worked for initial rendering, but on model update it fails. Now it works properly.

Fragment of code.

<table class="table table-bordered table-striped table-condensed table-hover">
    <tr>
    <th>Col1</th>
    <th>Col2</th>
</tr>
    </thead>
    <x:tbody children="@load(vm.dataList)">
<zk:template name="children" var="item">
    <tr>
        <td><td>
    <tr>
    .....
link publish delete flag offensive 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

Follow
1 follower

RSS

Stats

Asked: 2014-03-12 18:34:07 +0800

Seen: 183 times

Last updated: Feb 08 '15

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