Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I'm new to using ZK and now getting around to laying out things. Consider your typical layout with a left (west) navigation menu of link and when one clicks a link it opens the page in the "east" region.
Most of the examples show the pattern of your menu link fires an event and your View controller then has something like:
private void showPage(String zulFilePathName) throws InterruptedException {
try {
Borderlayout bl = (Borderlayout) Path.getComponent("/outerIndexWindow/borderlayoutMain");
Center center = bl.getCenter();
center.setFlex(true);
center.getChildren().clear();
Executions.createComponents(zulFilePathName, center, null);
Should I handle this same way using ZK6 where I'm using ViewModels to back my views? What type of class should I use to back my navigation menu - a SelectComposer? or maybe there is a better approach?
Oops meant to post this in "help" not General. Sorry about that.
I ended up using a Composer, in case someone finds this from a search
public class MenuComposer extends SelectorComposer<Component> {
private final static Logger logger = LoggerFactory.getLogger(MenuComposer.class);
@Listen("onMenuItemSelected=#menuSection")
public void onMenuItemSelected(ForwardEvent event) {
Div contentRegion = (Div)Path.getComponent("/homeWindow/contentDiv");
String compId = event.getOrigin().getTarget().getId();
contentRegion.getChildren().clear();
if ("productLink".equals(compId)) {
Executions.createComponents("characteristics.zul", contentRegion, null);
} else if ("cbgLink".equals(compId) ) {
Executions.createComponents("cbg.zul", contentRegion, null);
}
}
}
The menu
<window id="menuSection" border="none" apply="com.app.composer.MenuComposer"> <vbox> <button id="productLink" label="Product Definitions" forward="onMenuItemSelected"/> <button id="cbgLink" label="CBGs" forward="onMenuItemSelected"/> </vbox> </window>
Actually based on this article http://books.zkoss.org/wiki/Small%20Talks/2012/January/MVVM%20Extension:%20Access%20UI%20Components%20Inside%20ViewModel
I ended up possibly abusing a ModelView.. this seems so much more clean, but the MV is now dealing with the UI....
public class MenuVM {
@Command
public void onShowContent(@BindingParam("param") String page) {
Div contentDiv = (Div) Path.getComponent("/homeWindow/contentDiv");
contentDiv.getChildren().clear();
Executions.createComponents(page, contentDiv, null);
}
}
Now my buttons are more clear as well...
<button id="cbgLink" label="CBGs" onClick="@command('onShowContent', param='cbg.zul')"/>
If this approach is crappy please let me know (I know I posted in the wrong forum but figured I'd keep the whole thread in one place since I started it here.)
Hi rickcr,
You can try use 'include' then update its src in command, please refer to the sample below:
http://zkfiddle.org/sample/1b56def/4-MVVM-page-navigation
In this case, the two sub pages will share the same VM.
Regards,
Ben
Asked: 2012-06-01 17:53:21 +0800
Seen: 420 times
Last updated: Jun 05 '12
