サイトアイコン Embarcadero RAD Studio, Delphi, & C++Builder Blogs

RAD ServerとSencha CRUDグリッド

この記事では、RAD Serverデータベースエンドポイントウィザードを使って、FireDAC接続により、RAD ServerのRESTエンドポイント(JSON Webサービス)を作成します。そして、データのCRUD(Create/Read/Update/Delete)操作を行うグリッドを持つSencha Webクライアントを作成し、これを利用します。

RAD Serverの構築手順

1. RAD Studio(DelphiまたはC++Builder)から、[ファイル|新規作成|その他]メニューを選択し、「RAD Server」カテゴリの「RAD Serverパッケージ」を選択して[OK]ボタンをクリックします。

2. RAD Serverパッケージウィザードで、「リソースを含むパッケージを作成する」を選択します。

[次へ]ボタンをクリックします。

3.「リソース名」に任意の名前を入力します。ファイルの種類に「データモジュール」を選択します。

[次へ]ボタンをクリックします。

4.「エンドポイント」ページで、「Sample End Points」と「API Documentation」の選択を解除し、「Database EndPoints」を選択します

[次へ]ボタンをクリックします。

5.「接続名」で既存のFireDAC接続を選択し、データベースにログインします。

正しいログイン情報を入力したら、[OK]ボタンをクリックします。

6.Sencha CRUDグリッドdWebアプリケーションに使用する1つ以上のテーブルを選択します。ここでは、EMPLOYEEデータベースからCOUNTRY、CUSTOMER、EMPLOYEEテーブルを選択します。

[完了]ボタンをクリックします。

7. ウィザードは、FireDACによるデータベース接続(FDConnection)、COUNTRY、CUSTOMER、EMPLOYEEの各テーブルに対するクエリー(qryCountry、qryCustomer、qryEmployee)、RAD Server (EMS) DataSetResourceコンポーネントが配置されたデータモジュールを生成します。

新しいEMSDataSetResourceコンポーネントを使用すれば、RAD Serverアプリケーションに接続するデスクトップ、マルチデバイス、Web、その他のサービスベースアプリケーションによって取得されるデータをより詳細に制御できます。この新しいコンポーネントにより、RAD Serverアプリケーションは、データセットのすべてのデータあるいはデータの特定ページへのアクセス、データセットレコードの更新、新しいデータセットレコードの作成、データセットエントリの削除といった機能を提供できます。

8.手順4で使用したウィザードの「エンドポイント」の箇所では、各テーブルにTEMSDataSetResourceコンポーネントも追加しています。オブジェクトインスペクタで確認すると、これらのテーブルのAllowed Actionsプロパティの各値(List、Get、Post、Put、Delete)にTrueが設定され、完全なCRUD機能が提供されていることが分かります。

9.[ファイル|プロジェクトに名前を付けて保存]メニューで、RAD ServerモジュールをRadServer_Sencha_CRUDという名称で保存します。

10.RAD Serverモジュールをビルドして実行します。RAD Serverログには、テーブルのデータにアクセスするためのRESTエンドポイントが表示されます。例えば、EMPLOYEEテーブルのGETには、次のようなRESTエンドポイントがあります。

[crayon-67689cd738f52911297305/]

このエンドポイントは、http://localhost:8080/mydata/EMPLOYEE/ になります。

11.このRESTエンドポイントをテストするには、RAD ServerコンソールUIで[ブラウザを開く]ボタンをクリックします。そして、URLに、http://localhost:8080/mydata/EMPLOYEE/ と入力します。これは、従業員テーブルデータを取得するためのJSON Webサービスです。

ブラウザには、JSON配列の形式で返されたEMPLOYEEテーブルのデータが表示されます。

以上でRAD Server側の構築は完了です。次に、このデータを使用するCRUDグリッドが配置されたSencha Webクライアントアプリケーションを作成しましょう。

Sencha Webクライアントアプリケーションの構築手順

1.Sencha Architectを起動します。

2.[New Project|Blank|Classic Project]を選択し[Create]ボタンをクリックします。

3.新しいSencha ExtJS Classsic Webアプリケーションが作成されました。

4.Sencha Data UI Builderアイコン をクリックします。

5.「Data Source」項目で「JSON Web Service」を選択します。

6.「Model Name」に「MyModel」と設定し、「URL」に使用するREST WebサービスのURL「http://localhost:8080/mydata/EMPLOYEE/」を入力します。

7.「Parts to Create」で、すべての項目(Model、Store、List View、Details View、Form View、Controller)にチェックを入れ、[Import Fiedls]ボタンをクリックします。

8.EMPLOYEEテーブルのすべての列(フィールド)が追加されます。

9.[Generate]ボタンをクリックします。

10.Sencha Project Inspectorを見ると、プロジェクトにビューとモデルが追加されたことが確認できます。

11.「MyModels」ビューを選択します。Senchaパネルには、初期ビューが表示されています。ここには、データのCRUD機能を提供する[Add][Edit][Remove]ボタンがあります。

以上で、RAD Server上で動作するFireDAC接続によるRAD ServerのRESTエンドポイント(JSON Webサービス)を、RAD Serverデータベースエンドポイントウィザードを用いて簡単に作成し、Sencha WebクライアントからCRUDグリッドによって利用する例を示しました。一連の手順が、極めて簡単であることをご理解いただけたと思います。

RAD Serverアプリケーションの構築は、RAD Studioトライアル版でお試しいただくことができます。

Sencha Webアプリケーションの構築(およびSencha Architect)については、Sencha Ext JSトライアル版でお試しいただくことができます。

モバイルバージョンを終了