Ext JS

BanchaでCakePHPとSenchaフレームワークを統合する

こんにちは、ゼノフィkotsutsumiです。

この記事は、US Sencha社ブログ “How to Integrate CakePHP and Sencha Frameworks with Bancha”を翻訳したものです。


沢山のデータを扱うExt JSアプリケーションを開発する時には、バックエンドのシステムとの多分back-endシステムとのデータ変換や同期たくさんの開発時間がかかったことでしょう。データ転送の方法は沢山ありますが、我々のシステムではExt.Directを使うことにしました。Ext.DirectはSenchaの技術でExt JS及びSencha Touchライブラリーに実装されています。


初めに

私たちは軽量なPHP MVCフレームワークであるCakePHPの大ファンです。 Ext.Directのフォーマットで全てのデータを提供するようにCakePHPを拡張するBanchaを作る事にしました。 Banchaは全ての必要なデータ転送、整理、ディスパッチャーの拡張を行います。 CakePHPの中ではCakeスタイルでフロントエンドではExt JS形式でデータを提供します。

phpdocsのコメントで@banchaRemotableとつけるだけでコントローラーの関数をJavaScriptに公開することができます。


モデルのマッピング

上記の拡張は本当に便利で大切な時間も省けます。 しかし、まだモデル構造やリレーションシップ、バリデーションルールの定義といったタスクををPHPとJavaScriptの両方でしていたので私たちはまだ満足していませんでした。 システムをチーム環境で最新にしておくために人間のフォロースルーに頼って実装することは、人為的ミスを犯す危険性が増します。

Banchでは、Cake PHPのモデルを自動的に解析しExt JSやSencha Touchに対応したスキーマを生成することでこの問題を解決します。


自動的CRUDのサポート

我々の次の段階は自動化を進める為に、BanchaBehaviorが有効な全てのモデルに自動的にCRUDのフルサポートを提供することです。 CakePHPのコンソールで自動的にControllerを作れますし、 または現在あるcontrollerのクラスに5行のコードを追加すれば自動的にCRUDサポートが可能になります。 この強化で、どのCakePHPのモデルでも、JavaScriptに実装を追加せずに自動的なCRUDサポートを実現することができます。


Bancha.Scaffold

CakePHPの大きい強みは、迅速なアプリケーション開発にフォーカスしている点です。 その考えを取り込んでBanchaの中にもスカッフォルディングを実装し、そのお陰で全体的な開発とテスティングの時間を削減できました。

注: このライブラリはMITのライセンスのもとにスタンドアロンでも利用できます。
http://scaffold.banchaproject.org/ をご覧ください。


例:

それでは、CakePHPを使った典型的な迅速な開発プロセスを見てみましょう。 最初はブックストアのデータベースのテーブルを作って、データの構成を定義します。


CREATE TABLE `books` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `title` VARCHAR(32) NOT NULL,
    `author` VARCHAR(32) NOT NULL,
    `publish_date` DATE NOT NULL,
    PRIMARY KEY (`id`)
  )

次はアプリケーションの最初のプロトタイプを作る為にプロセスをCakePHPの中で初める。CakePHPではデータベースの図式を元にしてコントローラーズ、Viewsやモデルを「焼く」(Bake)するコマンドラインのツールが与えられている。BakeコンソールはどのCakePHPの根本的な材料を作れる:モデル、Views、コントローラーズ。骨組みの足場だけに限らせることもできるつつ、CakePHPのBakeは全ての機能が使えるアプリケーションを数分で作れる。Banchaと一緒に、その行動を延ばしてCRUDサポートを自動化する

ブックステーブルのMVC全体をスカッフォルディングするためにBakeを使います。 Shellで、コンソールにcake bake all;とタイプし、templateでは「Bancha」を選択します。

そうすると 次の行をモデルに入れることで、 Banchaがモデルを公開するように設定できます:public $actsAs = array(“Bancha.BanchaRemotable”);

それで終わりですーまあ、CakePHP Bake側ではですが。 バックエンドは設定および生成され、コントローラーにログインする作業を追加してテスト、修正する準備ができました。


JavaScript側

次にブック管理のページをスカッフォルディングします。

Banchaはモデルを作る為に簡単なインターフェースを備えています。 このモデルはサーバーから全てのフィールド、バリデーション、アソシエーションと完全にコンフィグされたProxyを取得します。

onModelReadyメソッドで Banchaに (もしまだ使用可能ではなかったら)モデル定義をサーバーからロードするように指示できますし、 Ext JSでは、次のコマンド(二番目の引数はコールバックになっています)でCakePHPのBookモデルを作れます。


Bancha.onModelReady(‘Book’, function() {...})

あとはBanchaがやってくれます。これが終わったら、追加のExt JSコードをを書き始めることができます。

Bancha.Scaffoldは最小限の入力で迅速にGridとFormを作ることができます。 新しいアプリケーションのメインページに全ての部分を組み合わせます。


Bancha.onModelReady(‘Book’ function() {
    Ext.create('Ext.grid.Panel', {
        scaffold: Bancha.model.Book, // Bancha.Scaffold will take all information from the model
        title: 'Book Management Grid with full CRUD support',
        renderTo: Ext.getBody(),
        frame: true
    });
  });

これはBanchaのちょっとした紹介です。 Banchaについてもっと詳しい情報は banchaproject.org をご覧ください。そこにもっと長いチュートリアルやその他色々がのっています。

BanchaはOpen Sourceとコマーシャルライセンスの デュアルライセンス で使えます。

楽しいコーディングを!

PAGE TOP

Copyright © 2006-2014 Xenophy.CO.,LTD All rights Reserved.