ZK8 Wizard Example - Part 2"
Robertwenzel (talk | contribs) m (→Introduction) |
Robertwenzel (talk | contribs) |
||
Line 11: | Line 11: | ||
I'll also highlight some optional features to give the example more of a real life feeling. | 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 | #Basket | ||
− | #: adjust basket (add/ remove/ change items) | + | #: adjust basket (add/remove/change items) |
#Shipping Address | #Shipping Address | ||
#:enter shipping address | #:enter shipping address | ||
Line 26: | Line 28: | ||
=== Data Model === | === 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 | ||
+ | <source lang="java"> | ||
+ | public class Order { | ||
+ | private Basket basket; | ||
+ | private ShippingAddress shippingAddress; | ||
+ | private Payment payment; | ||
+ | private boolean accepted; | ||
+ | ... | ||
+ | </source> | ||
+ | ;Basket.java | ||
+ | :container for the basket items with methods to calculate totals | ||
+ | <source lang="java"> | ||
+ | public class Basket { | ||
+ | private List<BasketItem> items = new ArrayList<BasketItem>(); | ||
+ | ... | ||
+ | public BigDecimal getTotalPrice() {...} | ||
+ | public int getTotalItems() {...} | ||
+ | ... | ||
+ | </source> | ||
+ | |||
+ | ;BasketItem | ||
+ | :a single basket item with article, quantity, status and price | ||
+ | <source lang="java"> | ||
+ | public class BasketItem { | ||
+ | private String label; | ||
+ | private int quantity; | ||
+ | private BigDecimal unitPrice; | ||
+ | private BasketItemStatusType status; | ||
+ | ... | ||
+ | </source> | ||
+ | |||
+ | ;ShippingAddress (city, street, zip code) | ||
+ | :simplified address | ||
+ | <source lang="java"> | ||
+ | public class ShippingAddress { | ||
+ | private String street; | ||
+ | private String city; | ||
+ | private String zipCode; | ||
+ | ... | ||
+ | </source> | ||
+ | |||
+ | ;Payment (payment method) | ||
+ | :payment details with conditional details, based on the payment method | ||
+ | <source lang="java"> | ||
+ | public class Payment { | ||
+ | private PaymentMethodType method; | ||
+ | private CreditCard creditCard; | ||
+ | private BankAccount bankAccount; | ||
+ | ... | ||
+ | </source> | ||
+ | |||
+ | ;CreditCard | ||
+ | :based on payment method | ||
+ | <source lang="java"> | ||
+ | public class CreditCard { | ||
+ | private CreditCardType type; | ||
+ | private String number; | ||
+ | private String owner; | ||
+ | ... | ||
+ | </source> | ||
− | + | ;BankAccount.java | |
− | + | :based on payment method | |
− | + | <source lang="java"> | |
− | + | public class BankAccount { | |
− | + | private String iban; | |
− | + | private String bic; | |
− | + | ... | |
+ | </source> | ||
=== Form Row template === | === Form Row template === |
Revision as of 11:39, 31 July 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
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. |