BEA Workshop Studio is an Eclipse-based toolset that allows developers to easily build rich Internet applications (RIAs) using Adobe Flex and Java.  For developers already using BEA Workshop Studio, the new Flex bundle makes it easy to build RIAs in the same IDE used to build the business logic of an application. For developers already using Flex Builder, the Flex bundle for BEA Workshop Studio adds sophisticated functionality for building and debugging the Java-based back-end code for an application. The combination of  BEA Workshop Studio and Flex Builder fits perfectly with typical three-tier architectures and helps developers to easily create a clean separation between the client and mid-tier. 

In this tutorial, I walk you through the steps to creating an RIA using Java for the back-end business logic and Flex for the front-end view of the application. I will use the BEA Workshop Studio (Flex Bundle) to create a simple Java mid-tier and a simple Flex front-end for that mid-tier. Using BlazeDS, the new Adobe open-source Java remoting technology for Flex that facilitates communication. 

Requirements

To get the most out of this article you will need to install the following software:

BEA Workshop Studio / Flex Bundle trial

• Download

BlazeDS

• Download

Tomcat 5.5

• Download

Project files with the source code and BlazeDS:

• flex_with_workshop.zip (9MB)

An overview of the application

First, you'll create a web application from the base blazeds.war file, creating a Java class file, and adding it to the web application.  Next, you'll configure the web application to allow a Flex application to talk to the Java class.  You'll create a Flex application, which will call a method on the Java class in the web application.  Then you'll add the Flex application to the web application and deploy it to an application server.  Lastly, you can run the Flex application in a web browser.

Adobe Flex applications run on the client-side in the browser.  When they need to communicate with a server to persist data or integrate with other services, they have a variety of options.  Flex has built-in libraries for communicating to servers through HTTP using serialization methods such as RESTful and SOAP.  However, these methods of communication add complexity to applications because you must serialize objects to text and then back to objects.  The Adobe Labs beta software, BlazeDS, provides a simpler method of communicating with Java back-ends, whether the back-end is based on POJOs, Spring, or EJB.  By taking advantage of the open AMF serialization protocol for Adobe Flash, Java objects can be translated easily to and from Flash objects.  With the remoting library in Flex, client applications can make method calls easily on back-end Java objects or call services like Spring Beans or EJB Session Beans.  There is also a messaging library in Flex that allows Flex applications to consume and produce messages on a topic either stand-alone or JMS.  Future articles will explain how to build applications that use the messaging capability of BlazeDS using BEA Workshop Studio (Flex Bundle).

Step-by-step instructions for building the application

1. Download and install the software in the Requirements section, and start BEA Workshop Studio.
2. Create a new Flex Server project by importing the BlazeDS blazeds.war file (which comes with your download of BlazeDS Beta 1 from Adobe Labs—you can get this from the Requirements section).
   1. Select File > Import.
      
      
      

      Figure 1. Importing the blazeds.war file

   2. Select the WAR file option. Specify the location of the blazeds.war file that comes with BlazeDS Beta 1. Specify the name of the web project as flex_server.
      
      
      
      Figure 2. Naming the web project
      
      
   3. Select Finish.
3. Create a new Java Class file:
   1. Right-click Java:Resources: src in the flex_server project.
   2. Select New > Class.  Specify the class Name as HelloWorld.
      
      
      
      Figure 3a. Creating a new class
      
      
      
      Figure 3b. Naming the new class HelloWorld
      
      
   3. Select Finish.
   4. Add a method to the new HelloWorld.java class:

      public String sayHello() 
      { 
      return "hello, World"; 
      }

   5. Save the file (Control-S or File > Save).
4. Configure BlazeDS:
   1. Open the services-config.xml file, found in the flex_server/WebContent/WEB-INF/flex directory with the Text Editor.
   2. Update the file to match the following:

      <?xml version="1.0" encoding="UTF-8"?> 
      <services-config> 
              <services> 
                  <service-include file-path="remoting-config.xml" />        
              </services> 
              <security> 
              </security> 
              <channels> 
                  <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel"> 
                      <endpoint uri="http://{server.name}:{server.port}/{context.root}/messagebroker/amf"     class="flex.messaging.endpoints.AMFEndpoint"/> 
                  </channel-definition> 
              </channels> 
              <logging> 
                  <target class="flex.messaging.log.ConsoleTarget" level="Error"> 
                      <properties> 
                          <prefix>[BlazeDS] </prefix> 
                          <includeDate>false</includeDate> 
                          <includeTime>false</includeTime> 
                          <includeLevel>false</includeLevel> 
                          <includeCategory>false</includeCategory> 
                      </properties> 
                      <filters> 
                          <pattern>Endpoint.*</pattern> 
                          <pattern>Service.*</pattern> 
                          <pattern>Configuration</pattern> 
                      </filters> 
                  </target> 
              </logging> 
              <system> 
                  <redeploy> 
                      <enabled>false</enabled> 
                  </redeploy> 
              </system> 
      </services-config>

   3. Save the file.
   4. Open the remoting-config.xml file, found in the flex_server/WebContent/WEB-INF directory with the Text Editor.
      
      
      
      Figure 4. Opening remoting-config.xml with the Text Editor
      
      
   5. Update the remoting-config.xml file to match the following code snippet:

      <?xml version="1.0" encoding="UTF-8"?> 
      <service id="remoting-service" 
              class="flex.messaging.services.RemotingService" 
              messageTypes="flex.messaging.messages.RemotingMessage"> 
              <adapters> 
                  <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter"     default="true"/> 
              </adapters> 
              <default-channels> 
                  <channel ref="my-amf"/> 
              </default-channels> 
              <destination id="HelloWorld"> 
                  <properties> 
                      <source>HelloWorld</source> 
                  </properties> 
              </destination> 
      </service>

   6. Save the file.
5. Create a new Flex Client Project:
   1. Select File > New > Project.
   2. Specify Flex Project.
      
      
      
      Figure 5. Creating a new Flex project
      
      
   3. Select Next.
   4. Specify Basic.
      
      
      
      Figure 6. Specifying the way you want to access data in your application
      
      
   5. Select Next.
   6. Specify flex_client as the Project name.
      
      
      
      Figure 7. Naming the project
      
      
   7. Specify that the project use the default location.
   8. Select Next.
   9. Specify the Output folder to be ${DOCUMENTS}\flex_server\WebContent.
   10. Select Finish.
6. Create the Flex application:
   1. With the flex_client.mxml application already be open in BEA Workshop Studio, update the file to match the following:

      <?xml version="1.0" encoding="utf-8"?> 
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="ro.sayHello()"> 
           <mx:RemoteObject id="ro" destination="HelloWorld"/> 
           <mx:Label text="{ro.sayHello.lastResult}"/> 
      </mx:Application>

   2. Save the file.
7. Update the configuration for the Flex application:
   1. Right-click flex_client.
   2. Select Properties.
   3. Select Flex Compiler.
   4. Specify two additional compiler arguments (update the path to match the location of your flex_server project):

      -services C:\bea\user_projects\workspaces\workshop\flex_server\WebContent\WEB-INF\flex\services-config.xml     -context-root /flex_server

   5. Select OK.
8. Create the server that will run the application:
   1. Select File > New > Other.
   2. Select Server > Server.
   3. Select Next.
   4. Select Apache > Tomcat v5.5.
      
      
      
      Figure 8. Selecting the server that will run the application
      
      
   5. Select Next.
   6. Specify the location where Tomcat is installed and the JRE to use.
      
      
      
      Figure 9. Specifying the location for the Tomcat server
      
      
   7. Select Next.
   8. Select flex_server in the Available projects list.
   9. Select Add to add the project to the Configured projects list.
      
      
      
      Figure 10. Adding the project to the Configured projects list.
      
      
   10. Select Finish.
9. Run the application:
   1. Locate the flex_client.html file in the flex_server/WebContent directory.
   2. Right-click the flex_client.html file.
   3. Select Run As  > Run on Server.
   4. Select the Tomcat server.
      
      
      
      Figure 11. Running the application on the Tomcat server
      
      
   5. Select "Set server as project default."
   6. Select Finish.

The Flex application runs in the web browser, and displays the string: "Hello, World," which it received from the server through the RemoteObject and BlazeDS.

Next steps

Continue learning about using Flex and Java together at:

• Flex.org
• Adobe Flex Developer Center
• BEA's Workshop Studio - Flex microsite
  Significant discounts are available through the microsite until Jan 31, 2008.

About the author