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

Adobe LiveCycle Data Services 3 beta is here

Adobe LiveCycle Data Services 3 beta is here. As always LCDS team has added lots of new features and made improvements to existing features. With LCDS 3 beta application development is much faster and developers can use features like Reliable communications and Data throttling.

We have new technology from Adobe, code named Fiber. Fiber lets you do model-driven development. With this release of LCDS, Adobe also released a graphical modeling editor called Fiber modeler plugin, which allows you to use Flash Builder 4 with LCDS 3 to create a complete RIA by just pointing to your tables in the database. You don’t have to write any server side code, LCDS 3 creates the assembler required, creates data management destination and hence all ready to consume it from Flex applications. We all know that with Flash Builder 4, consuming data services is just few clicks as explained at this URL http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-blazeds-remoting-service-using-flash-builder-4/

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

Please find more details on what’s new in LiveCycle Data Services 3 beta at this URL http://www.adobe.com/devnet/livecycle/articles/lcdses3_whatsnew.html

I already downloaded LCDS 3 and am using it, it’s too good. Download LiveCycle Data Services 3 beta at http://labs.adobe.com/technologies/livecycle_dataservices3/

Adobe rocks

Client Side Data Management using Flash Builder 4

Updated for Flash Builder 4 release version

Flash Builder 4 has Client side Data Management feature which lets you do the following

1. Track changes to the local data
2. Undo operations on the local data
3. Automate common CRUD, instead of hand coding
4. Automatically/Manually commit all local changes to server
5. and more ……

We saw how we can point Flash Builder 4 to a Remoting destination and build Flex UI to it by just few clicks here http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-blazeds-remoting-service-using-flash-builder-4/

In this article we will see how we can enable client side Data Management for a Remoting destination. Client side Data Management is not specific to BlazeDS, it will work with any type of service including HTTP Service.

In this sample we will expose SimpleCustomerService.Java as Remoting destination. SimpleCustomerService communicates with database and returns SimpleCustomer objects.

To know how to expose Java classes as Remoting destination visit this URL http://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/

Setting up BlazeDS RDSDispatchServlet

After setting up BlazeDS, you have to enable RDSDisptachServlet, which is used by Flash Builder 4 to get destination details. This is disabled by default. It’s very simple all you have to do is to un-comment/add the Servlet mapping in the web.xml.

Copy the Servlet URL mapping and declaration for the RDSDispatchServlet from the web.xml in the blazeds.war file and add to your web application web.xml file. Else copy it from 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>

To use Client side data management, we need to create functions/methods on the server which will perform the CRUD operations on the server. Function/Method signatures on the server side should be as follows

1. Add item – accepts entity type object and returns either ID of the added item or added entity object “public int addCustomer(SimpleCustomer customer) or public Customer addCustomer(Customer customer)”
2. Update item – accepts entity type object and returns nothing “public void updateCustomer(SimpleCustomer customer)”
3. Delete item – accepts either ID of the item or the entity object to delete and returns Boolean or nothing “public void deleteCustomer(int customerId) or public void deleteCustomer(SimpleCustomer customer)”
4. Get item – accepts ID of the item and returns entity object “public SimpleCustomer getCustomer(int customerId)”

Now that we have our server side code ready, we will use Flash Builder to generate AS3 code to consume the Remoting service and enable data management on the client.

Install Flash Builder 4

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

Create new Flex project

Enter project details

In this screen:

1. Enter project name
2. Set “Web (runs in Adobe Flash Player)” as the application type
3. Use default Flex SDK (Flex 4.0)
4. Set the application server type to J2EE
5. Select BlazeDS
6. Click on Next

Configure J2EE server settings

In this screen:

1. Set the Root folder to the root folder of your web application with BlazeDS configured. In this sample its C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\demo
2. Enter the URL to your web application in Root URL
3. Set the context root to context root of your web application
4. Leave the output folder to default value
5. Click on validate configuration button, you can see validation message on top of the screen
6. Click finish to continue

Using DCD to generate code to consume service

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
3. Window as shown in the image below will be launched

Creating new service

In this sample we are consuming a BlazeDS Remoting service so select BlazeDS and click on Next.

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.

Selecting Remoting destination

In this screen we are selecting the destination the newly created service should use. All destinations available will be displayed, select the destination which points to the SimpleCustomerService.java. In this sample SimpleCustomerService is exposed as Remoting destination service with id – SimpleCustomerServiceDestination.

Code for invoking the Remoting service will be generated. You can also see the service and its operations (methods exposed by the Java class) being displayed in the “Data/Services” window and in the package explorer.

Configuring Client Side Data Management

Right click on the getAllCustomers() operation and select “Enable Data Mangement” as shown in the image below.

A window as shown in the image below will be launched.

Data Management needs unique identifier to manage the objects. In this screen, we should select the unique identifier for the data type, which is usually the primary key. Select the unique key (customerId in this sample) and click on next.

We need to map the Data Management operations to functions/methods from your service class to use for performing CRUD operations. Select appropriate operations as show in the image above. Operations should have signatures as explained in this article.

In this screen:

1. Select the operations which have to be invoked for respective data management operations
2. Click finish to continue.

Binding data to UI controls

Switch to design view as shown in the image below.

In this screen:

1. Change the Application layout 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 property of the DataGrid to 100%
   
5. Select the DataGrid
6. Right click on the DataGrid and select “Bind to Data”
7. You will see a window with options to bind to a service as shown in the image below

In this screen:

1. Select “New service call”, because we want to create a new service call
2. Select “SimpleCustomerService” from services
3. Select “getAllCustomers()” operation from the list
4. Set the Data provider to “SimpleCustomer[]“
5. Click on OK to continue

We will add a button which will commit all changes to the server. Add a Button control as shown in the image below.

In this screen:

1. Add a Button control below DataGrid
2. Set the label of the Button to “Commit”

Let’s generate a click handler for the button.

In this screen:

1. Select the button and right click on the button
2. Select “Generate click handler”
3. Flash Builder will shift to the code view so that you can add code to the generated click handler as shown in the image below

In this screen, we will be invoking commit() function on the SimpleCustomerServiceDestination service so that any changes made to the data on the client will be saved on the server when the commit button is clicked.

Add “simpleCustomerServiceDestination.commit();” to the generated button click handler function as shown in the image above.

Save and run the application. Application will be launched in the browser as shown in the image below. Make changes to the data in the DataGrid and click on “commit” button. You will see all changes made to the data will be saved on the server.

Based on the changes to the data on the client, respective operations will be invoked. For example if you modified an entry, then the update operation will be invoked and on the server your class will have logic to update the same in the database.

You can perform all CRUD operations with just one line of code. Check the attached sample code to see how to add/delete an item. Please download MXML file with CRUD functionality implemented at this URL http://sujitreddyg.com/fb4articles/release/DMSample.mxml.txt

More article on Flash Builder 4 at this URL http://sujitreddyg.wordpress.com/flash-builder-4/

Flash Builder 4 rocks

Consuming JSON using Data Centric Development (DCD) feature in Flash Builder 4

Updated for Flash Builder 4 release version

Consuming a HTTP based service returning data in JSON format is very simple using Flash Builder 4. Flash Builder 4 understands JSON format and generates code to invoke the service and also create AS3 data types for the JSON response. To know how, continue reading this article.

In this sample we will create a Flex application which allows users to search using Yahoo search APIs.

Install Flash Builder 4

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

Create a new Flex project

Create new Flex project from File -> New -> Flex Project.

In this screen:

1. Set the project name to “HTTPJSONSample”
2. Set the Application type to “web (run in Adobe Flash Player)”
3. Use default Flex SDK (Flex 4.0)
4. Click on finish to continue

Using DCD to consume data returned by the server

Data-Centric Development (DCD) is one of the advancements to the Flash Builder 4. Let’s see how DCD is making developers productive.

Creating a service

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
3. Window as shown in the image below will be launched

Selecting service type

Since we are using HTTP Service to communicate with the server, select HTTP Service from the options and click on next button to continue.

Setting service properties

A service can have any number of operations. Each service will be a class and each operation of a service will be a function inside the class. Each operation has an URL associated with it, when the operation is invoked a HTTP request is sent to the corresponding URL. We will create a service which will communicate with Yahoo search APIs.

In this screen:

1. Set the operation name to “search”
2. Set the URL of the operation to http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=India&output=json
3. You can see the query string parameters in the URL are added to the “Parameters” section of the operation.
4. Set the Service name to YahooSearchService
5. Click on finish button to create the service

Service will be created and listed in the services explorer as shown in the image below.

Configuring return type

We will configure service to create an AS3 VO class based on the JSON data returned by the server. The VO class will be the return type for the operation. This will make coding easier, since it is easier to deal with strong typed objects.

Right click on the “searchWeb” operation in the services explorer and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Click Next to continue.

Entering parameters required by the server

In this screen:

1. Select “Enter parameter values and call the operation”
2. Enter “YahooDemo” for parameter “appId”
3. Enter “India” for parameter “query”
4. Enter “json” for parameter “output”

Flash Builder also allows you to give sample response rather than sending a request to the server to get the data. This will be useful when the server side code is not ready but you want to continue creating the Flex application without waiting for the server. Since we have the server ready in our case, let’s send a request to the server and configure return type. Click on next to continue.

Flash Builder parses the JSON data returned by the server and displays the same as shown in the image below. In this step, you can choose to create a new data type or merge the properties to existing AS3 class.

You can see the response from the server in the window as shown in the image below.

Set the name of the new data type to “SearchResultSet” and click on finish to continue.

You can see the return type of the operation changed as shown in the image below. When we invoke the “search” operation, response will be object of the type “SearchResultSet” will be created based on the response from the server and returned.

Generating form or displaying service results

Flash Builder 4 can generate form based on the response from the server or for the arguments for an operation. Right click on the “search” operation and select “Generate form” as shown in the image below.

You will see a window launched as shown in the image below. Select the service to invoke and the form items to create.

In this screen:

1. Select “New service call”
2. Select “YahooSearchService”
3. Select “search” operation
4. We need form to take input parameters which the service is expecting, so select “Form for input parameters”
5. We will not generate form for return type, so deselect “Form for return type”
6. Click on next to continue

You can select the fields for which the form items have to be generated. You will see a window as shown in the image below. Select the fields for which you want the UI controls to be generated and click on finish.

In this screen we are selecting only “query” because that’s the only input we want from the user. We will be hard coding values for other two parameters. Select only “query” and click on finish to continue.

Flash Builder will switch to the source view so that you can enter the parameters to the operation.

In this screen:

1. Change the arguments to the “search” function as shown in the image above
2. Set the first argument to “YahooDemo” which is the application id for Yahoo
3. Set the last argument to “json”, which is the response format

Displaying search result in DataGrid

Switch to design view as shown in the image below. You will see the user input forms generated in previous steps.

In this screen:

1. Set the application layout to spark.layouts.VerticalLayout
2. Drag and drop a DataGrid from the components panel to the design view
3. Select the DataGrid
4. Set the width of the DataGrid to 100%

Right click on the DataGrid and select “Bind to Data” as shown in the image below.

A window as shown in the image below will be launched.

In this screen, select searchResult under existing call result. The searchResult is the result of call we created for the input for the form we created in previous steps. We are binding the result of the generated service to the DataGrid.

Select Result[] as the Data Provider. Click ok to continue.

Save and run the application. Application will be launched in the browser enter the string you want to search in the TextInput and click on “Search” button. You will see request will be sent and the response being displayed in the DataGrid as shown in the image below.

More article on using Flash Builder 4 http://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we created a Flex UI for a JSON response from the Yahoo search API using DCD features in Flash Builder. Flash Builder 4 rocks

Building Flex applications for PHP based HTTP Services using Flash Builder 4

Updated for Flash Builder release version

Have a PHP application and want to create Adobe Flex front end?  With Data Centric Development feature in Flash Builder 4 it’s very simple. This article explains communicating with PHP classes on the server using HTTP Service.  Since its HTTP Service you will create a PHP file which will invoke the required PHP class and returns the data as either XML or JSON.

You can also invoke functions in PHP classes on the server from Flex application and get objects as response instead of invoking a JSP/Servlet which returns XML/JSON. Please find more details on invoking PHP methods from Flex application at this URL http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-a-php-class-using-flash-builder-4/

In this article we will be using getallcustomers.php file which will invoke getAllCustomers() function in CustomerService.php class (getAllCustomers function returns Customer class objects for each entry in the database) and returns the entries in the database in XML format. We will use Flash Builder DCD to create a Flex application which will consume the XML data returned by the server.

Install Flash Builder 4

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

Create a new Flex project

Create a Flex project as shown in the image above.

Enter project details

In this screen:

1. Set the project name to “SampleHTTPPHPProject”
2. Set the Application type to “web (run in Adobe Flash Player)”
3. Use default Flex SDK (Flex 4.0)
4. Click on finish to continue

Using DCD to consume data returned by the PHP file

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how this is making developers productive. We will use DCD to consume the data from the PHP file.

Creating a service

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
3. Window as shown in the image below will be launched

Selecting service type

Select HTTPService from the options and click on next button to continue.

Setting service properties

A service can have any number of operations. Each service will be a class and each operation of a service will be a function inside the class. There is an URL associated with an operation, when the operation is invoked a HTTP request is sent to the corresponding URL. We will create a service and a operation to consume the data from the PHP file created above.

In this screen:

1. Change the operation name to “getAllCustomers”
2. Set the URL of the operation to http://<server-name&gt;:<server-port>/<webapp-context>/getallcustomers.php in this sample it is http://localhost:9292/fb4/getallcustomers.php
3. Since we are not expecting any parameters in the PHP file we will skip the parameters section
4. Set the service name to “CustomerService”
5. Click on finish button to create the service

Service will be created and listed in the services explorer as shown in the image below.

Configuring return type

We will configure service to create an AS3 VO class based on nodes in the XML data returned by the PHP file. The VO class will be the return type for the operation. This will make coding easier, since it is easier to deal with strong typed objects than parsing the XML data.

Right click on the “getAllCustomers” operation and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Entering parameters required by the server

Our PHP class is not expecting any parameters, so we don’t have to pass any parameters in this step.

Flash Builder also allows you to give sample response rather than sending a request to the server to get the data. This will be useful when the server side code is not ready but you want to continue creating the Flex application without waiting for the server. Since we have the server ready in our case, let’s send a request to the server and configure return type. Click on next to continue.

You can see the response from the server in the window as shown in the image below.

Flash Builder parses the XML data returned by the server and displays the same as shown in the image above. You can select the XML node based on which you want the return type AS3 class to be generated. In this step, you can choose to create a new data type or merge the properties to existing AS3 class.

In this screen:

1. Select the “customer” node
2. Click on finish to continue

You can see the return type of the operation in the “data/services” panel changed as shown in the image below. When we invoke the “getAllCustomers” operation, response will be object of the type “Customer” will be created based on the response from the server and returned.

Binding data/service to UI controls

We usually write code to display the response from the service in a DataGrid or any other control. Flash Builder 4 has an awesome option which allows you to just bind a service response to a control.

In this screen:

1. Switch to design view
2. Change the Application layout to “spark.layouts.VerticalLayout” using the properties panel
3. Drag and drop a “DataGrid” from the “components” panel on to the design area
4. Set the width and height properties of the “DataGrid” to 100%

Right click on the DataGrid and select “Bind to Data …” as shown in the image below

A window as shown in the image below will be launched.

In this screen:

1. We select a “New service call” because there are no existing services in the current application.
2. Select the “CustomerService”
3. Select “getAllCustomers():Customer[]” from the operations list
4. Click OK

You can see the DataGrid in the design updated with properties of the Customer object as shown in the image below.

Save and run the application, you can see the data retrieved from the Remoting service and displayed in the DataGrid as shown in the image below.

More article on using Flash Builder 4 http://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we created a Flex UI for a PHP file exposed as HTTP Service using DCD features in Flash Builder. Flash Builder 4 rocks

Built in Data Paging using Flash Builder 4

Updated for Flash Builder release version

Flash Builder 4 lets you enable data paging with just few clicks for any server technology. It can be enabled for any service type (Including HTTP Service). Continue reading this article to know how.

For data paging to work you just need to implement 2 functions on the server and leave it to the generated Flex code by Flash Builder to invoke these functions when data has to be fetched.

Functions to implement:

1. Returns number of rows in the database “count()”
2. Takes two input arguments and returns the data collection. The two input arguments are startIndex and numberOfItems “getItems_paged($startIndex, $numItems)”

Data paging can be enabled for any type of service with any server technology. In this sample we will be using CustomerService.php which has the 2 required functions implemented and retrieves data from customers table. You can enable paging for any service similarly.

Install Flash Builder 4

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

Create a new Flex project

Create new Flex project from File -> New -> Flex Project

Enter project details as shown in the image above and explained below

In this screen:

1. Set the project name to “PagingSample”
2. Set the Application type to “web (run in Adobe Flash Player)”
3. Use default Flex SDK (Flex 4.0)
4. Set the Application server type to “PHP”
5. Click next to continue

In this screen:

1. Set the Web root to the root folder of your PHP server. Its c:\apacheserver\htdocs in this sample
2. Set the root URL to the root URL of your PHP server. Its http://localhost:9292 in this sample
3. Set the output folder to root folder of your web application where you your PHP file is deployed
4. Click the “Validate Configuration” to validate the server details entered
5. Click on finish to continue

Using DCD to consume data returned by the PHP file

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how this is making developers productive. We will use DCD to generate Flex applications to consume the data from the PHP file.

Creating a service

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
3. Window as shown in the image below will be launched

Selecting service type

Since we want to communicate with the PHP class we created, select PHP and click on next to continue.

Selecting PHP file for the service

In this screen:

1. Browse and select the CustomerService.php file or the PHP file which has the required functions implemented.
2. Click on next button to continue

You will see a window displayed, saying Zend AMF library will be installed as shown in the image below. Just click on OK and continue will the set up. Flash Builder will deploy the Zend AMF on your PHP server.

Once the installation completes, Flash Builder will display a message. Clicking OK will display the functions in the PHP class. Functions are referred as “operation”. Image below shows the window with operations exposed.

Click on finish to continue. Service created above can be seen in the services explorer as shown in the image below.

Configuring return type

In this step we will test the operation and configure the return type on the client i.e. we will specify what type of object to create with the response from the server. This will make it easy for us to develop, since it is easier to deal with strong typed objects.

Right click on the “getItems_paged()” operation in the services explorer and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Invoking the operation and introspecting the response

Flash Builder sends request to the server and get the response and lets you configure the return type based on the response from server.

Operation requires two integer values as input arguments. Enter those two values as shown in the image above. You can see the response from the server in the window as shown in the image below.

Set the name of the data type to “Customer” as shown in the image above. Click on finish to continue.

You can see the return type of the operation changed as shown in the image below. When we invoke the “getItems_paged()” operation, response will be object of the type “Customer”, in our case ArrayCollection containing Customer objects.

Similarly configure return type for “count()” operation to “int” as shown in the image below.

“int” is an existing data type, so select the same from the existing data types list as shown in the image below.

Enabling paging

We have configured the two operations required for paging. To enable paging right click on “getItems_paged()” operation and select “Enable paging” as shown in the image below.

You will see a window as shown in the image below, where you need to select the unique identifier for the Customer class.

Select the unique identifier and click next to continue. customerId is the unique identifier in our case.

In this screen, select the operation (count() in this sample) to use for getting total count of records in the database and number of items to retrieve at a time. Click finish to continue.

Binding service results to UI controls

We usually write code to display the response from the service in a DataGrid or any other control. Flash Builder 4 has an awesome option which allows you to bind a service response to a UI control.

Switch to design view as shown in the image below.

In this screen:

1. Change the Application layout to “spark.layouts.VerticalLayout” using the properties panel
2. Drag and drop a “DataGrid” from the “components” panel on to the design area
3. Set the width and height properties of the “DataGrid” to 100%

Right click on the DataGrid and select “Bind to Data …” as shown in the image below.

A window as shown in the image below will be launched.

In this screen:

1. We select a “New service call” because there are no existing services in the current application.
2. Select the “CustomerService”
3. Select “getItems_Paged():Customer[]” from the operations list
4. Set the Data provider to “Customer[]“
5. Click OK

You can see the DataGrid in the design updated with properties of the Customer object as shown in the image below.

Save the application and run.

Paging is enabled and the data will be retrieved in chunks and only when it is required, for example when you scroll the DataGrid the data for the rows which are not retrieved will be retrieved. You can observe data paging by enabling Network Monitor in Flash Builder

More articles on using new features in Flash Builder 4 http://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we have data paging enabled with just few clicks. Flash Builder 4 rocks

Building a database based app using Flex and PHP with Flash Builder 4

Updated for Flash Builder 4 release version

You have a database table and want to create a Flex application using which you can perform CRUD operations on the database table? Flash Builder 4 makes it easy for you. Flash Builder generates PHP file with skeleton code to query data from the database. You just have to write your SQL queries for your database in the generated PHP file use Flash Builder 4 to generate Flex application. Continue reading this article to know how.

In this article will use Flash Builder Data Centric Development (DCD) feature to create a PHP file to query data from the database and Flex application which will consume the objects returned by the PHP class.

We will be using a table called customers in this sample. You can download the sql file from this URL http://sujitreddyg.com/fb4articles/beta2/customers.sql.txt

Install Flash Builder 4

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

Create a new Flex project

Create new Flex project from File -> New -> Flex Project

Enter project details as shown in the image above and explained below

In this screen:

1. Set the project name to “NewPHPSample”
2. Set the Application type to “web (run in Adobe Flash Player)”
3. Use default Flex SDK (Flex 4.0)
4. Set the Application server type to “PHP”
5. Click next to continue

Configuring server settings

In this screen:

1. Set the Web root to the root folder of your PHP server. Its c:\apacheserver\htdocs in this sample
2. Set the root URL to the root URL of your PHP server. Its http://localhost:9292 in this sample
3. Set the output folder to root folder of your web application where you want the PHP file to be deployed
4. Click the “Validate Configuration” to validate the server details entered
5. Click on finish to continue

Using DCD to consume data returned by the PHP file

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how this is making developers productive. We will use DCD to consume the data from the PHP file.

Creating a service

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
3. Window as shown in the image below will be launched

Selecting service type

Since we want to communicate with the PHP class, select PHP and click on next to continue.

Setting service properties

Since we don’t have the PHP class created and want Flash Builder to generate a sample PHP file. Click on the “click here to generate a sample” (highlighted in the image above) A window will be launched as shown in the image below.

Select the “Generate from template” option and click on OK to continue. Take a minute to read the message displayed by Flash Builder as shown in the image below.

Click OK to continue. You will observe that a sample PHP file will be create and the service settings will be updated to point the newly created PHP file as shown in the image below.

Click Next to continue.

You will see a window displayed, saying Zend AMF library will be installed as shown in the image below. Just click on OK and continue will the set up. Flash Builder will deploy the Zend AMF on your PHP server.

Once the installation completes, Flash Builder will display a message. Clicking OK will display the functions in the PHP class. Functions are referred as “operation”. Image below shows the window with operations exposed.

You can see that the generated sample PHP file has functions for all CRUD operations and more functions, which can be used for enabling client side data management using Flash Builder 4.  Click finish to continue. You can see the service created and its operations listed in the services explorer in the image below. Flash Builder will also try to open the created PHP file, we can view the file from the Flash Builder itself, you can just click on cancel.

Completing the PHP class generated

The PHP class generated by the Flash Builder contains skeleton code to connect to a database. You just have to change the SQL queries to query your database table. I updated the generated PHP file to retrieve data from the customers table. Download the updated the PHP file from this URL http://sujitreddyg.com/fb4articles/beta2/SamplePhp.php.txt and replace the generated file.

Note: Please set the username, password, server, port, tablename and databasename variables in SamplePhp.php

Configuring return type

In this step we will test the operation and configure the return type on the client i.e. we will specify what type of object to create with the response from the server. This will make it easy for us to develop, since it is easier to deal with strong typed objects.

Right click on the “getAllItems()” operation in the services explorer and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Click next to continue. You can see the response from the server in the window as shown in the image below.

You can see that Flash Builder introspected the objects returned from the server. Change the name of the data type to “Customer”. When we invoke the “getAllItems” operation, response will be object of the type “Customer”, in our case ArrayCollection containing Customer objects.

Click on finish to continue. You can see the return type of the operation changed as shown in the image below.

We will be using only getAllItems() so, we are not configure return types for other operations in this sample.

Displaying or binding service results in UI controls

We usually write code to display the response from the service in a DataGrid or any other control. Flash Builder 4 has an awesome option which allows you to bind a service response to a control with just a click.

In this screen:

1. Switch to design view
2. Change the Application layout to “spark.layouts.VerticalLayout” using the properties panel
3. Drag and drop a “DataGrid” from the “components” panel on to the design area
4. Set the width and height properties of the “DataGrid” to 100%

Right click on the DataGrid and select “Bind to Data …” as shown in the image below.

A window as shown in the image below will be launched.

In this screen:

1. We select a “New service call” because there are no existing services in the current application.
2. Select the “CustomerService”
3. Select “getAllItems():Customer[]” from the operations list
4. Set the Data provider to “Customer[]“
5. Click OK

You can see the DataGrid in the design updated with properties of the Customer object as shown in the image below.

Save and run the application, you can see the data retrieved from the Remoting service and displayed in the DataGrid as shown in the image below.

More article on using Flash Builder 4 http://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we created a Flex UI for a data base. Flash Builder 4 rocks

Building Flex application for a PHP class using Flash Builder 4

Updated for Flash Builder 4 release version

If you have a PHP class, Flash Builder 4 allows you to create a Flex front end for it with just few clicks. Continue reading this article to find out how.

In this article we will be creating Flex application which will invoke functions in CustomerService class which will return Customer class objects for each entry in the database. We will use Flash Builder DCD to create a Flex application which will consume the Customer objects returned by the CustomerService class.

Install Flash Builder 4

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

Create a new Flex project

Create new Flex project from File -> New -> Flex Project

Enter project details as shown in the image above and explained below

In this screen:

1. Set the project name to “ExistingPHPSample”
2. Set the Application type to “web (run in Adobe Flash Player)”
3. Use the default Flex SDK (Flex 4.0)
4. Set the Application server type to “PHP”
5. Click next to continue

In this screen:

1. Set the Web root to the root folder of your PHP server. Its c:\apacheserver\htdocs in this sample
2. Set the Root URL to the root URL of your PHP server. Its http://localhost:9292 in this sample
3. Leave the Output folder to default value
4. Click the “Validate Configuration” to validate the server details entered
5. Click on finish to continue

Using DCD to consume data returned by the PHP file

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how this is making developers productive. We will use DCD to consume the data from the PHP file.

Creating a service

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
3. Window as shown in the image below will be launched

Selecting service type

Since we want to communicate with the PHP we created, select PHP and click on next button.

Selecting PHP file for the service

In this screen:

1. Browse and select the PHP class file to use. Make sure the PHP file is deployed in your web application
2. Click on next button to continue

You will see a window displayed, saying Zend AMF library will be installed as shown in the image below. Just click on OK and continue will the set up. Flash Builder will deploy the Zend AMF on your PHP server.

Once the installation completes, Flash Builder will display a message. Clicking OK will display the functions in the PHP class. PHP class functions are referred as “operation”. Image below shows the window with operations available.

Click on finish to continue. Service created above can be seen in the services explorer as shown in the image below.

Configuring return type

In this step we will test the operation and configure the return type on the client i.e. we will specify what type of object to create with the response from the server. This will make it easy for us to develop, since it is easier to deal with strong typed objects.

Right click on the “getAllCustomers” operation in the services explorer and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Click next to continue. You can see the response from the server in the window as shown in the image below.

Flash Builder introspected the Customer object returned from the server. Just click on finish. You can see the return type of the operation changed as shown in the image below. When we invoke the “getAllCustomers” operation, response will be object of the type “Customer”, in our case ArrayCollection containing Customer objects.

Displaying or binding service results in UI controls

We usually write code to display the response from the service in a DataGrid or any other control. Flash Builder 4 has an awesome option which allows you to just bind a service response to a control.

In this screen:

1. Switch to design view
2. Change the Application layout to “spark.layouts.VerticalLayout” using the properties panel
3. Drag and drop a “DataGrid” from the “components” panel on to the design area
4. Set the width and height properties of the “DataGrid” to 100%

Right click on the DataGrid and select “Bind to Data …” as shown in the image below.

A window as shown in the image below will be launched.

In this screen:

1. We select a “New service call” because there are no existing services in the current application.
2. Select the “CustomerService”
3. Select “getAllCustomers():Customer[]” from the operations list
4. Select “Customer[]” as Data provider
5. Click OK

You can see the DataGrid in the design updated with properties of the Customer object as shown in the image below.

Save and run the application, you can see the data retrieved from the Remoting service and displayed in the DataGrid as shown in the image below.

More article on using Flash Builder 4 http://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we created a Flex UI for an existing PHP class using DCD features in Flash Builder 4 in just few minutes. Flash Builder 4 rocks

Using Flash Builder 4 for earlier BlazeDS builds

Updated for Flash Builder 4 release version

Flash Builder 4 has added Data-Centric Development features which will help you develop Flex applications for BlazeDS Remoting destinations very easily. You can create Flex front end for the Remoting destinations in just couple of clicks.

Flash Builder 4 uses the flex-rds-server.jar file which is added in BlazeDS 4. This jar file is used by Flash Builder 4 to retrieve details of the destinations exposed as Remoting services using BlazeDS. If you are using earlier builds of BlazeDS, you can still use new features in Flash Builder 4 by just copying the required jar file from BlazeDS 4 build.

Just follow the following simple steps to use Data-Centric Development features in Flash Builder 4

1. Download BlazeDS 4 binary distribution from this URL Download (4MB)
2. Extract the downloaded zip file to a folder
3. You will find blazeds.war file inside the extracted folder
4. Extract the content from blazeds.war file so that we can use  the flex-rds-server.jar file
5. Copy the flex-rds-server.jar file which will be found under WEB-INF/lib folder in blazeds.war to your web applications WEB-INF/lib folder
6. Copy the Servlet URL mapping and declaration for the RDSDispatchServlet from the web.xml in the blazeds.war file and add to your web application web.xml file. Else copy it from 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>

Restart your server and start using Flash Builder 4 for your BlazeDS projects as explained in this URL http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-blazeds-remoting-service-using-flash-builder-4/

More articles on how to use Flash Builder 4 – http://sujitreddyg.wordpress.com/flash-builder-4/

Flash Builder 4 is awesome

Building Flex application for BlazeDS Remoting destinations 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 Remoting destinations with just couple of clicks. Continue reading to see how Flash Builder is increasing J2EE developer productivity.

Set up BlazeDS

Download BlazeDS binary distribution from this URL Download (4MB) and follow instructions at this URL to setup BlazeDS http://sujitreddyg.wordpress.com/2009/04/07/setting-up-blazeds/

Once BlazeDS is setup you need to expose the Java class as Remoting destination, visit this URL to know how to expose a Java class as Remoting destination http://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/

Once your Java class is exposed as Remoting destination using BlazeDS, follow steps below to build Flex application using Flash Builder 4.

In this sample we will expose SimpleCustomerService.Java as Remoting destination. SimpleCustomerService communicates with database and returns SimpleCustomer objects.

Setting up BlazeDS RDSDispatchServlet

After setting up BlazeDS, you have to enable RDSDisptachServlet, which is used by Flash Builder 4 to get destination details. This is disabled by default. It’s very simple all you have to do is to un-comment/add the Servlet mapping in the web.xml.

Copy the Servlet URL mapping and declaration for the RDSDispatchServlet from the web.xml in the blazeds.war file and add to your web application web.xml file. If you copy the Servlet mapping from web.xml in blazeds.war file, don’t forget to change the useAppserverSecuirty param value to false as highlighted below. Alternatively copy the Servlet mapping from 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>

Install Flash Builder 4

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

Creating new Flex project with BlazeDS server configurations

Create new Flex project

Create new Flex project from the File menu as shown in the image above.

Enter project details

In this screen:

1. Enter project name
2. set “Web (runs in Adobe Flash Player)” as the application type
3. Use default Flex SDK (Flex 4.0)
4. Set the application server type to J2EE
5. Select BlazeDS
6. Click on Next to continue

Configure J2EE server settings

In this screen:

1. Set the Root folder to the root folder of your web application with BlazeDS configured. Its C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\demo in this sample
2. Set the Root URL to root URL of your BlazeDS enabled web application
3. Set the Context root to context root of your BlazeDS enabled web application
4. Leave the output folder to default value
5. Click on validate configuration button
6. Click finish to continue

Using DCD feature to connect to consume Remoting Service

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how this is making developers productive. In this sample we will see how to create a Flex application which consumes BlazeDS Remoting service. Same steps can be followed for LCDS Remoting services also.

Creating Service using DCD

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 above) in the Data/Services window
3. Window as shown in the image below will be launched

Select BlazeDS and click on Next. 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.

Selecting Remoting destination

You can see that Flash Builder listed all destinations exposed in the screen below.

In this screen we are selecting the destination the newly created service should use. All destinations available will be displayed. Select a destination (SimpleCustomerServiceDestination in this sample) and click on Finish to continue.

Code for invoking the Remoting service will be generated, you can see the service and its operations (methods exposed by the Java class) being displayed in the “Data/Services” window and in the package explorer.

Flash Builder 4 introspects return types for the Java class methods and creates AS3 classes for any custom Java classes.

Binding data/service to UI controls

Switch design view and drag and drop a DataGrid component as shown in the image below.

In this screen:

1. Switch to design view
2. Change the Application layout to “vertical” using the properties panel
3. Drag and drop a “DataGrid” from the “components” panel on to the design area
4. Set the width and height properties of the “DataGrid” to 100%

Select the DataGrid. Right click on the DataGrid and select “Bind to Data …” as shown in the image below

A window as shown in the image below will be launched.

In this screen:

1. We select a “New service call” because there are no existing services in the current application.
2. Select the “SimpleCustomerServiceDestination”
3. Select “getAllCustomers():SimpleCustomer[]” from the operations list
4. Selct “SimpleCustomer[]” as Data provider
5. Click OK

You can see the DataGrid with columns for added for properties of the SimpleCustomer class in the design view as shown in the image below.

Configuring DataGrid 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. Arrange columns using the “up” and “down” button
2. Click on OK
3. Save and run the application

You can see application with data retrieved from the server and displayed in the DataGrid as shown in the image below.

More articles on how to use Flash Builder 4 – http://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we have a Flex front end build for an existing Java class in just few minutes. Flash Builder 4 rocks