Previously in ZK, applications exceeding the boundaries of browser resolution relies on desktop browsers to automatically generates scroll bars by using CSS style overflow attribute so users can view the entire page but this feature unfortunately is not available on tablet or mobile browsers.
In upcoming ZK 6.5 where responsive design and one codebase for multiple devices is the key, we therefore introduce users to a new scrollview component, which is a component designed to easily construct a scroll-able web page on both tablet and mobile browsers.
When end users access your application via a Tablet or any mobile devices, scrollview component detects and triggers this feature. Oppositely, if the application was accessed via a desktop browser, scrollview remains un-triggered while desktop browser will automatically generate scroll bars when needed just like before.
Let’s take a look at the demo video below first before digging into the implementation.
Implementation of scrollview is easy. It can be easily used in a simple zul file as shown below:
This is Window 1
This is Window 2
scrollview also supports onScroll event: in the event you can easily detect if the user is scrolling outside boundaries, and you can choose to append more contents such as to load new updates in the case of Facebook.
[…] reading: ZK 6.5 & responsive design: Desktop and tablet applications from the same codebase ZK 6.5 Scrollview Component Preview var dzone_url = "http://blog.zkoss.org/index.php/2012/08/14/zk-6-5-tablet-ui-design/"; var […]
[…] reading: ZK 6.5 & Tablet UI Design ZK 6.5 Scrollview Component Preview var dzone_url = […]
[…] design: Desktop and tablet applications from the same codebase ZK 6.5 & Tablet UI Design ZK 6.5 Scrollview Component var dzone_url = […]