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