On the basket page I use Bootstrap-tooltips configured with ZK8's data-handler, which can be used throughout the application by simply adding client-side data-attributes. Leverage the Bootstrap JS API Bootstrap Tooltipsīootstrap also offers a Javascript-api to enable dynamic effects. On the other hand, it does provide the most efficient way to render custom markup, since it only happens on the client side. When upgrading to a different ZK version later this may need to be adjusted.
The new mold is registered in lang-addon.xml. This is an (often forgotten) available option for any ZK widget in case the rendered markup needs to be customized. Var uuid = this.uuid, content = this.domContent_() Īs custom mold implementation requires some additional knowledge about the internal structure of a ZK widget, I try to use this approach only if necessary.
Line 1: is replaced by a with dynamic styling based depending on the presence of an error message.wizardexample/src/main/webapp/WEB-INF/zul/order/steps/basket.zul In order to make the page a little more responsive to browser width changes, the Basket recommendations on the bottom use the Bootstrap grid system to vary the number of recommendations per row at different display sizes: The Tooltips are enabled using the Bootstrap JS API. As described above, xhtml and native elements are used to render the markup required by bootstrap. The shadow element allows you to reuse the same ListModel of BasketItems from the BasketViewModel while only changing the layout and bind expressions. On the basket page the was replaced by a striped bootstrap table. Here, the bootstrap css class (container) - was added to provide a responsive fixed width layout - nothing else worth mentioning here. Page/Wizard Layout /wizardexample/src/main/webapp/order.zul If necessary the markup structure of an existing ZK component can be adjusted using a custom mold to fit into the desired layout. ZK8's reusable templates and shadow elements help again to avoid repeating the more verbose HTML markup.
Bootstrap application wizard update#
This allows you to use and update the 3rd-party css styles directly whenever needed (or even apply different bootstrap themes later). 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. Once the layout has been decided (in the ideal case a web designer decided for you and provided static html mockups), you can change your zul files accordingly. Of course, in a real application, you'll likely choose to include the css/js files in your web application (not the topic here). Here is a recording of the results (descriptions of the most significant changes will follow below):
However, compared to changing both zul and java code, the possibility of introducing errors is much smaller (and even if new problems arise, they are obviously somewhere in the view). Restyling an application still requires a significant amount of work, in which the major task is to adjust the various zul pages and templates to render the markup required by Bootstrap.
Bootstrap application wizard code#
The strict separation between view and viewModel code enables the style overhaul without touching any Java code. The implementation decisions/techniques used in the previous chapters now become handy. To wrap up the Wizard Example Series, here is the final Part showing how things finally fit together when applying a 3rd party CSS framework (Bootstrap) to the wizard. Part 4 - Styling the Wizard (with Bootstrap) (You are here).Part 3 - Form Handling and Input Validation.Part 2 - Order Wizard (a more complex example).
0 kommentar(er)
