HTMLForm component – HTML <FORM> equivalent in Flex

This is a Flex component and is called HTMLForm.

How is this component helping?

In HTML we have <FORM> which will send HTTP request with all data of all its child controls to the URL specified.

In case of Flex application, developer has to access the controls using their ids and add the values to an object and send the request, which is excellent. But for those who just want to post all data to server like a HTML <FORM> HTMLForm component will help.

How does it work?

This component will loop through all its children and get controls which can accept input from user. It creates key value pairs based on id of the child component and its values. Values are retrieved based on the control type, for example for TextInput text property is used to get the value. You can also pass Validator objects, which will be used to validate the form before sending request to the server

How should I use it?

It’s very simple, all you have to do is to add your controls as children of HTMLForm component and set the URL to the httpActionURL property. You can download the sample below.

On the server side, you should be using the id of the control to retrieve the value entered by the user on the client. For example if you have a TextInput with id userName, on the server you can use request.getParameter(“userName”) to retrieve the value entered by the user.

HTMLForm properties

httpServiceResultFormat – result format to be set for the HTTPService component. Default is text

httpResultHandler – function to be invoke when the HTTPService ResultEvent is dispatched

httpFaultHandler – function to be invoke when the HTTPSerice FaultEvent is dispatched

validators -Array of Validator objects, which will be validated before posting the data

validationResults – Array of ValidationResultEvent objects

httpMethod – HTTP method to use while sending request

httpActionURL – URL to which the request should be sent

HTMLForm functions

getParamsObject() – returns Object with parameters based on child components

submitHTMLForm() – sends request to the URL and returns AsyncToken object

Please download the component and source at this URL. This a Flex project archive, just import using your Flex Builder. http://sujitreddy.g.googlepages.com/HTMLFormSample.zip

JSP page to check the data posted – http://sujitreddy.g.googlepages.com/parametersecho.jsp

Feel free to use this code as you wish

Adobe sweeps GIDS 2009 awards

Adobe won awards in 3 categories at Great Indian Developer Summit (GIDS) 2009.

Adobe Flex for Best Framework, Adobe ColdFusion for web development and Adobe Acrobat Connect Professional for best Collaboration Solution.

GIDS 2009 Awards

Sorry couldn’t get ColdFusion award in the picture.

Award Categories:

http://www.devmarch.com/developersummit/awards.html

Collaboration Solution (Winner: Adobe Acrobat Connect Professional)

Nominate from groupware, real-time conferencing and collaboration, and digital communities.

Web Development (Winner: Adobe ColdFusion)

Nominate from web development and deployment tools that are helping developers and designers push the boundaries of the web.

Frameworks (Winner: Adobe Flex)

Nominate from across the several libraries, components, and frameworks that are part of every developers treasure chest.

Thanks to all who voted

Setting up BlazeDS

This article explains how to setup BlazeDS for your J2EE web application.

BlazeDS adds a lot of power to your web applications. You can expose your Java classes as Remoting services. You can use the Messaging service of BlazeDS to expose publish subscribe messaging destinations and also use the Proxy service to invoke other services.

More details about BlazeDS can be found at this URL http://opensource.adobe.com/wiki/display/blazeds/BlazeDS

Updated: Free AIR based Tool to generate Flex code for consuming/exposing Java classes as BlazeDS Remoting services. Visit this URL for more details http://sujitreddyg.wordpress.com/2009/05/07/blazemonster/

Just follow the steps below you will have BlazeDS setup in no time

Getting BlazeDS

Step 1:

Download release build of BlazeDS. BlazeDS release builds are available at this URL http://opensource.adobe.com/wiki/display/blazeds/Release+Builds Click on “Download the BlazeDS binary distribution” to download the binary distribution. Binary distribution has just jar files and other configuration files required.

Step 2:

Go to folder where you saved the downloaded file in Step 1. You would have downloaded a file named blazeds-bin-4.0.0.14931.zip. Extract the content in this file to a folder named blazeds-bin-4.0.0.14931

Step 3:

In the blazeds-bin-4.0.0.14931 folder you will find a file named blazeds.war and blazeds-bin-readme.htm. blazeds-bin-readme.htm contains terms and conditions and license details. blazeds.war contains required jar files and configuration files for setting up BlazeDS.

Extract the content in blazeds.war file into a folder called blazeds. You can extract the content using tools like winzip.

Now we have downloaded and have the required files extracted to setup BlazeDS for a web application. Let’s create a web application.

Creating web application

If you don’t have Tomcat installed, install Tomcat from http://tomcat.apache.org/

Step 4:

In your Tomcat installation directory, you will find a folder named webapps. Usually it is at this location on Windows Operating System “C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps”

Create a web application named samplewebapp. You do this by just creating folder named samplewebapp under webapps folder.

Setting up BlazeDS

We will setup BlazeDS for the web application created in the previous step.

blazeds – this is the folder in which we have blazeds.war content extracted into  in Step 3

samplewebapp – this is the folder created in Step 4

Step 5:

Copy all .jar files from blazeds/WEB-INF/lib to samplewebapp/WEB-INF/lib

Step 6:

Copy blazeds/WEB-INF/flex folder to samplewebapp/WEB-INF

This folder (blazeds/WEB-INF/flex) contains BlazeDS configuration files. Use these files to configure Remoting/Messaging/Proxy services.

Step 7:

Now we will add Servlet mapping for BlazeDS Servlet named MessageBrokerServlet, so that BlazeDS is invoked when you send request for a Remoting/Messaging/Proxy destination using any of the channels supported.

Copy blazeds/WEB-INF/web.xml to samplewebapp/WEB-INF

If you already have a web.xml configured, then you can just copy the Servlet mapping for MessageBrokerServlet and the session listener. You can either copy the content below or copy it from the blazeds/WEB-INF/web.xml

<!-- Http Flex Session attribute and binding listener support -->

<listener>

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

</listener>

<!-- MessageBroker Servlet -->

<servlet>

<servlet-name>MessageBrokerServlet</servlet-name>

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

That’s it you have BlazeDS setup for your web application.

Now that you have BlazeDS set up you can try invoking Java methods from your Flex applications or create a simple chat application. You can find articles at the URLs below.

http://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/

http://sujitreddyg.wordpress.com/2008/01/17/messaging-using-flex-and-blaze-ds/

http://sujitreddyg.wordpress.com/2008/02/12/handling-java-exceptions-in-flex-application/

Adobe Rocks!!!