Small Talks/2012/September/Tablet Programming Tips

This page is under construction, so we cannot guarantee the accuracy of the content!

Author
Monty Pan, Engineer, Potix Corporation

Date
September, 20, 2012

Version
ZK 6.5

Introduction

After ZK 6.5 release, developer can use ZK to create a smooth web site for tablet. Because the hardware difference between tablet and PC, we must adjust the thinking method of design to look after both tablet and desktop and provide good user experience. This article is base on ZK 6.5, discuss the detail developer must know.

Different Style

End-user can only operate tablet by fingers, so the size of clickable components (like button) 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, such that prevent end-user click neighbor component carelessly. According to this principle, ZK adjust related components (eg: Combobox, Timebox and Colorbox) developer can use them on tablet directly. For more detail, please read UI Enhancements.

Besides, if Image or Div add onClick property, developer must add CSS cursor: pointer; in sclass or style, thus tablet browser will trigger onClick.

Mold Unsupport

On desktop, many components provide two or more molds to change style or behavior, but with operation and inapplicability reason, ZK does not support this mold on tablet. The detail list can refer to Unsupported Molds. In one word:

• component about 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 Event

Mouse Event

There is no mouse and cursor on tablet, so mouse-related event is different.

First, onMouseOver is not supported, tooltip and autodrop can't work on tablet too. Second, 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 use on tablet.

ClientInfoEvent

End-user can change orientation easily on tablet, and developer must identify the portrait/landscape to provide relevant size. ZK 6.5 add orientation information in ClientInfoEvent. Add onClientInfo to get ClientInfoEvent and call getOrientation(), isPortrait() or isLandscape(). There 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>