Post on 19-May-2015
description
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