ZK8 Series: Build Your Own Responsive Website in 10 Seconds"
Jumperchen (talk | contribs) m |
Jumperchen (talk | contribs) m |
||
| Line 39: | Line 39: | ||
</zk:zk> | </zk:zk> | ||
</source> | </source> | ||
| − | As you can see above, these tags '' | + | As you can see above, these tags ''<html>'', ''<head>'', ''<body>'', and ''<div> with id container'' are all XHTML components which will be alive at server side that ZK update engine needed. Others are all native components as much as possible to save the memory consumption. |
=== Copy Web Resources === | === Copy Web Resources === | ||
In this example, we use two other librarys, [http://foundation.zurb.com/ Foundation], and [https://github.com/adamsea/jquery-ripple jQuery-ripple animation], which are licensed under MIT, so we can simply copy what they need to the index.zhtml file as follows. | In this example, we use two other librarys, [http://foundation.zurb.com/ Foundation], and [https://github.com/adamsea/jquery-ripple jQuery-ripple animation], which are licensed under MIT, so we can simply copy what they need to the index.zhtml file as follows. | ||
Revision as of 04:56, 12 February 2015
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)
This page is under construction, so we cannot guarantee the accuracy of the content!
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>
As you can see above, these tags <html>, <head>, <body>, and <div> with id container are all XHTML components which will be alive at server side that ZK update engine needed. Others are all native components as much as possible to save the memory consumption.
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. |