Building Flex application for LCDS Data Management services using Flash Builder 4

Data Centric Development (DCD) in Flash Builder 4 allows developers to build Flex front end for LiveCycle Data Services (LCDS) Data management service destinations with just couple of clicks. Continue reading to see how Flash Builder and LCDS are improving J2EE developer productivity.

In this article we will be building a Flex application for a Data Management service destination in the samples application called lcds-samples bundled with LiveCycle Data Services 3 Beta 3.

Install LCDS 3

Download LiveCycle Data Services 3 from this URL http://labs.adobe.com/technologies/livecycle_dataservices3/. You will be downloading a file named livecycle_dataservices3_b3_win_100509.exe, execute this file to install. I have installed LCDS 3 with Tomcat to C:\lcds3beta3

Enabling RDSDispatchServlet

Flash Builder uses the RDSDispatchServlet (part of LCDS) to retrieve destinations information from the server. By default the RDSDispatchServlet is commented out in web.xml. Open C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\web.xml using a text editor and remove comment around RDSDispatchServlet Servlet definition and the URL mapping as shown below. Also set the useAppserverSecurity parameter value to “false” as shown below.

<servlet>

<servlet-name>RDSDispatchServlet</servlet-name>

<display-name>RDSDispatchServlet</display-name>

<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>

<init-param>

<param-name>useAppserverSecurity</param-name>

<param-value>false</param-value>

</init-param>

<load-on-startup>10</load-on-startup>

</servlet>

<servlet-mapping id=”RDS_DISPATCH_MAPPING”>

<servlet-name>RDSDispatchServlet</servlet-name>

<url-pattern>/CFIDE/main/ide.cfm</url-pattern>

</servlet-mapping>

Defining item class name

Set the item-class property of the Data Management service destination to the name of the object type which the assembler is expecting. Flash Builder 4 DCD requires this property to be set for the destinations you want to consume using DCD in Flash Builder. All the sample destinations in LCDS 3 beta 3 have this property set. Sample destination used in this article has item-class property set to flex.samples.product.Product class as shown below.

XML Snippet below is from C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\flex\data-management-config.xml

<destination id=”inventory”>
<properties>
<source>flex.samples.product.ProductAssembler</source>
<scope>application</scope>
<item-class>flex.samples.product.Product</item-class>
<metadata>
<identity property=”productId”/>
</metadata>
<network>
<paging enabled=”false” pageSize=”10″ />
</network>
</properties>
</destination>

Start LCDS server

Start LCDS samples data base from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start Samples Database

Start LCDS server from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start LiveCycle Data Services Server

Please make sure both the database and the server are started.

We have everything ready to develop a Flex application for data management service destinations using Flash Builder 4.

Create a Flex project

Start Flash Builder 4 from the start menu, start -> All Programs -> Adobe -> Adobe Flash Builder Beta 2

Create a Flex project from the file menu. You will see a window launched with options to fill project properties as shown in the image below. Fill project properties as shown in the image below.

In this screen:

1. Set project name to LCDSSampleProject
2. Let the Application type be Web
3. Set the SDK version to 3.4
4. Set the Application server type to J2EE
5. Select Use remote object access service check box
6. 6. Select LiveCycle Data Services ES
7. 7. Click next to continue

Now we need to set the server properties, you will see a screen with options to set the server properties as shown in the image below.

In this screen:

1. Set the Root folder to c:\lcds3beta3\tomcat\webapps\lcds-samples
2. Set the Root URL to http://localhost:8400/lcds-samples
3. Set the Context root to /lcds-samples
4. Leave the Output folder to default, which is on the server
5. Click finish to continue

All we have to do now is to see how we can consume the service and create a Flex application. With Flash Builder 4 this is very simple, Data centric Development (DCD) features in Flash Builder 4 lets us easily consume data management services and bind them to UI controls.

Consuming data management services from Flash Builder 4

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” in the Data/Services window

You will see a window launched with options to select the type of service as shown in the image below.

In this screen, select LCDS and click on Next to continue. You will be prompted for credentials, since we don’t have RDS authentication enabled, just select No password required check box and click OK to continue.

Now Flash Builder will retrieve all the Remoting and Data Management destinations exposed by the web application and displays as shown in the image below.

Our server settings are configured to point to the sample application bundled with LCDS called lcds-samples. This web application has lots of destinations exposed as shown in the image above. Destinations whose service-type is remoting-service are the Remoting destinations and the ones whose service-type is data-service are the Data Management service destinations. In this sample we will use the “inventory” data management service destination. Select the “inventory” destination and click on Finish to continue.

Flash Builder will generate all code required to consume the service selected and will list the Inventory service in the services explorer as shown in the image below.

You can also see that the return types for the operations (functions/methods of assembler) are properly set. Now that we have the service created, let’s bind the data to a UI control. Switch to design view as shown in the image below.

In this screen:

1. Set the layout of the Application to vertical
2. Drag and drop a DataGrid on to the design view
3. Set the width of the DataGrid to 100% and height to 50%

Now let’s bind the data to DataGrid.

In this screen:

1. Select the DataGrid
2. Right click on the DataGrid
3. Select Bind To Data

You will a window launched with options to select the service.

In this screen:

1. Select New service call
2. Set the Service to ProductService
3. Set the Operation to fill(): Product[]
4. Click on OK to continue

You will see that the DataGrid will change its columns in the design view to reflect the properties of the Product entity.

Configuring DataGrid columns

Flash Builder 4 has an excellent feature which allows developers to configure columns. Select the DataGrid. Right click on the DataGrid and select “Configure Columns …” as shown in the image below.

A window with options to configure the columns for the DataGrid will be launched as shown in the image below.

In this screen:

1. Select “productId” column and move it to top
2. Similarly re-arrange columns as shown in the image above
3. Click on OK

Save and run the application. Application will launch in the browser. You can observe the application sending request to the server and displaying the response in the DataGrid as shown in the image below.

More articles on how to use Flash Builder 4 are available at this URL http://sujitreddyg.wordpress.com/flash-builder-4/

We developed a Flex front end for Data Management service destination in just few minutes. Flash Builder 4 and LCDS rocks

---

Possibly related posts: (automatically generated)

• Adobe LCDS
• Why are you NOT using LiveCycle DS?
• LiveCycle Data Services (LCDS) – Quick Start