This is a part two of the prior blog where I described how to get data from JSP to Flex. This time we ‘ll send data from a Flex application played by Flash Player to a Java Server Page. In the next version of our Flex-JSP application I “ll show you how to post data from a Flex form to JSP. We “ll place a simple form under the data grid above to enter the data about the new employee as in Figure below. Pressing the button Add Employee will submit the entered data to the JSP, which will attach them to existing employees and return back so the data grid will be repopulated to include the newly inserted employee.
To design the form, we “ll be using Flex objects lt;mx:Form gt; container, which differs from the HTML tag lt;form gt;. The latter is an invisible container that holds some data, while lt;mx:Form gt; is used to arrange on the screen input controls with their labels. We “ll also use lt;mx:Model gt; to store the data bound to our lt;mx:Form gt;. Let “s also make the employee name a required field and add so called validator to prevent the user from submitting the form without entering the name. It will look as follows:
lt;mx:StringValidator id= “empNameVld ” source= “{empName} ” property= “text ” / gt;
lt;mx:Model id= “employeeModel ” gt;
lt;root gt;
lt;empName gt;{empName.text} lt;/empName gt;
lt;age gt;{age.text} lt;/age gt;
lt;skills gt;{skills.text} lt;/skills gt;
lt;/root gt;
lt;/mx:Model gt;
lt;mx:Form width= “100% ” height= “100% ” gt;
lt;mx:FormItem label= “Enter name: ” required= “true ” gt;
lt;mx:TextInput id= “empName ” / gt;
lt;/mx:FormItem gt;
lt;mx:FormItem label= “Enter age: ” gt;
lt;mx:TextInput id= “age ” / gt;
lt;/mx:FormItem gt;
lt;mx:FormItem label= “Enter skills ” gt;
lt;mx:TextInput id= “skills ” / gt;
lt;/mx:FormItem gt;
lt;mx:Button label= “Add Employee ” click= “submitForm() “/ gt;
lt;/mx:Form gt;
The attribute required=true displays a red asterisk by the required field but does not do any validation. The lt;mx:StringValidator gt; displays the prompt “This field is required rdquo; and makes the border of the required field red if you move the cursor out of the name field while it “s empty, and shows a prompt when you return to this field again as in Figure below. But we “d like to turn off this default validation by adding the property triggerEvent with a blank value:
lt;mx:StringValidator id= “empNameValidator ” source= “{empName} ”
property= “text ” triggerEvent= ” “/ gt;
We “ll also add our own AS3 function validateEmpName(). Now the click event of the Add Employee button will call validateName(), which in turn will either call the function submitForm() if the name was entered, or display a message box “Employee name can not be blank ” otherwise.
Validators are outside of the scope of this chapter, and we “ll just mention that Flex comes with a number of pre-defined classes that derived from the base class Validator. They ensure that the input data meet certain rules. The names of these classes are self explanatory: DateValidator, EmailValidator, PhoneNumberValidater, NumberValidator, RegExValidator, CreditCardValidator, ZipCodeValidator and StringValidator. These validators work on the client side, and round trips to the server are not required. A program initiates the validation process either as a response to an event or by direct call to the method validate() of the appropriate validator instance as shown below.
The final version of the Flex portion of our application is shown below.
lt;?xml version= “1.0 ” encoding= “utf-8 “? gt;
lt;mx:Application xmlns:mx= “http://www.adobe.com/2006/mxml ”
applicationComplete= “employees.send() ” gt;
lt;mx:HTTPService id= “employees ” useProxy= “false ” method= “POST ”
url= “http://localhost:8080/test/employees.jsp ” result= “onResult(event) ” / gt;
lt;mx:DataGrid dataProvider= “{employees.lastResult.people.person} ” width= “100% ” gt;
lt;mx:columns gt;
lt;mx:DataGridColumn dataField= “name ” headerText= “Name ” / gt;
lt;mx:DataGridColumn dataField= “age ” headerText= “Age “/ gt;
lt;mx:DataGridColumn dataField= “skills ” headerText= “Skills “/ gt;
lt;/mx:columns gt;
lt;/mx:DataGrid gt;
lt;mx:StringValidator id= “empNameValidator ” source= “{empName} ”
property= “text ” triggerEvent= ” “/ gt;
lt;mx:Model id= “employeeModel ” gt;
lt;root gt;
lt;empName gt;{empName.text} lt;/empName gt;
lt;age gt;{age.text} lt;/age gt;
lt;skills gt;{skills.text} lt;/skills gt;
lt;/root gt;
lt;/mx:Model gt;
lt;mx:Form width= “100% ” height= “100% ” gt;
lt;mx:FormItem label= “Enter name: ” required= “true ” gt;
lt;mx:TextInput id= “empName ” / gt;
lt;/mx:FormItem gt;
lt;mx:FormItem label= “Enter age: ” gt;
lt;mx:TextInput id= “age ” / gt;
lt;/mx:FormItem gt;
lt;mx:FormItem label= “Enter skills ” gt;
lt;mx:TextInput id= “skills ” / gt;
lt;/mx:FormItem gt;
lt;!–mx:Button label= “Add Employee ” click= “submitForm() “/– gt;
lt;mx:Button label= “Add Employee ” click= “validateEmpName() “/ gt;
lt;/mx:Form gt;
lt;mx:Script gt;
lt;![CDATA[
import mx.events.ValidationResultEvent;
import mx.controls.Alert;
private function validateEmpName():void{
if (empNameValidator.validate().type == ValidationResultEvent.VALID){
submitForm();
} else{
Alert.show( “Employee name can not be blank “);
}
}
private function submitForm():void {
employees.cancel();
employees.send(employeeModel);
}
private function onResult(event:Event):void{
trace( ‘Got the result ‘); // works only in the debug mode
return;
}
]] gt;
lt;/mx:Script gt;
lt;/mx:Application gt;
When the user hits the button Add Employee on the form, our HTTPService will submit the employeeModel to a modified employees.jsp, which now will get the parameters from the HTTPRequest object, prepare the new XML element newNode from the received data, concatenate it to the original three employees, and return it back to the client, which will display all employees in the datagrid. Here “s the new version of employee.jsp:
lt;%
String employees= ” lt;?xml version=\ “1.0\ ” encoding=\ “UTF-8\ “? gt; lt;people gt; lt;person gt; lt;name gt;Alex Olson lt;/name gt; lt;age gt;22 lt;/age gt; lt;skills gt;java, HTML, SQL lt;/skills gt; lt;/person gt; lt;person gt; lt;name gt;Brandon Smith lt;/name gt; lt;age gt;21 lt;/age gt; lt;skills gt;PowerScript, JavaScript, ActionScript lt;/skills gt; lt;/person gt; lt;person gt; lt;name gt;Jeremy Plant lt;/name gt; lt;age gt;20 lt;/age gt; lt;skills gt;SQL, C++, Java lt;/skills gt; lt;/person gt; “;
// Get the parameters entered in the GUI form
String name=request.getParameter( “empName “);
String age=request.getParameter( “age “);
String skills=request.getParameter( “skills “);
String newEmployee= ” lt;person gt; lt;name gt; ” + name+ ” lt;/name gt; lt;age gt; ” + age + ” lt;/age gt; lt;skills gt; ”
+ skills + ” lt;/skills gt; lt;/person gt; “;
if (name == null){
newEmployee= ” “;
}
// the xml goes back to the Web browser via HTTPResponse
out.println(employees + newEmployee + ” lt;/people gt; “);
% gt;
Figure. The employee form and default validator “s message
Note: There are other ways to pass the data from Flex to an existing Web application. For example, you can create an instance of the URLVariables object, create the data to be passed as its properties, attach URLVariables to URLRequest.data and call navigateToURL().
yakovfain.com 