WIDGETS FOR THE S60
PLATFORM
Allan Bezerra
Andre Pedralho
Service Experience– INdT



Company Confidential
1    © 2008 Nok...
Nokia – Uma empresa de Internet




                                  tenCube



2
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 JavaS...
S60 Web Runtime
• A library providing APIs for widget developers
    • Menu creation
    • URL access
    • Data download ...
WRT versions and device support
• WRT 1.0
    • Introduced in S60 3rd Edition, Feature Pack 2 SDK
    • Available as an up...
Devices


      N95-8G               E55           N96       5800          N97




 S60 3rd Edition FP 1     S60 3rd Editi...
WIDGET PROGRAMMING BASICS


9
Widget building blocks




10   © 2008 Nokia   V1-Filename.ppt / YYYY-MM-DD / Initials
Deployment
   • At least two mandatory files (manifest and main HTML files) are required
   • Files are packed into a .zip...
Config file
• Named as info.plist
• XML containing widget property and configuration information
• Manifest file propertie...
Example info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plistPUBLIC "-//Nokia//DTD PLIST 1.0//EN"
 "http://www...
Main HTML file
• There Name must match the name defined in info.plist properties
• Contains information for structuring a ...
Main HTML file example
<!DOCTYPE html>
<html>
     <head>
          <link rel="StyleSheet" href="styles/general.css" type=...
Widget UI structure
• Define inside HTML <body> tag
• Some useful structures
• Headings <h1>, <h2>
• Views <div id=“View1”...
Example UI structure
<html>
     <head>
     <script type="text/javascript">
     function myfunc() {
              var p ...
CSS files
• Web Without proper style and layout, widget looks quite boring
• Controls style and layout of widget contents
...
Example CSS file
<style type="text/css" media="screen">
body {
     background: #0075FF; !important
}
h1 {
     font-size:...
UI in mobile devices
• Screen sizes are smaller than those available on desktop devices
• Screen sizes vary between device...
DOM – Document Object Model




http://www.aharef.info/static/htmlgraph/?url=http://www.indt.org.br
 21
DOM – Document Object Model
• Allows dynamic access of HTML document objects in JavaScript
• Object properties such as vis...
JavaScript
• External Implements widget behaviour
     • UI interactions
     • Communication functionality (URL access, e...
Icons
• Widget may have an icon in the Application Menu and any other icons
  needed
• Application icon is named as icon.p...
DEVELOPMENT TOOLS


25
Tools and emulator
   • Widget development does not require any special development or build tools
   • Widget files can b...
Aptana WRT-Plugin




27
Deployment process in the S60 emulator
• Package widget source code files to a .zip file
• Change the file name extension ...
Summary
• Widgets are Web applications running without a browser application
• Development is fast and relatively easy, be...
Upcoming SlideShare
Loading in …5
×

Treinamento S60 WRT - CETELI UFAM INDT

1,221 views

Published on

Apresentação do Treinamento em S60 WRT para bolsista do projeto CETELI_UFAM-INDT

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,221
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Treinamento S60 WRT - CETELI UFAM INDT

  1. 1. WIDGETS FOR THE S60 PLATFORM Allan Bezerra Andre Pedralho Service Experience– INdT Company Confidential 1 © 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials
  2. 2. Nokia – Uma empresa de Internet tenCube 2
  3. 3. Internet Lab – Instituto Nokia de Tecnologia • Criado em Fevereiro de 2009, antigo Mobile Software Group-MSG 3
  4. 4. INTRODUCTION 4
  5. 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. 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. 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
  8. 8. Devices N95-8G E55 N96 5800 N97 S60 3rd Edition FP 1 S60 3rd Edition FP 2 S60 5th Edition http://www.forum.nokia.com/devices/<device_name>
  9. 9. WIDGET PROGRAMMING BASICS 9
  10. 10. Widget building blocks 10 © 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials
  11. 11. 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 © 2008 Nokia 11 V1-Filename.ppt / YYYY-MM-DD / Initials
  12. 12. Config file • Named as info.plist • XML containing widget property and configuration information • Manifest file properties: 12
  13. 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> 13
  14. 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. 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. 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. 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. 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
  19. 19. 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 { border-bottom: 2px solid white; } #bodyContent{ font-size: 18px; color: white; } </style> 19
  20. 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. 21. DOM – Document Object Model http://www.aharef.info/static/htmlgraph/?url=http://www.indt.org.br 21
  22. 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. 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. 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
  25. 25. DEVELOPMENT TOOLS 25
  26. 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 © 2008 Nokia 26 V1-Filename.ppt / YYYY-MM-DD / Initials
  27. 27. Aptana WRT-Plugin 27
  28. 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. 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

×