Tutorial on model-driven development using Flash Builder 4 and LiveCycle DS 3

Updated for Flash Builder 4 release version and LiveCycle Data Services ES2 (LiveCycle DS 3) :)

In this article we will see how we can do model-driven development using Flash Builder 4 and LiveCycle Data Services ES2. We will create a Flex application to perform CRUD operations on a database table without writing code.

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 lcds31-win.exe/lcds31-mac.zip, execute this file to install. I have installed LCDS 3 with Tomcat to C:\lcds3

Set up Adobe Application Modeling Plug-in (Formerly Fiber modeler plug-in)

Download Adobe Application Modeling plug-in from this URL Download Adobe Application Modeling Plug-in (20 MB. For Flash Builder 4 release version click on “For Eclipse 3.5 Download”). You will be downloading file named Adobe_Application_Modeling_plugin_v102_eclipse35.zip, extract the contents of the zip file to a folder called Adobe_Application_Modeling_plugin_v102_eclipse35. Copy the files under Adobe_Application_Modeling_plugin_v102_eclipse35/plugins folder into C:\Program Files\Adobe\Adobe Flash Builder\plugins.

Create sample database required

You can download the SQL file for the table used in this sample at this URL http://sujitreddyg.com/fb4articles/beta2/customers.sql.txt

Setting up data source

We need to expose databases as data sources. Fiber modeler plugin will use the data sources configured on the web server to get details of the tables in the database. In this sample, we will use lcds web application and the database created above. Add data source pointing to the database by modifying C:\lcds3\tomcat\conf\Catalina\localhost\lcds.xml as shown below. Make sure you have MySQL Connector/J in your tomcat lib folder.

<Context privileged=”true” antiResourceLocking=”false” antiJARLocking=”false” reloadable=”true”>

<Transaction factory=”org.objectweb.jotm.UserTransactionFactory” jotm.timeout=”60″/>

<Resource name=”jdbc/test” auth=”Container”

type=”javax.sql.DataSource”

username=”UserName”

password=”Password”

driverClassName=”com.mysql.jdbc.Driver”

url=”jdbc:mysql://localhost:3306/test?autoReconnect=true”/>

</Context>

Enabling RDSDispatchServlet

Flash Builder and Fiber Modeler plugin use the RDSDispatchServlet (part of LCDS) to retrieve information like data source, destinations, etc. 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>

Start LCDS server

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 using Flash Builder 4, Adobe Application Modeling plug-in and LCDS 3.

Create a Flex project

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

Create a Flex project from the file menu as shown in the image below.

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 MDDSample
  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. Select LiveCycle Data Services ES
  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 finish to continue

Flash Builder will create a project with a default application file. Now let’s build the model using Fiber Modeler Plugin. For the modeler plugin to retrieve data sources we configured, we need to configure RDS Server settings in Flash Builder.

Configure RDS Server

Select preferences from window menu as shown in the image below.

In the preferences window, you will find RDS configuration panel under Adobe -> RDS Configuration as shown in the image below.

Configure RDS Server for lcds web application as shown in the image below.

In this screen:

  1. 1. Set the description to LCDS (localhost)
  2. Set the host name to 127.0.0.1
  3. Set the port number to 8400
  4. Set the Context root to lcds
  5. Leave the User name and Password blank under the Security Information section
  6. Click on Test Connection to check if everything is properly configured
  7. Click OK to continue

We configured RDS, let’s create a model.

Creating model using Fiber Modeler plugin

Right click on the MDDSample Flex project and create new Data Model file as shown in the image below. If you cannot view Data Model in the options, you can select “other” and find Data Model under the Data Modeling as shown in the image below.

Click Next to continue. Window with option to fill model properties will be launched as shown in the image below.

In this screen, set the File name to Customer.fml and click on Next to continue.

In this screen, since we want to create model from a table in the database select From a database. Click Next to continue. Next screen will give you option to select the RDS server configured in previous steps and to view the data sources available.

In this step, we will select the database table from which the model has to be created.

In this screen:

  1. Set the RDS Server to LCDS (localhost), one we created in previous steps
  2. Data sources available will be listed down. Select java:/comp/env/jdbc/test
  3. Tables available in the data source will be listed, select customers table
  4. Click on Finish to continue

Fiber Modeler Plugin will create Customer.fml based on the Customers table. Adobe Data Model perspective will launched as shown in the image below.

In this screen click Yes to launch Adobe Data Model perspective. You will see Customer entity represented graphically as shown in the image below.

Let’s deploy this model to the server. Right click on the Customer.fml and select Deploy Data Model to LCDS Server as shown in the image above. Window with deployment options will be launched as shown in the image below.

In this screen:

  1. Set the RDS Server to LCDS (localhost)
  2. Set the model name to Customer
  3. Set the Database Tables to Unchanged
  4. Click on Finish to continue

Fiber Modeler Plugin deploys the Customer model to the server. LCDS 3 will create required assembler and also create a data management destination. 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, let’s see how 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

Switch to Flash perspective and Select MDDSample.mxml. You can switch perspective from right hand side top corner. Select the Data/Services panel also called services explorer as shown in the image below.

Now that we have our model deployed, we will consume the data in the Customers table and bind the data to a UI control. Click on the Connect to Data/Service link highlighted in the image above.

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

You can see that a destination named Customer.Customers is created whose associated source class is fiber.data.assemblers.FiberAssembler and the service type is data-service. Select the destination and click on Finish to continue.

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

You can also see that the return types 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 editable property of the DataGrid to true
  4. Set the width of the DataGrid 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 a window launched with options to select the service.

In this screen:

  1. Select New service call
  2. Set the Service to CustomersService
  3. Set the Operation to getAll(): Customers[]
  4. Set the Data provider to Customers[]
  5. Click on OK to continue

You will see that the DataGrid will change its columns to reflect the properties of the Customers entity. Save the application 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.

Let’s enable auto commit so that this will be a complete application. Switch to code view and add this line of code to enable auto commit as shown in the image below. Also set the DataGrid editable to true.

customersService.serviceControl.autoCommit = true;

Save and run the application. You can edit the data in the DataGrid and just press enter key, the data will automatically be committed in the database. Refresh the application to confirm.

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

We created a complete Flex application using Flash Builder 4 and LiveCycle Data Services 3 to perform operations on the data in the database in few minutes. Now that’s Rapid Application Development.

LCDS 3 Rocks :)

About these ads

31 Responses to Tutorial on model-driven development using Flash Builder 4 and LiveCycle DS 3

  1. anton says:

    Thank you for sharing information about Flash Builder 4,I currently use that’s software and encountered some difficulties.

  2. Megharaja says:

    Instead of connecting to sample data base i wanted to connect to Mysql database server which is running in the port 3306 ?

    can you tell me the step please ?

  3. Phil says:

    Very helpful tutorial on an extremely cool technology. Thanks!

  4. Phil says:

    How would server-side authentication and security be worked into the Fiber system?

  5. Martin Zach says:

    @Megharaja (post nr1)

    You have to add within the context the following: ( of the webapp or in tomcat/conf/context.xml)

    Then the db/tables appear in RDS Dataview of FB4

    @Phil (post nr3)
    If you find out how that works, please let me know.

    @Sujit Reddy G
    Thanks for all these informations, they are very helpfull.
    Can you please post somtheing how to use security constraints with fiber.
    I use to create a security-constraint in the services-config, and assigned that to the destination. But how can I do that if the destination is automaticly created from the FiberAssembler?

    Cheers!
    Martin Zach

  6. Martin Zach says:

    This part did’t come through, so again:

  7. Megharaja says:

    Now am able to view the tables in the RDS treeview but when i drag and drop in the model file (fml) it supposed to generate service automatically. But it is generating the service. Please let me know if you have any solutions.

  8. Rob says:

    I tried following your example, and man is this stuff hard to get going. I cannot for the live of me connect to the samples database, but i managed to get the RDS working and pointing to my SQL databse server. However when ever i try to add a table to it i get the following. “Unsupported db operation: DBDESCRIPTION”. what am i doing wrong?

  9. Hi Anton,

    Can you please let us know what difficulties you are facing.

  10. Hi Megharaja,

    Services are not generated when the FML file is created, they will be created when you deploy the FMl file on the server.

    Hope this helps.

  11. Hi Rob,

    Can you please try sending the FML file created? Thank you.

  12. Megharaja says:

    Hi All,

    Thanks for your help. Now am able to generate all the services and able to pull all the data from the MYSQL database in my Adobe AIR app. I was trying to make my application works offline and automatic synchronization. The service which creates is wrapper for the data service. Can anyone help me how to achieve this?

  13. commonov says:

    I’ll be wait for the next post.
    thanks.

  14. Rao says:

    Hi

    I followed the steps mentioned above to create MDDSample Application using Flash Builder 4 Beta 2 and LiveCycle Data Services 3 Beta 3.

    When i tried deploying the datamodel to lcds, i am getting the following error “one error found while reading model Customer: XML parse error: Error on line 1 of the document cvcelt.1:Cannot find declaration of element model……”

    Please help me in solving this issue.

    Thanks
    Rao

  15. zel says:

    Can I do the same with Blaze (instead of lifecycle).

    Also is there a way to automatically generate code
    with support for pagination by default ?(ie the getAll seems to be expensive method for huge tables)

    I want to use Flash – but it seems to be too much steps as compared to seam-gen (ie Seam) – besides
    it seems to need another server(ie dependency/layer) called lifecyle/blazeds .

  16. Dhanang says:

    very Informative post..thanks.

  17. Simba7 says:

    Hi Sujit Reddy,

    I tried to follow your instructions but i get an error when trying to connect to the data source.

    It says “data source not found: java/comp/env/jdbc”

    I guess i need to add some thing to the environment but i have no clue what to add or what the acuall problem is please help.

    cheers!

  18. [...] Tutorial on model-driven development using Flash Builder 4 and LiveCycle DS 3 [...]

  19. [...] Tutorial on model-driven development using Flash Builder 4 and LiveCycle DS 3 [...]

  20. all4bmw says:

    I’ve been geeting the same error as the last post. I tried to follow all the instructions, but when I try to connect to the data I get this error:

    data source not found: java:/comp/env/jdbc/test

    Cannot create PoolableConnectionFactory (Could not create connection to database server.)

    Any help on correcting this would be a big help. I am using the latest version of mySql w/WorkBench. Tomcat was installed with LCD DS

  21. Rao says:

    Hi,

    I am trying Sample MDD application using Flash Builder 4 and modeling plugin
    But i am facing same issue as mentioned in below link

    http://forums.adobe.com/thread/601762?tstart=1

    Flash Builder 4 Standard Version
    Adobe_Application_Modeling_plugin_v102_eclipse35

    Please help

    Thanks
    Rao

  22. Faisal says:

    This is by far the best tutorial on these technologies.
    I followed the tutorial and had no problem whatsoever. I even added detail form when i select an item in the data grid. Thank you so much.

  23. Gilles says:

    You can skip the part where you create a sample database using the file customers.sql.txt if you wish and use an existing a database in the sampledb folder. To do so, update the lcds.xml file as so:

    <Context privileged="true" antiResourceLocking="false" antiJARLocking="false" reloadable="true">
    
        <Resource 
            name="jdbc/flexdemodb" 
            type="javax.sql.DataSource"
            driverClassName="org.hsqldb.jdbcDriver"
            maxIdle="2" maxWait="5000"
            url="jdbc:hsqldb:hsql://localhost:9002/flexdemodb" 
            username="sa" 
            password="" 
            maxActive="4"/>        
    
    </Context>
    

    The table names will be different than those named in Sujit’s tutorial but it’s still pretty easy to follow.

    (Thanks again Sujit for your help)

  24. Ankit Zalani says:

    Great post, it helped me at lot.. Thanks

  25. Santosh says:

    Great post Sujit Reddy Sir….

    Instead of MySql. I have to connect with Oracle 10g. Is it Possible. If So how please send me the Way. I am waiting for ur reply. Thanking you Sir.

  26. Santosh says:

    Great work Sujit. Thanx. :)

    Instead of MySQL. Is it possible to connect with SQL Oracle 10g database. If So, Please let me know the way.

    I am waiting for your reply. :)

  27. Hi Santosh,

    Yes, you can. Just configure the data source appropriately.

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

Follow

Get every new post delivered to your Inbox.

Join 111 other followers

%d bloggers like this: