Embed Size (px)
Citation preview
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
