TomSoft

Creating your own mobile widget: part 1

August 7th, 2007

As discussed earlier, our SDK is open to third party developers. To get it, just drop us an email at feedback@webwag.com .

It’s very easy to create your own mobile widget, with very little code. If you are a web widget developer, you will be familiar rapidely with mobile widget.

So let’s dig into a widget, and let’s see how we can create one very easily

A widget is made of two main part:

• an XML description of the UI
• a script, which contains the behavior of the widget.

Let’s start with the clock, which is one of the easiest one, and let’s jump directly into the source of the widget (source code is here ):

The widget is enclosed into a “widget” tag, and the first part contains the UI description:
- image tells the engine that there is an image to display, and the url of the image is “clock.png”. By default, URL will be relative to the source file of the widget itself.
- then, to “poly‘ elements. Poly are polygons (but limited to three points for now) that are displayed on screen. cx and cy define the center of the polygon relative to the origin of the widget, and poly contains the x,y pair of points that define the login. Here we have three point (p1={0,0},p2={0,0],p3={20,0}) which is basically a line.
borderColor define the border color of that polygon.
The last item, is a non visible one: timer, and this element will just call a callback at a specified interval , in that case, at every 200/10 seconds, so every 20 seconds….

the script is quite easy:
- a function (onTimerFired) and a “main” part which just call that function.

Note that onTimerFired will be the default function called by the timer element. The content of the function is simple:
time() return the current time in the form DD/MM/YY ss:mm, like 07/07/2007 13:12
then explode will convert this string in an array, using the space as a spearator.
So timeArr[3] will contains 13:12
Next line, 13:12 is then exploded once again and put in another array, so hour[0] will contains 13 while
hour[1] whil contains 12.

The next two line, just set the angle properties of the two polygons created earlier. nameCl and hourCl are
the name used in the definition of these polygons, so now the script can refer to them directly.

We could access to most of the attributes of the UI elements directly, like hourCl.cx=13 our minCl.borderColor=”0xFF0000″

So as you see, with less then 10 lines of code, we have created a nice looking analog clock running on most of the mobile devices….

More tutorial and full documentation are availables on our devleoper pages…..

Identificateurs Technorati : webwag, mobileajax, mobile widgets

Entry Filed under: Ajax,MobileAjax,MobileWidgets,Wireless