Data Driven Development with LiveCycle Data Services 3 and Flash Builder 4

Notes: In order to complete this tutorial you must prepare your computer by installing Flash Builder 4.0+ and Java JDK 1.5 + (including setting the PATH and JAVA_HOME environmental variable settings). You will also need to download and install the Flash Builder 4 extensions for Data Driven Development.


1. Start the LiveCycle Data Services SampleDB. To do this, open a command window (Windows) or terminal (Linux/Mac OS X), navigate to the folder where you installed LiveCycle Data Services, and type startdb (Windows) or sh startdb.sh (Unix based systems).





2. Next, start the LiveCycle Data Services server. This is done by navigating to the [LiveCycle_Data_Services_install_directory]/tomcat/bin and typing catalina run (Windows) or sh Catalina.sh run (Unix based systems).

3. Set up a new project in Flash Builder and use the following settings:

Web Application (Checked)
Use the Current SDK (FLex 4.0) (Checked)
Application Server Type (J2EE)

Then use the settings below:






4. In the next dialog, specify the settings as shown below (default LiveCycle Data Service install) or modify as appropriate for your install. Click “Validate Configuration” to ensure your settings are correct before continuing.





5. Switch to Design view and click “Edit Active Data Model”

6. If the RDS tab is not enabled choose Window > Other Views > Adobe Data Model > RDS Dataview, as shown:

7. Drag public Product into the main panel.

8. This creates a new Fiber data model

9. IMPORTANT – Save the file!

10. Click the Deploy Model to LCDS Server icon as shown below:

11. Fill in the dialog as follows:



12. Switch to the main.mxml component and drag a new data grid onto the screen in Design view.

13. Drag the Product database onto the data grid and run the program.

14. Note that no code has been written yet

15. Close the running application

16. Right-click on the Product data model and select “Generate form”

17. Select “Model Driven Form” as shown:

18. Re-arrange the design view and run it again.

19. Go to source code of the main.mxml and change the one line of code to as shown below:

20. Run it again and see that you have now the selected item bound to the form.

Flash Builder 4 Tutorial 2: RESTful Services

Many things have changed in Flex 4 and with the new Flash Builder 4 Beta, you can already start trying these out. This little tutorial will walk you through a simple FB4 HTTP Service example to explain the differences. If you want to do this, download the Flash Builder 4 Beta.

First - there are multiple new namespaces in Flash Builder 4. These appear to be confusing at first but you should not be scared by them.



Fx is for the Flash Catalyst packages and contains some new drawing primitives and more. Some of the old namespace qualified elements are now qualified including Script.

Flex defines two other sets of components: Halo and Spark. The Halo component sets were included in previous releases of Flex, and are defined in the mx.* packages. The Spark components are new for Flex 4 and are defined in the spark.* packages. The Spark components use a new architecture for skinning and have other advantages over the Halo components.

The Halo and Spark component sets contain many of the same components. For example, both component sets define a Button control, TextInput control, and List control. However, while you can use Halo components to perform most of the same actions that you can perform by using the Spark components, Adobe recommends that you use the Spark containers when possible.

Another major change is that many non-visual components of an application must be bound by the element. You might notice if you are trying to declare an HTTP service, the will not auto-complete unless bound by the declarations tag. If you want to manually build this project, you can add an HTTPService like this:



A third thing you will see is that the layouts are no longer contained in the header. Instead, they are declared inside a container as shown below:



Here is the Project:

1. Start a new project in Flash Builder 4. Select no server type and either option for the AIR/Flash toggle.

2. Grab a browser and you should be able to validate the servers are up and running by hitting the following URL: http://www.nickull.net/xml/Wines.xml You should see the following XML file:



Note 1: In order for this to work, a small file called crossdomain.xml is in the same directory as the Wines.xml on the server. This file helps Flash Player mitigate cross domain scripting attacks. Describing what this file does is beyond the scope of this tutorial, however more can be read at http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001621.html

Note 2: All the wines on this list are favorites and make great gifts for Adobe Evangelists who post tutorials to help you with your work ;-p

3. Copy the URL (Command -C on Mac or Control-C on PC)

4. At the bottom of the Flash Builder IDE, click on the Connect to Data Services link shown below.



5. This will bring up a dialog box with a number of choices for services. Select the HTTPService option as shown below:



6. Click “Next” and then fill in the next screen by adding the name of the service (“srv” in this case) and add the URL.



7. After completing this operation by clicking “Finish”, you will see the data services in the panel at the bottom.



8. Next we need to add an object to bind our data to. Switch to Design view and drag a DataGrid onto the middle of your application. If you manually add it in Code view, just start typing the angle bracket and "datagrid" and let Flash Builder complete this for you.


9. Highlight the DataGrid, then right-click (Control Click on Mac) the DataGrid object and select Bind To Data from the menu as shown below:



10. This will bring up the “Bind to Data” dialog box. Click on “Configure Return Type” to configure the datatype for the returned object.



11. The next dialog will prompt you for a datatype. NOTE: on other projects, you might wish to use one of the default data types; however on this one, we are going to create our own object type called “WinesArray” as shown below.



12. Click “Next”

13. The next dialog will invoke the service request to get a sample of the data to inspect. For this lab exercise, select the radio button labeled “Enter complete URL …” and enter the URL of the XML file in the “URL to fetch” box below and click “Next”.



14. Flash Builder will go to the URL, retrieve a sample of data, and break down its structure for you. In this case, it has selected that it may be an array. Rather than accept the first option as is, use the drop down list to select a context root of “Vintage” as shown below.




15. Now you will have the following



16. Click “Finish”

17. Close the last dialog by clicking “OK”

18. Your project should now reflect the DataGrid being bound to the data as shown below:


19. Run the project and you Flex 4/AIR application will build and display the XML from the server.

Oh the irony at GeoWeb 2009

When did the US annex New Westminster, BC?