Widget Tutorial

6,161 views

Published on

A Tutorial to implement mywiwall widgets in a widget development environment

Published in: Education, Technology
  • Be the first to comment

Widget Tutorial

  1. 2. Agenda <ul><li>E-Learning </li></ul><ul><li>Widgets & PLE </li></ul><ul><li>Tutorial </li></ul><ul><li>WDE </li></ul>
  2. 3. E-Learning <ul><li>Technology Enhanced Learning </li></ul><ul><li>Formal learning </li></ul><ul><ul><li>Structured </li></ul></ul><ul><li>Informal learning </li></ul><ul><ul><li>Unstructured, user driven </li></ul></ul><ul><li>Distributed applications & information systems </li></ul><ul><ul><li>At TU Graz: TUG Online, TUGTC, TUGLL, ... </li></ul></ul><ul><ul><li>In WWW: Blogs, Forums, Twitter, Search machines, LO, … </li></ul></ul>
  3. 4. Widgets & PLE <ul><li>Collection of distributed applications </li></ul><ul><li>User’s individual needs </li></ul><ul><li>Widgets </li></ul><ul><ul><li>Wi ndow + Ga dget </li></ul></ul><ul><ul><li>Presentation layer + Client side logic </li></ul></ul><ul><ul><li>Browser based, Desktop, Mobile </li></ul></ul><ul><ul><li>Different implementations </li></ul></ul><ul><ul><ul><li>Netvibes, iGoogle, protopage, page flakes </li></ul></ul></ul><ul><li>Widgets in PLE as Widget container </li></ul>
  4. 5. The W3C Widgets 1.0 Family of Specifications <ul><li>Widgets 1.0 Packaging and Configuration </li></ul><ul><li>Widgets 1.0 APIs and Events </li></ul><ul><li>Widgets 1.0 Requirements </li></ul><ul><li>Widgets 1.0 Digital Signature </li></ul><ul><li>.... </li></ul><ul><li>All W3C working draft </li></ul><ul><ul><li>Continuously updated to new versions </li></ul></ul><ul><li>PLE widgets: </li></ul><ul><ul><li>Extension of W3C specifications (palette mywiwall) </li></ul></ul><ul><ul><li>Tutorial covers the main features you need to get started! </li></ul></ul>
  5. 6. Widget packaging <ul><li>Widget folder structure: </li></ul><ul><ul><li>Must contain index.html </li></ul></ul><ul><ul><ul><li>Main document of widget </li></ul></ul></ul><ul><ul><ul><li>displayed in PLE </li></ul></ul></ul><ul><ul><ul><li>Should produce valid (X)HTML markup </li></ul></ul></ul><ul><ul><li>Must contain config.xml </li></ul></ul><ul><ul><ul><li>Manifest (configuration) file </li></ul></ul></ul><ul><ul><ul><li>Contains information necessary for widget initialization </li></ul></ul></ul><ul><ul><ul><ul><li>Widget's name, identity, geometry, description, author, icon reference, preferences, … </li></ul></ul></ul></ul><ul><ul><li>May contain other files or subdirectories </li></ul></ul><ul><ul><ul><li>Images, JS, CSS, Scripts, … </li></ul></ul></ul>
  6. 7. Widget folder structure i.e. <ul><li>MyWidget </li></ul><ul><ul><li>Index.html </li></ul></ul><ul><ul><li>Config.xml </li></ul></ul><ul><ul><li>Js </li></ul></ul><ul><ul><ul><li>Init.js </li></ul></ul></ul><ul><ul><ul><li>Jquery.js </li></ul></ul></ul><ul><ul><li>Css </li></ul></ul><ul><ul><ul><li>Init.css </li></ul></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><ul><li>Load.gif </li></ul></ul></ul><ul><ul><ul><li>Icon.gif </li></ul></ul></ul><ul><ul><li>Anotherfile.js </li></ul></ul>
  7. 8. Widget Configuration File <ul><li>Root element: widget </li></ul><ul><li>2 ns used </li></ul><ul><ul><li>xmlns: http://www.w3.org/TR/widgets/ </li></ul></ul><ul><ul><li>Xmlns:palette : http://palette.ercim.org/ns/ </li></ul></ul><ul><li>Attributes ( must be present) </li></ul><ul><ul><li>Id , height , width (ignored in PLE) </li></ul></ul><ul><li>Child elements </li></ul><ul><ul><li>Title, author, description, icon, preferences, … </li></ul></ul>
  8. 9. Widget Configuration File i.e. <ul><li>< widget </li></ul><ul><li>xmlns= http://www.w3.org/TR/widgets/ xmlns:palette=http://palette.ercim.org/ns/ id =”helloWorldWidget” </li></ul><ul><li>width =”300” </li></ul><ul><li>height =”300”> </li></ul><ul><li><title>Hello World!</title> </li></ul><ul><li>< /widget > </li></ul>
  9. 10. palette:preferences <ul><li>The extension to W3C </li></ul><ul><li>Child elements: ‘palette:preference’ </li></ul><ul><li>The ‘palette:preference’ element Attributes </li></ul><ul><ul><li>Name </li></ul></ul><ul><ul><ul><li>Variable name of the preference </li></ul></ul></ul><ul><ul><ul><li>^[a-zA-Z0-9_]+$ </li></ul></ul></ul><ul><ul><li>display_name </li></ul></ul><ul><ul><ul><li>displays alongside the user preferences in the edit window </li></ul></ul></ul><ul><ul><li>datataype </li></ul></ul><ul><ul><ul><li>indicates the data type of this attribute </li></ul></ul></ul><ul><ul><ul><li>string, bool, number, hidden, enumeration </li></ul></ul></ul><ul><ul><li>default_value </li></ul></ul><ul><ul><ul><li>user preference's default value </li></ul></ul></ul>
  10. 11. palette:preferences i.e. <ul><li><palette:preferences> </li></ul><ul><li><palette:preference name =&quot;name&quot; display_name =&quot;First name&quot; datatype =&quot;string&quot;/> </li></ul><ul><li><palette:preference name =&quot;age&quot; display_name =&quot;Age&quot; datatype =&quot;number&quot;/> </li></ul><ul><li></palette:preferences> </li></ul>
  11. 12. The enumeration element <ul><li>Child of preference element </li></ul><ul><li>Attributes </li></ul><ul><ul><li>Value </li></ul></ul><ul><ul><ul><li>Value of the user preference </li></ul></ul></ul><ul><ul><ul><li>^[a-zA-Z0-9_]+$ </li></ul></ul></ul><ul><ul><li>Display_value </li></ul></ul><ul><ul><ul><li>Display alongside the user preferences in the edit window </li></ul></ul></ul>
  12. 13. The enumeration element i.e. <ul><li><palette:preferences> </li></ul><ul><ul><li><palette:preference name=&quot;lang&quot; display_name=&quot;Language&quot; datatype=&quot;enumeration&quot; default_value=&quot;fr&quot;> </li></ul></ul><ul><ul><li><palette:enumeration value =&quot;fr&quot; display_value =&quot;French&quot;/> <palette:enumeration value =&quot;de&quot; display_value =&quot;German&quot;/> <palette:enumeration value =&quot;en&quot; display_value =&quot;English&quot;/> </li></ul></ul><ul><ul><li></palette:preference> </li></ul></ul><ul><li></palette:preferences> </li></ul>
  13. 14. Widget scrollbar <ul><li>Enable vertical scrolling </li></ul><ul><ul><li>Widget element ‘palette:scrollable’ </li></ul></ul><ul><li><palette:scrollable>true</palette:scrollable> </li></ul><ul><li><palette:scrollable>false</palette:scrollable> </li></ul>
  14. 15. Widget Scripting Interface <ul><li>method <datatype> preferenceForKey (string key) </li></ul><ul><ul><li>return the value of the user preference whose attribute name corresponds to the key </li></ul></ul><ul><li>Built-in XHR functions: </li></ul><ul><ul><li>method void httpG et (string URI, map params, function callback, function errorCallback ) </li></ul></ul><ul><ul><li>method void httpPost (string URI, map params, function callback, [string contentType] , function errorCallbac ) </li></ul></ul><ul><ul><li>method void httpPut (string URI, map params, function callback, [string contentType] ) </li></ul></ul><ul><ul><li>method void httpDelete (string URI, map params, function callback) </li></ul></ul><ul><ul><li>method void httpG etJSON (string URI, map params, function callback , function errorCallbac ) </li></ul></ul><ul><li>Others: setter & getter for title, height, ... </li></ul>
  15. 16. Built-in XHR functions <ul><li>Params: </li></ul><ul><ul><li>key/value pairs that will be sent to the server </li></ul></ul><ul><li>Callback, errorCallback: </li></ul><ul><ul><li>The result of the request passed as the first argument </li></ul></ul><ul><ul><li>is intelligently parsed </li></ul></ul><ul><ul><ul><li>As either responseXML or responseText </li></ul></ul></ul><ul><ul><ul><li>For httpGetJson: json format </li></ul></ul></ul><ul><li>ContentType: </li></ul><ul><ul><li>Optional, ignored if params is an object </li></ul></ul><ul><li>URI: </li></ul><ul><ul><li>It MUST be a relative path </li></ul></ul><ul><ul><li>If path absolute (http://…) then request goes over proxy </li></ul></ul><ul><ul><ul><li>Used to fetch data from remote servers </li></ul></ul></ul><ul><ul><ul><li>Does not work in your WDE </li></ul></ul></ul>
  16. 17. Widget object <ul><li>Provides access to Widget Scripting Interface </li></ul><ul><ul><li>i.e. widget.setTitle (‘my widget’); </li></ul></ul><ul><ul><li>i.e. var username = widget.preferenceForKey ('username'); </li></ul></ul><ul><ul><li>i.e widget.httpGet ('a.txt', null, function(data){ alert(data); }); </li></ul></ul><ul><li>Accessible only within the function ‘onLoad()’ </li></ul>
  17. 18. Function onLoad() <ul><li>Replaces the event onload specified by the HTML 4 </li></ul><ul><li>Occurs when PLE finishes loading widget (DOM is ready) </li></ul><ul><li>Used to execute JavaScript as soon as the widget has finished loading </li></ul><ul><li>The widget logic MUST be executed within the onLoad() function </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function onLoad() </li></ul><ul><li>{ </li></ul><ul><ul><li>debug(widget); </li></ul></ul><ul><ul><li>widget.setTitle(widget.getTitle() + &quot; modified&quot;); </li></ul></ul><ul><ul><li>widget.setHeight(&quot;100px&quot;); </li></ul></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  18. 19. WDE <ul><li>W idget D evelopment E nvironment </li></ul><ul><ul><li>Add your widget folder into ‘widgets’ directory </li></ul></ul><ul><ul><li>Open index.html (@see TODOs) </li></ul></ul><ul><ul><ul><li>Change WDE style sheet, if desired </li></ul></ul></ul><ul><ul><ul><li>Activate firebug-lite, if desired </li></ul></ul></ul><ul><ul><ul><li>Add your widget id to the array windows.widgets </li></ul></ul></ul><ul><ul><li>Use firebug to see the possible JS errors </li></ul></ul><ul><ul><li>If no firebug active: </li></ul></ul><ul><ul><ul><li>Debug messages appear in a little popup window </li></ul></ul></ul><ul><ul><li>Use function ‘debug()’ to write debug info in to the console </li></ul></ul>
  19. 20. Last but not least (1) <ul><li>Test your widget in different browsers </li></ul><ul><li>You can use your own XHR functions too… </li></ul><ul><li>Separate the server code from the client code </li></ul><ul><ul><li>i.e. all files in one folder named ‘server’ </li></ul></ul><ul><ul><li>Your server code could sit on another path on production system </li></ul></ul><ul><ul><li>Let the paths in the client logic be configurable </li></ul></ul>
  20. 21. Last but not least (2) <ul><li>Graphical User Interface </li></ul><ul><ul><li>Widget is NOT as wide as the browser window </li></ul></ul><ul><ul><li>Widget is ONE application, keep the usability simple </li></ul></ul><ul><ul><li>Should be as light as possible </li></ul></ul><ul><ul><li>Could look like mobile applications </li></ul></ul><ul><ul><li>Consider usability issues </li></ul></ul><ul><li>Email me when: </li></ul><ul><ul><li>You need to fetch data from remote servers through proxy </li></ul></ul><ul><ul><li>Some thing in WDE does not work </li></ul></ul><ul><ul><li>You cannot go ahead & think I can help </li></ul></ul>

×