ZK8 Wizard Example - Part 2"
Robertwenzel (talk | contribs) m (→Order Model) |
Robertwenzel (talk | contribs) m (→Order Model) |
||
| Line 27: | Line 27: | ||
=== Order Model === | === Order Model === | ||
| + | |||
| + | The order model consists of straight forward java bean classes, to hold the data input during the order process. These classes are unaware of being used in inside a Wizard they simply provide getters and setters to hold/represent their state. | ||
| + | (When looking into the code don't be confused by the validation annotations I'll talk about this topic in Part 3 '''LINK ME'''.) | ||
[[File:order_class_dia.png]] | [[File:order_class_dia.png]] | ||
| − | + | === Wizard/Step View Models === | |
| − | + | There are 3 ZK view models representing our Ordering process. The <code>OrderViewModel</code> controls the overall wizard, initializes the steps and eventually the submits the final order. Two of the wizard steps require additional logic which is implemented in <code>BasketViewModel</code>(adding/removing basket items and display recommendations) and <code>PaymentViewModel</code> (handle payment method changes). | |
| − | [[File:viewmodel_services_class_dia.png]] | + | [[File:viewmodel_services_class_dia.png|800px]] |
=== Form Row template === | === Form Row template === | ||
Revision as of 07:12, 6 August 2015
Robert Wenzel, Engineer, Potix Corporation
July/August 2015
ZK 8.0
Introduction
In the previous Part 1 LINK ME I created a wizard template together with a model. I showed its usage in a trivial case. This Part will focus on reusing the same wizard template in a different scenario with more complex steps. I'll go deeper into templating and reuse various parts of the UI.
I'll also highlight some optional features to give the example more of a real life feeling.
Order Wizard (a more complex example)
As an example I chose a classical Shopping basket and Checkout process with the following steps:
- 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
Order Model
The order model consists of straight forward java bean classes, to hold the data input during the order process. These classes are unaware of being used in inside a Wizard they simply provide getters and setters to hold/represent their state. (When looking into the code don't be confused by the validation annotations I'll talk about this topic in Part 3 LINK ME.)
Wizard/Step View Models
There are 3 ZK view models representing our Ordering process. The OrderViewModel controls the overall wizard, initializes the steps and eventually the submits the final order. Two of the wizard steps require additional logic which is implemented in BasketViewModel(adding/removing basket items and display recommendations) and PaymentViewModel (handle payment method changes).
Form Row template
Additional features
Input Mask
Bookmarks Handling
Custom I18N
using the same convenience functions in the zul and java code
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/wizardexample/order.zul
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |