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>

Other Scrolling Issue

Scrolling principle on tablet, please read "Scrolling on Tablet". Here we discuss the notice about implementation.

Use <textbox multiline="true" /> can create text area. When context is too large, Textbox can be scroll, but be attention: the scrolling behavior is handle by browser instead of ZK, will be different from other component.

If system contain Image, developer must specify it's size or enable preload attribute or scroll bar will be wrong. 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>

Window will not appear scroll bar totally, so end-user can't see "bottom". The solution is 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>

Thus, Window can scroll correctly. We suggest enable preload attribute in zk.xml.

Besides, we does not suggest set rows on Listbox, like this example:

	<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 can find it's incomplete then scroll it. The hint effect is not appear on lbx2. This suggestion is also fit Grid and Tree.