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:

lt;people gt;

lt;person gt;

lt;name gt;Alex Olson lt;/name gt;

lt;age gt;22 lt;/age gt; lt;skills gt;java, HTML, SQL lt;/skills gt;

lt;/person gt;

lt;/people gt;

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:

lt;%out.println( “… “); % gt;

The complete JSP looks like this (just put your XML in one line so you won’t bother with string concatenations):

lt;%

out.println( ” lt;?xml version=\ “1.0\ ” encoding=\ “UTF-8\ “? gt; lt;people gt; lt;person gt; lt;name gt;Alex Olson lt;/name gt; lt;age gt;22 lt;/age gt; lt;skills gt;java, HTML, SQL lt;/skills gt; lt;/person gt; lt;person gt; lt;name gt;Brandon Smith lt;/name gt; lt;age gt;21 lt;/age gt; lt;skills gt;PowerScript, JavaScript, ActionScript lt;/skills gt; lt;/person gt; lt;person gt; lt;name gt;Jeremy Plant lt;/name gt; lt;age gt;20 lt;/age gt; lt;skills gt;SQL, C++, Java lt;/skills gt; lt;/person gt; lt;/people gt; “);

% gt;

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.

lt;?xml version= “1.0 ” encoding= “utf-8 “? gt;

lt;mx:Application xmlns:mx= “http://www.adobe.com/2006/mxml

applicationComplete= “employees.send() ” gt;

lt;mx:HTTPService id= “employees ” useProxy= “false ” method= “POST ”

url= “http://localhost:8080/test/employees.jsp ” / gt;

lt;mx:DataGrid dataProvider= “{employees.lastResult.people.person} ” width= “60% ” gt;

lt;mx:columns gt;

lt;mx:DataGridColumn dataField= “name ” headerText= “Name “/ gt;

lt;mx:DataGridColumn dataField= “age ” headerText= “Age “/ gt;

lt;mx:DataGridColumn dataField= “skills ” headerText= “Skills “/ gt;

lt;/mx:columns gt;

lt;/mx:DataGrid gt;

lt;/mx:Application gt;

Not too much typing, isn’t it?

This code uses the lt;mx:HTTPService gt; 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 lt;person gt; 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 applicationComplete 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s