Template Examples - Stepbar Navigation

Author
Robert Wenzel, Engineer, Potix Corporation

Date
April 2017

Version
ZK 8.0

Introduction

Sometimes we get asked does ZK have this component or that feature. In some cases those features are reasonable additions to the framework in other cases when the feature requested is highly individual it's not a suitable candidate for a general feature. This is especially true for layout intensive changes, where the actual code is little and the custom styling is dominating.

e.g. for navigation components

While the recipe might be different ZK contains all the major ingredients to implement your requirements.

Navigation Model

Modelling a simple navigation case requires a collection of navigable items and a selected item defining the current navigation target. I deliberately use abstract terms here since the idea is quite abstract itself. So far the idea is the same independent of how it's presented to the user.

An existing ZK API class matching our requirements is e.g. a ListModelList (which will come in handy in a minute).

public abstract class NavModel<NavType> {
	private ListModelList<NavType> items = new ListModelList<>();
	private static final String CURRENT = "current";
	public NavType getCurrent() {
		Set<NavType> selection = items.getSelection();
		return selection.iterator().next();
	}

	protected void gotoItem(NavType item) {
		items.addToSelection(item);
		BindUtils.postNotifyChange(null, null, this, CURRENT);
	}
	
	@DependsOn(CURRENT)
	public boolean isFirst() {
		return getCurrentIndex() == 0;
	}

	@DependsOn(CURRENT)
	public boolean isLast() {
		return getCurrentIndex() == items.size() - 1;
	}

	private int getCurrentIndex() {
		return items.indexOf(getCurrent());
	}

	public void back() {
		gotoItem(items.get(getCurrentIndex() - 1));
	}

	public void next() {
		gotoItem(items.get(getCurrentIndex() + 1));
	}

	public ListModelList<NavType> getItems() {
		return items;
	}
}

Summary

Example Sources

The code examples are available on githup in the zk-mvc-shadow repository

zul files https://github.com/zkoss-demo/zk-mvc-shadow/tree/part-2/src/main/webapp/forEach

java classes https://github.com/zkoss-demo/zk-mvc-shadow/tree/part-2/src/main/java/zk/example/foreach

Running the Example

Clone the repo

   git clone git@github.com:zkoss-demo/zk-mvc-shadow.git

Checkout part-2

   git checkout part-2

The example war file can be built with maven:

   mvn clean package

Execute using jetty:

   mvn jetty:run

Then access the example http://localhost:8080/mvc-shadow/forEach

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.