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.
Sounds great. Does MVVM work with ZK Touch so that something like the MVVM demo page on the ZKToDo2 demo app can have new .mbl page which uses the same ViewModel as the original desktop page?
Hi Simon ,do you mean this demo ?
Yes , I think ZK Touch could reuse the ViewModel as well. 🙂
Where did all the ajax go to?
There’s few ways to do better page navigation for user-experience .
1.Use old ways , simple changing include source or replace the content then chagned the bookmark, which we already supported.
2.Use a java util method to do a AURequest and to invoke pushState to change desktop in same page.
And for the point2 , it’s not in the phase one.
It’s still in a early stage , every suggestion is very welcome. 😉
Why don’t you keep the way jQueryMobile already handles navigation?
No page refreshs and nice transitions between pages during navigation.
Because the way jQuery mobile doing navigation is too aggressive,
it assume there’s a lot of views once your change the page and reusable.
There would be very complicated to handle the desktop in both client side and server side when we doing a navigation, so we left it to phase two.
It was exactly what I was expecting. In our company today, we must be very careful about developing pages for mobile devices. Keep up the excellent work. By the way, know it is too early to ask but there is planning to launch an enterprise version?
@TonyQ Hm, I understand that but I think an option to enable/disable page refresh would be better because for my project I need nice transitions between single pages without the whole site reloading.
[…] announces their development on a new project ZK Touch to the Java community that is due to release its beta version later this year. ZK Touch is a brand […]
we are using ZK for some years for our desktop pages.
I enjoyed to see this first step of ZK touch, but as I am currently looking how our company can go ‘mobil’ which also should include offline functionality, my question is,
is there any plan / way to support offline scenarios like jquery mobil can do it with phonegap?
Anyway good job and I will keep an eye on ZK touch.
ZK touch Launch date? any idea…still we could not consider zk because it lacks mobile widgets. All ajax frameworks have got mobile widgets and are very smooth to work.can we use existing zk to integerate with jquery mobile?
Is the Tabbox component going to be in the first release of ZKTouch? I hope so!
If you are interested in ZK Touch, you may give it a try with the current ZK 6.1 EE Freshly version, which can built-in support on touch devices (like ipad, tablet devices) without changing your project source code. Please refer to this ZK trackers with touch issues – http://tracker.zkoss.org/secure/IssueNavigator.jspa?reset=true&jqlQuery=labels+%3D+touch
Please download from here – http://www.zkoss.org/download/freshly/
Happy to hear that give us your valuable feedback.
I had hoped to see something that combines desktop (mouse) and mobile (touch) experiences (responsive design or mobile first) instead of separating them further apart…
Maybe responsive design can be made with “stock” widgets, if there happens to be any instructions available?
You can take a look at this blog – http://blog.zkoss.org/index.php/2012/07/31/zk-6-5-responsive-design-desktop-and-tablet-applications-from-the-same-codebase/