treinamento s60 wrt - ceteli ufam indt
DESCRIPTION
Apresentação do Treinamento em S60 WRT para bolsista do projeto CETELI_UFAM-INDTTRANSCRIPT
WIDGETS FOR THE S60
PLATFORM
Company Confidential
Allan Bezerra
Andre Pedralho
Service Experience– INdT
© 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
INTRODUCTION
4
WRT Widget Definition
• 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;
5
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• 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
6
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 • Widgets created for WRT 1.0 run normally with WRT 1.1
7
Devices
N975800N96E55N95-8G
S60 3rd Edition FP 2 S60 5th EditionS60 3rd Edition FP 1
http://www.forum.nokia.com/devices/<device_name>
WIDGET PROGRAMMING BASICS
9
Widget building blocks
© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials10
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• USB cable or memory card
• Web Browser for S60
• By double-clicking it on PC after connecting the device with PC Suite
11© 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:
12
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.dt d">
<plistversion="1.0">
<dict>
<key>DisplayName</key>
<string>MyWidget</string><string>MyWidget</string>
<key>Identifier</key>
<string>com.nokia.forum.widget.mywidget</string>
<key>MainHTML</key>
<string>mywidget.html</string>
</dict>
</plist>
13
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
14
Main HTML file example
<!DOCTYPE html>
<html>
<head>
<link rel="StyleSheet" href="styles/general.css" ty pe="text/css" />
<script type="text/javascript" src="scripts/mywidge t.js" />
<title>My widget</title>
</head>
<body>
</body></body>
</html>
15
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>• 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>
16
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>
17
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• 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
18
Example CSS file
<style type="text/css" media="screen">
body {
background: #0075FF; !important
}
h1 {
font-size: 20px;
text-align: center;
color: rgb(255, 204, 0);
}
p {p {
border-bottom: 2px solid white;
}
#bodyContent{
font-size: 18px;
color: white;
}
</style>
19
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
20
DOM – Document Object Model
21
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”)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”);
22
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 calledcausing 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
23
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 S60 application icon
24
DEVELOPMENT TOOLS
25
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
26© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials
Aptana WRT-Plugin
27
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
28
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 applications
29