• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Widget Development on the S60 Web Runtime
 

Widget Development on the S60 Web Runtime

on

  • 1,738 views

 

Statistics

Views

Total Views
1,738
Views on SlideShare
1,737
Embed Views
1

Actions

Likes
0
Downloads
31
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Widget Development on the S60 Web Runtime Widget Development on the S60 Web Runtime Presentation Transcript

    • Widget Development on the S60 Web Runtime Nicholas Foo Forum Nokia APAC Nicholas.foo@nokia.com Company Confidential
    • Contents • Introduction • WRT Technology and Architecture • Widget Framework • Widget Packaging and Distribution • WRT APIs • Platform Services API • Widget Development • Other Useful Info/Libraries • Examples & Hands-on Exercise(s)
    • Introduction
    • 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
    • S60 for Web Developers (as of today) S60 Browser and Web Runtime are based on WebKit Native C/C++ Web S60 Browser UI Widget Runtime Widgets “Web Capable” Browser S60 plug-ins, incl. Netscape Browser control API Flash Lite, SVG, and plug-in audio. API WebCore JavaScript Platform Services S60 Core Integration UI WebKit KHTML KJS features (LGPL+BSD) (LGPL) OS adaptations Memory manager 5 More information about Webkit: http://www.webkit.org
    • S60 Web Browser delivers a complete browsing experience… AJAX and JavaScript & Password Dynamic HTML SSL manager RSS & Atom Bookmark icons Page Overview feeds (“favicons”)
    • What are Widgets? Widgets are mini-applications, which enables new ways to use internet services • Unique user experience by integrating phone applications and Internet services • Mobile optimized user interface (bring only relevant content and information) • Easily developed and distributed • Enable new business models
    • Web App vs. Widget Web App Widget • Running directly under the browser UI - • Running independently from the > each running web app requires one browser UI -> light weight in using instance of the browser resource • Web pages are constructed in Web • Widget’s resources located on the client server and transferred to client side -> side, only data is necessarily More data over the network downloaded from the server side -> Network effects • Not suitable to design for working • Possible to design for working offline offline • Can be distributed via numbers of • No distribution channel channels • Delivering as a continually updated • Delivering as downloadable and service installable package
    • From Web Developer to Mobile Application Developer WRT Widgets Custom web-app front-ends Innovative mashups …but not just .mobi sites, screen scrapes or snippet views Full fledged mobile apps
    • Widgets range from the simple, handy … Translator Expanding & collapsing lines News Really simple & quick to develop but a very handy tool Cool transitions & fading effects
    • … to the rich and collaborative The wind speed & direction change in real-time. That’s AJAX Loads photos in the background using AJAX for quick, fast browsing WeatherBug of the album Photo Album Search photos with tags Rich with graphics, images & effects Rich transition effects in slideshow mode
    • Widgets Compatible Devices • Over 25 Nokia devices launched, announced or upcoming • N-series multimedia computers, E-series business phones, Several high-end mainstream/ volume devices • S60 platform licensee devices will support WRT (Samsung, LG) 12
    • WRT Technology and Architecture
    • Web Run-Time Technology • Nokia Web Run-Time empowered by the Web Browser for S60 (OSS browser) • HTML 4.01, XHTML 1.0/1.1 • CSS2, CSS3 • JavaScript 1.3 (standard ECMA-262) • XMLHttpRequest (AJAX) • DOM Levels 2 and 3 • Nokia Web Run-Time supports • Widget specific APIs (widget, system info, menu …)
    • Widgets Architecture Separate applications on the Weather Bug Yahoo! device (Widgets) accessing finance directly online services UI to access Widgets Starting with S60 same as for other S60 3.2 devices (plus applications some 3.1 devices) S60 - MC S60 Widgets
    • Widgets discovery & installation via mobile Web browser • Widgets discovery and installation via browser is same as for other applications. Once download is completed, the install process will automatically start • Once installed, widgets show up as icons in the “Applications” folder • Click on the icon to start the widget Step by step screenshots Widgets installation Starting an installed widget
    • Widgets discovery & installation via PC Web browser • Widgets can be downloaded using PC web browser from sites distributing them. Once downloaded the file should have the extension “.wgz” ( e.g. weatherwidget.wgz) • To install the widget on the MC, users should Note! if you download a widget 1. Transfer the .wgz file to phone memory with file transfer utility from a website using MS IE browser, the browser might 2. On the mobile, locate the .wgz file and click on it to install change the widget file extension 3. Installation continue as in previous cases (D! and web browser) from .wgz to .zip. Solution: rename the file extension to be “.wgz” or use another browser. Widgets Continue as installation in previous cases Starting an installed widget
    • Web Run-Time (Latest Release) • Consumers experience personalized & Messaging PIM context-aware Internet services • Widgets can now access numerous S60 platform’s applications and services Location Imaging Video • Web community, operators, licensees can develop exciting new services & mash-ups Audio System Info
    • Widgets accessing Platform Services Based on current location, shows weather & mashes Connects to GPS to find the partner data current location Shows partner data – movie booking – based on Invite your friend for the current location movie by sharing details of the movie over SMS NOTES
    • Widgets accessing Platform Services Fetches itinerary, saves to phone’s calendar, and Fetches itinerary from checks flight status online online Saves the itinerary to Phone’s Calendar using Users are prompted for JavaScript granting access to phone’s services & apps NOTES
    • Widget Security (Latest Release) • Widgets embrace the security model of the browser • Widgets extend the security model further by giving users the control to allow access to different platform services • Access granted by users are as per the phone’s policy set by device manufacturer / operators
    • Web Widget Framework
    • Widget Component File • 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="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd"> <plist version="1.0"> <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>
    • Mobile Widget – info.plist
    • Icon.png • The icon of a widget is an image saved in Portable Network Graphics (.png) format • The recommended size of the icon is 88x88 pixels • If the icon.png is omitted from the widget installation package, the widget will appear with a default S60 application icon.
    • HTML – The Backbone of a Widget • Defines the structure of the widget. • Recommended HTML 4.01 specification. • Use the <div> (block-level) element to construct the widget’s views. • Views can be constructed with static HTML elements or can be dynamically created by JavaScript at runtime. • Useful element’s attributes: “id” and “class”.
    • HTML Code <html> <head> <style type=‘text/css’>@import ‘widget.css’;</style> <script type=‘text/javascript’ src=‘widget.js’ charset=‘utf-8’></script> </head> <body id="body"> <div id=‘mainView’> <span class=‘title’>Front view</span> </div> <div id=‘subView1’ class=‘subView’> <p class=‘title’>Back view</p> </div> <div id=‘subView2’ class=‘subView’> <p class=‘title’>Config view</p> </div> </body> </html>
    • CSS – Widget UI/Presentation • Contains information for controlling the style and layout a widget’s contents • Defines how to display HTML element: position, color, background color etc. • CSS information can be embedded in the HTML file • Use class selector to define common style for widget’s elements • Use id selector to define style for a particular widget’s element • Use pseudo-class selector to define style for pattern elements
    • CSS Code // Class selector to define common style for similar components .title { font-size: 26px; color: blue; } .subView { display: none } // Id selector to define a unique style for a unique component #mainView { font-size: 16px; color: red; text-align: center; } // 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; }
    • CSS and HTML Code // Id selector to define a unique <html> // style for a unique component <head> #mainView { <style type=‘text/css’>@import color: yellow; ‘widget.css’;</style> font-size: 24px; </head> } <body id="body" onload="startFunction();"> <div id=‘mainView’> // Class selector to define common <span class=‘title’>Front view</span> // style for similar components .title { </div> font-size: 16px; <div id=‘subView1’ class=‘subView’> color: red; <p class=‘title’>Back view</p> } <div>Extra information</div> .subView { </div> display: none <div id=‘subView2’ class=‘subView’> } <p class=‘title’>Config view</p> <div>Setting information</div> // Pseudo-class selector to design </div> // a pattern style </body> div.subview div { margin: 10px 0 0 0; </html> padding: 0 0px 0 0px; font-size: 22px; text-align: left; color: red; }
    • Javascript – The Brain of a Widget • The intelligence of a widget? • Without JavaScript codes, a widget is just a passive Web page • JavaScript code can be embedded in the HTML file within <script> elements • Require some programming skills • Object oriented designs • JavaScript API, Java DOM API, AJAX API • ECMAScript standard; Extension JavaScript objects • Core DOM and HTML DOM APIs • XMLHttpRequest object
    • 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’; }
    • Web Widget Packaging
    • Widget Installation Package •Widget installation file format • Compressed with any ZIP application •Widget installation file extension • WidgetName.wgz •Widget installation MIME type • x-nokia-widgets
    • Widget Installation • Package the widget (entire widget directory) into a zip file with .wgz extension • Transfer the .wgz file to the test device via • Bluetooth, • MMC, • OTA download, or • Copy to file system (via PC Suite) • On the device, just click on the .wgz file to install
    • Widget APIs Introduction
    • Widget Object • Widget object is a build-in module of the widget engine widget or window.widget • Widget object provides basic utility functions to manipulate widget’s properties • methods • openURL(String:url) • setPreferenceForKey(String:preference, String:key) • preferenceForKey(String:key) • prepareForTransition (String:transitionState) var h = window.screen.height; var w = window.screen.width; • performTransition(void) if (h < w) • setNavigationEnabled(Boolean:flag) widget.setDisplayLandscape(); • openApplication(Uid, param) • setDisplayLandscape(void) widget.onhide = pause; • setDisplayPortrait (void) function pause() { clearTimeout(timer); • properties } • identifier [readonly, String] • onshow [assigned callback function] • onhide [assigned callback function] • isRotationSupported [readonly, Booloean]
    • Menu Object • Menu object is an extension from the widget object menu or window.menu • Menu object provides interfaces to manipulate the options menu and softkeys (right and middle keys) of a widget • methods • append(MenuItem menuItem) • remove(MenuItem menuItem) var opMenu = window.menu; // ! menu is reserved • replace (MenuItem oldMenuItem, MenuItem newMenuItem) { • getMenuItemById(Integer:id) ... • getMenuItemByName(String:label) opMenu.setRightSoftKeyLabel(‘Back’, toMainView); } • setRightSoftKeyLabel(String:label, function:callbackfunction) • showSoftkeys(void) function toMainView() • hideSoftkeys(void) { • clear(void) ... opMenu.setRightSoftkeyLabel(‘’, null); } • properties • onShow [assigned callback function]
    • MenuItem Object • MenuItem is a build-in object of the widget engine • MenuItem provides interfaces to create menu items and submenus (cascading) for the options menu • methods •new MenuItem(String:label, Integer:id) •append(MenuItem:childMenuItem) •remove(MenuItem:childMenuItem) function createMenu •replace(MenuItem:oldMenuItem, MenuItem:newMenuItem) { •setDimmed(Boolean:flag) var settings = new MenuItem(‘Settings’, 10); settings.onSelect = showSettings; • properties window.menu.append(settings); } • onSelect [assigned callback function] function showSettings(id) { document.getElementById(‘setting’).style.display = ‘block’; }
    • Menu and MenuItem
    • SystemInfo Service API • SystemInfo service API is provided thru a scriptable NetScape plug-in module. • SystemInfo service object provides interfaces to access to limited system properties such as memory, network strength etc. • SystemInfo service plug-in module is loaded via an HTML <embed> element <embed type="application/x-systeminfo-widget" hidden="yes"></embed> • SystemInfo service plug-in module is not loaded in Browser context <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="api.js" /> <body onload="testapi()"> <embed type="application/x-systeminfo-widget" hidden="yes"> </embed> </body> </html>
    • SystemInfo Service API • Divided into 7 main categories: 1. Power Information Services 2. Network Information Services 3. Device’s display light and keypad illumination information and control services 4. Vibration information and control services 5. Beep tone control services 6. Memory and file system information services 7. System language information services
    • SystemInfo Service API • Power properties • Network properties • chargelevel [readonly, int] • signalbars [readonly, int] • chargerconnected [readonly, int] • networkname [readonly, string] • onchargelevel [writeonly, function] • registrationstatus [readonly, int] • onchargerconnected [writeonly, function] • onregistrationstatus [assigned callback function] var sysInfo = null; function init() { // get the handle to the system info object sysInfo = document.embeds[0]; var battLevel = sysInfo.chargelevel; sysInfo.onchargelevel = "batteryStatusCallback()"; } function batteryStatusCallback() { var battLevel = sysInfo.chargelevel; }
    • SystemInfo 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]
    • SystemInfo Service API cont. • Vibra methods • File system methods • startvibra(Integer:duration, Integer:intensity) • drivesize(String:drive) • stopvibra(void) • drivefree(String:drive) • Vibra properties • vibraminintensity [readonly, Integer] • File system properties • vibramaxintensity [readonly, Integer] • drivelist [readonly, String] • vibramaxintensity [readonly, Integer] • vibrasettings [readonly, Integer] • Language properties • Beep methods • language [readonly, String] • beep(Integer:frequency, Integer:duration) • Memory properties • totalram [readonly, Integer] • freeram [readonly, Integer]
    • Platform Services API
    • First Set of S60 Platform Services • Location • Landmarks • Contacts • Application Manager • Calendar • System Info • Media Management • Logging • Messaging • Sensors
    • S60 Platform Services • Framework for abstracting access to a set of services • Runtime specific bindings and security management Widgets Messaging Location WRT Phonebook JS Binding Platform JavaScriptCore Binding For SAPI with SAPIs Webkit Security Media Manager Other runtimes
    • JavaScript Extensions for S60 Platform Services support Key JavaScript Extensions: Several new object types have been added to JavaScript to bind S60 Platform Services to WRT. These extensions are available in WRT but not the S60 Web Browser. • Device: Entry point to access platform services, can be referenced directly. • ServiceObject: Service object to access platform services, may contain interfaces. var so = device.getServiceObject("Service.Location", "ILocation"); •Interface: Interface object to access service API interfaces and keep a list of results. Var locationInterface = so.ILocation; •Result: Wrapper for return result for SAPI calls, may contain error code, error message and DeviceLiwIterable. var result = locationInterface.GetLocation(criteria); •Iterable: Wrapper for SAPI iterator which iterates list of result data, maps, etc. var iterable = result.ReturnValue; •Map : Wrapper for SAPI map which encapsulates certain data, may contain nested maps as well. var map = iterable .getNext();
    • Location Operations for Location service using iLocation interface: • GetLocation: Retrieve the current location of the user. • Trace: Inform the consumer of any change in current location. • CancelNotification: Cancel the registered listeners with the service provider. • Calculate: Perform specific calculations on user provided data. Sample code: var so = device.getServiceObject("Service.Location", "ILocation"); var updateOptions = new Object(); updateOptions.PartialUpdates = true; var criteria = new Object(); criteria.LocationInformationClass = “GenericLocationInfo”; criteria.Updateoptions = updateOptions; var result = so.ILocation.GetLocation(criteria);
    • Contacts Operations for Contact service with iDataSource interface: • Get List: Query contacts based on the given criteria • Add/Delete: Add/delete a contact/group • Import/Export: Import/Export contact(s) • Organize: Associate/Disassociate contacts to/from a group Sample code: var so = device.getServiceObject("Service.Contact", "IDataSource"); var contactdata = {LastName:{Label:last,Value:Smith}, FirstName:{Label:first, Value:John}}; var criteria = { Type:"Contact“,Data: contactdata }; var result = so.IDataSource.Add(criteria);
    • Calendar Operations for Calendar service using IDataSource interface: • GetList: Retrieve calendars or calendar entries on device • Add/Delete: Adds/delete a calendar or calendar entry • Import/Export: Import/export calendar entries from/to a file/buffer • RequestNotification: Register for notification for changes in calendar Sample code: var so = device.getServiceObject("Service.Calendar", "IDataSource"); var startDate = new Date("January 6, 2008 19:05:00"); var endDate = new Date("January 7, 2008 20:05:00"); var criteria = {Type:"CalendarEntry“, Item:{Type:”Meeting”,StartTime:startDate.EndTime:endDate}} var result = so.IDataSource.Add(criteria);
    • Media Management Operations for MediaManagement Service using IDataSource interface: • GetList: Retrieve information for media files (such as filename, media type, artist, album, etc) • Cancel: Cancel an ongoing Async request. Sample code: var so = device.getServiceObject("Service.MediaManagement", "IDataSource"); var criteria = {Type: 'FileInfo‘,Filter:{FileType:’Sound’},Sort:{key:’FileSize’}}; var result = so.IDataSource.GetList(criteria, callback);
    • Messaging Operations for Messaging service using IMessaging interface: • GetList: Retrieve/query SMS/MMS Messages in device inbox • Send: Send SMS/MMS Message • Register/Cancel Notification: Register/cancel incoming msg notifications • Cancel: Cancel an ongoing Async request • Change Status: Change status of a message • Delete: Delete a message Sample code: var so = device.getServiceObject("Service.Messaging", "IMessaging"); var criteria = {Type: ‘inbox‘, Filter: {MessageTypeList: {‘SMS‘,’MMS’}}}; var result = so.IDataSource.GetList(criteria, callback);
    • Landmarks Operations for Landmarks service using IDataSource interface: • New: Create an empty landmark/category item. • GetList: Query landmark databases, landmarks or landmark categories • Add/Delete: Add/Update a landmark, landmark category • Import/Export: Import/export landmark(s) •Organise: Associate/Disassociate a landmark category with a set of landmarks Sample code: var so = device.getServiceObject("Service.Landmarks", "IDataSource"); var criteria = {Type:'Landmark‘,Sort:{Key:'LandmarkName‘,Order:’Descending’}}; var resultList = so.IDataSource.GetList(criteria);
    • Application Manager Operations for AppManager Service using IAppManager interface: • GetList: Get the list of Applications and User Installed Packages • LaunchApp: Launch a given application based on UID • LaunchDoc: Launches the application based on the given document or mime • Cancel: Cancel an ongoing Async request. Sample code: var so = device.getServiceObject("Service.AppManager", "IAppManager"); var criteria = { ApplicationID:"s60uid://0x101f4cce", // uid for contacts Option:{Mode:"Standalone"}}; var result = so.IAppManager.LaunchApp(criteria);
    • System Info Operations for SysInfo service using iSysInfo interface: • GetInfo/SetInfo: Read/modify System Attribute Values • GetNotification: Register a callback function for listening to notifications • Cancel: Cancel an ongoing Async request. Sample code: var so = device.getServiceObject("Service.SysInfo", "ISysInfo"); var criteria = {entity:”General”, key:”VibraActive”}; var result = so.ISysInfo.GetInfo(criteria); Supported features: Battery: BatteryStrength, ChargeStatus Display: Brightness, ScreenSaverTimeout, etc. Network: SignalStrength, CurrentNetwork, etc. Connectivity: BlueTooth, ActiveConnections, etc. General: InputLanguage, VibraActive, etc. Memory: DriveInfo, CriticalMemory, etc. Features: BlueTooth, CAMERA, Pen, etc. Device: PlatformVersion, PhoneModel, IMEI, etc.
    • Logging Operations for Logging service using IDataSource service: • Add/Delete: Add/delete a log event to/from Event log • GetList: Get a Log Event or all the log entries from event log • RequestNotification: Request for changes occurring to Event log • Cancel: Cancel an ongoing Async request. Sample code: var so = device.getServiceObject("Service.Logging", "IDataSource"); var itemMap = new Object(); itemMap.EventType = 3; // ShortMessage event itemMap.RemoteParty = '16172333568'; itemMap.PhoneNumber = '17819933882'; itemMap.Direction = 1; // outgoing itemMap.Subject = 'Test txt msg'; itemMap.Description = 'Hi, this is a text message to you'; itemMap.DeliveryStatus = 1; // Sent var criteria = {Type:'Log‘, Item:itemMap}; var result = so.IDataSource.Add(criteria);
    • Security Management •The runtime security manager is policy based, governed by a pair of security policies namely Security Access Policy and Runtime Trust Policy. •The access policy contains "domain" and "trust" information. Each protection domain defines set of capabilities that are allowed by default (without user being prompted) and granted by user. •Runtime trust policy defines trust information like origin, certificate chain information etc. In the first implementation, only untrusted domain is supported and all scripts are default to untrusted. • WRT Security capabilities are effectively mapped to S60 / Symbian security capabilities
    • Security Management -- capabilities Domain Capabilities Application Manager ReadUserData Calendar WriteUserData ReadUserData Location Location Logging ReadUserData WriteUserData SysInfo ReadUserData Location Contacts WriteUserData ReadUserData Landmarks ReadUserData WriteUserData Media Management None Messaging ReadUserData WriteUserData NetworkServices
    • Security prompts User being prompted for accessing certain capabilities : Figure 1. access Positioning data capability for Location service.
    • S60 Platform Services: JavaScript Implementation Notes • Lists and Maps used as service arguments and return values • JavaScript objects • Object attributes defined in API documentation • Multiple interfaces can be used at the same time var so1 = device.getServiceObject(”Service.AppManager”, ”IAppManager”); var so2 = device.getServiceObject(”Service.SysInfo”, ”ISysInfo”);
    • S60 Platform Services – JavaScript Implementation Notes • close() method provided for JS extensions ServiceObject, Interface, Result, Iterator and Map • Improves memory performance • Only releases the specific Platform Service middleware resources not JS resources var map = result.ReturnValue.getNext(); map.close();
    • Result objects • Synchronous calls • ErrorCode • ErrorValue • ReturnValue // iterator for list of service specific response objects • Asynchronous calls • ErrorCode • ErrorValue • TransactionID // passed by framework to callback function to identify the request
    • Asynchronous calls var result = so.IDataSource.Add(criteria, callback_fn); … function callback_fn(transId, eventCode, result) { // result object corresponds to synchronous call object // eventCode specifies the status of the request // transId is the same as returned in async call result }
    • Other Useful Information/Libraries
    • WRTKit • UI toolkit for developing a web UI suitable for mobile devices • Javascript, CSS and graphical elements • Event triggering and state monitoring • Easy to create a consistent UI experience • UI Controls • Views & UI Manager • Monitoring Events • Comes with the Forum Nokia WRT Aptana Plugin (also included in the thumbdrive) <script type="text/javascript“ src="WRTKit/WRTKit.js"></script>
    • URI Schemes • WTAI • Enables call initiation <a href="wtai://wp/mc;+123456789">Call me</a> • Contacts editor launching. <a href="wtai://wp/ap;+987654321;John Doe">John Doe</a> • TEL • Call initiation <a href="wtai://wp/mc;+123456789">Call me</a>
    • Localization • Widgets can be localized to a language that is supported on the handset • http://wiki.forum.nokia.com/index.php/How_to_lo calise_a_WRT_widget • Note: Not yet supported on emulator
    • Others: Prototype Javascript Library • Widget Development Kit • Famous cross-web-browser javascript library • Supports popular web browsers: • Firefox • Safari • IE • Opera • AppleWebKit (from 1.6.0 onwards) • Nokia S60 Web Browser built on S60WebKit (port of the AppleWebKit) • Provides utility functions for the following operations:- • Basic Operations (utility functions etc) • String Manipulations • Object Creation • Prototype UI • Form and AJAX (JSON)
    • Backward Compatibility • To ensure backward compatibility, check that the device object exists before calling the getServiceObject method: if (device != "undefined") device.getServiceObject("Service.MediaManagement", “IDataSource");
    • Web Widget Development
    • What You Need For Development? • For implementing widget’s code: • Aptana with Forum Nokia’s Aptana Plugin Plugin Instructions: http://release.aptana.com/install/nokia1.0/in dex.html OR • Any text editor/IDE that allows you to save the text in ANSI • For testing a widget: • S60 3.2 SDK emulator (WRT v1.0), OR • S60 5th Edition SDK emulator (WRT v1.1), OR • a supporting device
    • Documentation/Tutorials • WRT Developer’s Library (provided on thumbdrive under WRTToolsextrasdocumentation)
    • Supporting Nokia Devices (WRT v1.0)… S60 3rd Edition Feature Pack 2 First S60 3rd Ed FP1 devices (specific firmware): sw 21.0.016 sw 20.0.062. sw 15.0.015 Newer S60 3rd Ed FP1
    • Supporting Nokia Devices (WRT v1.1)… S60 5th Edition Devices
    • Hands On
    • Tools Installation • Refer to “WRT Tools Installation” in the WRT folder for instructions on the tools installation • Tools to install (in the following order): • From folder “WRTToolsS60 5th Edition Platform SDK” 1. Java Runtime 2. Perl 3. S60 5th Edition SDK • From folder “WRTToolsAptana” 4. Aptana Studio, and 5. Forum Nokia’s WRT Plugin for Aptana (Note: See installation instructions for integration)
    • Hands-on Exercise(s) • Before we start: • Copy the entire “WRTExercise Files” folder to your local drive (e.g. “C:Exercise Files”) • Navigate to the “Exercise Files” folder to check that you have all the following 3 folders: • gallery • GalleryWidget • HelloWorld
    • Exercise 1: Package, Install & Run a Widget • Objective: Package, install and run a WRT widget • Refer to “Widgets Exercise 1 – Packaging and Installing a Widget” for instructions
    • Exercise 2: Creating a Gallery Widget • Objective: use the service API to access the device’s gallery and display all the images in the gallery • Refer to “Widgets Exercise 2 – Gallery Widget” for instructions
    • Mini Challenge : Extend the Gallery Widget Some Project Ideas: 1. Resize images before display 2. Add MMS capability 3. Randomize image displayed BEST 3 (VOTING) WINS PRIZES!! ☺ Voting after lunch!!
    • Resources • S60 5th Edition SDK - emulator Forum Nokia Website (www.forum.nokia.com) > Devices, Docs & Tools > Tools > Platforms > S60 Platform > Download All-In-One S60 SDKs > Download version for: 5th Edition v0.09 • Documents/E-Learning on Forum Nokia Website Forum Nokia Website (www.forum.nokia.com) > Devices, Docs and Tools > Documentation > Web Technologies • Web Run-Time Code Examples Forum Nokia Wiki (wiki.forum.nokia.com) > Code Examples > WRT Widgets (Web Runtime)