In the first Flex tutorial we’ve seen a first example of Flex and Java Integration. In this
second article we’ll explore how to connect from a Flex front-end to a Java Web Application.
In the first Flex tutorial we’ve seen a first example of Flex and Java Integration. In this second article we’ll explore how to connect from a Flex front-end to a Java Web Application.
I recommened you reading the previous article so you have at least a bird’s eye of view of Flex and Adobe Flex Builder.
Creating the Flex Layer
So here, we are. Connecting to a Web Application is fairly simple: the communication is done through XML. You return from your Servlet Response an XML and this is immediately converted into Flex Objects. What does this trick is the HTTPService Tag:
<mx:HTTPService id=”servletDemo” url=”http://localhost:8080/FlexDemo/servletDemo” />
This tag has just a couple of parameters: one, the id for referencing the response from Action script and the url (of your Servlet/JSP).
The response of the Servlet will be printed in a DataGrid component which is a component useful for printing tabular data. This is the complete example:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="servletDemo.send()"> <mx:HTTPService id="servletDemo" url="http://localhost:8080/FlexDemo/servletDemo"/> <mx:DataGrid dataProvider="{servletDemo.lastResult.movies.person}"/></mx:Application>
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.
The lastResult object contains an object named “movies” which corresponds to the movies node of the XML which is returned from the Servlet.
Below the movies node there is another array of nodes in the XML called “person”. Thus the expression “servletDemo.lastResult.movies.person” corresponds to the array of product which are returned from the HTTPService request to the Servlet.
{xtypo_info}A word of caution: the binding expression is case sensitive: so be careful to match the same format of the XML produced by the Servlet.{/xtypo_info}
The Servlet side:
Now let’s take a look at the servlet:
package com.sample; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ServletDemo extends HttpServlet { class Person { String name; String surname; String address; public Person(String name,String surname,String address) { this.name=name; this.surname=surname; this.address=address; } public String toString() { return "<person>"+ "<name>"+name+ "</name>" + "<surname>"+surname + "</surname >" + "<address>"+address + "</address >" + "</person>"; } } public ServletDemo() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = new PrintWriter (response.getOutputStream()); Person peter = new Person("Peter","Pan","NeverLand"); Person hook = new Person("James","Hook","Jolly Roger Galleon"); System.out.println(peter); System.out.println(hook); out.println("<movies>"); out.println(peter); out.println(hook); out.println("</movies>"); out.close(); } }
The Servlet create a couple of instances of the class Person which will be turned into XML with its toString method. (Of course in a real world scenario you could use more advanced framework like JAXB to marshall a Java class into XML)
If everything was fine, running the Flex Application will produce: