Simple Form Gadget

Creating my first form gadget, I call it “form gadget” because the main idea of creating this post is to simply show the possibility of using gadgets for form transactions inside wave. Form transactions, meaning having a form created in gadget residing inside a wave but sending the data gathered to a robot or a robot can simply manipulate the data once the form is submitted.

NOTE: In this post I will not discuss on how to create a form gadget. However, I will discuss parts of the code and hopefully feature some other ideas on it.

When I first started creating this gadget I thought it would be easy for me to finish. Unfortunately there were a lot of challenges. I think one of the most challenging part, is having an idea on what gadget to build. Until, I came up with an idea of creating a simple address book gadget. I choose address book because it is simpler and much easy to create. It also shows the idea of a form being submitted. I believe there are a lot of potentials using gadgets inside wave, like this one that I have created. It shows the potential of having a transaction from one servlet residing in remote server or other scripting language that resides in a remote server.

Like the post “Creating a simple Inline Gadget to show External Web Applications”, I also used iGoogle to create and host this gadget.

The Gadget

I started by creating the form itself. What I did was to create a simple form only that is contained inside a table.

<div style="font-weight: bolder; font-size: 12px; padding: 5px 0 5px 0;">My Address book!</div>
<table style="padding-top: 10px;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>Country :</td>
<td><select id="country" name="country"> <option>Antarctica</option> <option>Australia</option> <option>AustriaBahamas</option> </select></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="left">Name :</td>
<td align="left"><input id="name" name="name" size="45" type="text" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="left">Address :</td>
<td align="left"><input id="address" name="address" size="45" type="text" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="left">Email :</td>
<td align="left"><input id="email" name="email" size="45" type="text" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="left">Contact No. :</td>
<td align="left"><input id="contactno" name="contactno" size="45" type="text" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td align="right"><input id="clear" onclick="clearAll()" type="button" value="Clear" /> <input id="butCount" onclick="buttonClicked()" type="button" value="Add me!" /></td>
</tr>
</tbody></table>

NOTE: I only used 3 countries, just for sampling purposes.

JavaScript Functions

There are some several JavaScript functions that I would like to discuss. Most of them are just callbacks whenever the state of the gadget are changed or updated. What I did with the gadget was to include also, who are the current viewers of the gadget. This gives the gadget an idea of determining of who are going to submit there contact information. However, in this case I did not include anything else on what am going to do with the viewer ID but just to display.

Waves are hosted live conversations between multiple participants. Each participant can have the wave open, and can even have one wave open in multiple windows. Gadgets in a wave are instantiated once each time the wave is opened. Shared state ensures that each of those gadgets shows the same thing. But the participants on the wave are often important to the gadget too. Gadgets can get a list of all the participants on the wave (whether they have the gadget open or not) and the viewer. The viewer is the user on whose wave client the particular instance of the gadget is running. – from the auction gadget.

The first function I did was the buttonClicked() function. This function is going to be called when the “Add Me!” button was clicked. The values that are being submitted by the gadget are: country, name, address, email and contactno. In this case, I just did a little manipulation on the data by concatenating  all required values by “,” and gave it a name of details which will be called once the state is updated.

Here is the code:

function buttonClicked() {
var state = wave.getState();
var country = document.getElementById('country').value;
var name = document.getElementById('name').value;
var address = document.getElementById('address').value;
var email = document.getElementById('email').value;
var contactno = document.getElementById('contactno').value;
clearAll(); // clear the form, once the information are kept..
var details = country + "," + name + "," + address + "," + email + "," + contactno;
state.submitDelta({'details': details})
}//buttonClicked()

Next function is the clearAll(), this is use to clear the form. The function stateUpdated() is the program logic when the gadget is loaded. This is a callback function for wave.setStateCallback(). In my own understanding, setStateCallback is used to call stateUpdated() whenever the state of the gadget are changed. Since this is where the logic happens, what I did was to call the informations that was send by the user.

Here is the code for stateUpdated:

function stateUpdated() {
var state = wave.getState();
var country = "";
var address = "";
var name = "";
var contactno = "";
var email = "";
var div = document.getElementById('addressbook');
if(!wave.getState()) {
//put some code here when the gadget is first added on a wave
}
var records = state.get('details'); // get all details that were submitted by the user..
//div.innerHTML += " " + temp2 + " ";

}//stateUpdated()...

The next function is the currentViewers() function. The use of this function was just to simply determine the current participants in the wave. In some instances, you may want to get the gadgets participants. For example, what if you build a gadget that needs only a limited users with authenticated users.

function currentViewers() {
var div = document.getElementById('participants');
var participants = wave.getParticipants();
var participant = "";
//div.innerHTML = "Current Participants : " + wave.getViewer().getId();
if (participants) {
for (var i = 0; i &lt; participants.length; ++i) {
participant = participants[i].getDisplayName();
}
}
//div.innerHTML += "

" + participant + "

";
}//currentViewers()

Finally the init() function. This is the function that will be called whenever the gadget are already live and ready to be used. According to what I have read, It is important that you structure correctly a google wave gadget accordingly, because in some cases it will not work if it is not correctly structured.

function init() {
if (wave &amp;&amp; wave.isInWaveContainer()) {
wave.setStateCallback(stateUpdated);
wave.setParticipantCallback(currentViewers);
}
}//init()..

All in all, the gadget is simply just a template of numerous things that you can do. I just showed one simple way of how a gadget works inside wave. There are several differences between a regular Google Gadget from a Google Wave gadget. You can find out more about it here .

Here is how the gadget looks like inside wave:

Form Gadget

Thanks for reading and hopefully it helped a little. For any questions, comments or suggestions or if there are anything that I have mentioned that is not right please do inform me.

Bookmark and Share

4 thoughts on “Simple Form Gadget”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>