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