WRT Introduction P11 2009

Company Confidential

WIDGETS FOR THE S60 PLATFORMAllan BezerraPesquisador Senior

Internet & Services Platform – INdT/Forum Nokia

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials1

Nokia – Uma empresa de Internet

2

tenCube

Internet Lab – Instituto Nokia de Tecnologia• Criado em Fevereiro de 2009, antigo Mobile Software Group-MSG

3

Conceitos Entregues

4

LTA

2009H2

India

US

Brazil

More 5 coming..

2009H1

INTRODUCTION

5

WRT Widget Definition

6

• Standalone Web applications running without a browser application;

• Behaviour defined using JavaScript™–no compilation or linking needed;

• Consists of a few files defining appearance (icon), layout, and behavior;

• Accesses a URL like a normal Web application to get data from the Web serve;

S60 Web Runtime

• A library providing APIs for widget developers• Menu creation

• URL access

• Data download from URL

• Access to some device properties

• Access to several S60 Platform Services (since WRT 1.1)

• Based on open-source Web technologies

• Empowered by Web Browser for S60

• Several widgets can be executed at the same time

• Due to physical limitations of the screen, only a single widget is on the foreground

7

WRT versions and device support

• WRT 1.0• Introduced in S60 3rd Edition, Feature Pack 2 SDK

• Available as an update to selected S60 3rd Edition, Feature Pack1 devices

• WRT 1.1• Introduced in S60 5th Edition SDK

• Adds support for S60 Platform Services through JavaScript Service APIs

• Widgets created for WRT 1.0 run normally with WRT 1.1

8

Devices

S60 3rd Edition FP 2 S60 5th Edition

N975800N96E55

S60 3rd Edition FP 1

N95-8G

http://www.forum.nokia.com/devices/<device_name>

WIDGET PROGRAMMING BASICS

10

Widget building blocks

© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials11

Deployment

• At least two mandatory files (manifest and main HTML files) are required

• Files are packed into a .zip package

• The package extension is changed to .wgz

• The package is transferred to the device with some of the following methods

• Bluetooth, e-mail, or other communication method

• USB cable or memory card

• Web Browser for S60

• By double-clicking it on PC after connecting the device with PC Suite

12© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials

Config file

• Named as info.plist

• XML containing widget property and configuration information

• Manifest file properties:

13

Example info.plist

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE plistPUBLIC "-//Nokia//DTD PLIST 1.0//EN" "http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd">

<plistversion="1.0">

<dict>

<key>DisplayName</key>

<string>MyWidget</string>

<key>Identifier</key>

<string>com.nokia.forum.widget.mywidget</string>

<key>MainHTML</key>

<string>mywidget.html</string>

</dict>

</plist>

14

Main HTML file

• There Name must match the name defined in info.plist properties

• Contains information for structuring a widget

• Define the document inside <html> tags

• External style and code files are referenced inside <style> and <script> tags in the head part of the HTML file

• Body part defines widget’s UI structure

15

Main HTML file example

<!DOCTYPE html>

<html>

<head>

<link rel="StyleSheet" href="styles/general.css" type="text/css" />

<script type="text/javascript" src="scripts/mywidget.js" />

<title>My widget</title>

</head>

<body>

</body>

</html>

16

Widget UI structure

• Define inside HTML <body> tag

• Some useful structures

• Headings <h1>, <h2>

• Views <div id=“View1”>

• Labels <label>

• Input text <input type=“text”>

• Input button <input type=“button”>

• Paragraph text <p>

• Images <img>

• List items <li>

• Tags may be empty and dynamically generated in JavaScript programming language

• <img id=“image”src=“”/>

• Tags may be associated with JavaScript functions• <li onclick=“excuteFunction();”>label</li>

17

Example UI structure<html>

<head>

<script type="text/javascript">

function myfunc() {

var p = document.getElementById("personList");

var li = document.createElement('li');

li.innerHTML = document.getElementById("inputX").value;

p.appendChild(li);

}

</script>

</head>

<body>

<h1>My widget</h1>

<div id="bodyContent">

<p><b>Some paragraph text</b></p>

<label for="inputX">Enter your name:</label>

<input type="text" id="inputX" size="10"></input>

<input type="button" name="check" value="Check" onClick=myfunc()></input>

<ul id="personList">

<li>Allan</li>

</ul>

</div>

</body>

</html>

18

CSS files

• Web Without proper style and layout, widget looks quite boring

• Controls style and layout of widget contents

• Recommended: Keep the style information separated from the markup elements (recommendation)

• If CSS file is not provided, style information can be embedded within the HTML file

• Define the style for UI component• Body background image

• Heading text font, alignment, colour

• List style

• Visibility (for example, in case of several views, all other except the default view are hidden)

• Set display property to none

19

Example CSS file

<style type="text/css" media="screen">

body {

background: #0075FF;

}

h1 {

font-size: 20px;

text-align: center;

color: rgb(255, 204, 0);

}

p {

border-bottom: 2px solid white;

}

#bodyContent{

font-size: 18px;

color: white;

}

</style>

20

UI in mobile devices

• Screen sizes are smaller than those available on desktop devices

• Screen sizes vary between devices• Prefer relative units in CSS to specify the characteristics of screen

elements

• Some devices support screen rotation

• Some devices are touch-enabled• Widget can have different CSS files for touch and non-touch devices

• UI for touch interaction can provide clickable HTML elements large enough to select with a finger

21

DOM – Document Object Model

22

http://www.aharef.info/static/htmlgraph/?url=http://www.indt.org.br

DOM – Document Object Model

• Allows dynamic access of HTML document objects in JavaScript

• Object properties such as visibility (display) can be changed

• Objects are identified by using IDs given in the HTML file

• Get access to an object

document.getElementById(“bodyContent”)

• Change style properties (visibility in this case)

document.getElementById(“bodyContent”).style.display= “none”;

• Define image file dynamically

document.getElementById(“image”).setAttribute('src', “image1.jpg”);

23

JavaScript

• External Implements widget behaviour• UI interactions

• Communication functionality (URL access, etc.)

• Dynamic construction of UI elements

• JavaScript functions are associated with tags

• Functions are assigned with certain attributes (for example, onClick) causing the function to be called

<input type="button" name="check" value="Check" onClick=myfunc()></input>

• When the button is clicked, myfunc() function will be called.

• Based on the function result, DOM may be used to change HTML object properties

24

Icons

• Widget may have an icon in the Application Menu and any other icons needed

• Application icon is named as icon.png

• Recommended size for application icon is 88x88 pixels

• Icon must be a PNG (Portable Networking Graphics) format

• Application icon is not needed, in which case the widget icon is a default S60 application icon

25

DEVELOPMENT TOOLS

26

Tools and emulator

• Widget development does not require any special development or build tools

• Widget files can be edited with any text editor

• Nokia S60 3rd Edition FP2 and S60 5th Edition SDK emulator support WRT

• Download the SDK from www.forum.nokia.com

• Unzip the package

• Run setup.exe

27© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials

Aptana WRT-Plugin

28

Deployment process in the S60 emulator• Package widget source code files to a .zip file

• Change the file name extension to .wgz

• Run the emulator

• Open the package file from emulator’s File>Open

29

Summary

• Widgets are Web applications running without a browser application

• Development is fast and relatively easy, because no compilation or linking is needed

• Developer must know at least the basics of XML, HTML, JavaScript, DOM, and CSS

• Widgets allows you to easily develop and deploy nice-looking applications

30

HTML Component

NOKIA UI FRAMEWORK – ExampleCSS Dependencies

JS Dependencies

Component Create

<html>

<head>

<link rel="stylesheet" href="../themes/nokia/base.css" type="text/css" media="screen">

<link rel="stylesheet" href="../themes/nokia/rating.css" type="text/css" media="screen">

<link rel="stylesheet" href="../themes/custom-theme/ui.all.css" type="text/css" media="screen">

<script src="../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

<script src="../src/core.js" type="text/javascript" charset="utf-8"></script>

<script src="../src/dom.js" type="text/javascript" charset="utf-8"></script>

<script src="../src/util.js" type="text/javascript" charset="utf-8"></script>

<script src="../src/widget.js" type="text/javascript" charset="utf-8"></script>

<script src="../src/rating.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<embed type="application/x-systeminfo-widget" hidden="yes" style="position:absolute;top:-1000px;"></embed>

<div id="rating01"></div>

<script type="text/javascript" charset="utf-8">

window.onload = function() {

window.rating1 = new Nokia.Rating({

element: '#rating01',

value: 2,

create: function() {

console.log("Rating: create.");

},

change: function(value) {

console.log("Rating: change - " + value);

}

});

};

</script>

</body>

</html>

Nokia UI FRAMEWORK

WRT Introduction P11 2009

Technology

Transcript of WRT Introduction P11 2009