Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
10 top tips for using social media effectively for connecting, networking and learning
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

Widget Tutorial

Download to read offline

A Tutorial to implement mywiwall widgets in a widget development environment

Related Books

Free with a 30 day trial from Scribd

See all

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>
  • lernys

    Dec. 10, 2009

A Tutorial to implement mywiwall widgets in a widget development environment

Views

Total views

6,328

On Slideshare

0

From embeds

0

Number of embeds

154

Actions

Downloads

62

Shares

0

Comments

0

Likes

1

×