Widget Tutorial

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, …

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

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 ="name" display_name ="First name" datatype ="string"/>
<palette:preference name ="age" display_name ="Age" datatype ="number"/>
</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="lang" display_name="Language" datatype="enumeration" default_value="fr">
<palette:enumeration value ="fr" display_value ="French"/> <palette:enumeration value ="de" display_value ="German"/> <palette:enumeration value ="en" display_value ="English"/>
</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="text/javascript">
function onLoad()
{
debug(widget);
widget.setTitle(widget.getTitle() + " modified");
widget.setHeight("100px");
}
</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

https://cs.senecac.on.ca	64
http://elearningblog.tugraz.at	52
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

Widget Tutorial

by Behnam Taraghi on Dec 02, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 147

Statistics

Widget Tutorial — Presentation Transcript