+

Search Tips   |   Advanced Search

Use Widget implementation in JavaScript with HTTP bindings

The JavaScript code in an HTML file can use Service Component Architecture (SCA) references defined in a Tuscany Widget implementation. Use Widget implementation to work with data in JavaScript Object Notation (JSON) format that an SCA service returns in JavaScript.

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

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 HTTP binding with a wire format of JSON-RPC, and does not support the definition of SCA services.

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>
  <component name="Store">
    <tuscany:implementation.widget location="ui/store.html"/>
       <reference name="catalog">
         <tuscany:binding.http uri="/Catalog"/>
           <tuscany:wireFormat.jsonrpc/>
         </tuscany:binding.http>
       </reference>
  </component>
</composite>

    This example defines a Store component that uses Tuscany implementation.widget in an HTML file at ui/store.html.

  2. Create the HTML file specified in the SCA composite definition for the Widget implementation.

    In the HTML file, define required script elements such as the following:

      <script type="text/javascript" src="/Store/store.js"></script>

    The script src attribute points to a JavaScript file that the product dynamically generates to connect the SCA references to their associated services. Specify the uniform resource identifier (URI) in the format /SCA_component_name/modified_implementation.widget_location_attribute; for example, /Store/store.js. The modified location attribute is the location attribute without a leading path and with a file extension of .js.

  3. Define the SCA reference in JavaScript in the HTML file.

    In the HTML file, define an SCA reference. For example: 

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

  4. Add JavaScript code that uses the reference to the HTML file.

    The code used for this example resembles: 

    <script>
   function init() {
    catalog.get().addCallback(catalog_getResponse);
  }
   function catalog_getResponse(items,exception) {
    if(exception){
      alert(exception.message);
      return;
    }         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;
  }
 </script>

    In this example code, the init method calls the get method on the catalog reference. The result is sent to the callback method callback_getResponse(). The callback method adds check box elements to the HTML for each item returned from the catalog get method.

  5. Add the user interface to the HTML file, as needed.

    The ui/store.html file used for this example might use the following user interface: 

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


What to do next

Deploy the SCA component in an application.

When using the Widget implementation, HTTP binding references must be deployed on the same server or cluster as the HTTP binding services that they reference. This limitation is a result of browser limitations on cross-domain JavaScript invocation. If the application defines the reference and service in separate servers or clusters, use a proxy server so that the Widget implementation resource containing the reference and the HTTP binding service are both accessed using the same HTTP domain.

To resolve HTTP binding references, either use a target attribute, @target, on the reference or specify the URI attribute on the binding.http element. For more information, see the topic on resolving SCA references.

For more examples, see the topic on using Widget implementation in JavaScript with Atom or HTTP bindings.


Related tasks

  • Resolve SCA references
  • Use Widget implementation in JavaScript with Atom or HTTP bindings
  • Use HTTP bindings in SCA applications