Creating a Flex 3 Web application in Tomcat integrated Server in MyEclipse
This article is continuation of my previous article on Installing Flex Builder Plugin in MyEclipse In this article I’ve focused on how to create and deploy a Flex 3.0 and Java Web application using BlazeDS in Tomcat integrated server in MyEclipse.
Prerequisites:- Should have integrated Flex Builder with MyEclipse.
- Download latest release of binary version of BlazeDS from Adobe Open source site - Point to be noted BINARY DISTRIBUTION TO BE DOWNLOADED NOT ‘TURNKEY’ VERSION - Turnkey version has Tomcat & Samples in built.
- After download, unzip the zip file & further unzip the “blazeDS.war” file to a temp folder.
- The temp folder contains two folders “META-INF” & “WEB-INF”. Keep this in one place.
Creating and Deploying Flex web application step by step:
- Open MyEclipse
- Create a new Web Project, not Flex Project as shown below.
- New Web Project Window screen appears. Fill in all credentials as shown in below image.
- [Note: Below are the credentials which are used in this document]
- Project Name: “FlexSampleWeb”
- Location: “use default location”, or user can have their choice of directory here
- Source Folder: “src”
- Web root folder: “WebRoot”
- Context root url: “/FlexSampleWeb”.
- If user has JDK or Java EE 5.0 Version of Java installed, it might alert for the same, click Ok button. It basically means to use JDK 1.4 or whatever default version selected to be used for this project [Make sure it should be JDK 1.4 or higher - as it is required for BlazeDS]
- Click Finish to See Web Project being created.
- Now minimize MyEclipse, and go to “FlexSampleWeb” Project root directory which is created just few steps before. In general scenario it would be present in “[WorkSpace Folder] > FlexSampleWeb” directory or path.
- Also open the blazeDS.war extracted directory
- Copy both “META-INF” & “WEB-INF” directories from blazeDS extracted directory to “FlexSampleWeb” project’s “WebRoot” directory.
- Probably it will ask user for existences of few files & and asks for confirming the operation.
- Click YES button to overwrite the files. (Don’t panic this operation is not harmful)
- Now open or maximize the MyEclipse Editor
- Refresh “FlexBlazeDSSample” project
- The latest files along with “BlazeDS” config files under “WEB-INF > flex” directory are seen
- And checking the properties of project & moving to java build path > library should also show blazeDS libraries
- Below snapshots should be the outcome
- Close all properties windows or any windows opened.
- Go to Windows, Open Server Window View, you would basically see “Tomcat” Server with stopped status
- Click Start to Start the Server
- Deploy the web project which is created just now
- Right Click on Tomcat Server on Server Panel
- Click Manage Deployments to deploy
- New Deployment screen appears.
- Click Finish to deploy the web project.
- Now, create a Flex Project which will integrate with the web project which was created earlier.
- Either from File Menu or through right click options being Flex Development Perspective, Create new project.
- Fill in the credentials as shown in above image
- Project Name - “FlexSampleUi”
- Project location - “use default location” - user can choose directory of their choice
- Application Type - “Web Application”
- Server Technology
1. Application Server Type - “J2EE”
2. Check on “use remote object access service”
3. “LiveCycle Data Service” Radio button being selected
4. Uncheck “Create combined Java/Flex project using WTP” option. - Click Next to continue and below screen appears.
- Fill in the form as shown in below picture or snapshot
- For those who cannot see the above image, follow below steps
- Server Location - Uncheck “Use default location”
- Root directory - Browse through folder structure of your system to Web-Project’s “WebRoot” directory [Above created web project]
- Root Url - type in the full fledge url to access the web project on server for me it was “http://localhost:8080/FlexSampleWeb “
- Context Root - “/FlexSampleWeb” - if you have different context root, specify that here
- Leave compilation options as is.
- Compiled Flex application location - output folder - would have full path of WebRoot followed by “FlexSampleUi-debug”
- Remove “FlexSampleUi-debug” and live it as shown in next snapshot
- Click Validate Configuration button to validate the configuration.
- This operation will result in below snapshot
- Click Finish to complete Project creation and expand the directory structure in Navigator or File Explorer should look like below
- Click on Run Button selecting Flex Project to see that it opens up url “http://localhost:8080/FlexSampleWeb//FlexSampleUi.html”
- The Screen should be empty as it has no source at all.
- Now create a Java class called “HelloWorld” in “com.test” package in “FlexSampleWeb” Web Project
- Copy the below code into the java file
package com.test;
import java.util.Date;public class HelloWorld
{
private String userSaid;public String repeat( String said )
{
this.userSaid = “Reply from server: ” + said;
return this.userSaid;
}public String sayHello()
{
Date now = new Date();
return “Hello World ” + now;
}
} - Open Flex Mxml file and copy below code.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:RemoteObject id=”myservice” fault=”faultHandler(event)” showBusyCursor=”true” destination=”Hello”>
<mx:method name=”sayHello” result=”resultHandler(event)” />
<mx:method name=”repeat” result=”resultHandler(event)” />
</mx:RemoteObject>
<mx:Script>
<![CDATA[
import mx.managers.CursorManager;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
private function faultHandler(fault:FaultEvent):void
{
CursorManager.removeBusyCursor();
result_text.text = "code:\n" + fault.fault.faultCode + "\n\nMessage:\n" + fault.fault.faultString + "\n\nDetail:\n" + fault.fault.faultDetail;
}
private function resultHandler(evt:ResultEvent):void
{
result_text.text = evt.message.body.toString(); // same as: evt.result.toString();
}]]>
</mx:Script>
<mx:Button x=”250″ y=”157″ label=”sayHello” width=”79″ click=”myservice.getOperation(’sayHello’).send();”/>
<mx:Button x=”250″ y=”187″ label=”Repeat” click=”myservice.getOperation(’repeat’).send(myText.text); “/>
<mx:TextArea x=”10″ y=”36″ width=”319″ height=”113″ id=”result_text”/>
<mx:Label x=”10″ y=”10″ text=”Result:”/>
<mx:TextInput x=”82″ y=”187″ id=”myText” text=”Sent to Server”/>
</mx:Application>
- BlazeDS server-side configuration:
On the sever side, need to extend a BlazeDS configuration file to enable the Java service to be accessed later from the Flex client. Open the “remoting-config.xml” file in the project folder “FlexSampleWeb\WebRoot\WEB-INF\flex” and overwrite the content with the following:<?xml version=”1.0″ encoding=”UTF-8″?>
<service id=”remoting-service”
class=”flex.messaging.services.RemotingService”><adapters>
<adapter-definition id=”java-object” class=”flex.messaging.services.remoting.adapters.JavaAdapter” default=”true”/>
</adapters><default-channels>
<channel ref=”my-amf”/>
</default-channels><!– Flex Demo application –>
<destination id=”Hello”>
<properties>
<source>com.test.HelloWorld</source>
</properties>
</destination></service>
- Save, Select web project back, refresh once, it should deploy the latest files on web project,
- And start the tomcat server.
- Now by selecting Flex Project, click on Run button to see the flex application the screen shown in snapshot below appears.
- Click on say hello button to see its functionality
- Type in some message in text box & click on Repeat button to see the same on text area, which is returned from server
Source, Reference and Credit : Srinivas’s Blog
My previous article on