Building Flex Applications with JSPs

来源：互联网发布：方正网络克隆教程编辑：程序博客网时间：2024/05/21 11:08

Building Flex Applications with JSPs

by jlward4th on February 20, 2008 Avg Rating 2.6 (26) | Log in to rate post.

Tagged with Data , JSP , MXML , Flex and other technologies , Java

View Comments (0)

Problem Summary

Flex applications are client side applications which must communicate over the network to retrieve data from and store data in a database. There are many ways to communicate between the client and the server. If you are using Java you may already have JSPs which allow your users to view and modify data. How can you put a Flex UI front-end on top of your existing JSP based infrastructure?

Solution Summary

Flex can make requests to your existing JSPs using the HTTPService object. These requests can work with any JSPs. A Flex application contains all of the view logic so the JSPs should not return HTML but rather just serialized data.

Explanation

You might have a JSP similar to this one:

<%@page import="flex.samples.product.ProductService,
                                flex.samples.product.Product,
                                java.util.List"%>
<html>
<body>
<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
    <th>Price</th>
    <th>Image</th>
    <th>Category</th>
    <th>Quantity</th>
  </tr>
<%
        ProductService srv = new ProductService();
        List list = null;
        list = srv.getProducts();
        Product product;
        for (int i=0; i<list.size(); i++)
        {
                product = (Product) list.get(i);
%>     
    <tr>
        <td><%= product.getName() %></td>
        <td><%= product.getDescription() %></td>
        <td><%= product.getPrice() %></td>
        <td><%= product.getImage() %></td>
        <td><%= product.getCategory() %></td>
        <td><%= product.getQtyInStock() %></td>
    </tr>
<%
        }
%>
</table>
</body>
</html>

This JSP just displays a simple HTML table of data which it fetched from the database. If you have a Flex application and want to display the same data in a tabular format you may just use a DataGrid in your mxml application. To get the data into your DataGrid you will need to modify the JSP so that it outputs serialized data rather than HTML:

<%@page import="flex.samples.product.ProductService,
                                flex.samples.product.Product,
                                java.util.List"%>
<?xml version="1.0" encoding="utf-8"?>
<catalog>
<%
        ProductService srv = new ProductService();
        List list = null;
        list = srv.getProducts();
        Product product;
        for (int i=0; i<list.size(); i++)
        {
                product = (Product) list.get(i);
%>     
    <product productId="<%= product.getProductId()%>">
        <name><%= product.getName() %></name>
        <description><%= product.getDescription() %></description>
        <price><%= product.getPrice() %></price>
        <image><%= product.getImage() %></image>
        <category><%= product.getCategory() %></category>
        <qtyInStock><%= product.getQtyInStock() %></qtyInStock>
    </product>
<%
        }
%>
</catalog>

Since this JSP now outputs XML serialized data, Flex will be able to parse that data and turn it into objects which can then be displayed in the DataGrid. The entire Flex application to request the data and display it in a DataGrid could be as simple as:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()">
    <mx:HTTPService id="srv" url="catalog.jsp"/>
    <mx:DataGrid dataProvider="{srv.lastResult.catalog.product}"/>
</mx:Application>

The HTTPService tag instantiates an object which will make the request to the JSP and deserialize the results into object. The url property on the HTTPService should point to the JSP which returns the XML data. The DataGrid tag instanciates an object which will display objects in a tabular format. The dataProvider property on the DataGrid tells the DataGrid which data to display. In this case the value uses data binding. A binding expression goes between the curly braces. The data binding tells the DataGrid to watch the specified object for changes and when changes occur the DataGrid will refresh it's view of the data. In this case the dataProvider is set to bind to the lastResult property on the HTTPService object (srv is the referencable identifier of the HTTPService). The lastResult object contains an object named "catalog" which corresponds to the catalog node of the XML which is returned from the JSP. On the catalog node there is another array of nodes in the XML called "product". Thus the expression "srv.lastResult.catalog.product" corresponds to the array of product which are returned from the HTTPService request to the JSP. The finial piece of logic in the code is an event handler which causes the Flex application to make a request to the JSP. The "creationComplete" event handler is triggered when the Flex application has fully initialized. When this event is triggered the Flex application makes a request to the JSP by calling the send method on the HTTPService.

You find the code for this example in the BlazeDS samples test drive:
http://labs.adobe.com/technologies/blazeds/