在具有 Atom 或 HTTP 連結的 JavaScript 中使用小組件實作 (已淘汰)

您可以使用 Tuscany Widget 實作來定義「服務元件架構 (SCA)」參照，以在 JavaScript 程式碼中使用。使用小組件實作來處理 SCA 服務在 JavaScript中傳回的資料。資料可以採用 Atom 集合或 JavaScript Object Notation (JSON) 格式。

開始之前

您可以在 SCA 應用程式中使用 Atom 連結，將資料集合公開為 Atom 資訊來源，或參照現有的外部 Atom 資訊來源。如果您不熟悉 Atom 通訊協定，請參閱 Atom 聯合供稿格式 (說明 Web 資訊來源的 XML 型文件格式) 及 Atom 發佈通訊協定 (用於發佈及更新 Web 資源的通訊協定) 的文件。

您可以搭配使用 HTTP 連結與 JSON-RPC 發訊格式，以公開 SCA 服務供遠端 Web 瀏覽器用戶端使用。 JSON-RPC 是以 JSON 格式編碼的遠端程序呼叫 (RPC) 通訊協定。

關於這項作業

SCA 元件可以定義 SCA 參照，以在 JavaScript 程式碼中使用。使用 Tuscany 小組件實作來定義參照。實作支援使用 Atom 連結或 HTTP 連結 (發訊格式為 JSON-RPC) 的參照，且不支援 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>
```
此範例定義在位於 ui/store.html的 HTML 檔中使用 Tuscany implementation.widget 的 Store 元件。 implementation.widget 定義位於 "http://tuscany.apache.org/xmlns/sca/1.0" 名稱空間中，而不是大部分 SCA 構件使用的 "https://www.osoa.org/xmlns/sca/1.0" 名稱空間。
將 SCA 參照定義新增至 SCA 組合定義。
定義一個以上使用 Atom 連結或 HTTP 連結的參照。使用 Atom 連結的 SCA 參照類似如下:
```
<reference name="shoppingCart">
    <tuscany:binding.atom uri="/ShoppingCart/Cart"/>
</reference>
```
使用 HTTP 連結且發訊格式為 JSON-RPC 的 SCA 參照類似如下:
```
<reference name="catalog">
    <tuscany:binding.http uri="/Catalog"/>
      <tuscany:wireFormat.jsonrpc/>
    </tuscany:binding.http>
</reference>
```
如需 Atom 連結參照的相關資訊，請參閱使用 Atom 連結的相關主題。如需 HTTP 連結參照的相關資訊，請參閱使用 HTTP 連結的相關主題。
將 SCA 內容定義新增至 SCA 組合定義。
您可以在 SCA 組合定義檔中定義一或多個內容。例如：
```
<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 檔中，依照使用 Atom 連結或 HTTP 連結的主題中的說明，定義 SCA 參照和內容，並定義必要的 Script 元素。用於此範例的 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 元件。