Widget Tutorial
Upcoming SlideShare
Loading in...5
×
 

Widget Tutorial

on

  • 7,328 views

A Tutorial to implement mywiwall widgets in a widget development environment

A Tutorial to implement mywiwall widgets in a widget development environment

Statistics

Views

Total Views
7,328
Views on SlideShare
7,178
Embed Views
150

Actions

Likes
1
Downloads
58
Comments
0

11 Embeds 150

https://cs.senecac.on.ca 64
http://elearningblog.tugraz.at 55
http://www.slideshare.net 19
http://tugll.tugraz.at 3
http://localhost 2
http://ple.tugraz.at 2
http://127.0.0.1:8795 1
file:// 1
http://th5pro.co.cc 1
http://www.plisweb.com 1
http://englishlearningeasy.plisweb.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Widget Tutorial Widget Tutorial Presentation Transcript

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