コツコツ拡張。Cloud9 IDEでDataGridを表示してみる。

Cloud9 IDEをコツコツ拡張しています。資料が少なくてなかなか進まないのですが。

今日はデータグリッドを表示してみます。

Cloud9ではapf(Ajax Platform Framework)と呼ばれる技術でMVC制御しています。Viewは、http://ajax.org/2005/amf で定義されたマークアップを使います。このapfのドキュメントがほぼ皆無で泣きそうになります。一番の参考資料はソースコード。

早速作っていきます。まずはクライアントの拡張スクリプトから。

cloud9/client/ext/datagrid_test/datagrid_test.js

define(function(require, exports, module) {
    var ide = require('core/ide');
    var ext = require('core/ext');
    var markup = require('text!ext/datagrid_test/datagrid_test.xml');
    
module.exports = ext.register('ext/datagrid_test/datagrid_test', {
    name   : "Datagrid Test",
    dev    : "Tomoyuki Inoue",
    alone  : true,
    type   : ext.GENERAL,
    markup : markup,
        
    nodes  : [],
        
    hook : function(){
        var _self = this;
        this.nodes.push(
            mnuWindows.insertBefore(new apf.item({
                caption : "Datagrid Test",
                onclick : function(){
                    ext.initExtension(_self);
                    winDatagrid.show();
                }
            })
        ), mnuWindows.firstChild);
    },
        
    init : function(apfNode){},
        
    nable : function(){
        if (!this.disabled) return;
        
        this.nodes.each(function(item){
            item.enable();
        });
        this.disabled = false;
    },
    
    disable : function(){
        if (this.disabled) return;
        
        this.nodes.each(function(item){
            item.disable();
        });
        this.disabled = true;
    },
    
    destroy : function(){
        this.nodes.each(function(item){
            item.destroy(true, true);
        });
        this.nodes = [];
    }
});

});

次にビューです。まだ理解が進んでいないので、悔しいですがViewにモデルを突っ込みます。

<a:application xmlns:a="http://ajax.org/2005/aml">
    <a:window
      id        = "winDatagrid"
      title     = "放課後ティータイム"
      icon      = ""
      center    = "true"
      resizable = "true"
      buttons   = "close"
      modal     = "false"
      skin      = "bk-window"
      width     = "660"
      height    = "400"
      kbclose   = "true"
      draggable = "true">
        <a:model id="mdlDatagridTest">
            <data>
                <member name="平沢 唯" cv="豊崎 愛生"></member>
                <member name="秋山 澪" cv="日笠 陽子"></member>
                <member name="田井中 律" cv="佐藤 聡美"></member>
                <member name="琴吹 紬" cv="寿 美菜子"></member>
                <member name="中野 梓" cv="竹達 彩奈"></member>
            </data>
        </a:model>
        <a:vbox anchors="0 0 0 0" edge="0 0 0 0">
            <a:datagrid model="mdlDatagridTest" flex="1">
                <a:each match="[member]">
                    <a:column caption="メンバー名" value="[@name]" width="50%" />
                    <a:column caption="CV" value="[@cv]" width="50%" />
                </a:each>
            </a:datagrid>
        </a:vbox>
    </a:window>
</a:application>

で、拡張を有効に。Extension Managerを使っても良いのですが、Cloud9サーバ起動時に有効になるようにしてみます。90行目から140行目くらいまでのIde.DEFAULT_PLUGINの最後に一行追加します。

client/server/ide.js

Ide.DEFAULT_PLUGINS = [
    "ext/filesystem/filesystem",
    "ext/settings/settings",
    "ext/editors/editors",

    .....

    "ext/tabsessions/tabsessions",
    // 追加
    "ext/datagrid_test/datagrid_test"
];

Cloud9 IDEを再起動して動作を確認してみます。

ひとまず表示に成功。日本語もOK。ヘッダカラムのズレ。。。こういうのは原因探すのに苦労しそう。