Post on 15-Jan-2015
description
transcript
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