include src navbar dynamically [closed]

asked 2017-03-06 03:40:26 +0800

bayuprams gravatar image bayuprams

updated 2017-03-08 02:08:13 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

Hi i have problem, i did created include src on navbar and thats work. But the problem how to set include src dynamically.

here my sidebar.zul

<div id="sidebar" sclass="sidebar" apply="com.demo.controller.SidebarComposer"  >

    <div viewModel="@id('vm') @init('com.metrasys.controller.NavigationViewModel')">
        <navbar id="navbar" sclass="nav-list" orient="vertical" collapsed="false"
                onSelect="@command('navigatePage', target=self.selectedItem.attributes['navigationPage'])">

            <nav label="DASHBOARD" iconSclass="z-icon-archive"
                children="@load(vm.pageMap[self.label].values()) @template('navitem')"/>

            <nav label="ADMIN" iconSclass="z-icon-user-secret"
                children="@load(vm.pageMap[self.label].values()) @template('navitem')"/>

            <template name="navitem" var="navigationPage">
                <navitem label="@load(navigationPage.subTitle)" selected="@load(navigationPage.selected)"/>


and this my index.zul

<vlayout xmlns:n="native">

 <div id="container" sclass="vertical"
         viewModel="@id('vm') @init('com.demo.controller.NavigationViewModel')">

        <include id="contentInclude" mode="instant"  
                 currentPage="@ref(vm.currentPage)" >

                         <tabbox  model="@bind(vm.tabsModel)" >
                        <template name="model:tabpanel">
                              <include src="@bind(currentPage.includeUri)">                        

and here my mainpage.zul

<zk xmlns:n="native">
<style src="/bootstrap/css/bootstrap.css"/>
<style src="/css/fonts.css"/> 
<style src="/less/index.css.dsp"/>

    <hlayout spacing="0">
    <include src="sidebar.zul"/> 

        <vlayout spacing="0" hflex="1">

          <include src="index.zul"/>    


    <script src="js/jquery.flot.pie.js"/>
    <script src="js/jquery.sparkline.min.js"/>

the problem is how to set include src dynamically from other page.

delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by cor3000
close date 2017-03-09 04:08:36

2 Answers

Sort by ยป oldest newest most voted

answered 2017-03-08 02:19:30 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

In MVVM where each VM represents the state of a part of the page you try to avoid changing the state of another VM directly. A simple way is to bind/post a global command when navigation occurs and listen to it in your NavigationViewModel.

At the bottom it explains how to trigger the command also dynamically from anywhere in your code.

Here the source code from our example: https://github.com/zkoss/zkessentials/blob/master/src/main/java/org/zkoss/essentials/chapter7/ajaxbased/mvvm/NavigationViewModel.java#L13

The VM listens to a @GlobalCommand "onNavigate" in order to update the src. In our example it is fired when a bookmark changes, but you can post a global command under any condition you need. example of dynamically posted global command

link publish delete flag offensive edit

answered 2017-03-08 14:54:07 +0800

bayuprams gravatar image bayuprams

problem solved, thanks for all

link publish delete flag offensive edit

Question tools

1 follower



Asked: 2017-03-06 03:40:26 +0800

Seen: 46 times

Last updated: Mar 08 '17

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