Saturday, August 01, 2009

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:

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.

Friday, July 31, 2009

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

Monday, July 27, 2009

Pin it!

SHARE!

If you are helped by this blog in any way, or just find the contents interesting, please give it a share to help keep me publishing. Shares help drive my advertising revenue which makes me more likely to write articles to help people in the future. Thank you in advance!