Tablet Programming Tips
This page is under construction, so we cannot guarantee the accuracy of the content!
Monty Pan, Engineer, Potix Corporation
September, 20, 2012
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. 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.
As Simple as Possible
The screen's size of tablet (even smart phone) is smaller. As we talk before, some components become bigger to provide better user experience. So it's hard to design a complex layout and request end-user to operate meticulously.
The compute ability of tablet is far lower than desktop. The rendering time on desktop maybe short enough to ignore, but can't disregard on tablet. Design website on tablet with the concept of "As Simple as Possible" is important. The other way to improve rendering speed is enable the ROD attribute of component like Listbox, Grid and Tree.
Conclusion
ZK 6.5 provide the possibility of "desktop and tablet applications from the same codebase". But developer still need to care about some differences between desktop and tablet. Follow the article, developer can avoid these issues and create website more productively.
Enjoy ZK 6.5!
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |