Small Talks/2012/September/Tablet Programming Tips

Author
Monty Pan, Engineer, Potix Corporation

Date
September 20, 2012

Version
ZK 6.5

Introduction

Upon the release of ZK 6.5, developers are now able to leverage ZK's power to create a smooth web application on tablet devices. As it is, because of the difference in hardware between tablet and PC, we must think differently in the design phase including every detail that needs to be adjusted to fit both devices and provide good user experience for both. The article is based on ZK 6.5, exploring and discussing how you can control and use ZK 6.5 to make the best use out of it.

Different Styles

For tablet, end-users operate by fingers through touch interactions so the the size of clickable components (e.g. buttons) can't be too small, 24*24px is the limitation. On the other hand, if component's size is small, the spacing between components must be bigger to prevent end-users from touching neighbouring components accidentally.

ZK has adjusted related components such as Combobox, Timebox and Colorbox according to this principle, developers are now able to use them on tablet devices directly. For more details, please read UI Enhancements.

Mold Unsupport

On desktop, many components provide two or more molds to change its style or behavior, but due to operational and inapplicability reasons, ZK does not support this mold on tablet. For detailed list, please refer to Unsupported Molds.

Here's a summary below:

• components related to input: does not support rounded mold.
• Button: does not support os and trendy molds.
• Groupbox: does not support default mold, will use 3d as default mold.
• Splitter: does not support os mold.
• Tabbox: does not support accordion-lite mold.

Different Events

Mouse Events

As there are no mouse or cursor on tablets, mouse-related events are different to that of desktop's.

First of all, onMouseOver is not supported, tooltip and autodrop also can't work on tablet. Secondly, onRightClick is not supported on native browser event, but ZK simulate this event by "push and hold a while", so context property (show context menu) and onRightClick can be used on tablet.

Moreover, if Image or Div adds an onClick property, developers must add CSS cursor: pointer; in sclass or style, so that tablet browser can trigger onClick property.

ClientInfoEvent

End-users can easily change the orientation of a tablet, developers must identify portrait/landscape to provide relevant size. ZK 6.5 adds orientation information in ClientInfoEvent so to add this feature, simply add onClientInfo to get ClientInfoEvent and call getOrientation(), isPortrait() or isLandscape().

Here is an example:

	<tabbox id="tbx" height="400px" width="600px">
		<attribute name="onClientInfo"><![CDATA[
		ClientInfoEvent oe = (ClientInfoEvent) event;
		lbl.setValue(oe.getOrientation());
		if (oe.isPortrait()) {
			tbx.setHeight("600px");
			tbx.setWidth("400px");
		} else {
			tbx.setHeight("400px");
			tbx.setWidth("600px");
		}
		]]></attribute>
		<tabs>
			<tab label="tab 1" />
		</tabs>
		<tabpanels>
			<tabpanel>
				Current Orientation:
				<label id="lbl" />
			</tabpanel>
		</tabpanels>
	</tabbox>

Other Scrolling Issues

In Scrolling on Tablet we talked about the basic principle of scrolling on tablets.

In this section, we will discuss about some out of ordinary components which you may meet during implementation:

• To create a text area, you can use <textbox multiline="true" /> can create text area and when the context is too large, Textbox can be scrolled. Please note that this scrolling behavior is handled by browser itself instead of ZK, therefore its behaviour will be different from other components in which scrolling are done by ZK.

• If system contains an Image, developer must specify its size or enable the preload attribute otherwise scroll bar will not behave as it should be. See the following code:

	<zk>
		<window contentStyle="overflow:auto" height="300px" border="normal">
			<image src="http://www.zkoss.org/resource/img/index/src/top_bannerimage3.png" />
			<div>bottom</div>
		</window>
	</zk>

In this case, Window will not produce a scroll bar, end-users can't see the whole image as they cannot scroll down. For this issue, the solution is to enable preload attribute:

	<zk>
		<window contentStyle="overflow:auto" height="300px" border="normal">
			<custom-attributes org.zkoss.zul.image.preload="true"/>
			<image src="http://www.zkoss.org/resource/img/index/src/top_bannerimage3.png" />
			<div>bottom</div>
		</window>
	</zk>

or specify size:

	<zk>
		<window contentStyle="overflow:auto" height="300px" border="normal">
			<image height="500px" 
			 src="http://www.zkoss.org/resource/img/index/src/top_bannerimage3.png" />
			<div>bottom</div>
		</window>
	</zk>

Our recommendation is to enable the preload attribute in zk.xml to save you any sort of trouble.

• We donot suggest to set rows on Listbox like the example below:

	<zk>
		<zscript> String[] s = new String[100];	</zscript>
		<listbox id="lbx1" height="300px">
			<zk forEach="${s}">
				<listitem label="${forEachStatus.index + 1}" />
			</zk>
		</listbox>
		<listbox id="lbx2" rows="8">
			<zk forEach="${s}">
				<listitem label="${forEachStatus.index + 1}" />
			</zk>
		</listbox>		
	</zk>

On iPad, only a little part of the tenth item of lbx1 is visible, end-user finds it incomplete so they'd know that it is scrollable. This hint effect does not appear on lbx2 when you set rows to a certain value. This also applies to Grid and Tree.

As Simple as Possible

As mentioned before, the screen size of tablets and smartphones are much smaller and components become larger in order to provide better user experience. Therefore, it is not wise to design a complex layout and expect users to operate meticulously.

The compute ability of a tablet is far lower than that of a desktop. The rendering time on desktop may be short enough to ignore, but can't be disregarded on a tablet. Design websites on tablet with the concept of "As Simple as Possible" is therefore very important. Another way to improve rendering speed is to enable the ROD attribute of components like Listbox, Grid and Tree.

Conclusion

ZK 6.5 provides the ability to create "desktop and tablet applications from the same codebase". Having said that however, developers still need to pay attention to some of the fundamental differences between desktop and tablet. Follow this article, developer scan avoid these issues and create websites in a very productive way.

Enjoy ZK 6.5!

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.