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/
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!
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).
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?
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!