dev.Floriansweb > Blog Archive > Javascript MVC Framework with Google Gears ORM
http://dev.floriansweb.com/?p=34

以下超約 †

Jamal is a set of conventions and small javascript libraries to archieve 
a complete separation of html, css and javascript in your web application. 
Jamal is built on jQuery and inspired by MVC frameworks like Ruby on Rails,
CakePHP and its derivatives.

Jamalは、あなたのWebアプリケーションにおいて、HTML, CSS, JavaScriptを完全に分離する小さなJavaScriptライブラリのセットです。

The MVC concept:
   * Controller: Interaction with the user interface (events)
   * Model: Business Logic and AJAX calls
   * View: DOM, CSS modifications

コントローラ: JavaScriptのイベントを処理する
モデル: ビジネスロジックとAjax呼び出し
ビュー: DOMとCSSの修正

Google Gears just crys for a MVC Framework!
It would be perfect to integrate Google Gears into Jamal.

Google GearsはMVCフレームワークのためのたんなるcrys！！！！ (crysがわからん

)
Google GearsとJamalは完全に相互作用できる。

↑

[edit]

って、これ凄いんじゃないですか?! †

これって、
Ajax時代の、サーバ<->クライアントで協調するMVCフレームワーク：Goodpic
http://www.goodpic.com/mt/archives2/2005/09/ajaxmvc.html

で紹介されていたようなアーキテクチャみたいですね。
MVCだから、Google Gearsを使う場合はクライアントサイドのModelを、
1. オンライン時はサーバーにAjaxで情報をとりにいく
2. オフライン時はGearsのSQLiteに情報をとりにいく
のようにすることで、クライアントサイドのCやV、サーバーサイドのMVCいずれも変更しなくてよいようにするってことだろうか。そうだったらすごいなぁ。

↑

[edit]

とりあえずGearsの前に、付属のDEMOを解析してみる †

いろいろ探して見ましたが、どうやらJamalは今のところドキュメントはないっぽいです。
http://jamal-mvc.comから、 jamal-0.4a-29.tar.gzを落として、付属されているDEMOをのぞいてみました。
(0.3.5はStableってことですが0.4と比べてかなりシンプル)

DEMO
http://okra.ark-web.jp/~shida/sandbox/jamal/demo/

↑

[edit]

ディレクトリ構造 †

こんな感じ。

+- index.html
+- js/
     +- jquery.js
     +- jamal_packed.js
     +- app_model.js
     +- app_view.js
     +- app_controller.js
     +- models
          +- foo.js
     +- views/
          +- foos.js
     +- controllers
          +- bars_controller.js
          +- foos_controller.js

ソースをのぞいてみると、まだ、バージョンは0.4なので発展途上って感じもしますが、ソースの書き方はこんな感じで、Javaか、PHPかと思うように完全にオブジェクト指向です。
(JavaDocみたいのもかいてます)

↑

[edit]

呼ばれる順番 †

index.html
ブラウザに読み込まれて、各種scriptがロードされる

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jamal_packed.js"></script>
<script type="text/javascript" src="js/app_model.js"></script>
<script type="text/javascript" src="js/app_view.js"></script>
<script type="text/javascript" src="js/app_controller.js"></script>
<script type="text/javascript" src="js/models/foo.js"></script>
<script type="text/javascript" src="js/views/foos.js"></script>
<script type="text/javascript" src="js/controllers/bars_controller.js"></script>
<script type="text/javascript" src="js/controllers/foos_controller.js"></script>

jamal_packed.jsは、jamal.js、controller.js, model.js, view.js, metadata.js, startup.jsをくっつけて難読化したものっぽいです。おそらく。
app_model.js, app_view.js, app_controller.jsは、Railsでいうところの、application.rbとか、application_helper.rbとかに当たるものですかね。
models/foo.js, views/foos.js, congtrollers/controllers.jsなどは自分で作るものです。

jamal.configure(); (jamal.js line: 298)
初期化に当たるものらしい。bodyのclass属性
```
<body class="jamal {controller:'Foos',action:'index',debug:true}">
```
が読み込まれて、実行されるべき、ControllerとActionが設定されるみたい。
jamal.start(); (jamal.js line: 181)
load()を読み込み、その結果、エラーがあればエラー処理する、見たいな感じか。
jamal.load(); (jamal.js line: 330)
上記、<body>タグで、指定されたcontrollerのactionメソッドの呼び出し。componentも追加呼び出しできるみたい。
FoosController.index(); (foos_controller.js line: 39)
＜a＞タグのonclickが呼ばれたら、ViewのshowMoreContentを呼ぶように設定
```
index: function() {
    $('a').click(function(){
        $j.v.Foos.showMoreContent($(this).parent());
    });
}
```
Viewはフレームワークが勝手に呼ぶのではなくて、Controllerが自分で呼ぶみたい。

FoosView.showMoreContent(); (foos_controller.js line: 33)
ここに、実際のDOM操作などを書く、と。

showMoreContent: function(obj){
    $(obj).find('a').remove();
    var content = $(obj).html();
    $(obj).html(content+content+content);
}

↑

[edit]

ControllerがModelを生成してViewに渡す例 †

動くDEMOは無いみたいですけど、demoディレクトリにあるBarsControllerの方は、Modelにデータをセットしてビューでそれを表示するサンプルっぽいです。

$j.c({Bars: {
    index: function(filter) {

        $('a.clickme', filter).click(function() {

           // every jamal model comes with a json method right away
            $j.current.m.json('/get/json/from/this/url', function(response) {

                $j.current.v.showNewContent(response.content);

                // if you want to reinitialize the new content, e.g. register
                // events. use the init method. it starts your controller again.
                $j.current.init($('div.newcontent'));
            });
            return false;
        });
    }
}
});

↑

[edit]