プレビュー公開が始まったGoogle Wave「超」入門

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="VoteGadget">
    <Require feature="wave"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
     <table border="1" style="empty-cells:show;">
     <!-- 投票ボタンの行 -->
     <tr>
     <td>賛成の人<input type="button" value="投票" onclick="vote(true)"/></td>
     <td>反対の人<input type="button" value="投票" onclick="vote(false)"/></td>
     <td>まだの人</td>
     </tr>
     <!-- 票数カウントの行 -->
     <tr>
     <td><span id="labelCountAgree"></span></td>
     <td><span id="labelCountDisagree"></span></td>
     <td id="labelCountNotyet"></td>
     </tr>
     <!-- 投票した人のアイコンを表示する行 -->
     <tr>
     <td id="agreeIcons"></td>
     <td id="disagreeIcons"></td>
     <td id="notyetIcons"></td>
     </tr>
     </table>
    
    <script type="text/javascript">
    
        var icons = {}; //ユーザーアイコンを保存しておくオブジェクト
    
        // 初期化処理
        function init(){
            if (wave && wave.isInWaveContainer()) {
                //State更新時の処理を登録
                wave.setStateCallback(stateUpdated);
                // 参加者の更新処理を登録
                wave.setParticipantCallback(participantUpdated); 
            }
        }
    
        //初期化処理を登録する
        gadgets.util.registerOnLoadHandler(init);
    
        // 参加者情報が更新されたときの処理
        function participantUpdated(){
            var participants = wave.getParticipants(); // 参加者の配列を取得
            for (var i = 0, l = participants.length; i < l; i++) {
                var id = participants[i].getId();
                // アイコンを更新、新しい参加者のアイコンは新たに生成する
                var icon = icons[id] || document.createElement('IMG');
                icon.src = participants[i].getThumbnailUrl();
                // icons オブジェクトに登録
                icons[id] = icon;
            }
        }
    
        // 投票ボタンを押したときの処理
        function vote(agree){
            var state = wave.getState(); //Stateオブジェクトを取得
            //Stateに、ユーザーIDをkey、賛否をvalueとして格納
            state[wave.getViewer().getId()] = (agree) ? "agree" : "disagree";
            //Stateの更新を送信
            wave.getState().submitDelta(state);
        }
    
        //Stateが更新されたときの処理
        function stateUpdated(){
            var participants = wave.getParticipants(); // 参加者の配列を取得
            var countAgree = 0;
            var countDisagree = 0;
    
            for (var i = 0, l = participants.length; i < l; i++) {
                var id = participants[i].getId();
                var icon = icons[id];
    
                var cell;
    
                //どのセルにアイコンを入れるかの判定、賛成者・反対者のカウント
                if ('agree' == wave.getState().get(id)) {
                    cell = document.getElementById('agreeIcons');
                    countAgree++;
                }else if ('disagree' == wave.getState().get(id)) {
                    cell = document.getElementById('disagreeIcons');
                    countDisagree++;
                } else
                    cell = document.getElementById('notyetIcons');
                cell.appendChild(icon); //アイコンを移動
            }
            // 賛成者・反対者の数を表示
            document.getElementById('labelCountAgree').innerHTML= countAgree + '人';
            document.getElementById('labelCountDisagree').innerHTML= countDisagree + '人';
        }
    
    </script>
  ]]>
  </Content>
</Module>

// 初期化処理
function init(){
    if (wave && wave.isInWaveContainer()) {
        //State更新時の処理を登録
        wave.setStateCallback(stateUpdated);
        // 参加者の更新処理を登録
        wave.setParticipantCallback(participantUpdated);
    }
}

// 参加者情報が更新されたときの処理
function participantUpdated(){
    var participants = wave.getParticipants(); // 参加者の配列を取得
    for (var i = 0, l = participants.length; i < l; i++) {
        var id = participants[i].getId();
        // アイコンを更新、新しい参加者のアイコンは新たに生成する
        var icon = icons[id] || document.createElement('IMG');
        icon.src = participants[i].getThumbnailUrl();
        // icons オブジェクトに登録
        icons[id] = icon;
    }
}

    // 投票ボタンを押したときの処理
    function vote(agree){
        var state = wave.getState(); // State オブジェクトを取得
        // State に、ユーザIDをkey、賛否をvalueとして格納
        state[wave.getViewer().getId()] = (agree) ? "agree" : "disagree";
        // State の更新を送信
        wave.getState().submitDelta(state);
    }

// State が更新されたときの処理
function stateUpdated(){
    var participants = wave.getParticipants(); // 参加者の配列を取得
    var countAgree = 0;
    var countDisagree = 0;
    
    for (var i = 0, l = participants.length; i < l; i++) {
        var id = participants[i].getId();
        var icon = icons[id];
    
        var cell;
    
        //どのセルにアイコンを入れるかの判定、賛成者・反対者のカウント
        if ('agree' == wave.getState().get(id)) {
            cell = document.getElementById('agreeIcons');
            countAgree++;
        }
        else if ('disagree' == wave.getState().get(id)) {
            cell = document.getElementById('disagreeIcons');
            countDisagree++;
        } else
            cell = document.getElementById('notyetIcons');
        
        cell.appendChild(icon); //アイコンを移動
    }
    // 賛成者・反対者の数を表示
    document.getElementById('labelCountAgree').innerHTML = countAgree + '人';
    document.getElementById('labelCountDisagree').innerHTML = countDisagree + '人';
}