Using Widget implementation in JavaScript with Atom or HTTP bindings

You can use Tuscany Widget implementation to define Service Component Architecture (SCA) references for use in JavaScript code. Use Widget implementation to work with data that an SCA service returns in JavaScript. The data can be in Atom collections or in JavaScript Object Notation (JSON) format.

Before you begin

You can use an Atom binding in an SCA application to expose collections of data as an Atom feed or to reference existing external Atom feeds. If you are unfamiliar with the Atom protocol, refer to documentation on the Atom Syndication Format, an XML-based document format that describes web feeds, and the Atom Publishing Protocol, a protocol for publishing and updating web resources.

You can use the HTTP binding with a wire format of JSON-RPC to expose SCA services for consumption by remote web browser clients. JSON-RPC is a remote procedure call (RPC) protocol encoded in the JSON format.

About this task

An SCA component can define SCA references for use in JavaScript code. Use Tuscany Widget implementation to define the references. The implementation supports references that use an Atom binding or an HTTP binding with a wire format of JSON-RPC, and does not support the definition of SCA services. The implementation also supports the definition of SCA properties.

The SCA composite that uses the Widget implementation must be deployed inside a web application archive (WAR) file.

Procedure

  1. Configure a Widget implementation in an SCA composite definition.

    Create an SCA composite definition file for a component that uses Tuscany implementation.widget. For example:

    <composite xmlns="http://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>

    This example defines a Store component that uses Tuscany implementation.widget in an HTML file at ui/store.html. The implementation.widget definition is located in the "http://tuscany.apache.org/xmlns/sca/1.0" namespace, rather than the "http://www.osoa.org/xmlns/sca/1.0" namespace that most SCA artifacts use.

  2. Add SCA reference definitions to the SCA composite definition.

    Define one or more references that use an Atom binding or an HTTP binding. An SCA reference that uses an Atom binding resembles:

    <reference name="shoppingCart">
        <tuscany:binding.atom uri="/ShoppingCart/Cart"/>
    </reference>
    

    An SCA reference that uses the HTTP binding with a wire format of JSON-RPC resembles:

    <reference name="catalog">
        <tuscany:binding.http uri="/Catalog"/>
          <tuscany:wireFormat.jsonrpc/>
        </tuscany:binding.http>
    </reference>
    

    For more information on the Atom binding references, see the topics on using Atom bindings. For more information on HTTP binding references, see the topics on using HTTP bindings.

  3. Add SCA property definitions to the SCA composite definition.

    You can define one or more properties in the SCA composite definition file. For example:

    <property name="currency">USD</property>
    
  4. Add the SCA composite definition to the WAR file.

    Save the SCA composite definition in the META-INF/sca-deployables/default.composite file in the WAR file.

    For the example in this topic, the complete composite file is as follows:

    <composite xmlns="http://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>
  5. Create the HTML file specified in the SCA composite definition for the Widget implementation and add it to the WAR file.

    In the HTML file, define the SCA references and properties and define required script elements as described in topics on using Atom bindings or HTTP bindings. The ui/store.html file used for this example resembles:

    <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="http://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>

What to do next

Deploy your SCA component in an application.




In this information ...


IBM Redbooks, demos, education, and more

(Index)

Use IBM Suggests to retrieve related content from ibm.com and beyond, identified for your convenience.

This feature requires Internet access.

Task topic Task topic    

Terms of Use | Feedback

Last updatedLast updated: Sep 19, 2011 4:16:02 PM CDT
http://www14.software.ibm.com/webapp/wsbroker/redirect?version=matt&product=was-base-dist&topic=tsca_implementation_widget
File name: tsca_implementation_widget.html