AgendaE-Learning

Widgets & PLE

Tutorial

WDE

E-LearningTechnology 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 & PLECollection of distributed applications

User’s individual needs

Widgets Window + Gadget 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 packagingWidget folder structure:

Must contain index.htmlMain document of widgetdisplayed in PLE Should produce valid (X)HTML markup

Must contain config.xmlManifest (configuration) fileContains 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

ImagesLoad.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 scrollbarEnable 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 httpGet (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 httpGetJSON (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 objectProvides 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>

WDEWidget Development Environment

Add your widget folder into ‘widgets’ directory Open index.html (@see TODOs)

Change WDE style sheet, if desiredActivate 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