WRT Widgets Masterclass - OverTheAir

Widgets master class ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://groups.google.com/group/overtheair-nokia-widgets-master-class

Material ,[object Object],[object Object],[object Object],[object Object],[object Object]

Petro Soininen WRT Widgets Dismantled

WRT Widgets Dismantled ,[object Object],OK… What can I do … and How? I understand the basics. Where can I get more info? and

S60 WRT ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Symbian OS Nokia UI features S60 plug-ins, incl. Flash Lite, SVG, and audio. Symbian HTTP framework Netscape plug-in API (NPL) WebCore KHTML JavaScript Core KJS Browser Control S60 WebKit OS adaptations Memory manager S60 WRT S60 Browser UI WRT Web pages/apps Widgets SAPI Extensions via SAPI Framework Extensions via Netscape plug-in

Web Run-Time - Current Goal ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],S60 3 rd Edition Feature Pack 2

What to look for in the next phase? ,[object Object],[object Object],[object Object],[object Object],[object Object]

WRT Widget component structure ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Widget properties + HTML backbone PNG icon + CSS layout + js logic

Widget Installation Package ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Info.plist – widget properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML – The Backbone ,[object Object],<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> Use the <div> (block-level) element to construct the widget’s views . Views can be constructed with static HTML elements or can be dynamically created by JavaScript at runtime.

CSS – Makeup for a Widget ,[object Object],[object Object],[object Object],// 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; . . . }

JavaScript – The logic ,[object Object],[object Object],[object Object],[object Object],// define some global variable var globalVariable = 0; // function multiply(xValue, yValue){ return xValue * yValue; } // create a new element with DOM function var newElement = document.createElement (‘div’); newElement. setAttribute (‘id’, ‘extraView’); // show/hide views function changeView(activeViewId, hiddenViewId){ var activeView = document.getElementById ( activeViewId); activeView.style.display = ‘block’; . . . } ,[object Object],[object Object],[object Object]

[object Object],[object Object],Nokia widget-specific JavaScript APIs for: Widget properties Utility functions Menu handling System info and services

Widget Object ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],var h = window.screen.height; var w = window.screen.width; if (h < w) widget.setDisplayLanscape();

Menus ,[object Object],[object Object],function createMenu { var settings = new MenuItem ( ‘ Settings’, 10); settings.onSelect = showSettings; window.menu.append (settings); opMenu. setRightSoftKeyLabel ( ‘ Back’, toMainView); } function showSettings(id) { document.getElementById( ‘ setting’).style.display = ‘block’; }

System Info Service API ,[object Object],[object Object],[object Object],[object Object],[object Object],<embed type="application/x-systeminfo-widget" hidden="yes"></embed>

System Info Service API Properties and callback requests Charger Lights Power Network Beep tones Memory Vibra File System Charger Language

WRT widget development ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tools and documentation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

WRTKit ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ok, this should be enough for now Let’s check how to do it in practice

WRT Widgets Masterclass - OverTheAir

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to WRT Widgets Masterclass - OverTheAir

Similar to WRT Widgets Masterclass - OverTheAir (20)

Recently uploaded

Recently uploaded (20)

WRT Widgets Masterclass - OverTheAir