Slides and Source files from Data Centric Development session at devsummit

I had great time presenting Data Centric Development on Adobe Flash Platform at Adobe devsummit Chennai and Hyderabad. Thanks to all the speakers, community members and delegates for making this devsummit a great success Please download the presentation and source files for the demos from the URLs below.

PRESENTATION

Please find the presentation (Some of my slides are from Christophe Coenraets presentation at Adobe MAX) at this URL https://acrobat.com/#d=iXpvdvfVGYYunqRt*xZ*6A

SOURCE FILES FOR DEMOS

Please download the Java and PHP source files used in the first two demos and set up as explained in the article at this URL http://flashahead.adobe.com/events/devsummit2009/lbd/lbd_setup_instructions.pdf

Flash Builder 4 DCD with Java

Demonstrated how Data-Centric Development features in Flash Builder 4 can be used to easily integrate Flex with J2EE backend. Please find tutorial on using Flash Builder with J2EE backend at this URL http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-blazeds-remoting-service-using-flash-builder-4/

Source file (Flash Builder 4 project): http://sujitreddyg.com/presentations/devsummit2009/demo1.fxp

Flash Builder 4 DCD with PHP

Demonstrated how Data-Centric Development features in Flash Builder 4 can be used to easily integrate Flex with PHP backend. Please find tutorial on using Flash Builder 4 with PHP backend at this URL http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-a-php-class-using-flash-builder-4/

Source file (Flash Builder 4 project): http://sujitreddyg.com/presentations/devsummit2009/demo2.fxp

Model Driven Development

Demonstrated how to do model driven development using Flash Builder 4 and LiveCycle Data Services 3. Please find tutorial on model driven development and setup instructions at this URL http://sujitreddyg.wordpress.com/2009/06/18/tutorial-on-model-driven-development-using-flash-builder-4-and-livecycle-ds-3/

Source file (Flash Builder 4 project): http://sujitreddyg.com/presentations/devsummit2009/demo3.fxp

Adobe Community Rocks

Built in Data Paging using Flash Builder 4

Updated for Flash Builder Beta 2

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://labs.adobe.com/technologies/flashbuilder4/

Create a 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. Set the Flex SDK to “Flex 3.4”
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” 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 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 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 “vertical” 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. 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.

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 Beta 2

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://labs.adobe.com/technologies/flashbuilder4/

Create a 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. Set the Flex SDK to “Flex 3.4”
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” 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” 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.

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 “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%

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

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://labs.adobe.com/technologies/flashbuilder4/

Create a 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. Set the Flex SDK to “Flex 3.4”
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” 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 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 “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%

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 an existing PHP class using DCD features in Flash Builder 4 in just few minutes. Flash Builder 4 rocks

Invoking PHP functions from Flex using AMFPHP

You can invoke functions in a PHP class from a Flex application using Remoting as we used to do with Java classes. I used AMFPHP (http://www.amfphp.org/ ) for invoking PHP functions.

In this article we will see how to set up AMFPHP on the system and then we will create a Flex application to invoke the PHP function and also create PHP function which will serve our request.

Note: You need to have a web server with PHP 5 configured to have this sample working.

Setting up AMFPHP

1.       Download amfphp-1.9.beta.20080120.zip under amfphp_1.9_beta2 from this URL http://sourceforge.net/project/showfiles.php?group_id=72483#files

2.       Create folder called amfphpsamples in the document folder of your Apache server configured with PHP 5

3.       Extract the amfphp-1.9.beta.20080120.zip file to amfphp-1.9.beta.20080120

4.       From extracted amfphp-1.9.beta.20080120\amfphp folder, copy services folder, core folder, gateway.php and globals.php into the amfphpsamples folder created above

5.       Now we have our AMFPHP set up in our web application folder

6.       Try invoking gateway.php and see if it is set up properly. (http://<servername>:<portnumber>/amfphpsamples/gateway.php)

Creating PHP class

1.       Create file named FirstService.php under amfphpsamples/services/com/adobe

2.       Open the FirstService.php and paste the code from the PHP class at this URL http://sujitreddy.g.googlepages.com/FirstService.php.txt

3.       In our PHP file, we have a class called FirstService

4.       In the class we have a function called greetUser()

5.       Now we have our PHP class ready

Creating Flex application to invoke PHP function

1.       Create Flex project using your Flex Builder

2.       Copy the code from this file into your application MXML file http://sujitreddy.g.googlepages.com/MyPhpSamples.mxml

3.       In the code you can see a RemoteObject with endpoint property pointing to the gateway.php

4.       RemoteObject also has a source property set to com.adobe.FirstService, which is the class we created above

5.       On button click we are adding event listeners to ResultEvent.RESULT and FaultEvent.FAULT events of the RemoteObject

6.       If the response is successful the result event handler is invoked and fault handler is invoked if there is a problem invoking the service

7.       In the result handler you can notice that we are using event.result to retrieve the response from the server.

8.       event.result will contain the response from the server

You can try the sample at this URL http://www.sujitreddyg.com/amfphpsamples/flex/FirstRemotingSample.html

That’s it we have our first Remoting sample using Flex and PHP working. I will post more samples using WebORB PHP soon