Symbian Web Runtime
Valerie Tai ([Link]@[Link]) October 2010
What is Nokia doing for developers?
Java
Web Native
Nokia radically focuses its development offering, greatly simplifying life for developers and increasing investment in strategic technology f d l di i i i i h l
Slide 2 s5 removed text from here: CONFIDENTIAL SUBJECT TO NDA
skong, 22/08/2010
| Nokia + Ovi Developer Story | 7
Why web?
Reach more people with your content
Browser 7 on Symbian: WebKit-based, optimized for touch devices
Ovi App Wizard: Turn your web site updates into a mobile application
Widgets on Symbian: Transform your content into personal, relevant experiences
Why web?
Real applications
Install and manage just like any other application Add context to your web content with JavaScript APIs and existing web service APIs Add Flash for multimedia impact
Why web?
Easy to get started
Use the same skills you use to create web pages (HTML, JS, CSS) Develop quickly with professional tools
Why web?
Design freedom
Leverage JS and CSS to create your own styles and UI frameworks Deploy custom templates to support and extend your brand y
Reach millions of Symbian devices today, through Ovi Store
Web Browser
The tasks are:
Fetch markup Parse markup
All web browsers perform the same tasks. The order tasks and how the process is performed is what differentiate browsers.
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
Symbian Webkit
Symbian Browser and Web Runtime are based on WebKit
Native C/C++
Web Capable
Widgets
Symbian plug-ins, incl. Flash Lite, SVG, and audio. di Platform Services Integration
Web Browser Netscape plug-in API
Symbian Browser UI
Widget Runtime
Browser control API
UI features
Symbian WebKit
WebCore
KHTML ( G (LGPL+BSD) S )
JavaScript Core
KJS (LGPL) Memory manager
OS adaptations
More information about Webkit: [Link]
Web Application
Accessed with the Web browser over the Internet Uses standard Web-based technologies such as HTML/XHTML, CSS JavaScript HTML/XHTML CSS, JavaScript, DOM etc. Typical Web applications are Webmail, online auction (eBay), online booking or web blogs
Web Runtime Applications (Widgets)
Small applications with a specific purpose Interacts with the Web Retrieves and displays relevant information
Web App vs. Widget
Web App Running directly under the browser UI W b pages are constructed i W b Web d in Web server and transferred to client side -> More data over the network Not suitable to design for working offline No distribution channel Delivering as a continually updated service Running independently from the browser UI -> light weight in using resource Widgets resources located on the client side, only data is necessarily downloaded from the server side -> Network effects k ff Possible to design for working offline Can be distributed via numbers of channels Delivering as downloadable and g installable package
Widget
Adding Context Addi C t t to Web Content
The web can overload us with information, how do we present consumers with whats most relevant to them in the moment?
Your Mobile Phone as an Information Filter
Platform Services add context to web content
Web Runtime widgets can access Platform Services through JavaScript extensions Combine web-based data with device context to deliver personalised and p relevant services Save critical web-based contacts and events locally to create reliable and dependable reminders y , Available since Symbian OS, S60 5.0 Available in selected Symbian OS, S60 3.2 devices
Nokia 5800 XpressMusic
Location Messaging i Calendar Contacts Media System
Widgets accessing Platform Services
Based on current location, shows weather & mashes partner data
Connects to GPS to find the current location
Shows partner data movie booking based on current location
Invite your friend for the movie by sharing details of the movie over SMS
NOTES
Symbian Web Runtime Technology
Symbian Web Run-Time Technology
HTML 4.01, XHTML 1.0/1.1 , CSS2, CSS3 JavaScript 1.5 (standard ECMA-262) XMLHttpRequest (AJAX) DOM Levels 2 and 3
Symbian Web Run-Time Versions and Device Support
Symbian Release (Device) S60 3rd Edition, Feature Pack 1
d Edition, F S60 3rd Editi Feature t Pack 2
Web Runtime Version 1.0 1.0 or 7.2
Platform Services Version No Platform Services Platform Services 1.0 Platform Services 1.0 (Platform Services 2.0*) Platform Services 1.0 Platform Services 2.0
S60 5th Edition Symbian^3 bi
1.1 or 7.2 7.2
* Selected devices and firmware versions
Widget Component Files
A widget is constructed by a bundle of files.
[Link] (mandatory) [Link] icon png [name].html (mandatory) [name].css [name].js [name] js
A widget project is a file-system directory in which widgets file system directory, widget s component files are stored. Widgets mandatory files and the [Link] (if included) MUST be icon png located at the root directory of a widget project.
[Link] Property of a Widget
The Manifest File is an XML file that describes the widget to the Web Runtime on the S60 Device
DisplayName The name displayed in the S60 Application Menu Identifier a unique string identifier in the form of a reverse internet domain Version - a version string MainHTML main html file used in the widget AllowNetworkAccess set to allow the widget to access the network.
[Link]
The icon of a widget is an image saved in Portable Network Graphics (.png) format ( png) The recommended size of the icon is 88x88 pixels If the i h [Link] i omitted f is i d from the h widget installation package, the widget will appear with a default S60 application icon, or empty
Widget Installation Package
Widget installation file format
Compressed with any ZIP application
Widget installation file extension
[Link]
Widget installation MIME type
x-nokia-widgets
Deployment
Platform Services
Platform Services 2.0: Whats New
Si Simplified API with enhancements t most i t f lifi d ith h t to t interfaces
New APIs for manipulating landmarks Improved APIs for using log info p g g New APIs to manipulate contact groups Improved APIs for using sensor data
Location Messaging Calendar Contacts Media
Forward compatibility with future implementations of Platform Services Device Support: N97 (v20.0.019), N97 mini (v10.0.020), with full support on other devices expected by firmware updates. [Link] /Other/Nokia_Platform_Services/
System Camera Sensors Logging
I want to know whats what s relevant for me Here and Now!
Access to Location
Location API
Allows you to retrieve and monitor the phone s physical phones location using methods supported by the device (e.g. A-GPS, Cell-based) , ) The geolocation object provides the following methods:
getCurrentPosition getPositionUsingMethodName watchPosition clearWatch
Allow the Web to sense your environment environment.
Access to Device Sensors i
Sensors API
Allows a direct channel to information from the hardware sensor. Compass, proximity, Compass proximity accelerometer, illumination, orientation, etc. These are some of the supported channels : pp
AccelerometerAxis (Continuous) AccelerometerDoubleTapping (State) Illumination (State) MagneticNorth (Continuous) Magnetometer (Continuous) Orientation (State) Proximity (State) Rotation (Continuous)
Sensors API - Demo
Wouldn t Wouldnt it be nice if my device would let me know what my friends are up to and recommended things to do?
Access to PIM Data
PIM APIs
Allows access to Personal Information Data Calendar, contacts, Calendar contacts messaging Using 3 objects (calendar, contacts, messaging) these are some of the things we can do:
Add and read calendar events Register for incoming messages Read and create contacts
Calendar
Accessing, creating, and managing calendar entries g, g, g g
addEntry: adds a new entry in the default calendar updateEntry: adds a new entry in the default calendar deleteEntry: deletes an entry in the default calendar startEditor: launches the devices native calendar editor cancel: cancels an ongoing asynchronous call var so = [Link](calendar"); var dt = new Date(); [Link](2,17); // month and day specified [Link] [Link](6,00); // 11:30 AM Blr time in UTC/GMT stTime = dt; [Link](2,17); // month and day specified [Link](7,00); // 12:30 PM Blr time in UTC/GMT endTime = dt; var meetingTime = {begin:stTime, end:endTime}; var return = [Link](meetingEntry);
getList: retrieves a list of calendar entries and instances from the default calendar
Contacts (1/2)
Access and manage info about contacts on default device contacts DB
getContacts: retrieves a list of contacts
getGroups: retrieves a list of contact groups
addContact: adds a new contact updateContact: modifies an existing contact
cancel: cancels an ongoing asynchronous call
deleteContacts: deletes one or more existing contact addGroup: adds a new contact group updateContact: modifies an existing contact group deleteGroups: deletes one or more existing contact groups getContactInfo: retrieves details of a single contact getGroupInfo: retrieves details of a single contact group getGroupIds: retrieves a list of contact group IDs addContactsToGroup: adds one or more contacts to a contact group removeContactsFromGroup: removes one or more contacts f C G from a contact group startEditor: launches the devices native contacts editor
Contacts (2/2)
Access and manage i f about contacts on d f l d i contacts DB d info b default device
var so = [Link]("contacts"); var contact = { name: { first: John; last: Smith; } ); var contactId = [Link](contact); contact = [Link](contactId); alert(First Name: + [Link]); alert(Last Name: + [Link]); l t(L t N t t l t)
Messaging
Send, retrieve, and manage messages using the Message Store d i d i h startEditor: launches the devices native message editor with pre-populated message data
getList: retrieves a list of messaging objects from the Message Store send: sends an sms/mms message setNotifier: registers the widget to receive notifications of new incoming messages cancelNotifier: cancels notification of new incoming messages getMessage: retrieves a single message from the Message Store. Store deleteMessage: deletes a single message from the Message Store. setStatus: sets status of the message as read/unread cancel: cancels an ongoing asynchronous call var so = [Link](messaging"); var messageinfo = [Link](messageid); var sender = [Link]; var messagedata = [Link]; var type = [Link]; var message = [Link];
Tools, Testing and Documentation D t ti
Getting Started: Web Development Landing Page
[Link]
Familiar tools turn web designers into widget developers p
Develop web widgets using existing popular development tools
WRT plug-in 2 0 for Aptana Studio 2.0 WRT Extension for Adobe Dreamweaver WRT plug-in for Microsoft Visual Studio
Create develop, test preview and Create, develop test, deploy WRT widgets for millions of Nokia devices
Easy transition from web design to widget development Opportunity for designers and developers to collaborate on the same p j projects
WRT plug-ins and extension
Widgets
Nokia Web SDK Technology Preview
[Link]
The Web Developer Environment, which enables you to create, code, debug, validate, package, and deploy apps. The Web SDK Simulator, which accurately previews your apps, enabling testing and debugging debugging. The Web Developer Channel, which delivers resources to make app development faster and more productive.
Nokia Web SDK Technology Preview
[Link]
The Web Developer Environment, which enables you to create, code, debug, validate, package, and deploy apps. The Web SDK Simulator, which accurately previews your apps, enabling testing and debugging debugging. The Web Developer Channel, which delivers resources to make app development faster and more productive.
Testing: Remote Device Access Services
1. 1 Remote Device Access by Forum Nokia 2. Forum Nokia Virtual Developer Lab (powered by DeviceAnywhere)
[Link] h // f ki / i / d i /
Remote Device Access Service
Documentation
[Link]
Web Developers Library: API Documentation
[Link] > Web Developers Library
Forum Nokia Wiki Tutorials/Articles/Samples
[Link] > Web Runtime
Web Runtime available on over 30 Symbian models
Over 30 Symbian devices launched, announced or upcoming Broad-based Device Support on Symbian OS, S60 3.2 and 5.0 devices Latest Firmware Upgrade on S bi OS S60 3.1 devices Symbian OS, 31d i
Hands-On Exercise
Hands-On Example: Qype
Getting familiar with the Web SDK Learn how to use Device APIs All using standard HTML/CSS/Javascript technology!
Lab Workflow
Tutorial documentation integrated into the SDK
Snippets Adding them into the example
Check Snippet description Open correct file Look for the placeholder in the file and highlight it
Then double click on the double-click snippet to add the snippet code into the file (replacing the placeholder)
Using the Simulator for Preview
Right-click on the application name in the Project Explorer Select Preview Web App This will load the application in the simulator
Simulator Settings
Change your device settings to emulate a Symbian^3 device Click on Device Settings Ch Choose: Symbian WRT 1.1 360x640 Touch
Start on the Exercise!
Click to page 6/15 of the Hands on Lab Just follow the instructions!
Now its time to start turning ideas into software Lets make the internet personal and mobile
Thank you!
Let us know when you write something impressive
Valerie Tai [Link]@[Link]
