Ext JS

Customer Spotlight: Ext4Yii

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

この記事は、US Sencha社ブログ “Customer Spotlight: Ext4Yii”を翻訳したものです。

Ext4YiiはSencha Ext JSとYiiをベースとしたアプリケーションフレームワークです。 この記事では、Ext4Yiiフレームワークの概要を説明をします。

What is Yii?

YiiはWeb2.0アプリケーションを開発する為のハイパフォーマンスなPHPフレームワークです。 無料で、速く、MVC方式、多数なプラグインやエクステンションもあり、多様なMVCコードジェネレーターを利用してアプリケーションをより速く開発できるようになります。 Yiiとの開発は基本的に3つの段階があります。 まず最初にデータベースを作って、次にYiiを実行してベースとなるPHPコードを生成します。 最後に自分のニーズにぴったり合うようにコードをカスタマイズします。 Yiiフレームワークにはとても大きいユーザーコミュニティがあるので、開発者が使用できる最も高速なフレームワークのうちの一つとしてよく知られています。

Ext4Yiiとは?

Ext4YiiはYiiのエクステンションです。 それはテンプレートのレンダリングシステムに基づいて、Ext JSコンポーネントのサーバー側のタグ ライブラリを提供します。 Ext4Yiiはボタン、グリッド、ストア、組み込みJavaScriptのようなアプリケーションエレメントを定義出来るXMLテンプレートを使います。 XMLのタグはパースされExt JSに変換され、再利用できるようにキャッシュされてからブラウザーに送られます。

ext4yii-2

Ext4YiiはExt JSとYiiの間に透明な接着剤を生成します。 Ext JSのブートストラップの管理をし、イベントリスナを生成し、アプリケーション上のイベント(グローバルなカスタムイベント)を管理し、最も重要となるExt JSコンポーネントとバックエンドPHPのクラスの間のデータコミュニケーションをExt.Directを利用して行います。

Ext4YiiにはいくつかのPHPベースクラスがあり、それらを継承してPHPの中でData Lookupコントローラー、CRUDコントローラーやTreeStoreコントローラーを作ことが出来ます。 自分のXMLテンプレートでこのクラスを指定すると、Ext4Yiiがデータコミュニケーションや例外処理のJavaScriptを生成します。

Ext4Yiiでデータドリブンモジュールを開発するには大体4つの段階があります。 最初はUIエレメント(例:GridPanel)を定義して、その後にデータエレメント(例:StoreとModel)を定義します。 次にPHPコントローラークラス(例:ExtLookupStoreController)を継承して実装し、最後にUIコンポーネントがストアを参照するように、ストアがコントローラーを参照するように設定します。 テンプレートがレンダリングされると、Ext4Yiiがプロキシー生成、オブジェクト作成、など全てが動き始める為の他に必要な段階を管理します。

次はExt4Yiiの中のModel、StoreとUIのサンプルです:

ext4yii-1

これはコントローラーの例です。 この例でデータベースをクエリーしてデータをExt JSにエクスポートします:

ext4yii-4

イベントを扱う為に、Ext4Yiiは指定されたコンポーネントにイベントリスナーとしてレンダリングされるJavaScript関数を組み込む簡単な手段を提供します。

ext4yii-9

Ext4Yiiを使ってJavaScriptからPHP関数を呼び出す事も可能です。 ただExtControllerを継承して@directで関数をタグするだけで、JavaScriptから使うExt.Directプロキシーが生成されます。

ext4yii-3

次はリモートメソッドの呼び出し方を示します。

ext4uii-5

Ext4Yii templates

ほぼ全てのExt JSコンポーネント対して、Ext4Yiiは関連するExt JSのコンフィグオプションに対応するいくつかの属性のXMLタグを提供します。 コンポーネントの仕様に基づいて、各XMLタグはExt JSコンポーネントのより複雑な部分をマップする属性タグをネストすることが出来ます。 開発者が度々API書類によらないで、手動でXMLをコードしなくて良いように、開発者がこのテンプレートを楽に作成出来るようにユーザーフレンドリーなソリューションを作りました。

この問題を解決する為にNetBeans IDEにExt4Yiiは便利なコード完成プラグインが含まれている。 このプラグインはコンポーネントタッグを自動的に完成する以外に、APIドキュメンテーションと自分のコードを行ったり来たりしなくて良いように簡易なExt JSドキュメンテーションも提供します。 "<"を入力するだけで、NetBeansがカーソルの位置によってタグや属性を選択するリストをポップアップします。

ext4yii-7

ext4yii-0

Ext4Yiiのテンプレートは本質的にPHPファイルの為、インラインPHPも利用できます。 例えば`include()`は、簡単なスニペットから複雑なUIエレメントを構築します。

ext4yii-8

まとめ

ソフトウェア開発で一つのレイヤーの上に追加のレイヤーを使うのは利点と弱点があります。 Ext4Yiiも例外ではありません。 次にこのプロダクトを使う時の利点と弱点を説明します:

  • NetBeans IDEを使う事が必須条件です。使わずに手動でXMLテンプレートをコーディングするのはとても非生産的です。
  • しかしNetBeansのプラグインを使うとテンプレートの作成はとても楽になるので、アプリケーションを開発するために書くJavaScriptの量も大分減ります。
  • Ext4Yiiは商用製品なので、自分の組織で使うにはライセンスが必要となります。 その代わりに、もしすでにExt JSのライセンス持ちでしたら、サポートや特別な協定があります。
  • Ext4Yiiはテンプレートレンダリングを使っています。 この為、Ext JSコードがブラウザに作成される前に、常にサーバーが実行する追加のステップがあります。 その代わりサーバーのビジネスルールに基づいたExt JSコンポーネントを仕立てる機会があります。

詳しくは次の情報をご覧ください。

History

Ext4Yiiは、Web開発やPostgreSQLに集中しているオランダを拠点にしたソフトウェア開発会社TrueSoftware B.Vにより開発されました。 金融業界に使われる組織的リスクマネージメントソリューションのベースとしてExt4Yiiの開発を始めました。 その後、Ext4Yiiはチップデザイン業界で使われる割と大きなデザインとマネージメントソリューションとして取り上げられました。 2010年にTrueSoftwareがSenchaからExt JS OEMライセンスを受けた後に、スタンドアロンプロダクトとしてExt4Yiiの開発を始めました。

今後

我々は製品開発の為にExt4Yiiを使っていますので働き続けていますし、いつも改善するように意識しています。 Bryntum ABと一緒にExt SchedulerやExt Ganttのブリッジを提供しようとしています。 プレビューをこっそりお見せしましょう:

ext4yii-6

PAGE TOP

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