WRT Introduction P11 2009


Published on

Introduction about Nokia WRT Platform

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WRT Introduction P11 2009

  1. 1. WIDGETS FOR THE S60 PLATFORM Allan Bezerra Pesquisador Senior Internet & Services Platform – INdT/Forum Nokia © 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials
  2. 2. Nokia – Uma empresa de Internet ten Cube
  3. 3. Internet Lab – Instituto Nokia de Tecnologia <ul><li>Criado em Fevereiro de 2009, antigo Mobile Software Group-MSG </li></ul>
  4. 4. Conceitos Entregues LTA 2009H2 More 5 coming.. 2009H1 India US Brazil
  6. 6. WRT Widget Definition <ul><li>Standalone Web applications running without a browser application; </li></ul><ul><li>Behaviour defined using JavaScript™–no compilation or linking needed; </li></ul><ul><li>Consists of a few files defining appearance (icon), layout, and behavior; </li></ul><ul><li>Accesses a URL like a normal Web application to get data from the Web serve; </li></ul>
  7. 7. S60 Web Runtime <ul><li>A library providing APIs for widget developers </li></ul><ul><ul><li>Menu creation </li></ul></ul><ul><ul><li>URL access </li></ul></ul><ul><ul><li>Data download from URL </li></ul></ul><ul><ul><li>Access to some device properties </li></ul></ul><ul><ul><li>Access to several S60 Platform Services (since WRT 1.1) </li></ul></ul><ul><li>Based on open-source Web technologies </li></ul><ul><li>Empowered by Web Browser for S60 </li></ul><ul><li>Several widgets can be executed at the same time </li></ul><ul><li>Due to physical limitations of the screen, only a single widget is on the foreground </li></ul>
  8. 8. WRT versions and device support <ul><li>WRT 1.0 </li></ul><ul><ul><li>Introduced in S60 3rd Edition, Feature Pack 2 SDK </li></ul></ul><ul><ul><li>Available as an update to selected S60 3rd Edition, Feature Pack1 devices </li></ul></ul><ul><li>WRT 1.1 </li></ul><ul><ul><li>Introduced in S60 5th Edition SDK </li></ul></ul><ul><ul><li>Adds support for S60 Platform Services through JavaScript Service APIs </li></ul></ul><ul><ul><li>Widgets created for WRT 1.0 run normally with WRT 1.1 </li></ul></ul>
  9. 9. Devices S60 3 rd Edition FP 2 S60 5 th Edition N97 5800 N96 E55 S60 3 rd Edition FP 1 N95-8G http://www.forum.nokia.com/devices/<device_name>
  11. 11. Widget building blocks © 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials
  12. 12. Deployment <ul><li>At least two mandatory files (manifest and main HTML files) are required </li></ul><ul><li>Files are packed into a .zip package </li></ul><ul><li>The package extension is changed to .wgz </li></ul><ul><li>The package is transferred to the device with some of the following methods </li></ul><ul><ul><li>Bluetooth, e-mail, or other communication method </li></ul></ul><ul><ul><li>USB cable or memory card </li></ul></ul><ul><ul><li>Web Browser for S60 </li></ul></ul><ul><ul><li>By double-clicking it on PC after connecting the device with PC Suite </li></ul></ul>© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials
  13. 13. Config file <ul><li>Named as info.plist </li></ul><ul><li>XML containing widget property and configuration information </li></ul><ul><li>Manifest file properties: </li></ul>
  14. 14. Example info.plist <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><!DOCTYPE plistPUBLIC &quot;-//Nokia//DTD PLIST 1.0//EN&quot; &quot;http://www.nokia.com/NOKIA_COM_1/DTDs/plist-1.0.dtd&quot;> </li></ul><ul><li><plistversion=&quot;1.0&quot;> </li></ul><ul><ul><li><dict> </li></ul></ul><ul><ul><li><key>DisplayName</key> </li></ul></ul><ul><ul><li><string>MyWidget</string> </li></ul></ul><ul><ul><li><key>Identifier</key> </li></ul></ul><ul><ul><li><string>com.nokia.forum.widget.mywidget</string> </li></ul></ul><ul><ul><li><key>MainHTML</key> </li></ul></ul><ul><ul><li><string>mywidget.html</string> </li></ul></ul><ul><ul><li></dict> </li></ul></ul><ul><li></plist> </li></ul>
  15. 15. Main HTML file <ul><li>There Name must match the name defined in info.plist properties </li></ul><ul><li>Contains information for structuring a widget </li></ul><ul><li>Define the document inside <html> tags </li></ul><ul><li>External style and code files are referenced inside <style> and <script> tags in the head part of the HTML file </li></ul><ul><li>Body part defines widget’s UI structure </li></ul>
  16. 16. Main HTML file example <ul><li><!DOCTYPE html> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><link rel=&quot;StyleSheet&quot; href=&quot;styles/general.css&quot; type=&quot;text/css&quot; /> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;scripts/mywidget.js&quot; /> </li></ul><ul><li><title>My widget</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  17. 17. Widget UI structure <ul><li>Define inside HTML <body> tag </li></ul><ul><li>Some useful structures </li></ul><ul><li>Headings <h1>, <h2> </li></ul><ul><li>Views <div id=“View1”> </li></ul><ul><li>Labels <label> </li></ul><ul><li>Input text <input type=“text”> </li></ul><ul><li>Input button <input type=“button”> </li></ul><ul><li>Paragraph text <p> </li></ul><ul><li>Images <img> </li></ul><ul><li>List items <li> </li></ul><ul><li>Tags may be empty and dynamically generated in JavaScript programming language </li></ul><ul><ul><li><img id=“image”src=“”/> </li></ul></ul><ul><li>Tags may be associated with JavaScript functions </li></ul><ul><ul><li><li onclick=“excuteFunction();”>label</li> </li></ul></ul>
  18. 18. Example UI structure <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script type=&quot;text/javascript&quot; > </li></ul><ul><li>function myfunc() { </li></ul><ul><li>var p = document.getElementById(&quot;personList&quot;); </li></ul><ul><li>var li = document.createElement('li'); </li></ul><ul><li>li.innerHTML = document.getElementById(&quot;inputX&quot;).value; </li></ul><ul><li>p.appendChild(li); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> My widget </h1> </li></ul><ul><li><div id=&quot;bodyContent&quot; > </li></ul><ul><li><p><b> Some paragraph text </b></p> </li></ul><ul><li><label for=&quot;inputX&quot; > Enter your name: </label> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;inputX&quot; size=&quot;10&quot; ></input> </li></ul><ul><li><input type=&quot;button&quot; name=&quot;check&quot; value=&quot;Check&quot; onClick=myfunc() ></input> </li></ul><ul><li><ul id=&quot;personList&quot; > </li></ul><ul><li><li> Allan </li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  19. 19. CSS files <ul><li>Web Without proper style and layout, widget looks quite boring </li></ul><ul><li>Controls style and layout of widget contents </li></ul><ul><li>Recommended: Keep the style information separated from the markup elements (recommendation) </li></ul><ul><li>If CSS file is not provided, style information can be embedded within the HTML file </li></ul><ul><li>Define the style for UI component </li></ul><ul><ul><li>Body background image </li></ul></ul><ul><ul><li>Heading text font, alignment, colour </li></ul></ul><ul><ul><li>List style </li></ul></ul><ul><ul><li>Visibility (for example, in case of several views, all other except the default view are hidden) </li></ul></ul><ul><ul><ul><li>Set display property to none </li></ul></ul></ul>
  20. 20. Example CSS file <ul><li><style type=&quot;text/css&quot; media=&quot;screen&quot;> </li></ul><ul><li>body { </li></ul><ul><li>background: #0075FF; </li></ul><ul><li>} </li></ul><ul><li>h1 { </li></ul><ul><li>font-size: 20px; </li></ul><ul><li>text-align: center; </li></ul><ul><li>color: rgb(255, 204, 0); </li></ul><ul><li>} </li></ul><ul><li>p { </li></ul><ul><li>border-bottom: 2px solid white; </li></ul><ul><li>} </li></ul><ul><li>#bodyContent{ </li></ul><ul><li>font-size: 18px; </li></ul><ul><li>color: white; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul>
  21. 21. UI in mobile devices <ul><li>Screen sizes are smaller than those available on desktop devices </li></ul><ul><li>Screen sizes vary between devices </li></ul><ul><ul><li>Prefer relative units in CSS to specify the characteristics of screen elements </li></ul></ul><ul><li>Some devices support screen rotation </li></ul><ul><li>Some devices are touch-enabled </li></ul><ul><ul><li>Widget can have different CSS files for touch and non-touch devices </li></ul></ul><ul><li>UI for touch interaction can provide clickable HTML elements large enough to select with a finger </li></ul>
  22. 22. DOM – Document Object Model http://www.aharef.info/static/htmlgraph/?url=http://www.indt.org.br
  23. 23. DOM – Document Object Model <ul><li>Allows dynamic access of HTML document objects in JavaScript </li></ul><ul><li>Object properties such as visibility (display) can be changed </li></ul><ul><li>Objects are identified by using IDs given in the HTML file </li></ul><ul><li>Get access to an object </li></ul><ul><li>document.getElementById(“bodyContent”) </li></ul><ul><li>Change style properties (visibility in this case) </li></ul><ul><li>document.getElementById(“bodyContent”).style.display= “none”; </li></ul><ul><li>Define image file dynamically </li></ul><ul><li>document.getElementById(“image”).setAttribute('src', “image1.jpg”); </li></ul>
  24. 24. JavaScript <ul><li>External Implements widget behaviour </li></ul><ul><ul><li>UI interactions </li></ul></ul><ul><ul><li>Communication functionality (URL access, etc.) </li></ul></ul><ul><ul><li>Dynamic construction of UI elements </li></ul></ul><ul><li>JavaScript functions are associated with tags </li></ul><ul><li>Functions are assigned with certain attributes (for example, onClick) causing the function to be called </li></ul><ul><li><input type=&quot;button&quot; name=&quot;check&quot; value=&quot;Check&quot; onClick=myfunc()></input> </li></ul><ul><ul><li>When the button is clicked, myfunc() function will be called. </li></ul></ul><ul><li>Based on the function result, DOM may be used to change HTML object properties </li></ul>
  25. 25. Icons <ul><li>Widget may have an icon in the Application Menu and any other icons needed </li></ul><ul><li>Application icon is named as icon.png </li></ul><ul><li>Recommended size for application icon is 88x88 pixels </li></ul><ul><li>Icon must be a PNG (Portable Networking Graphics) format </li></ul><ul><li>Application icon is not needed, in which case the widget icon is a default S60 application icon </li></ul>
  27. 27. Tools and emulator <ul><li>Widget development does not require any special development or build tools </li></ul><ul><li>Widget files can be edited with any text editor </li></ul><ul><li>Nokia S60 3rd Edition FP2 and S60 5th Edition SDK emulator support WRT </li></ul><ul><li>Download the SDK from www.forum.nokia.com </li></ul><ul><li>Unzip the package </li></ul><ul><li>Run setup.exe </li></ul>© 2008 Nokia V1-Filename.ppt / YYYY-MM-DD / Initials
  28. 28. Aptana WRT-Plugin
  29. 29. Deployment process in the S60 emulator <ul><li>Package widget source code files to a .zip file </li></ul><ul><li>Change the file name extension to .wgz </li></ul><ul><li>Run the emulator </li></ul><ul><li>Open the package file from emulator’s File>Open </li></ul>
  30. 30. Summary <ul><li>Widgets are Web applications running without a browser application </li></ul><ul><li>Development is fast and relatively easy, because no compilation or linking is needed </li></ul><ul><li>Developer must know at least the basics of XML, HTML, JavaScript, DOM, and CSS </li></ul><ul><li>Widgets allows you to easily develop and deploy nice-looking applications </li></ul>
  31. 31. NOKIA UI FRAMEWORK – Example <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;../themes/nokia/base.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;../themes/nokia/rating.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;../themes/custom-theme/ui.all.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;> </li></ul><ul><li><script src=&quot;../lib/jquery/jquery.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script> </li></ul><ul><li><script src=&quot;../src/core.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script> </li></ul><ul><li><script src=&quot;../src/dom.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script> </li></ul><ul><li><script src=&quot;../src/util.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script> </li></ul><ul><li><script src=&quot;../src/widget.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script> </li></ul><ul><li><script src=&quot;../src/rating.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><embed type=&quot;application/x-systeminfo-widget&quot; hidden=&quot;yes&quot; style=&quot;position:absolute;top:-1000px;&quot;></embed> </li></ul><ul><li><div id=&quot;rating01&quot;></div> </li></ul><ul><li><script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;> </li></ul><ul><li>window.onload = function() { </li></ul><ul><li>window.rating1 = new Nokia.Rating({ </li></ul><ul><li>element: '#rating01', </li></ul><ul><li>value: 2, </li></ul><ul><li>create: function() { </li></ul><ul><li>console.log(&quot;Rating: create.&quot;); </li></ul><ul><li>}, </li></ul><ul><li>change: function(value) { </li></ul><ul><li>console.log(&quot;Rating: change - &quot; + value); </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>}; </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>HTML Component Nokia UI FRAMEWORK CSS Dependencies JS Dependencies Component Create