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🙂

5 Responses to HTMLForm component – HTML <FORM> equivalent in Flex

  1. Mayank says:

    Awesome component!! Honestly, I wish the flex one behaved this way🙂

  2. Thanks Mayank. Very simple one but will be useful when building application which has lots of forms.

  3. Thanks for the post, I like to find inspiring ideas and practical knowledge to help bolster my own awareness for web design and development in general. Blogs like yours are a great source of inspiration for me and I will keep an eye open (on your rss feed) for more of your brilliant posts. Cheers!

  4. Suryakand says:

    Thanks buddy! you idea helped me in implementing my own Form component for BlazeDS.

    I have tweaked it a little bit based on my need. Basically I am using Java/BlazeDS/SpringFlex combination and I wanted to call a remote destination using (spring bean), so your idea of iterating over the form fields helped me.

    Thanks,
    — Surya

  5. Hi Suryakand,

    Glad this article helped.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: