Google Calendar Service on ZK Mobile

From Documentation
DocumentationSmall Talks2007JulyGoogle Calendar Service on ZK Mobile
Google Calendar Service on ZK Mobile

Ian Tsai, Engineer, Potix Corporation
July 24, 2007
1. Apache-Tomcat-5.5.X
2. ZK 2.4.1
3. gcalz-0.8.jar
4. zkmob-0.8.6-FL-2007-07-24 later


Last time in Integrating Google Calendar with ZK Timeline Component I introduced how to use gcalz on general web project. This time I'll show how to use it to build a ZK Mobile project.

Flash Live Demo

Step by Step Demonstration

Before we start, please refer to ZK Mobile Quick Start. You must install SUN's Wireless toolkit environment and put zkmob client folder in the proper path you like. After that, link or put our ZK mobile demo project "zkmobcal.war" to your Tomcat's webapps. And then, let's step-by-step use ZK Mobile client to access our Demo project:

1.Start up ZK Client Application: Double click "zkmob.jad" or follow the steps in "quick-start.pdf" to configure URL link to :http://localhost:8080/zkmobcal/ and press Go.


2.Login Google Calendar: Now you have entered the login page. Type your GMail account, password to authenticate and press GO!.


3.Browse Main Page: Here is the main page of our demo. There are many features in this panel:


  • Calendar Events Filter Info

Because a calendar could include numerous events, we need a filter mechanism to filter them to make our event list more readable, such as "today's," "next24hr's," etc.

  • User's Calendar List

With Google's Calendar service, every user could have multiple calendars. So here you can browse all the calendars in your account.

  • Current Event Start-to-End

This shows current event's( which one's radio button is selected) duration. If the duration is less than a day, it uses format: MM/dd HH:mm (duration)hr to show the event.

  • Event Status and Event Title

This gives event's brief infomation in selected calendar after filtering. This panel uses icon to show events' status: red colored icon means on-working events, blue icon means past events and green icon means future events. The shape of icons means the duration of events. Circle means the length of an event is less than 24hrs, while rhombus means longer than 24hrs.

4.Use Filter Function: Use UP and DOWN button on the simulator to put your focus on "User's Calendar List" and press Menu to select the filter you want. If you want to configure duration manually, use Manual option to select it.

NOTICE: Google Calendar service can only respond 25 events per query. So if the amounts of the filtered results are over the boundary, the events with earlier start date will not be shown in service response.

Main menu.png Main menu manual.png Manual.png

5.See Event's Detailed Information: When you already choose an event and put your focus on calendar's events list, you can select to Detail to see the detailed information about this event.

Main select event.png Detail2.png

Change Status Icons

If you want to change the status icon of events, simply change the following properties' source link:

    <listbox id="eventListBox" label="Events:" widthHint="expand" 

New Feature in gcalz: GCalEventsQuery

In ZK mobile calendar demo, we use Filter function to get the necessary events we want. Here we'll use a JAVA Main class sample to show you how to implemented it and build a query to get events by yourself.

In the new version of gcalz, we provide a new feature to do query works more precisely. The working class is: org.zkoss.gcalz.GCalEventsQuery. Here is an example:

public static void main(String[] args){
    //initial works to get a CalendarEntry...
    CalendarService calendarService= GCalUtil.createGCalService("usermail", "password");
    List gcalList = GCalUtil.getMetaUserCalendars(calendarService);
    //Build a query...
    GCalEventsQuery query = new GCalEventsQuery(calendarService);
    //Modify query...
    query.setStartMin(new Date())
         //Set the earliest event start time to match...
         .setStartMax(new Date())
         //Set the latest event start time to match...
         //Could be ascending or descending...
         //Could be starttime or lastmodified...
         //Indicates whether recurring events should be expanded or represented as a single event...
         .setRecurrenceExpansionStart(new Date())
         //Specifies beginning of time period for which to expand recurring events...
         .setRecurrenceExpansionEnd(new Date());
         //Specifies end of time period for which to expand recurring events...
    query.invokeEventQuery(gcalList.get(0));//Invoke Query use traget CalendarEntry...

This code clip from JAVA Main class ignores those catch clauses. The API of org.zkoss.gcalz.GCalEventsQuery is all based on Google's Calendar query parameters reference.


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