web run time bootcamp 20100113
DESCRIPTION
Bootcamp presentation January 2009. Web runtime: Rapid mobile apps with HTML, CSS & JavaScriptTRANSCRIPT
![Page 1: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/1.jpg)
Developer Bootcamp London, January 13 2010
1This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License
![Page 2: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/2.jpg)
Web RuntimeRapid mobile apps with HTML, CSS & JavaScript
Ivan LitovskiSymbian Foundation
![Page 3: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/3.jpg)
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
![Page 4: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/4.jpg)
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
![Page 5: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/5.jpg)
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
![Page 6: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/6.jpg)
Widgets
6This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License
![Page 7: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/7.jpg)
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
![Page 8: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/8.jpg)
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
![Page 9: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/9.jpg)
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
![Page 10: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/10.jpg)
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
![Page 11: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/11.jpg)
Web Runtime Architecture
11This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License
Source: Forum NokiaCopyright: Nokia
![Page 12: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/12.jpg)
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
![Page 13: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/13.jpg)
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
![Page 14: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/14.jpg)
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
![Page 15: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/15.jpg)
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
![Page 16: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/16.jpg)
My FirstWidget
16This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License
![Page 17: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/17.jpg)
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
![Page 18: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/18.jpg)
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
![Page 19: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/19.jpg)
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
![Page 20: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/20.jpg)
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
![Page 21: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/21.jpg)
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
![Page 22: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/22.jpg)
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
![Page 23: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/23.jpg)
JavaScript Basics – Part 2: DOM Document object model
This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:
23
![Page 24: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/24.jpg)
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
![Page 25: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/25.jpg)
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
![Page 26: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/26.jpg)
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
![Page 27: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/27.jpg)
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
![Page 28: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/28.jpg)
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
![Page 29: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/29.jpg)
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
![Page 30: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/30.jpg)
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
![Page 31: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/31.jpg)
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
![Page 32: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/32.jpg)
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
![Page 33: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/33.jpg)
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
![Page 34: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/34.jpg)
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
![Page 35: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/35.jpg)
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
![Page 36: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/36.jpg)
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
![Page 37: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/37.jpg)
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
![Page 38: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/38.jpg)
Guarana - example
38
Code
This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License
![Page 39: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/39.jpg)
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
![Page 40: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/40.jpg)
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
![Page 41: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/41.jpg)
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
![Page 42: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/42.jpg)
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
![Page 43: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/43.jpg)
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
![Page 44: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/44.jpg)
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?
![Page 45: Web Run Time Bootcamp 20100113](https://reader034.vdocuments.mx/reader034/viewer/2022051609/546b63a4af795985298b4b97/html5/thumbnails/45.jpg)
This work is licensed under the Creative Commons Attribution-Share Alike 2.0 UK:
45
Thank you