+

Search Tips   |   Advanced Search

Use Widget implementation in JavaScript with Atom or HTTP bindings

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.

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 we 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.

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.

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 WAR file.

  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.

    We 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 the SCA component in an application.


Related tasks

  • Use Widget implementation in JavaScript with Atom bindings
  • Use Widget implementation in JavaScript with HTTP bindings
  • Use Atom bindings in SCA applications
  • Specify bindings in an SCA environment
  • Use HTTP bindings in SCA applications


    Related information:

    Atom Syndication Format
    Atom Publishing Protocol