ZK8 Wizard Example - Part 1"

From Documentation
Line 22: Line 22:
 
= A reusable Wizard class/template =
 
= A reusable Wizard class/template =
  
−
zk.example.wizard.model.WizardViewModel.WizardViewModel<WizardStep>(List<WizardStep>)
+
;zk.example.wizard.model.WizardViewModel.WizardViewModel
−
zk.example.wizard.model.WizardStep
+
:
 +
 
 +
;zk.example.wizard.model.WizardStep
 +
:
 +
 
 +
;/wizardexample/src/main/webapp/WEB-INF/zul/template/wizard/wizard.zul
 +
:
  
−
/wizardexample/src/main/webapp/WEB-INF/zul/template/wizard/wizard.zul
 
  
 
== Simple Usage (Survey) ==
 
== Simple Usage (Survey) ==
Line 54: Line 59:
 
==== Input Mask ====
 
==== Input Mask ====
 
==== Bookmarks Handling ====
 
==== Bookmarks Handling ====
 +
==== Application Error Handling ====
  
 
=== More complex Usage (Order Wizard) ===
 
=== More complex Usage (Order Wizard) ===

Revision as of 07:24, 28 July 2015

DocumentationSmall Talks2015SeptemberZK8 Wizard Example - Part 1
ZK8 Wizard Example - Part 1
Author
Robert Wenzel, Engineer, Potix Corporation
Date
July/August 2015
Version
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)

/wizardexample/src/main/webapp/simple.zul /wizardexample/src/main/webapp/WEB-INF/zul/template/simplewizard/steps

More complex Usage (Order Wizard)

Basket Shipping Address Payment Confirmation Feedback

Data Model

  • Order
    • Basket (basket items)
    • Payment (payment method)
      • CreditCard or BackAccount (based on payment method)
    • ShippingAddress (city, street, zip code)

Form Row template

Additional features

Input Mask

Bookmarks Handling

Application Error Handling

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.
Retrieved from "https://www.zkoss.org/_w/index.php?title=Small_Talks/2015/September/ZK8_Wizard_Example_-_Part_1&oldid=43677"