The JavaScript™ code in an HTML
file can use Service Component Architecture (SCA) references that
are 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.
Before you begin
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 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 Web application archive (WAR) file.
Procedure
- 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.
- 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.
- 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");
- 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.
- 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 your 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 your application defines the reference and
service in separate servers or clusters, use a proxy server so that
the Widget implementation resource that contains 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.