In Chapter 5, we’ll use Flex Data Services to connect a Flex client with plain old Java objects (POJO)
on the server using the object <mx:RemoteObject>. FDS is great software, but you may already
have some Web applications written in another technology and just want to put a pretty Flash Player
face on your existing Java Web applications that use JavaServer Pages (JSP). So the next couple
of pages will show you how to “teach” Flash Player to communicate with a JSP without having to
use FDS.
Retrieving Data from JSP
We’ll be using JSP here, but you can replace JSP with any technology you’re comfortable with: servlets,
Active Server Pages, Python, PHP, et al. Whatever can spit out the data to a Web browser should
work the same way.
We’ll show you a really simple application written in Flex 2 that talks to a JSP that generates XML
with the information about employees:
<people>
<person>
<name>Alex Olson</name>
<age>22</age><skills>java, HTML, SQL</skills>
Learning Flex Through Applications
116 RIA WITH ADOBE FLEX AND JAVA
</person>
…
</people>
Listing 4.26 A fragment of the XML employees data
Let’s just hardcode this XML (we’ve got three persons) into a JSP that consists of one out.println()
statement, where the XML goes between the double quotes:
<%out.println(“…”); %>
The complete JSP looks like this (just put your XML in one line so you won’t be bothered with
string concatenations):
<%
out.println(“<?xml version=\”1.0\” encoding=\”UTF-8\”?><people><person><name>Alex Olson</
name><age>22</age><skills>java, HTML, SQL</skills></person><person><name>Brandon
Smith</name><age>21</age><skills>PowerScript, JavaScript, ActionScript</skills></person>
<person><name>Jeremy Plant</name><age>20</age><skills>SQL, C++, Java</skills></person></
people>”);
%>
Listing 4.27 employees.jsp
Deploy this JSP under some servlet container. In the popular Apache Tomcat this means to save
it as employees.jsp under the webapp\test directory. As a sanity check we make sure that we’ve
deployed this JSP correctly: entering http://localhost:8080/test/employees.jsp in the Web browser
has to return the employee data. Now open Flex Builder and create the application:
<?xml version=”1.0” encoding=”utf-8”?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
applicationComplete=”employees.send()”>
<mx:HTTPService id=”employees” useProxy=”false” method=”POST”
url=”http://localhost:8080/test/employees.jsp” />
<mx:DataGrid dataProvider=”{employees.lastResult.people.person}” width=”60%”>
<mx:columns>
<mx:DataGridColumn dataField=”name” headerText=”Name”/>
<mx:DataGridColumn dataField=”age” headerText=”Age”/>
<mx:DataGridColumn dataField=”skills” headerText=”Skills”/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
CHAPTER 4
RIA WITH ADOBE FLEX AND JAVA 117
Listing 4.28 DataGrid_E4X_JSP.mxml
This code uses the <mx:HTTPService> component that lets you connect to a specified URL either
directly or through a proxy. The HttpService object is designed to communicate with any URI that
understands HTTP requests and responses. In the code above we’ve just specified the URL for the
JSP from Listing 4.24. The data provider of our data grid uses binding (see the curly braces) and
E4X syntax to parse the XML and populate this table with the elements located under the <person>
XML tag that’s coming from our employees.jsp. In the next section we’ll explain Flex data binding
in more detail.
On the applicationComplete event, the code employees.send() makes an HTTP request to the URL
specified in the HTTPService, and our JSP readily returns the XML that’s bound to the data grid.
Compile and run this program, and it’ll show you the following:
Figure 4.7 The output of DataGrid_E4X_JSP.mxml
Keep in mind that such a direct connection from HTTPService to a JSP is only permitted if your
JSP and Flex application are coming from the same domain, or if the Web server you’re connecting
to has the crossdomain.xml file specifying a cross-domain connection policy with the appropriate
permission for yours or all domains. You can read more about configuring crossdomain.xml in the
product manual under “Building and Deploying Flex 2 Applications.”
(+19)
