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


Get Adobe Flash player

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.


<zk xmlns:m="http://www.zkoss.org/2012/mobile" 
	xmlns:zul="zul" xmlns:h="html" xmlns:w="client" >

	
	<m:view active="true" apply="composer.IndexComposer" title="ZK Forum Mobile">
		
		<m:header label="ZK Forum" theme="b" >
			<m:button type="home" href="index.mbl" label="Home" />
			<m:button type="search" href="search.mbl" label="Search" />
		</m:header>
		
 		<m:listbox id="listbox" class="categorys" theme="c" >
 			
 			<template name="model" >
 				<m:listitem href="category.mbl?category=${each.id}">
					<m:div class="info">
						<div class="title">${each.name}</div>
						<div class="author">${each.threads}</div>
					</m:div>					
 				</m:listitem> 				
 			</template>
 		</m:listbox>
 		<m:footer theme="b" label="Powered by ZK Touch" />
 	</m:view>
</zk>

Leverage ZK’s AJAX to jQuery Mobile

jQuery Mobile itself is simple enough. However, the fact that it adopts the “page” concept by default means that the wrapping of jQuery Mobile UI is done by page rather than component which would make things a bit more complicated. Every time a change is made, as little as just enlarging a button or setting a particular colour or theme, a new page is created making it not very practical in developing. Of course, technically developers can choose to fine tune a small part of the page but would involve a complicated process by firstly retrieving data from the server, changing it to a JavaScript or HTML object and then send it to the client side not to mention that there are potentially many difficulties developers may encounter during the process such as in deciding which API to call etc.

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

 var $dom = $("#listivew"),
    listview = $dom.data("listview");
$dom.append('<li><a href="docs/pages/index.html">new items</a></li>');
listview.refresh(false);

On the other hand, in ZK engine, a widget acts like a proxy helping users to handle HTML and/or JavaScript issues once a user invokes a server-side method. As a result, entries can be easily invalidated, added or removed, developers need only to concentrate on ZK life-cycle in the Java environment achieving higher stability of the project along with numerous other benefits like how it becomes easier to debug.

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.

Conclusion

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.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

15 Responses to “ZK Touch Sneak Peek”

  1. Simon says:

    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?

  2. TonyQ says:

    Hi Simon ,do you mean this demo ?
    https://github.com/simbo1905/ZkToDo2/blob/master/src/main/webapp/zktodo_d.zul

    Yes , I think ZK Touch could reuse the ViewModel as well. 🙂

  3. Timo says:

    Page refreshs?
    Where did all the ajax go to?

  4. TonyQ says:

    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. 😉

  5. Timo says:

    Why don’t you keep the way jQueryMobile already handles navigation?
    No page refreshs and nice transitions between pages during navigation.

  6. TonyQ says:

    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.

  7. Andreas Boos says:

    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?

  8. Timo says:

    @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.

  9. […] 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 […]

  10. Achim Loewer says:

    Hi all,
    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.

  11. Vas says:

    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?

  12. RichardL says:

    Hi Tony,
    Is the Tabbox component going to be in the first release of ZKTouch? I hope so!

  13. Jumper Chen says:

    Hi All,

    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.
    Regards,
    Jumper

  14. KimmoT says:

    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?

Leave a Reply