Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov

sami.j.viitanen@nokia.com Paris, 17.-18.11.09

© 2009 Nokia Corporation

Web Runtime à la Symbian

Agenda Day1

• Welcome! • Forum Nokia • WRT widget in nutshell • Towards an excellent UX • Going inside the widget

Day2 • Exercises

Web Runtime and Nokia

Services Level

Apps Level

Platform Level Desktop OSs Nokia platforms

Our Developer Offering: elegantly connected services

5

Cross-platform evolution expands opportunities Series 40* Desktop Symbian Maemo

Web Runtime and Qt close the gap between mobile and desktop development

Java SE Java  

Native Qt

Flash

Java ME

Flash Lite

Next  

Flash

                                                                                       Web  Run.me  

Web Enables  fast  applica.on  and  UI  development  across  mobile  and  

desktop  pla2orms  

Flash

*      selected  Series  40  devices  

Web Enables  rich  service  crea9on  on  

supported  pla2orms  using  standard  Web  technology  

Web  Run9me  and  Qt  have  only  limited  use  on  Series  40  

Web

Full HTML browser lets mobile consumers

experience the complete Web

Mobile-optimized sites serve specific needs

and tasks

Widgets offer focused, optimized front-ends to Web-based information

and services

Widgets + Platform Services offer

seamless integration of the Web with personal

context

S60 Internet evolution

• Lightweight mobile applications that give users easy access to the web • The easiest way to bring web-based business to millions of Nokia mobile

devices  Develop WRT widgets using standards-based web technologies (e.g. HTML, CSS,

Javascript, AJAX)   Install and run on Nokia devices like any native application  Provide an optimised web experience accessible with a single click

Application like delivery

Visible in the UI

Familiar HTML, Javascript, and CSS

Definition of widget

Platform services

Widgets and platform services • Framework for abstracting access to a set of services

• Runtime specific bindings and security management

• Access Platform Services through JavaScript

• Example use cases:

• Combine Web-based data with local context to deliver personalized, relevant services

• Save critical Web-based contacts and events locally to create reliable, dependable reminders

Home screen

What is home screen content?

Nokia N97 onwards Dynamic, user configurable content on

home screen Size depending on device

•  Nokia N97: 309x85 pixels End-user controls the home screen layout

•  What content is show •  Layout of the shown content

Note! Some content defined as mandatory by the device

What about home screen widget? Home screen content vs. home screen widget?

•  Widget for developers… •  Content for consumers!

Content can be published by Symbian C++ application or S60 Web Runtime widget

End-user interaction: •  Add / remove home screen content •  Tap content to open widget full screen view

Devices

Nokia widgets compatible devices

http://www.forum.nokia.com/devices/matrix_webruntime_1.html

Towards an excellent UX

Designing widgets – usability guidelines for widgets

How to design the widget so that it can best serve its users?

• Various form factors: • Multiple screen sizes • Support for different input methods and ways to use

(touch, non-touch, QWERTY, ITU-T…) • Home screen, sensors, tactile feedback…

• Find out who will use the widget, what they will use it for, and which mobile devices they have?

•  Analyse user and their tasks: combine data and platform services to provide perfect end-user experience

•  Supported devices? •  Designing for a specific context of use

• More info? See also ’Usability in a mobile application development project’

http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-D4AFE068-97E8-487A-

A79B-CE1422127623.html

Know your users

Design for small screens • Small screen size: only relevant content

•  240 x 320 pixels portrait •  320 x 240 pixels landscape •  360 x 640 pixels portrait •  640 x 360 pixels landscape •  800 x 352 pixels landscape (Nokia E90)

• One or more displays in single device • Use JavaScript to determine the size – relative positions

Design for multiple screen sizes • Relate the position and size of each control to the

dimensions of the display. • Cascading style sheet (CSS) to specify relative

measurements: fonts, margins, images…

.button { width: 116px; height: 37px; background: url(images/button_bg.png) no-repeat; color: #ffffff; font-size: 20px;

.button { width: 80px; height: 25px; background: url(images/small_button_bg.png) no-repeat; color: #ffffff; font-size: 14px;

Design for changing screen orientation

• Support for screen rotation: adapt content to it’s best on portrait and landscape

• Reacting to change: JavaScript ’onresize’ function • Calculate the effective area e.g. from ’window.innerHeight’

Intuitive ways of moving

• You can use different navigation modes on mobile - five way navigation:

• Cursor navigation

• Tab navigation

• Customized navigation

• Avoid scroll and type

• One hand usage

Design for limited input methods • Keypad

• Softkeys (platform or custom) • Navigation on screen (cursor, tab or custom navigation) • Typing (text or numbers) • Selecting items in lists (e.g. HTML ’select’)

• Touch • Checking touch support • Touch areas needs to be big enough: finger usability • JavaScript ’onClick’ handler (e.g. with image buttons) • Tactile feedback

Responsiveness and power management Keep response times short • Latency can cause delays in user interaction: frustrated end-

user • Indicators for progress

Save battery time • Timers • Network connections

S60 WebKit

Native C/C++ “Web Capable”

Web Browser Widgets

UI features

S60 plug-ins, incl. Flash Lite, SVG, and audio.

WebCore KHTML

(LGPL+BSD)

JavaScript Core

KJS

(LGPL)

Browser control API

S60 WebKit

OS adaptations Memory manager

S60 Browser and Web Runtime are based on WebKit

Platform Services Integration

Open source browser engine: WebKit

S60 Browser UI Widget Runtime

More information about Webkit: http://www.webkit.org

Web Runtime S60 Browser engine:

• Comprising core components such as the XML engine, HTML parser, JavaScript engine, CSS processor, rendering engine etc.

Web applications and Widgets as client applications

JavaScript as application programming language

•  Access to Platform Services (Calendar, Location, Media files…)

Hardware

Symbian OS

Platform Libraries and Middleware

Web Tech

Native C/C++

“Web Capable”

Web Browser Widgets

Web Run-Time

S60 WRT widget dissolved

WRT widget ingredients

28

info.plist (mandatory) [name].html (mandatory) icon.png [name].css [name].js

Widget properties

+ HTML

backbone

PNG icon +

CSS layout +

js logic

Root folder!

Defines the structure of the widget.

<html> <head> .. </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>

Views can be constructed with static HTML elements or can be dynamically created by JavaScript at runtime.

HTML

The heart of the widget

... <plist version="1.0">

<dict>

<key>DisplayName</key> <string>AccuWidget</string>

<key>Identifier</key> <string>com.nokia.forum.accuwidget </string>

<key>MainHTML</key> <string>accuwidget.html</string>

<key>AllowNetworkAccess</key> <true /> ...

Info.plist file defines the widget. It is a XML text file providing information about the components and features of this specific widget.

info.plist

Style and layout information

• Defines how to display HTML element: position, color, background color etc.

CSS information can be embedded in the HTML file or imported from an external styleheet

// 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; . . . }

CSS

JavaScript

XMLHttpRequest DOM manipulation

Event handling

UI tweaking UI effects

How do I code then?

Nokia’s WRT 2.2 plugin for Aptana Studio: •  Creation, editing,

testing, and deployment of WRT widgets

www.aptana.com/nokia

Aptana Studio and Nokia WRT plugin

WRT JavaScript extensions – widget object

URL + application launching simple text key storing

show/hide events basic view switch animation

identifier display orientation

widget.openApplication(0x100058F8, ""); widget.openURL("http://www.S60.com");

navigation model

WRT JavaScript extensions - Menu

menu and MenuItem:

Localization support Language directories

CSS display name

resources (e.g. images)

Auto detection for locale Default files in widget package root

strings

Packaging and distribution

Zip the files …rename to .wgz

MIME type x-nokia-widget

Pre-installed WRT widgets

Server:

Communication - AJAX WRT Widgets

single HTML file

Perform operations update UI

maintain UI responsiveness

Async communication facilities needed

XMLHttpRequest XML

JSON text html

HTTP request – how to?

Libraries – easier approach

jQuery

MooTools

Deployment / Testing

Target device

USB Web

SDK Emulator Desktop browser

Bluetooth

Home screen: the implementation

Home screen or full screen?

WRT widget enabled to home screen (HS) implements 2 views •  Home screen view •  Full screen view

HS communicates to widget when end-user interacts with HS •  onload() and onresize() as widget side

interface functions •  JavaScript code to determine current

view size – correct view rendered

Home  screen  view   Full  screen  view  

Creating and designing home screen content

Dynamic content but •  Remove animations, videos etc. •  Use JavaScript timers to refresh

Indicate when refreshed last time Consider handling of error cases Limit the amount of shown data

•  Optimized content improves UX •  Appealing HS content: end-user goes to full

screen view!

Be scalable – use relative values

• Widget needs to know if network available or not: • Hiding nasty ‘cannot access…’ situations from end-user

• Better UX, providing info about the content validity: • Is content up-to-date? • Is widget able to refresh the content at the moment?

• New APIs available (with WRT 7.x): • Observe status changes:

window.ononline!window.onoffline

• Retrieve the current status: window.navigator.onLine

Better UX for widgets – observing network status

function init()!{!window.ononline = accessHandler;!window.onoffline = accessHandler;!...!

function accessHandler()!{!switch (window.navigator.onLine) {! case 0:!! ! noNetwork();! ! break;! case 1:! ! networkAvailable();!...!

• Register handler: window.ononline/window.onoffline!• Use window.navigator.onLine to check the status

How to observe changes?

• API for requesting current network status: window.navigator.onLine!

• Info can be used to e.g. modify the home screen content based on network availability

• Returns Nokia specific values: !window.navigator.NetworkNotAllowed !

!window.navigator.NetworkAccessAllowed !

!window.navigator.NetworkAccessible!

• Enum, can be used with switch – case

NetworkNotAllowed

info.plist!

<key>AllowNetworkAccess</key> !<false/>!

info.plist!

<key>AllowNetworkAccess</key> !<false/>!

NetworkAccessAllowed

info.plist!

<key>AllowNetworkAccess</key> !<false/>!

NetworkAccessible

Network status – what does it mean?

NetworkNotAllowed info.plist!

<key>AllowNetworkAccess</key> !<false/>!

1)

2)

3)

(1 || 2 || 3) == true!

No network connection allowed

info.plist!

<key>AllowNetworkAccess</key> !<true/>!

NetworkAccessAllowed

1)

2)

3)

(1 && 2 && 3) == true!

Access allowed – no active connection

Active Internet connection

info.plist!

<key>AllowNetworkAccess</key> !<true/>!

NetworkAccessible

1)

2)

3)

4)

(1 && 2 && 3 && 4) == true!

Access allowed - active connection established

Platform Services

WRT 1.0 vs. WRT 1.1 • 1.0 offering limited due to security considerations • 1.1 available 5th Edition onwards (also for some 3rd. Ed. devices) • What’s Nokia Platform Services 2.0 then?

• JavaScript API wrapper on top of the WRT 1.1 API: even easier and extended access to platform services

WRT 1.0 – system info for widgets

<embed type="application/x-systeminfo-widget” hidden="yes”>!</embed>!

HTML:

JavaScript:

WRT 1.1 – comprehensive set of APIs

http://library.forum.nokia.com/topic/Web_Developers_Library/ GUID-46EABDC1-37CB-412A-ACAD-1A1A9466BB68.html

Best of both worlds WRT+Qt

Our vision: Web into any application Web Runtime widget Web browser

Widget + platform services Native application

Open source WebKit is the

foundation and common

engine

Now Now

Now Next

Interact with Web Services QtWebKit allows

•  Intuitive use of network resources • Exposing QWidget to HTML and QObject to

JavaScript • Calling JavaScript from C++

Based on the Open Source WebKit engine:

www.webkit.org

QWebView and QWebPage classes QWebView inherited from QWidget

•  Renders the content in QWebPage •  Easy to embed wherever widget could be used

QWebPage provides access to the document structure in a page

•  Frames •  Navigation history •  Undo/redo stack for editable content

Each QWebpage has one QWebFrame object as its main frame HTML documents can be nested using frames

QWebView

QWebPage

QWebFrame

QWebView *view = new QWebView( parent ); view->load(QUrl(“http://www.nokia.com”)); view->show();

Hybrid - combining the best of both worlds So you can run JS and HTML inside Qt application… What are the differences compared to a WRT widget?

WRT Widget running on top of webkit

Webkit

Widgets HTML, CSS, JavaScript

Platform Services

Native APIs Platform Services

implementation

Qt application

QWebView running webkit

Same HTML, CSS, JavaScript

Native APIs incl. Qt Mobility APIs

“Platform Services”

implementation

Webview demo Pure JS content run on top of Webkit Demonstrates different applications & look and feel

•  In the demo there’s BBC News, games like Rock-Paper-Scissors and Tic-Tac-Toe, Calculator and Bubble

•  Anything from web can be pulled to the hybrd container

Statistics: •  300 lines of C++ code (flick support ~200 lines) •  Size of .sis file: 20 kB

•  Development time: approx. 5 hours

Qt C++ Hybrid Application

HTML, CSS, JavaScript

Browser/ Standalone Web runtime Application *)

Services written in Qt C++, Declarative UI, Access to Qt

62

Examples and exercises