Tablet Programming Tips"

From Documentation
m (correct highlight (via JWB))
 
(20 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{Template:UnderConstruction}}
 
 
 
{{Template:Smalltalk_Author|
 
{{Template:Smalltalk_Author|
 
|author=Monty Pan, Engineer, Potix Corporation
 
|author=Monty Pan, Engineer, Potix Corporation
|date=September, 20, 2012
+
|date=September 20, 2012
 
|version=ZK 6.5
 
|version=ZK 6.5
 
}}
 
}}
Line 9: Line 7:
  
 
== Introduction ==
 
== 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.
+
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 Style ==
+
== Different Styles ==
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: <tt>Combobox</tt>, <tt>Timebox</tt> and <tt>Colorbox</tt>)  developer can use them on tablet directly. For more detail, please read [[ZK_Component_Reference/Tablet_Devices/UI_Enhancements|UI Enhancements]].
+
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.  
  
Besides, if <tt>Image</tt> or <tt>Div</tt> add <tt>onClick</tt> property, developer must add CSS <tt>cursor: pointer;</tt> in <tt>sclass</tt> or <tt>style</tt>, thus tablet browser will trigger <tt>onClick</tt>.
+
ZK has adjusted related components such as <code>Combobox</code>, <code>Timebox</code> and <code>Colorbox</code> according to this principle, developers are now able to use them on tablet devices directly. For more details, please read [[ZK_Component_Reference/Tablet_Devices/UI_Enhancements|UI Enhancements]].
  
 
=== Mold Unsupport ===
 
=== 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 [[ZK_Component_Reference/Tablet_Devices/Unsupported_Molds|Unsupported Molds]]. In one word:
+
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 [[ZK_Component_Reference/Tablet_Devices/Unsupported_Molds|Unsupported Molds]].  
  
* component about input: does not support <tt>rounded</tt> mold.
+
Here's a summary below:  
* <tt>Button</tt>: does not support <tt>os</tt> and <tt>trendy</tt> molds.
 
* <tt>Groupbox</tt>: does not support <tt>default</tt> mold, will use <tt>3d</tt> as default mold.
 
* <tt>Splitter</tt>: does not support <tt>os</tt> mold.
 
* <tt>Tabbox</tt>: does not support <tt>accordion-lite</tt> mold.
 
  
== Different Event ==
+
* components related to input: does not support <code>rounded</code> mold.
 +
* <code>Button</code>: does not support <code>os</code> and <code>trendy</code> molds.
 +
* <code>Groupbox</code>: does not support <code>default</code> mold, will use <code>3d</code> as default mold.
 +
* <code>Splitter</code>: does not support <code>os</code> mold.
 +
* <code>Tabbox</code>: does not support <code>accordion-lite</code> mold.
  
=== Mouse Event ===
+
== Different Events ==
There is no mouse and cursor on tablet, so mouse-related event is different.
 
  
First, <tt>onMouseOver</tt> is not supported, <tt>tooltip</tt> and <tt>autodrop</tt> can't work on tablet too. Second, <tt>onRightClick</tt> is not supported on native browser event, but '''ZK simulate this event by "push and hold a while"''', so <tt>context</tt> property (show context menu) and <tt>onRightClick</tt> can use on tablet.
+
=== Mouse Events===
 +
As there are no mouse or cursor on tablets, mouse-related events are different to that of desktop's.
 +
 
 +
First of all, <code>onMouseOver</code> is not supported, <code>tooltip</code> and <code>autodrop</code> also can't work on tablet.  
 +
Secondly, <code>onRightClick</code> is not supported on native browser event, but '''ZK simulate this event by "push and hold a while"''', so <code>context</code> property (show context menu) and <code>onRightClick</code> can be used on tablet.
 +
 
 +
Moreover, if <code>Image</code> or <code>Div</code> adds an <code>onClick</code> property, developers must add CSS <code>cursor: pointer;</code> in <code>sclass</code> or <code>style</code>, so that tablet browser can trigger <code>onClick</code> property.
  
 
=== ClientInfoEvent ===
 
=== 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 <tt>ClientInfoEvent</tt>. Add <tt>onClientInfo</tt> to get <tt>ClientInfoEvent</tt> and call <tt>getOrientation()</tt>, <tt>isPortrait()</tt> or <tt>isLandscape()</tt>. There is an example:
+
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 <code>ClientInfoEvent</code> so to add this feature, simply add <code>onClientInfo</code> to get <code>ClientInfoEvent</code> and call <code>getOrientation()</code>, <code>isPortrait()</code> or <code>isLandscape()</code>.  
 +
 
 +
Here is an example:
  
 
<source lang="xml">
 
<source lang="xml">
Line 60: Line 65:
 
</source>
 
</source>
  
== Other Scrolling Issue ==
+
== Other Scrolling Issues ==
Scrolling principle on tablet, please read "[[Small_Talks/2012/September/Scrolling_on_Tablet|Scrolling on Tablet]]". Here we discuss the notice about implementation.
+
 
 +
In [[Small_Talks/2012/September/Scrolling_on_Tablet|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:
  
Use <tt><textbox multiline="true" /></tt> can create text area. When context is too large, <tt>Textbox</tt> 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 <tt>Image</tt>, developer must specify it's size or enable preload attribute or scroll bar will be wrong. See the following code:
+
* To create a text area, you can use <code><textbox multiline="true" /></code> can create text area and when the context is too large, <code>Textbox</code> 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 <code>Image</code>, developer must specify its size or enable the preload attribute otherwise scroll bar will not behave as it should be. See the following code:
  
 
<source lang="xml">
 
<source lang="xml">
Line 76: Line 85:
 
</source>
 
</source>
  
<tt>Window</tt> will not appear scroll bar totally, so end-user can't see "bottom". The solution is enable preload attribute:
+
In this case, <code>Window</code> 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:
  
<source lang="xml" high="3">
+
<source lang="xml" highlight="3">
 
<zk>
 
<zk>
 
<window contentStyle="overflow:auto" height="300px" border="normal">
 
<window contentStyle="overflow:auto" height="300px" border="normal">
Line 90: Line 100:
 
or specify size:
 
or specify size:
  
<source lang="xml" high="3">
+
<source lang="xml" highlight="3">
 
<zk>
 
<zk>
 
<window contentStyle="overflow:auto" height="300px" border="normal">
 
<window contentStyle="overflow:auto" height="300px" border="normal">
Line 100: Line 110:
 
</source>
 
</source>
  
Thus, <tt>Window</tt> can scroll correctly. We suggest enable preload attribute in zk.xml.
+
Our recommendation is to enable the preload attribute in zk.xml to save you any sort of trouble.  
  
Besides, we does not suggest set <tt>rows</tt> on <tt>Listbox</tt>, like this example:
+
*We donot suggest to set <code>rows</code> on <code>Listbox</code> like the example below:
  
 
<source lang="xml">
 
<source lang="xml">
Line 120: Line 130:
 
</source>
 
</source>
  
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 <tt>Grid</tt> and <tt>Tree</tt>.
+
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 <code>Grid</code> and <code>Tree</code>.
  
 
== As Simple as Possible ==
 
== 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.
+
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 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 <tt>Listbox</tt>, <tt>Grid</tt> and <tt>Tree</tt>.
+
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 <code>Listbox</code>, <code>Grid</code> and <code>Tree</code>.
  
 
== Conclusion ==
 
== 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!
 +
 +
{{Template:CommentedSmalltalk_Footer|
 +
|name=Potix Corporation
 +
}}

Latest revision as of 04:20, 20 January 2022

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.