Deploying Adobe Flex into Google AppEngine

In the right hands, Adobe Flex is a powerful tool that can create very powerful user interfaces. There are lots of examples that can be found here. However, Flex isn’t perfect and does have its faults in particular with accessibility which can also be said of Java Applets and JavaFX. JSPs and Servlets don’t have the same limitations, but the effort to build a powerful UI in Flex is considerably quicker. I’ve found that Java is great at ‘back-end’ development and not so good at ‘front-end’ whereas Flex is the opposite, very good for ‘front-end’ development. Both technologies complement each other. That led me to think,  AppEngine can host ‘static’ files; this combination should work in AppEngine? The answer is yes!

If you want to try this, I’ve provided some small test code that uses the ‘guestbook’ demo project that comes with AppEngine.

The screenshot below shows what the ‘guestbook’ demo looks like.

And deploying a test Flex application with the Java project, we get the screenshot below.

First, build a new ‘Flex Project’ using the following code. The key configuration within this code is the ‘HTTPService’ that will call a Java servlet which in turn returns the XML of the guestbook postings.

<?xml version="1.0" encoding="UTF-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:jw="components.*" applicationComplete="guestbook.send();">
<mx:Script>
import mx.rpc.Fault;
import mx.rpc.events.*;
import mx.controls.Alert;

public function faultHandler(event:FaultEvent):void
{  Alert.show(event.fault.faultString, "Error");  }

public function resultHandler(event:ResultEvent):void
{  }
</mx:Script>

<mx:HTTPService id="guestbook" url="/greetings"	method="GET" resultFormat="e4x"
  fault="faultHandler(event);" result="resultHandler(event);" />

<mx:Panel id="panel" title="Guest Book">
  <mx:DataGrid id="dataGrid" dataProvider="{guestbook.lastResult.post}" editable="false">
     <mx:columns>
       <mx:DataGridColumn id="nicknameColumn" width="100" dataField="nickname" headerText="Nickname" />
       <mx:DataGridColumn id="contentColumn" width="200" dataField="content" headerText="Content" />
       <mx:DataGridColumn id="dateColumn" width="100" dataField="date" headerText="Date" />
      </mx:columns>
     </mx:DataGrid>
</mx:Panel>
</mx:Application>

Within the ‘Guest Book’ project, create a new servlet ‘GreetingXMLServlet.java’.

Paste the following code that creates the XML file to be returned to the Flex application. This servlet queries the object datastore for all the guestbook postings.

package guestbook;
import java.util.List;
import javax.jdo.PersistenceManager;
import guestbook.Greeting;
import guestbook.PMF;
import java.io.IOException;
import javax.servlet.http.*;
@SuppressWarnings("serial")
public class GreetingsXMLServlet extends javax.servlet.http.HttpServlet
{
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException
{
resp.setContentType("text/xml");
PersistenceManager pm = PMF.get().getPersistenceManager();
String query = "select from " + Greeting.class.getName() + " order by date desc range 0,5";
List<Greeting> greetings = (List<Greeting>) pm.newQuery(query).execute();
if (!greetings.isEmpty())
{
resp.getWriter().println("<greetings>");
for (Greeting g : greetings)
{
resp.getWriter().println("
<post>");
if (g.getAuthor() == null)
resp.getWriter().println("<nickname>Anonymous</nickname>");
else
resp.getWriter().println("<nickname>" + g.getAuthor().getNickname() + "</nickname>");
resp.getWriter().println("<content>" + g.getContent() + "</content>");
resp.getWriter().println("<date>" + g.getDate() + "</date>");
resp.getWriter().println("</post>");
}
resp.getWriter().println("</greetings>");
}
pm.close();
}
} 

Paste the following into ‘war/WEB-INF/lib/web.xml’ to configure the servlet.

<servlet>
<servlet-name>greetings</servlet-name>
<servlet-class>guestbook.GreetingsXMLServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>greetings</servlet-name>
<url-pattern>/greetings</url-pattern>
</servlet-mapping>

Finally, import the ‘Flex’ release files into the ‘war’ folder of the ‘Guest Book’. If you have both projects in Eclipse, drag and drop it!

The Files are now within the ‘Guest Book’ project, and deploy into AppEngine!