LiveCycle® Data Services Developer's Guide 
LiveCycle® Data Services Developer's Guide |
|||
| Developing Data Services Applications > Using AJAX Data Services | |||
|
|||
|
|||
|
|||
To use AJAX Data Services in an AJAX application, you must include the following JavaScript libraries in script tags on the HTML page:
You must have the following ActionScript libraries to compile the SWF file:
You use the following command line (on a single line) to compile the SWF file:
mxmlc.exe --stacktrace-verbose -services=<path_to_services-config.xml_for_your_app>\services-config.xml <path_to_FDMSBridge.as>\FDMSBridge.as -o <path_to_store_compiled_swf>\FDMSBridge.swf
This command line assumes that you added mxmlc to the system path, or you run the command from the sdk\bin directory.
To initialize the library, you call a convenience method, FDMSLib.load(). This method creates the appropriate HTML to embed Flash Player and load the specified shim SWF file. This SWF file is typically compiled using the FDMSBridge.as application file, but can be any SWF file or MXML application that contains the FABridge and references the appropriate LiveCycle Data Services classes. After Flash Player loads the shim SWF file that contains the bridge, the specified callback is invoked to notify the application that Data Services are available and ready for use.
To set up an HTML page for LiveCycle Data Services integration, you must include the FDMSLib.js on the page to initialize it. Typically, Flash Player is hidden on the page, because the browser performs all the rendering. The JavaScript code in the following HTML code inserts the hidden Flash Player and initializes the library:
<script type="text/javascript" src="include/FABridge.js"></script>
<script type="text/javascript" src="include/FDMSLib.js"></script>
...
FDMSLibrary.load("/ajax/Products/FDMSBridge.swf", fdmsLibraryReady);
<!DOCTYPE html PUBLIC "-//W3 C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"/>
<title>Products</title>
<link href="css/accordion.css" rel="stylesheet" type="text/css"/>
<link href="../css/screen.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="include/FABridge.js"></script>
<script type="text/javascript" src="include/FDMSLib.js"></script>
</head>
<body>
<script>
FDMSLibrary.load("/ajax/Products/FDMSBridge.swf", fdmsLibraryReady);
</script>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this page.</h1>
</noscript>
<div id="wrap">
<div id="header">
<h1>Products</h1>
</div>
<div id="content">
<table id="products">
<caption>Adobe Software</caption>
<tr>
...
</body>
<script language="javascript">
/*
Once the bridge indicates that it is ready, we can proceed to
load the data.
*/
function fdmsLibraryReady()
{
...
}
</script>
</html>
The FDMSLibrary.load() convenience method inserts HTML code that puts a hidden Flash Player on the page. This Flash Player instance uses the specified location (for example, ajax/products/FDMSBridge.swf) to load a compiled SWF file. You can specify any SWF file that includes the FABridge and LiveCycle Data Services API classes. Using the FDMSBridge.as file provides the smallest SWF file.
To provide a visible SWF file, you must place the appropriate embed tags in the HTML file, and you must set a bridgeName flashvars, as the following example shows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"/>
<title>Products</title>
<link href="css/accordion.css" rel="stylesheet" type="text/css"/>
<link href="../css/screen.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="include/FABridge.js"></script>
<script type="text/javascript" src="include/FDMSLib.js"></script>
</head>
<body>
<script>
document.write("<object id='flexApp'
classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' \
codebase =
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0'
height='400' width='400'>");
document.write("<param name='flashvars' value='bridgeName=example'/>");
document.write("<param name='src' value='app.swf'/>");
document.write("<embed name='flexApp'
pluginspage='http://www.macromedia.com/go/getflashplayer' \
src='app.swf' height='400' width='400'
flashvars='bridgeName=example'/>");
document.write("</object>");
FABridge.addInitializationCallback("example", exampleBridgeReady);
</script>
<noscript><h1>This page requires JavaScript. Please enable JavaScript
in your browser and reload this page.</h1></noscript>
<div id="wrap">
<div id="header">
<h1>Products</h1>
</div>
<div id="content">
<table id="products">
<caption>Adobe Software</caption>
<tr>
...
</body>
<script>
function exampleBridgeReady()
{
var exampleBridge = FABridge["example"];
// Do something with this specific bridge.
}
</script>
...
</html>
After the AJAX Data Services library is loaded and initialized, it sends a call back to the specified method indicating the ready state. Then, the client constructs the appropriate Data Service objects and loads data from the server. The following example shows this sequence:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
</body>
<script language="javascript">
var productService;
var products;
/**
* Once the bridge indicates that it is ready, we can proceed to
* load the data.
*/
function fdmsLibraryReady()
{
productService = new DataService("Products");
productService.addEventListener(DataService.RESULT,
productsResult);
productService.addEventListener(DataService.FAULT, productFault);
products = new ArrayCollection();
var token = productService.fill(products);
token.set("operation", "fill");
}
/**
* Scatter the product data into the appropriate elements.
*/
function productsResult(event)
{
if (event.getToken().get("operation") == "fill")
{
var htmlText = "<table id='productTable'>";
var product;
for (var i=0; i<products.getLength(); i++)
{
product = products.getItemAt(i);
htmlText += "<tr><td>"+ product.getName() +
"</td><td>"+ product.category + "</td></tr>";
}
htmlText += "</table>";
document.all["products"].innerHTML = htmlText;
}
}
...
</script>
</html>
The fdmsLibraryReady() method loads the data the same way as in a regular Flex application. The major difference when using AJAX Data Services is that you must manage the code to display data. The items returned in the specified ArrayCollection are anonymous objects on both sides of the bridge. The way in which the shim SWF file is compiled by default does not provide ActionScript 3.0 classes for the transfer objects. To support lazily loaded properties, each transfer object must call across the bridge to fetch data. For more information about loading data in a Flex application, see the Flex documentation set.
Updating the values returned from a Data Management Service fill operation requires that the objects returned from the fill request provide getter and setter methods for each property on an anonymous object. The default serialization of the properties has the form setXXX() and getXXX(), where the XXX is the property name. If you don't use a framework like Spry, updating data in the application requires logic to gather data points from input controls and set those values individually.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
<table id="product"
<caption>Adobe Software</caption>
...
<tbody>
<tr>
<td><input id="productName"/></td>
<td><input id="productCategory"/></td>
</tr>
<tr>
<th style="color:#FF9900">Overview</td>
<th style="color:#FF9900">Features</td>
</tr>
<tr>
<td><textarea cols="48" rows="10" id="productOverview"></textarea></td>
<td><textarea cols="48" rows="10" id="productFeatures"></textarea></td>
</tr>
<tr>
<td colspan="2" align="right"><button onclick="commitData()">Save
</button></td>
</tr>
</tbody>
...
</body>
<script language="javascript">
var productService;
var products;
var currentProductIndex;
// index into products collection for the item currently being edited
...
/**
* Gather the data and update the appropriate transfer object
*/
function commitData()
{
var item = products.getItemAt(currentProductIndex);
var itemData = document.all;
item.setProductName(itemData["productName"].value);
item.setProductCategory(itemData["productCategory"].value);
...
productService.commit();
}
...
</script>
</html>
If a property is lazily loaded and is not local, the getXXX() method returns null. When the item becomes available, the transfer object dispatches a PropertyChangeEvent event. The ArrayCollection also dispatches an event, but it is a CollectionChangeEvent event.
LiveCycle Data Services ES 2.5
Send me an e-mail when comments are added to this page | Comment Report
Current page: http://livedocs.adobe.com/livecycle/es/sdkHelp/programmer/lcds/ajaxds_4.html