Blazeds Configuration on Apache Geronimo Web Server | Tutorial | Sample App

Kevin Languedoc - © 2009

Getting Started

Learn how to setup Blazeds on Apache Geronimo Web Server and build Flash applications. Blazeds is essentially a J2EE web application can be deployed to Geronimo like any other web application. To create a Flash application using Blazeds, remoting technology, special but very easy steps are required. This tutorial and sample app will demonstrate in detail how to do it.

Before we start

In order to build these applications, you will need to setup your environment. We need the following items:

  • Download Apache Geronimo
  • Apache Blazeds
  • Eclipse
  • Flex SDK (now available on Apache web site)
  • Aptana or Flash builder from Apache

Installing the components

Apache Geronimo Installation (if needed)


I am going to to use the term Apache Geronimo in this tutorial but it is the exact same steps for IBM Web Application Server (IBM WASCE) since the IBM product is just a re-branding. I am going to start by installing the Apache Geronimo J2EE Application Server. If you already have a Java 6 SDK installed, then you only need to download the Apache Geronimo Server, otherwise you will need the version that is supported by the Apache Geronimo Server version that you are using. Once finished downloading, unzip the archive into a convenient location. You can install it anywhere. Simply follow the instructions on screen. Once the server is installed, check that everything is working properly by starting the server. Once the installation is complete, start up the server to make sure everything is running properly and there is no conflicting Port number assignments, etc.

 

Blazeds Installation

Next we are going to install the Adobe Blazeds software that we are going to download from the Adobe site. Blazeds comes in two versions, the Turnkey version, which includes a Tomcat server and HSQL Database engine. The other is a J2EE application. We are going to use the J2EE version which is basically a war file: Blazeds.war. Once it is finished downloading the binary file (blazeds-bin-3.2.0.3978.zip), unzip the contents to a convenient folder. I used C:\Adobe\Blazeds but you can use anything you like. Next I want you to go to the folder where you unzipped the Blazeds.war file and we are going to unpack the archive.

A simple way is to change the extension from war to zip since it is an archive file and then simply unzip with any zip utility can you have on your pc.The unzipped file structure should look like this:

Blazeds File Structure (Unzipped)
Blazeds File Structure (Unzipped)

Adobe Flex Builder Installation

If you don't have Eclipse with the Adobe Flex Builder plugin or Adobe Flex Builder for that matter then follow the instructions below to install otherwise you can skip to the next section.

Moving right along we will now install Eclipse and the Flex Builder plug-in. You can download a trial version of the Flex Builder plug-in from the Adobe web site (you could also download the standalone Flex Builder IDE which is based on Eclipse). We are going to use Eclipse Ganymede (Eclipse 3.4) and the Adobe latest plug-in which works with Eclipse 3.4. Start by downloading the Eclipse Ganymede J2EE distribution from the Eclipse web site and unzip it to a location on your hard drive, say C:\eclipse. Then download the Flex Builder plug-in (FB3_WWEJ_Plugin) from the Adobe web site and run the installer. Next we are going to run Eclipse; the executable is in the folder where you unpacked the Eclipse distribution. To eliminate launching the executable from the folder everything, you can right click on eclipse.exe and select “Pin to start menu”. Once Eclipse is loaded we are going to configure the plug-in by going to Software Updates.

Help->Software Updates

Next click on “Add Site…” button. Next click on “Local” button. Once the “Browse for Folder” dialog box appears, browse to the folder where you installed the Flex Builder Plug-in and select the installation directory. On my laptop it is “Flex Builder 3 Plug-in” and click “Ok”.


Click “OK” one more time to close the "Add Site…" dialog. Now you should see the plug-in in the list, you must select the plug-in and click on “Install” to install the plug-in into Eclipse. Once finished restart Eclipse.


Java SDK Update Installation (if needed)

Next we need to configure our Java runtime and server plug-in. To setup the Java runtime that we installed previously we will go to.

  • Window-Preferences-Java-”Installed JREs and click on the “Add” button
  • Select “Standard VM” and click “Next >"

Browse to the location where you installed the Java 5.x version of the Java JDK, give a significant name and click on the “Finish” button.

To finish our Java JDK configuration, select the JDK your just installed. Don’t click on “Ok” just yet since we will also setup our server adapter (plug-in).

Apache Geronimo (or IBM Websphere Application Server: WASCE)

If you don’t see your adapter in the list, in our case this would be Apache Geronimo 2.1, click on the “Download additional server adapters” link. This will open a Server Adapter dialog which will populate after a few moments which a list of adapters from a remote site(s). You need to select the one you need, which can be Apache Geronimo 2.1 or IBM WASCE 2.1.1.4.

Click “Next >” and accept the software license agreement and

select “Next >” again to download and install the adapter and restart Eclipse when the Adapter is installed,select “OK” .

You will see the installation progress in the bottom right hand corner of your Eclipse IDE client.When the installation is complete you will be prompted to restart Websphere, it is important to accept this and Eclipse will automatically restart.

Once Eclipse has restarted we can actually test our installation by building our first Flex/Geronimo application. In keeping with tradition we are going to build a Hello World application.

I am going to start with the back-end but you can start with the client first if you want, so switch to the J2EE Perspective in Eclipse:

  • Window->Perspective->Java EE

Select the “Server” view and right click anywhere in the view and

select New->Server to configure a New Server Instance with the Adapter we installed in the previous section.

In the next dialog select Apache Geronimo and accept the default values. In the next screen, you can change the hostname, username and password. I suggest to accept the defaults (localhost, system, manager) and select “Next >”.

Click “Finish” again to complete the server configuration. Had we had J2EE projects we could have added them to the server, but we will do that later. After the dialog box closes, you should see your newly created server configuration in the Server view similar or identical to mine in the screenshot.




This completes the configuration portion. Next we will build our first application.

Building our first application

Setup Project

Switch to the J2EE perspective and create a new Dynamic Web Project

  • Project Name: FlexSphere
  • Target Runtime: Apache Geronimo or (IBM WASCE v2.1) that we configured in the first step
  • Dynamic Web Module: 2.5
  • Configuration: Default Configuration for Apache Geronimo or (IBM WASCE v2.1)
  • Click Next
  • Accept the defaults for Context Root, Context Directory and Java Source Directory
  • Click Next to configure the Geronimo Web Deployer. 

Enter these values:

  1. Group Id:FlexApps
  2. Artifact Id: FlexSphere
  3. Version: 1.0
  4. Artifact Type: car

The Group Id allows us to group all our similar apps together by category. The Artifact Id is our application. Version is pretty self explanatory and Artifact Type is how the application will be packaged. In Geronimo a “car” archive is the default for Geronimo based systems. Click Finish


Blazeds Eclipse Configuration

Now that we have our basic project setup, we will move along and configure Blazeds. This is fairly straightforward.Basically what we are going to do is replace the contents of the WebContent folder, except for our web.xml and geronimo.xml files. Here are the steps to do this.

  • Right click on WebContent and select Import from the context menu.
  • Expand the General folder, select the File System option and click next

From the File System import dialog box

click on the Browse button and go to the blazeds folder. If you followed my instructions in the first part then navigate to the blazeds installation folder (where you unzipped it). You will find the blazeds folder under [Blazeds Installation Folder]\blazeds\. This should contain the META-INF and WEB-INF sub folders. Select the "Blazeds" folder and click OK.

Expand the Blazeds node and,

  1. check only the META-INF and WEB_INF folders
  2. Check also the "Overwrite existing resources without warning" to replace the existing META-INF and WEB_INF folders
  3. Select "Create selected folder only" otherwise the complete file structure will be created which we don't want
  4. Click Finish


Blazeds Installation Folder
Blazeds Installation Folder
Resource Selection
Resource Selection

The new project structure should look like the following screenshot. If not review the previous steps to see where you went wrong.

Before we complete this part of the project configuration, we need to change the Default output folder so our java classes will be directly outputted to the WEB-INF/classes folder under Blazeds to proper visibility to the runtime and configuration.

New WebContent
New WebContent

To setup the Default Output Folder

  1. Right click on the Project folder and select Properties from the context menu.
  2. Select The Java Build Path options and select the Source tab
  3. Locate the Java Build Path field in the bottom part of the Java Build Path dialog box.
  4. Click on the Browse button and navigate to the WebContent/WEB-INF/classes folder.
  5. Select the classes sub-folder under WebContent/WEB-INF and click OK to close to select and change the output folder location.

Output Folder
Output Folder


Now we are ready to build our first Remoting application. Three more steps are left to complete this tutorial:

  1. Create Java Class
  2. Configure the Remoting Services in blazeds
  3. Create the Flex application

Create Java class

What we are going to do here is create a simple Java class, which in keeping with tradition will a Hello World class that will take as input the users name and append it the "Hello World" string the Java method and return the new string back to the Flex application. We will get the input from the Flex application that will be build in the final part of this tutorial.

First right click on the src folder and select Package to create a new package.


For the purpose of this tutorial name the package "kcodebook.apps.helloworld".

Once the Package is created, highlight it, right click again and select Class to create a new java class which we will name "HelloWorld".


Notice how Eclipse fills in the Package name for us (for those who are new to Eclipse). Also select Constructors from superclass and accept the other defaults and click Finish to let Eclipse create the Java file titled HelloWorld and automatically compile it and place it the output folder we configured before. Eclipse will also open it in the Editor ready for us to add our own code.


Enter the code for the method sayHelloWorld as in the following screenshot. The rest of the code was auto generated by Eclipse. Save and close.


This completes the Java side of the development. Next we are going to configure the remoting by adding our package and class to the remote-config.xml file.




Blazeds Remoting Configuration

Open the remoting-config.xml file, which is located in the flex sub-directory under WEB-INF by

  • Selected the file and hit the F3 button
  • Switch to the Source window in the XML Editor
  • Add the following the destination. Remoting uses Destinations to point to valid Java classes.

<destination id="HelloWorld"> <properties> <source>kcodebook.apps.helloworld.HelloWorld</source> </properties> </destination>

The added configuration information should look like this.

Adobe Flex Application

The final bit of business before we test our application is to create a test Flex application.

Switch to the Flex Development Perspective (Window-> Perspective->Other->Flex Development)

  1. Create a new Flex Project
  2. Project Name: FlexHello
  3. Select "Web Application..." as a Application Type
  4. Select "J2EE" as the Application server type
  5. Select "Use remote object access service"

Click Next,

This next screen has some important information. Here we are going to setup the J2EE server to recognise our Flex application and allow it to communicate with the Java back end through Blazeds.

  1. Root Folder: Browse to the WebContent folder in our Java project
  2. Root url: Use http://localhost:8080/FlexSphere
  3. Context Root: FlexSphere
  4. Click the Validate Configuration. Don't worry if you get a warning message as seen in screenshot. It doesn't affect the functioning of our example or your projects


At this point we will click on Finish. The IDE will generate the necesary files for our project and open the mxml file ready for us to add our code. Enter the code as in the screenshot between the opening and closing mx.Application tags.

 
 


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:RemoteObject id="ro" destination="HelloWorld"/>
<mx:TextInput id="textName" change="ro.sayHelloWorld(textName.text)" x="326.5" y="52"/>
<mx:Label text="{ro.sayHelloWorld.lastResult}" x="352" y="82"/>
</mx:Application>

Save and now we are ready to test our application. First right click on the Java Project and from the Context Menu click on Run As...

  • Select the runtime that we configured Websphere Application Server 2.1
  • Click Next and either accept the default port numbers or change them but it highly recommend to leave them as is.

Click Next and add our project to the server if not already there.

Click Finish At this point the server will start and you will see its in the console view Once the Java application is up and running we will perform the same operation on the Flex application Right click on the Flex Project and from the Context menu select Run As... Flex Application

Once the browser starts and loads our application, type in your name and receive the result as each character is typed.

More by this Author


Click to Rate This Article
working