If you are interested in speaking at this summit or attending this summit, please find the details below.

What’s in it for you?

• Learn about Adobe Flash Platform technologies
• Get to know the latest innovations in Adobe Flash Platform
• Learn how to develop/design Rich Internet Applications
• Learn how to develop/design applications targeting multiple screens or devices
• Learn how to develop/design good user interfaces
• See how Flash Platform technologies are being used
• Network with some of the best developers
• and more

Useful Links

Find more details about the summit here – http://bit.ly/adobesummit

Interested in speaking at this summit? Submit your session proposal – http://bit.ly/adobesummit_cfp

Register before 25th June and get early bird discount – http://bit.ly/adobesummit_register

Follow Flash Platform Summit on twitter – http://twitter.com/adobesummit

If you tweet about the summit use #AdobeSummit hash tag

Flash Platform Summit on Facebook – http://bit.ly/adobesummit_fb

Meet you all at the summit

HTML + Struts + Java web application

I have a web application called flexstrutssample created in which I have the following files.

Contents of flexstrutssample folder:

- WEB-INF/Classes

• action/CustomerAction.class
• com/adobe/services/SimpleCustomerService.class
• com/adobe/objects/SimpleCustomer.class
• struts.xml

- WEB-INF/lib

• Struts jar files

- WEB-INF/web.xml

- list.jsp

- listasxml.jsp

The SimpleCustomerService class has methods to communicate with Database and perform CRUD operations on the Customer table. In this article we will use the getAllCustomers() method in SimpleCustomerService class, which returns all the SimpleCustomer entries in the database.

Signature of getAllCustomers():

 
 public ArrayList<SimpleCustomer> getAllCustomers(){
 //return all customers from the database
 }

The CustomerAction class extends from ActionSupport class. CustomerAction class invokes the getAllCustomers() method in SimpleCustomerService class and returns Action.SUCCESS.

The execute() method in CustomerAction class:

 
public String execute() {
 SimpleCustomerService service = new SimpleCustomerService();
 this.customers = service.getAllCustomers();
 return Action.SUCCESS;
 }

In Struts configuration file (struts.xml) we have the result “success” mapped to list.jsp for the action with name=”list”.

 
<action method="execute">
 <result>/list.jsp</result>
 </action>

The list.jsp file accesses the list of customers from the simpleCustomers variable and renders the same in a HTML table as shown in the image below.

Adding Flex front end

We have a simple web application that fetches records from database and displays the records in a HTML table. If you are using Rich Internet Applications (RIA) framework like Flex as front end for your applications, you can use rich and interactive controls like DataGrid.

If you observe list.jsp is returning HTML, so that browser will render the data in a table. Since we will be using Adobe Flex framework to create the user interface for the application, we don’t have to return HTML from the server; All we need to return from the server is the data that needs to be displayed to the user.

The data sent from the server can be in one of the text-based formats like XML or JSON, in that case you have to create a JSP/Servlet which will return the data in the text-based format chosen and the data has to be parsed on the client side as explained in this article Tutorial on Integrating Flex with Struts based application using HTTP Service

Alternatively you can chose to use Flex Remoting. Using Flex Remoting you can invoke methods in native Java classes on the server and the data is transferred in AMF format. If you use Flex Remoting, you don’t have to create an additional JSP/Servlet to represent the data in text-based format.

For using Flex Remoting you need libraries like BlazeDS on the server, so lets deploy BlazeDS jar files and expose the SimpleCustomerService class as Remoting service.

Deploying BlazeDS jar files

Step 1:

Download release build of BlazeDS. BlazeDS release builds are available at this URL http://opensource.adobe.com/wiki/display/blazeds/Release+Builds Click on “Download the BlazeDS binary distribution” to download the binary distribution. Binary distribution has just jar files and other configuration files required.

Step 2:

Go to folder where you saved the downloaded file in Step 1. You would have downloaded a file named blazeds-bin-4.0.0.14931.zip. Extract the content in this file to a folder named blazeds-bin-4.0.0.14931

Step 3:

In the blazeds-bin-4.0.0.14931 folder you will find a file named blazeds.war and blazeds-bin-readme.htm. blazeds-bin-readme.htm contains terms and conditions and license details. blazeds.war contains required jar files and configuration files for setting up BlazeDS.

Extract the content in blazeds.war file into a folder called blazeds. You can try renaming the file to blazeds.zip and extract the contents using tools like winzip.

blazeds – this is the folder in which we have blazeds.war content extracted into  in Step 3

flexstrutssample – this is the web application folder with Java + Struts based application

Step 4:

Copy all .jar files from blazeds/WEB-INF/lib to flesstrutssample/WEB-INF/lib

Step 5:

Copy blazeds/WEB-INF/flex folder to flexstrutssample/WEB-INF

This folder (blazeds/WEB-INF/flex) contains BlazeDS configuration files. Use these files to configure Remoting/Messaging/Proxy services.

Step 6:

Now we will add Servlet mapping for BlazeDS Servlet named MessageBrokerServlet, so that BlazeDS is invoked when you send request for a Remoting/Messaging/Proxy destination using any of the channels supported.

Open flexstrutssample/WEB-INF/web.xml and copy the Servlet mapping for MessageBrokerServlet and the session listener. You can either copy the content below or copy it from the blazeds/WEB-INF/web.xml

You can view the web.xml used in this sample here – http://sujitreddyg.com/fb4articles/flexandstruts/web.xml.txt

<!-- Http Flex Session attribute and binding listener support -->
<listener>
<listener-class>flex.messaging.HttpFlexSession</listener-class>
</listener>

<!-- MessageBroker Servlet -->
<servlet>
<servlet-name>MessageBrokerServlet</servlet-name>
<display-name>MessageBrokerServlet</display-name>
<servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
<init-param>
<param-name>services.configuration.file</param-name>
<param-value>/WEB-INF/flex/services-config.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>MessageBrokerServlet</servlet-name>
<url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>

Setting up BlazeDS RDSDispatchServlet

After setting up BlazeDS, you have to enable RDSDisptachServlet, which is used by Flash Builder 4 to get destination details. Copy the Servlet URL mapping and declaration below and add to your web application web.xml file.

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

Creating Remoting Service

To invoke public methods in a Java class from Flex application, you need expose the Java class as Remoting service destination. Remoting service destinations are configured in a XML file named remoting-config.xml, which can found in flexstrutssample/WEB-INF/flex folder. Add the highlighted text below to the remoting-config.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<service class="flex.messaging.services.RemotingService">
    <adapters>
        <adapter-definition default="true"/>
    </adapters>
    <default-channels>
        <channel ref="my-amf"/>
    </default-channels>
<destination>
  <properties>
    <source>com.adobe.services.SimpleCustomerService</source>
  </properties>
</destination>
</service>

We created a Remoting destination whose id is CustomerService, which is mapped to SimpleCustomerService class. In the steps below we will see how to invoke methods in SimpleCustomerService class from Flex application, rather we will see how to consume Remoting services from Flex applications.

Creating Flex Application

Install Flash Builder 4 from here – http://www.adobe.com/products/flashbuilder/

Launch Flash Builder and create new Flex project from File -> New -> Flex Project menu. You will see a window as shown in the image below. Enter the project details as explained below the image

In this screen:

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

Configure J2EE server settings

In this screen:

1. Set the Root folder to the root folder of your web application with BlazeDS configured. Its /tomcatworkspace/flexstrutssample in this sample
2. Set the Root URL to root URL of your BlazeDS enabled web application. Its http://localhost:8080/flexstrutssample in this sample.
3. Set the Context root to context root of your BlazeDS enabled web application. Its /flexstrutssample in this sample.
4. Leave the output folder to default value
5. Click on validate configuration button to check if the values are properly configured. You should see a message at the top saying web root folder and root URL are valid.
6. Click finish to continue

Flash Builder will create a new project along with a default application file called FlexStrutsRemotinSample.mxml. Flex framework has a class called RemotObject using which you can consume Remoting services i.e invoke methods in Java class on the server.

You can manually write code to send the request or alternatively act smart and use the Data Centric Development (DCD) feature in Flash Builder Flash Builder can generate the code to send request to the server to get the data, lets see how.

Creating Service using DCD

In this screen:

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” (Highlighted in the image above) in the Data/Services window
3. Window as shown in the image below will be launched

Select BlazeDS and click on Next. Flash Builder will display a window asking for RDS credentials. Since we turned off security for our RDSServlet by setting the useAppserverSecurity parameter to false in the web.xml, select No password required and click on OK to continue.

Selecting Remoting destination

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

In this screen we are selecting the destination the newly created service should use. All destinations available will be displayed. Select a destination (CustomerService 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 the source code for the same in the package explorer.

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

Binding data/service to UI controls

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

In this screen:

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

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

In this screen:

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

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

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

We had a Java + Struts based web application for which we added a Flex front end in few minutes, without making any modifications to server side code

You can find more articles on integrating Flex with various server technologies at this URL http://sujitreddyg.wordpress.com/flash-builder-4

It’s your application, make it Richer

Note: You can also try a better way to integrate Flex with Struts based application using Remoting as explained in the article at this URL – Tutorial on Integrating Flex with Struts based application using Remoting

Sample in this article uses Flex 4 and Struts 2.1.8. First lets have a look at Java + Struts web application which uses HTML to display the data.

HTML + Struts + Java web application

I have a class called SimpleCustomerService, which has methods to communicate with Database and perform CRUD operations on the Customer table. In this article we will use the getAllCustomers() method in SimpleCustomerService class, which returns all the Customer entries in the database.

Signature of getAllCustomers():

 public ArrayList<SimpleCustomer> getAllCustomers(){

 //return all customers from the database

 }

I also have CustomerAction class that extends from ActionSupport class. CustomerAction class invokes the getAllCustomers() method in SimpleCustomerService class and returns Action.SUCCESS.

The execute() method in CustomerAction class:

public String execute() {

 SimpleCustomerService service = new SimpleCustomerService();

 this.customers = service.getAllCustomers();

 return Action.SUCCESS;

 }

In the Struts configuration file (struts.xml) we have the result “success” mapped to list.jsp for the action with name=”list”.

<action name="list" method="execute" class="action.CustomerAction">

 <result>/list.jsp</result>

 </action>

The list.jsp file accesses the list of customers from the simpleCustomers variable and renders the same in a HTML table as shown in the image below.

Adding Flex front end

We have a simple web application that fetches records from database and displays the records in a HTML table. If you are using Rich Internet Applications (RIA) framework like Flex as front end for your applications, you can use rich and interactive controls like DataGrid.

If you observe list.jsp is returning HTML, so that browser will render the data in a table. Since we will be using Adobe Flex framework to create the user interface for the application, we don’t have to return HTML from the server. All we need to return from the server is the data that has to be displayed; this data can be represented in any format like XML or JSON.

Lets change the Struts configuration file to add another action node whose “success” is mapped to a different JSP page, which returns XML data instead of HTML. The listasxml.jsp returns the list of customers as XML.

<action name="listasxml" method="execute" class="action.CustomerAction">

 <result>/listasxml.jsp</result>

 </action>

Note: You can avoid creating an additional JSP/Servlet and still add Flex front end to your application. Read this article Tutorial on Integrating Flex with Struts based application using Remoting

Now that u have the list of Customers returned as XML from the server, creating a Flex application is very easy.

Creating Flex Application

Install Flash Builder 4 from here – http://www.adobe.com/products/flashbuilder/

Launch Flash Builder and create new Flex project from File -> New -> Flex Project menu. You will see a window as shown in the image below. Enter the project details as explained below the image

In this screen:

1. Set the project name to FlexStrutsHttpSample
2. Leave the Project location to default
3. Set the Application Type to Web (Runs in Adobe Flash Player)
4. Set the SDK to default (Flex 4.0)
5. Set the Application server type to “None/Other”

Flash Builder will create a new project along with a default application file called FlexStrutsHttpSample.mxml. To get the list of customers from the server we need to send a request to listasxml action configured on the server. Flex framework has a class called HTTPService using which you can send HTTP GET request to invoke listasxml action to get the customers in XML format.

You can manually write code to send the request or alternatively act smart and use the Data Centric Development (DCD) feature in Flash Builder Flash Builder can generate the code to send request to the server to get the data, lets see how.

Creating Service

In this screen:

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” (highlighted in the image) in the Data/Services window
3. Window as shown in the image below will be launched

In this window you can select the type of service you want to connect to. We need to connect to a HTTP service, select HTTP and click Next to continue.

Setting service properties

For each service there will be an Action Script class generated and for each operation of the service there will be a function generated inside the class. A service can have any number of operations. Each operation has an URL associated with it, when the respective function 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 listasxml action/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>/listasxml.action in this sample it is http://localhost:9191/flexstrutssample/struts/listasxml.action
3. Since we don’t have to send any parameters to the server, skip the parameters section
4. Set the service name to CustomerService
5. Leave the rest to default values
6. Click on finish button to create the service

A service named CustomerService will be created and listed in the Data/Service panel (services explorer) as shown in the image below. You can view the source code files for the CustomerService.as in the package explorer.

Configuring return type of the operation

We will configure service operation to create Action Script classes when the XML data is returned from the server. 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 in the Data/Services panel and select Configure return type as shown in the image below.

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

Click Next to continue. Flash Builder will display a screen as shown in the image below, where you can enter the parameters to be passed to the server along with the request.

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 service to be created. Since we have the service 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 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() function, an Array of Customer type objects will be created based on the XML response from the server.

Binding service operation response 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 easily bind a service operation response to a control.

In this screen:

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

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

In this screen:

1. Select “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. Set the Data provider to Customer[]
5. Click OK

You can see the DataGrid in the design updated its columns to display 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.

You can find more articles on integrating Flex with various server technologies at this URL http://sujitreddyg.wordpress.com/flash-builder-4

Its your application, make it Richer

http://bit.ly/adobesummit

Cheers

Spring BlazeDS project from SpringSource makes it easier to create spring powered Rich Internet Applications using Adobe Flex.

In this article we will see how we can use Adobe Flex, Flash Builder 4, BlazeDS, Spring, Spring BlazeDS and Java to create Rich Internet Application.

Lets start with setting up web application on the server.

Create Web Application

Start by creating a web application name springblazedssample. You can do that by creating a folder named springblazedssample under your web server document folder.

Set up BlazeDS

Set up BlazeDS for web application created in previous step as explained in this URL http://sujitreddyg.wordpress.com/2009/04/07/setting-up-blazeds/

Set up Spring BlazeDS

Download Spring BlazeDS from this URL http://s3.amazonaws.com/dist.springframework.org/release/FLEX/spring-flex-1.0.3.RELEASE.zip

You will be downloading file named spring-flex-1.0.3.RELEASE.zip. After downloading, extract the contents of spring-flex-1.0.3.RELEASE.zip into a folder called spring-flex-1.0.3.RELEASE. Copy org.springframework.flex-1.0.3.RELEASE.jar from spring-flex-1.0.3.RELEASE/dist folder to your web application under springblazedssample/WEB-INF/lib

Set up Spring

Download Spring from this URL http://s3.amazonaws.com/dist.springframework.org/release/SPR/spring-framework-3.0.2.RELEASE.zip

You will be downloading file named spring-framework-3.0.2.RELEASE.zip. Extract contents of spring-framework-3.0.2.RELEASE.zip into a folder named spring-framework-3.0.2.RELEASE. Copy all .jar files under spring-framework-3.0.2.RELEASE/dist folder to your web application folder under springblazedssample/WEB-INF/lib

Add Dependencies (3)

1. Download cglib-nodep-2.2.jar from this URL http://sourceforge.net/projects/cglib/files/cglib2/ Copy the same into your web application folder under springblazedssample/WEB-INF/lib

2. Download backport-util-concurrent .jar from this URL http://backport-jsr166.sourceforge.net/ Copy the same into your web application folder under springblazedssample/WEB-INF/lib

3. Download aopalliance.zip from this URL http://sourceforge.net/projects/aopalliance/files/ You will find aopalliance.zip under section called 1.0

Extract the contents of aopalliance.zip into a folder named aopalliance and copy aopalliance.jar into your web application folder under springblazedssample/WEB-INF/lib

Configuring Spring MVC Dispatcher and RDS Servlets

Download the web.xml with MVC Dispatcher servlet and RDS Servlet (used by Flash Builder) definitions and mappings from here http://sujitreddyg.com/fb4articles/springblazeds/web.xml. Replace springblazedssample/WEB-INF/web.xml with the downloaded web.xml

Configuring Spring managed beans

In this sample we will use SimpleCustomerService.java and SimpleCustomer.java. We will configure SimpleCustomerService as spring managed bean and expose the same as Remoting Service to consume from Flex application. Download web-application-config.xml from here http://sujitreddyg.com/fb4articles/springblazeds/web-application-config.xml Place web-application-config.xml in your web application folder under springblazedssample/WEB-INF/config folder.

In web-application-config.xml:

• We configured BlazeDS Message Broker Servlet as spring managed bean using <flex:message-broker/> tag.

• We exposed SimpleCustomerService bean (id=CustomerService) as BlazeDS Remoting Service destination by adding <flex:remoting-destination/> tag.

Download the Java class files used in this sample from here http://sujitreddyg.com/fb4articles/springblazeds/javaclasses.zip. You will be downloading a file named javaclasses.zip. Extract javaclasses.zip into a folder named javaclasses and copy folder named com under javaclasses into your web application folder under springblazedssample/WEB-INF/classes folder.

We have our server environment setup; lets create Flex application, which consumes SimpleCustomerService exposed as Remoting service destination.

Install Flash Builder 4

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

Create new Flex project

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

Enter project details

In this screen:

1. Set project name as SpringBlazeDSSample
2. Set “Web (runs in Adobe Flash Player)” as the application type
3. Use default Flex SDK (Flex 4.0)
4. Set the application server type to J2EE
5. Select BlazeDS
6. Click 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 /tomcatworkspace/springblazedssample in this sample
2. Set the Root URL to root URL of your web application. Its http://localhost:8080/springblazedssample in this sample.
3. Set the Context root to context root of your BlazeDS enabled web application (springblazedssample).
4. Leave the output folder to default value.
5. Click on validate configuration button and see if the configuration is valid.
6. Click finish to continue.

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how easily we can create a Flex application that consumes BlazeDS Remoting service (SimpleCustomerService) using DCD.

Creating Service using DCD

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” (highlighted in the image above) in the Data/Services window
3. Window as shown in the image below will be launched

Select BlazeDS and click on Next. Flash Builder will display a window asking for RDS credentials. Since we turned off security for our RDSServlet by setting the “useAppserverSecurity” parameter to “false” in the web.xml, select “No password required” and click on OK to continue.

Selecting Remoting destination

You can see that Flash Builder listed SimpleCustomerService bean exposed as Remoting Service destination using <flex:remoting-detination/> tag. Similarly any other Remoting service destinations will be listed here. Select a destination (CustomerService in this sample) for which you want the code to be generated and click on Finish to continue.

Code for invoking the Remoting service will be generated, you can see the service and its operations (public methods of the Java class) being displayed in the “Data/Services” window in the image below and source files for the same in Flash Builder package explorer.

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

Binding data/service to UI controls

Other than generating code to consume services from Flex applications, Flash Builder can also generate code to bind the service result to a UI component. Switch to design view and add 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 above. A window as shown in the image below will be launched.

In this screen:

1. Select “New service call”.
2. Select “CustomerService” from the list of services.
3. Select “getAllCustomers():SimpleCustomer[]” from the operations list.
4. Select SimpleCustomer[] as Data Provider.
5. Click OK to continue.

Switch to code view and set the endpoint property of the CustomerService (CustomerService instance added to SpringBlazeDSSample.mxml) to /springblazedssample/messagebroker/amf as shown in the image below.

Save and run the application. Your application will invoke the getAllCustomers() method in SimpleCustomerService class on the server and displays the returned data in the DataGrid as shown in the image below.

You can find more tutorials on Flash Builder 4 here  http://sujitreddyg.wordpress.com/flash-builder-4/

Adobe Flex Rocks

Adobe Application modeling plug-in is a graphical modeling editor can be installed as a plug-in to Flash Builder 4 to automatically generate both client and server code, accelerating the application development lifecycle.

Download Adobe Application Modeling plug-in from this URL Download Adobe Application Modeling Plug-in (20 MB. For Flash Builder 4 release version click on “For Eclipse 3.5 Download”)

Articles which will help you install the plug-in and learn how to use the plug-in:

Setting up model-driven development with LiveCycle Data Services ES2

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

LiveCycle Data Services Quick Starts

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

I updated my article on Flash Builder 4 for the release version. You can find the complete list here http://sujitreddyg.wordpress.com/flash-builder-4/.

Following are the articles updated:

BlazeDS/Java/LCDS

Building Flex application for BlazeDS Remoting destinations using Flash Builder 4

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

Using Flash Builder 4 for earlier BlazeDS builds

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

Building Flex application for LCDS Data Management services using Flash Builder 4

Building Flex and Java based CRUD application using Flash Builder 4

Building Flex and LCDS based CRUD application using Flash Builder 4

PHP

Bulding Flex application for a PHP class using Flash Builder 4

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

HTTP Service

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

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

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

OTHER

Built in Data Paging using Flash Builder 4

Client Side Data Management using Flash Builder 4

Adobe Rocks

Here is the video of the application:

It took 3 hours for me to understand the touch events and develop this application and of course used Data-Centric features in Flash Builder 4 to connect to the services exposed by Flickr. In this application I used the following to handle touch events:

1. TouchEvent.TOUCH_BEGIN
2. TouchEvent.TOUCH_MOVE
3. TouchEvent.TOUCH_END
4. TouchEvent.TAP
5. Multitouch.supportsTouchEvents
6. Multitouch.inputMode

Download the source here http://sujitreddyg.com/samples/FlickrMobile.zip

Details on Flash Player 10.1 API for touch, multitouch and gestures can be found in Flex Developer Guide. Also read Multi-touch and gesture support on the Flash Platform by Christian Cantrell and Flex 4 List Scrolling on Android with Flash Player 10.1 by James Ward.

Adobe Rocks

Note: I took the screen shots of the application running on Google Nexus One phone using Dalvik Debug Monitor packaged with Android SDK

I also wanted to see if I can use the same application to target Flash Player running on bigger screens like Mac. Since I used Flex 4, I just created different skins for my custom components so that the applications looks good when launched from a Mac or PC. After creating the skins, all I had to do was to change the <style> tag in the main application to point to the css configured with my new skins and re-compile my application. Please see below the screen shot of the application launched from Firefox on my mac

The application developed here is consuming data from a Data Management Service destination of LiveCycle DS (LCDS) and so any changes to the data on the mobile devices is pushed to all other clients viewing the same data In the last image below, you can see the changes made on the mobile being pushed onto the application running on Mac.

Screen Shots:

View Products

View Products 2

Edit Product View

Editing Product Name using Android Keyboard

Viewing Edited Product

Application Running on Mac

Adobe Rocks

PRESENTATION

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

SOURCE FILES FOR DEMOS

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

Flash Builder 4 DCD with Java

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

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

Flash Builder 4 DCD with PHP

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

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

Model Driven Development

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

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

Adobe Community Rocks