Spring BlazeDS and Flash Builder Data Centric Development

May 17, 2010

Data Centric Development (DCD) in Flash Builder 4 allows developers to build Flex front end for any back-ends very easily.

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 https://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  https://sujitreddyg.wordpress.com/flash-builder-4/

Adobe Flex Rocks 🙂

Advertisements

Updated Flash Builder 4 Tutorials

March 31, 2010

Flash Builder 4 is released and available for download here http://www.adobe.com/products/flashbuilder/ There lots of new features in Flash Builder 4, you can find top new features here http://www.adobe.com/products/flashbuilder/?view=topnew

I updated my article on Flash Builder 4 for the release version. You can find the complete list here https://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 🙂


AIR based Tool to generate Flex code for consuming/exposing BlazeDS Remoting services

May 7, 2009

Thanks for showing interest in BlazeMonster. Please find details at this URL https://sujitreddyg.wordpress.com/blazemonster/

Thank you 🙂


Setting up BlazeDS

April 7, 2009

This article explains how to setup BlazeDS for your J2EE web application.

BlazeDS adds a lot of power to your web applications. You can expose your Java classes as Remoting services. You can use the Messaging service of BlazeDS to expose publish subscribe messaging destinations and also use the Proxy service to invoke other services.

More details about BlazeDS can be found at this URL http://opensource.adobe.com/wiki/display/blazeds/BlazeDS

Updated: Free AIR based Tool to generate Flex code for consuming/exposing Java classes as BlazeDS Remoting services. Visit this URL for more details https://sujitreddyg.wordpress.com/2009/05/07/blazemonster/

Just follow the steps below you will have BlazeDS setup in no time 🙂

Getting BlazeDS

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 extract the content using tools like winzip.

Now we have downloaded and have the required files extracted to setup BlazeDS for a web application. Let’s create a web application.

Creating web application

If you don’t have Tomcat installed, install Tomcat from http://tomcat.apache.org/

Step 4:

In your Tomcat installation directory, you will find a folder named webapps. Usually it is at this location on Windows Operating System “C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps”

Create a web application named samplewebapp. You do this by just creating folder named samplewebapp under webapps folder.

Setting up BlazeDS

We will setup BlazeDS for the web application created in the previous step.

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

samplewebapp – this is the folder created in Step 4

Step 5:

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

Step 6:

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

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

Step 7:

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.

Copy blazeds/WEB-INF/web.xml to samplewebapp/WEB-INF

If you already have a web.xml configured, then you can just 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

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

That’s it you have BlazeDS setup for your web application. 🙂

Now that you have BlazeDS set up you can try invoking Java methods from your Flex applications or create a simple chat application. You can find articles at the URLs below.

https://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/

https://sujitreddyg.wordpress.com/2008/01/17/messaging-using-flex-and-blaze-ds/

https://sujitreddyg.wordpress.com/2008/02/12/handling-java-exceptions-in-flex-application/

Adobe Rocks!!! 🙂


BlazeDS adapter to invoke multiple classes on a Remoting destination

January 22, 2009

What is this?

In BlazeDS and LCDS Remoting service, JavaAdapter class allows us to invoke methods on a Java object.  If we want to invoke methods on a Java class, we declare destination for each class we want to be invoked from Flex applications in remoting-config.xml.

I extended the default JavaAdapter and added very very few lines of code so that Flex application can invoke Java classes by specifying the Java class name in the Flex application. Don’t worry, modified adapter allows you to control access to classes using regular expression and other ways.

This will be useful if you have lots of classes, which you want expose as service. Instead of declaring destinations for each class in the remoting-config.xml file, you can use this adapter and expose all required classes by declaring one destination.

What does this adapter let me do?

1.       Specify the name of the Java class in Flex application and invoke methods on that class

2.       You can control access to classes based on regular expression. If you want to allow access to classes in “com.adobe” package only, you can set the source of the destination to “com.adobe.*”.

3.       Declare a default Java class, which will be used if Flex application doesn’t specify the Java class to be used.

4.       From the list of classes allowed in a package, you can exclude few classes

5.       You can specify scope for each class. For example you want instances of 2 classes in the allowed package to be stored in a session or application scope, you can do that.

How to use this adapter?

Adding adapter class to your web application classpath

Download the MultiClassJavaAdapter .java file from this URL http://sujitreddy.g.googlepages.com/MultiClassJavaAdapter.java

Compile it and copy that under WEB-INF/classes folder of your web application in appropriate package structure.

Declaring in remoting-config.xml

The remoting-cong.xml file is explained below. You can download the completed remoting-config.xml file from this URL http://sujitreddy.g.googlepages.com/remoting-config.xml

In the configuration file (remoting-config.xml) file downloaded, you can find we have added our adapter (com.adobe.remoting.adapters.MultiClassJavaAdapter) to the adapters list as shown in the XML snippet below.

<adapters>

<adapter-definition id=”any-java-object” class=”com.adobe.remoting.adapters.MultiClassJavaAdapter”/>

</adapters>

We have destination with id “AnyJavaClass” declared. This destination has its adapter set to the adapter added above using the adapter element.

<destination id=”AnyJavaClass”>

<adapter ref=”any-java-object”/>

</destination>

You can give a regular expression in the configuration file, which will be used to evaluate if a Java class can be invoked by the Flex application on this destination. You will use source property to specify this regular expression as shown below.

You can declare a default Java class, which will be used if the Flex application doesn’t specify the name of the Java class to use. Set the default Java class name using default-source element as shown below.

<destination id=”AnyJavaClass”>

<properties>

<source>com.adobe.*</source>

<default-source>MultiClassAdapterTest</default-source>

</properties>   </destination>

As per declaration above, Flex application can invoke any class under “com/adobe” folder. You might want not want to allow access for few classes in this package. In that case you can declare list of classes you don’t want to exclude as shown below.

<destination id=”AnyJavaClass”>

<properties>

<exclude-classes>

<class name=”com.adobe.ExcludeClass1″/>

<class name=”com.adobe.ExcludeClass2″/>

</exclude-classes>

</properties>    </destination>

By default when there is a request to invoke method on a class, a new instance of that class is created in the request scope. You might want to keep the instances created in application or session scope. Since we are allowing multiple classes to be invoked using single destination, you can declare names of the classes and scope in which you want to store them as shown below.

<destination id=”AnyJavaClass”>

<properties>

<classes-scopes>

<class name=”MultiClassAdapterTest” scope=”session”/>

<class name=”com.adobe.TestClass” scope=”application”/>

</classes-scopes>

</properties>    </destination>

Flex application to test the adapter

Download the MXML file from this URL http://sujitreddy.g.googlepages.com/MultiClassAdapterTesting.mxml

In the file downloaded, you can see that we will use the source property of the RemoteObject class to specify the name of the class to invoke the method on.

That’s it, now you can declare one destination and invoke methods on multiple classes. Still you can control access to classes.

Please feel free to use/edit/delete this class. Any suggestions are most welcome. 🙂

Adobe rocks 🙂


Creating Factory classes in BlazeDS

January 20, 2009

What is factory mechanism

BlazeDS provides a factory mechanism that lets you plug in your own component creation and maintenance system to BlazeDS so it integrates with systems like EJB and Spring, which store components in their own namespace.

A factory is responsible for creating the instance that should be used for a request to a destination. When a destination gets a request, destination’s adapter will invoke the configured factory for the destination. When the factory is invoked it should return the instance that should be used by the adapter to process the request.

You can see where exactly a factory is used by the Remoting service at this URL https://sujitreddyg.wordpress.com/2009/01/20/how-remoting-service-in-blazeds-works/

Let’s get into details 🙂

Creating a factory

Creating a factory and mapping it to a destination is 3 step process

Create factory class

You just have to create a class which will implement the “flex.messaging.FlexFactory” interface.

Methods to be implemented:

Initialize() – this method will be invoked when the factory class is instantiated. This happens only once.

createFactoryInstance() – this method is invoked for each reference of the factory in a destination. You will get properties declared in the destination as arguments to this method. Every factory class implementing FlexFactory can have a factory instance class extending “flex.messaging.FactoryInstance”. If you have a instance class for your factory create an instance of it and return the same in this method.

Since there is only one instance of the factory class, you can use this factory instance to create instances specific to a destination.

lookUp() – this method is invoked each time there is a request to a destination. If you have a factory instance created and have the lookUp() method overridden in that class, then this will not be invoked. You will receive the instance of the factory instance class returned in the createFactoryInstance() method as argument to this method. You should return the instance of the object that should be used by the adapter.

You can find a sample implementation below.

Create factory instance class

You have to create a class which extends the “flex.messaging.FactoryInstance” class. You should override the constructor. You can override the lookUp() method if you want to do destination based logic in this method. If you don’t override this method, then the lookUp() method in the factory class will be invoked. You should return the instance of the object that should be used by the adapter.

You can find a sample implementation below.

Declaring factory in services-config.xml

To declare a factory class, you should add a tag in the services-config.xml file as shown below. Add the “factories” node under the “service-config” node.

The declaration below is for the sample factory class.

<factories>

<factory id=”MyCustomFactory” class=”com.adobe.factories.MyFactory” />

</factories>

Mapping factory to a destination

In order to set a factory for a destination, you should declare that in the configuration file. In this sample we will change the factory of a Remoting destination. Append the node below in the remoting-config.xml under “service” node.

You can see that we have custom properties in the destination below we will be retrieving those in our factory instance.

<destination id=”CustomFactoryDestination”>

<properties>

<factory>MyCustomFactory</factory>

<source>This is the source</source>

<scope>request</scope>

<mypassedproperty>Sujit Reddy G</mypassedproperty>

</properties>

</destination>

Deploying and testing the factory

Explanation for the samples

We created a factory instance which will get the properties from the configuration file of the destination and then create an instance of “FactoryTesting” class. When we invoke getMe() method on the destination, the method is actually invoked on the instance returned by the factory instance class.

Download the following files

MyFactory.java

MyFactoryInstance.java

FactoryTesting.java

FactoryDestinationTesting.mxml

1.       Copy the .class files of MyFactory.java, MyFactoryInstance.java and FactoryTesting.java files in appropriate folders based on the packages.

2.       Add factory declaration in service-config.xml and declare destination in remoting-config.xml as mentioned above

3.       Create a Flex project pointing to the BlazeDS/LCDS where we have the classes deployed and factory configured.

4.       Use the FactoryDestinationTesting.mxml to invoke and see that the object instance created in the factory instance created is on which the method is invoked.

That’s it 🙂 Adobe rocks 🙂


How Remoting service in BlazeDS works

January 20, 2009

In this post I tried to explain how Remoting service in BlazeDS works. Obviously I cannot explain each and every line of the code; I tried my best to cover all. I explained how each component of the Remoting service are invoked sequentially to invoke the method on the Java class and return the values.

I took remoting-config.xml file as the starting point to explain how each component is tied.

Recalling how to create Remoting destinations

In order to invoke methods on a Java class, we declare destination for that class in the remoting-config.xml file. From the Flex application we use the RemoteObject and invoke methods on the class by mapping it to the id of the destination declared.

How do they work and who are they?

Remoting Service

<service id=”remoting-service”  class=”flex.messaging.services.RemotingService”>

This will be the root node of the remoting-config.xml. Observe that “class” attribute is set to “flex.messaging.services.RemotingService”. This means the destinations under this “service” node will be handled by the “flex.messaging.services.RemotingService” class.  When a destination gets a request, RemotingService will invoke the appropriate adapter for the destination to get the result.

Adapter

<adapters>

<adapter-definition id=”java-object” class=”flex.messaging.services.remoting.adapters.JavaAdapter” default=”true”/>

</adapters>

This is how we declare adapters for this service. Each destination will have an adapter. You can see that the “default” attribute is set to “true”. This means that if a destination declaration doesn’t specify an adapter, then the default adapter will be used.

In our normal remoting JavaAdapter class is the adapter. JavaAdapter is responsible for invoking method on object and return the result. JavaAdapter also checks if the method invocation is allowed. JavaAdapter will depend on the JavaFactory class to get the object instance on which the method should be invoked.

Factory

<destination id=”my-destination”>

<properties>

<source>flex.samples.EmployeeService </source>

<scope>application</scope>

</properties>

</destination>

This is how we declare a Remoting destination. This destination has its “source” set to “flex.samples.EmployeeService” and “scope” set to “application”.

JavaFactory will use the value of the “source” element to decide which type of object to instantiate and the value of the “scope” element to decide in which scope of the web application the created instance should be stored or look for the instance already created.

JavaFactory is responsible for returning the object instance. In this case JavaFactory is responsible for returning the instance of the “flex.samples.EmployeeService”. If the “scope” is set to application/session then the JavaFactory will check if there is already an instance in the scope and return that. If the object is not available then it is instantiated and stored in appropriate scope.

Wait a second we did not declare a “factory” in the destination. Yes, we did not declare “factory” because JavaFactory is the default factory used by the JavaAdapter.

Complete flow

RemotingService will invoke the JavaAdapter. JavaAdapter will do necessary checks and invoke JavaFactory. JavaFactory will return the instance based on the “source” and “scope” element values. JavaAdapter will now invoke the method on the instance using Java Reflection API and return the result. RemotingService will return the same. MessageBroker will take it from here.

That’s it, each component work so well to allow us to remotely invoke methods on the Java classes.