コツコツ拡張Cloud9。APFの仕様 ui.ajax.org はChromeで見よう。

apfのドキュメント、ありました。

APFは、Ajax.orgで開発されているフレームワークです。

2012/02/08現在、Ajax.org にアクセスすると、Cloud9（c9.io）に飛ばされます。

ui.ajax.org でドキュメントを公開している、ということでアクセスすると、SafariでLoading...と表示されたまま進まず。ドキュメントが無いものと諦めておりました。

で、Chromeで見れた、というオチ。

公式サイトでの最終バージョンは2009年2月で2.1。只今2010年2月で3.0 Beta2 Stable。2年経ってもBeta取れてないように見えますが、GitHubのほうは、そこそこ活発です。Cloud9もGitのAPFを使っているようです。

早速ドキュメントを見つつ、昨日の続き。

まずビューから。変更なし。

cloud9/client/ext/datagrid_test/datagrid_test.xml

<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:vbox anchors="0 0 0 0" edge="0 0 0 0">
            <a:datagrid 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>

コントローラを修正。

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);
                    // モデルを作成
                    var model = new apf.model();
                    // Documentノードを取得
                    var doc = winDatagrid.ownerDocument;
                    // data 要素を作成
                    var data = doc.createElement('data');
                    // 思い切って1000件追加
                    for(var i=0; i<1000; i++) {
                        // member要素を作成
                        var member = doc.createElement('member');
                        // name属性を設定
                        member.setAttribute('name', 'なまえ' + i);
                        // cv属性を設定
                        member.setAttribute('cv', 'CV' + i);
                        // data要素の子要素としてmember要素を追加
                        data.appendChild(member);
                    }
                    // data要素をmodelに読み込む
                    model.load(data);
                    // datagridのmodel属性にmodelを設定
                    winDatagrid.setAttribute("model", model);
                    // datagridを表示
                    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 = [];
    }
});

});

結果

これで取得したJSONデータをマッピングできそうです。APFにはJSONとAMFの変換ないのかしら。