Writing and publishing a gadget for Google Wave

After opening registration on Google Wave, it became possible to use it to organize workflow and communicate with customers.

Sometimes it is very convenient to display the stage of the task with the help of the progress bar. There were no ready-made solutions, so I decided to write my own.

Adding elements to the blips ( “blip” ) of the wave is done using gadgets. Which, in turn, consist of only two files:
installer.xml ,
gadget.xml

The installer.xml is needed to add a button to the wysiwyg google wave panel. (You can also add a gadget by reference without installing any extensions).
gadget.xml file with settings and gadget code.
')

Installer.xml

< extension
name ="Progressbar"
thumbnailUrl ="http://adcirobot.appspot.com/assets/gadget.png"
description ="Insert a progress bar into your waves, and click it to indicate the current progress. " >
< author name ="Fedor Indutny" />
< menuHook location ="toolbar" text ="Add Project Progress"
iconUrl ="http://adcirobot.appspot.com/assets/gadget-small.png" >
< insertGadget url ="http://adcirobot.appspot.com/assets/gadget.xml" />
</ menuHook >
</ extension >

* This source code was highlighted with Source Code Highlighter .

This is a real example taken from my gadget.

The Google wave Gadget API is an add-on to the Google Gadget API , so the file structure is almost identical.

Be sure to specify the name of the extension, the name of the author and a description, because it will be displayed in the gallery. Same
There is a menuHook entry in the file, which means adding a button to the blip editing panel (I think the meaning of the settings is clear from their name). insertGadget tells us that when you click this button, the gadget indicated by the link will be inserted after the cursor.

Actually, this is all you need to know about installer.xml.

Gadget.xml

<? xml version ="1.0" encoding ="UTF-8" ? >
< Module >
< ModulePrefs
title ="Progressbar"
author ="Fedor Indutny"
author_email ="fedor.indutny@gmail.com"
screenshot ="http://adcirobot.appspot.com/assets/gadget.png"
thumbnail ="http://adcirobot.appspot.com/assets/gadget.png"
>
< optional feature ="shareable-prefs" />
< Require feature ="wave" />
< Require feature ="dynamic-height" />
</ ModulePrefs >
< Content type ="html" ><! [CDATA[
html-
]] ></ Content >
</ Module >

* This source code was highlighted with Source Code Highlighter .

Attributes ModulePrefs are also quite logical and are taken from the Google Gadget API.
It is worth paying attention to:

• shareable-prefs - means that the data that the gadget stores will be shared by all users (respectively, updated dynamically for all subscribers of the wave).
• wave - includes the wave.js script, which gives access to the Wave API functionality (we will only need to change the parameters and state).
• dynamic-height - I think it’s not worth explaining.

You can place your code in Content (it will be executed inside an iframe, so you can write anything you want), so I wrote this code:

< script type ="text/javascript" src ="url_to_jquery.js" ></ script >

<div id= "A" style= "-webkit-user-select:none;height: 10px;background:white;border:1px solid #bbb;margin:0;padding:0;" title= "click to indicate current progress " >
<div id= "B" style= "height:100%;width: 0%;background: transparent url(data:image/png;base64, base64 ) repeat-x 0 0" >
<div style= "-webkit-user-select:none;height:100%;opacity:0.33;background:transparent url(data:image/gif;base64, base64 ) repeat 0 0;border: 0;margin:0;padding:0" ></div>
</div>
</div>
<script type= "text/javascript" >

</ script >

* This source code was highlighted with Source Code Highlighter .

(I am taking out the js-code separately so that the syntax highlighting is normal. I connected jquery just inline, so I don’t provide here).

Javascript

// ,
//
gadgets.util.registerOnLoadHandler( function () {
var
//
lock = 0,
// (A - progressbar holder, B - progressbar)
A = $( "#A" ), B = $( "#B" ), mousemove = 0, $procent = 0,
//
round = Math.round, A$offset = A.offset(),
A$outerWidth = A.outerWidth();

//
// Google Wave -
if (!wave || !wave.isInWaveContainer()) return ;

// ()
wave.setStateCallback( function () {
// wave :
// getState()
// get([attr-name]),
var procent = wave.getState().get( 'procent' ) || 0;

//
B.stop().animate({width: procent + "%" , backgroundPosition: "(0px -" + procent + "px)" }, function () {
A[(procent >= 100) ? "addClass" : "removeClass" ]( "full" );
});
});

//
// (, )
wave.setModeCallback( function () {

if ( lock = wave.getMode() == wave.Mode.EDIT ? 0 : 1) {
//
A.css({cursor: "" });
B.css({cursor: "" });
mousemove = 0;
} else {
//
A.css({cursor: "pointer" });
B.css({cursor: "pointer" });
}
});

//
A.click( function (E) {

E.preventDefault();

//
if ( lock ) return ;

// submitDelta -
// ( ,
// setStateCallback )
wave.getState().submitDelta({procent:
E.ctrlKey ?
(A.hasClass( "full" ) ? 0 : 100)
:
round((100 * ( E.pageX - A$offset.left) / A$outerWidth))
});
}).mousedown( function (E){
// Drag
E.preventDefault();
mousemove = 1;
changed = 0;
});

$(window).mousemove( function (E){
// , submitDelta
//
if (!mousemove || lock ) return ;

changed = 1;

B.css({
width: ($procent = round((100 * ( E.pageX - A$offset.left) / A$outerWidth))) + "%" ,
backgroundPosition: "0 -" + $procent + "px"
},
function () {
A[($procent >= 100) ? "addClass" : "removeClass" ]( "full" );
});

})
.mouseup( function (E) {
mousemove = 0;
if (!changed) return ;

wave.getState().submitDelta({procent: $procent});

});

//
gadgets.window.adjustHeight(13);
});

* This source code was highlighted with Source Code Highlighter .

Learn more about the API functions here .

Publishing process

The gadget is ready, we upload files to any hosting (as a rule, appspot is used) - you can start publishing!

First you need to install the Submitty extension. After installation, the creation of a new type of waves will be available - Extension Submission . Create a wave, follow the instructions (fill in the questionnaire data and enter the path to the installer.xml) and click the Share with Reviewers button.
Now your gadget went to the Google Wave team for consideration, after a certain time they will answer you and (if everything is fine) send a link to your gadget in the gallery.

And here is my gadget .
You can indulge in it here .

Thank you for reading!

PS
If there is interest, I can tell you about using a new API when writing robots for Google Wave.