Flex 2: Development on a budget

My primary clients are Java shops. When I suggest using Adobe Flex 2 as a rich client tool for their Web applications, they typically ask about the cost on the server side. Expected answer: free. When I start telling them about really powerful features of Flex Data Services, they like it. They just do not like the licensing cost,which is very reasonable. But Flex 2 it’s too young, and some people are still in denial phase. It’ll change soon, but there got to be a free solution. Just to get the foot in the door. And there is one.

I’ll be using a JavaServer page (JSP) here, but you can replace a JSP with any technology you’re comfortable with: servlets, Active Server Pages, Python, PHP et al. Whatever can spit out an XML to a Web browser should work the same way.

I’ll show you a really simple application written in Flex 2 that talks to the XML producing JavaServer page. Just to make it simple, let’s take an XML with the information about employees:

<people>
<person>
<name>Alex Olson</name>
<age>22</age><skills>java, HTML, SQL</skills>
</person>

</people>

Now, let’s hardcode this (I’ve got three persons) into a super simple JSP that consists of one out.println() call, where the xml should go between the double quotes:
<%out.println(“…”); %>

The complete JSP looks like this (just put your XML in one line so you won’t bother 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>”);
%>

Deploy this JSP under some servlet container. I have Tomcat, so I just saved it as employees.jsp under my webapp\test directory. Do a sanity check to make sure that you’ve deployed this JSP correctly: entering http://localhost:8080/test/employees.jsp in your Web browser has to return the employee data.

Now comes the client part. If you have extra $500 laying around, purchase a license of Flex Builder from Adobe and enter the code below code in its editor. If you do not want to spend any money, just type this code in any text editor and use free command line mxmlc compiler that comes with Flex 2.

<?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>

Not too much typing, isn’t it?

This code uses the <mx:HTTPService> component that allows you to connect to a specified URL either directly or through a proxy. In my example I just specify the URL of my JSP. The data provider of my 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

XML tag that is coming from our employees.jsp. Next month, I’ll write a piece explaining Flex data binding in more details. On the application Complete event, we send a request to the HTTPService object known under id employees, and our JSP readily returns the XML, which is bound to the data grid. Compile and run this program, and it’ll show you the following:

Not a bad result for a dozen lines of code.

Of course, it’s better to be rich and healthy than poor and ill. But my point is that even poor (or pretending to be poor) people can use Flex 2 with their existing server side Web tools for free.

Read about Flex to servlet communication at http://flexblog.faratasystems.com/?p=143

6 thoughts on “Flex 2: Development on a budget

  1. Yea, and with Red5 you have the push technology sitting there so you can have two-way interaction with the server and its open source. Check it out.

  2. I’ll be a whole lot more comfortable when OpenAMF supports the new version of AMF. I suppose that another project to look seriously at would be Red5.

    The reason I don’t particularly like using XML in this manner is because of the processing of data on both the client and server sides. An AMF solution works so much better as both sides already agree on what the data is and thus data is only created and not parsed. That being said, Web Services are great especially when it’s someone else’s server you are getting data from.

    Just my thoughts on this topic. Thanks for bringing it up.

  3. I am pretty new to using flex and presently a java developer. This article has given me good introductory knowledge on using flex with java.

    If you can help me i want clarification on following :

    (1) I am want to change the color of the button based on the data received from the server.

    (2) how to make this client continuously ask data from the server without user intervention.

    Regards,

    Sarat.

  4. Sarat, techniques described in this article just illustrate how to connect from Flex to JSP. Do not make a mistake, I’m not saying that this is how you should work from Flex with Java.

    Read this article to have a better understanding: http://java.sys-con.com/read/210991.htm, and data polling using timer is described there as well

  5. Hi ,
    I have started using flex very recently, and am facing a problem, when i create a login screen, which in turn redirects us to another flex screen.
    problem: Clicking the submit button twice.
    The problem description is as follows:
    The user enters the userid and password. Then clicks on submit, which calls a servlet and verifies the login credentials entered. then I verify the result of the servlet back into my mxml file. But when the control comes back for the first time, the response is null. It is only on the second click that the page is redirected. Please find the code below, and help me out on this.
    the code is as follows: the ‘correct’ and ‘wrong’ being compared in action script are the values returned by the xml.

    {uname.text}
    {pass.text}

    servlet code:

    if(username.equals(“xyz”) && paswrd.equals(“xyz”))
    {
    out.println(“”);
    out.println(“correct”);
    out.println(“”);
    }
    else
    {
    out.println(“”);
    out.println(“wrong”);
    out.println(“”);
    }

Comments are closed.