LiveCycle Data Services 3.0 is released as part of LiveCycle ES 2

What’s New

1. Model driven development of Flex applications
2. Reliable Messaging
3. Throttling
4. Edge Server
5. Load test harness: Simulate Flex clients in Java

Documentation:

LiveCycle Data Services ES2 Quick Starts – http://www.adobe.com/go/learn_lcds3_modeling_howto

Other documentation – http://help.adobe.com/en_US/livecycle/9.0/lc_ds_list.html

Download Developer Version

You can Download the trial or a free developer version to get started from this URL http://www.adobe.com/go/trylivecycle_dataservices

Please find more details regarding the announcement on Anil Channappa’s (Product Manager LCDS and BlazeDS) blog at this URL http://anilchannappa.org/2009/11/20/lcds-3-0-released/

Congratulations to the entire LiveCycle Data Services team … LCDS team Rocks

I will be speaking on Data Centric Development on Adobe Flash Platform and also will be handling the Learn by doing – Part 2: Integrate with server session along with Prashant Singh.

Summit attendees will get a complimentary Flex Builder 3 Professional License. Please find session abstracts and more details below

Adobe devsummit is the biggest annual developer event focused on the Adobe Flash Platform. This event attracts a rich demographic mix spanning designers and developers in India. Adobe has consistently showcased path breaking technologies at devsummit.

For the first time Adobe devsummit is coming to Chennai, India (24^th November, 2009) and Hyderabad, India (1^st December, 2009). Please find more details on Adobe devsummit Chennai and Hyderabad and register at this URL http://endtoend.in/apps/forms/adobe/DevSummitNovDec09/home.html

Excited to meet the developers in Chennai and Hyderabad

Session Abstracts

Data Centric Development on Adobe Flash Platform

See how to build an engaging Flex application for any server side technology productively. While application created with Flex and Flash already have ability to communicate with various back ends, see how data services can add power to a back end.

This session starts with showing how to use Data-Centric Development feature in Flash Builder 4 to productively create Flex applications connecting to various server technologies. Next, see how the brand new model-driven development feature of LiveCycle Data Services ES allows you to build and maintain data-driven Flex applications with an unprecedented level of productivity and flexibility.

Learn by doing – Part 2: Integrate with server

Learn how to connect your Flex application to servers for retrieving/storing data; and also deploy your application. We will demonstrate how you can connect to various server technologies like Java, .NET and PHP using remoting and web services. You will also learn how to use the Data-Centric development feature in Flash Builder 4 to develop Flex applications that connect with various server technologies.

If you are living in and around Chennai or Hyderabad, go ahead and register for the summit

Catch you all at the summit

Adobe DevSummit is the biggest annual developer event focused on the Adobe Flash Platform. This event attracts a rich demographic mix spanning designers and developers in India. Adobe has consistently showcased path breaking technologies at DevSummit.

For the first time DevSummit is coming to Chennai and Hyderabad. DevSummit in Chennai will be on 24th November, 2009 and in Hyderabad on 1st December, 2009. We will be posting more details on the event and venue soon

We would love to have the experts from the Adobe developer community take the stage and share their knowledge and insights on Adobe Flash Platform. Please find more details and submit your session proposals at the URL below.

http://flashahead.adobe.com/events/devsummitsessionproposals/

Adobe Flash Builder4 beta 2 is available on http://labs.adobe.com for downloading. One of the themes of Flash Builder 4 is to make data-centric development a lot more easier. You can find articles on developing Flex application for various server technologies using Flash Builder 4 at this URL http://sujitreddyg.wordpress.com/flash-builder-4

The Data Centric work flows in Flash Builder 4 are designed to be extensible i.e. you can add a new plugin to Flash Builder by implementing the interfaces exposed by Flash Builder and add support for any back end of your choice.

Gaurav Priyadarshi from Adobe Flex team extended to add support for consuming AMF(Remoting) based services running on a Ruby on Rails driven server.

You need Flash Builder 4 beta 2 to use this plugin, download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/ and then follow instructions below to set up Ruby on Rails plugin.

Please download the plugin and install from this URL http://dcdror.riaforge.org/

Details on installing the plugin and setting up Ruby on Rails project can be found at this URL http://dcdror.riaforge.org/blog/index.cfm/2009/10/9/Using-Ruby-On-Rails-plugin-for-DCD

Details on using the plugin can be found at this URL http://dcdror.riaforge.org/blog/index.cfm/2009/10/9/Using-the-plugin-from-FlashBuilder4

In this article we will create a CRUD application using Adobe Flex and LiveCycle Data Services. Flash Builder 4 allows developers to build Flex front end for LiveCycle Data Services (LCDS) Data management service destinations with just couple of clicks, so we will use Flash Builder 4 to develop this application.

Below are the steps we will follow to complete our application

1. Set up LiveCycle Data Services
2. Use Flash Builder to generate Flex code to invoke methods in Java class on the server
3. Retrieve data from server and display in the application
4. Allow user to add/update/delete entries from the application

In this article we will be building a Flex application for a Data Management service destination in the samples application called lcds-samples bundled with LiveCycle Data Services 3 Beta 3.

Article allows you to skip any of steps mentioned above and copy the code Let’s get started

You can download the completed project from here http://sujitreddyg.com/fb4articles/beta2/LCDSCRUD.zip

Install LCDS 3

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

Enabling RDSDispatchServlet

Flash Builder uses the RDSDispatchServlet (part of LCDS) to retrieve destinations information from the server. By default the RDSDispatchServlet is commented out in web.xml. Open C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\web.xml using a text editor and remove comment around RDSDispatchServlet Servlet definition and the URL mapping as shown below. Also set the useAppserverSecurity parameter value to “false” as shown below.

<servlet>

<servlet-name>RDSDispatchServlet</servlet-name>

<display-name>RDSDispatchServlet</display-name>

<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>

<init-param>

<param-name>useAppserverSecurity</param-name>

<param-value>false</param-value>

</init-param>

<load-on-startup>10</load-on-startup>

</servlet>

<servlet-mapping id=”RDS_DISPATCH_MAPPING”>

<servlet-name>RDSDispatchServlet</servlet-name>

<url-pattern>/CFIDE/main/ide.cfm</url-pattern>

</servlet-mapping>

Defining item class name

Set the item-class property of the Data Management service destination in Data Management service configuration file (C:\lcds3beta3\tomcat\webapps\lcds-samples\WEB-INF\flex\data-management-config.xml) to the name of the object type which the assembler is expecting. Flash Builder 4 DCD requires this property to be set for the destinations you want to consume using DCD in Flash Builder. All the sample destinations in LCDS 3 beta 3 have this property set. Sample destination used in this article has item-class property set to flex.samples.product.Product class as shown below.

<properties>

<source>flex.samples.product.ProductAssembler</source>

<scope>application</scope>

<item-class>flex.samples.product.Product</item-class>

<metadata>

<identity property=”productId”/>

</metadata>

<network>

<paging enabled=”false” pageSize=”10″ />

</network>

</properties>

</destination>

Start LCDS server

Start LCDS samples data base from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start Samples Database

Start LCDS server from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start LiveCycle Data Services Server

Please make sure both the database and the server are started.

We have everything ready to develop a Flex application for data management service destinations using Flash Builder 4.

Create a Flex project

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

Create a Flex project from the file menu. 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 LCDSCRUD
2. Let the Application type be Web
3. Set the SDK version to 3.4
4. Set the Application server type to J2EE
5. Select Use remote object access service check box
6. 6. Select LiveCycle Data Services ES
7. 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:\lcds3beta3\tomcat\webapps\lcds-samples
2. Set the Root URL to http://localhost:8400/lcds-samples
3. Set the Context root to /lcds-samples
4. Leave the Output folder to default, which is on the server
5. Click finish to continue

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

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

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 RDS authentication enabled, just select No password required check box and click OK to continue.

Now Flash Builder will retrieve all the Remoting service and Data Management service destinations exposed by the web application and displays as shown in the image below.

Our server settings are configured to point to the sample application bundled with LCDS called lcds-samples. This web application has lots of destinations exposed as shown in the image above. Destinations whose service-type is remoting-service are the Remoting service destinations and the ones whose service-type is data-service are the Data Management service destinations. In this sample we will use the “inventory” data management service destination. Select the destination and click on Finish to continue.

Flash Builder will generate all code required to consume the service selected and will list the Inventory service in the services explorer as shown in the image below.

You can also see that the return types for the operations (functions/methods of assembler) are properly set. Now that we have the service created, let’s create UI.

Creating UI

Please copy the code from this URL http://sujitreddyg.com/fb4articles/beta2/LCDSCRUD_1.mxml.txt into your main application file (LCDSCRUD.mxml in this sample). Code in the URL will add UI controls required for this sample application. After copying the code, your Flash Builder design view should look as shown in the image below.

Note: In this article to refer to a control, we will use value set for the id property of the controls.

Create Form for the Customer data type

We will display the details of the product entry selected in the listProducts control (created in previous step) in formSelectedProduct. Using Flash Builder you can bind a Form control to an entity instance.  Right click on the formSelectedProduct and select “Bind to Data” as shown in the image below.

Flash Builder will display window as shown in the image below.

In this screen:

1. We want the Form items to be generated based on a data type (Product) so select “Data type”
2. Select Product from the list of data types
3. We want the form to be editable, so select the “Make form editable” check box
4. Flash Builder will display the list of properties in the selected data type as shown in the image below. Flash Builder will also assign a UI control which it will use to display the property value as shown in the image below.

In this window, you can select the items which you want to be included in the form and UI control in which you want the property value to be displayed. You can also arrange the controls in the order in which you want them to be displayed. Select, arrange the properties and modify the controls as shown in the image above.

Flash Builder will add FormItems to formSelectedProduct and binds the values of the controls under formSelectedProduct to Product instance. In this sample Flash Builder generated a Product instance with “product” as its id. So we will refer to the Product instance bound to the items in formSelectedProduct as product.

Binding data to UI Controls

Now that we have our UI is ready, let’s get the data from the server and display it in the application.

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

Flash Builder will display window as shown in the image below.

In this screen:

1. Select New service call
2. Set Service to ProductService
3. Set Operation to fill(): Product[]
4. Set Bing to field to name
5. Click on OK to continue

In previous step we bound the service call result to listProducts component, listProducts will send a request to the fill() function on the server and displays the result.

listProducts is displaying only the name of the Product, so let’s display complete details of the product in formSelectedProduct. Right click on the listProducts and select “Generate Change Handler” as shown in the image below.

Flash Builder will generate a function which will be invoked when user selects a different item in the listProducts. Flash Builder will also switch the view to Source view as shown in the image below, so that you can write code in the handler function generated.

Add the code below to the generated change handler function as shown in the image above.

product = listProducts.selectedItem as Product;

In the code snippet above, product is the instance of Product which was bound to the formSelectedProduct. In the code above, we are passing the reference of the selected Product instance in listProducts to the Product instance bound to formSelectedProduct. This line of code will populate formSelectedProduct with details of the selected product in listProducts control.

Now, let’s keep formSelectedProduct populated with values of the first Product entry in listProducts as soon as the product data is loaded from the server.

Understanding the CallResponder

How will you know when the data is returned from the server? For each service call generated in the application there will be a CallResponder class instance associated with it. CallResponder dispatches result event when the call to the service is successful and the data returned from the server can be accessed using a property called lastResult in CallResponder instance. To map the CallResponder instance with the service call, you have to pass the reference of the AsyncToken returned by the service call to the token property of the CallResponder.  You can see service call AsyncToken reference passed to the CallResponder in listProducts_creationCompleteHandler function as shown below.

protected function listProducts_creationCompleteHandler(event:FlexEvent):void

{

fillResult.token = productService.fill();

}

CallResponder class will dispatch result event when the data is retrieved successfully from the server. You can add a handler to the result event to perform any logic when the server response is successful. In our case we will keep the first product in the listProducts to be selected and its value to be displayed in formSelectedProduct as soon as the data from the server is loaded on to the client.

Add a result event handler to the fillResult CallResponder as shown in the image below.

In the generated result handler add the following code. In the code below list is the List instance added in previous steps.

protected function fillResult_resultHandler(event:ResultEvent):void

{

if(listProducts != null)

{

listProducts.selectedIndex = 0;

product = listProducts.selectedItem as Product;

}

}

You can see the LCDSCRUD.mxml file with code till this step at this URL http://sujitreddyg.com/fb4articles/beta2/LCDSCRUD_2.mxml.txt

At this point you can save and run the application. Application will launch in a browser and displays the data retrieved from the server as shown in the image below. You can view details of the products by selecting them from the list.

Performing Add/Update/Delete operations

Any data retrieved from a Data Management service destinations are managed on the client i.e. any changes made to the objects on the client will reflect on the server immediately. Since we want to commit changes to the server only on user interaction, let’s turn off the autoCommit property to false. Add the code below to listProducts_creationCompleteHandler function to turn off auto commit as shown in the image below.

productService.serviceControl.autoCommit = false;

Let’s invoke functions in the productService AS3 class when user clicks on Add/Update/Delete buttons created earlier.

Right click on the button labeled “Add” (id = “btnAdd”) and select “Generate Service Call ..” as shown in the image below.

Flash Builder displays window as shown in the image below, in which you can select the service call which you want to invoke when user clicks on the Button.

In this screen:

1. Set the Service to ProductService
2. Set the Operation to createProduct(arg0:Product)
3. Click on OK to continue

The createProduct function selected expects an argument of the type Product. So Flash Builder 4 will switch to the source view and lets you enter the argument as shown in the image below.

We are creating a new instance of Product with default values to few properties and pass the reference to createProduct function. We pass the newly created Product instance reference to product so that user can modify the values of newly created product from formSelectedProduct control.

Code in the button click handler function will look as shown below. In the code snippet below we are also passing the AsyncToken returned by createProduct function to createProductResult, so that createProductResult object will dispatch result event when the service call is successful.

protected function btnAdd_clickHandler(event:MouseEvent):void

{

var newProduct:Product = new Product();

newProduct.category = “Enter category”;

newProduct.description = “Product description”;

newProduct.name = “Enter Name”;

newProduct.price = 0;

newProduct.qtyInStock = 0;

product = newProduct;

createProductResult.token = productService.createProduct(newProduct);

}

If you remember we turned off auto commit, so we need to call when user clicks the btnCommit. We also need to make sure the btnCommit is enabled only if there are any changes to the data on the client and that’s very simple just bind the btnCommit enabled property to commitRequired property as shown in the image below.

In the btnCommit_clickHandler function add the code below to commit all changes to the server.

protected function btnCommit_clickHandler(event:MouseEvent):void

{

productService.serviceControl.commit();

}

Similarly generate service calls for Update and Delete buttons, select updateProduct and deleteProduct operations respectively and pass the same product object as argument. You can view/copy the completed LCDSCRUD.mxml file at this URL http://sujitreddyg.com/fb4articles/beta2/LCDSCRUD.mxml.txt

Save and run your application. You will see your application launched in a browser and ready for performing CRUD operations on the database entries.

More articles on how to use Flash Builder 4 are available at this URL http://sujitreddyg.wordpress.com/flash-builder-4/

We developed a complete CRUD application for Data Management service destination in just few minutes. Flash Builder 4 and LCDS rocks

In this article we will create a CRUD application using Adobe Flex and Java. Flash Builder 4 allows you to build Flex front end for Java classes on the server with just couple of clicks, so we will use Flash Builder 4 to develop the application.

BlazeDS is a Java based server technology from Adobe which lets you invoke methods in Java class on server from your Flex applications. BlazeDS is the best solution for integrating Flex with Java so obviously we will use this in our sample project.

Below are the steps we will follow to complete our application

1. Set up BlazeDS (copying files )
2. Expose Java class as Remoting service destination
3. Use Flash Builder to generate Flex code to invoke methods in Java class on the server
4. Retrieve data from server and display in the application
5. Allow user to add/update/delete entries in a database table from the application

Article allows you to skip any of steps mentioned above and copy the code Let’s get started

You can download the completed project from here http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD.zip

Set up BlazeDS

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

After exposing your Java class as Remoting destination using BlazeDS, follow steps below to build the Flex application.

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 below and copy it into your web application web.xml under <web-app> node.

<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 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 from the File menu and enter project details as shown below.

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\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 which lets you develop data centric applications very easily. 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” 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 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 service destinations exposed from your web application as shown in the screen below.

In this screen we are selecting the destination the newly created service should use. 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.  We have the service class ready, let’s create UI.

Creating UI

Please copy the code from this URL http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD_1.mxml.txt into your main application file (BlazeDSCRUD.mxml in this sample). Code in the URL will add UI controls required for this sample application. After copying the code, your Flash Builder design view should look as shown in the image below.

Note: In this article to refer to a control, we will use value set for the id property of the controls.

Create Form for the Customer data type

We will display the details of the customer entry selected in the listCustomers control (created in previous step) in formSelectedCustomer. Using Flash Builder you can bind a Form control to an entity instance.  Right click on the formSelectedCustomer and select “Bind to Data” as shown in the image below.

Flash Builder will display window as shown in the image below.

In this screen:

1. We want the Form items to be generated based on a data type (SimpleCustomer) so select “Data type”
2. Select SimpleCustomer from the list of data types
3. We want the form to be editable, so select the “Make form editable” check box
4. Flash Builder will display the list of properties in the selected data type as shown in the image below. Flash Builder will also assign a UI control which it will use to display the property value as shown in the image below.

In this window, you can select the items which you want to be included in the form and UI control in which you want the property value to be displayed. You can also arrange the controls in the order in which you want them to be displayed. Arrange the properties and modify the controls as shown in the image above.

Flash Builder will add FormItems to formSelectedCustomer and binds the values of the controls under formSelectedCustomer to SimpleCustomer instance. In this sample Flash Builder generated a SimpleCustomer instance with “simpleCustomer” as its id. So we will refer to the SimpleCustomer instance bound to the items in formSelectedCustomer as simpleCustomer.

Binding data to UI Controls

Now that we have our UI is ready, let’s get the data from the server and display it in the application.

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

Flash Builder will display window as shown in the image below.

In this screen:

1. Select New service call
2. Set Service to SimpleCustomerServiceDestination
3. Set Operation to getAllCustomers(): SimpleCustomer[]
4. Set Bing to field to customerName
5. Click on OK to continue

In previous step we bound the service call result to listCustomers component, listCustomers will send a request to the getAllCustomers() function on the server and displays the result.

listCustomers is displaying only the name of the customer, so let’s display complete details of the  customer in formSelectedCustomer. Right click on the listCustomers and select “Generate Change Handler” as shown in the image below.

Flash Builder will generate a function which will be invoked when user selects a different item in the listCustomers. Flash Builder will also switch the view to Source view as shown in the image below, so that you can write code in the handler function generated.

Add the code below to the generated change handler function as shown in the image above.

simpleCustomer = listCustomers.selectedItem as SimpleCustomer;

In the code snippet above, simpleCustomer is the instance of SimpleCustomer which was bound to the formSelectedCustomer. In the code above, we are passing the reference of the selected SimpleCustomer instance in listCustomers to the SimpleCustomer instance bound to formSelectedCustomer. This line of code will populate formSelectedCustomer with details of the selected customer in listCustomers control.

Now, let’s keep formSelectedCustomer populated with values of the first customer entry in listCustomers as soon as the customer data is loaded from the server.

Understanding the CallResponder

How will you know when the data is returned from the server? For each service call generated in the application there will be a CallResponder class instance associated with it. CallResponder dispatches result event when the call to the service is successful and the data returned from the server can be accessed using a property called lastResult in CallResponder instance. To map the CallResponder instance with the service call, you have to pass the reference of the AsyncToken returned by the service call to the token property of the CallResponder.  You can see service call AsyncToken reference passed to the CallResponder in listCustomers_creationCompleteHandler function as shown below.

protected function listCustomers_creationCompleteHandler(event:FlexEvent):void

{

getAllCustomersResult.token = simpleCustomerServiceDestination.getAllCustomers();

}

CallResponder class will dispatch result event when the data is retrieved successfully from the server. You can add a handler to the result event to perform any logic when the server response is successful. In our case we will keep the first Customer in the listCustomers to be selected and its value to be displayed in formSelectedCustomer as soon as the data from the server is loaded on to the client.

Add a result event handler to the getAllCustomersResult CallResponder as shown in the image below.

In the generated result handler add the following code. In the code below list is the List instance added in previous steps.

if(listCustomers != null)

{

listCustomers.selectedIndex = 0;

simpleCustomer = listCustomers.selectedItem as SimpleCustomer;

}

You can see the BlazeDSCRUD.mxml file with code till this step at this URL http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD_2.mxml.txt

At this point you can save and run the application. Application will launch in a browser and displays the data retrieved from the server as shown in the image below. You can view details of the customs by selecting them from the list.

Performing Add/Update/Delete operations

In the SimpleCustomerService Java class on the server we have methods which can perform Add/Update/Delete operations in the database. If you observe Flash Builder generated AS3 functions in SimpleCustomerServiceDestination.as class for each public method of the selected Remoting destination including the addCustomer() , updateCustomer() and deleteCustomer(). We just have to invoke these AS3 function in order to invoke corresponding Java method on the server.

Let’s invoke functions in the SimpleCustomerDestination AS3 class when user clicks on Add/Update/Delete buttons created earlier.

Right click on the button labeled “Add” (id = “btnAdd”) and select “Generate Service Call ..” as shown in the image below.

Flash Builder displays window as shown in the image below, in which you can select the service call which you want to invoke when user clicks on the Button.

In this screen:

1. Set the Service to SimpleCustomerServiceDestination
2. Set the Operation to addCustomer(arg0:SimpleCustomer)
3. Click on OK to continue

The addCustomer function selected expects an argument of the type SimpleCustomer . So Flash Builder 4 will switch to the source view and lets you enter the argument as shown in the image below.

simpleCustomer is the object which is bound to formSelectedCustomer and so any changes made by the user in formSelectedCustomer control will reflect in the simpleCustomer instance so pass simpleCustomer as an argument to the addCustomer function as shown in the image above. Code in the button click handler function will look as shown below. In the code snippet below we are passing the AsyncToken returned by addCustomer function to addCustomerResult, so that addCustomerResult object will dispatch result event when the service call is successful.

protected function btnAdd_clickHandler(event:MouseEvent):void

{

addCustomerResult.token = simpleCustomerServiceDestination.addCustomer(simpleCustomer);

}

Similarly generate service calls for Update and Delete buttons, select updateCustomer and deleteCustomer operations respectively and pass the same simpleCustomer object as argument. After generating service calls for other two buttons your application code in this URL http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD_3.mxml.txt

Clicking on the Add/Update/Delete buttons will reflect the changes on the server. Let’s get the updated collection of customers from the server by invoking getAllCustomers function of the SimpleCustomerServiceDestination class if the Add/Update/Delete operations are successful.

You will have CallResponder instances created for Add, Update and Delete service calls in the application, invoke getAllCustomers() function in the result event of these call responders so that we will get updated customers list after Add, Update and Delete operation are performed successfully.

You can view/copy the completed BlazeDSCRUD.mxml file at this URL http://sujitreddyg.com/fb4articles/beta2/BlazeDSCRUD.mxml.txt

Save and run your application. You will see your application launched in a browser and ready for performing CRUD operations on the database entries.

Data centric applications can be developed very easily and effectively using Data Centric Development features in Flash Builder 4. Try enabling client side data management and client side data paging for the service used in this article, you can find the articles at the URL below. Please find more articles on using features in Flash Builder 4 at this URL http://sujitreddyg.wordpress.com/flash-builder-4/

Adobe Rocks

Data Centric Development (DCD) in Flash Builder 4 allows developers to build Flex front end for LiveCycle Data Services (LCDS) Data management service destinations with just couple of clicks. Continue reading to see how Flash Builder and LCDS are improving J2EE developer productivity.

In this article we will be building a Flex application for a Data Management service destination in the samples application called lcds-samples bundled with LiveCycle Data Services 3 Beta 3.

Install LCDS 3

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

Enabling RDSDispatchServlet

Flash Builder uses the RDSDispatchServlet (part of LCDS) to retrieve destinations information from the server. By default the RDSDispatchServlet is commented out in web.xml. Open C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\web.xml using a text editor and remove comment around RDSDispatchServlet Servlet definition and the URL mapping as shown below. Also set the useAppserverSecurity parameter value to “false” as shown below.

<servlet>

<servlet-name>RDSDispatchServlet</servlet-name>

<display-name>RDSDispatchServlet</display-name>

<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>

<init-param>

<param-name>useAppserverSecurity</param-name>

<param-value>false</param-value>

</init-param>

<load-on-startup>10</load-on-startup>

</servlet>

<servlet-mapping id=”RDS_DISPATCH_MAPPING”>

<servlet-name>RDSDispatchServlet</servlet-name>

<url-pattern>/CFIDE/main/ide.cfm</url-pattern>

</servlet-mapping>

Defining item class name

Set the item-class property of the Data Management service destination to the name of the object type which the assembler is expecting. Flash Builder 4 DCD requires this property to be set for the destinations you want to consume using DCD in Flash Builder. All the sample destinations in LCDS 3 beta 3 have this property set. Sample destination used in this article has item-class property set to flex.samples.product.Product class as shown below.

XML Snippet below is from C:\lcds3beta3\tomcat\webapps\lcds\WEB-INF\flex\data-management-config.xml

<destination id=”inventory”>
<properties>
<source>flex.samples.product.ProductAssembler</source>
<scope>application</scope>
<item-class>flex.samples.product.Product</item-class>
<metadata>
<identity property=”productId”/>
</metadata>
<network>
<paging enabled=”false” pageSize=”10″ />
</network>
</properties>
</destination>

Start LCDS server

Start LCDS samples data base from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start Samples Database

Start LCDS server from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start LiveCycle Data Services Server

Please make sure both the database and the server are started.

We have everything ready to develop a Flex application for data management service destinations using Flash Builder 4.

Create a Flex project

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

Create a Flex project from the file menu. 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 LCDSSampleProject
2. Let the Application type be Web
3. Set the SDK version to 3.4
4. Set the Application server type to J2EE
5. Select Use remote object access service check box
6. 6. Select LiveCycle Data Services ES
7. 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:\lcds3beta3\tomcat\webapps\lcds-samples
2. Set the Root URL to http://localhost:8400/lcds-samples
3. Set the Context root to /lcds-samples
4. Leave the Output folder to default, which is on the server
5. Click finish to continue

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

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

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

Our server settings are configured to point to the sample application bundled with LCDS called lcds-samples. This web application has lots of destinations exposed as shown in the image above. Destinations whose service-type is remoting-service are the Remoting destinations and the ones whose service-type is data-service are the Data Management service destinations. In this sample we will use the “inventory” data management service destination. Select the “inventory” destination and click on Finish to continue.

Flash Builder will generate all code required to consume the service selected and will list the Inventory service in the services explorer as shown in the image below.

You can also see that the return types for the operations (functions/methods of assembler) are properly set. Now that we have the service created, let’s bind the data to a UI control. Switch to design view as shown in the image below.

In this screen:

1. Set the layout of the Application to vertical
2. Drag and drop a DataGrid on to the design view
3. Set the width of the DataGrid to 100% and height to 50%

Now let’s bind the data to DataGrid.

In this screen:

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

You will a window launched with options to select the service.

In this screen:

1. Select New service call
2. Set the Service to ProductService
3. Set the Operation to fill(): Product[]
4. Click on OK to continue

You will see that the DataGrid will change its columns in the design view to reflect the properties of the Product entity.

Configuring DataGrid columns

Flash Builder 4 has an excellent feature which allows developers to configure 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. Select “productId” column and move it to top
2. Similarly re-arrange columns as shown in the image above
3. Click on OK

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

More articles on how to use Flash Builder 4 are available at this URL http://sujitreddyg.wordpress.com/flash-builder-4/

We developed a Flex front end for Data Management service destination in just few minutes. Flash Builder 4 and LCDS rocks

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

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

In this article we will be using getallcustomers.jsp file which will invoke SimpleCustomerService.java class and returns the entries in the database in XML format. We will use Flash Builder DCD to create a Flex application which will consume the XML data returned by the server.

Install Flash Builder 4

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

Create a new Flex project

Create a new Flex project as shown in the image above and explained below.

In this screen:

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

Using DCD to consume data returned by the server

Data-Centric Development (DCD) is one of the advancements to the Flash Builder 4. Let’s see how DCD is making developers productive. We will use Flash Builder DCD to consume the data from the Java server.

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 are using HTTP Service to communicate with the server, select HTTPService from the options and click on next button to continue.

Setting service properties

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

In this screen:

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

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

Configuring return type

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

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

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

Entering parameters required by the server

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

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

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

In this screen:

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

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

Binding data/service to UI controls

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

In this screen:

1. Switch to design view
2. Change the Application layout to “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 a JSP file using DCD features in Flash Builder. Flash Builder 4 rocks

Thank you very much for the overwhelming support. I added few new features and fixed couple of issues I am sorry I couldn’t add all features requested. I will add pending requested features and more to the next version and publish as soon as possible.

Following are the changes incorporated in BlazeMonster version 2:

1. Added support for Spring BlazeDS i.e. BlazeMonster can now generate code for Remoting destinations exposed using Spring BlazeDS.
2. AS3 VO class generation now supports nested custom data types
3. You can save generated code into files on a button click
4. Added AS3 data types mappings for all Java data types for code generation
5. Web application root URL and AMF endpoint values are now persisted
6. And couple of minor fixes.

Please download and install latest version from this URL http://sujitreddyg.wordpress.com/blazemonster/

Adobe Rocks

I am a bit late in blogging about this. Flex in a Week challenge was launched on 5^th August, 2009 and is already being attempted by 210 users

Flex in a Week video training is one of the best resources to start learning Flex. India Platform Evangelism team has given more reasons to learn Flex in a week by going through this video training course.

Go through the course and complete the Flex in a Week Challenge, you can get a cool badge you can sport on your website, blog or any other place where you think it will be useful. There are tee shirts also to be won by top 25 scorers and the first 25 users who clear the challenge.

If you already know Flex, take Flex in a Week challenge and get a badge for yourself and sport it to everyone

Please find more details at this URL http://flashahead.adobe.com/challenges/

India Platform Evangelism team also took couple of initiatives to communicate with the community easily. You can follow any of the following to get updates from the team and information about the various events and activities

Portal – http://flashahead.adobe.com

Blog – http://flashahead.wordpress.com

Twitter - http://twitter.com/flashahead

Adobe Rocks