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.

More complex Usage (Order Wizard)

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

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)

Additional features

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.