イントロダクション

Sencha データパッケージは、アプリケーションのあらゆる種類のデータに接続するプロキシをSencha Complete: TeamのExt JS 4.1.2で提供しています。 開発者は、SOAPウェブサービスを利用することができるようになりました。 最も人気のあるWEBサービスプロトコルの１つであるSOAPを、開発者はアプリケーションデータ接続の１つとして選択できるようになりました。

SOAPプロキシは、他のプロキシと同様に、ストアと連動して動作します。データモデルの構成に組み込まれるので、詳細な動作の違いなどを心配する必要はありません。

SOAPとは

SOAP (Simple Object Access Protocol)は、アプリケーションがリモートウェブサービスと通信するためのXMLベースのプロトコルです。 SOAP にはいくつかの利点があります。 それは、プロトコルに依存せず、HTTP、SMTP、またはJMS上でSOAPメッセージをやりとりすることができます。 どのようなクライアントでも、オブジェクトやメソッドの厳密なやりとりを提供します。 しかし、厳密なやりとりのため、他の通信プロトコルと比べて少し遅いです。 SOAP サービスは、Web サービス記述言語 (WSDL) ファイルで定義されます。 クライアントは、メソッドとデータ型を表示します。 あなたは、そのやりとりを開発することができます。

SOAP クライアントは特別な形式のXMLドキュメントで、 SOAP エンベロープの周りを渡すことによって、サービスと対話します。 エンベロープは、要求と、要求固有の必要な情報を含むボディを持つアプリケーション固有の情報を 渡すためのオプションのヘッダーで構成されます。 以下のサンプルは、要求と応答の getPeople と Person オブジェクトを返すという単純なサービスの 使用別のエンベロープはを見せています。

サンプルリクエスト:

<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
 <soap:Body>
  <getPeople xmlns="http://samples/xsd"></getPeople>
 </soap:Body>
</soap:Envelope>

サンプルレスポンス:

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/">
 <soapenv:Body>
  <ns:getPeopleResponse xmlns:ax219="http://rpc.xml.coldfusion/xsd" xmlns:ns="http://samples/xsd">
   <ns:return xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ns:Person">
    <ns:firstName>Kevin</ns:firstName>
    <ns:id>1</ns:id>
    <ns:lastName>Kazmierczak</ns:lastName>
   </ns:return>
   </ns:getPeopleResponse>
 </soapenv:Body>
</soapenv:Envelope>

サンプルアプリケーション

新しい SOAP プロキシを試すには、ColdFusion コンポーネント (CFC) を使用して作成した ColdFusion ウェブサービスと通信するサンプル CRUD アプリケーションを構築します。 ColdFusion SOAP WSDL ファイルをちょうど CFC のメソッドとしてアクセス「リモート」 マークすることによって生成する本当に簡単な方法を提供します。

アプリケーションは、SOAP プロキシ経由で提供されるデータの単純なグリッドを示しています。 レコードを編集または削除するをダブルクリックします。 右上のプラスボタンを押すと新しいレコードを挿入します。 すべてこれらの相互作用の中には、Chrome デベロッパー ツールのようなツールまたは Firebug はネットワーク要求を表示できるようになります実行している、だから裏で起っていることも見ることをお勧めします。

サーバーセットアップ

ColdFusion 10 と Apache Tomcat 7 をサーバー上にセットアップします。 ColdFusionアプリケーションコンテナの中に、CFCと4つのリモートメソッドを作成しました。 create, read, update, delete で、シンプルに‘Person’というオブジェクトです。 このサービスは、ただ次のデモンストレーションで使用するために、モックデータを取得、リセットするだけの動きをします。

データセットアップ

モデルオブジェクトは、いくつかの基本的なプロパティからなる非常に単純なPersonオブジェクトです。

Ext.define('SampleApp.model.Person', {
 extend: 'Ext.data.Model',
 fields: [
  {
   name: 'id',
   type: 'int'
  },
  {
   name: 'firstName',
   type: 'string'
  },
  {
   name: 'lastName',
   type: 'string'
  }
 ]
});

SOAPプロキシは、どこで詳細を取得するか内部のストアオブジェクトに設定します。

Ext.define('SampleApp.store.People', {
 extend:'Ext.data.Store',
 model:'SampleApp.model.Person',
 autoLoad:true,
 proxy: {
  type: 'soap',
  url: '/cfusion/samples/People.cfc',
  api: {
   create: 'createPerson',
   read: 'getPeople',
   update: 'updatePerson',
   destroy: 'deletePerson'
  },
  soapAction: {
   create: 'http://localhost:8080/cfusion/samples/People.cfc',
   read: 'http://localhost:8080/cfusion/samples/People.cfc',
   update: 'http://localhost:8080/cfusion/samples/People.cfc',
   destroy: 'http://localhost:8080/cfusion/samples/People.cfc'
  },
  operationParam: 'operation',
  targetNamespace: 'http://samples/xsd'
  reader: {
   type: 'soap',
   record: 'ns|return',
   namespace: 'ns'
  }
 }
});

多くのオプションがここにあります。詳細を見てみましょう。

• type: ‘soap’
  • 新しい SOAP プロキシを使用するプロキシを設定します。
• url: ‘/cfusion/People.cfc’
  • 定義用の api メソッドを使用する基本の URL を提供します。 ブラウザーのセキュリティ ポリシーにより、この URL はアプリケーションと同じドメインになければなりません。 リモート SOAP サービスにアクセスする必要がある場合は、サーバー側のプロキシ サービスのようなカスタム セットアップを行う必要があります。
• api
  • 作成に対応する、読み取り、更新で構築されたを破壊する SOAP 操作を定義するアクションを格納します。のみを使用する計画しているメソッドを定義する必要があります。
• soapAction
  • 各 CRUD メソッドで使用される Url を定義します。SOAP 仕様では要求ヘッダーで渡されるには、この情報が必要です。
• operationParam: ‘operation’
  • CRUD 要求に使用される操作を指す、SOAP サービスで、パラメーターの名前を定義します。
• targetNamespace: ‘http://samples/xsd’
  • SOAP エンベロープを構築に使用される XML 名前空間。あなたはこの WSDL コントラクトで定義されていると一致するようにします。
• reader
  • SOAP リーダーこのプロキシ設定し、言う SOAP 応答を解析するときのレコードのオブジェクトを使用します。また必要なときに使用する名前空間の応答を解析です。

一度、ストアとモデルのセットアップを持って、すべてを行う必要がお客様データをポイントするビューを作成します。以下は、ストアと、モデルからデータを表示するサンプル グリッド ビューです。

Ext.define('SampleApp.view.ListView', {
 extend:'Ext.grid.Panel',
 title: 'Person List',
 alias: 'widget.listView',
 store: 'People',
 columns: [
  {
   text: 'Id',
   flex: 1,
   dataIndex: 'id'
  },
  {
   text: 'First Name',
   flex: 1,
   dataIndex: 'firstName'
  },
  {
   text: 'Last Name',
   flex: 1,
   dataIndex: 'lastName'
  }
 ],
 tools: [{
  type: 'plus'
 }]
});

すべてを一緒に引っ張るするときは、次のようなグリッドを取得します。

コンフィグオプション

この例で使用されていないが、非常に有用である他のいくつかのオプションが SOAP プロキシにはあります。 プロキシを自動的に生成されていない特定の形式のエンベロープ オブジェクトが通信して SOAP サービスが必要な場合は、それが XTemplate の文字列を使用してそれらを作成する方法をオーバーライドできます。 プロキシは CRUD のメッセージ エンベロープを上書きする機能を公開します。以下は基本の封筒をオーバーライドして、オブジェクトのテンプレートを読む方法の 2 つの例です。

proxy: {
  ...
  envelopeTpl: [
    '<?xml version="1.0" encoding="utf-8" ?>',
    '<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">',
      '{[values.bodyTpl.apply(values)]}',
    '</s:Envelope>'
  ],
  readBodyTpl: [
    '<s:Body>',
      '<{operation} xmlns="{targetNamespace}">',
        '<tpl foreach="params">',
          '<{$}>{.}</{$}>',
        '</tpl>',
      '</{operation}>',
    '</s:Body>'
  ]
}

おわりに

SOAP プロキシの追加をデータ ストアがデータの全く新しいセットに接続を簡単になります。 すべてのオプションは、既存の SOAP サービスに接続できるようにまたは建設中の新しいものです。 開発者についての詳細を心配する必要はありません、 彼らがする必要がある、プロキシを構成およびフレームワーク） の残りの世話をします。

リソース サンプルコード