SlideShare a Scribd company logo
S60 Web Widgets

  Petro Soininen
  29th September 2007
Contents
       • Web browser and the Web browser as a run-time
         platform
       • Web applications
       • Widgets
       • Desktop widgets
       • Mobile widgets
       • Web application vs. widget
       • Web widget development
       • Web widget APIs
Web Browser
      • All web browsers perform the same tasks. The order and
        how the process is performed is what differentiate
        browsers.
      • The tasks are:
              Fetch markup
          •

              Parse markup
          •

              Construct a document tree (nowadays a DOM tree)
          •
                    Find external references (images, CSS, javascript) and issue load
                •
                    requests for them.

              Construct boxes of content to render
          •

              Apply style information to boxes
          •

              Layout the boxes
          •

              Render boxes
          •

              Process user events
          •
Web Browser for S60
                                                           APIs supporting
              Flexible for plug-ins &                  application interworking
                    extensions


                                                        S60 Browser UI       Widget Runtime
                                            Netscape
                                                                   Browser Control
                S60 plug-ins, incl. Flash    plug-in
                                               API
                Lite, SVG, and audio.         (NPL)
                                                                                     JavaScript
                                                        S60        WebCore
                                             Nokia                                      Core
                                                       WebKit        KHTML
                                               UI                                       KJS
                                            features
                                                        OS adaptations       Memory manager
   Legend
                                                Symbian OS           Symbian HTTP framework
open sourced
  by Nokia

  Already
open source
                                                             Design not limited
Closed source                                                 to particular OS
 (S60, Nokia,
   Symbian)
Web Browser as a Run-Time Platform
       • It is the browser engine, which comprises of some core
         components such as the XML engine, HTML parser,
         JavaScript engine, CSS processor, rendering engine etc.

       • It has web applications and widgets as client
         applications

       • JavaScript as an application programming language
           • Scripts typically cannot directly access the file system or the
             network

       • It provides certain access level to the system
         properties
           • Traditionally, a browser mainly provides functionality to
             access data on the Internet, not data on a local storage

       • It is the Web Run-Time platform (WRT)
           • Browser as Development Platform
Web Application
       • Web application is an
         application that is
         accessed with the Web
         browser over the
         Internet
       • Web application uses
         standard Web-based
         technologies such as
         HTML/XHTML, CSS,
         JavaScript, DOM etc.
       • Typical Web
         applications are
         Webmail, online auction
         (eBay), online booking
         or blogs
Widgets
    • Widget is a standalone Web
      application
          • Runs, feels & acts like a native
            application
          • Local on the handset & distributed like
            any other application
               • Not necessarily dependent on network
                 access                                      Web page without a browser UI
               • Updates via server logic modifications
                 or by redistributing the content to local
                 device


    • Widget at its core is a Web page
      designed for a specific purpose
          • Widgets use standard web technologies
            HTML, CSS, JavaScript, AJAX…
          • Rapid development - days - not
            months or years
          • Development to Deployment in “clicks”
Desktop Widgets
Mobile Widget
• S60 as the 1st
  mobile platform
  announcing
  widget support

• Empowered by the mobile
  widget engine




• Fully compliant with
  standard-based Internet
  technologies
Web Run-Time - Current Goal
   • Widgets leverage the Web
      • use internet services and Web APIs to access
        information
      • use XmlHttpRequest and AJAX techniques
      • low effort to port widgets from other platforms


   • Widgets integrated into S60 user experience
      •   display the icon in the Application Menu
      •   can be assigned to Idle screen soft keys and shortcuts
      •   appear in the Active Applications list
      •   managed the same way as existing S60 applications
            •   Familiar (Un)Installer user experience
                  •     Visible in Application manager
      • Enable access to Widget specific APIs (widget, system
          info, menu)
Web Run-Time - Future Goal
        •   Widgets leverage the smart phone platform
            • combine information from Web with platform
              services
            • improves user experience
            • Location, PIM & media… information
            • integrate widgets into Active Idle
            • additional UI enhancements and features


        •   Widgets evolve as a development platform
            • Integrated safely/securely with S60 platform
              services
            • access platform services via S60 APIs
            • provide security and signing model for widgets
Web Widget Framework
Widget component structure
      • A widget is constructed by a bundle of files.
          •   info.plist (mandatory)
          •   icon.png
          •   [name].html (mandatory)
          •   [name].css
          •   [name].js

      • A widget project is a file-system directory, in which
        widget’s component files are stored.

      • Widget’s mandatory files and the icon.png (if
        included) MUST be located at the root directory of a
        widget project.
Info.plist – Property of a Widget
•A manifest file in XML format, containing the property and
 configuration information of a widget.
   <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
   <!DOCTYPE plist PUBLIC quot;-//Nokia//DTD PLIST 1.0//ENquot;
     quot;http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtdquot;>
   <plist version=quot;1.0quot;>
     <dict>
       <key>DisplayName</key>
       <string>WidgetName</string>
       <key>Identifier</key>
       <string>com.company.widget.project</string
       <key>MainHTML</key>
       <string>Main.html</string>
     </dict>
   </plist>
WRT Supported Properties
              Name           Type      Use                     Description


                           String   Required   Specify the actual name of the widget
       DisplayName
                                               listed on the Installed application bar

                           String   Required   Specify unique string identifier for the
       Identifier
                                               widget in reverse domain format

                           String   Required   Specify the name of the main HTML page
       MainHTML
                                               that points to the widget

       AllowNetworkAccess Boolean   Optional   Specify access to the network based
                                               resources from the widget

       ShortVersionString String    Optional   Specify release version of the widget
                                               bundle

                           Number   Optional   Specify build version of the widget bundle
       Version
Icon.png
     • PNG image to be used as application icon
           • Recommended size 88x88 px
           • Default S60 application icon used if icon.png is missing
…just to clarify (or confuse?)
HTML – The Backbone of a Widget
   • Defines the structure of the   <html>
     widget.                         <head>
                                      ..
   • Recommended HTML 4.01           </head>
     specification.                  <body id=quot;bodyquot;>
                                      <div id=‘mainView’>
   • Use the <div> (block-level)            <span class=‘title’>Front view</span>
     element to construct the         </div>
     widget’s views.                  <div id=‘subView1’ class=‘subView’>
                                            <p class=‘title’>Back view</p>
   • Views can be constructed         </div>
     with static HTML elements or     <div id=‘subView2’ class=‘subView’>
     can be dynamically created             <p class=‘title’>Config view</p>
     by JavaScript at runtime.        </div>
                                    </body>
                                    </html>
CSS – Makeup for a Widget
                                         // Class selector to define common
     • Style and layout
                                           style for similar components
                                         .title {
       information                         font-size: 26px;
                                           color: blue;
        • Defines how to display         }
          HTML element: position,        .subView {
          color, background color          display: none
                                         }
          etc.
                                         // Id selector to define a unique
                                           style for a unique component
     • CSS information can be            #mainView {
                                           font-size: 16px;
       embedded in the HTML file           color: red;
                                           text-align: center;
        • Or imported from an external
                                         }
          stylesheet
                                         // Pseudo-class selector to design a
                                           pattern style
                                         div.subview div {
                                           margin: 10px 0 0 0;
                                           padding: 20px 20px 20px 20px;
                                           font-size: 22px;
                                           text-align: left;
                                           color: blue;
                                         }
JS – The Brain of a Widget
      • The intelligence of a widget?
          • Without JavaScript code, a widget is just a passive Web
            page
          • JavaScript code can be embedded in the HTML file
            within <script> elements
      • JavaScript API, Java DOM API, AJAX API
          • ECMAScript standard; Extension JavaScript objects
          • Core DOM and HTML DOM APIs
          • XMLHttpRequest object
      • Platform services via Nokia-specific extended
        JavaScript API:
          • Available only from Widget JavaScript code
JavaScript
     // define some global variable
     var globalVariable = 0;
     //
     function multiply(xValue, yValue){
       return xValue * yValue;
     }
     // create a new element with DOM function
     var newElement = document.createElement(‘div’);
     newElement.setAttribute(‘id’, ‘extraView’);
     newElement.setAttribute(‘class’, ‘subView’);

     // show/hide views
     function changeView(activeViewId, hiddenViewId){
       var activeView = document.getElementById(activeViewId);
       var hiddenView = document.getElementById(hiddenViewId);
       activeView.style.display = ‘block’;
       hiddenView.style.display = ‘none’;
     }
Widget APIs Introduction
Widget Object
                                         • Widget methods
  • Widget object is a built-in module
    of the widget engine                     • openURL(String:url)
                                             • setPreferenceForKey(String:prefere
    widget or window.widget                    nce, String:key)
                                             • preferenceForKey(String:key)
  • Widget object provides basic             • prepareForTransition
    utility functions to manipulate            (String:transitionState)
    widget’s properties                      • performTransition(void)
                                             • setNavigationEnabled(Boolean:flag)
                                             • openApplication(Uid, param)
                                             • setDisplayLandscape(void)
                                             • setDisplayPortrait (void)
                                         • Widget properties
 var h = window.screen.height;
 var w = window.screen.width;
                                             •   identifier [readonly, String]
 if (h < w)
                                             •   onshow [assigned callback function]
    widget.setDisplayLanscape();
                                             •   onhide [assigned callback function]
                                             •   isRotationSupported [readonly,
                                                 Booloean]
                widget.onhide = pause;
                function pause()
                {
                   clearTimeout(timer);
                }
Menu Object
         • Menu object is an extension     • Menu methods
           from the widget object              • append(MenuItem menuItem)
           menu or window.menu                 • remove(MenuItem menuItem)
         • Menu object provides                • replace (MenuItem oldMenuItem, MenuItem
           interfaces to manipulate the          newMenuItem)
           options menu and softkeys
           (right and middle keys) of a        • getMenuItemById(Integer:id)
           widget                              • getMenuItemByName(String:label)
                                               • setRightSoftKeyLabel(String:label,
                                                 function:callbackfunction)
                                               • showSoftkeys(void)
    var opMenu = window.menu;
    // ! menu is reserved
                                               • hideSoftkeys(void)
                                               • clear(void)
{
     ...
                                           • Menu properties
     opMenu.setRightSoftKeyLabel(
                 ‘Back’, toMainView);
                                               • onShow [assigned callback function]
}

function toMainView()
{
  ...
  opMenu.setRightSoftkeyLabel(‘’, null);
}
MenuItem Object
             • MenuItem provides            • Menu Item methods
               interfaces to create
                                                • new MenuItem(String:label,
               menu items and                     Integer:id)
               submenus                         • append(MenuItem:childMenuItem)
               (cascading) for the
                                                • remove(MenuItem:childMenuItem)
               options menu
                                                • replace(MenuItem:oldMenuItem,
                                                   MenuItem:newMenuItem)
                                                • setDimmed(Boolean:flag)
                                            • Menu Item properties
                                                • onSelect [assigned callback function]
function createMenu
{
  var settings = new MenuItem(
                   ‘Settings’, 10);
  settings.onSelect = showSettings;
  window.menu.append(settings);
}

function showSettings(id)
{
  document.getElementById(
      ‘setting’).style.display = ‘block’;
}
System Info Service API
       • System info service API is a scriptable Netscape
         plug-in module
           • Subset of system properties accessible
           • Memory, network and battery status, etc.

       • System info service plug-in module is loaded via an
         HTML <embed> element
         <embed type=quot;application/x-systeminfo-widgetquot;
         hidden=quot;yesquot;></embed>


       • System info service plug-in module is not loaded in
         Browser context
System Info Service API
       • Power properties
          •   chargelevel [readonly, int]
          •   chargerconnected [readonly, int]
          •   onchargelevel [writeonly, function]
          •   onchargerconnected [writeonly, function]
       • Network properties
          •   signalbars [readonly, int]
          •   signalstrength [readonly, int]
          •   networkname [readonly, string]
          •   registrationstatus [readonly, int]
          •   onsignalstrength [assigned callback function]
          •   onregistrationstatus [assigned callback function]
System Info Service API

     var sysInfo = null;

     function init()
     {
       // get the handle to the system info object
       sysInfo = document.embeds[0];
       var battLevel = sysInfo.chargelevel;
       sysInfo.onchargelevel = quot;batteryStatusCallback()quot;;
     }

     function batteryStatusCallback() {
       var battLevel = sysInfo.chargelevel;
     }
System Info Service API cont.
       • Light methods
           • lighton(Int:lighttarget, Int:duration, Int:intensity,
             Int:fadein)
           • lightblink(Int:lighttarget, Int:duration, Int:onduration,
             Int:offduration, Int:intensity)
           • lightoff(Int:lighttarget, Int:duration, Int:fadeout)
       • Light properties
           •   lightminintensity [readonly, Int]
           •   lightmaxintensity [readonly, Int]
           •   lightdefaultintensity [readonly, Int]
           •   lightinfiniteduration [readonly, Int]
           •   lightmaxduration [readonly, Int]
           •   lightdefaultcycletime [readonly, Int]
           •   lighttargetprimarydisplayandkeyboard [readonly, Int]
           •   lighttargetsystem [readonly, Int]
System Info Service API cont.
       • Vibra methods
            • startvibra(Integer:duration, Integer:intensity)
            • stopvibra(void)
       • Vibra properties
            • vibraminintensity [readonly, Integer]
            • vibramaxintensity [readonly, Integer]
            • vibramaxintensity [readonly, Integer]
            • vibrasettings [readonly, Integer]
       • Beep methods
            • beep(Integer:frequency, Integer:duration)
       • Memory properties
            • totalram [readonly, Integer]
            • freeram [readonly, Integer]
System Info Service API cont.
       • File system methods
           • drivesize(String:drive)
           • drivefree(String:drive)
       • File system properties
           • drivelist [readonly, String]
       • Language properties
           • language [readonly, String]
Web Widget Development
What You Need?
      • For implementing widget code:
          • Text editor or a web IDE
      • For debugging a running widget
          • Firefox
              • firebug
              • Greasemonkey
              • XmlHttpRequest Bypass Securityquot; script for free
                XmlHttpRequest access from local file.
      • For testing a widget:
          • S60 3rd Edition FP2 SDK emulator
              • Beta available soon ☺
          • Compatible S60 device with custom SW
Widget Installation Package

        •Widget installation file format
           • Compressed with any ZIP application
           • ZIP file contains html, CSS, js, icons, graphics and
             the widget info file


        •Widget installation file extension
           • WidgetName.wgz


        •Widget installation MIME type
           • x-nokia-widgets
Widget Installation Process

 Widget.wgz        x-nokia-widgets



              Symbian OS system MIME
Widget MIME
                 type recognizer
 recognizer




                S60 SW installer
   Widget
                  framework
  Installer



                     Installed
Demo (fingers crossed)
Support
  Workshops, eLearning
     and Developer training
          details to be published at forum.nokia.com




       Developer documentation
            available at S60 3rd FP2 Beta SDK launch
Thank you.

More Related Content

What's hot

Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
Christoffer Noring
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
Dani Akash
 
Express js
Express jsExpress js
Express js
Manav Prasad
 
What Is Express JS?
What Is Express JS?What Is Express JS?
What Is Express JS?
Simplilearn
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
Rob Quick
 
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop
Ignacio Martín
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
Bojan Golubović
 
ReactDC Intro to NextJS 9
ReactDC Intro to NextJS 9ReactDC Intro to NextJS 9
ReactDC Intro to NextJS 9
Allison Kunz
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js Express
Eyal Vardi
 
React native
React nativeReact native
React native
Vikrant Negi
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
ModusJesus
 
Angular 8
Angular 8 Angular 8
Angular 8
Sunil OS
 
ReactJS
ReactJSReactJS
React js basics
React js basicsReact js basics
React js basics
Maulik Shah
 
Express JS
Express JSExpress JS
Express JS
Alok Guha
 
Basics of VueJS
Basics of VueJSBasics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
 
React Native
React NativeReact Native
React Native
ASIMYILDIZ
 
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
namespaceit
 
Getting started with Next.js
Getting started with Next.jsGetting started with Next.js
Getting started with Next.js
Gökhan Sarı
 
Introduction to React Native - Nader Dabit
Introduction to React Native - Nader DabitIntroduction to React Native - Nader Dabit
Introduction to React Native - Nader Dabit
Amazon Web Services
 

What's hot (20)

Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
 
Express js
Express jsExpress js
Express js
 
What Is Express JS?
What Is Express JS?What Is Express JS?
What Is Express JS?
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
 
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 
ReactDC Intro to NextJS 9
ReactDC Intro to NextJS 9ReactDC Intro to NextJS 9
ReactDC Intro to NextJS 9
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js Express
 
React native
React nativeReact native
React native
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
Angular 8
Angular 8 Angular 8
Angular 8
 
ReactJS
ReactJSReactJS
ReactJS
 
React js basics
React js basicsReact js basics
React js basics
 
Express JS
Express JSExpress JS
Express JS
 
Basics of VueJS
Basics of VueJSBasics of VueJS
Basics of VueJS
 
React Native
React NativeReact Native
React Native
 
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
 
Getting started with Next.js
Getting started with Next.jsGetting started with Next.js
Getting started with Next.js
 
Introduction to React Native - Nader Dabit
Introduction to React Native - Nader DabitIntroduction to React Native - Nader Dabit
Introduction to React Native - Nader Dabit
 

Similar to S60 3rd FP2 Widgets

Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)
Daniel Appelquist
 
Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.
Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.
Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.
DALEZ
 
S60 Web Runtime - Web2.0 Expo Europe 2008
S60 Web Runtime - Web2.0 Expo Europe 2008S60 Web Runtime - Web2.0 Expo Europe 2008
S60 Web Runtime - Web2.0 Expo Europe 2008
petrosoininen
 
Nokia Developer Offering Series 40
Nokia Developer Offering Series 40Nokia Developer Offering Series 40
Nokia Developer Offering Series 40
Mohamad Iqbal
 
Client Continuum Dec Fy09
Client Continuum Dec Fy09Client Continuum Dec Fy09
Client Continuum Dec Fy09
Martha Rotter
 
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet""BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
Software Park Thailand
 
Introducing S40 Web Apps | CodeLabs
Introducing S40 Web Apps | CodeLabsIntroducing S40 Web Apps | CodeLabs
Introducing S40 Web Apps | CodeLabs
Mohamad Iqbal
 
Developing Applications with Nokia WRT
Developing Applications with Nokia WRTDeveloping Applications with Nokia WRT
Developing Applications with Nokia WRT
Prashanth GN
 
Soa204 Kawasaki Final
Soa204 Kawasaki FinalSoa204 Kawasaki Final
Soa204 Kawasaki Final
Anush Kumar
 
Web Sphere Portal
Web Sphere PortalWeb Sphere Portal
Web Sphere Portal
Jawwad Jafri
 
Miha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeMiha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web Runtime
NokiaAppForum
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
philogb
 
Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)
johnnybiz
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
Ivano Malavolta
 
Web Apps Development Best Pactices | Hackonten
Web Apps Development Best Pactices | HackontenWeb Apps Development Best Pactices | Hackonten
Web Apps Development Best Pactices | Hackonten
Mohamad Iqbal
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
Sascha Corti
 
Building Rich Internet Applications Using Google Web Toolkit
Building Rich Internet Applications Using  Google Web ToolkitBuilding Rich Internet Applications Using  Google Web Toolkit
Building Rich Internet Applications Using Google Web Toolkit
rajivmordani
 
HTML5 Programming
HTML5 ProgrammingHTML5 Programming
HTML5 Programming
hotrannam
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5
Vinayak Tavargeri
 
Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps
Effectively using Nokia Web Tools 2.0 templates for Series 40 web appsEffectively using Nokia Web Tools 2.0 templates for Series 40 web apps
Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps
Microsoft Mobile Developer
 

Similar to S60 3rd FP2 Widgets (20)

Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)
 
Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.
Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.
Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.
 
S60 Web Runtime - Web2.0 Expo Europe 2008
S60 Web Runtime - Web2.0 Expo Europe 2008S60 Web Runtime - Web2.0 Expo Europe 2008
S60 Web Runtime - Web2.0 Expo Europe 2008
 
Nokia Developer Offering Series 40
Nokia Developer Offering Series 40Nokia Developer Offering Series 40
Nokia Developer Offering Series 40
 
Client Continuum Dec Fy09
Client Continuum Dec Fy09Client Continuum Dec Fy09
Client Continuum Dec Fy09
 
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet""BlackBerry Webworks : Apps for The Smartphone and Tablet"
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
 
Introducing S40 Web Apps | CodeLabs
Introducing S40 Web Apps | CodeLabsIntroducing S40 Web Apps | CodeLabs
Introducing S40 Web Apps | CodeLabs
 
Developing Applications with Nokia WRT
Developing Applications with Nokia WRTDeveloping Applications with Nokia WRT
Developing Applications with Nokia WRT
 
Soa204 Kawasaki Final
Soa204 Kawasaki FinalSoa204 Kawasaki Final
Soa204 Kawasaki Final
 
Web Sphere Portal
Web Sphere PortalWeb Sphere Portal
Web Sphere Portal
 
Miha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeMiha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web Runtime
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Web Apps Development Best Pactices | Hackonten
Web Apps Development Best Pactices | HackontenWeb Apps Development Best Pactices | Hackonten
Web Apps Development Best Pactices | Hackonten
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
Building Rich Internet Applications Using Google Web Toolkit
Building Rich Internet Applications Using  Google Web ToolkitBuilding Rich Internet Applications Using  Google Web Toolkit
Building Rich Internet Applications Using Google Web Toolkit
 
HTML5 Programming
HTML5 ProgrammingHTML5 Programming
HTML5 Programming
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5
 
Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps
Effectively using Nokia Web Tools 2.0 templates for Series 40 web appsEffectively using Nokia Web Tools 2.0 templates for Series 40 web apps
Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps
 

Recently uploaded

[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 

Recently uploaded (20)

[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 

S60 3rd FP2 Widgets

  • 1. S60 Web Widgets Petro Soininen 29th September 2007
  • 2. Contents • Web browser and the Web browser as a run-time platform • Web applications • Widgets • Desktop widgets • Mobile widgets • Web application vs. widget • Web widget development • Web widget APIs
  • 3. Web Browser • All web browsers perform the same tasks. The order and how the process is performed is what differentiate browsers. • The tasks are: Fetch markup • Parse markup • Construct a document tree (nowadays a DOM tree) • Find external references (images, CSS, javascript) and issue load • requests for them. Construct boxes of content to render • Apply style information to boxes • Layout the boxes • Render boxes • Process user events •
  • 4. Web Browser for S60 APIs supporting Flexible for plug-ins & application interworking extensions S60 Browser UI Widget Runtime Netscape Browser Control S60 plug-ins, incl. Flash plug-in API Lite, SVG, and audio. (NPL) JavaScript S60 WebCore Nokia Core WebKit KHTML UI KJS features OS adaptations Memory manager Legend Symbian OS Symbian HTTP framework open sourced by Nokia Already open source Design not limited Closed source to particular OS (S60, Nokia, Symbian)
  • 5. Web Browser as a Run-Time Platform • It is the browser engine, which comprises of some core components such as the XML engine, HTML parser, JavaScript engine, CSS processor, rendering engine etc. • It has web applications and widgets as client applications • JavaScript as an application programming language • Scripts typically cannot directly access the file system or the network • It provides certain access level to the system properties • Traditionally, a browser mainly provides functionality to access data on the Internet, not data on a local storage • It is the Web Run-Time platform (WRT) • Browser as Development Platform
  • 6. Web Application • Web application is an application that is accessed with the Web browser over the Internet • Web application uses standard Web-based technologies such as HTML/XHTML, CSS, JavaScript, DOM etc. • Typical Web applications are Webmail, online auction (eBay), online booking or blogs
  • 7. Widgets • Widget is a standalone Web application • Runs, feels & acts like a native application • Local on the handset & distributed like any other application • Not necessarily dependent on network access Web page without a browser UI • Updates via server logic modifications or by redistributing the content to local device • Widget at its core is a Web page designed for a specific purpose • Widgets use standard web technologies HTML, CSS, JavaScript, AJAX… • Rapid development - days - not months or years • Development to Deployment in “clicks”
  • 9. Mobile Widget • S60 as the 1st mobile platform announcing widget support • Empowered by the mobile widget engine • Fully compliant with standard-based Internet technologies
  • 10. Web Run-Time - Current Goal • Widgets leverage the Web • use internet services and Web APIs to access information • use XmlHttpRequest and AJAX techniques • low effort to port widgets from other platforms • Widgets integrated into S60 user experience • display the icon in the Application Menu • can be assigned to Idle screen soft keys and shortcuts • appear in the Active Applications list • managed the same way as existing S60 applications • Familiar (Un)Installer user experience • Visible in Application manager • Enable access to Widget specific APIs (widget, system info, menu)
  • 11. Web Run-Time - Future Goal • Widgets leverage the smart phone platform • combine information from Web with platform services • improves user experience • Location, PIM & media… information • integrate widgets into Active Idle • additional UI enhancements and features • Widgets evolve as a development platform • Integrated safely/securely with S60 platform services • access platform services via S60 APIs • provide security and signing model for widgets
  • 13. Widget component structure • A widget is constructed by a bundle of files. • info.plist (mandatory) • icon.png • [name].html (mandatory) • [name].css • [name].js • A widget project is a file-system directory, in which widget’s component files are stored. • Widget’s mandatory files and the icon.png (if included) MUST be located at the root directory of a widget project.
  • 14. Info.plist – Property of a Widget •A manifest file in XML format, containing the property and configuration information of a widget. <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <!DOCTYPE plist PUBLIC quot;-//Nokia//DTD PLIST 1.0//ENquot; quot;http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtdquot;> <plist version=quot;1.0quot;> <dict> <key>DisplayName</key> <string>WidgetName</string> <key>Identifier</key> <string>com.company.widget.project</string <key>MainHTML</key> <string>Main.html</string> </dict> </plist>
  • 15. WRT Supported Properties Name Type Use Description String Required Specify the actual name of the widget DisplayName listed on the Installed application bar String Required Specify unique string identifier for the Identifier widget in reverse domain format String Required Specify the name of the main HTML page MainHTML that points to the widget AllowNetworkAccess Boolean Optional Specify access to the network based resources from the widget ShortVersionString String Optional Specify release version of the widget bundle Number Optional Specify build version of the widget bundle Version
  • 16. Icon.png • PNG image to be used as application icon • Recommended size 88x88 px • Default S60 application icon used if icon.png is missing
  • 17. …just to clarify (or confuse?)
  • 18. HTML – The Backbone of a Widget • Defines the structure of the <html> widget. <head> .. • Recommended HTML 4.01 </head> specification. <body id=quot;bodyquot;> <div id=‘mainView’> • Use the <div> (block-level) <span class=‘title’>Front view</span> element to construct the </div> widget’s views. <div id=‘subView1’ class=‘subView’> <p class=‘title’>Back view</p> • Views can be constructed </div> with static HTML elements or <div id=‘subView2’ class=‘subView’> can be dynamically created <p class=‘title’>Config view</p> by JavaScript at runtime. </div> </body> </html>
  • 19. CSS – Makeup for a Widget // Class selector to define common • Style and layout style for similar components .title { information font-size: 26px; color: blue; • Defines how to display } HTML element: position, .subView { color, background color display: none } etc. // Id selector to define a unique style for a unique component • CSS information can be #mainView { font-size: 16px; embedded in the HTML file color: red; text-align: center; • Or imported from an external } stylesheet // Pseudo-class selector to design a pattern style div.subview div { margin: 10px 0 0 0; padding: 20px 20px 20px 20px; font-size: 22px; text-align: left; color: blue; }
  • 20. JS – The Brain of a Widget • The intelligence of a widget? • Without JavaScript code, a widget is just a passive Web page • JavaScript code can be embedded in the HTML file within <script> elements • JavaScript API, Java DOM API, AJAX API • ECMAScript standard; Extension JavaScript objects • Core DOM and HTML DOM APIs • XMLHttpRequest object • Platform services via Nokia-specific extended JavaScript API: • Available only from Widget JavaScript code
  • 21. JavaScript // define some global variable var globalVariable = 0; // function multiply(xValue, yValue){ return xValue * yValue; } // create a new element with DOM function var newElement = document.createElement(‘div’); newElement.setAttribute(‘id’, ‘extraView’); newElement.setAttribute(‘class’, ‘subView’); // show/hide views function changeView(activeViewId, hiddenViewId){ var activeView = document.getElementById(activeViewId); var hiddenView = document.getElementById(hiddenViewId); activeView.style.display = ‘block’; hiddenView.style.display = ‘none’; }
  • 23. Widget Object • Widget methods • Widget object is a built-in module of the widget engine • openURL(String:url) • setPreferenceForKey(String:prefere widget or window.widget nce, String:key) • preferenceForKey(String:key) • Widget object provides basic • prepareForTransition utility functions to manipulate (String:transitionState) widget’s properties • performTransition(void) • setNavigationEnabled(Boolean:flag) • openApplication(Uid, param) • setDisplayLandscape(void) • setDisplayPortrait (void) • Widget properties var h = window.screen.height; var w = window.screen.width; • identifier [readonly, String] if (h < w) • onshow [assigned callback function] widget.setDisplayLanscape(); • onhide [assigned callback function] • isRotationSupported [readonly, Booloean] widget.onhide = pause; function pause() { clearTimeout(timer); }
  • 24. Menu Object • Menu object is an extension • Menu methods from the widget object • append(MenuItem menuItem) menu or window.menu • remove(MenuItem menuItem) • Menu object provides • replace (MenuItem oldMenuItem, MenuItem interfaces to manipulate the newMenuItem) options menu and softkeys (right and middle keys) of a • getMenuItemById(Integer:id) widget • getMenuItemByName(String:label) • setRightSoftKeyLabel(String:label, function:callbackfunction) • showSoftkeys(void) var opMenu = window.menu; // ! menu is reserved • hideSoftkeys(void) • clear(void) { ... • Menu properties opMenu.setRightSoftKeyLabel( ‘Back’, toMainView); • onShow [assigned callback function] } function toMainView() { ... opMenu.setRightSoftkeyLabel(‘’, null); }
  • 25. MenuItem Object • MenuItem provides • Menu Item methods interfaces to create • new MenuItem(String:label, menu items and Integer:id) submenus • append(MenuItem:childMenuItem) (cascading) for the • remove(MenuItem:childMenuItem) options menu • replace(MenuItem:oldMenuItem, MenuItem:newMenuItem) • setDimmed(Boolean:flag) • Menu Item properties • onSelect [assigned callback function] function createMenu { var settings = new MenuItem( ‘Settings’, 10); settings.onSelect = showSettings; window.menu.append(settings); } function showSettings(id) { document.getElementById( ‘setting’).style.display = ‘block’; }
  • 26. System Info Service API • System info service API is a scriptable Netscape plug-in module • Subset of system properties accessible • Memory, network and battery status, etc. • System info service plug-in module is loaded via an HTML <embed> element <embed type=quot;application/x-systeminfo-widgetquot; hidden=quot;yesquot;></embed> • System info service plug-in module is not loaded in Browser context
  • 27. System Info Service API • Power properties • chargelevel [readonly, int] • chargerconnected [readonly, int] • onchargelevel [writeonly, function] • onchargerconnected [writeonly, function] • Network properties • signalbars [readonly, int] • signalstrength [readonly, int] • networkname [readonly, string] • registrationstatus [readonly, int] • onsignalstrength [assigned callback function] • onregistrationstatus [assigned callback function]
  • 28. System Info Service API var sysInfo = null; function init() { // get the handle to the system info object sysInfo = document.embeds[0]; var battLevel = sysInfo.chargelevel; sysInfo.onchargelevel = quot;batteryStatusCallback()quot;; } function batteryStatusCallback() { var battLevel = sysInfo.chargelevel; }
  • 29. System Info Service API cont. • Light methods • lighton(Int:lighttarget, Int:duration, Int:intensity, Int:fadein) • lightblink(Int:lighttarget, Int:duration, Int:onduration, Int:offduration, Int:intensity) • lightoff(Int:lighttarget, Int:duration, Int:fadeout) • Light properties • lightminintensity [readonly, Int] • lightmaxintensity [readonly, Int] • lightdefaultintensity [readonly, Int] • lightinfiniteduration [readonly, Int] • lightmaxduration [readonly, Int] • lightdefaultcycletime [readonly, Int] • lighttargetprimarydisplayandkeyboard [readonly, Int] • lighttargetsystem [readonly, Int]
  • 30. System Info Service API cont. • Vibra methods • startvibra(Integer:duration, Integer:intensity) • stopvibra(void) • Vibra properties • vibraminintensity [readonly, Integer] • vibramaxintensity [readonly, Integer] • vibramaxintensity [readonly, Integer] • vibrasettings [readonly, Integer] • Beep methods • beep(Integer:frequency, Integer:duration) • Memory properties • totalram [readonly, Integer] • freeram [readonly, Integer]
  • 31. System Info Service API cont. • File system methods • drivesize(String:drive) • drivefree(String:drive) • File system properties • drivelist [readonly, String] • Language properties • language [readonly, String]
  • 33. What You Need? • For implementing widget code: • Text editor or a web IDE • For debugging a running widget • Firefox • firebug • Greasemonkey • XmlHttpRequest Bypass Securityquot; script for free XmlHttpRequest access from local file. • For testing a widget: • S60 3rd Edition FP2 SDK emulator • Beta available soon ☺ • Compatible S60 device with custom SW
  • 34. Widget Installation Package •Widget installation file format • Compressed with any ZIP application • ZIP file contains html, CSS, js, icons, graphics and the widget info file •Widget installation file extension • WidgetName.wgz •Widget installation MIME type • x-nokia-widgets
  • 35. Widget Installation Process Widget.wgz x-nokia-widgets Symbian OS system MIME Widget MIME type recognizer recognizer S60 SW installer Widget framework Installer Installed
  • 37. Support Workshops, eLearning and Developer training details to be published at forum.nokia.com Developer documentation available at S60 3rd FP2 Beta SDK launch