An introduction to Widgets with particular emphasis on Mobile Widgets

8/7/2019 An introduction to Widgets with particular emphasis on Mobile Widgets

1/6

An introduction to Widgets

with particular emphasis on

Mobile Widgets

Christian Kaar, [email protected]

Mobile Computing

University of Applied Sciences, Hagenberg

Softwarepark 11, 4232 Hagenberg, Austria

Technical Report Number 06/1/0455/009/02

October 2007


2/6

An introduction to Widgets with particular emphasis onMobile Widgets

ABSTRACT

The demand for accessing information from the World WideWeb at any place and any time increases. Network enabledmobile devices (e.g. mobile phones) provide that access viabrowsers. Though recent browsers are able to display mostof the web sites, they dont provide a rich user experience.A technologically similiar concept to browsers addresses thisproblem: Mobile widgets. They provide an elegant way ofdelivering personalized web content and especially Web 2.0services to mobile devices. This paper introduces the con-cept of widgets and general principles of widget develop-ment. The main section deals with the characteristics of

mobile widgets and outlines differences to desktop widgetsand traditional mobile appplication development platforms.Eventually a case study of porting Apples Dashboard wid-gets to Nokias S60 platform is presented.

1. INTRODUCTIONWidgets are leightweight web applications which are de-

signed for a single specific function and quick instant accessto Web 2.0 services or internet content. The World WideWeb Consortium (W3C) defines widgets as interactive sin-gle purpose applications for displaying and/or updating lo-cal data or data on the Web, packaged in a way to allowa single download and installation on a users machine ormobile device [17]. Typical examples of widgets are clocks,

weather forecasters, news readers and photo albums.Widgets are developed using standard web technologies

such as HTML, CSS, JavaScript and XML. These technolo-gies are exactly those which are incorporated in the AJAXdevelopment approach [4]. In this sense, widgets could beregarded as a kind of AJAX application. To put it anotherway, AJAX enables and encourages the creation of widgets[7, p. 96,99].

Widgets are executed within a special runtime environ-ment, commonly referred to as widget engine. Due to thesimiliarity between widgets and web pages, widget enginesact like web browsers: Rendering HTML and CSS instruc-tions, interpreting JavaScript code and handling user inter-action.

In the last couple of years widgets emerged on the desktopof personal computers and lately also on mobile devices, e.g.mobile phones. Large players in the mobile phone industry,like Nokia and Apple, announced the support for widgets intheir products. Gartner Research states that Nokias S60Widgets will be an important mobile application deliverytechnology by 2009 [5].

2. RELATED WORKJaokar and Fish [7] present mobile widgets in the context

of Mobile Web 2.0 and the AJAX development approach. In[6] Grassel describes widgets as one of three main use cases

for Web applications and AJAX. Jeon and Lee [8] supportthis thesis and state that mobile widgets are a potential usecase of Mobile AJAX.

Caceres [2] demonstrates how incompatibilities across wid-get engines affect different aspects of widget development.The W3C works on standardising widgets and client-sideweb applications [15, 16, 17].

Netvibes [10] develops a Universal Widget API (UWA)which enables the execution of widgets on different widgetplatforms.

3. WIDGET BASICS

3.1 Classification of WidgetsWidgets can be classified in three groups: Desktop wid-

gets, web widgets and mobile widgets. Desktop and mobilewidgets satisfy the requirements of the W3C definition. Webwidgets however are reusable components of a web site whichcan be embedded in other web pages. They are not packagedand neednt be downloaded and installed on a client.

Desktop widgets attracted the attention of operating sys-tems vendors and therefore Microsoft and Apple integrateda widget engine in their latest products. Windows Vistaintroduced the Sidebar [9], where a user can keep gadgets1

always available on the desktop. Apples pendant is calledDashboard [1] and is included in MacOS X. Other major

vendors of widget engines are Yahoo! [18] and Opera [12].Widgets neednt necessarily serve web content but can

also provide local data, e.g. a clock or a calculator. Fromthis perspective widgets can be categorized by means of theirfunction. Apple distinguishes three types [3]:

Accessory Widgets: dont require support from an ap-plication or from the internet, e.g. clocks and calcula-tors.

Application Widgets: enhance an application by pro-viding a less complicated and often read-only interface,e.g. address book.

Information Widgets: work with data from the inter-net, e.g. news reader and stock tickers.

3.2 Widget DevelopmentDue to the use of standard web technologies, the develop-

ment of widgets is very similiar to traditional web develop-ment. The user interface is built by a combination of HTML,CSS and additional resources like images and sounds. In-stead of HTML some widget vendors (e.g. Yahoo!) intro-duced a proprietary XML format. The interactivity andevent handling is achieved by ECMAScript (often referred

1Microsofts term for widgets


3/6

as JavaScript). To retrieve data from a web server, wid-get engines support the XMLHttpRequest-object within EC-MAScript or a similiar method. The returned data, whichis mainly XML formatted, is parsed and the user interfaceis updated. Updating means a manipulation of the HTMLcontent via ECMAScript and the Document Object Model(DOM). Fig. 1 summarizes the relevant technologies in thefield of widgets according to W3C.

A widget consists of one or more HTML, CSS and EC-MAScript files. Similiar to web pages, images and soundscan also be included. Additionally, a widget has a manifestfile, which contains metadata about the widget itself. Meta-data fields are for instance the widgets name and versionas well as the main HTML file. All the files of a widget arepackaged into a single file using a standard packaging for-mat, like ZIP. Depending on the widget vendor, the exten-sion of the resulting single widget file has to be renamed inorder to be recognized by the widget engine. The packagedwidget file can then be deployed and installed on clients. Incontrast to well known web pages, the application files aredownloaded only once and installed on the client. Only thewidgets data content is retrieved from a web server duringruntime. Widget engine vendors usually provide a dedicatedarea on their web site for the deploment of widgets. Inter-ested users can browse the catalogue of available widgetsand download them.

3.3 Interoperability of WidgetsAlthough widgets are developed using standard web tech-

nologies, they usually cant be executed on more than onewidget engine. Main incompatibility issues are:

Manifest document: Metadata fields and the mani-fests filename are not standardized and differ betweenvendors.

Packaging: This includes the packaging format (e.g.

ZIP), file extension and internal package structure. Platform specific functions: Widget engines support

different platform features and furthermore the APIfor accessing those functions is not standardized.

The World Wide Web Consortium (W3C) addresses theproblem of widget incompatibility and tries to standardizewidget development within the Web Application FormatsWorking Group (WAF-WG). Relevant specification docu-ments are: Client-Side Web Applications (Widgets) Require-ments [15], Widgets 1.0 Requirements [17] and Widgets 1.0[16]. All of them are currently in the Working Draft statusand are going to reach Candidate Recommendation statusin 2009 [2, p. 4].

4. MOBILE WIDGETSMobile Widgets are in their infancy. Compared to Desk-

top Widgets, the development is mainly not based on stan-dard web technologies but proprietary markup languages.The widget engines are mostly implemented as Java MEapplications and therefore not well integrated with the de-vice operating system. Running a widget means startingthe widget engine and selecting the widget within the en-gine. This is contrary to the nature of widgets which shouldbe instantly accessible and directly visible on the desktop(phone home screen) respectively.

Popular examples for Java ME based mobile widgets areNokias WidSets2 and Mojax Moblets3. The first real mo-bile widgets, i.e. widgets which use standard web technolo-gies and are well integrated with the operating system areNokias S60 Widgets. Such widget engines should allow easyand fast porting of desktop widgets to mobile platforms. Ide-ally desktop widgets run without any modification on mobileplatforms and the code base for desktop widgets could be

shared by mobile widgets.4.1 Applicability of Mobile Widgets

Applications for a single specific purpose and with lowfunctional complexity are appropriate to be developed asmobile widgets. Their user interface can be kept simple,which allows easy and intuitive interaction though the lim-ited input capabilities of mobile devices. The simplicity ofwidgets is concurrently one of their greatest weakness: Theprovided functionality could be too limited for exacting usersand the creation of complex applications is difficult.

Widgets encourage the creation of Long tail applica-tions, i.e. applications for a small audience. Using thewidget approach an application can be developed quickly,deployed widely and also be profitable [7, p. 109].

From an Web 2.0 service developers point of view, Mo-bile Widgets are well suited to provide mobile users with aninterface to their service. The development of the widgetcan be done quickly because existing code of the ordinarybrowser interface can be reused. Furthermore a dedicatedapplication for a service increases the customers commit-ment to it. For Third Party developers, Mobile Widgetsprovide an easy and powerful possibility to link various Web2.0 services together and create Mashups.

In comparison to the access of a service within a browser,widgets have the advantage that less data traffic is caused.Instead of downloading the full web site only the servicesdata needs to be retrieved. This results in lower costs forthe user.

4.2 Differences to Desktop WidgetsFirst, the screen of a mobile phone is much smaller than

a desktop computers screen. Nevertheless, widgets are usu-ally so small they fit on a small area on the desktop (e.g.Microsoft Windows Vistas Sidebar). Therefore the limitedarea on a mobile phone should suffice for a single desktopwidget.

Second, on mobile phones the input and navigation capa-bilities are limited. On the desktop, pointing devices (e.g. amouse) are the preferred navigation instruments in graphi-cal user interface environments. But such pointing devicesare available only on the fewest phones (e.g. phones withtouchscreen). Therefore mobile phones usually provide only

a sequential navigation through the selectable items of anapplications screen. Due to the small dimensions of a wid-get this solution should suffice in most cases. If not, a virtualcursor could be an alternative approach.

Another difference between desktop and mobile environ-ments are the costs for data traffic: Data transfer on mobilephones is much more expensive than on desktop comput-ers. Therefore the update cycle of a widget has to be longerthan on the desktop and the user should have the choice toupdate the widget manually or specify the update interval.

2http://www.widsets.com3http://mojax.mfoundry.com


4/6

Figure 1: The technology stack of widgets according to W3C [17].

4.3 Comparison to traditional Mobile Appli-cation Development Platforms

Widgets are a new way of developing applications for mo-bile phones. This section compares widget development to

traditional mobile application development platforms suchas Java ME or native SymbianOS.

By using markup and scripting languages, widget devel-opment is on a higher abstraction layer than developing withJava ME or SymbianOS and therefore provides several ad-vantages:

The user interface design is simplified and rich userinterfaces can be created easily.

The development process is short and developmentcosts decreases.

The similiarity to web development results in a hugeincrease in the number of potential developers for mo-bile applications.

Widgets are well suited for applications which access ser-vices or resources on the web. The development of such ap-plications as widgets is faster and more efficient than withother mobile platforms. But there are other types of appli-cations where widgets are unsuitable, e.g. games and ap-plications which make use of device specific functions (e.g.camera, GPS). Java ME and especially SymbianOS providelow level access to those functions. Vendors of widget en-gines also want to provide access to at least basic nativefunctions through a JavaScript API. However there are se-curity concerns. Caceres states that the scope of security inwidgets deals mainly with access-control, i.e. what a widget

is allowed and not allowed to do in order to prevent usersfrom malicious widgets [2]. Due to the security concernsvendors will most likely introduce access to native functionsin a later phase.

5. NOKIA S60 WIDGETSThis chapter introduces the first and up to now only mo-

bile software platform that enables the creation of mobilewidgets using standards-based Web technologies. Nokia sup-ports widgets on their S60 platform since its 3rd edition,Feature Pack 2 [11] but hasnt released a SDK and docu-mentation for widgets yet. However the S60 3rd Edition

SDK for Symbian OS, Supporting Feature Pack 2 Beta, forMIDP4, supports the Web Run-Time environment for de-veloping and testing widgets in the emulator.

The widget engine is called Web Run-Time and is based

on the open source project WebKit5

, which is also used byS60s web browser and Apples Dashboard widget engine.S60 Widgets are very well integrated with the phone op-erating system. They are installed and accessed like otherS60 applications. In the first release of the Web Run-Timeenvironment, widgets cant access native functions, e.g. cal-endar, address book and GPS. This features are intended tobe added in a second phase in 2008 [14].

5.1 Porting Dashboard WidgetsBecause Web Run-Time and Dashboard are built on the

same technical foundation, porting a Dashboard widget tothe S60 platform should be quick and straightforward. Wemade a short study and tried to port randomly choosen

Dashboard Widgets to the S60 platform. The list of inves-tigated widgets included YouTube, Sudoku Widget, GoogleGmail, Heise News and ORF News. All of them are avail-able on the official Apple Dashboard Widgets web site6.

5.1.1 Problems

Running a widget without any modification didnt workin any case. Main problems were:

1. The syntax of the manifest file "Info.plist" differsbetween Apple and Nokia.

2. HTML, CSS and JavaScript documents use resources(e.g. images, JavaScript files) directly from Applesfilesystem. Those resources are either not available or

located in another directory on the S60 platform.

3. Some widgets use special Plug-Ins. Those Plug-Ins arenatively written components, which provide access tothe operating systems or an applications functionsvia JavaScript, e.g. access to the iTunes application.In the Sudoku Widget the Plug-In is used for generat-ing and solving a Sudoku. Plug-Ins are included in a

4http://sw.nokia.com/id/9c781347-1206-4bb0-86a1-\1cfc48cc214f5http://webkit.org/6http://www.apple.com/downloads/dashboard/


5/6

widgets package as Mac OS binaries and therefore notdirectly executable on S60.

4. Creation and access of files on the filesystem and withinthe widget package. As an example, the widget HeiseNews reads the widgets version out of the manifestfile by a local XMLHttpRequest. S60 Widgets doesntprovide those features in their current version.

5.1.2 SolutionsFor each of the listed problems, a general solution is pre-

sented hereafter. Additionally we explain the concrete mod-ifications we applied on the widget Heise News.

1. The Document Type Definition (DTD) of the manifestfile has to be adopted to Nokias requirements:

Additionally some property keys have to be renamed:The prefix "CF" of keys which start with that prefix has

to be removed, e.g. CFBundleName has to be renamedto BundleName. After these two modifications, eachtested widget could b e installed and launched success-fully on the S60 platform.

2. The used filesystem resources can be included in thewidget bundle. This implies that the references tothose resources within the source files have to be up-dated. If there are further references within those re-sources (and possible again in a recursive manner) thework for updating increases and the widgets size couldgrow quite big.

Heise News references within the file Heise.css twoimages (white i.png and white rollie.png) which

point to a location on the Macs filesystem. We copiedthem from their original location on the Mac OS tothe widgets Images-subdirectory and updated the ref-erence within the CSS file.

The file Heise.html also uses a resource from the Macsfilesystem: The JavaScript file GenericButton.js. Be-cause this file references many other files, we didnt in-clude the file in the widgets package but simply useda standard HTML button.

3. Widget Plug-Ins are not supported in the current ver-sion of S60 Widgets and therefore cant be ported.Moreover porting of Widget Plug-Ins doesnt makesense for applications which are not available on theS60 platform. Nevertheless the functionality of somePlug-Ins can be implemented in JavaScript, e.g. gen-erating and solving a Sudoku for the Sudoku Widget.Heise News doesnt make use of Plug-Ins.

4. As an alternative for saving data in a file, S60 Widgetsprovide the persistent storage of key/value-pairs. Forthat purpose the methods setPreferenceForKey() andpreferenceForKey() are available.

In the widget Heise News, we defined its version withinthe JavaScript file (VERSION = 1.0), instead of read-ing the version out from the manifest file via the methodgetLocalVersion().

Figure 2: Screenshot of the ported widget HeiseNews, running in the S60 Emulator.

5.1.3 Results

After applying the aforementioned solutions, the two RSSreader widgets, Heise News and ORF News, run nearly per-fectly. The only feature which didnt work was viewing thenews details, because the platforms browser couldnt belaunched from within the widget. This is a known issuefrom the beta release. Fig. 2 shows a screenshot of the S60Emulator running the widget Heise News. The other threewidgets mentioned before couldnt be executed correctly be-

cause they make use of Widget Plug-Ins.As can be seen in Fig. 2, the widget is wider than the

screen width. This leads us to another important issue re-garding porting: the screen size. The investigated Dash-board Widgets are mostly too big for the QVGA (240x320pixel) display of the phone. Although the widget engine au-tomatically provides scrolling, widgets should be designedto fit entirely on the screen. For existing desktop widgetsthis implies downscaling of images and adjusting dimensionrelevant parameters within HTML and CSS documents.

6. CONCLUSIONSWidgets are convenient applications whose power rests on

the strong relationship to web technologies. Their elegancelies within their simplicity and orientation to a single spe-cific task. Due to the simliarity to Web development thedeveloper base is huge and therefore thousands of widgetsare available. The AJAX based development approach leadsto a rich user experience.

Mobile widgets are in the initial stage of their develop-ment. By now, nearly all vendors of mobile widget enginesuse proprietary markup and scripting languages. But this isin our opinion only an intermediate step in the evolution ofwidgets. Nokias S60 Widgets are a first promising develop-ment and point the direction where mobile widgets shouldgo. It is desireable that other mobile platforms integrate


6/6

support for widgets which are compliant to web standardstoo. To avoid fragmentation, standardisation of widgets hasto be progressed.

The presented case study on porting widgets revealed thatApples Dashboard Widgets are executable on Nokias S60platform in principle. The effort for porting depends on thewidget type: widgets which dont access native functionscan be ported easily, whereas the effort for other widgets is

much higher or porting is not possible at all.

7. REFERENCES

[1] Apple Inc. Apple Mac OS X Dashboard. URL, http://www.apple.com/macosx/features/dashboard/.Accessed: September, 24th 2007.

[2] M. Caceres. Standardising widgets. URL,http://datadriven.com.au/thesis/confirmation/

confirmation.pdf, August 2007. Accessed:September, 24th 2007.

[3] C. Dunnigan and K. Shradel. Mac Widgets. URL,http://www.cs.rit.edu/ats/xml-2006-3/p/

dunnigan-shradel/widgets.pdf. Accessed:

September, 24th 2007.[4] J. J. Garret. Ajax: A New Approach to Web

Applications. URL, http://www.adaptivepath.com/ideas/essays/archives/000385.php, February 2005.Accessed: September, 24th 2007.

[5] Gartner Research. Nokia Widgets Will Encourage S60Mobile Services. URL,http://www.gartner.com/resources/148000/

148087/nokia widgets will encourage 148087.pdf,April 2007. Accessed: September, 24th 2007.

[6] G. Grassel. Position Paper: AJAX in Widgets andWeb UIs. URL, http://www.w3.org/2007/06/

mobile-ajax/papers/nokia.grassel.pdf. Accessed:September, 30th 2007.

[7] A. Jaokar and T. Fish. Mobile Web 2.0. Futuretext,2006.

[8] J. Jeon and S. Lee. Position Paper: Toward a MobileRich Web Application Mobile AJAX and Mobile Web2.0. URL,http://www.w3.org/2007/06/mobile-ajax/papers/

etri.jeon.MobileAJAX-PositionPaper-r5.pdf.Accessed: September, 30th 2007.

[9] Microsoft Inc. Microsoft Gadgets. URL,http://microsoftgadgets.com. Accessed: September,24th 2007.

[10] Netvibes. Netvibes UWA Specification. URL,http://dev.netvibes.com/doc/uwa specification.Accessed: September, 24th 2007.

[11] Nokia. S60 goes b eyond Web browsing with WebRun-Time and widgets. URL, http://sw.nokia.com/id/e67c057a-7549-4edb-b9f1-193ab27cce71/

S60 Web Run Time and Widgets.pdf. Accessed:September, 24th 2007.

[12] Opera Software. Opera Widgets. URL,http://widgets.opera.com. Accessed: September,24th 2007.

[13] T. OReilly. What is Web 2.0. URL,http://www.oreillynet.com/pub/a/oreilly/tim/

news/2005/09/30/what-is-web-20.html, September2005. Accessed: September, 24th 2007.

[14] G. Sivaraman. S60 Widgets. Audiocast, http://nds2.voiceofs60.nokia.com/fdp/voiceofs60/

VoiceofS60 20 Ganesh Sivaraman 041607.mp3.Accessed: September, 24th 2007.

[15] W3C. Client-Side Web Applications (Widgets)Requirements. URL, http://www.w3.org/TR/2006/WD-WAPF-REQ-20061109/,November 2006. Accessed: September, 24th 2007.

[16] W3C. Widgets 1.0. URL,http://www.w3.org/TR/2006/WD-widgets-20061109/,November 2006. Accessed: September, 24th 2007.

[17] W3C. Widgets 1.0 Requirements. URL, http://www.w3.org/TR/2007/WD-widgets-reqs-20070705/, July2007. Accessed: September, 24th 2007.

[18] Yahoo! Inc. Yahoo! Widgets. URL,http://widgets.yahoo.com. Accessed: September,24th 2007.

Documents

An introduction to Widgets with particular emphasis on Mobile Widgets