An introduction to Widgets with particular emphasis on Mobile Widgets

Document Sample
An introduction to Widgets with particular emphasis on Mobile Widgets Powered By Docstoc
					An introduction to Widgets
with particular emphasis on
      Mobile Widgets

            Christian Kaar, BSc

              Mobile Computing
  University of Applied Sciences, Hagenberg
  Softwarepark 11, 4232 Hagenberg, Austria

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

                October 2007
     An introduction to Widgets with particular emphasis on
                         Mobile Widgets

ABSTRACT                                                        for Web applications and AJAX. Jeon and Lee [8] support
The demand for accessing information from the World Wide        this thesis and state that mobile widgets are a potential use
Web at any place and any time increases. Network enabled        case of Mobile AJAX.
mobile devices (e.g. mobile phones) provide that access via       Caceres [2] demonstrates how incompatibilities across wid-
browsers. Though recent browsers are able to display most       get engines affect different aspects of widget development.
of the web sites, they don’t provide a rich user experience.    The W3C works on standardising widgets and client-side
A technologically similiar concept to browsers addresses this   web applications [15, 16, 17].
problem: Mobile widgets. They provide an elegant way of           Netvibes [10] develops a Universal Widget API (UWA)
delivering personalized web content and especially Web 2.0      which enables the execution of widgets on different widget
services to mobile devices. This paper introduces the con-      platforms.
cept of widgets and general principles of widget develop-
ment. The main section deals with the characteristics of        3.      WIDGET BASICS
mobile widgets and outlines differences to desktop widgets
and traditional mobile appplication development platforms.      3.1      Classification of Widgets
Eventually a case study of porting Apple’s Dashboard wid-
                                                                  Widgets can be classified in three groups: Desktop wid-
gets to Nokia’s S60 platform is presented.
                                                                gets, web widgets and mobile widgets. Desktop and mobile
                                                                widgets satisfy the requirements of the W3C definition. Web
1.   INTRODUCTION                                               widgets however are reusable components of a web site which
   Widgets are leightweight web applications which are de-      can be embedded in other web pages. They are not packaged
signed for a single specific function and quick instant access   and needn’t be downloaded and installed on a client.
to Web 2.0 services or internet content. The World Wide           Desktop widgets attracted the attention of operating sys-
Web Consortium (W3C) defines widgets as interactive sin-         tems vendors and therefore Microsoft and Apple integrated
gle purpose applications for displaying and/or updating lo-     a widget engine in their latest products. Windows Vista
cal data or data on the Web, packaged in a way to allow         introduced the Sidebar [9], where a user can keep gadgets1
a single download and installation on a user’s machine or       always available on the desktop. Apple’s pendant is called
mobile device [17]. Typical examples of widgets are clocks,     Dashboard [1] and is included in MacOS X. Other major
weather forecasters, news readers and photo albums.             vendors of widget engines are Yahoo! [18] and Opera [12].
   Widgets are developed using standard web technologies          Widgets needn’t necessarily serve web content but can
such as HTML, CSS, JavaScript and XML. These technolo-          also provide local data, e.g. a clock or a calculator. From
gies are exactly those which are incorporated in the AJAX       this perspective widgets can be categorized by means of their
development approach [4]. In this sense, widgets could be       function. Apple distinguishes three types [3]:
regarded as a kind of AJAX application. To put it another
way, AJAX enables and encourages the creation of widgets              • Accessory Widgets: don’t require support from an ap-
[7, p. 96,99].                                                          plication or from the internet, e.g. clocks and calcula-
   Widgets are executed within a special runtime environ-               tors.
ment, commonly referred to as widget engine. Due to the
similiarity between widgets and web pages, widget engines             • Application Widgets: enhance an application by pro-
act like web browsers: Rendering HTML and CSS instruc-                  viding a less complicated and often read-only interface,
tions, interpreting JavaScript code and handling user inter-            e.g. address book.
   In the last couple of years widgets emerged on the desktop         • Information Widgets: work with data from the inter-
of personal computers and lately also on mobile devices, e.g.           net, e.g. news reader and stock tickers.
mobile phones. Large players in the mobile phone industry,
like Nokia and Apple, announced the support for widgets in
                                                                3.2      Widget Development
their products. Gartner Research states that Nokia’s S60          Due to the use of standard web technologies, the develop-
Widgets will be an important mobile application delivery        ment of widgets is very similiar to traditional web develop-
technology by 2009 [5].                                         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-
2.   RELATED WORK                                               duced a proprietary XML format. The interactivity and
   Jaokar and Fish [7] present mobile widgets in the context    event handling is achieved by ECMAScript (often referred
of Mobile Web 2.0 and the AJAX development approach. In
[6] Grassel describes widgets as one of three main use cases        Microsoft’s term for widgets
as JavaScript). To retrieve data from a web server, wid-          Popular examples for Java ME based mobile widgets are
get engines support the XMLHttpRequest-object within EC-       Nokia’s WidSets2 and Mojax Moblets3 . The first real mo-
MAScript or a similiar method. The returned data, which        bile widgets, i.e. widgets which use standard web technolo-
is mainly XML formatted, is parsed and the user interface      gies and are well integrated with the operating system are
is updated. Updating means a manipulation of the HTML          Nokia’s S60 Widgets. Such widget engines should allow easy
content via ECMAScript and the Document Object Model           and fast porting of desktop widgets to mobile platforms. Ide-
(DOM). Fig. 1 summarizes the relevant technologies in the      ally desktop widgets run without any modification on mobile
field of widgets according to W3C.                              platforms and the code base for desktop widgets could be
   A widget consists of one or more HTML, CSS and EC-          shared by mobile widgets.
MAScript files. Similiar to web pages, images and sounds
can also be included. Additionally, a widget has a manifest    4.1     Applicability of Mobile Widgets
file, which contains metadata about the widget itself. Meta-       Applications for a single specific purpose and with low
data fields are for instance the widget’s name and version      functional complexity are appropriate to be developed as
as well as the main HTML file. All the files of a widget are     mobile widgets. Their user interface can be kept simple,
packaged into a single file using a standard packaging for-     which allows easy and intuitive interaction though the lim-
mat, like ZIP. Depending on the widget vendor, the exten-      ited input capabilities of mobile devices. The simplicity of
sion of the resulting single widget file has to be renamed in   widgets is concurrently one of their greatest weakness: The
order to be recognized by the widget engine. The packaged      provided functionality could be too limited for exacting users
widget file can then be deployed and installed on clients. In   and the creation of complex applications is difficult.
contrast to well known web pages, the application files are        Widgets encourage the creation of ”Long tail applica-
downloaded only once and installed on the client. Only the     tions”, i.e. applications for a small audience. Using the
widget’s data content is retrieved from a web server during    widget approach an application can be developed quickly,
runtime. Widget engine vendors usually provide a dedicated     deployed widely and also be profitable [7, p. 109].
area on their web site for the deploment of widgets. Inter-       From an Web 2.0 service developer’s point of view, Mo-
ested users can browse the catalogue of available widgets      bile Widgets are well suited to provide mobile users with an
and download them.                                             interface to their service. The development of the widget
                                                               can be done quickly because existing code of the ordinary
3.3     Interoperability of Widgets                            browser interface can be reused. Furthermore a dedicated
  Although widgets are developed using standard web tech-      application for a service increases the customer’s commit-
nologies, they usually can’t be executed on more than one      ment to it. For Third Party developers, Mobile Widgets
widget engine. Main incompatibility issues are:                provide an easy and powerful possibility to link various Web
                                                               2.0 services together and create Mashups.
     • Manifest document: Metadata fields and the mani-            In comparison to the access of a service within a browser,
       fest’s filename are not standardized and differ between   widgets have the advantage that less data traffic is caused.
       vendors.                                                Instead of downloading the full web site only the service’s
                                                               data needs to be retrieved. This results in lower costs for
     • Packaging: This includes the packaging format (e.g.
                                                               the user.
       ZIP), file extension and internal package structure.

     • Platform specific functions: Widget engines support
                                                               4.2     Differences to Desktop Widgets
       different platform features and furthermore the API         First, the screen of a mobile phone is much smaller than
       for accessing those functions is not standardized.      a desktop computer’s screen. Nevertheless, widgets are usu-
                                                               ally so small they fit on a small area on the desktop (e.g.
  The World Wide Web Consortium (W3C) addresses the            Microsoft Windows Vista’s Sidebar). Therefore the limited
problem of widget incompatibility and tries to standardize     area on a mobile phone should suffice for a single desktop
widget development within the Web Application Formats          widget.
Working Group (WAF-WG). Relevant specification docu-               Second, on mobile phones the input and navigation capa-
ments are: Client-Side Web Applications (Widgets) Require-     bilities are limited. On the desktop, pointing devices (e.g. a
ments [15], Widgets 1.0 Requirements [17] and Widgets 1.0      mouse) are the preferred navigation instruments in graphi-
[16]. All of them are currently in the Working Draft status    cal user interface environments. But such pointing devices
and are going to reach Candidate Recommendation status         are available only on the fewest phones (e.g. phones with
in 2009 [2, p. 4].                                             touchscreen). Therefore mobile phones usually provide only
                                                               a sequential navigation through the selectable items of an
4.    MOBILE WIDGETS                                           application’s screen. Due to the small dimensions of a wid-
                                                               get this solution should suffice in most cases. If not, a virtual
  Mobile Widgets are in their infancy. Compared to Desk-
                                                               cursor could be an alternative approach.
top Widgets, the development is mainly not based on stan-
                                                                  Another difference between desktop and mobile environ-
dard web technologies but proprietary markup languages.
                                                               ments are the costs for data traffic: Data transfer on mobile
The widget engines are mostly implemented as Java ME
                                                               phones is much more expensive than on desktop comput-
applications and therefore not well integrated with the de-
                                                               ers. Therefore the update cycle of a widget has to be longer
vice operating system. Running a widget means starting
                                                               than on the desktop and the user should have the choice to
the widget engine and selecting the widget within the en-
                                                               update the widget manually or specify the update interval.
gine. This is contrary to the nature of widgets which should
be instantly accessible and directly visible on the desktop
(phone home screen) respectively.                        
                         Figure 1: The technology stack of widgets according to W3C [17].

4.3     Comparison to traditional Mobile Appli-                  SDK for Symbian OS, Supporting Feature Pack 2 Beta, for
        cation Development Platforms                             MIDP4 , supports the Web Run-Time environment for de-
   Widgets are a new way of developing applications for mo-      veloping and testing widgets in the emulator.
bile phones. This section compares widget development to           The widget engine is called Web Run-Time and is based
traditional mobile application development platforms such        on the open source project WebKit5 , which is also used by
as Java ME or native SymbianOS.                                  S60’s web browser and Apple’s Dashboard widget engine.
   By using markup and scripting languages, widget devel-        S60 Widgets are very well integrated with the phone op-
opment is on a higher abstraction layer than developing with     erating system. They are installed and accessed like other
Java ME or SymbianOS and therefore provides several ad-          S60 applications. In the first release of the Web Run-Time
vantages:                                                        environment, widgets can’t access native functions, e.g. cal-
                                                                 endar, address book and GPS. This features are intended to
     • The user interface design is simplified and rich user      be added in a second phase in 2008 [14].
       interfaces can be created easily.
                                                                 5.1     Porting Dashboard Widgets
     • The development process is short and development             Because Web Run-Time and Dashboard are built on the
       costs decreases.                                          same technical foundation, porting a Dashboard widget to
                                                                 the S60 platform should be quick and straightforward. We
     • The similiarity to web development results in a huge
                                                                 made a short study and tried to port randomly choosen
       increase in the number of potential developers for mo-
                                                                 Dashboard Widgets to the S60 platform. The list of inves-
       bile applications.
                                                                 tigated widgets included YouTube, Sudoku Widget, Google
   Widgets are well suited for applications which access ser-    Gmail, Heise News and ORF News. All of them are avail-
vices or resources on the web. The development of such ap-       able on the official Apple Dashboard Widgets web site6 .
plications as widgets is faster and more efficient than with
other mobile platforms. But there are other types of appli-      5.1.1     Problems
cations where widgets are unsuitable, e.g. games and ap-           Running a widget without any modification didn’t work
plications which make use of device specific functions (e.g.      in any case. Main problems were:
camera, GPS). Java ME and especially SymbianOS provide
                                                                     1. The syntax of the manifest file "Info.plist" differs
low level access to those functions. Vendors of widget en-
                                                                        between Apple and Nokia.
gines also want to provide access to – at least basic – native
functions through a JavaScript API. However there are se-            2. HTML, CSS and JavaScript documents use resources
curity concerns. Caceres states that the scope of security in           (e.g. images, JavaScript files) directly from Apple’s
widgets deals mainly with access-control, i.e. what a widget            filesystem. Those resources are either not available or
is allowed and not allowed to do in order to prevent users              located in another directory on the S60 platform.
from malicious widgets [2]. Due to the security concerns
vendors will most likely introduce access to native functions        3. Some widgets use special Plug-Ins. Those Plug-Ins are
in a later phase.                                                       natively written components, which provide access to
                                                                        the operating system’s or an application’s functions
5.    NOKIA S60 WIDGETS                                                 via JavaScript, e.g. access to the iTunes application.
                                                                        In the Sudoku Widget the Plug-In is used for generat-
   This chapter introduces the first and up to now only mo-
                                                                        ing and solving a Sudoku. Plug-Ins are included in a
bile software platform that enables the creation of mobile
widgets using standards-based Web technologies. Nokia sup-       4
ports widgets on their S60 platform since its 3rd edition,       1cfc48cc214f
Feature Pack 2 [11] but hasn’t released a SDK and docu-  
mentation for widgets yet. However the S60 3rd Edition   
     widget’s package as Mac OS binaries and therefore not
     directly executable on S60.
  4. Creation and access of files on the filesystem and within
     the widget package. As an example, the widget Heise
     News reads the widget’s version out of the manifest
     file by a local XMLHttpRequest. S60 Widgets doesn’t
     provide those features in their current version.
5.1.2    Solutions
  For 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 manifest
     file has to be adopted to Nokia’s requirements:

     <!DOCTYPE plist PUBLIC
       "-//Nokia//DTD PLIST 1.0//EN"

     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 renamed         Figure 2: Screenshot of the ported widget Heise
     to BundleName. After these two modifications, each          News, running in the S60 Emulator.
     tested widget could be installed and launched success-
     fully on the S60 platform.
  2. The used filesystem resources can be included in the        5.1.3    Results
     widget bundle. This implies that the references to            After applying the aforementioned solutions, the two RSS
     those resources within the source files have to be up-      reader widgets, Heise News and ORF News, run nearly per-
     dated. If there are further references within those re-    fectly. The only feature which didn’t work was viewing the
     sources (and possible again in a recursive manner) the     news details, because the platform’s browser couldn’t be
     work for updating increases and the widget’s size could    launched from within the widget. This is a known issue
     grow quite big.                                            from the beta release. Fig. 2 shows a screenshot of the S60
     Heise News references within the file Heise.css two         Emulator running the widget Heise News. The other three
     images (white i.png and white rollie.png) which            widgets mentioned before couldn’t be executed correctly be-
     point to a location on the Mac’s filesystem. We copied      cause they make use of Widget Plug-Ins.
     them from their original location on the Mac OS to            As can be seen in Fig. 2, the widget is wider than the
     the widget’s Images-subdirectory and updated the ref-      screen width. This leads us to another important issue re-
     erence within the CSS file.                                 garding porting: the screen size. The investigated Dash-
     The file Heise.html also uses a resource from the Mac’s     board Widgets are mostly too big for the QVGA (240x320
     filesystem: The JavaScript file GenericButton.js. Be-        pixel) display of the phone. Although the widget engine au-
     cause this file references many other files, we didn’t in-   tomatically provides scrolling, widgets should be designed
     clude the file in the widget’s package but simply used      to fit entirely on the screen. For existing desktop widgets
     a standard HTML button.                                    this implies downscaling of images and adjusting dimension
                                                                relevant parameters within HTML and CSS documents.
  3. Widget Plug-Ins are not supported in the current ver-
     sion of S60 Widgets and therefore can’t be ported.
     Moreover porting of Widget Plug-Ins doesn’t make           6.   CONCLUSIONS
     sense for applications which are not available on the         Widgets are convenient applications whose power rests on
     S60 platform. Nevertheless the functionality of some       the strong relationship to web technologies. Their elegance
     Plug-Ins can be implemented in JavaScript, e.g. gen-       lies within their simplicity and orientation to a single spe-
     erating and solving a Sudoku for the Sudoku Widget.        cific task. Due to the simliarity to Web development the
     Heise News doesn’t make use of Plug-Ins.                   developer base is huge and therefore thousands of widgets
                                                                are available. The AJAX based development approach leads
  4. As an alternative for saving data in a file, S60 Widgets
                                                                to a rich user experience.
     provide the persistent storage of key/value-pairs. For
                                                                   Mobile widgets are in the initial stage of their develop-
     that purpose the methods setPreferenceForKey() and
                                                                ment. By now, nearly all vendors of mobile widget engines
     preferenceForKey() are available.
                                                                use proprietary markup and scripting languages. But this is
     In the widget Heise News, we defined its version within     in our opinion only an intermediate step in the evolution of
     the JavaScript file (VERSION = ’1.0’), instead of read-     widgets. Nokia’s S60 Widgets are a first promising develop-
     ing the version out from the manifest file via the method   ment and point the direction where mobile widgets should
     getLocalVersion().                                         go. It is desireable that other mobile platforms integrate
support for widgets which are compliant to web standards       [14] G. Sivaraman. S60 Widgets. Audiocast, http:
too. To avoid fragmentation, standardisation of widgets has         //
to be progressed.                                                   VoiceofS60 20 Ganesh Sivaraman 041607.mp3.
  The presented case study on porting widgets revealed that         Accessed: September, 24th 2007.
Apple’s Dashboard Widgets are executable on Nokia’s S60        [15] W3C. Client-Side Web Applications (Widgets)
platform in principle. The effort for porting depends on the         Requirements. URL, http:
widget type: widgets which don’t access native functions            //,
can be ported easily, whereas the effort for other widgets is        November 2006. Accessed: September, 24th 2007.
much higher or porting is not possible at all.                 [16] W3C. Widgets 1.0. URL,
                                                                    November 2006. Accessed: September, 24th 2007.
7.   REFERENCES                                                [17] W3C. Widgets 1.0 Requirements. URL, http://www.
 [1] Apple Inc. Apple Mac OS X Dashboard. URL, http:      , July
     //                    2007. Accessed: September, 24th 2007.
     Accessed: September, 24th 2007.                           [18] Yahoo! Inc. Yahoo! Widgets. URL,
 [2] M. Caceres. Standardising widgets. URL,               Accessed: September,                  24th 2007.
     confirmation.pdf, August 2007. Accessed:
     September, 24th 2007.
 [3] C. Dunnigan and K. Shradel. Mac Widgets. URL,∼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,
     ideas/essays/archives/000385.php, February 2005.
     Accessed: September, 24th 2007.
 [5] Gartner Research. Nokia Widgets Will Encourage S60
     Mobile Services. URL,
     148087/nokia widgets will encourage 148087.pdf,
     April 2007. Accessed: September, 24th 2007.
 [6] G. Grassel. Position Paper: AJAX in Widgets and
     Web UIs. URL,
     mobile-ajax/papers/nokia.grassel.pdf. Accessed:
     September, 30th 2007.
 [7] A. Jaokar and T. Fish. Mobile Web 2.0. Futuretext,
 [8] J. Jeon and S. Lee. Position Paper: Toward a Mobile
     Rich Web Application Mobile AJAX and Mobile Web
     2.0. URL,
     Accessed: September, 30th 2007.
 [9] Microsoft Inc. Microsoft Gadgets. URL, Accessed: September,
     24th 2007.
[10] Netvibes. Netvibes UWA Specification. URL, specification.
     Accessed: September, 24th 2007.
[11] Nokia. S60 goes beyond Web browsing with Web
     Run-Time and widgets. URL,
     S60 Web Run Time and Widgets.pdf. Accessed:
     September, 24th 2007.
[12] Opera Software. Opera Widgets. URL, Accessed: September,
     24th 2007.
[13] T. O’Reilly. What is Web 2.0. URL,
     news/2005/09/30/what-is-web-20.html, September
     2005. Accessed: September, 24th 2007.

Shared By:
Tags: Widgets
Description: Widgets are written using JavaScript or HTML, Web applications can be installed.