ZK8 Wizard Example - Part 4 final"
Robertwenzel (talk | contribs) |
Robertwenzel (talk | contribs) m (→Introduction) |
||
| Line 14: | Line 14: | ||
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. | 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 | + | The implementation decisions/techniques used in the previous chapters now become handy. The strict separation between view and viewModel code enables the style overhaul [https://github.com/cor3000/zk-wizard-example/commit/ba276f513ce7ee6c7f5428068deaa4a6ac6e38de 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): | Here a recording of the results (descriptions of the most significant changes will follow below): | ||
| Line 22: | Line 23: | ||
== Adding the Bootstrap resources == | == Adding the Bootstrap resources == | ||
| + | |||
| + | It's straight forward to add the required css/js resources (ZK offers several ways to do so: [http://books.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Script script component], [http://books.zkoss.org/wiki/ZUML_Reference/ZUML/Processing_Instructions/script script directive], [http://books.zkoss.org/wiki/ZK_Configuration_Reference/zk.xml/The_device-config_Element/The_embed_Element in zk.xml], [http://books.zkoss.org/wiki/ZK_Client-side_Reference/Language_Definition/javascript in lang-addon.xml]). | ||
| + | For simplicity of the example I just added them to my root page. | ||
| + | |||
| + | ;/wizardexample/src/main/webapp/order.zul [https://github.com/zkoss-demo/zk-wizard-example/blob/part-4/src/main/webapp/order.zul] | ||
== Render the UI in Bootstrap style == | == Render the UI in Bootstrap style == | ||
| + | |||
| + | |||
=== Page/Wizard layout === | === Page/Wizard layout === | ||
Revision as of 03:39, 9 March 2016
Robert Wenzel, Engineer, Potix Corporation
March 2016
ZK 8.0
Introduction
- Part 1 - Defining the Wizard
- Part 2 - Order Wizard (a more complex example)
- Part 3 - Form Handling and Input Validation
- Part 4 - Styling the wizard (with Bootstrap) (You are here)
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 to add the required css/js resources (ZK offers several ways to do so: script component, script directive, in zk.xml, in lang-addon.xml). For simplicity of the example I just added them to my root page.
- /wizardexample/src/main/webapp/order.zul [1]
Render the UI in Bootstrap style
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
- The source code for this article can be found in github (branch: part-4).
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. |