I'm not personally related to Adobe, Google nor Sun but I like to code in Java. I am happy to see that Adobe filling the gap which Sun left years ago with applets. Java is the perfect choice to use on Google App Engine. So can Flex also be a good choice to use with both? Last episode we let Anakin meet Obi Wan Kenobi, now time to see how they do together in harder missions. Lets dive deeper and see...

I assume you have basic knowledge about GAE and its Eclipse plugin. If not go back to the previous article and do some coding because this part will be tough. I also assume you know what is Flex (or at least RIA) and what it offers, otherwise you can do this tutorial with any other web framework and still achieve our goal in this article.

Last article we managed to code a very basic servlet which returns and receives xml from our Flex client which had hard coded tags as strings. Of course in the real world you wouldn't want this and would probably use xstream or any other parser to convert our objects to xml. But wouldn't it be great to call a Java backend from our Flex client with remoting and using objects without xml serilization. Well in this episode we are going to build some Spring beans on GAE and make them available as BlazeDS remoting for our Flex client.

Again if you didn't try the previous post or not comfortable with GAE go and try it.

Lets make a Head First style intro, our boss and clients were happy with the phonebook project we built in last part but soon they will be demanding better performance and more functionality, so lets refactor our previous project and turn it into a more sophisticated one.

Create a new GAE project just like the previous one this time lets name it SecondProject.

Again the plugin created an example for us, lets forget about them and start with our entity. Create a Java class under org.flexjava.server package.

package org.flexjava.server;
import javax.jdo.annotations.IdGeneratorStrategy;
import javax.jdo.annotations.PersistenceCapable;
import javax.jdo.annotations.Persistent;
import javax.jdo.annotations.PrimaryKey;
@PersistenceCapable
public class Entry {
        @PrimaryKey
        @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
        Long id;
        @Persistent
        private String name;
        @Persistent
        private String phone;
        public Long getId() {
                return id;
        }
        public void setId(Long id) {
                this.id = id;
        }
        //getters setters
}

Create a new interface FlexService under org.flexjava.server package with following method declarations.

package org.flexjava.server;
import java.util.List;
public interface FlexService {
        public boolean addEntry(Entry entry);
        public List <Entry> getEntryList();
}

This two methods will be enough to achieve our goal. Now under the same package create FlexServiceImpl class and add the methods with the knowledge we gained from our previous application.

package org.flexjava.server;
import java.util.List;
import javax.jdo.JDOHelper;
import javax.jdo.PersistenceManager;
import javax.jdo.PersistenceManagerFactory;
import javax.jdo.annotations.Transactional;
public class FlexServiceImpl implements FlexService {
        //persistance manager
        private static final PersistenceManagerFactory pmfInstance = JDOHelper
                        .getPersistenceManagerFactory("transactions-optional");
        PersistenceManager persistenceManager;
        @Override
        @Transactional
        public boolean addEntry(Entry entry) {
                try {
                        //check if the id is 0 which is same as null
                        if (entry.getId().intValue()==0){
                                entry.setId(null);
                        }
                        //get manager
                        persistenceManager = pmfInstance.getPersistenceManager();
                        //save our entry
                        persistenceManager.makePersistent(entry);
                        return true;
                } catch (Exception e) {
                        return false;
                }
        }
        @Override
        @Transactional
        @SuppressWarnings("unchecked")
        public List<Entry> getEntryList() {
                //get persistance manager
                persistenceManager = pmfInstance.getPersistenceManager();
                //our query which is a select * in this case
                String query = "select from " + Entry.class.getName();
                //return the result
                return (List<Entry>) persistenceManager.newQuery(query).execute();
        }
}

Compared to the last tutorial our server side code is much simpler. Before going into dungeons of configuration files lets code the Flex end. Click on the project and add Flex nature. Do not forget to change the output folder to “war” folder of the project. To use remoting we need the ActionScript counterpart of our Entry object. Create a new ActionScript object under org.flexjava.client package.

package org.flexjava.client
{
        [Bindable]
        [RemoteClass(alias="org.flexjava.server.Entry")]
        public class Entry
        {
                public var id:int;
                public var name:String;
                public var phone:String;
                public function Entry()
                {
                }
        }
}

The remote class alias must be pointing exactly to your Java object. Since we have done this we are ready to finish our Flex client. It will be very similar to the previous phonebook application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
        <mx:TextInput x="114" y="20" id="nameTxt"/>
        <mx:TextInput  x="114" y="60" id="phoneTxt"/>
        <mx:Label x="29" y="22" text="Name"/>
        <mx:Label x="29" y="62" text="Phone"/>
        <mx:Button x="332" y="60" label="Save" click="saveEntry()"/>
        <mx:DataGrid id="grid" x="29" y="138" dataProvider="{phonebook}">
                <mx:columns>
                        <mx:DataGridColumn headerText="Name" dataField="name"/>
                        <mx:DataGridColumn headerText="Phone" dataField="phone"/>
                        <mx:DataGridColumn headerText="Record Id" dataField="id"/>
                </mx:columns>
        </mx:DataGrid>  
        <mx:RemoteObject id="ro" result="showEntryList(event)" destination="FlexDestination" endpoint="http://localhost:8080/messagebroker/amf"/>
        <mx:Script>
                <![CDATA[
                        import mx.binding.utils.BindingUtils;
                        import org.flexjava.client.Entry;
                        import mx.collections.ArrayCollection;
                        import mx.rpc.events.ResultEvent;
                        import mx.controls.Alert;
                        [Bindable]
                        public var phonebook:ArrayCollection;
                        public function init():void{
                                ro.getEntryList();
                        }
                        public function saveEntry():void{
                                var entry:Entry=new Entry();
                                entry.name=nameTxt.text;
                                entry.phone=phoneTxt.text;
                                ro.addEntry(entry);
                        }
                        public function showEntryList(event:ResultEvent):void{
                                if (event.result!=null){
                                        if (event.result==false){
                                                Alert.show("record could not be added");
                                        }else if (event.result==true){
                                                Alert.show("added to your phone book");
                                                ro.getEntryList();
                                        }else{
                                                phonebook=event.result as ArrayCollection;
                                        }
                                }
                        }
                ]]>
        </mx:Script>    
</mx:Application>

This way, the Flex client looks simpler too. We are done with coding and it was still quite easy. Lets do the Spring and Blaze configuration. If you ever googled Flex-Java and Blaze you probably ended up at Christophe Coenraets blog. He was one of first people I heard and learned flex from. He offers great examples and a zipped and configured Tomcat with everything necessary (from Blaze, ActiveMQ, database, Spring etc..). Spring source also offers a great documentation about Spring-Blaze integration. We will definitely need this two to continue.

Locate web.xml under war\WEB-INF folder and add the following inside the web-app tags.

        <!-- Spring -->
        <context-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>WEB-INF/webAppContext.xml</param-value>
        </context-param>
        <listener>
                <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
        </listener>
        
        <servlet>
                <servlet-name>testdrive</servlet-name>
                <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
                <load-on-startup>1</load-on-startup>
        </servlet>
        <servlet-mapping>
        <servlet-name>testdrive</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
        </servlet-mapping>

Now create a webAppContext.xml next to web.xml.

<?xml version="1.0" encoding="utf-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:flex="http://www.springframework.org/schema/flex" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:context="http://www.springframework.org/schema/context"
        xsi:schemaLocation="
                http://www.springframework.org/schema/beans
                http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
                http://www.springframework.org/schema/flex 
                http://www.springframework.org/schema/flex/spring-flex-1.0.xsd
                http://www.springframework.org/schema/context
                http://www.springframework.org/schema/context/spring-context-2.5.xsd">
        <flex:message-broker>
                <flex:message-service
                        default-channels="my-streaming-amf,my-longpolling-amf,my-polling-amf" />
                <!-- <flex:secured />  -->
        </flex:message-broker>
        
        <bean id="flexBean" class="org.flexjava.server.FlexServiceImpl"/>
        <!-- Expose the productDAO bean for BlazeDS remoting -->
        <flex:remoting-destination destination-id="FlexDestination" ref="flexBean" />
</beans>

This will make our FlexServiceImpl class available as a Spring bean called flexBean. Next we enable this Spring bean as a Blaze remoting destination with the id of FlexDestination. FlexDestination will be the name exposed to outer world to call our service class with remoting.

Now create a folder named flex under WEB-INF and add the following four flex xml configuration files. These files are quite standard so if you have downloaded Christophe's example or got them any other way, you may just copy those files instead of creating them. You can also get them under my project export.

Finally the jar list. Actually I just copy the jars Christophe's server, I know most of the jars we won't be using (specially database one) but still I took them all to be able to add new functionality to my project.

antlr-3.0.1.jar
aopalliance.jar
appengine-api-1.0-sdk-1.2.0.jar
aspectjrt.jar
aspectjweaver.jar
backport-util-concurrent.jar
cglib-nodep-2.1_3.jar
commons-codec-1.3.jar
commons-httpclient-3.0.1.jar
commons-logging.jar
concurrent.jar
datanucleus-appengine-1.0.0.final.jar
datanucleus-core-1.1.0.jar
datanucleus-jpa-1.1.0.jar
flex-messaging-common.jar
flex-messaging-core.jar
flex-messaging-opt.jar
flex-messaging-proxy.jar
flex-messaging-remoting.jar
geronimo-jpa_3.0_spec-1.1.1.jar
geronimo-jta_1.1_spec-1.1.1.jar
gwt-servlet.jar
jackson-core-asl-0.9.9-6.jar
jdo2-api-2.3-SNAPSHOT.jar
org.springframework.aop-3.0.0.M3.jar
org.springframework.asm-3.0.0.M3.jar
org.springframework.aspects-3.0.0.M3.jar
org.springframework.beans-3.0.0.M3.jar
org.springframework.context-3.0.0.M3.jar
org.springframework.context.support-3.0.0.M3.jar
org.springframework.core-3.0.0.M3.jar
org.springframework.expression-3.0.0.M3.jar
org.springframework.flex-1.0.0.RC1.jar
org.springframework.jdbc-3.0.0.M3.jar
org.springframework.jms-3.0.0.M3.jar
org.springframework.transaction-3.0.0.M3.jar
org.springframework.web-3.0.0.M3.jar
org.springframework.web.servlet-3.0.0.M3.jar
spring-security-acl-2.0.4.jar
spring-security-catalina-2.0.4.jar
spring-security-core-2.0.4.jar
spring-security-core-tiger-2.0.4.jar
spring-security-taglibs-2.0.4.jar
xalan.jar

So far we did everything as we are instructed so we expect everything to run smoothly. Right click and run your project as Web Application.

"Channel.Connect.Failed error NetConnection.Call.Failed: 
HTTP: Status 500: url: 'http://localhost:8080/messagebroker/amf'"

Ok, we weren't expecting this but if we check our server logs we will notice a clue;

WARNING: /messagebroker/amf
java.lang.RuntimeException: Session support is not enabled in appengine-web.xml.To enable sessions, put true in that file. Without it, getSession() is allowed, but manipulation of sessionattributes is not.
at com.google.apphosting.utils.jetty.StubSessionManager$StubSession.throwException(StubSessionManager.java:67)

Great! Google even tells us what to do, this is what I expect from a framework. Open the appengine-web.xml file and add ”true” just before the system-parameters tag. Lets re run the server and our application works! Well not that hard, actually it is time to deploy our code in to the Google Cloud and see it working there.
First go to your SecondProject.mxml file and change the endpoint value with your app url(in mine; endpoint="http://flexjava2p.appspot.com/messagebroker/amf"). Click the Deploy App Engine project button, and enter your email and password. Of course if you don't have an GAE account first create one.

The plugin recompiles and deploys our project. Now open a browser and type your url. Ok this was the first real suprise GAE introduced to me. So far GAE offered a reliable and stable development and production environment but now we face an error which we can not reproduce in our development environment “flex.messaging.request.DuplicateSessionDetected “. This not very cool, the development environment differs from actual runtime and we are facing a problem which we did not face in development.

When I search for this error I found another good resource by Martin Zoldano. In this post Martin tells us about the problem and how he solved by editing flex-messaging-core.jar. This incident cools down my excitement a bit about GAE/Flex but still you can see how important it is to work with open source frameworks. I asked Martin to send me his custom jar and (thanks to him) I included the jar in the project export attachment below. Besides the custom jar file, go to services-config.xml and add "<manageable>false</manageable>" just after the system tag.
Feel lost? Do not.. GAE Java is just in the early stage and even getting to this point with even Flex which is totally out of Java environment is still a great success. As long as we have the opened source we will have solutions like Martin Zoldano's. Even in this early stage we managed to make GAE work with Flex via Blaze.

I remember reading the following on Yakov Fain's blog;
He was saying; “99% of the people who reject using the software until it gets open sourced, neither plan nor will look at its source code.  “
My Comment was;
I agree most people do not look at the source code even if they need but I post a comment saying;
“Well probably same amount of people who buy cars equipped with airbags also don'use the airbags (so far i didn't) but it can be very helpful if you are in need “.

So when choosing a car don't forget to get a one with airbags even if you feel you don't need them. By the way want to see the finished app in the cloud... http://flexjava2p.appspot.com/

Murat Yener

www.flexjava.org