Rich Internet Application: Apache Flex and BlazeDS Setup easy 17 steps

 Apache Flex and BlazeDS configuration

Requirements:

1) Download the Latest Eclipse IDE for Java EE Developers i.e. Eclipse Indigo underhttp://www.eclipse.org/downloads/

2) Download the BlazeDs underhttp://opensource.adobe.com/wiki/display/blazeds/Downloads

3) Download and get installed the J2ee Server i.e. Apache Tomcat

4) Get installed Latest Flash builder

Steps:

Step 1: Extract the BlazeDs under c:\BlazeDs

Step 2: Lauch the Eclipse

Step 3: Click File → New → Project select the Dynamic Web project under the Web directory

Step 4: Click Next and choose the Project Name as HelloWorld

Step 5: Click the NewRuntime, it will show the popups of the serveradaptors in that choose the Apache Tomcat v7.0 and click Next then configure it and click finish

Step 6: Then click next and click next then it will lead to web module settings, in that check the check box Generate the Web.xml deployment descriptor and click Finish

Step 7 : Goto C:\blazeDs\WEB-INF\ copy the flex folder and paste it in your Project underWebcontent → WEB-INF, then Copy the all Jar under the C:\blazeDs\WEB-INF\libs to your libs folder Webcontent → WEB-INF → libs

Step 8: Then open the web.xml (Webcontent → WEB-INF)

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">

<display-name>HelloWorld</display-name>

<welcome-file-list>

<welcome-file>index.html</welcome-file>

<welcome-file>index.htm</welcome-file>

<welcome-file>index.jsp</welcome-file>

<welcome-file>default.html</welcome-file>

<welcome-file>default.htm</welcome-file>

<welcome-file>default.jsp</welcome-file>

</welcome-file-list>

</web-app>

Replace with the below Xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">

<display-name>HelloWorld</display-name>

<listener>

<listener-class>flex.messaging.HttpFlexSession</listener-class>

</listener>

<welcome-file-list>

<welcome-file>index.html</welcome-file>

<welcome-file>index.htm</welcome-file>

<welcome-file>index.jsp</welcome-file>

<welcome-file>default.html</welcome-file>

<welcome-file>default.htm</welcome-file>

<welcome-file>default.jsp</welcome-file>

</welcome-file-list>

<servlet>

<servlet-name>MessageBrokerServlet</servlet-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>

</web-app>

Step 9 : Goto Project → Properties → Java Build Path click the Source tab change the output folder locatoin to the Webcontent → WEB-INF → classes

Step 10: Create the Java class EchoService.java in package com

package com;

public class EchoService {

public String echo(String text) {

return "Server says: I received '" + text + "' from you";

}

}

Step 11: Then add the destination Remote-config.xml

<destination id="echoServiceDestination" channels="my-amf">

<properties>

<source>com.EchoService</source>

</properties>

</destination>


Then replace service-config.xml under class tag



<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
            <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
            <properties>
         <polling-enabled>false</polling-enabled>
         </properties>
</channel-definition>


check with id and replace with the above

Step 12: Create the Sample index.jsp file(to avoid error while running the application) and run the server

Step 13: Create the flex project in flex builder “helloWorld”

Step 14: Select the application server type as J2EE under that select the BlazeDS then click next

• Give root folder as Your Eclipse Project Location for eg, “C:\Documents and Settings\Sudharsanan\workspace\HelloWorld\WebContent” here C:\Documents and Settings\Sudharsanan\workspace is a eclipse workspace location , HelloWorld is a Project and choose the webcontent from that
  
  
• Give the Root URL as http://localhost:8080/HelloWorld
  
  
• Give the Context Root as /HelloWorld

Step 15: Choose the OutputFolder as your wish you can redirect here C:\Documents and Settings\Sudharsanan\workspace\HelloWorld\WebContent or the new folder inside the webcontent

Step 16: open the HelloWorld.mxml and replace the code

 <?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

<mx:RemoteObject id="remoteObject"

destination="echoServiceDestination"

result="resultHandler(event);"

fault="faultHandler(event);"/>

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.rpc.events.FaultEvent;

import mx.rpc.events.ResultEvent;

// Send the message in response to a Button click.

private function echo():void {

var text:String = ti.text;

remoteObject.echo(text);

}

// Handle the recevied message.

private function resultHandler(event:ResultEvent):void {

ta.text += "Server responded: "+ event.result + "\n";

}

// Handle a message fault.

private function faultHandler(event:FaultEvent):void {

ta.text += "Received fault: " + event.fault + "\n";

}

]]>

</fx:Script>

<s:VGroup height="100%" width="100%">

<mx:Label text="Enter a text for the server to echo"/>

<mx:TextInput id="ti" text="Hello World!"/>

<mx:Button label="Send" click="echo();"/>

<mx:TextArea id="ta" width="100" height="100"/>

</s:VGroup>

</s:Application>

Step 17: Run the Application. (Check whether your text return from the server when you click Send)