Atom または HTTP バインディングを使用した JavaScript でのウィジェット実装の使用 (非推奨)

トスカニーウィジェット実装を使用して、サービスコンポーネントアーキテクチャ（SCA）参照を定義できます。 JavaScriptコード。ウィジェット実装を使用して、SCA サービスが返す JavaScript のデータを処理します。データは Atom コレクションの場合も JavaScript Object Notation (JSON) フォーマットの場合もあります。

事前処理

SCA アプリケーションで Atom バインディングを使用して、データ・コレクションを Atom フィードとして公開したり、既存の外部 Atom フィードを参照したりできます。 Atom プロトコルに精通していない場合は、Atom Syndication Format (Web フィードについて記述した XML ベースの文書フォーマット) に関する文書、および Atom Publishing Protocol (Web リソースを公開および更新するためのプロトコル) に関する文書を参照してください。

JSON-RPC のワイヤー・フォーマットとともに HTTP バインディングを使用すると、リモート Web ブラウザー・クライアントによるコンシュームのために SCA サービスを公開できます。 JSON-RPC とは、JSON フォーマットでエンコードされるリモート・プロシージャー・コール (RPC) プロトコルのことです。

このタスクの概要

SCA コンポーネントでは、JavaScript コードで使用する SCA 参照を定義できます。 Tuscany ウィジェット実装を使用して、参照を定義します。この実装では、JSON-RPC のワイヤー・フォーマットとともに Atom バインディングまたは HTTP バインディングを使用する参照はサポートされますが、SCA サービスの定義はサポートされません。また、この実装では、SCA プロパティーの定義がサポートされます。

ウィジェット実装を使用する SCA コンポジットは、Web アプリケーション・アーカイブ (WAR) ファイル内にデプロイする必要があります。

手順

SCA コンポジット定義でウィジェット実装を構成します。
Tuscany implementation.widget を使用するコンポーネントのために、SCA コンポジット定義ファイルを作成します。以下に例を示します。
```
<composite xmlns="https://www.osoa.org/xmlns/sca/1.0"
           xmlns:tuscany="http://tuscany.apache.org/xmlns/sca/1.0"
           targetNamespace="http://store" name="storeWidget">
  <component name="Store">
    <tuscany:implementation.widget location="ui/store.html"/>
 </component>
</composite>
```
この例では、Tuscanyを使用するStoreコンポーネントを定義します。implementation.widget HTMLファイルでui/store.html。 implementation.widget 定義は、多くの SCA 成果物で使用される "https://www.osoa.org/xmlns/sca/1.0" 名前空間にではなく、"http://tuscany.apache.org/xmlns/sca/1.0" 名前空間にあります。
SCA 参照定義を SCA コンポジット定義に追加します。
Atom バインディングまたは HTTP バインディングを使用する参照を 1 つ以上定義します。 Atom バインディングを使用する SCA 参照の例は、以下のとおりです。
```
<reference name="shoppingCart">
    <tuscany:binding.atom uri="/ShoppingCart/Cart"/>
</reference>
```
JSON-RPC のワイヤー・フォーマットとともに HTTP バインディングを使用する SCA 参照の例は、以下のとおりです。
```
<reference name="catalog">
    <tuscany:binding.http uri="/Catalog"/>
      <tuscany:wireFormat.jsonrpc/>
    </tuscany:binding.http>
</reference>
```
Atom バインディング参照の詳細については、Atom バインディングの使用に関するトピックを参照してください。 HTTP バインディング参照について詳しくは、HTTP バインディングの使用に関するトピックを参照してください。
SCA プロパティー定義を SCA コンポジット定義に追加します。
SCA コンポジット定義ファイルには、1 つ以上のプロパティーを定義できます。以下に例を示します。
```
<property name="currency">USD</property>
```

SCA コンポジット定義を WAR ファイルに追加します。

SCA コンポジット定義を WAR ファイルの META-INF/sca-deployables/default.composite ファイルに保存します。

このトピックの例の場合、完成したコンポジット・ファイルは以下のようになります。

<composite xmlns="https://www.osoa.org/xmlns/sca/1.0"
           xmlns:tuscany="http://tuscany.apache.org/xmlns/sca/1.0"
           targetNamespace="http://store" name="storeWidget">
  <component name="Store">
    <tuscany:implementation.widget location="ui/store.html"/>

       <reference name="shoppingCart">
           <tuscany:binding.atom uri="/ShoppingCart/Cart"/>
       </reference>
       <reference name="shoppingTotal">
           <tuscany:binding.http uri="/ShoppingCart/Total">
             <tuscany:wireFormat.jsonrpc/>
           </tuscany:binding.http>
       </reference>
       <reference name="catalog">
           <tuscany:binding.http uri="/Catalog"/>
             <tuscany:wireFormat.jsonrpc/>
           </tuscany:binding.http>
       </reference>

       <property name="currency">USD</property>

  </component>
</composite>

ウィジェット実装のために SCA コンポジット定義で指定されている HTML ファイルを作成し、それを WAR ファイルに追加します。

この HTML ファイルでは、SCA 参照および SCA プロパティーを定義し、必要なスクリプト・エレメントを、Atom バインディングまたは HTTP バインディングの使用に関するトピックの説明のとおりに定義します。この例で使用する ui/store.html ファイルは以下のようになります。

<html>
<head>
<title>Store</title>

<script type="text/JavaScript" src="../dojo/dojo.js"></script>
<script type="text/javascript>>
     dojo.registerModulePath("tuscany", "/Store/tuscany");
     dojo.require("tuscany.AtomService");
     dojo.require("dojo.rpc.JsonService");
</script>
<script type="text/JavaScript" src="/Store/store.js"></script>
<script language="JavaScript">

  //@Reference
  var catalog = new tuscany.sca.Reference("catalog");

  //@Reference
  var shoppingCart = new tuscany.sca.Reference("shoppingCart");

  //@Property
  var currency = new tuscany.sca.Property("currency");

  var catalogItems;

  function catalog_getResponse(items,exception) {
    var catalog = "";
    for (var i=0; i < items.length; i++) {
      var item = items[i].name + ' - ' + items[i].price;
      catalog += '<input name="items" type="checkbox" value="' +
        item + '">' + item + '<br>';
    }
    document.getElementById('catalog').innerHTML=catalog;
    catalogItems = items;
  }

  function shoppingCart_getResponse(feed) {
    if (feed != null) {
       var entries = feed.getElementsByTagName("entry"); 
       var list = "";
       for (var i=0; i < entries.length; i++) {
         var content =
           entries[i].getElementsByTagName("content")[0];
         var name = 
           content.getElementsByTagName("name")[0].firstChild.nodeValue;
         var price =
           content.getElementsByTagName("price")[0].firstChild.nodeValue;
         list += name + ' - ' + price + '<br>';
       }
     }
     document.getElementById("shoppingCart").innerHTML = list;
   }

   function shoppingCart_postResponse(entry) {
     shoppingCart.get("").addCallback(shoppingCart_getResponse);
   }

   function addToCart() {
     var items  = document.catalogForm.items;
     var j = 0;
     for (var i=0; i < items.length; i++) {
       if (items[i].checked) {
         var entry = 
           '<entry xmlns="https://www.w3.org/2005/Atom"><title>item<content
           type="text/xml">' + '<Item xmlns="http://services/">' + '<name xmlns="">'
           + catalogItems[i].name + '</name>' + '<price xmlns="">' + 
           catalogItems[i].price + '</price>' + '</item>' + '</content></entry>';

         shoppingCart.post(entry).addCallback(shoppingCart_postResponse);
         items[i].checked = false;
       }
     }
   }

   function init() {
     catalog.get().addCallback(catalog_getResponse);
     shoppingCart.get("").addCallback(shoppingCart_getResponse);
   }
</script>
</head>

<body onload="init()">
<h1>Store</h1>
 <div id="store">
   <h2>Catalog</h2>
   <form name="catalogForm">
      <div id="catalog"></div>
      <br>
      <input type="button" onClick="addToCart()" value="Add to Cart">
   </form>
   <br>
   <h2>Your Shopping Cart</h2>
   <form name="shoppingCartForm">
      <div id="shoppingCart"></div>
      <br>
      <div id="total"></div>
      <br>
   </form>
 </div>
</body>
</html>

次の作業

アプリケーションに SCA コンポーネントをデプロイします。