Upload
ibnu-siena-s
View
81
Download
6
Embed Size (px)
Citation preview
Symbian Web Runtime
Valerie Tai ([email protected])October 2010
What is Nokia doing for developers?
Java
Web
Native
Nokia radically focuses its development offering, greatly simplifying life f d l d i i i i i h lfor developers and increasing investment in strategic technology
Slide 2
s5 removed text from here: CONFIDENTIAL – SUBJECT TO NDA | Nokia + Ovi Developer Story | 7skong, 22/08/2010
Why web? Reach more people with your content
Ovi App Wizard:
Turn your web site updates into a mobile application
Widgets on Symbian:
Transform your content into personal, relevant experiences
Browser 7 on Symbian:
WebKit-based, optimized for touch devices
Why web?
Real applicationsReal applications• Install and manage just like any other
applicationapplication• Add context to your web content with
JavaScript APIs and existing web service APIsJavaScript APIs and existing web service APIs• Add Flash for multimedia impact
Why web?
Easy to get startedEasy to get started• Use the same skills you use to create web pages
(HTML, JS, CSS)(HTML, JS, CSS)• Develop quickly with professional tools
Why web?
Design freedomDesign freedom• Leverage JS and CSS to create your own
styles and UI frameworksstyles and UI frameworks• Deploy custom templates to support and
extend your brandy
Reach millions of Symbian devices today, through Ovi Store
Web Browser• All web browsers perform the same tasks The order• 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)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”
WebBrowserWidgets
Symbian plug-ins, incl. Flash Lite, SVG, and
di
Netscapeplug-in
APIBrowser control API
Symbian Browser UI Widget Runtime
UI features
audio. API
WebCoreKHTML
(LGPL+BSD)
JavaScriptCore
KJS
(LGPL)
SymbianWebKit
Platform Services Integration
( G S ) (LGPL)
OS adaptations Memory manager
9
More information about Webkit: http://www.webkit.org
Web Application
• Accessed with the Web browser over the Internet
• Uses standard Web-based technologies such as HTML/XHTML CSS JavaScriptHTML/XHTML, CSS, JavaScript, DOM etc.
• Typical Web applications are• 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 informationrelevant information
Web App vs. WidgetWeb App WidgetWeb App
• Running directly under the browser UI
W b d i W b
Widget• Running independently from the
browser UI -> light weight in using resource
• Web pages are constructed in Web server and transferred to client side -> More data over the network
• Widget’s resources located on the client side, only data is necessarily downloaded from the server side ->
k ff• Not suitable to design for working
offline
Network effects
• Possible to design for working offline
• No distribution channel
• Delivering as a continually updated
• Can be distributed via numbers of channels
• Delivering as downloadable and • Delivering as a continually updated service
ginstallable package
Addi C t t Adding Context to Web Contentto Web Content
The web can overload us with information, how do we present consumers with we present consumers with what’s most relevant to them in the moment?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 i
Location
extensions• Combine web-based data with device
context to deliver personalised and
Messaging
Calendar
Contactsprelevant services
• Save critical web-based contacts and events locally to create reliable and System
Media
Contacts
events locally to create reliable and dependable reminders
• Available since Symbian OS, S60 5.0
System
y ,• Available in selected Symbian OS, S60 3.2
devices
Nokia 5800 XpressMusic
Widgets accessing Platform Services
Based on current location, shows weather & mashesshows 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 SMSthe movie over SMS
NOTES
Symbian Web Runtime 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) Web Runtime Version Platform Services Version
Support
S60 3rd Edition, Feature Pack 1 1.0 No Platform Services
S60 3 d Editi F tS60 3rd Edition, Feature Pack 2 1.0 or 7.2 Platform Services 1.0
S60 5th Edition 1.1 or 7.2 Platform Services 1.0(Platform Services 2.0*)
bi Platform Services 1.0Symbian^3 7.2 Platform Services 1.0Platform Services 2.0
* Selected devices and firmware versions
Widget Component Files• A widget is constructed by a bundle of files.
• info.plist (mandatory)• icon png• icon.png • [name].html (mandatory)• [name].css• [name] js• [name].js
• A widget project is a file system directory in which widget’s• 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• 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• The Manifest File is an XML file that
describes the widget to the Web Runtime on the S60 DeviceRuntime on the S60 Device
• DisplayName – The name displayed in the S60 Application Menu
• Identifier a unique string identifier• Identifier – a unique string identifier in the form of a reverse internet domain
• Version - a version string• Version - a version string• MainHTML – main html file used in
the widgetAllowNetworkAccess set to allow• AllowNetworkAccess – set to allow the widget to access the network.
Icon.png• The icon of a widget is an image
saved in Portable Network Graphics ( png) formatGraphics (.png) format
• The recommended size of the icon is 88x88 pixels
If h i i i d f h• If the icon.png is omitted from the 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• WidgetName.wgz
•Widget installation MIME type• x-nokia-widgets
Deployment
Platform ServicesPlatform Services
Platform Services 2.0: What’s NewSi lifi d API ith h t t t i t f• Simplified API with enhancements to most interfaces
• New APIs for manipulating landmarks• Improved APIs for using log info
Messaging
Location
p g g• New APIs to manipulate contact groups• Improved APIs for using sensor data
Calendar
Contacts
• Forward compatibility with future implementations of Platform Services
System
Media
Camera• Device Support: N97 (v20.0.019), N97 mini (v10.0.020), with full support on other devices expected by firmware updates.
Camera
Sensors
LoggingLogging
http://www.forum.nokia.com/Library/Tools_and_downloads/Other/Nokia_Platform_Services/
I want to know what’s I want to know what s relevant for me Here and Now!Now!
Access to LocationAccess to Location
Location API
Allows you to retrieve and monitor the phone’s physical
The geolocation object provides the followingmonitor the phone s physical
location using methods supported by the device (e.g. A-GPS, Cell-based)
provides the following methods:
, )• getCurrentPosition
• getPositionUsingMethodName
• watchPosition
• clearWatch
Allow the Web to sense your environmentAllow the Web to sense your environment.
iAccess to Device Sensors
Sensors API
Allows a direct channel to information from the
These are some of the supported channels :
hardware sensor.
Compass proximity
pp
• AccelerometerAxis (Continuous)
• AccelerometerDoubleTapping (State)Compass, proximity, accelerometer, illumination, orientation, etc.
• Illumination (State)
• MagneticNorth (Continuous)
• Magnetometer (Continuous)
• Orientation (State)
• Proximity (State)
• Rotation (Continuous)
Sensors API - Demo
Wouldn’t it be nice if my device Wouldn t it be nice if my device would let me know what my friends are up to and recommended things to are up to and recommended things to do?
Access to PIM Data
PIM APIs
Allows access to Personal
Using 3 objects (calendar, contacts, messaging) these are
Information Data
Calendar contacts
messaging) these are some of the things we can do:
Calendar, contacts, messaging • Add and read calendar events
• Register for incoming messages
Read and create contacts• Read and create contacts
CalendarAccessing, creating, and managing calendar entries• getList: retrieves a list of calendar entries and instances from the default calendar• 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
g, g, g g
• deleteEntry: deletes an entry in the default calendar • startEditor: launches the device’s native calendar editor• cancel: cancels an ongoing asynchronous call
var so = nokia.device.load(“calendar");
var dt = new Date();dt.setUTCMonth(2,17); // month and day specifieddt.setUTC dt.setUTCHours(6,00); // 11:30 AM Blr time in UTC/GMTstTime = dt;dt.setUTCMonth(2,17); // month and day specifieddt.setUTCHours(7,00); // 12:30 PM Blr time in UTC/GMT endTime = dt; var meetingTime = {begin:stTime, end:endTime}; var return = so.addEntry(meetingEntry);
Contacts (1/2)Access and manage info about contacts on default device contacts DBAccess 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
• 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
C G f• removeContactsFromGroup: removes one or more contacts from a contact group
• startEditor: launches the device’s native contacts editor•cancel: cancels an ongoing asynchronous call
Contacts (2/2)d i f b d f l d iAccess and manage info about contacts on default device contacts DB
var so = nokia.device.load("contacts"); var contact = {
name: {name: {first: “John”;last: “Smith”;
}););var contactId = so.addContact(contact);contact = so.getContactInfo(contactId);alert(“First Name: ” + contact.name.first);
l t(“L t N ” t t l t)alert(“Last Name: ” + contact.name.last);
Messagingd i d i hSend, retrieve, and manage messages using the Message Store
• startEditor: launches the device’s 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• getMessage: retrieves a single message from the Message 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 = nokia.device.load(“messaging"); var messageinfo = so.getMessage(messageid);var sender = messageinfo.sender;var messagedata = messageinfo.message;var type = messagedata.type;var message = messagedata.body;
Tools, Testing Tools, Testing and
D t tiDocumentation
Getting Started: Web Development Landing Pagehttp://www.forum.nokia.com/Develop/Web/
Familiar tools turn web designers into widget developersp
• Develop web widgets using existing popular development tools
• WRT plug-in 2 0 for Aptana Studio• WRT plug-in 2.0 for Aptana Studio
• WRT Extension for Adobe Dreamweaver
• WRT plug-in for Microsoft Visual Studio
• Create develop test preview and• Create, develop, test, preview and 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 projects WRT plug-ins andp j WRT plug-ins and
extension Widgets
Nokia Web SDK Technology Previewhttp://www.forum.nokia.com/Develop/Web/9hy25fa/
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 debuggingtesting and debugging.
The Web Developer Channel, which delivers resources to make appdelivers resources to make app development faster and more productive.
Nokia Web SDK Technology Previewhttp://www.forum.nokia.com/Develop/Web/9hy25fa/
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 debuggingtesting and debugging.
The Web Developer Channel, which delivers resources to make appdelivers resources to make app development faster and more productive.
Testing: Remote Device Access Services1 Remote Device Access by Forum Nokia1. Remote Device Access by Forum Nokia2. Forum Nokia Virtual Developer Lab (powered by DeviceAnywhere)
h // f ki / i / d i /http://www.forum.nokia.com/Devices/Remote_device_access/
Remote Device Access Service
Documentationhttp://www.forum.nokia.com/Develop/Web/Documentation/
Web Developer’s Library: API Documentation
http://www.forum.nokia.com/Develop/Web/ > Web Developer’s Library
Forum Nokia Wiki – Tutorials/Articles/Sampleshttp://wiki.forum.nokia.com > Web Runtime
Web Runtime available on over 30 Symbian models
Over 30 Symbian devices launched, announced or upcoming
Broad-based Device SupportBroad-based Device Supporton Symbian OS, S60 3.2 and 5.0 devices
Latest Firmware UpgradeS bi OS S60 3 1 d ion Symbian OS, S60 3.1 devices
Hands-On Exercise
Hands-On Example: Qype
• Getting familiar with the Web SDK
• Learn how to use Device APIs
• All using standard HTML/CSS/Javascripttechnology!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 itThen double click on the• Then double-click on the 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• Select Preview Web App• This will load the application
in the simulator
Simulator Settings
• Change your device settings to emulate a Symbian^3 devicedevice
• Click on Device SettingsCh• 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!• Just follow the instructions!
Now it’s time to start turning ideas start turning ideas into software
Let’s make the internet personal internet personal and mobile
Thank you!Thank you!Let us know when you write something you write something impressive
Valerie [email protected]