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

Updated for Flash Builder 4 release version🙂

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

Install LCDS 3

Download LiveCycle Data Services 3 from this URL http://www.adobe.com/go/trylivecycle_dataservices. You will be downloading a file named lcds3-win.exe/lcds3-mac.zip, execute this file to install. I have installed LCDS 3 with Tomcat to C:\lcds3

Install Flash Builder 4

Download and install Flash Builder 4 from here http://www.adobe.com/products/flashbuilder/

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:\lcds3\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 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:\lcds3\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>

<adapter ref=”java-dao”/>
</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

Create a Flex project from File -> New -> Flex Project. 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. Use default Flex SDK (Flex 4.0)
  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:\lcds3\tomcat\webapps\lcds
  2. Set the Root URL to http://localhost:8400/lcds
  3. Set the Context root to /lcds
  4. Leave the Output folder to default, which is on the server
  5. Click on Validate Configuration to validate the details
  6. 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” (highlighted in the image) 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. Flash Builder will display a window asking for RDS credentials. Since we turned off security for our RDSDispatchServlet by setting the “useAppserverSecurity” parameter to “false” in the web.xml, select “No password required” and click on 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.

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 spark.layouts.VerticalLayout
  2. Drag and drop a DataGrid on to the design view
  3. Set the width of the DataGrid to 100% and height to 100%

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 see a window launched with options to select the service as shown below.

In this screen:

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

The fill(… args) function accepts optional parameters and so Flash Builder will automatically switch to code view to let you enter the arguments to be passed to the fill() function. In this example we will not pass any parameters, so leave the fill() function arguments empty as shown in the image below.

Switch to design view and you will see that the DataGrid will have columns for Product properties as shown in the image below.

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. Use the up and down buttons to re-arrange columns as shown in the image above
  2. 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 https://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🙂

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

  1. zerlot says:

    Hi,

    I just downloaded the LCDS Beta 3 for mac from labs. After installation, I found there was not the tomcat folder in “lcds”.

    I rolled back to Beta 2, the “tomcat” folder was installed by default installer.

    Did you meet this issue?

    Regards,
    Z

  2. Stan Berka says:

    Which platform you are on? I have just downloaded and installed Windows version of lcds3b3 and during installation, I have selected “integrated TOmcat”. Installer created tomcat folder.

    Found a typo:
    Instead of lcds in C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\flex\data-management-config.xml, it should be lcds-samples.

  3. Stan Berka says:

    Also, another typo:
    Instead of lcds in C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\web.xml above, it should be lcds-samples.

  4. Which platform you are on? I have just downloaded and installed Windows version of lcds3b3 and during installation, I have selected “integrated TOmcat”. Installer created tomcat folder.

    Found a typo:
    Instead of lcds in C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\flex\data-management-config.xml, it should be lcds-samples.

  5. Manoj Kumar Garwa says:

    Hi, i am facing a problem that there is no “Data Model View” in perspective in windows menu.i did the following:
    1. created database in server.properties file in sampledb directory of lcds.
    2.start the sampledb server
    2.created a web application.
    3.Enabled the RDS Servlet by uncommenting it and set the param value to false
    4.then i created the Context and saved it in tomcat/conf/Catalina/localhost/
    5.started the server
    6. created a project in flash builder
    7.connected to RDS Server by Windows->Preference->Adobe->RDS Configuratin
    8. My Test connection was successful
    9.now its turn to go on Data Model view.according to lcds documentation file(Which i have) Data Model View is in , Windows->Perspective->Data Model View. but i have nothing like this name in my prerspective tool.
    so now w8 i have to do?

  6. Manoj Kumar Garwa says:

    i m using LCDS 3 with Flash Builder 4 on Windows 7.

  7. Munib says:

    Hi Sujith,

    After selecting LCDS in Data/Service. Flash Builder supposed to retrieve all the Remoting and Data Management. However it giving me an error that RDS Server Message:
    Error Executing RDS command. Status Code:500, Reason : Internal Server Error

    Please suggest what could be the problem?

  8. Hi Munib,

    Can you please check if you can find any errors on server log. If yes, please share.

  9. Hi Manoj,

    You have to install Adobe Application Modeling plugin. Instruction can be found in the URL below.

    https://sujitreddyg.wordpress.com/2009/06/18/tutorial-on-model-driven-development-using-flash-builder-4-and-livecycle-ds-3/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: