Dynamic Text Box in Flex

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

initialize="application1_creationCompleteHandler(event)" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx1="library://ns.adobe.com/flex/mx">


<mx:Script>
<![CDATA[
import mx.events.FlexEvent;


protected function application1_creationCompleteHandler(event:FlexEvent):void
{
var txt:txtbox=new txtbox();
app_Vbx.addChild(txt);
}
]]>
</mx:Script>
<mx1:VBox id="app_Vbx" height="100%" width="100%">

</mx1:VBox>
</mx:Application>

package

{

import mx.containers.HBox;

import mx.containers.VBox;

import mx.controls.Alert;

import mx.controls.Label;

import mx.controls.TextInput;

import spark.components.HGroup;

import spark.components.VGroup;

public class txtbox extends VGroup

{

public function txtbox()

{

super();

this.percentHeight = 100;

this.percentWidth = 100;

Alert.show("txtbox" );

}

override protected function createChildren():void

{

Alert.show("text" );

var hbx:HGroup = new HGroup();

var txt1:TextInput = new TextInput();

txt1.percentHeight = 75;

txt1.percentWidth = 75;

var txt2:TextInput = new TextInput();

var txt3:TextInput = new TextInput();

var lbl:Label = new Label();

lbl.text="Sample";

hbx.height = 500;

hbx.width = 500;

hbx.addElement(lbl);

hbx.addElement(txt1);

hbx.addElement(txt2);

hbx.addElement(txt3);

addElement(hbx);

}

}

}

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)