ZK Team is proud to announce the introduction of a new project ZK Touch to the community. ZK Touch is a brand new set of mobile components developed based on ZK 6 focusing on mobile web development designed for building mobile websites with ZK.
Sneak Peek Video
HTML5 & CSS3 Based Mobile Components
Unlike desktop with its browser issues, current mobile devices are generally fully compatible with HTML5 and CSS3, ZK Touch is therefore able to embrace the power of HTML5 and CSS3 technology to present programmers with improved development process and users with better user and visual experience.
A Mobile Experience – Responsive Design
Since ZK 5, we have enhanced ZUL components to achieve compatibility with mobile devices, however, there are still a lot of different UI patterns and special use-cases that needed to be polished up especially for mobile devices, which is the so-called “responsive design” where users across a broad range of devices and browsers accesses a single source of content, laid out so as to be easily read and navigated with minimum resizing, panning and scrolling.
For example, a small button can be easily “clicked” with a cursor when you’re using a desktop PC but it is harder to “touch” a small button when operating on a mobile device. In such case, we set a min-width and min-height for buttons and make sure they work on different resolution of devices.
jQuery Mobile Integration
In this project, we have integrated jQuery Mobile to leverage existing resource and extend its power with ZK. ZK Touch is developed based on jQuery Mobile widgets and empowered by integrating ZK component life cycle. With this, developers are able to write a jQuery-Mobile project like a ZK project without having to learn jQuery Mobile’s life cycle and rules; you can write a mobile website folllowing ZK’s mechanism, model rendering, live model, template, features etc like the given sample below.
Integrating jQuery Mobile and ZK however, can solve this problem as being able to directly access data from the server without having to do all the above is a proven value of ZK.
The following two code snippets shows how updating a listview is done in jQuery Mobile and ZK Touch respectively.
In jQuery Mobile, to update listview, you have to call the refresh method manually
listbox.appendChild(new Listitem("new items"));
New Language & File Type Introduced
In ZK Touch, we introduce a new extension of ZK – “mbl” now you need to write “page.mbl” file for mobile devices. HTML 5 doctype is used by default in mobile components , we therefore use a new file type so as to separate the files from ZUL component sets to avoid any confusion.
ZUL Component Compatible
ZK Touch is a brand new component set, but surely users will be happy to know that it is also compatible with all ZUL components. Users are allowed to use already customized mobile compatible ZUL components if necessary. Moreover, just like how xhtml, native components can be accessed in ZUL, users are also able to access ZUL, html and native components sets in the new Touch component set.
Having said that, we encourage users to use ZK Touch components as it would provide better user-experience for end users.
ZK Touch is currently under construction, at this stage we have built a date-picker as our first component and we do plan to create more common components according to community needs and requests in order to deliver a mobile solution that would help users to create a real world mobile-site easily and efficiently. ZK Team is working with a goal in providing better user experience for end users and faster web development for programmers. We are open to any comments and recommendations, if you like the idea of ZK Touch or have any suggestions, please feel free to express yourself here. We appreciate any feedback from the community as you are our greatest motivation to always improve, innovate and go forward.