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

In this article we will see how we can do model-driven development using Flash Builder 4 and LiveCycle Data Services 3 beta. At the end of this article we will have a Flex application using which we can perform operations on the data in a database table. We will build this Flex application just using Adobe tools and not writing any Flex or Java code

Install LCDS 3

Download LiveCycle Data Services 3 beta from this URL http://labs.adobe.com/technologies/livecycle_dataservices3/. You will be downloading a file named livecycle_dataservices3_b1_win_061509.exe, execute this file to install. I have installed LCDS 3 with Tomcat to C:\lcds3beta

Set up Fiber modeler plugin

Download Fiber modeler plugin from this URL http://labs.adobe.com/technologies/livecycle_dataservices3/. You will be downloading file named livecycle_dataservices3_modelerplugin_061509.zip, extract the contents of the zip file to a folder called livecycle_dataservices3_modelerplugin_061509. Copy the files under livecycle_dataservices3_modelerplugin_061509/plugins folder into C:\Program Files\Adobe\Flash Builder Beta\plugins.

Setting up data source

We need to expose databases as data sources. Fiber modeler plugin will use the data sources to get details of the tables in the database. In this sample, we will use lcds-samples web application and the samples database which are bundled with LCDS 3. Data source for the LCDS sample data base is already set up for us in C:\lcds3beta\tomcat\conf\Catalina\localhost\lcds-samples.xml

Setting up RDSDispatchServlet

Flash Builder and Fiber Modeler plugin use the RDSDispatchServlet to get information like data source, destinations, etc. by default the RDSDispatchServlet is commented in web.xml. Open C:\lcds3beta\tomcat\webapps\lcds-samples\WEB-INF\web.xml using a text editor and remove comment around RDSDispatchServlet Servlet definition and the URL mapping.

Start LCDS and samples database

Start LCDS samples data base from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES2 Version 3 Beta -> Start samples database

Start LCDS server from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES2 Version 3 Beta -> Start LiveCycle Data Service 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, Fiber modeler plugin and LCDS 3.

Create a Flex project

Start Flash Builder 4 from the start menu, start -> All Programs -> Adobe -> Adobe Flash Builder Beta

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. Let the SDK version be default
4. Set the Application server type to J2EE
5. Select User 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:\lcds3beta\tomcat\webapps\lcds-samples
2. Set the Root URL to http://localhost:8400/lcds-samples/
3. Set the Context root to /lcds-samples
4. Click on validate Configuration to validate server configuration
   
5. Leave the Output folder to default, which is on the server
6. Click finish to continue

Flash Builder will create a project with a default application file. Now let’s build the model from a database table using Fiber Modeler Plugin. For the modeler plugin to retrieve data sources we configured, we need to configure RDS Server.

Configure RDS Server

Select preferences from the 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-samples web application as shown in the image below.

In this screen:

1. Set the description to LCDS-SAMPLES (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-samples
5. Leave the User name and Password blank under the Security Information section
6. Click OK to continue

We configured RDS server, let’s create a model.

Creating model using Fiber Modeler plugin

Right click on the the MDDSample Flex project and create new Data Model file as shown in the image below.

Window with option to fill model properties will be launched as shown in the image below.

In this screen, set the File name to Product.fml and click on Next to continue.

In this screen, since we want to create model from a table in the database we will 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 exposed.

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-SAMPLES (localhost), one we created in previous steps
2. Data sources available will be listed down. Select java:/comp/env/jdbc/ordersDB
3. Tables available in the data source will be listed, select PUBLIC.PRODUCT
4. Click on Finish to continue

Fiber Modeler Plugin will create Prouct.fml based on the Product table. You will see the Adobe Data Model perspective will launched as shown in the image below.

In this screen, you can click on Yes to launch Adobe Data Model perspective. You will Product entity represented graphically as shown in the image below.

Let’s deploy this model to the LCDS server. Right click on the Product.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-SAMPLES (localhost)
2. Set the model name to Product
3. Set the Database Tables to Unchanged
4. Click on Finish to continue

Fiber Modeler Plugin deployed the Product 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.

We will consume the data in the Product table and bind the data to a UI control. Click on the Connect to Data/Service link as shown 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. You will be prompted for credentials, since we don’t have this enabled, just select No password required check box and click 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 Product.Product is created whose associated source class is fiber.data.assemblers.FiberAssembler and the service type is data-service.

In this screen:

1. Set the Service name to ProductService
2. Select Product.Product destination
3. Set the package name to services.productservice
4. Click on Finish to continue

Flash Builder will generate all code required to consume the service selected and will list the ProductService in the services explorer as shown in the image below. You can also see a window displayed with next logical steps. Read the next logical steps and click on OK.

You can also see that the return types for the service operations are properly set. Now that we have the service created, lets 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 from the properties panel
2. Drag and drop a DataGrid on to the design view
3. Set the width of the DataGrid to 100%

Now let’s bind the service result to DataGrid.

In this screen:

1. Select the DataGrid
2. Right click on the DataGrid
3. Select Bind To Data

You will see a window launched with options to select the service as shown in the image below.

In this screen:

1. Select New service call
2. Set the Service to ProductService
3. Set the Operation to getAll
4. Click on OK to continue

You will see that the DataGrid will change its columns to reflect the properties of the Product 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 and so the changes to the data on the client will automatically be updated on the server and hence this will be a complete application. Switch to code view and this line of code to enable auto commit as shown in the image below.

productService.serviceControl.autoCommit = true;

Save and run the application. You can edit the data in the DataGrid and just press enter, 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/

Few minutes back we had a database table, we created a complete Flex application to perform operations on the data in the database using Adobe tools. Now that’s Rapid Application Development.

There are lots of additions to the LiveCycle Data Services 3, try them.

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

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.

In this sample we will use this Java class as Remoting destination http://www.sujitreddyg.com/fb4articles/ManagedCustomerDAO.java.txt

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/

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(Customer customer) or public Customer addCustomer(Customer customer)”
2. Update item – accepts entity type object and returns nothing “public void updateCustomer(Customer customer)”
3. Delete item – accepts either ID of the item or the entity object to delete and returns nothing “public void deleteCustomer(int customerId) or public void deleteCustomer(Customer customer)”
4. Get item – accepts ID of the item and returns entity object “public Customer getCustomer(int customerId)”

Now that we have our server side code ready, we will enable data management on the client.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://sujitreddyg.wordpress.com/flash-builder-4/

Create new Flex project

Create a new Flex project and enter project details as explained below.

In this screen:

1. Enter project name
2. set “Web (runs in Adobe Flash Player)” as the application type
3. change the Flex SDK to Flex 3.4
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
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

Step 4: Creating Data/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

Step 4.1: Creating new service

Select BlazeDS and click on Next. Window asking if RDS server requires authentication will be displayed as shown in the image below, just select “No password required” as we configured our RDS sever to not use authentication. Click OK to continue.

Step 2.1: Selecting Remoting destination

In this screen we will select the destination to use. All destinations available will be displayed, select the destination which points to the Java class created as mentioned previously in this article. Give a name to for this service and click on Finish to continue.

Code for invoking the Remoting service will be generated and you will see a window displaying next logical steps as shown in the image below. Please give a minute to read this and click on OK. 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.

If you observe, getCustomers() and getCustomersPaged() operation have return type set to Object[], we will configure it to return array of Customer classes.

Step 3: Configuring return type for the service

Right click on getCustomers and select “Configure Return type …” in the “Data/Services” window as shown in the image below.

A window with options to set the return type for the operation will be launched as shown in the image below.

In this screen:

1. Select “Use and existing ActionScript or custom data type” radio button. We are configuring to use Customer class, which was already generated as part of getCustomer() operation as shown in the Data/Services window.
2. From the drop down select Customer[]. This means the when getCustomers() operation is invoked, returned result from server will be converted to Array of Customer objects.
3. Configure getCustomersPaged() operation return type to Customer[]
4. Click on finish to continue

Step 4: 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 and click on next.

We need set the functions/methods/operations the Data Management has to use for performing CRUD operations. Select appropriate operations as show in the image above. Operations should have signatures as explained earlier in this article.

In this screen:

1. Respective operations will be invoked when a item is created/updated/deleted or to retrieve items from server
2. Click finish to continue.

Step 5: Binding data to UI controls

Switch to design view as shown in the image below.

In this screen:

1. Change the Application layout to vertical
2. Drag and drop a DataGrid on to the design view
3. Select the DataGrid
4. Right click on the DataGrid and select “Bind to Data”
5. 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 “CustomerService” from services
3. Select “getAllCustomers()” operation from the list
4. Click on OK to continue

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

In this screen:

1. You will see the code being generated to send a request to “CustomerService” and display the response in the DataGrid
2. Add a Button control below DataGrid and create a click event handler for the button as shown in the image
3. In the click event handler, call customerService.commit(). Here we are asking CustomerService instance to commit all changes performed to the list being managed

Save and run the application. Application will be launched in the browser. 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. That is 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/two lines 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://www.sujitreddyg.com/fb4articles/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

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.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/

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

Step 1: Create a new Flex project

Enter project details as show in the image above. Click on finish to create the project.

Step 2: Creating a service

You can see Data/Service window, which is called services explorer. Click on the “Connect to Data/Service” link to create a new service, you can see a window launched as shown in the image below.

Step 2.1: selecting service type

In this window we can select the type of service we want to create. Since we are selecting HTTP Service, select HTTPService from the options and click on next button.

Step 2.2: setting service properties

In this screen:

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

A message window displaying next logical steps will be displayed as shown in the image below. You can also see the service created above listed in the services explorer. Just click on the ok button in the message window.

Step 3: Configuring return type

We will configure to create a AS3 class based on the returned JSON response. This will make it easy for us to develop, 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. We can chose to create a new data type based on the response from the server. We will configure to create a class named “SearchResult” with the response. Enter the name of the class as shown in the image below and click on the next.

Step 3.1: Invoking the operation and introspecting the response

In this step we will send response to the server and see the response to configure the “SearchResult” class type.

In this screen:

1. Select “Enter parameter values”
2. Enter “YahooDemo” for parameter “appId”
3. Enter “India” for parameter “query”
4. Enter “json” for parameter “output”
5. Click on next

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

Step 3.2: Setting properties for return type (SearchResult class)

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

Step 4: generating form or displaying service results

We usually create a form to display the response from the service. Flash Builder 4 has an awesome option which generates form based on the response from the server.

Right click on the “searchWeb” operation as shown in the image below and select “Generate form” as shown in the image below.

Step 4.1: select the service and forms to generate

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

In this screen:

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

Step 4.2: Generating user input form

You can select the fields for which the form fields 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 rendered and click on finish.

In this screen we are selecting only query, because that’s the only input we want from the user.

You can see the code to take input from the user and to display the response is being generated in the MXML file as shown in the image below.

In this screen:

1. Change the arguments to the searchWeb 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
4. Change the layout of the Application to “vertical”

Step 4.3: 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. Drag and drop a DataGrid from the components panel to the design view
2. Select the DataGrid
3. Right click on the DataGrid and select “Bind to Data”

Window with options to bind DataGrid to the service will be launched as shown in the image below.

In this screen, just select existing call result. This was the call we created for the input for created in previous steps. We are binding the output of the input form to the DataGrid. Just click ok and continue.

Switch to source view and change the data provider of the DataGrid to “searchWebResult.lastResult.ResultSet.Result” as shown in the image below

Copy the code below under <mx:columns> of the DataGrid as shown in the image above.

<mx:DataGridColumn headerText=”Title” dataField=”Title” editable=”false”/>

<mx:DataGridColumn headerText=”Url” dataField=”Url” editable=”false”/>

Save and run the application. Application will be launched in the browser enter “sujit reddy” in the TextInput and click on “Search Web” button. You will see request will be sent and the response being displayed as shown in the image below.

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

Flash Builder 4 rocks

Connecting to HTTP Services with the Data Centric Development (DCD) feature in Flash Builder 4

Creating rich internet applications using Adobe Flex for a HTTP Service is made very simple with Flash Builder 4. You just have to know the URL to the HTTP Service and Flash Builder will take care of the rest. Want to know more on how to add rich clients to a HTTP Service, continue reading this article.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/

Step 1: Create a new Flex project

 

Enter project details as shown in the image above. Click on finish to create the project.

Step 2: Creating a service

 

You can see Data/Service window, which is called services explorer. Click on the “Connect to Data/Service” link to create a new service, you can see a window launched as shown in the image below.

Step 2.1: selecting service type

 

In this window we can select the type of service we want to create. Since we are selecting HTTP Service, select HTTPService from the options and click on next button.

Step 2.2: setting service properties

 

In this screen:

1. Name the service as YahooWeatherService
2. Add a operation called “getDetails”
3. Set the URL of the operation to http://weather.yahooapis.com/forecastrss?p=841016&u=c
4. You can see the query string parameters in the URL are added to the “Parameters” section of the operation.
5. Click on finish button to create the service

A message window displaying next logical steps will be displayed as shown in the image below. You can also see the service created above listed in the services explorer. Just click on the ok button in the message window.

 

Step 3: Configuring return type

We will configure service to create an AS3 class based on the returned XML. This will make it easy for us to develop, since it is easier to deal with strong typed response.

Right click on the “getDetails” 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. We can chose to create a new data type based on the response from the server. We will configure to create a class named “Weather” with the response. Enter the name of the class as shown in the image below and click on the next.

 

 Step 3.1: Invoking the operation and introspecting the response

In this step we will send response to the server and see the response to configure the “Weather” class type.

 

In this screen:

1. Select “Enter parameter values”
2. Enter “84101” for parameter “p”
3. Enter “c” for parameter “u”
4. Click on next

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

Step 3.2: Setting properties for return type (Weather class)

In this step we will select the nodes we want to be in the “Weather” class.

 

In this screen:

1. Select “Channel” from the “Select node”. Because that is the node we want
2. Click on finish

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

 

 

Step 4: generating form or displaying service results

We usually create a form to display the response from the service. Flash Builder 4 has an awesome option which generates form based on the response from the server.

Right click on the “getDetails” operation as shown in the image below and select “Generate form” as shown in the image below.

 

Step 4.1: select the service and forms to generate

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

 

In this screen:

1. Select “New service call”
2. Select “YahooWeatherService”
3. Select “getDetails” operation
4. We need form to take input, so select “Form for input parameters”
5. We also need to see the results returned, select “For for return type”
6. We don’t want users to edit the response, so deselect “Make result for editable”
7. Click on next

Step 4.2: selecting fields to display

You can select the fields for which the form fields 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 rendered and click on finish.

 

You can see the code to take input from the user and to display the response is being generated in the MXML file as shown in the image below.

 

In this screen:

1. Change the arguments to the getDetails function as shown in the image above
2. If you observer we didn’t select “u” in the list of parameters in the previous step and so we should provide the value to the service. Whereas the first argument is picked from the TextInput control generated. Set the second argument to “c”
3. Change the layout of the Application to “vertical”

Run the application. Application will be launched in the browser enter “84101” in the TextInput and click on “Get Details” button. You will see request will be sent and the response being displayed 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 HTTP Service and used Flash Builder to generate the form, instead of writing the code. Flash Builder 4 rocks

Built in Data Paging using Flash Builder 4

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.

In this sample, we will enable data paging for a PHP class. 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, for example when user scrolls the DataGrid scroll bar.

Two functions/methods/operations to implement on server

1. Returns number of rows in the database for example “count()”
2. Takes two input arguments and returns the data collection. The two input arguments are start index and number of items to return for example “getItems_paged($startIndex, $numItems)”

Download PHP class with paging functions implemented from here http://www.sujitreddyg.com/fb4articles/CustomerService.php1.txt

Have a look at the getItemsPaged and count functions in the downloaded PHP class.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/

Step 1: Create a new Flex project

Create a new Flex project and enter project details as shown in the image above. Click on next to enter the PHP server details, you will see a window launched as shown in the image below.

In this screen:

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

Step 2: Creating a service

You can see Data/Service window, which is called services explorer. Click on the “Connect to Data/Service” link to create a new service, you can see a window launched as shown in the image below.

Step 2.1: selecting service type

In this window we can select the type of service we want to create. Since we want to communicate with the PHP we created, select PHP and click on next button.

Step 2.2: setting service properties

In this screen:

1. Name the service as CustomerService
2. Select “Import PHP class” radio button, because we are trying reuse the PHP class created
3. Enter the location to the PHP file, so that Flash Builder can introspect the PHP class
4. Click on next button to continue

You can download the CustomerService.php at this URL http://www.sujitreddyg.com/fb4articles/CustomerService.php1.txt

You will see a window displayed, saying Zend AMF library will be installed. 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. A message window displaying next logical steps will be displayed as shown in the image below. You can also see the service created above listed in the services explorer. Just click on the ok button in the message window.

Step 3: 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. We can chose to create a new data type based on the response from the server. We will configure to create a class named “Customer” with the response. Enter the name of the class as shown in the image below and click on the next.

Step 3.1: Invoking the operation and introspecting the response

In this step we will send response to the server and see the response to configure the “Customer” class type.

Operation requires two integer values as input arguments. Enter those two values as shown in the image above. Since our service doesn’t require authentication, select “No” and click on next to continue. You can see the response from the server in the window as shown in the image below.

Just click on finish. 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.

Step 4: Enabling paging

To enable paging right click on “getItems_paged()” operation and select “Enable paging” as shown in the image below.

You will get 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.

In this screen, select the operation to use for getting total count of records. Select and click finish to continue.

We have enabled data paging all we have to do is bind to a UI control and see how data is fetched on demand automatically

Step 4: 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.

Switch to design view as shown in the image below.

In this screen:

1. Change the Application layout to “vertical”
2. Drag and drop a DataGrid from the components panel to the design view
3. Select the DataGrid
4. Right click on the DataGrid and select “Bind To Data”

Window with options to invoke a service will be launched as shown in the image below.

In this screen, select “Customer Service” and “getItems_paged()” operation and click ok and continue.

Save the application and run.

Paging is enabled and the data will be retrieved only when it is required, for example when you scroll the DataGrid to a row whose data is not retrieved, the data gets loaded from server automatically and displayed. You can change the paging size by adding following lines of code as shown in the image below.

var dm:DataManager = customerService.getDataManager(

customerService.DATA_MANAGER_CUSTOMER);

dm.pageSize = 25;

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

You have database table and want to create a Flex application to perform CRUD operations on it? Flash Builder 4 makes it easy for you. You just have to write your SQL queries and leave it to the Flash Builder 4. Continue reading this article to know how.

Step 1: Create a new Flex project

Enter project details as shown in the image above. Click on next to enter the PHP server details, you will see a window launched as shown in the image below.

In this screen:

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

Step 2: Creating a service

You can see Data/Service window, which is called services explorer. Click on the “Connect to Data/Service” link to create a new service, you can see a window launched as shown in the image below.

Step 2.1: selecting service type

In this window we can select the type of service we want to create. Since we want to communicate with the PHP class, select PHP and click on next button.

Step 2.2: setting service properties

In this screen:

1. Name the service as CustomerService
2. Select “Generate sample PHP class” radio button, let us allow Flash Builder to create the PHP class file
3. Click on finish button to continue

You will see a window displayed, saying Zend AMF library will be installed. Just click on OK and continue. Flash Builder will deploy the Zend AMF on your PHP server. Once the installation completes, Flash Builder will display a message. Clicking OK to continue.

A message window displaying next logical steps will be displayed as shown in the image below. You can also see the service created above listed in the services explorer with all functions in the PHP class listed as operations. Just click on the ok button in the message window. 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.

Step 3: 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. Just open the PHP and start modifying the SQL queries in all the functions. You will find the shortcut to the PHP file under “services” folder in the Flash Builder project as shown in the image below.

You can download the completed PHP file used in this sample at this URL http://www.sujitreddyg.com/fb4articles/CustomerService.php1.txt

Once you download, rename the file to CustomerService.php

Step 4: Configuring return type

In this step we will test the operation and configure the return type for service operations 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. We can chose to create a new data type based on the response from the server. We will configure to create a class named “Customer” with the response. Enter the name of the class as shown in the image below and click on the next.

Step 4.1: Invoking the operation and introspecting the response

In this step we will send response to the server and see the response to configure the “Customer” class type.

Since our service doesn’t require authentication, click on next to continue. You can see the response from the server in the window as shown in the image below.

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.

Similarly configure return types for all other operations. Since “Customer” type is already configured, you can just select from the existing types rather than trying to configure the Customer type again. Configure the return type of the “count()” operation to “int”.

Right click on the “count()” operation and select “Configure Return Type” as shown in the image above. Window with options to set the return type will be displayed as shown in the image below.

In this screen, since the “count()” operation returns “int”, we will select that from the existing types. Image below shows all operations configured with the return types.

Step 5: 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.

Switch to design view as shown in the image below.

In this screen:

1. Change the Application layout to “vertical”
2. Drag and drop a DataGrid from the components panel to the design view
3. Right click on the DataGrid and select “Bind to Data”

Window with options to invoke a service will be launched as shown in the image below.

In this screen, select “Customer Service” and “getAllCustomers()” operation and click ok and continue.

Save and run the application. Application will launch in a browser. You will see request will be sent and the response being displayed as shown in the image below.

Similarly you can invoke any operation on a Button click or bind operation response to a UI control.

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

That’s it we created a Flex web application using PHP with Flash Builder 4 in few minutes. Flash Builder 4 rocks

Building Flex application for a PHP class using Flash Builder 4

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

In this sample, we will see how to build a Flex application for this PHP class http://www.sujitreddyg.com/fb4articles/CustomerService.php.txt

Step 1: Create a new Flex project

Click on next to enter the PHP server details, you will see a window launched as shown in the image below.

In this screen:

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

Step 2: Creating a service

You can see Data/Service window, which is called services explorer. Click on the “Connect to Data/Service” link to create a new service, you can see a window launched as shown in the image below.

Step 2.1: selecting service type

In this window we can select the type of service we want to create. Since we want to communicate with the PHP we created, select PHP and click on next button.

Step 2.2: setting service properties

In this screen:

1. Name the service as CustomerService
2. Select “Import PHP class” radio button, because we are trying reuse the PHP class created
3. Enter the location to the PHP file, so that Flash Builder can introspect the PHP class
4. 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. A message window displaying next logical steps will be displayed as shown in the image below. Take some time to read this message window. You can also see the service created above listed in the services explorer. Just click on the ok button in the message window.

Step 3: 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. We can chose to create a new data type based on the response from the server. We will configure to create a class named “Customer” with the response. Enter the name of the class as shown in the image below and click on the next.

Step 3.1: Invoking the operation and introspecting the response

In this step we will send response to the server and see the response to configure the “Customer” class type.

Since our service doesn’t require authentication, click on next to continue. You can see the response from the server in the window as shown in the image below.

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.

Step 4: 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.

Switch to design view as shown in the image below.

In this screen:

1. Change the Application layout to “vertical”
2. Drag and drop a DataGrid from the components panel to the design view
3. Drag and drop a Button below the DataGrid
4. Select the Button
5. Right click on the Button and select “Generate Service call ”

Window with options to invoke a service on click of the button will be launched as shown in the image below.

In this screen, select “Customer Service” and “getAllCustomers()” operation and click ok and continue.

Select the DataGrid and right click on it in the design view and select “Bind to data” as shown in the image below.

Here we will bind the result from the service invoked on click of the Button create in previous step. You will see a window with options to bind DataGrid to a service result as shown in the image below.

In this screen, we will select “Existing call result” and select the “getAllCustomerResult”. This is the result of the service created for Button click. Click ok to continue.

Save and run the application. Application will launch in a browser. Click on the button to send request to the server. You will see request will be sent and the response being displayed 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 PHP class in just few minutes. Flash Builder 4 rocks

Using Flash Builder 4 for earlier BlazeDS builds

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 build from this URL http://flexorg.wip3.adobe.com/blazeds/trunk/7445/blazeds-bin-4.0.0.7445.zip
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>

<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

Creating Flex UI for a J2EE application is now easier. Flash Builder 4 allows you to build Flex application for BlazeDS Remoting destinations with just couple of clicks. Continue reading to see how Flash Builder 4 is increasing developer productivity.

Set up BlazeDS

Download BlazeDS from this URL http://flexorg.wip3.adobe.com/blazeds/trunk/beta1/7548/blazeds-bin-4.0.0.7548.zip 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.

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

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

Creating new Flex project with BlazeDS server configurations

Create new Flex project

Create a new Flex project as showing in the image below

Enter project details

In this screen:

1. Enter project name
2. set “Web (runs in Adobe Flash Player)” as the application type
3. Set the Flex SDK to Flex 3.4
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\blaze4samples 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 are looking at how to connect to a BlazeDS service.

Creating Service using DCD

1. Select the Data/Services window shown in the image above. This Data/Services window is also called services explorer. 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

Select BlazeDS and click on Next 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. Give a name to for this service and select a destination (product in this sample) and click on Finish

Code for invoking the Remoting service will be generated and you will see a window displaying next logical steps as shown in the image below. Please give a minute to read this and click on OK. 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.

Flash Builder 4 will introspect return types for the Java class methods and sets the same return type for the operations created. AS3 classes for the Java beans will also be generated. In few cases, where a list is returned or return type of a method cannot be introspected, we should configure the return type. If you observe, getProducts() operation has return type set to Object[], we will configure it to return array of Product objects.

Configuring return type for an operation

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

A window as shown in the image below will be launched with options to configure return type for the operation selected.

In this screen:

1. Select “Use and existing ActionScript or custom data type” radio button. We are configuring to use Product class, which was already generated as part of getProduct() operation as shown in the services explorer.
2. From the drop down select Product[]. This means the when getProducts() operation is invoked, returned result from server will be converted to ArrayCollection of Product objects.
3. Click on finish to continue

Binding service operation to UI controls

Flash Builder 4 allows you to just drag and drop a service operation onto a Flex control to bind the operation response to the UI control. Flash Builder generates the code to invoke the service and also bind the response to the UI control.

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

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

A window which allows you to select a service and the operation to invoke and get the response as shown in the image below will be launched.

In this screen:

1. Select “New service call”
2. Select the “SampleService”, this is the service we created in previous steps
3. Select “getProducts()” from the operations list
4. Click OK to continue

You can see the DataGrid in the design view 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 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