Developer Bootcamp

London, January 13 2010

This work is licensed under the Creative Commons

1
Attribution-Share Alike 2.0 UK: England & Wales License
Web Runtime
Rapid mobile apps with HTML, CSS &
JavaScript

Ivan Litovski
Symbian 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?

This work is licensed under the Creative Commons

3
Attribution-Share Alike 2.0 UK: England & Wales License
Mobile Apps – A money making scheme

 Smaller upfront investment

 Very large market – hundreds of
millions of phones
 Clear sales channel

25
20 2009
15 2011
10 2014
5
0
Mobile
Size of the Mobile Apps market
Applications Market (US$BLN) Source: Google

This work is licensed under the Creative Commons

4
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

This work is licensed under the Creative Commons

5
Attribution-Share Alike 2.0 UK: England & Wales License
 Widgets

This work is licensed under the Creative Commons

6
Attribution-Share Alike 2.0 UK: England & Wales License
Widgets in a Nutshell

 Offline capable mobile applications

 Install as regular applications
 App icon in phone menu
 No signing necessary

 Everybody loves Widgets

 Frameworks: Nokia Web Runtime, Bondi, JIL,
Phonegap, WebClip
This work is licensed under the Creative Commons
7
Attribution-Share Alike 2.0 UK: England & Wales License
Pros & Cons


•Well known •Not for all apps

technologies •Not native
•Good tools, libraries, •Lacking features
IDEs •Performance
•Few sandboxes /
browser environments
•Easy porting

This work is licensed under the Creative Commons

8
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

This work is licensed under the Creative Commons

9
Attribution-Share Alike 2.0 UK: England & Wales License
Nokia WRT Widgets

 AllOS components available under EPL!

 HTML, CSS, JavaScript, AJAX
 Basic platform APIs: menu, widget, device
 Platform services: Location, App manager,
Contacts, Calendar etc.

This work is licensed under the Creative Commons

10
Attribution-Share Alike 2.0 UK: England & Wales License
Web Runtime Architecture

Source: Forum Nokia

Copyright: Nokia

This work is licensed under the Creative Commons

11
Attribution-Share Alike 2.0 UK: England & Wales License
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

This work is licensed under the Creative Commons

12
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)

This work is licensed under the Creative Commons

13
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

This work is licensed under the Creative Commons

14
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

This work is licensed under the Creative Commons

15
Attribution-Share Alike 2.0 UK: England & Wales License
 My First
Widget

This work is licensed under the Creative Commons

16
Attribution-Share Alike 2.0 UK: England & Wales License
Dirty hands: Hello, hello Code

Hello World

This work is licensed under the Creative Commons

17
Attribution-Share Alike 2.0 UK: England & Wales License
Create a Widget in four steps
1. Create info.plist file
 C:\MyWidget 2. Create html file – name should
 Info.plist be defined in MainHTML tag in
info.plist
Only one HTML
 C:\MyWidget
allowed
 Info.plist
 index.html
3. Add icon
 C:\MyWidget
 Info.plist
 index.html 4. Add style and script
 icon.png  C:\MyWidget
 Info.plist
 index.html
 icon.png
 app.css
 app.js

This work is licensed under the Creative Commons

18
Attribution-Share Alike 2.0 UK: England & Wales License
Package and deploy
1. Zip up the directory
 C:\MyWidget
 Info.plist
 index.html MyWidget.zip
 icon.png
 app.css
 app.js

 Rename to WGZ

MyWidget.zip MyWidget.wgz

 Transfer to device & install

 Web installation MIME type: application/x-nokia-widget

This work is licensed under the Creative Commons

19
Attribution-Share Alike 2.0 UK: England & Wales License
Running Widgets

 IDE
 Aptana preview
 Firefox / Firebug Debugging
 Emulator
 \epoc32\winscw\c\Data\Installs
 On device
 Transfer via USB, bluetooth, memory card,
web...

This work is licensed under the Creative Commons

20
Attribution-Share Alike 2.0 UK: England & Wales License
 JavaScript

This work is licensed under the Creative Commons

This work is licensed under the Creative 21
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...

This work is licensed under the Creative Commons

22
Attribution-Share Alike 2.0 UK: England & Wales License
JavaScript Basics – Part 2: DOM
 Document object model

This work is licensed under the Creative 23

JavaScript Basics – Part 3
 DOM classes
 Document, Event, Style
 Button, Image, Input, Form, Select

 Built in objects
 window, document, screen ...

This work is licensed under the Creative Commons

24
Attribution-Share Alike 2.0 UK: England & Wales License
JavaScript Basics – Part 4
 User defined classes – OO programming with JavaScript

This work is licensed under the Creative Commons

25
Attribution-Share Alike 2.0 UK: England & Wales License
 Scripting
WRT

This work is licensed under the Creative Commons

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

 Built in objects – in addition to standard browser

objects
 widget / window.widget object
 menu / window.menu object and MenuItem
class
 device object

This work is licensed under the Creative Commons

27
Attribution-Share Alike 2.0 UK: England & Wales License
Widget Object Code

 widget object methods:

 openURL()
 setPreferenceForKey()
 preferenceForKey()
 prepareForTransition()
 performTransition()
 setNavigationEnabled()
 setNavigationType()
 openApplication()
 setDisplayLandscape()
 setDisplayPortrait()

 widget object properties:

 identifier
 onshow
 onhide
 isrotationsupported

This work is licensed under the Creative Commons

28
Attribution-Share Alike 2.0 UK: England & Wales License
Menu object Code

 menu object methods:

 append()
 remove()
 getMenuItemById()
 getMenuItemByName()
 setLeftSoftkeyLebel()
 setRightSoftkeyLebel()
 showSoftkeys()
 hideSoftkeys()
 clear()

 menu object property:

 onShow

This work is licensed under the Creative Commons

29
Attribution-Share Alike 2.0 UK: England & Wales License
Device object (WRT 1.1)
 device object methods:
 getServiceObject()

This work is licensed under the Creative Commons

30
Attribution-Share Alike 2.0 UK: England & Wales License
 WRT
Snippets

This work is licensed under the Creative Commons

This work is licensed under the Creative 31
Attribution-Share Alike 2.0 UK: England & Wales License
Handling events Code

 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();

This work is licensed under the Creative Commons

32
Attribution-Share Alike 2.0 UK: England & Wales License
Threads? What threads? Code

 JavaScript is single threaded

 Use setTimeout and setInterval
 Use incremental execution

This work is licensed under the Creative Commons

33
Attribution-Share Alike 2.0 UK: England & Wales License
AJAX Code
Network Service Interactions
 For loading:
 XML
 Text

 Load files from:

 Network
 From WGZ archive

This work is licensed under the Creative Commons

34
Attribution-Share Alike 2.0 UK: England & Wales License
Screen size, orientation, modes Code

 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

This work is licensed under the Creative Commons

35
Attribution-Share Alike 2.0 UK: England & Wales License
UI Libraries: WRTKit Code

 Skinnable JavaScript UI classes

 ListView (only available container)
 TextField, Label, ContentPanel, NavigationButton...
 Not in development, apparently...

This work is licensed under the Creative Commons

36
Attribution-Share Alike 2.0 UK: England & Wales License
UI Libraries: Guarana

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

This work is licensed under the Creative Commons

37
Attribution-Share Alike 2.0 UK: England & Wales License
Guarana - example Code

This work is licensed under the Creative Commons

38
Attribution-Share Alike 2.0 UK: England & Wales License
Using Service Objects Code

 Obtain service object

 Use it

This work is licensed under the Creative Commons

39
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_JavaS
cript_in_a_widget_%28WRT%29

This work is licensed under the Creative Commons

40
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.

This work is licensed under the Creative Commons

41
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

This work is licensed under the Creative Commons

42
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/

This work is licensed under the Creative Commons

43
Attribution-Share Alike 2.0 UK: England & Wales License
 Questions?

This work is licensed under the Creative Commons

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

This work is licensed under the Creative 45