ZK8 Series: Build Your Own Responsive Website in 10 Seconds
Jumper Chen, Senior Engineer, Potix Corporation
March 3, 2015
ZK 8.0.0.FL.20150211
ZUTI 1.0.0.FL.20150211 (ZK UI Template Injection)
Introduction
In the previous article, we demostrated how to manage Shadow Element with ZK MVVM to theme and style your web pages. In this article, we will guide you to integrate with Responsive Framework - Foundation in a few steps.
With upcoming ZK 8, we push a lot of efforts on parsing XHTML or HTML5 page to make it work seamlessly with original ZK structure (like XML based syntax). To be honest, the XML based is more clear and understandable but in the real world, the most popular HTML5 can support a optional to close empty elements which is not allowed in XML syntax. However, you can use or mix both of them to compose your web page with ZK 8. The following demo will show a effort-less power by using the pre-defined templates to layout your web page with ZK dynamic data binding (MVVM).
Demo
Here is a demo with 16 responsive web design templates for ZK application developers to apply.
- [/_w/images/0/05/2015-02-11_1614.swf for full size video]
- Online Demo
Steps
Create a Index Page
First of all, you need to create a index.zhtml page and then put these xml namespaces on top of it. (zk, Native, XHTML, Shadow)
You may use ZUL as well, but we don't use it in this demo.
For example,
<zk:zk xmlns="native" xmlns:x="xhtml" xmlns:sh="shadow" xmlns:zk="zk">
<x:html sclass="no-js" lang="en">
<x:head>
// put all of CSS links and JS links here
</x:head>
<x:body>
<x:div id="container"
viewModel="@id('vm') @init('org.zkoss.blog.example.FoundationVM')">
</x:div>
</x:body>
</x:html>
</zk:zk>
Copy Web Resources
In this example, we use two other librarys, Foundation, and jQuery-ripple animation, which are licensed under MIT, so we can simply copy what they need to the index.zhtml file as follows.
<x:head>
// put all of CSS links and JS links here
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/jquery.ripple.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/jquery.ripple.js"></script>
</x:head>
Declare View Model
Here is the FoundationVM class diagram. As the example code shown above, we provides three methods to convert from the given template name to link, icon, and source code for the index.zhtml file to apply.
Make JS library Work
Summary
Download
You can download the demo war file and all of the source code for this demo in Github
Comments
Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |