HTMLForm component – HTML <FORM> equivalent in Flex

April 29, 2009

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 🙂

Advertisements