Template Examples - Stepbar Navigation"

From Documentation
m (Created page with "{{Template:Smalltalk_Author| |author=Robert Wenzel, Engineer, Potix Corporation |date=April 2017 |version=ZK 8.0 }} = Introduction = Sometimes we get asked does ZK have this co...")
 
Line 19: Line 19:
  
 
An existing ZK API class matching our requirements is e.g. a ListModelList (which will come in handy in a minute).
 
An existing ZK API class matching our requirements is e.g. a ListModelList (which will come in handy in a minute).
 +
By wrapping a ListModelList into our own application specific NavModel class we can enrich it with our own functionalities for seamless integration into our use case.
 +
The most important control methods are navigateTo, getCurrent, getItems, accompanied by a few derived navigation and state checking operations (next(), back(), isFirst(), isLast(). For instant MVVM integration the class automatically invokes notify change when the current navigation item changes. Derived attributes using @DependsOn trigger a change-notification automatically.
  
<source lang="java" high="2">
+
<source lang="java" high="3,5,10,33">
 
public abstract class NavModel<NavType> {
 
public abstract class NavModel<NavType> {
 +
private static final String CURRENT = "current";
 
private ListModelList<NavType> items = new ListModelList<>();
 
private ListModelList<NavType> items = new ListModelList<>();
private static final String CURRENT = "current";
+
 
 +
public void navigateTo(NavType item) {
 +
items.addToSelection(item);
 +
BindUtils.postNotifyChange(null, null, this, CURRENT);
 +
}
 +
 
 
public NavType getCurrent() {
 
public NavType getCurrent() {
 
Set<NavType> selection = items.getSelection();
 
Set<NavType> selection = items.getSelection();
 
return selection.iterator().next();
 
return selection.iterator().next();
 
}
 
}
 
+
protected void gotoItem(NavType item) {
+
public void back() {
items.addToSelection(item);
+
navigateTo(items.get(getCurrentIndex() - 1));
BindUtils.postNotifyChange(null, null, this, CURRENT);
+
}
 +
 +
public void next() {
 +
navigateTo(items.get(getCurrentIndex() + 1));
 
}
 
}
 
 
Line 42: Line 53:
 
public boolean isLast() {
 
public boolean isLast() {
 
return getCurrentIndex() == items.size() - 1;
 
return getCurrentIndex() == items.size() - 1;
 +
}
 +
 +
public ListModelList<NavType> getItems() {
 +
return items;
 
}
 
}
  
 
private int getCurrentIndex() {
 
private int getCurrentIndex() {
 
return items.indexOf(getCurrent());
 
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;
 
 
}
 
}
 
}
 
}

Revision as of 07:31, 28 March 2017

DocumentationSmall Talks2017AprilTemplate Examples - Stepbar Navigation
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). By wrapping a ListModelList into our own application specific NavModel class we can enrich it with our own functionalities for seamless integration into our use case. The most important control methods are navigateTo, getCurrent, getItems, accompanied by a few derived navigation and state checking operations (next(), back(), isFirst(), isLast(). For instant MVVM integration the class automatically invokes notify change when the current navigation item changes. Derived attributes using @DependsOn trigger a change-notification automatically.

public abstract class NavModel<NavType> {
	private static final String CURRENT = "current";
	private ListModelList<NavType> items = new ListModelList<>();

	public void navigateTo(NavType item) {
		items.addToSelection(item);
		BindUtils.postNotifyChange(null, null, this, CURRENT);
	}

	public NavType getCurrent() {
		Set<NavType> selection = items.getSelection();
		return selection.iterator().next();
	}
	
	public void back() {
		navigateTo(items.get(getCurrentIndex() - 1));
	}
	
	public void next() {
		navigateTo(items.get(getCurrentIndex() + 1));
	}
	
	@DependsOn(CURRENT)
	public boolean isFirst() {
		return getCurrentIndex() == 0;
	}

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

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

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

Render your Model

Dynamic updates

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 [email protected]: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.