workshop fo wa

Mobile Widgets1v0.122 September 2009

Mobile Widgets

Presented by Jochen Cichon @dh1jc

30 September 2009


Contents

1. Mobile Applications

2. Features

3. View Modes

4. Resize

5. Layout

6. Failsafe


Mobile Applications 1/3

Classic Mobile Applications

• Programming Language C++; Java; C#

• Pro– Performance– Device Api's– Security Model

• Con– Low (No) portability– High learning curve– Layout (complicated)



Browser “Applications”

• Programming Language Javascript; HTML; SVG; WML

• Pro– Web technology– Low learning curve– Device API's– Easy to Layout

• Con– No device API's– Performance– No offline content– Security Model (Server side)– Connection / latency



Mobile Widgets

• Programming Language Javascript; HTML; SVG; ZIP

• Pro– Web technology– Low learning curve– Portable– Easy to Layout– Offine content store– One Package

• Con– No device API's (yet)– Performance (yet)– Security Model (yet)


Features

• One Package for installation

• Multiple instances of a widget

• Different view modes e.g. active icon

• Web Technologies– HTML; CSS2/3; Javascript; Media Queries– SVG; Canvas; image formats (png, jpg, gif)– XSLT; DOM3

• Cross domain xmlHttpRequests

• Content store (content / credentials...)

• Cross Platform (Linux, Windows, Mac, S60 mobiles, LiMo, ...)


View Modes

• Icon (not a real mode)

• Active Icon / Docked mode

• Extended / Floating mode

• Widget mode

• Application mode

W3C not yet final with mode specicificationhttp://dev.w3.org/2006/waf/widgets-wm/Overview.src.html


View Modes in Detail 1/3

Example Icon vs. Active Icon (Docked)

• Limited size

• Content updateable

• No interactionIcon Mode Docked Mode



Example Active Icon vs. Extended / Floating Mode

• Greater size than icon / docked mode

• Content updateable

• No interactionFloating ModeDocked Mode



Example Application / Widget Mode

• Chrome / Non-Chrome

• Default actions (minimize, close) / self made actions

Widget ModeApplication Mode


View Modes Coding 1/3

JS Code example

function myMode() { if (widget.widgetMode === “docked”) { … // e.g. set update interval to different value }}// Register the EventListenerwidget.addEventListener(“widgetmodechange”, myMode, false);



Media Queries

<div id=”dockedView”> … </div><div id=”widgetView”> … </div>

#dockedView { display: none; }@media all and (-o-widget-mode:docked) { #dockedView { display: block } #widgetView { display: none } }



Media Queries

<img id=”closeButton” src=”img/close.png”/>

#closeButton{ display: none }@media all and (-o-widget-mode:widget) { #closeButton { display: block } }


Resize

Why to resize?

• Different view modes

• Different screen sizes on mobiles (width/height)

• Portrait / Landscape (maybe in different modes)

Do the math yourself...


Resize

JS Resize

function myResize () { if (widget.widgetMode !== “widget”) window.resizeTo(screen.availWidth, screen.availHeight);}

// register ResolutionChange Eventwidget.addEventListener(“resolution”, myResize, false);

// call initially myResize();


Layout

Trouble in detail

• DPI Values– Screen reports 96dpi (which is mostly wrong!)– Handsets with same screen dimensions have different dpi values

• Nokia N96, 2.8inch display 240x320 = 142ppi• Nokia 5800 music, 3.2inch display 640x360 = 229 ppi

• Fonts may become unreadable

• Touch buttons are maybe too small / large


Layout

Fonts

• Use media queries to set base font sizebody { font-size: 16px }@media all and (min-resolution: 200dpi) { body { font-size: 22px }}

• reference base font size

#header { font-size: 1.2em }div { font-size: .8em }


Layout

Images

• You don't want to scale up– Even downscaling may look bad

• Use appropriate image format (jpg, png, gif, svg)

• Use SVG e.g. for Logo / Splash screen– If possible (svg restriction based on renderer)

• When you don't know your image

img { max-width: 95%;}


Layout

UI-Elements

• UI-Elements are often made of images

• Suddenly 100px very small on high ppi-displays– Use absolute size e.g. “ 1cm “ for button on touch devices

#closeButton { width: 64px }@media all and (-o-touch) { #closeButton { width: 1cm } }• Adapt to different ppi with different images


Layout

UI-Elements

• Use SVG and stay scalable– Remember to have a fallback pixel-image

<object type=”image/svg+xml” data=”busy.svg”> <img src=”fallback-busy.png”/></object>• Don't forget that an “onClick” is given to the underlying SVG!


Failsafe

• Use try - catch blocks

try { ...} catch (err) { // React on error widget.showNotification (“Can't update content”);}• use timeout for XHR requests


Thank you

workshop fo wa

Technology

mobile applications2

mode floating mode

view modes icon

widget different view

interaction icon mode

mode content updateable

view modes coding

real mode active icon