simple_gadget

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Wave Gadget Title" height="200">
    <Require feature="wave" /> 
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
<style>
  td {
    width:50px;
    height:50px;
  }
  td.o { background-color:red; }
  td.x { background-color:blue; }
</style>
<table>
  <tr>
    <td id="cell00" onclick="javascript:stateChange(0, 0)"></td>
    <td id="cell01" onclick="javascript:stateChange(0, 1)"></td>
    <td id="cell02" onclick="javascript:stateChange(0, 2)"></td>
  </tr>
  <tr>
    <td id="cell10" onclick="javascript:stateChange(1, 0)"></td>
    <td id="cell11" onclick="javascript:stateChange(1, 1)"></td>
    <td id="cell12" onclick="javascript:stateChange(1, 2)"></td>
  </tr>
  <tr>
    <td id="cell20" onclick="javascript:stateChange(2, 0)"></td>
    <td id="cell21" onclick="javascript:stateChange(2, 1)"></td>
    <td id="cell12" onclick="javascript:stateChange(2, 2)"></td>
  </tr>
</table>
<div id="viewer">
</div>

<script type="text/javascript">
var ClassTable = {'':'o', 'o':'x', 'x':''};
function stateChange(r, c) {
  var state = wave.getState();
  if (state) {
    var cell = document.getElementById('cell' + r + c);
    cell.className = ClassTable['' + cell.className];
    state.submitValue(cell.id, cell.className);
  }
}

function stateChanged() {
  var state = wave.getState();
  if (state) {
    var ids = state.getKeys();
    for (var i = 0; i < ids.length; i++) {
      var id = ids[i];
      var elm = document.getElementById(id);
      elm.className = state.get(id, '');
    }
  }
}

function init() {
  if (wave && wave.isInWaveContainer()) {
    wave.setStateCallback(stateChanged);
  }
}
gadgets.util.registerOnLoadHandler(init);
</script>
    ]]>
  </Content>
</Module>