ZK8 Wizard Example - Part 1
Robert Wenzel, Engineer, Potix Corporation
July/August 2015
ZK 8.0
Introduction
NOT copy paste example uses Java 8 (recommendations welcome)
Highlight MVVM separation of Model and View keeping the state in the ViewModel (WizardModel) Focussing on the wizard pages and wizard data.
use the new template approach with zk-shadow-elements <sh:if> <sh:forEach> <sh:apply> <sh:choose>
next steps - integrate new form binding/validation - integrate a bootstrap layout without changing the UI
A reusable Wizard class/template
zk.example.wizard.model.WizardViewModel.WizardViewModel<WizardStep>(List<WizardStep>) zk.example.wizard.model.WizardStep
/wizardexample/src/main/webapp/WEB-INF/zul/template/wizard/wizard.zul
Simple Usage (Survey)
/wizardexample/src/main/webapp/simple.zul /wizardexample/src/main/webapp/WEB-INF/zul/template/simplewizard/steps
More complex Usage (Order Wizard)
Basket Shipping Address Payment Confirmation Feedback
Data Model
- Order
- Basket (basket items)
- Payment (payment method)
- CreditCard or BackAccount (based on payment method)
- ShippingAddress (city, street, zip code)
Form Row template
Additional features
Input Mask
Input Mask
More complex Usage (Order Wizard)
Summary
bla bla
What's next?
Download
- The source code for this article can be found in github.
Running the Example
The example consists of a maven web application project. It can be launched with the following command:
mvn jetty:run
Then access the overview page http://localhost:8080/longoperations/overview.zul
And that's what you'll see:
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |