ZK8 Wizard Example - Part 4 final

From Documentation
Documentationobertwenzel
obertwenzel

Author
Robert Wenzel, Engineer, Potix Corporation
Date
March 2016
Version
ZK 8.0

Introduction

To wrap up the Wizard Example Series here the final Part showing how things finally fit together when applying a 3rd party framework layout - namely Bootstrap - to the previous implementation.

The implementation decisions/techniques used in the previous chapters now become handy. The strict separation between view and viewModel code enables the style overhaul without touching any Java code. Restyling an application still requires a significant amount of work where the major task is to adjust the various zul pages and templates to render the markup required by Bootstrap. But compared to changing both zul and java code the possibility to introduce errors is much smaller (and even if you cause probems, you know it's somewhere in the view).

Here a recording of the results (descriptions of the most significant changes will follow below):

Adding the Bootstrap resources

It's straight forward: just add the required css/js resources. ZK offers several ways to do so:

For simplicity of the example I just added them to my root page.

/wizardexample/src/main/webapp/order.zul [1]
  <!-- Latest compiled and minified CSS -->
  <?link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" ?>
  <!-- Latest compiled and minified JavaScript -->
  <?script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ?>

Of course in a real application you'll likely chose to include the css/js files in your web application (not the topic here).

Render the UI in Bootstrap style

Once the layout is decided (in the ideal case a web designer decided for you, and provided static html mockups), you can change you zul files accordingly. (Again there are several ways to change the style of a ZK application, themes, custom components and molds).

Here I'll not try to make all ZK components look "like" Bootstrap, instead I'll use XHTML components and native elements to produce the HTML necessary for Bootstrap. This allows to use and update the 3rd-party css files directly whenever needed (or even apply different bootstrap themes).

ZK8's reusable templates and shadow elements help again to avoid repeating the more verbose HTML markup.

Page/Wizard layout

http://getbootstrap.com/css/#overview-container

Basket layout

Form layout

Add some Responsiveness

Leverage the Bootstrap JS API

Tooltip

Modal

Summary

That's it for now, any ideas what to show next? Waiting for your comments.

Download

Running the Example

Checkout part-4

   git checkout part-4

The example war file can be built with maven:

   mvn clean package

Execute using jetty:

   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.