Looking towards declarative interfaces in GWT
Jun/090
I have been doing some work with GWT lately, and there is a lot I really like about it. Developing in Java (or any OO language) not only makes me more productive, it enables me to solve problems in the way I understand, without having first to grapple with how another language requires me to think. The output is awesome since its rendered natively in the browser, making it fast, and familiar. Basically there is a lot I really like about GWT, and I’m going to be using it wherever I get a chance from now on, but that not to say its all good.
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.
Installing psycopg2 on Leopard
May/091
Have been building a site using Turbogears 2.0 of late (which is awesome), and decided it was time to start setting up my staging and production environments. Thus far I have just been developing locally with sqlite, but in production I want to use postgresql… so tried to install psycopg2 via distutils and was met with the following error
NameError: global name 'w' is not defined
Eek!
Finding the solution seemed to take me far too many googles… so thought I’d pop up here so I have no excuse for forgetting next time I do exactly the same
For me the solution was to add the following to my path, since I appears that pscopg2 requires postgres to be installed before it can compile (My version of postgres is installed via macports)
export PATH=/Library/PostgreSQL/8.3/bin:$PATH
Once the postgres bin folder was in the path pscopg2 compiled without any troubles. Win
Woo, I presented at Max
Dec/080
I gave my presentation at Adobe Max this morning on building Flex applications with PureMVC. It was a real privilege to get the opportunity to speak, and I hope those who attended found it useful.
I also feel fortunate that I had such a good topic to talk on, as that always makes it easier 
so many thanks to Cliff for doing such a great job with PureMVC
In case anyone is interested I have uploaded the slides and the sample code…
code
slides (keynote)
slide (swf)
Day one at Adobe Max Europe
Dec/081
The highlight of the first day was always going to be the keynote. Whilst there was nothing revelatory, it was inspiring to see Adobe showcase their products. This was perhaps helped by the impressive circa 30m wide video wall.
I particularly enjoyed the talk given by the BBC. The somewhat muted service they provide for non-Windows users has always been a bug bearer for me. I was pleased to hear though that they have been handed a solution to their licensing issues by the DRM support in Air 1.5. This means we can now have the same download manager facilities, along with some notification goodness, wrapped up in a shiny cross-platform AIR app – result.
Another demo that caught my eye was a news reader for the New York Times. I was shown the current New York Times news reader about a year ago. It’s a chunky WPF application, so no good to me in Unix land. What it did do very nicely however was display column based text in whatever sized window you might have the app open in. That same functionally is now available (or soon to be, I’m not sure if it’s out yet) in an Air application. This is no doubt made a lot easier by the new text rendering engine within Flash 10, which allows text to flow between containers. For some more info check out this report
Ohh, and for general information about the Keynotes go here
ta ta
ps, I’m also posting on the LBi blog, check it out here
Project Snooze
Nov/080
A little while back I started a project called Project Snooze. My idea was to port the basic functionalty of Hibernate to Adobe AIR, in the hope of making working with SQLite in AIR a much more fun/agile process. I got quite a way with it back when I was commuting as I worked on the train. Since then I have let it slip a little but now I’ve decided its about time I finished what I started!
The basic idea is that with a nominal amout of metadata Snooze can create your database, and perform CRUD operations for your objects. It supports the most common relationship types, one-to-one, one-to-many, and many-to-many, and I am planning to build a querying api into it.
If your interested in finding out more about it you can check it out on github… where hopfully you will see a lot of commits from this lazy geek!
Speaking at Max
Nov/080
Some exciting news I left off the last post (as I thought it deserved its own) is that I have been confirmed as a speaker at Adobe Max Europe. Im going to be speaking about building Flex applications with PureMVC, so a lot like the FlexCamp talk only this time I will be going into more detail…. I’m currently trying to figure out how to communicate something quite abstract without sounding dry, or making the usual mistake of just saying something is elegent without backing it up with facts/justification. Hummm, righto back to keynote!
Lazy sammy
Nov/080
Wow, been a while since I did this!
Since March (when I last posted) I’ve had a rather busy time. I have settled into my new Job at LBi (not that new anymore, I started in February 08) and have finally moved to London.. so no more moaning about First Great (really not very great) Western!
Here are some brief highlights:
Getting published by adobe
Seems someone did read my blog after all (though probably not anymore as I have been a little quiet) as I was contacted by adobe after they read my blog and asked me to write an article… you can read it here. Not sure its very good to be honest… and I might have some different things to say if I were writing it now, but I guess thats all part of the learning process. Mostly I was just flattered that asked!
Building some cool apps
Things have been going well at LBi, and I have been lucky enough to work on fairly awesome apps… probably the most exciting has been a platform game for Centrica. We had a team of 5 actionscript developers working on it, and I think there are somewhere in the region of 1000 class files making it up, so it was no small feat! Its a PureMVC application, with the physics engine Box2D providing the core of the game engine. Check it out here
Speaking at FlexCamp
We use PureMVC to build all our apps in the RIA team at LBi, consequently we’ve ended up knowing a fair bit about it. We got a chance to share some of that experience at FlexCamp the other month. I presented along with Justin Clark (me boss) on the basics of creating Flex applications with PureMVC. I was pretty nervous… but I think it went well, and we did get some good feedback on the day.
phew… I think there may be more, but I’m hungry! so think its time I signed off and shut up
I hate First Great Western
Mar/080
I really really really hate First Great Western!!!!!… I just needed to get that off my chest!
BlazeDS with Spring
Jan/0811
With the release of BlazeDS from Adobe building your business logic in java just became a lot more accessible! In this post I’m going show the basics of setting up a Java, spring based application, then connecting to it from Flex via the flex.messaging.factory.SpringFactory . I’m going to keep the the domain (business logic) as simple as possible, and I’m not going to be persisting anything to a database. This is so I don’t get bogged down in details and can get straight to the point… connecting Flex to Java/Spring with BlazeDS…. so here we go!
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
- Create a Spring project in eclipse named BlogExample and set the output folder to be war/WEB-INF/classes.
- Find the directory you unzipped the BlazeDS download into and navigate to the following directory {blaze install dir}/tomcat/webapps/blazeds/
- 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)
- 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
- 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).
- Create a new Spring Bean Definition File called beans.xml inside the WEB-INF directory.
- 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> - 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.
- 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
- Once you have downloaded the blaze-spring-beta1.jar just copy it into the war/WEB-INF/lib folder
- 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
- 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
- Create a new project and select the application type J2EE
- 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
- Replace the contents of the main mxml file with the follow main.mxml
- 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
Flex Cairngorm code example
Jan/088
Over the Christmas break I finally managed to claw an afternoon of free time together to knock up a little example application. Why bother? Well just about every client I go to meet and potentially work with wants to see some example code first… now since writing code is my job you wouldn’t think that was a very difficult task, but its not quite that simple. Often the projects I work on are very large, worked on by multiple programmers, and dependent on some server side code to run. Even when the projects are small enough to send to someone as an example I’m not even sure I have the legal right to-do so!
With the above in mind I though it was about time I created a little application that I could send around to plug my abilities etc, and you can see it here
A little about how it works
The app is built using Flex 3.0 and the Cairngorm framework. Data is pulled in via XML, and displayed using a simple image viewing component I created.
Why use Flex
Flex enables me to build the same breed of applications we have all been building with Flash for sometime… only with Flex we can do faster, more reliably, with a fuller api and using a decent IDE… whats not to like?
Why Cairngorm
Cairngorm is all about building complex RIA’s in a consistent MVC manner… adobe puts it like this “The Cairngorm microarchitecture is intended as a framework for Enterprise RIA developers”. As you may have noticed the little image viewer I’m using as my example code is no enterprise application, in fact it only has a couple of user gestures, I’m just trying to demonstrate my familiarity with the framework.
I think Cairngorm is very important to the Flex developer community, it offers a well proven methodology for building applications, which separates concerns, promotes testability and leads to very predictable, scalable solutions.
About the view
I wanted to build a little set of classes that would allow me to display items (which could be anything from products to images etc.) in a number of ways, and was simple to extend. The snappyviewer, which is the name of the component displaying the images is an implementation of those classes.
The main classes the view is built around are two interfaces IItemView and IItemDisplayer.
Both interfaces contain a function named display. The display function in IItemVIew is intended to delegate the displaying of items to the IItemDisplayer via composition. The display function in IItemDisplayer is implemented for various display types, ie, displaying items in a grid, or in a row (GridItemDisplayer & SlideItemDisplayer).
To change which type of view the IItemView uses I can set the IItemDisplayer though the dispayer setter function in IItemVIew and hey presto, the view is updated.
You can check out the code by right clicking on the application and selecting Source View.
Any feedback welcome
ps.. you can see the application here