Flex Article

Providing a Struts Application with a Flex Front End

With Flex, you can provide a rich front end to your Struts applications. The remainder of this article discusses two different approaches to implement this integration. The two approaches correspond to the two different ways a Flex application communicates with remote systems:

• Using the traditional HTTP request/response mechanism
• Using SOAP to invoke methods on remote services

Approach 1: Traditional HTTP Request/Response Integration

In this approach, you use the Flex HTTPService to communicate with Struts using the traditional HTTP request/response mechanism. In other words, you keep using Struts exactly the way you use it with a traditional HTML-based view system. This approach has no impact on the model and the controller aspects of your Struts application.

To implement the Registration application using this approach, the only change you have to make is to modify confirm.jsp to dynamically generate an XML response instead of an HTML response. When the Flex application receives the XML response, it can adjust the user interface accordingly.

The following diagram illustrates the workflow of the Registration application implemented using this approach.

Figure 3. Workflow of the Registration application with the HTTP request/response approach

The Flex client application is implemented as follows:

<?xml version="1.0" encoding="iso-8859-1"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" height="600">

    <mx:HTTPService id="registrationRequest" url="/royale/RegistrationSubmitFlex.do"
        result="alert(registrationRequest.result.registration.status)">
        <mx:request>
            <firstName>{firstName.text}</firstName>
            <lastName>{lastName.text}</lastName>
            <phone>{phone.text}</phone>
            <email>{email.text}</email>
        </mx:request>
    </mx:HTTPService>

    <mx:Form>
        <mx:FormItem label="First Name" required="true">
            <mx:TextInput id="firstName" width="200"/>
        </mx:FormItem>
        <mx:FormItem label="Last Name" required="true">
            <mx:TextInput id="lastName" width="200"/>
        </mx:FormItem>
        <mx:FormItem label="Phone" required="true">
            <mx:TextInput id="phone" width="200"/>
        </mx:FormItem>
        <mx:FormItem label="Email" required="true">
            <mx:TextInput id="email" width="200"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Register" click="registrationRequest.send()"/>
        </mx:FormItem>
    </mx:Form>

    <mx:Repeater id="errorList" dataProvider="{registrationRequest.result.registration.error}">
        <mx:Label>{errorList.currentItem}</mx:Label>
    </mx:Repeater>

</mx:Application>

Code Highlights:

• You use the Flex data binding mechanism to bind the page parameters of the HTTP request to the data input controls: when the user makes changes in user interface controls, the request parameters are changed accordingly.
• The errorList Repeater is bound to the result of the registrationRequest HTTPService: When registrationRequest receives the XML response, the Repeater automatically displays a label corresponding to each <error> tag in the response.
• You can also use the result event handler of the HTTPService tag to do something relevant to your application when it receives the response. This example displays a message box indicating the success or the failure of the registration.

As mentioned earlier, the confirm.jsp page now generates an XML document instead of an HTML document:

<registration>
<%
    Object errors = request.getAttribute("org.apache.struts.action.ERROR");
    if (errors==null) {
%>
        <status><bean:message key="status.success"/></status>
<%
    } else {
%>
        <status><bean:message key="status.failure"/></status>
<%
    }
%>
</registration>

Note: Notice that the application uses the Struts tags to generate the XML response. Among other advantages, this means that you can still fully leverage the internationalization features built into Struts.

Alternative Implementation: Supporting Flex and HTML in Parallel

Rather than modifying confirm.jsp to generate XML instead of HTML, you can also create a new action mapping in struts-config.xml. The new action mapping uses the same ActionForm and Action objects, but forwards the request to another JSP (confirmxml.jsp). This approach allows you to simultaneously support HTML and Flex clients.

<action
	path="/RegistrationSubmit"
	type="samples.struts.RegistrationAction"
	name="registrationForm"
	scope="request"
	validate="true"
	input="/registration/registration.jsp">
	<forward name="success" path="/registration/confirm.jsp"/>
</action>

<action
	path="/RegistrationSubmitFlex"
	type="samples.struts.RegistrationAction"
	name="registrationForm"
	scope="request"
	validate="true"
	input="/registration/confirmxml.jsp">
	<forward name="success" path="/registration/confirmxml.jsp"/>
</action>

Page 4 of 6