Developer Bootcamp London, January 13 2010

1This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Web RuntimeRapid mobile apps with HTML, CSS & JavaScript

Ivan LitovskiSymbian Foundation

Introductions

Me Ivan Litovski, Technical Communications, Symbian Foundation With Symbian since 2002 Java, System Libraries, Persistent Data Services, Tools, Base Upcoming book: Inside Symbian SQL

You Do you know HTML? CSS? JavaScript? Other programming languages? Have you coded a Widget?

3This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Mobile Apps – A money making scheme

Smaller upfront investmentVery large market – hundreds of

millions of phonesClear sales channel

4

0

5

10

15

20

25

Mobile Apps market

2009

2011

2014

Source: GoogleSize of the Mobile Applications Market (US$BLN)

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

App Stores Symbian (mostly)

Horizon Ovi (>80M users, >640M downloads) Sony Ericsson PlayNow arena Samsung Apps

Operator stores: Orange, others... Independent

Getjar Handango

iTunes Android market BlackBerry App World Microsoft and Sun are entering the game in 2010

5This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Widgets

6This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Widgets in a Nutshell

Offline capable mobile applicationsInstall as regular applicationsApp icon in phone menuNo signing necessary

Everybody loves WidgetsFrameworks: Nokia Web Runtime, Bondi, JIL,

Phonegap, WebClip

7This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Pros & Cons

8

•Well known technologies•Good tools, libraries, IDEs•Few sandboxes / browser environments•Easy porting

•Not for all apps•Not native•Lacking features•Performance

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Why Widgets? Rendering appropriate for device Ability to run off-line Access phone features and persist settings

9This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Nokia WRT Widgets

All OS components available under EPL!HTML, CSS, JavaScript, AJAXBasic platform APIs: menu, widget, devicePlatform services: Location, App manager,

Contacts, Calendar etc.

10This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Web Runtime Architecture

11This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Source: Forum NokiaCopyright: Nokia

Nokia WRT Widgets – Part 2

Standards: HTML 4.01 XHTML mobile profile CSS 2.1 JavaScript 1.5 Ajax : XML, XHTML/HTML, CSS, DOM, XMLHttpRequest

Availability: All S60 3rd Edition FP2 and later phones Samsung S60 3rd Edition FP1 Nokia S60 3rd Edition FP1 phones with latest firmware

update

12This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Nokia WRT Widgets - API features AppManager API Calendar API Contacts API Landmarks API Location API Logging API Media Management API Messaging API Sensors API System Information API (WRT 1.1) System Information API (WRT 1.0)

13This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Security

Widgets do not need to be signed.

All widgets are UNTRUSTED for access to Platform Services Prompting for access to network and user data

14This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Tools & Libraries Development tools

Aptana Studio, Firefox, Firebug Visual Studio Dreamweaver

Third party, general purpose libraries : jQuery EXT JS Mootools YUI

UI libraries: All of the above Guarana WRTKit

15This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

My FirstWidget

16This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Dirty hands: Hello, hello

17

Code

Hello World

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Create a Widget in four steps1. Create info.plist file

C:\MyWidget Info.plist

3. Add icon C:\MyWidget

Info.plist index.html icon.png

18

2. Create html file – name should be defined in MainHTML tag in info.plist C:\MyWidget

Info.plist index.html

4. Add style and script C:\MyWidget

Info.plist index.html icon.png app.css app.js

Only one HTML allowed

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Package and deploy1. Zip up the directory

C:\MyWidget Info.plist index.html icon.png app.css app.js

Rename to WGZ

Transfer to device & install Web installation MIME type: application/x-nokia-widget

19

MyWidget.zip

MyWidget.zip MyWidget.wgz

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Running Widgets

IDEAptana previewFirefox / Firebug Debugging

Emulator\epoc32\winscw\c\Data\Installs

On deviceTransfer via USB, bluetooth, memory card,

web...

20This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:

21

JavaScript

21This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

JavaScript Basics – Part 1 Variables

Functions

Types: Undefined, Null Boolean, Number, String, Object typeof operator

Built in classes Array, Date, Math, String, RegExp...

22This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

JavaScript Basics – Part 2: DOM Document object model

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:

23

JavaScript Basics – Part 3 DOM classes

Document, Event, Style Button, Image, Input, Form, Select

Built in objects window, document, screen ...

24This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

JavaScript Basics – Part 4 User defined classes – OO programming with JavaScript

25This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:

2626This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

ScriptingWRT

WRT Objects

Built in objects – in addition to standard browser objectswidget / window.widget objectmenu / window.menu object and MenuItem

classdevice object

27This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

CodeWidget Object widget object methods:

openURL()

setPreferenceForKey()

preferenceForKey()

prepareForTransition()

performTransition()

setNavigationEnabled()

setNavigationType()

openApplication()

setDisplayLandscape()

setDisplayPortrait()

widget object properties: identifier

onshow

onhide

isrotationsupported

28This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Menu object menu object methods:

append()

remove()

getMenuItemById()

getMenuItemByName()

setLeftSoftkeyLebel()

setRightSoftkeyLebel()

showSoftkeys()

hideSoftkeys()

clear()

menu object property: onShow

29

Code

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Device object (WRT 1.1) device object methods:

getServiceObject()

30This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:

31This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:

3131This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

WRTSnippets

CodeHandling events Bubbling: up/down event propagation – complex but rarely a problem Pointer events

Can be attached to HTML DOM elements via HTML JavaScript

Key events Watch out for widget.setNavigationEnabled();

32This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Threads? What threads?

JavaScript is single threaded Use setTimeout and setInterval Use incremental execution

33

Code

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

AJAX Network Service Interactions For loading:

XML Text

Load files from: Network From WGZ archive

34

Code

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Screen size, orientation, modes Snippet to determine touch/keypad, orientation,

miniview No built-in API - this is a bit hacky but works! Home screen widgets fixed size: 91 x 315

35

Code

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

UI Libraries: WRTKit Skinnable JavaScript UI classes

ListView (only available container) TextField, Label, ContentPanel, NavigationButton...

Not in development, apparently...

36

Code

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

UI Libraries: Guarana

37

http://wiki.forum.nokia.com/index.php/GuaranaUI-Overview

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Guarana - example

38

Code

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Obtain service object

Use it

Using Service Objects

39

Code

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Using Flash in Widgets Flash ActionScript

JavaScript

http://wiki.forum.nokia.com/index.php/Communicating_with_Flash_Lite_from_JavaScript_in_a_widget_%28WRT%29

40This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Platform integration efforts

Mobile Web Server (MWS) AJAX calls from the widget Python server extensions Installation woes – SIS, signing etc.

API Bridge JavaScript API Symbian server exposing HTTP interface Features:

File I/O Basic image manipulation Location

Installation woes – SIS, signing etc.

41This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Performance tips Resources:

Reset objects (null) as soon as they are not needed Create DOM elements dynamically and remove them as soon as they

are not needed Minimise activity while widget is in background

Performance Minify your JS – smaller script, shorter variable names Narrower scope means faster access ...

Many more here: http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices

42This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Resources Bootcamp USB Stick Symbian developer wiki:

http://developer.symbian.org/wiki Symbian Horizon

http://horizon.symbian.org/ Nokia Web Developer’s library

http://library.forum.nokia.com/ Samsung developer web site

http://innovator.samsungmobile.com/ Sony Ericsson developer web site

http://developer.sonyericsson.com/ Forum Nokia Wiki

http://wiki.forum.nokia.com/

43This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:

44This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:

4444This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License

Questions?

This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:

45

Thank you