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
- zk.example.wizard.model.WizardStep
- /wizardexample/src/main/webapp/WEB-INF/zul/template/wizard/wizard.zul
Simple Usage (Survey)
The basic wizard usage can be demonstrated implementing a simple survey consisting of basically 3 different parts:
- zul page
- ViewModel
- step pages
- zk.example.simplewizard.SimpleWizardViewModel
- ViewModel initialization code
...
@Init
public void init() {
survey = new Survey();
initWizardModel();
}
private void initWizardModel() {
List<WizardStep> availableSteps = Arrays.asList(
wizardStep(QUESTION_1),
wizardStep(QUESTION_2),
wizardStep(QUESTION_3),
wizardStep(DONE)
.withBeforeNextHandler(() -> Executions.sendRedirect("./simple.zul"))
.withNextLabel("Restart")
);
wizardModel = new WizardViewModel<WizardStep>(availableSteps);
}
private WizardStep wizardStep(String stepId) {
String title = stepId;
String templateUri = STEP_FOLDER + stepId + ".zul";
return new WizardStep(stepId, title, templateUri);
}
...
- Lines 3, 4, 18: initialize the viewModel properties
- Lines 14, 15: define custom "next" handling and label
- /wizardexample/src/main/webapp/simple.zul
- the start page using the simple wizard
<?component name="wizard" templateURI="/WEB-INF/zul/template/wizard/wizard.zul" ?>
<zk>
<div width="500px"
viewModel="@id('vm') @init('zk.example.simplewizard.SimpleWizardViewModel')"
validationMessages="@id('vmsgs')">
<wizard wizardModel="@init(vm.wizardModel)" survey="@init(vm.survey)">
<!-- injected template - visible inside the wizard -->
<template name="yesno">
<radiogroup selectedItem="@bind(answer)">
<radio label="Yes" value="${true}"/>
<radio label="No" value="${false}"/>
</radiogroup>
</template>
</wizard>
</div>
</zk>
- Line 1: define the <wizard> component based on a template
- Line 7: add a <wizard> using a wizardModel and a survey object
- Line 10: inject a template re-usable throughout the wizard steps
- /wizardexample/src/main/webapp/WEB-INF/zul/template/simplewizard/steps
- contains all the wizard steps showing one examplary step here question_2.zul
<zk xmlns:sh="shadow">
Have you ever climbed a rock?
<sh:apply template="yesno" answer="@ref(survey.answer2)"/>
</zk>
- Line 3: apply the previously injected template
That's it to use a wizard for a simple case. Now let's continue with a more complex case.
More complex Usage (Order Wizard)
- Basket
- adjust basket (add/ remove/ change items)
- Shipping Address
- enter shipping address
- Payment
- choose payment method + enter conditional details
- Confirmation
- review data, accept GTC submit order (handle exceptions)
- Feedback
- user feedback when order was successful
Data Model
zk.example.order.api.Order
- Order
- Basket
- BasketItem (list of)
- Payment (payment method)
- CreditCard (based on payment method)
- or BackAccount (based on payment method)
- ShippingAddress (city, street, zip code)
- Basket
Form Row template
Additional features
Input Mask
Bookmarks Handling
Custom I18N
using the same convenience functions in the zul and java code
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. |