A ROLE Developer Workshop held at Dev8eD 2012 in Birmingham, UK. To all participants: thank you for coming! Resources used in the workshop: http://dbis.rwth-aachen.de/gadgets/dev8ed/

1. How to Build & Develop Responsive Open Learning
Environments with the ROLE SDK
Dominik Renzel Sten Govaerts
Chair of Computer Science 5 – Department of Computer Science
Databases & Information Systems Katholieke Universiteit Leuven, Belgium
RWTH Aachen University, Germany
Dev8eD
May 29, 2012, Birmingham, UK
This work by Dominik Renzel is licensed under a
Creative Commons Attribution-ShareAlike 3.0 Unported.
© www.role-project.eu

2. Motivation

Currently happening: significant shift in education
 From lecture to interactive (online) group work
 Learners, not institutions, own the education defining their lives
 Online learning tools cherry-picked or handcrafted by educators & learners
 DIY motto “create, disassemble, repurpose“ applied to educational products
 Learners & educators create mash-up learning apps, lessons & processes
 More interaction, personalization, freedom, ownership
 More enjoyable, appealing, effective learning
© www.role-project.eu

3. Motivation
 How does TEL support this shift?
 Widget-based PLE inherently support DIY
 Plethora of enabling technologies available, i.p. developer APIs
 BUT...
 Often no customization to learning purposes
 Many domain-specific learning tools missing
 Domain expert ≠ hard-core programmer
 Required:
 Easy-to-use APIs tailored to developing learning widgets
 Easy-to-use development environment for testing
 Developers!!!
 The ROLE SDK and its APIs intend to solve some of the
issues, but they are nothing without developers.
 So let‘s get started…
© www.role-project.eu

4. Learning Objectives & Tools
 Learning Objectives
 Widget Basics
 How to create & deploy a widget
 How to build a widget-based PLE for development
 Widget Programming with ROLE APIs
 How to make your widget manage shared resources –
The OpenApp API
 How to make your widget communicate in real-time –
The ROLE Interwidget Communication API
 Tools
 ROLE SDK/Sandbox & ROLE APIs
 These slides
 Your instructors… ;)
© www.role-project.eu

5. Widget Basics
Widget Basics –
How to create & deploy a widget
© www.role-project.eu

6. Widget Basics – How to create a widget
1. Point your browser to the template file at
http://dbis.rwth-aachen.de/gadgets/dev8ed/template.xml
2. Save file as widget.xml on your disk.
3. Open file widget.xml with your code editor.
4. Fill in widget metadata at the top (widget title, description, etc.).
5. Save your changes.
Done!
Now continue to deploy your widget under a public URL...

7. Widget Basics – How to deploy a widget
Either put your widget file into your public Dropbox folder and retrieve
its public URL or (if you‘re not using Dropbox)…
1. Open your SSH client
2. Establish a connection with the following details
• Host: role-is.dbis.rwth-aachen.de
• Port: 9022 (!!!)
• Login: role-is
• Pass: tmc4ULME
3. Once connected change to directory ./dev8ed/
4. Create a directory of your choice and upload your widget file
5. Your widget is now ready to use under the URL
http://role-is.dbis.rwth-aachen.de:9080/gadgets/ws/dev8ed/<folder>/widget.xml
Done!

8. Widget Basics
Widget Basics
How to build a widget PLE with ROLE Sandbox
© www.role-project.eu

9. The ROLE Sandbox (role-sandbox.eu)
 Public installation of ROLE SDK for development & testing purposes
 ROLE Reference Container for Widget-based PLE
Space
Widget List
(add/remove)
Member List
(join/leave)
Space Chat
Widgets
(max/minimize)
© www.role-project.eu

10. Widget Basics – How to build a widget-based PLE
1. Copy the public URL of your widget to clipboard (CTRL-C)
2. Point your browser to the ROLE Sandbox: http://role-sandbox.eu
3. Sign in with your Google account
4. Create a space for your testing
5. Add your widget to the space
1. Click on +URL in the left sidebar
2. Paste the URL of your widget in the appearing dialog (CTRL-V)
3. Confirm the dialog to finally add the widget to your space
Done!
You can later add more widgets, either via URL or from the
ROLE Widget Store (+Widget Store in left sidebar).

11. Widget Programming with ROLE APIs
Widget Programming with ROLE APIs
How to make widgets manage resources –
The OpenApp API
© www.role-project.eu

12. OpenApp – Concept
 API for Linked Data-style resource management
 Everything is a Resource
 URI
 Representation
 Metadata
 Data
 Resources can have sub-resources
 Access to sub-resources filtered by type or relation to parent
 Special Resources
 Space is topmost resource in a space (shared)
 User is topmost personal resource (protected)

13. OpenApp – Client API
openapp.oo.Resource
 create  getInfo
 del  setInfo
 getSubResources  getMetadata
 refresh  setMetadata
 getRepresentation
 setRepresentation
Get current space & user as resources
var space = new openapp.oo.Resource(openapp.param.space());
var user = new openapp.oo.Resource(openapp.param.user());
Get resource information (JSON object with key/value pairs)
space.getInfo(function(info) {
alert(info);
});

14. OpenApp – Client API (Code Samples continued)
Create data sub-resource under space
space.create({
Get space resource metadata "data",
relation: openapp.ns.role +
type: "my:data:namespace:uri",
metadata: meta,
callback: function(sub){
//do something with new sub-resource
}
});
Find sub-resources via relation and type
space.getSubResources({
relation: openapp.ns.role + "data",
type: "my:data:namespace:uri",
onAll: function(arr) { //alternatively use onEach
//Do something with array of found subresources
}
});

15. OpenApp – Browsing Resources with the Index Page
For any resource open index page with <RESOURCE_URI>/:index

16. OpenApp – Store Custom User Data (e.g. Personal Notes)
1. In the HTML Section create UI elements to store a note.
<input type="text" id="note" />
<button onclick="storeNote()">Store</button>
2. Create a function storeNote storing the note
function storeNote(){
var note = {"text":document.getElementById("note").value};
space.create({
relation: openapp.ns.role + "data",
type: "my:ns:note",
representation: note,
callback: function(sub){window.location.reload();}
});
}
Done!
Your widget can store notes as shared space data . Now read custom user data…

17. OpenApp – Read Custom User Data (e.g. Shared Notes)
1. In the HTML Section create a UI list to display all notes.
<ul id="notes"/>
2. Create a function renderNotes rendering all notes as list items.
function renderNotes(){
space.getSubResources({
relation: openapp.ns.role + "data",
type: "my:ns:note",
onEach: function(note) {
note.getRepresentation("rdfjson",function(r){
var ne = document.createElement("li");
var ntext = document.createTextNode(r.text);
ne.appendChild(ntext);
document.getElementById("notes").appendChild(ne);
});
}
});
}
3. Call function renderNotes on widget initialization.
Done! But how to make other space members aware of changes?

18. Widget Programming with ROLE APIs
Widget Programming with ROLE APIs
How to make your widget communicate in real-time –
The ROLE Interwidget Communication (IWC) API
© www.role-project.eu

19. ROLE Interwidget Communication – Concept
 Message-based communication between widgets in real-time
 Local: only within the same browser instance
 Remote: across browser instances ( multi-user)
 Facilitates widget interoperation & remote learner collaboration
© www.role-project.eu

20. ROLE IWC – Client API
Function Description
connect(callback) Connects the client to local interwidget communication.
After successful call, the client is able to publish and
receive intents. Received intents are passed to the
callback function.
disconnect() Disconnects the client from interwidget communication.
publish(intent) Publishes a JSON-encoded intent.
Initialize ROLE IWC Client
var iwcClient = new iwc.Client();
iwcClient.connect(function(intent){
// process intent
});
Publish ROLE IWC Intent
iwcClient.publish(intent);
© www.role-project.eu

21. ROLE IWC – Intent Message Format
var intent = {
"component": "",
"sender":"bob@somewhere.org?http://widget.org/sender.xml",
"data":"http://data.org/some/data",
"dataType":"text/xml",
"action":"ACTION_UPDATE",
"categories":["category1","category2"],
"flags" :["PUBLISH_GLOBAL", "own_flag"],
"extras":{"key1":"val1", "key2":"val2"}
};
 Google Android-like Intents
 component(*) (String) - the component name of a specific recipient widget
(explicit intent) or the empty string to indicate broadcasting (implicit intent)
 sender (String) - sender & sender widget.
 action (String) - the action to be performed by receivers (e.g. ACTION_UPDATE)
 data(*) (String) - data in form of a URI (e.g. http://myresource.org/microblogs/1)
 dataType(*) (String) - the data type in MIME notation (e.g. text/html)
 categories (Array) - categories of widgets to process the intent (e.g. ["editor"])
 flags (Array) - flags controlling intent processing (e.g. ["PUBLISH GLOBAL"])
 extras (JSON) - auxiliary data (e.g. {"examplekey":"examplevalue“})
© www.role-project.eu

22. ROLE IWC – Test Stub Widget
 Test tool for developing with ROLE IWC
 List received intent messages
 Send custom intent messages to test widget behaviour
© www.role-project.eu

23. ROLE IWC – Add Test Stub Widget to Development Space
1. In your browser navigate to the space of your group.
2. Click "+ Widgetstore" in the left sidebar.
3. In the appearing widget store frame search for "iwc".
4. In result item "ROLE IWC Test Stub" click the "Select" button.
5. Click "+ ROLE IWC Test Stub" in the left sidebar.
6. (Add other IWC Demo widgets to see what the test stub does.)
Done!
With the ROLE IWC Test Stub widget you have a test tool
allowing to trace & send IWC messages.
Now you are prepared to start actual coding…
© www.role-project.eu

24. ROLE IWC – Initialize & Receive Incoming Messages
(Already done for you in the template you are using)
1. Import the libraries necessary for IWC by adding the following script
elements to the beginning of the CDATA block.
<script src="http://dbis.rwth-aachen.de/gadgets/iwc/lib/iwc.js"></script>
2. Instantiate IWC client when widget is loaded
1. Declare a global variable iwcClient: var iwcClient;
2. Within function init instantiate a new IWC client:
iwcClient = new iwc.Client();
3. Bind a callback function to iwcClient for processing incoming messages:
iwcClient.connect(iwcCallback);
4. Define the callback function (we’ll come back to this later):
function iwcCallback(intent){console.log(intent);}
Off to do something useful with it…

25. ROLE IWC – Publish Messages
1. Create a function for publishing a message on an updated note resource.
function publishResourceUpdate(uri){}
2. Within body of function publishResourceUpdate…
1. Formulate an intent message, leaving the sender field empty:
var intent = {
"component": "",
"data":uri,
"dataType":"text/json",
"action":"ACTION_UPDATE",
"flags" :["PUBLISH_GLOBAL"],
"extras" :{"ns":"my:ns:note"}
};
2. Publish the intent message by using iwcClient method publish:
iwcClient.publish(intent);
Done!
Your widget now publishes intents on note resource updates.
Now react to incoming intents more precisely…

26. ROLE IWC – Reacting to Intent Messages
Within the iwcCallback function…
1. Filter the intents your widget understands, i.e. shared note updates.
if (intent.action == "ACTION_UPDATE" &&
intent.extras.ns == "my:ns:note"){
// react on filtered intent
}
2. React on the filtered intent with a widget reload.
// react on filtered intent
window.location.reload();
Done!
Your widget now reacts to intents on shared note updates.
Congratulations! You have just completed a collaborative
real-time note taking widget from scratch!

27. What else could you develop?
 Collaborative Note-Taking
 Use OpenApp for managing shared space data
 Use ROLE IWC for real-time notification on shared space data updates
 Real-time microblogging widget
 Extend widget with real-time notification on shared space data updates
 Synchronized video player widget (code)
 Enable persistent management of time marks with OpenApp
 Publish & react to more types of IWC intents
 Synchronized map navigation widget (code)
 Enable persistent storage of map views with OpenApp
 Publish & react to IWC intents about added/deleted map views
 Collaborative sketching widget (code)
 Persist sketches with OpenApp
 Broadcast current cursor positions via IWC
 Your own idea? You could win an ipad...
© www.role-project.eu

28. CfP – ROLE Widget Enchantment Competition
© www.role-project.eu

29. Evaluation
Please evaluate NOW:
http://fit-bscw.fit.fraunhofer.de/pub/bscw.cgi/39808917
© www.role-project.eu

30. Thank you for coming & enjoy Dev8eD!
Visit the ROLE project page
role-project.eu
Download the ROLE SDK
sourceforge.net/projects/role-project
Try the ROLE Sandbox
role-sandbox.eu
Enter the ROLE Widget Competition
role-project.eu/WidgetCompetition
Join ROLE on LinkedIn
linkedin.com/groups?gid=1590487
Share your widgets in the ROLE Widget Store
role-widgetstore.eu/
© www.role-project.eu