Google Wave Gadgetsを弄ってみる、その２

　京都GTUGのGoogle Wave Hackathon勉強会の資料を参考にGadgetsを作ってみる。

で、上記投票ガジェットを写経してみる。

　最初に、UIを作成する。

　Google Gadgets Editorでimgファイルの指定がイマイチわからないのでCanvas*1を使用する。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="voting sample"/>
  <Content type="html"><![CDATA[
    <script type="text/javascript">
//To Do
//canvas要素を操作するjavascriptを追加
    </script>
<table>
    <tr>
    <td><canvas id="circle" width="100" height="100"></canvas></span><span id="valinc" >0</span></span></td>
    <td><canvas id="cross" width="100" height="100"></canvas></span><span id="valdec" >0</span></span></td>
    <td><span id="result" style="font-size:20pt">0</span></td>
  </tr> 
</table>
<input type=button value="Reset"> 
]]>
  </Content>
</Module>

　HTMLの雛形は完成。
次にjavascriptでcanvas操作、○と×を描画。

onload = function() {
    circle();
    cross();
};

function circle() {
    var canvas = document.getElementById('circle');
    if( ! canvas || ! canvas.getContext ){
	return false;
    }
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, Math.PI*2, false);
    ctx.stroke();
};

function cross() {
    /* canvas要素のノードオブジェクト */
    var canvas = document.getElementById('cross');
    /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
    if ( ! canvas || ! canvas.getContext ) {
	return false;
    }
    /* 2Dコンテキスト */
    var ctx = canvas.getContext('2d');
    /* 四角を描く */
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(80, 80);
      
    ctx.moveTo(20, 80);
    ctx.lineTo(80, 20);
    ctx.closePath();

    ctx.stroke();
};

見た目は完成＞＜

　次は、WaveAPIだな

*1:Canvas - HTML5.JP