This document provides an overview of widgets for the S60 platform, including definitions of widgets and the S60 Web Runtime, widget building blocks, the development and deployment process, and recommended development tools. Key points covered include what widgets are, the different versions of the Web Runtime, common widget file types like the manifest and HTML files, using the DOM and JavaScript to add interactivity, and testing widgets using emulator tools.
5. 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
6. 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
6
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
7
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
14
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>
15
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>
16
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>
17
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
18
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
20
21. DOM – Document Object Model
http://www.aharef.info/static/htmlgraph/?url=http://www.indt.org.br
21
22. 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”);
22
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
23
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
24
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
28
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
29
