0

zk bootstrap display data refresh

asked 2020-04-30 00:11:09 +0800

tinawang gravatar image tinawang
155 1

I try to integrate project with zk bootstrap, is it possible to refresh data in bootstrap element?

I applied a timer, and make sure it works normally. I add a <listbox> and its data updated after the @Command and @NotifyChange. Can above behavior apply in bootstrap element? I try to put the data in <label>, but it missing after data refresh. Use <z:label value="@load(state.type)" /> replace ${state.type}.

<!-- part of stateBoard.zul -->
<forEach items="@bind(vm.states)">
    <n:div sclass="col-12 col-md-6 col-lg-3 p-1">
        <state-box state="@load(each)" icon="@load(each.type)@converter('org.zkoss.admin.converter.TypeIconConverter')" color="@load(each.type)@converter('org.zkoss.admin.converter.TypeColorConverter')" />
    </n:div>
</forEach>
<!-- stateBox.zul -->
<zk xmlns="native" xmlns:z="zul">
    <div class="state-box rounded p-1 ${color}">
        <div class="row">
            <div class="col-8 px-4">
                <h6 class="text-black-50"><z:label value="@load(state.type)" /></h6>
                <h4><z:label value="@load(state.value)" /></h4>
                <z:label sclass="text-success" value="@load(state.ratio)@converter('org.zkoss.admin.converter.PercentageConverter')"/>
            </div>
            <div class="col-4 text-right px-4">
                <h2>
                <i class="${icon} text-black-50 h3"/>
                </h2>
            </div>
        </div>
    </div>
</zk>

https://github.com/zkoss-demo/admin-template/blob/master/src/main/webapp/WEB-INF/template/stateBox.zul

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
0

answered 2020-05-06 12:00:19 +0800

hawk gravatar image hawk
2620 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2020-05-06 12:03:43 +0800

Although <z:label value="@load(state.type)" /> is put among HTML elements, it's still a ZK component. So you can make it update with ZK. Since state comes from a collection:

<forEach items="@init(vm.states)">

You can notify a state's change in the following ways:

  • if you just change one state object:

BindUtils.postNotifyChange(null, null, state, "type");

  • call methods of ListModelList e.g. add(), remove()

If the above suggestions don't fit your case. Please post more details include related java ViewModel or a reproducible example. So that we can know how you notify the change of states.

link publish delete flag offensive edit

Comments

0

answered 2020-05-07 11:19:23 +0800

tinawang gravatar image tinawang
155 1

Base on the admin-template, I modified the StateVM.java, stateBoard.zul and stateBox.zul. For reproduce, please replace above files in the project.

StateVM.java: Set the @NotifyChange and @Command, timer will trigger the method refreshInfo.
stateBoard.zul: Add a timer, also add a <listbox> monitor the state value.
stateBox.zul: Let the value display in <label>.

Expect: The value in bootstrap element can update normally.
Actually: The value gone after timer 1st time trigger (state 1st refresh).

zkfiddle

Thank you.

link publish delete flag offensive edit
0

answered 2020-05-08 15:12:57 +0800

hawk gravatar image hawk
2620 1 5
http://hawkphoenix.blogsp... ZK Team

the root cause: shadow element cannot be put under a <nodom>

please see https://zkfiddle.org/sample/rear7m/3-112290-zk-bootstrap-display-data-refresh

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

RSS

Stats

Asked: 2020-04-30 00:11:09 +0800

Seen: 15 times

Last updated: May 08

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