Integrating Adobe Creative Suite CS5 with backend distributed data via Adobe LiveCycle Data Services and Adobe Creative Suite Extension Builder

You can also find a recent Connect recording that runs through the steps here at http://my.adobe.acrobat.com/p73797581/. This recording shows taking code from an LCDS Test Drive example, modifying it fractionally to run in a Creative Suite extension, and shows how easy it is to pull data from a backend datastore using LCDS and propagate it through to a Creative Suite document, such as an InDesign document

Download Adobe LiveCycle Data Services (I installed version 3.0) and install locally-  it installs with Apache Tomcat as the default application server. These instructions are based on a standard installation in Mac OS 10.6.x. For this recipe, you will also need to have Creative Suite Extension Builder installed into Flash Builder 4 (standalone), or Creative Suite Extension Builder installed into Eclipse 3.5.x (say) plus Flash Builder 4 plug-ins. See  http://blogs.adobe.com/cssdk/ and  http://www.adobe.com/devnet/creativesuite/ for more information about Extension Builder.

1. Open <lcds_root>/tomcat/webapps/lcds-samples/WEB-INF/flex/services-config.xml. In Mac OS 10.x, <lcds_root> would be /Applications/lcds.

2. Change all instances of {server.name} to localhost, all instances of {server.port} to 8400 and all instances of {context.root} to lcds-samples. See Christophe Coenraets blog for more context on why this is necessary and how to create a more flexible solution for the general case- we're assuming AIR applications and CS extensions are similarly constrained.

3. Create a new CS Extension Builder project

4. Navigate to <lcds_root>/tomcat/bin and execute ./startup.sh. This starts Apache Tomcat as your application server, with LCDS running as a web application.

5. Right click on the CS Extension Builder project and choose Properties.

6. Select Flex Server. Change Application server type to J2EE, select Remote Object Access Service, and choose LiveCycle Data Services ES.

7. Deselect default location for the server and check the following properties are correct for your install location: 

Root folder: /Applications/lcds/tomcat/webapps/lcds-samples 
Root URL: http://localhost:8400/lcds-samples 
Context root: /lcds-samples

8. You should now be able to Validate Configuration successfully and dismiss the dialog.

9. Unzip <lcds_root>/tomcat/webapps/lcds-samples/WEB-INF/flex-src/flex-src.zip if you have not already done so.

10. Choose a sample, say testdrive-dataservice.

11. Copy the source from the MXML file in testdrive-dataservice/src into your main.mxml.

12. You will also need to add other files from the same src/ folder, such as. Product.as , to your extension source tree.

13. Navigate to <lcds_root>/sampledb and execute ./startdb.sh - this starts your database.

14. Compile and launch your extension to verify it worked. For testdrive-dataservice, you should see the DataGrid populated after pressing the button. This is what you should see, more or less.

I modified the CS extension properties using the Bundle Manifest Editor to a width of 700 and height of 500- see the recording at http://my.adobe.acrobat.com/p73797581/ showing how to do this when generating the project. The final MXML code that I ended up with in the main.mxml file looked somewhat like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                                xmlns="*" 
                                layout="absolute" historyManagementEnabled="false" >
        
        <mx:ArrayCollection id="products"/> 
        <mx:DataService id="ds" destination="inventory"/>
        <Product/>
        
        <mx:VBox width="100%" height="100%">
                <mx:DataGrid dataProvider="{products}" editable="true" width="100%" height="90%">
                        <mx:columns>
                                <mx:DataGridColumn dataField="name" headerText="Name"/>
                                <mx:DataGridColumn dataField="category" headerText="Category"/>
                                <mx:DataGridColumn dataField="price" headerText="Price"/>
                                <mx:DataGridColumn dataField="image" headerText="Image"/>
                                <mx:DataGridColumn dataField="description" headerText="Description"/>
                        </mx:columns>
                </mx:DataGrid>
                <mx:ControlBar height="40" width="100%">
                        <mx:Button label="Get Data" click="ds.fill(products)"/> 
                </mx:ControlBar>
                
        </mx:VBox>
</mx:Application>

Once you have the data in the products ArrayCollection, you can use the Creative Suite ActionScript Wrapper (CSAW) libraries to modify the DOM of Creative Suite CS5 applications such as Adobe InDesign, Adobe Photoshop and Adobe Illustrator.

Note: If you see an error like this:

Cannot resolve <Product/> to a component implementation

check that you have added xmlns="*" to the mx:Application attributes. This caught me out the first time, because the Product.as source file is in the default package.