Building Collaborative Apps with Wookie

Transcription

1 Building Collaborative Apps with Wookie

2 Collaborative Apps Use W3C Widgets packaging and widget object API with the Google Wave Gadgets API Runs in Wookie, no Wave server needed Requires plugins that can provide participant information using the Wookie REST API

3 Collaborative Widgets: APIs State Participants

4 State State is shared across widgets with the same IRI in the same shared context. State is propagated to related widgets using an event callback State is set by submitting deltas (as associative arrays) or single values

5 State example wave.setstatecallback(stateupdated); stateupdated = function(){ var keys = wave.getstate().getkeys(); for (var i = 0; i < keys.length; i++) { alert(wave.getstate().get(keys[i])); ; wave.getstate().submitvalue( key, value );

6 State change events State changes are automatically pushed to your widget instance, you don t need to poll or check manually So keep your state model as small as you can to reduce latency Usability tip: Consider whether to auto-refresh, or to prompt the user to refresh using a message. It can be confusing for users if the layout or order of items changes without them doing anything.

7 Participants Information about users accessing the widget Set by the plugin by calling Wookie s participants REST API Viewer is the current user object; participants is the set of users Good to have fallback as widget may be used in a guest access environment with no viewer (e.g. see Natter widget)

8 Participants Register callbacks with: wave.setparticipantcallback(myfunction); Methods*: getviewer() - get the current user getparticipants() - get map of all participants Model: getid(), getdisplayname(), getthumbnailurl() *in future releases the gethost() method will also be supported

9 Making a collaborative app This requires some more planning 1. Draw up a design 1. Draw up a design 2. Create a working test page 3. Implement models, action handlers and event handlers 4. Create the config.xml, icon.png, zip it up and run it

10 Design Start with the view - what the widget looks like Create the model - what are the objects in the state model? Add the actions - how you interact with it Wire it all up

11

12 Prototyping Make a regular html page to test out your view. Populate it with fake model, and don t wire up the actions yet You can reuse this for the real widget - just take out your fake state info sections

13 Implementing Create a Model object for your state model Create a Controller object, and a method in it for each action Register the participant and state event handlers with an update view method that populates the view when running

14 Models Models can be implemented in typical bean fashion Save/Find methods need to access wave state Can use JSON (e.g. with json.js) or just plain strings for storage function Task(id,name,status,assigned){ this.task_id = id; this.name = name; this.status = status; this.assigned_to = assigned; Task.prototype.save = function(){ wave.getstate().submitvalue(this.task_id, JSON.stringify(this));

15 Static model methods Task.create = function(json){ var obj = JSON.parse(json); var task = new Task(obj.task_id, obj.name,obj.status,obj.assigned_to); return task; Task.find = function(task_id){ var keys = wave.getstate().getkeys(); for (var i = 0; i < keys.length; i++) { var key = keys[i]; if (key == task_id){ return Task.create(task_id, wave.getstate().get(key)); return null; Task.findAll = function(){ var tasks = {; var keys = wave.getstate().getkeys(); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var task = Task.create(key, wave.getstate().get(key)); tasks[key] = task; return tasks; Typically need methods to turn state strings back into model instances Also finder methods to get a particular model object This isn t the only way to do this, but is an OK pattern

16 Controllers /** * The Controller object * This is used to wire up the view and model with actions */ var Controller = { // Action handlers // Toggle task state between completed and to-do toggletask: function(task_id){, // Create a new task newtask: function(){, // Abandon task for someone else to do abandontask: function(task_id){, // Claim a task (assign to self) claimtask: function(task_id){ Methods for each action, making changes to the model You usually don t need to do any code that interacts with HTML, as the event handlers should do that

17 Event Handlers // Update the view when state has been updated stateupdated: function(){ var tasks = Task.findAll(); if (tasks && tasks!= null){ var tasklist = ""; for (key in tasks) { var task = tasks[key]; tasklist += // the task stuff to show dwr.util.setvalue("tasklist", tasklist, { escapehtml:false ); var objdiv = document.getelementbyid("tasklist"); objdiv.scrolltop = objdiv.scrollheight;, participantsupdated: function(){ Controller.updateUser(); These fire whenever the state or participants are updated (e.g. by another instance). Event handlers need to be registered like so: wave.setstatecallback(controller.stateupdated); wave.setparticipantcallback(controller.participantsupdated); Also useful to have these methods called from onload() in an init() function to create the initial view You can import JQuery if you like for setting the view content, or do it using DOM

18 Packaging You need to add this to your config.xml to tell Wookie to include the Wave Gadget API methods: <feature name=" required="true"/>

19 Fallback behaviours

20 Viewer handling with fallback /** * Setup user information */ user: {, updateuser:function(){ if (wave.getviewer()!= null){ Controller.user.id = wave.getviewer().getid(); Controller.user.id = wave.getviewer().getid(); Controller.user.username = wave.getviewer().getdisplayname(); Controller.user.thumbnail = wave.getviewer().getthumbnailurl(); if (Controller.user.thumbnail == "" Controller.user.thumbnail == null) Controller.user.thumbnail = "anon.png"; if (Controller.user.username == null Controller.user.username == ""){ Controller.user.username = "anonymouse"; Controller.user.id = "anonymous";

21 Viewer handling with fallback: alternative approach if (wave.getviewer()!= null){ username = wave.getviewer().getdisplayname(); thumbnail = wave.getviewer().getthumbnailurl(); if (thumbnail == "" thumbnail == null) thumbnail = "Images/default_thumbnail.png"; if (username == null username == ""){ username = "natterer" + rnd_no(9999);

22 Single-user mode Could your app also work in a single-user environment with no Wave API? e.g. test for existence of wave object, and adapt if its not present - e.g. store data in preferences not state More faff, but makes your widget work in more situations (e.g. mobile) <feature name=" required="false"/>

23 Spot the (semi) deliberate mistakes! There are a few problems with the ToDo widget - can you identify possible improvements? Removing Wookie-specific code Improved usability Missing functionality

24 Uploading, debugging and testing You need a collaborative environment to test your widget properly E.g. a Moodle or an Elgg installation Its useful though to test using Wookie s built in demo mode to check it still works OK in a guest access or anonymous user setup

25 Other stuff AJAX If you want to call external sites from within the widget, call myurl = widget.proxify(url) first to call it via proxy. Also need to add the site to the server whitelist. Camera access There is experimental support for BONDI camera capture API (will be checked in soon)