A Preview of ZK Mobile for Android"

From Documentation
 
(8 intermediate revisions by 2 users not shown)
Line 9: Line 9:
 
=Introduction=
 
=Introduction=
  
In [http://docs.zkoss.org/wiki/Win_Android_%2410_Million_Developer_Challenge_by_ZK_Mobile_for_Android_%3B-%29 previous] article, it demonstrated how easy it is to port ZK on variety of platform depending on ZK's server-centric characteristic. In this article, I am going to introduce more HIL (Handset Interactive Language) components, and events, including frame, label, textbox, image, and button.
+
In [[Small_Talks/2007/November/Win_Android_$10_Million_Developer_Challenge_by_ZK_Mobile_for_Android%C2%A0;-%29 |previous]] article, it demonstrated how easy it is to port ZK on variety of platform depending on ZK's server-centric characteristic. In this article, I am going to introduce more HIL (Handset Interactive Language) components, and events, including frame, label, textbox, image, and button.
  
 
Following is the video of a ZK Mobile for Android client. It includes a URL textbox and two buttons. The "GO" button is used to open the URL while the other one will close the ZK Mobile for Android client itself.
 
Following is the video of a ZK Mobile for Android client. It includes a URL textbox and two buttons. The "GO" button is used to open the URL while the other one will close the ZK Mobile for Android client itself.
  
<gflash width="500" height="500">http://docs.zkoss.org/images/f/fe/Client-engine.swf</gflash>
+
<gflash width="500" height="500">Client-engine.swf</gflash>
  
  
From now on, in addition to ZUL, ZHTML, and [http://docs.zkoss.org/wiki/Simple_and_Reach_-_The_ZK_Mobile_Computing MIL] components, you have another choice to write your application with HIL (Handset Interactive Language) components. In the following paragraphs, I will introduce you the basic HIL components, and how they interact with each in ZK's event-driven way.
+
From now on, in addition to ZUL, ZHTML, and [[Small_Talks/2007/June/Simple_and_Reach_-_The_ZK_Mobile_Computing | MIL]] components, you have another choice to write your application with HIL (Handset Interactive Language) components. In the following paragraphs, I will introduce you the basic HIL components, and how they interact with each in ZK's event-driven way.
  
 
=Labels and Image=
 
=Labels and Image=
Line 22: Line 22:
 
Here is another example you might look familiar.
 
Here is another example you might look familiar.
  
<gflash width="500" heigth="500">http://docs.zkoss.org/images/e/ec/Image-label.swf</gflash>
+
<gflash width="500" height="500">Image-label.swf</gflash>
  
  
Line 42: Line 42:
 
The onChanging demo program.
 
The onChanging demo program.
  
<gflash width="500" heigth="500"> http://docs.zkoss.org/images/f/f7/Onchanging.swf</gflash>
+
<gflash width="500" height="500">Onchanging.swf</gflash>
  
  
Line 56: Line 56:
  
 
You type on the textbox "original" and the result is reflected to label "copy" immediately.
 
You type on the textbox "original" and the result is reflected to label "copy" immediately.
 
  
 
=Try It Yourself=
 
=Try It Yourself=

Latest revision as of 04:31, 17 December 2010

DocumentationSmall Talks2008JanuaryA Preview of ZK Mobile for Android
A Preview of ZK Mobile for Android

Author
Robbie Cheng, Engineer, Potix Corporation
Date
Jan 4, 2008
Version


Introduction

In previous article, it demonstrated how easy it is to port ZK on variety of platform depending on ZK's server-centric characteristic. In this article, I am going to introduce more HIL (Handset Interactive Language) components, and events, including frame, label, textbox, image, and button.

Following is the video of a ZK Mobile for Android client. It includes a URL textbox and two buttons. The "GO" button is used to open the URL while the other one will close the ZK Mobile for Android client itself.


From now on, in addition to ZUL, ZHTML, and MIL components, you have another choice to write your application with HIL (Handset Interactive Language) components. In the following paragraphs, I will introduce you the basic HIL components, and how they interact with each in ZK's event-driven way.

Labels and Image

Here is another example you might look familiar.


<frame title="Label and Image Demo" visible="true">
  Do you love this photo?
  <image src="sun.jpg"/>
  <label id="ans"/>
  <button label="YES" onClick='ans.value="YES"'/>
  <button label="NO" onClick='ans.value="NO"'/>
</frame>


As you could see, there doesn't exist much difference between it and ZUL. The major difference is that window component is replace of frame component since only one frame could be displayed at once. However, in addition to the above restriction, you could use HIL components in the same way with ZUL components.

The Textbox and onChanging event

The onChanging demo program.


<frame title="onChanging event demo" visible="true">
  onChanging textbox:
  <textbox id="original" onChanging="copy.value = event.value"/>
  instant copy: 
  <label id="copy"/>
</frame>


You type on the textbox "original" and the result is reflected to label "copy" immediately.

Try It Yourself

1. Installing Android SDK, refer to installing the SDK

2. Installing the Android Eclipse Plug-in (ADT), refer to Installing the Eclipse Plug-in (ADT)

3. Download zkand-demo.war zkand-demo.war and deploy it to Tomcat and then start the Tomcat

4. Download zkand.zip and extract it to a folder

5. In Eclipse, click on 'File', select Import.../General/Existing Projects into Workspace. Hit the browse button, and navigate to where you placed the extracted folder, select zkand and click OK..

6. Run zkand and use the url of the deployed zkand-demo application(EX: http://10.1.3.64:8080/zkand-demo/index.gil). To run Android application in Eclipse, please refer to here

Download

1. zkand-demo.war

2. zkand.zip

Summary

ZK Mobile for Android is no doubt an important feature since Android is a powerful client, we might realize the idea of off-line program on Android in the future. The ZK Team will keep on improving it and we hope you can give us feedbacks so we can make it better.




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