ZK8 Wizard Example - Part 2

From Documentation
DocumentationSmall Talks2015SeptemberZK8 Wizard Example - Part 2
ZK8 Wizard Example - Part 2

Author
Robert Wenzel, Engineer, Potix Corporation
Date
July/August 2015
Version
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:

  1. Basket
    adjust basket (add/remove/change items)
  2. Shipping Address
    enter shipping address
  3. Payment
    choose payment method + enter conditional details
  4. Confirmation
    review data, accept GTC submit order (handle exceptions)
  5. Feedback
    user feedback when order was successful

Data Model

The order model consists of straight forward java bean classes, (some methods return calculated values based on the properties, such as Basket.getTotalPrice())

Order.java
containing the order details
public class Order {
	private Basket basket;
	private ShippingAddress shippingAddress;
	private Payment payment;
	private boolean accepted;
	...
Basket.java
container for the basket items with methods to calculate totals
public class Basket {
	private List<BasketItem> items = new ArrayList<BasketItem>();
	...
	public BigDecimal getTotalPrice() {...}
	public int getTotalItems() {...}
	...
BasketItem
a single basket item with article, quantity, status and price
public class BasketItem {
	private String label;
	private int quantity;
	private BigDecimal unitPrice;
	private BasketItemStatusType status;
	...
ShippingAddress (city, street, zip code)
simplified address
public class ShippingAddress {
	private String street;
	private String city;
	private String zipCode;
	...
Payment (payment method)
payment details with conditional details, based on the payment method
public class Payment {
	private PaymentMethodType method;
	private CreditCard creditCard;
	private BankAccount bankAccount;
	...
CreditCard
based on payment method
public class CreditCard {
	private CreditCardType type;
	private String number;
	private String owner;
	...
BankAccount.java
based on payment method
public class BankAccount {
	private String iban;
	private String bic;
	...

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.