Mini Gripe

I do have a mini gripe with the current implementation (well maybe I’ll have a few, but this one stands out), it’s the way interfaces are described in Java.  For all Java’s benefits, it remains a verbose language, and developing UI structure with it looks clumsy and hard to maintain, in fact I know it is.  I can say that with some confidence since development  in GWT is almost identical to Flex development.

In Flex, if you try to develop all your interface in actionscript you end up in a similar situation. Classes quickly become very large (huge createChildren methods) as many nested components are instantiated and associated with one another.  Fortunately this can be avoided in Flex, as its is better practice to construct your layout using xml, leaving the declarative part of interface development in the language that suits it.  Xml is not just better for interface development because its declarative, it also lends itself to input from other disciplines since many types of developers and designer are used to html as the language of website structure.

Gripe Solved (soon)

That’s not the end of the story, as I learnt from the Google Wave: Under the Hood video, where a project named UiBinder is briefly mentioned.  The project sounded like exactly what I am after, and means of defining GWT interface in xml.  After a little hunting I found this document and this post.  Which explain what UiBinder is and importantly where it is (currently only internal to Google, though shortly to be released to you and me, w00).

UiBinder, briefly

UiBinder, according to the docs is a “service to generate Widget and DOM structures from XML markup“.  Which after reading the proposal (the document is a proposal for UiBinder as a GWT feature) I figured out basically means it does exactly what I was hoping.  So how does it work?

(I’ve taken the code below out of the proposal document since I cant yet try this myself. humph)

First the interface is defined using XML

<!-- HelloWorld.ui.xml -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <div>
    Hello, <span ui:field='nameSpan'/>.
  </div>
</ui:UiBinder>

This describes the interface for a a classic hello world component.  What I particularly like about the approach is how this file is then used from the Java, there are no nasty inline script tags or clumsy code behind super classes.  The template xml file is bound to the Java class explicitly.

public class HelloWorld extends UIObject {

  interface MyUiBinder extends UiBinder{}
  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField SpanElement nameSpan;

  public HelloWorld(String name) {
    setElement(uiBinder.createAndBindUi(this));
    nameSpan.setInnerText(name);
  }
}

The first line of the constructor is the interesting one, the UiBinder method createAndBindUi is called passing in this as the argument. This constructs your UI components and assigns them to corresponding private variables within the class, making the next line where the text is assigned to the span possible without ever having to directly construct the SpanElement within the java.

What you end up with is a very elegant separation of layout from logic.  Cant wait to get my hands on it!

If you don’t have much patience there are other options, if you take a look to the bottom of the UiBinder proposal there are some links to similar projects at the bottom, though I’ve yet to look into them.

What you’ll need.

• BlazeDS
• Spring Framework (I’ve used 2.5)
• Flex 3.0 (I’ll be using Flex Builder, but you are free to just use the SDK)
• Eclipse with Spring IDE plugin
• blazeds-spring-beta1.jar

The Steps!

Creating The Java

1. Create a Spring project in eclipse named BlogExample and set the output folder to be war/WEB-INF/classes.
2. Find the directory you unzipped the BlazeDS download into and navigate to the following directory {blaze install dir}/tomcat/webapps/blazeds/
3. copy the contents of this directory into the new project (you should have copied two folders, called WEB-INF and META-INF. These folders contain the necessary libraries and config files for connecting to Java from Flex)
4. Copy spring.jar file from {Spring unzip directory}/dist/ into the war/WEB-INF/lib directory of the project. The project now contains all the necessary library’s to connect Flex to Java. However as we are using Spring we will still need one more jar file which we will get in step 9
5. Next you need to create your business logic, I have created a very simple POJO called SimpleBook.java, which contains two properties with getters and setters (you can download the complete project here which contains this simple class).
6. Create a new Spring Bean Definition File called beans.xml inside the WEB-INF directory.
7. Add the following lines to the new beans.xml file, it tells spring to instantiate SimpleBook and set its properties
   <bean id=”myBook” class=”uk.co.ziazoo.example.domain.SimpleBook”>
   <property name=”name” value=”my book” />
   </bean>
8. Next we need to edit the services-config.xml and remoting-config.xml so that flex can connect to the application. Your can download mine from here (remoting-config.xml, services-config.xml). Be sure to change the endpoint in the services-config.xml to point to your local tomcat server. I have used the tomcat that come with the BlazeDS download as it comes pre-configured to work with BlazeDS.
9. If you take a look within the services-config.xml you will see I am referencing a class named flex.messaging.factory.SpringFactory which doesn’t currently exist in the project. We can get this file thanks to http://www.igenko.org… here blazeds-spring-beta1.jar
10. Once you have downloaded the blaze-spring-beta1.jar just copy it into the war/WEB-INF/lib folder
11. Next its time to configure the web.xml file. The web.xml file that come with BlazeDS needs a little tweaking to get it to work with our spring app. Firstly the included file uses the older DTD based syntax, we need to change this to the newer XML scheme method. Once we have done that we need to change the <listener> property such that it fits the spring based development ideas. (The changes essentially allow Spring to instantiate the business classes, rather than letting Flex do it… this is crucial to the whole idea of Spring, and its called IoC, Inversion of Control). Once that changes are made the web.xml file should look like this web.xml
12. The Java code is now complete, all that remains is to deploy it to the tomcat server, I have done this using Ant, blogging how to setup Ant and starting tomcat are all fairly in depth and very dependent on the system they are being installed on, so I’ll keep quite on that. If you are stuck I recommend reading the build.properties and build.xml files in my project.

The Flex

I am using Flex Builder 3.0, so these steps will vary for other IDS etc

1. Create a new project and select the application type J2EE
2. Set the root folder to to the context root of the java app withing tomcat ie /Users/Sam/Documents/blazeds_b1_121307/tomcat/webapps/blogexample
3. Replace the contents of the main mxml file with the follow main.mxml
4. Run the flex app.. and you should see the following
   
   

And thats your lot!!!

OOPS… forgot to upload the full Java code… here ya go Java code