GWT Sushi

Subjective thoughts on best practice with GWT applications.

2011-11-13T11:12:00.001-08:00

If you have spent anytime with me you know I love GWT. But in my humble opinion there are ways to build web applications that still involve the gamut of javascript frameworks and bog-standard HTML5 and javascript. Through my vast and continued learning experience of GWT I am beginning to see it in its current guise as being great for building complex and large widgets embedded in a web environment that is built in a more traditional web application framework. Using the word tradition is kind of absurd in the web application design sphere because a tradition is established in a matter of months and then disposed for a new tradition within a couple of years. However we appear to be heading towards a path of convergence in how and the way we code. I recognise this as entirely subjective but for companies adopting GWT for the first time, experimenting with complex GWT widgets, then embedding them into their existing web applications is a great way to start on the GWT path.

Model-View-Controller (MVC) and Model-View-Presenter (MVP) are becoming the de-facto design patterns for building desktop, web and mobile applications. Developers pay attention, if these are not on your resume, get them on there as fast as possible. You should not leave home without it. Many frameworks in almost every language develop according to this pattern. So whether you are using Ruby on Rails, Grails, GWT, Spring MVC, Backbone.js they all design their frameworks around this convention. GWT is a little late to the game with regards to this and so two additional frameworks have been around for a while which in my opinion currently offer a lot more features than the "Activities and Places" inbuilt infrastructure. These two frameworks are GWT-Platform and MVP4G. They are both on Google Code and both have extensive user collaboration and input. Developing outside of GWT in the standard HTML-CSS-JS arena backbone.js offers a Javascript implementation of MVC. I haven't used it as of yet but from the brief tutorials I have read it appears to be very easy to use.

In a similar vein, Dependency Injection is also a must have. Design your code to interfaces and inject interfaces at runtime. This is achievable in GWT using Google GIN on the client and Google GUICE on the server. However my current overwhelming suggestion on the server is the Spring framework. If you are writing Java server code and not using Spring, you are probably writing lots of boilerplace bullshit. Stop it now!. My server side framework knowledge is limited so would love to hear from other developers on alternatives, but from what I have seen this is well adopted, supported and promoted in the media and job adverts. Spring is about more than Dependency Injection but this is at the core of the framework. If you want to develop modular, testable code then you need to use DI.

Using the Facebook web site as an example lets look at how you might construct this from scratch. Some GWT developers will suggest that the whole site should be built in GWT. I disagree but more on that later. However I believe that you will have a more flexible and productive if you develop the complex parts of your web site in GWT and embed them into the website. So when looking at your newsfeed the complex box that controls updating your status etc might be a small GWT application but it is embedded in an AJAX-controlled feed panel table. The reason I think this? Unless your whole team consists of ninja, ex-Google GWT developers that worked on the ad-sense or ad-words interface, then you are going to experience delays in your project as you migrate your developers to a new way or working. By concentrating complexity in small manageable chunks you reduce your exposure to delays in your project.

Single Sign On to Google Apps Marketplace with a Grails application

2011-11-01T09:57:00.000-07:00

Hey, have you tried Grails? If you love Java and love Spring, you are going to adore Groovy on Grails (www.grails.org). Last week I decided to try out Groovy on Grails using the excellent free ebook located here: free ebook - yes please. The book took me two days to navigate through and if you have any experience in Ruby on Rails, you are going to love it.

Grails applications are typically called Groovy on Grails. Groovy is the language and Grails is the utility that uses convention over configuration to build easily, web applications. I won't go into too much detail here as the book says it better than I can but it is well worth checking out.

SSO - Google Apps Marketplace

As usual I always try to do something "complicated" in order to test the validity and maturity of any framework. My usual test case is to try Single Sign On with the Google Apps Marketplace. Again I am not going to go into too much details on what that actually means but if you are a Google Apps user and you have installed a third party application it is a way of authenticating the user without having to ask them for their credentials. Since I build apps for the Google Apps Marketplace I have to ensure I can do this otherwise the framework itself won't be a good choice. In addition because I am not an OpenID expert and prefer to stand on the shoulders of giants, the ease at which this can be implemented and understood is very important to me.

Since Groovy is a superset and dynamic language and can basically use Java and Java dependencies and since I had already built a SSO solution in a Java-GWT application for www.contactpa.com, I figured this should be fairly simple. On the whole it was my biggest problem was understanding how Dependency Injection works with Grails / Groovy and how to include dependencies in my project.

All code is available here on this github repository.

What did I learn?

Here are the pitfalls and problems I overcame whilst building this project:

Dependencies: I love/hate Maven, I have enough power to know how to do something and resolve issues but not a complete mastery, I am a perfectionist, to really understand. Anyhow I recognise the power of Maven and love it otherwise. So my first question was how to include dependencies. Now I tried messing around with the project by mavenizing but this left me with a whole host of other issues which I couldn't understand. Mainly due to my lack of experience in Grails. So I decided to use the standard approach. On conf/BuildConfig.groovy there are several sections to add dependencies. Anyone with maven experience will understand this coding convention:

    dependencies {
        // specify dependencies here under either 'build', 'compile', 'runtime', 'test' or 'provided' scopes eg.

        // runtime 'mysql:mysql-connector-java:5.1.13'
  
  runtime 'mysql:mysql-connector-java:5.1.13'
  compile group:'org.openid4java', name:'openid4java-consumer', version:'0.9.6'
  compile group:'com.google', name:'step2-common', version:'1-SNAPSHOT'
  compile group:'com.google', name:'step2-consumer', version:'1-SNAPSHOT'
  compile group:'com.google.inject', name:'guice', version:'3.0'
  compile group:'javax.servlet', name:'jstl', version:'1.2'
  compile group:'org.apache.httpcomponents', name:'httpclient', version:'4.1'
  compile (group:'org.openxri', name:'openxri-client', version:'1.2.1') { excludes([ group: 'org.slf4j', name: 'slf4j-jcl']) }
  compile group:'org.jdom', name:'jdom', version:'1.1'
  compile group:'com.google.collections', name:'google-collections', version:'1.0'
    }

Mapping the openid: I created a controller called GAMOpenIdController which stands for Google Apps Marketplace OpenID. Using convention this would have mapped to a url:/GAMOpenId/OpenID where for clarity I would prefer it to look like this: url:/openid. This url is the one Google redirects you to to check a user exists and then to authenticate the application. In order to do this I had to add an entry into the UrlMappings.groovy configuration file:

"/openid"(controller:"GAMOpenId", action:"openid")

Adding Java SSO Code: This is one of the reasons Grails is so awesome. You can embed Java code in with your Groovy code. Awesome. So I copied my SSO helper code from my other application. This is largely based on the marketplace sample application located here.

I have modified this code slightly and will include a full copy of the grails application at the end of this article.

Adding the Controller: This was so easy. See the code at the end.

Adding the service: Services in Grails control the business logic so I added all the servlet code from the marketplace application in here, but modified for Groovy. See file contactpa.GoogleOpenIdAuthService.groovy. This then called the Java SSO Code listed above. I didn't really have a problem here but the final stage of authentication was failing. I fixed this in the method getReceivingUrl(). It turns out when the server makes a call to another server, when the request is returned this is routed to a URL of the format: url:/grails/GAMOpenId/openid.dispatch whereas for the receivingURL to be authenticated correctly it should read url:/openid.

Don't edit applicationContext.xml: One trap, coming from a Spring background was that I needed to add some DI Beans in my Spring configuration for the Java SSO stuff above. Instead of following Grails convention I decided to edit the applicationContext.xml, which you would ordinaarily do in a standard Spring app. However this gave me a whole host of unusual errors until I read that beans should be configured in a file called resources.xml. So in conf/spring/resources.xml I added my beans:


<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

 xmlns:util="http://www.springframework.org/schema/util" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

 xmlns:context="http://www.springframework.org/schema/context"

 xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:task="http://www.springframework.org/schema/task"

 xmlns:p="http://www.springframework.org/schema/p"



 xsi:schemaLocation="

  http://www.springframework.org/schema/beans  http://www.springframework.org/schema/beans/spring-beans-3.0.xsd

  http://www.springframework.org/schema/util   http://www.springframework.org/schema/util/spring-util-3.0.xsd

  http://www.springframework.org/schema/context  http://www.springframework.org/schema/context/spring-context-3.0.xsd

  http://www.springframework.org/schema/mvc   http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd

  http://www.springframework.org/schema/task   http://www.springframework.org/schema/task/spring-task-3.0.xsd">



 <bean name="consumerHelperFactory" class="contactpa.sso.ConsumerFactory" />

 

 <bean name="consumerHelper" class="com.google.step2.ConsumerHelper" factory-method="getConsumerHelper"

  factory-bean="consumerHelperFactory" /> 

 

 <bean name="httpFetcher" class="com.google.step2.http.DefaultHttpFetcher" />

 

 <bean name="googleHostedHostMetaFetcher"

  class="contactpa.sso.GoogleHostedHostMetaFetcher">

  <constructor-arg index="0" ref="httpFetcher" />

 </bean>

</beans>

Summary

This has turned to be a bit of a mind dump as I navigate a new area in Java development, for me anyhow. Grails is a great natural progression for Java developers looking to get into dynamic programming and using a framework for convention over configuration.

I have open sourced this project and it is available at git hub to analyse and comment on:

https://github.com/thinkjones/SSO-with-Google-Apps-Marketplace-with-Grails

Hey fools I am on twitter - @gwtsushi

2011-10-26T11:03:00.000-07:00

With reference to the title of this article: After recently completing the Steve Jobs' biography I am convinced that the best way to succeed is to be a brutally honest ass hole. It won't last long, films and books tend to affect me. Anyway readers I am trying to spruce up my twitter feed and I need three things:

1. A good logo.
2. Brilliant followers
3. Good things to follow.

Feel free to help, suggest or get in contact: @gwtsushi .

Spring Roo 1.2.0 with GWT and Google App Engine

2011-09-06T08:12:00.000-07:00

I was first introduced to Spring Roo at Google IO 2010 and I was amazed with the product, it allowed a developer to prototype an application very quickly, building everything from the server, domain, and GWT client. It looked awesome.

When I got home I realised that we were shown a fixed demo in that many of the features didn't really work when building on Google App Engine and Google Web Toolkit. Not a problem as all developers know we are used to living on the cutting alpha-beta edge of software where great new features come with one huge caveat, they occasionally don't work.

That was then and this is now. Like Sushi which I try every 6 months just to confirm that I still am not a huge fan, it doesn't taste of anything right?, I try the latest version of Spring Roo.

The Upgrade Path
Let me just say that I love SpringSource they provide a lot of excellent tools for the Java developer and the Spring Roo documentation is no exception. The upgrade path is very easy, unpack the latest Spring Roo to a directory of your choosing, amend your $ROO_HOME variable in .profile (Mac OSx) and then re-establish the symbolic link to the roo command line. (sudo ln -s $ROO_HOME/bin/roo.sh /usr/bin/roo)

Done and done!

The Bleeding Edge
So I tried Spring Roo 1.1.5 and it was giving me lots of errors with trying a GWT-GAE project. It seemed as equally unreliable as I had tried with previous versions. Let me just add if you are using a standard database such as MySQL or any of the other persistence options, I believe Spring Roo works just fine. The problems I usually run into are related to the peculiarities of Google App Engine and how Roo handles those.

Since most of my current projects are currently in the GAE-GWT sphere and Roo advertises that it is suppose to work in this area, I decided to upgrade to the very latest Spring Roo, so I delved into the nightly builds and installed (1.2.0.BUILD-SNAPSHOT [rev 176e407]).

Go for 1.2.0 Its Much Better
After building a couple of projects with 1.2.0 I can honestly say this is the best version yet by far. Why? Well it appears to work this time for GWT-GAE projects. Most of my personal work is done on Google App Engine. This might change as I am not really liking the new billing restrictions but we will see how those actually plan out when implemented.

I typically build small projects that utilise some sort of reference between domain objects and then build a GWT project and then test it to see if it actually works. I will deal with deployment in a different post. What is great about Roo is that you can amend say the domain objects and the auto UI will get updated automatically. Simply add the line : private String userName; : to your domain object, boot up Roo and it auto creates the UI amendments needed. Pretty stunning. I haven't yet got to work out how you prevent it from doing this should you want to improve the UI, but I am sure that will come soon.

The project I have built it is that for a taxi company to take bookings. It includes three domain objects Contact, Booking and Journey. A booking can have one or more contacts, and one ore more journeys.

A Spring Roo GAE GWT project that works
Here is the contents of my Roo file, hopefully this will help you work with your project.

project com.prestige.booking

persistence setup --provider DATANUCLEUS --database GOOGLE_APP_ENGINE --applicationId PrestigeBooking

enum type --class ~.shared.domain.ContactType
enum constant --name Booking
enum constant --name Billing
enum constant --name Passenger

entity --class ~.shared.domain.Contact  --testAutomatically 
field string --fieldName fullName --notNull
field string --fieldName email
field string --fieldName phoneNumber
field enum --fieldName contactType --type ~.shared.domain.ContactType

entity --class ~.shared.domain.Booking --testAutomatically 
field reference --type ~.shared.domain.Contact passenger

entity --class com.prestige.booking.shared.domain.Journey --testAutomatically 
field date --fieldName journeyDate --type java.util.Date 
field string --fieldName startAddress 
field string --fieldName endAddress
field string --fieldName startTime 
field reference --fieldName booking --type com.prestige.booking.shared.domain.Booking 

loggin setup --level INFO

web gwt setup

Next Steps
If you have used Roo or have done some interesting things with a Roo project please get in contact. I have yet to explore the AddOns or detailed more information on the workflow in a Roo project that goes from prototyping to real world application. Get in contact and lets document some Best Practices for this awesome product.

Including external dependencies in your Maven GWT project

2011-09-02T07:43:00.000-07:00

There are many variations on this problem but lets relate it to a concrete example. Say perhaps you have a series of domain objects that exist in a dependency jar, but you want to be able to serialize them and send them to the GWT client. How do you serialize an object that doesn't already exist in your core GWT project?

There are several steps required so lets take them in a logical order.

Step 1 : Ensure your objects are serializable
Two things required here:

Ensure your objects are implementing serializable.
Ensure you have at least a no-argument private constructor.

If you don't do these things your objects cannot be serialized and sent to the client.

Step 2 : Add a GWT Module XML File

In order to indicate to the GWT Compiler that this dependency is a GWT Compilable you need to tell it so. Therefore you will need to add the <ModuleName>.gwt.xml file in the /src/main/resources folder of the external dependency.


<?xml version="1.0" encoding="UTF-8"?>

<module rename-to="DependencyApi">



  <inherits name="com.google.gwt.user.User"/>

  <source path="domainobjects" />



</module>

In the above example "domainobjects" is the root package that you want serialized. Similar to how a lot of GWT projects are constructed where you see a client and shared entry.

Step 3 : Export the dependency source

In order for the GWT-Compiler to compile to javascript it needs access to the source files, therefore as part of the dependencies build process you need to tell it to export the source. An entry similar to the one below in your pom file should do it.





<build>

		<plugins>

			<plugin>

				<groupId>org.apache.maven.plugins</groupId>

				<artifactId>maven-source-plugin</artifactId>

				<version>2.1.2</version>

				<executions>

					<execution>

						<id>attach-sources</id>

						<goals>

							<goal>jar</goal>

						</goals>

					</execution>

				</executions>

			</plugin>

		</plugins>

	</build>

Step 4 : Tell the GWT Compiler to add this dependency to the GWT Compile process

In the main GWT Project's pom file you need to tell it to now use this dependency and combine its source into the compilation process. This is achieved using the GWT-Maven-Plugin's configuration section.





<configuration>

        	<compileSourcesArtifacts>

          		<artifact><group id>:<artifactid></artifact>

        	</compileSourcesArtifacts>


</configuration>

Step 5: Include reference in the main Web Application Module.gwt.xml

Ensure you have a reference to the dependency in your main GWT Application config file.


  <!-- Dependency API -->

  <inherits name='com.acme.com.DependencyApi' />

Summary

Et Voila. That is it complete. A logical but not completely obvious solution to intermediate Maven users like myself. I would love to hear from the community how they might have solved this problem.

Do you need a Java GWT developer?

2011-07-25T17:03:00.000-07:00

This is an open post to anyone that may require a GWT / Java Developer. I am the author of this blog and am currently looking for work either in a telecommute role or based in my hometown of the sunny Seattle, Washington.

I have over 10 years development experience and have worked for a wide variety of institutions large and small. I enjoy working in Agile teams and adopting a test driven methodology. Having said that I am an expert at fitting into any team and have great references.

If you know of anyone that needs a GWT developer, please get in touch.

Regards
Gene

XML to POJO Mapper for GWT using a GDATA Example with Google Contacts (ContactEntry).

2011-05-13T13:37:00.001-07:00

If your like me I dislike cowboy coding. You are hacking away at something to get the job done, but the nagging thought at the back of your head is telling you "You kow you shouldn't be doing this". The best path maybe unavailable because a lack of experience, or perhaps we are unaware of suitable boilerplate-removing framework. We've all been there time is in the essence, deadlines are pressing and your new TPS Reports Engine needs to be delivered yesterday. Well I found myself in such a quandry recently and found a tool which will solve a common problem for many GWT developers. So instead of waffling what actually is the problem?

Imagine an application that communicates with Google Contacts. Server-side you receive a an atom-rss feed representation of a contact in the form of a ContactEntry object. Google kindly provides you with GData POJOs which are already populated with the information you require. On the server this is beautiful, Google has done all the hard work and the POJO is populated with data. If you were using the wonderful Spring MVC you could render the contact information very easily. However you are a profound, if not magical developer that has the GWT Swiss army knife in their toolkit, and you want to send this POJO to the client. In the words of Mr. J. Carrey you reach the Alrighty Then brick wall of stoppage. The ContactEntry POJO is not serializable to the client. Or is it?

One giant caveat is that I maybe encountering a newbie problem and someone may have created an easy way to make GData objects serializable for sending over GWT-RPC, but at present the only way I have found to do it, is manually, i.e. boilerplatery. Create my own ContactEntry objects on the server and populate them. This obviously involves copious amounts of repetition. It can be done this way, and is the way I have done it in the past, before I knew better, but it isn't efficient.

Lets recap: We want a solution to send a GData ContactEntry object to the GWT client that we can use in a POJO, without becoming America's best plumber to create all the additional boilerplate code.

My proposed solution: Send the XML as a String to the client and use a fancy GWT plugin, Piriti, XPath to auto populate a client side POJO. Quick, efficient and maintainable. So how do we do this?

Caveat: If someone has a better way of doing this please let me know. I am all ears. This may not be the best solution and I would love to know how anyone else has tackled this issue.

Step 1: Extract XML
Lets assume you know how to get the ContactEntry from Google using their GData library but now you want to convert that into XML to transport to the GWT Client:

public String getContactEntryXml(ContactEntry entry) {
StringWriter sw = new StringWriter();
String entryXml = "";
try {
XmlWriter xw = new XmlWriter(sw);
entry.generate(xw, contactServiceFactory.getBasicContactsService().getExtensionProfile());
entryXml = sw.toString();
} catch (IOException e) {
e.printStackTrace();
}

return entryXml; // sw.toString();
}

Step 2: Transfer to Client
I am assuming you know how to write GWT applications and communicate back and forther between the server and client. There are man built in libraries to do this, GWT RPC, Request Factory, and may external third party modules; net.customware.gwt.dispatch, GWTP etc.
Step 3: Create POJO
The key here is reaally the library we are going to use. After looking at many examples I am using Piriti's library. It appears to be well used and has good documentation: http://code.google.com/p/piriti/

Piriti (Maori for "bridge") is a JSON and XML mapper for GWT based on annotations and deferred binding. The following code snippets show the basic idea behind Piriti.

So create a POJO and add these lines to the top of your POJO class:

public class ContactEntrySoho {

public static interface ContactEntrySohoReader extends XmlReader { }
public static final ContactEntrySohoReader XML = GWT.create(ContactEntrySohoReader.class);

These lines are used when mapping the POJO members to their XML nodes.
Step 4 : Map atom:title to an instance member
Let's start easy lets map the atom:title entry of the ContactEntry XML. First it is probably worth taking a look a the XML:

<atom:title type='text'>Alan UserA1</atom:title>

Now lets look at how we would map this using XPath in the Pojo:

@Path("atom:title") private String title;

For a more in-depth view of XPath look online for various cheat-sheets and tutorials it is very powerful and very useful.
Step 5 : Load the Pojo
All we need to do now is load the POJO with information to do this see the below:

@Override
public ContactEntrySoho parse(String xml) {
try {

Map<String, String> namespaces = new HashMap<String, String>();
namespaces.put("atom", "http://www.w3.org/2005/Atom");
namespaces.put("gContact", "http://schemas.google.com/contact/2008");
namespaces.put("batch", "http://schemas.google.com/gdata/batch");
namespaces.put("gd", "http://schemas.google.com/g/2005");
Document doc = new XmlParser().parse(xml, namespaces);

//Document doc = new XmlParser().parse(xml, NAMESPACES);
ContactEntrySoho sContactEntry = ContactEntrySoho.XML.read(doc);
return sContactEntry;

} catch (Exception e) {
return null;
}
}

The namespaces tell the parser what the tag mean and correspond to the root note elements of the ContactEntry XML:

<atom:entry xmlns:atom='http://www.w3.org/2005/Atom' 

xmlns:gContact='http://schemas.google.com/contact/2008'  

xmlns:batch='http://schemas.google.com/gdata/batch' 

xmlns:gd='http://schemas.google.com/g/2005'>

Remember those additions we added to the POJO we simply call those (XML.read) to parse the xml Document. Et Voila! You have your own POJO created with hatever components from the XML you require.
Step 6 : A more complex example please sir.
As you can see I have chosen the easiest node to map and as all articles which only go into the most basic of examples infuriate me, I shan't do the same here. Let's take a look at an example where we need to map to another POJO. Take the StructuredPostalAddress component of the ContactEntry class.
The XML in ContactEntry:

<gd:structuredPostalAddress primary='false' rel='http://schemas.google.com/g/2005#home'>
<gd:formattedAddress>6217 Woodlawn Ave N, Seattle, WA. 98103</gd:formattedAddress>
<gd:street>1234 Acme Ave N</gd:street>
<gd:postcode>11111</gd:postcode>
<gd:city>Seattle</gd:city>
<gd:region>WA.</gd:region>
</gd:structuredPostalAddress>

The data in our parent ContactEntrySoho class:

@Path("//gd:structuredPostalAddress") private List<GDStructuredPostalAddress> gdStructuredPostalAddresses;

Wait what is GDStructuredPostalAddress? This is another POJO with the headers defined in Step 3.

public class GDStructuredPostalAddress extends ABaseElement{

public interface GDStructuredPostalAddressXmlReader extends XmlReader<GDStructuredPostalAddress> {}
public static final GDStructuredPostalAddressXmlReader XML = GWT.create(GDStructuredPostalAddressXmlReader.class);

@Path("gd:formattedAddress") private String formattedAddress;
@Path("gd:street") private String street;
@Path("gd:postcode") private String postcode;
@Path("gd:city") private String city;
@Path("gd:region") private String region;

Et Voila! I found when using this that the POJO members sometimes had to be public otherwise they wouldn't populate but this problem was intermittent, so I am unsure whether this is an issue with Piriti's excellent XML->POJO Mapper or my inept code ;).
I would love to hear how other people are doing this as this seems like a good solution but I am sure there are many others.

Excellent GIT Cheat Sheet

2011-03-10T09:09:00.001-08:00

If your like me and fairly new to Git but appreciate its awesomeness. I have just found a great cheat sheet for GIT. Both clear, logical and concise get the sheet here: Your link text here.

This website appears to be a collection of clear cheat sheets so go fill your boots people!

Jumpstart your GWT Development with JappStart

2011-03-07T13:32:00.000-08:00

I am currently experimenting with the JappStart framework, well not really a framework, but a beginner project that integrates many interesting technologies, all of which have been nicely converted and are ready to perform on Google App Engine. It has many features including:

Appstats Support
Google AJAX Library API (jQuery)
Gravatar Integration
JRebel Support
Local Development Console Support (http://localhost:8080/_ah/admin)
Maven Support

CSS/JS minification via the yuicompressor-maven-plugin
Uses the maven-gae-plugin

Remote API/Bulk Loader Support
Sitemesh Integration
Spring 3

JPA support
JSON/AJAX integration (Jackson)
JSR-303 validation
Localization support

Spring Security 3

Authentication
Expression based access control
Fully integrated with the App Engine Datastore and Memcache
Login/create account functionality with e-mail confirmation
Remember Me
Support for hierarchical roles

Static Error Handler Support
Task Queue Support
URL Rewrite Integration

Current versions:

Goole App Engine SDK for Java 1.4.2
jQuery 1.5.0
Maven GAE Plugin 0.8.2
Spring 3.0.5
Spring Security 3.0.5

As you can see it covers a lot of bases so you can get started easily on developing professional Google App Engine applications. I am examining it so I can also integrate GWT and MVP. Stay tuned for a demo project coming soon.

JappStart Home Page: http://code.google.com/p/jappstart/

Google I/O 2011

2011-01-25T14:22:00.000-08:00

Google IO 2011 Site is up and running. If your going and want to hook up please let me know.
Google I/O 2011

Using Gin-Guice With Java Generics (Cell Table/DAO Example)

2011-01-24T20:53:00.000-08:00

Last year was so interesting and I have discovered so many interesting methods, ideas, patterns, and frameworks for developing professional software. A big proportion of this learning curve has been embracing Test-Driven Development and the necessary changes required to the structure of your code. One design pattern is the Dependency-Injection (DI) pattern where an objects dependencies are injected into the constructor. This allows us to clearly see what the dependencies of an object are, and using a framework allows us to inject our implemented classes. Spring offers a DI framework, which I hope to experiment at some point, but for now, and because many of the Google GWT examples use it, I am using Google GIN on the client side GWT projects and Google GUICE on the server.

Explaining Generics is a little more complicated and I defer to someone more experienced. So a quick web search yields this:

"Generics provides a way for you to communicate the type of a collection to the compiler, so that it can be checked. Once the compiler knows the element type of the collection, the compiler can check that you have used the collection consistently and can insert the correct casts on values being taken out of the collection."

Now here comes the tricky part. How do we inject a generic type class using Gin/Guice?

I always like to lead by example so lets talk about the example used here. Imagine you have a base class for all of your tables you are gong to render. However depending on the annotation used where you inject the base table, then that dictates what the type of the generic class used. In addition the annotation decides what ColumnFormatter class is used to render table. So in summary:

1 Base Class SohoTable<T>
Several ColumnFormatter classes depending on table used.

Declaration of SohoTable

public class SohoTable<T extends HasReadId> extends Composite implements
  HasEventBus, HasTableChangedEventHandler {

@Inject
public SohoTable(ColumnFormatter columnFormatter) {

Here the base class shows the generics declaration. Here you can replace HasReadId with any interface your common DAOs implement. For simplicity we just ensure that HasReadId has a method to get the unique Id of the row.

The constructor requires a ColumnFormatter implementation for the DAO object you are creating. This is a little abstract, so hold off your questions until later.

ContactColumnFormatter
let us dig deeper into a real implementation. So we have a table of Contacts which we are going to use the generic base class for therefore we need to create this class and implement the ColumnFormatter.

public class ContactColumnFormatter extends ColumnFormatter {

Create the annotation

@Retention(RetentionPolicy.RUNTIME)
@Target({ ElementType.FIELD, ElementType.PARAMETER })
@BindingAnnotation
public @interface ContactTableAnnot {

}

Ginjector

SohoTable getSohoTableOfContact();

Create the ContactTableProvider

public class ContactTableProvider implements Provider<SohoTable<Contact>>{

 private final Provider<ContactColumnFormatter> providerFormatter;

 @Inject
 public ContactTableProvider(Provider<ContactColumnFormatter> providerFormatter) {
  this.providerFormatter = providerFormatter;
 }

 @Override
 public SohoTable<Contact> get() {
  return new SohoTable<Contact>(providerFormatter.get());
 }

}

Here we inject the correct ColumnFormatter for the Contact table.

Wire up the classes in the ClientModule (AbstractGinModule)

bind(ContactColumnFormatter.class);
bind(ContactTableProvider.class);
bind(new TypeLiteral<SohoTable<? extends HasReadId>>(){}).annotatedWith(ContactTableAnnot.class).toProvider(ContactTableProvider.class);

This is where we where the main action takes place. All the subclasses are wired up. The final line is the cool one. We need to use a TypeLiteral in order to wire up the generic elements. The annotated item shows how to wire up the annotation with the correct provider.

This is all very good but how do I use it?

@UiField(provided = true)
SohoTable<Contact> contactTable;

@Inject
public RolodexView(@ContactTableAnnot SohoTable<? extends HasReadId> contactTable) {
  this.contactTable = (SohoTable<Contact>) contactTable;

A personal review of GWT for 2010

2011-01-10T19:46:00.000-08:00

2010 has been an exciting year and I wanted to thank everyone who commented, got in touch and generally helped out. A big thankyou goes out to the people at GWTP project. Philippe and Christian thanks for all your help in utilising the framework in my example application.

The year started with a change of career. For the past 15 years I have primarily been a Microsoft developer working for various commercial interests in London, Iceland, and now the USA. Currently living in Seattle, the Gaceland for computer programmers, or as we are now known Software Engineers, I decided that it was time to change my career track and learn a proper programming language (let the flame wars begin).

I am now sure whether I particularly dislike Windows, or whether I just needed a change of scenery but the Microsoft programming platform doesn't jive with my liberal view on life. I always wanted to learn an open source language, partly because I am an academic at heart and partly t stick it to the man. So the scene was set, and the only real option was to learn the current professional language de jour, JAVA.

One thing I also failed to mention was my love of Google. Any company which adopts open source as much as they have means they have to be admired in some way. Computer Programming tools are not proprietary systems. They are ideas that should be shared with everyone, in the same way that the cure for Malaria, will one day hopefully. I am not saying that all software built with open source tools should not be commercial far from it. But the ideas and tools we use should be at their core.

So I was learning Java and has a long term ASP.Net developer was looking for something that improved my programming environment. Google App Engine was the first oh wow moment three years ago, where I thought, this takes all the hassle out of programming. Then when I discovered Google Web Toolkit and what that actually means for feature rich internet applications. I thought oh wow oh wow.

So for the past year I have been learning Java with GWT on GAE. I learn best by example and building a contact application was the best way forward. I have a passion for helping small businesses and developing software which is functionally logical. So much software is plain old bad. GWT liberates the developer to programme professionally at all levels in the stack, thus improving and professionalising their daily routine. Google continues to build on this great architecture by partnering with Spring and Roo, to introduce Rapid Application Development tools. Plus they continue to enhance and develop the library. Speed Tracer looks awesome, performance tuning built in on the server and client side. Need I say more. Google needs to be congratulated for this piece of kit because it has improved my development daily routine no end.

Where am I now? Well on the basis of my skills developed during the past year I have landed a job with a startup, doing yes you guessed it... Java-GWT development. 2011 continues to be exciting. I also transferred to a Mac which I have been wanting to do for ages, and with the launch of this new career it will help me do so. Here is to 2011.

Continue to read, continue to ask questions, and lets have a great 2011.

Your link text here.

CellTable Examples

2010-12-12T20:08:00.001-08:00

Over the last few weeks I thought it was high time to experiment with the new Data Presentation widgets released in GWT version 2.1. It has been an interesting experience to say the least and as my life motto goes it is a journey not the destination. Anyhow I came across a particularly good collection of CellTable examples that I wanted to share. See this link for details:
http://stackoverflow.com/questions/2891803/how-to-use-gwt-2-1-data-presentation-widgets

Conditional Logic and GUICE

2010-11-11T09:57:00.001-08:00

For Contact Personal Assistant I am using GUICE. After being introduced to Dependency Injection, or Inversion of Control, I appreciate its awesomeness, if I don’t fully understand it. One of my main issues with fully adopting this paradigm shift, has been the usual barrage of questions a developer asks and answers in their own head in a daily basis, and the main one for me so far was.

How do I implement a conditional logic for an implementation instance based on runtime parameters?

Sounds a little abstract, I know. So lets try an example. Imagine you have a control which renders some information from a IDataServer interface but at runtime you have several Implementations of the IDataServer interface to chose from.

I have thought of many ways this could be achieved, but have known, them all to be hacky, my implementation based on how I currently understand GUICE, and trying to fit it into what I require. As they say with great power comes great responsibility, and I want to use this framework correctly, not in hacked way that I can get it to work given my current level of knowledge.

It turns out the solution is as simple as it is beautiful:

USE MAP BINDER!

Luckily the answer is discussed on this thread which I replicate here:

   1:  public class CalculatorModule extends AbstractModule {

   2:     protected void configure() {

   3:       MapBinder<Types, Class<ICalculator>> mapbinder

   4:           = MapBinder.newMapBinder(binder(), Types.class,

   5:  ICalculator.class);

   6:       mapbinder.addBinding(Types.A).toInstance(ACalculator.class);

   7:       mapbinder.addBinding(Types.B).toInstance(BCalculator.class);

   8:       mapbinder.addBinding(Types.C).toInstance(CCalculator.class);

   9:     }

  10:   }

  11:  @Singleton

  12:  public class CalculatorFactory {

  13:      private final Injector injector;

  14:      private final Map<Types, Class<Calculator>> calculators;

  15:     @Inject

  16:     public CalculatorFactory(Injector injector, Map<Types,

  17:  Class<Calculator>> calculators) {

  18:          this.injector = injector;

  19:          this.calculators = calculators;

  20:      }

  21:      public ICalculator create(UserGroup group) {

  22:           injector.getInstance(calculators.get(group.getType));

  23:      }

  24:  }

This example uses a calculator factory to allow the user to select whether they want implementation A, B or C. Simply inject the calculator factory into whichever class requires it.

Beautiful!

Code Formatting Live Writer Plugins.

2010-11-03T16:40:00.001-07:00

That’s It! I have had enough of my code snippets going awry when posting to the Blogger platform. I typically use Live Writer to blog so I am now going to review the code syntax formatters and declare a winner. Well my preferred formatter anyway. The Live Writer plugins are:

Code Snippet
Insert Code
Source Code
Source Code (another one)
WintyCodeArea

Lets take a look at how they format the same bit of code.

Code Snippet

   1: public class DynaTable implements EntryPoint {   2:     3:   public void onModuleLoad() {   4:     // Find the slot for the calendar widget.   5:     //   6:     RootPanel slot = RootPanel.get("calendar");   7:     if (slot != null) {   8:       SchoolCalendarWidget calendar = new SchoolCalendarWidget(15);   9:       slot.add(calendar);  10:    11:       // Find the slot for the days filter widget.  12:       //  13:       slot = RootPanel.get("days");  14:       if (slot != null) {  15:         DayFilterWidget filter = new DayFilterWidget(calendar);  16:         slot.add(filter);  17:       }  18:     }  19:   }  20: }

Insert Code

   1:  public class DynaTable implements EntryPoint {

2:

   3:    public void onModuleLoad() {

   4:      // Find the slot for the calendar widget.

   5:      //

   6:      RootPanel slot = RootPanel.get("calendar");

   7:      if (slot != null) {

   8:        SchoolCalendarWidget calendar = new SchoolCalendarWidget(15);

   9:        slot.add(calendar);

10:

  11:        // Find the slot for the days filter widget.

  12:        //

  13:        slot = RootPanel.get("days");

  14:        if (slot != null) {

  15:          DayFilterWidget filter = new DayFilterWidget(calendar);

  16:          slot.add(filter);

  17:        }

  18:      }

  19:    }

  20:  }

Source Code (1)

public class DynaTable implements EntryPoint {

  public void onModuleLoad() {
    // Find the slot for the calendar widget.
    //
    RootPanel slot = RootPanel.get("calendar");
    if (slot != null) {
      SchoolCalendarWidget calendar = new SchoolCalendarWidget(15);
      slot.add(calendar);

      // Find the slot for the days filter widget.
      //
      slot = RootPanel.get("days");
      if (slot != null) {
        DayFilterWidget filter = new DayFilterWidget(calendar);
        slot.add(filter);
      }
    }
  }
}

Source Code (2)

public class DynaTable implements EntryPoint {
  public void onModuleLoad() {
    // Find the slot for the calendar widget.
    //
    RootPanel slot = RootPanel.get("calendar");
    if (slot != null) {
      SchoolCalendarWidget calendar = new SchoolCalendarWidget(15);
      slot.add(calendar);
      // Find the slot for the days filter widget.
      //
      slot = RootPanel.get("days");
      if (slot != null) {
        DayFilterWidget filter = new DayFilterWidget(calendar);
        slot.add(filter);
      }
    }
  }
}

Winty Code Area

Didn’t work.

Conclusions

Based on the visuals above and interface in Windows Live Writer. My nomination goes to…. drum roll please… Code Snippet.

Contact Personal Assistant Launches

2010-10-06T14:59:00.000-07:00

Well I have some exciting news... Contact Personal Assistant (www.contactpa.com) formerly known as sohocrm.appspot.com, has been accepted in the Google Apps Marketplace. Since we all like an image here it is. It can also be viewed here.

This is a great milestone for the product, it has been a few months in development as I have learned a whole host of new technologies and frameworks. It has been tough, but interesting, and that's what I love about software engineering, its constant puzzle solving nature. Feel free to install Contact Personal Assistant to your Google Apps domain, or use it freely as a standalone product.

Creating a TabPanel in UIBinder Declarative Layout View

2010-09-30T08:32:00.000-07:00

Some posts just need to be short and sweet. Looking to create a TabPanel in UiBinder for GWT? Check out this article and code below:

    <g:TabLayoutPanel addStyleNames="{style.tabPanelExample1}"
                        ui:field="tabPanel" barUnit="PX" barHeight="60" width="375px"
                        height="150px">
                        <g:tab>
                            <g:header>
                                UiBinder Tab 1
            </g:header>
                            <g:HTML>
                                Hello tab 1
                                <br />
                                Good bye!
                            </g:HTML>
                        </g:tab>
                        <g:tab>
                            <g:header>
                                UiBinder Tab 2
            </g:header>
                            <g:HTML>
                                <h2>Hello tab 2</h2>
                            </g:HTML>
                        </g:tab>
                        <g:tab>
                            <g:header>
                                UiBinder Tab 3
            </g:header>
                            <g:HTML>
                                <strong>
                                    <i>
                                        <u>Hello tab number 3</u>
                                    </i>
                                </strong>
                            </g:HTML>
                        </g:tab>
                    </g:TabLayoutPanel>

Using OpenID on GWT with Google App Engine

2010-09-10T05:11:00.000-07:00

OpenID (TM) is the way forward for providing secure and intuitive access to your website. The increasing proliferation of websites offering multiple methods for authentication is indicative this is a trend is here to stay. Websites commonly contain access via Google Accounts, Facebook, Twitter, MyOpenId, and many other providers. Not all of these use the OpenID standard but the term is likely to spread given its open source status. Using OpenID with GWT on Google App Engine is fairly easy to implement, but has its perils which you should be aware of. In this article we discuss the code and methods used to build a solution using the dyuproject framework.

Why not use the new developmental federated login provided by Google App Engine?

This article documents very clearly the process to implement OpenID using the GAE SDK.

Using Federated Authentication via OpenID in Google App Engine - Link

I tried this method and it works very well and is easy to implement. However from using it I had two issues.

Firstly, and probably the most importantly, is the behavior in debug mode. When logging in the user is directed to the GAE SDK development server login page, rather than the OpenID provider selected when authenticating. This makes debugging of your authentication system very difficult, especially when you have to upload a new version of the application with increased logging, if you have a problem with authentication.

Secondly, if the OpenID authorization URL is incorrect, the application just sits on a blank page after trying to redirect to the authorization URL. Now this maybe a functionality of the OpenID protocol rather than its implementation here, but the user experience was strange so I decided to abandon it.

This is an experimental feature at present so I am far from saying do not use it. What I am saying is that if you prefer to have a similar authentication experience in debug as in live, then use the suggestions given further down.

User Interface

Many of the articles written here are concerned with the steps taken to produce the website SohoCRM, a small business, Google Apps focussed CRM system - http://sohocrm.appspot.com. The screen shot below shows the initial implementation of OpenID. I say initial because there are plans to improve its look, but at present in its draft form it looks like this:

As you can see the OpenID providers are split into two groups. Those which require a username and those that do not. The purpose for the username relates to the construction of the OpenID URL.

The OpenID URL is a value passed to the OpenID library duyproject which handles how the application redirects to the authentication page of the OpenID provider. The RelyingParty is the application requiring access, an industry standard term worth remembering. The URL hierarchy and construction of the login images is rendered from a HashMap containing all the OpenID providers the application currently supports:

//Doesn't require username first

insertProvider("Google","https://www.google.com/accounts/o8/id","/openid2/nascar/large/google.png");

insertProvider("Yahoo","https://me.yahoo.com","/openid2/nascar/large/yahoo.png");

insertProvider("YahooJapan","https://me.yahoo.co.jp","/openid2/nascar/large/yahoo-jp.png");

insertProvider("MyId","https://myid.net/","/openid2/nascar/large/myidnet.png");

insertProvider("Mixi","https://mixi.jp","/openid2/nascar/large/mixi_jp.png");

//Does require username

insertProvider("MyOpenId","http://username.myopenid.com/","/openid2/nascar/large/myopenid.png");

insertProvider("Flickr","http://www.flickr.com/","/openid2/nascar/large/flickr.png");

insertProvider("AOL","http://openid.aol.com/username","/openid2/nascar/large/aol.png");

insertProvider("Blogger","http://username.blogspot.com/","/openid2/nascar/large/blogger.png");

insertProvider("LiveJournal","http://username.livejournal.com/","/openid2/nascar/large/livejournal.png");

insertProvider("Verisign","http://username.pip.verisignlabs.com/","/openid2/nascar/large/verisign.png");

insertProvider("ClaimId","http://claimid.com/username","/openid2/nascar/large/claimid.png");

insertProvider("Wordpress","http://username.wordpress.com","/openid2/nascar/large/wordpress.png");

On rendering, if the login widget finds the keyword username in the URL component it renders the login image button to the bottom flow panel. This is the one that requires the user to enter a username first.

The second parameter for the inserProvider function is the base URL needed to access the OpenID authentication screen. This URL is passed to the duyproject by redirecting the screen to a URL of the type:

"/openid2/login?openid_identifier={providerUrl}"

Authentication Servlet

In GWT we have setup this URL pattern to map to our OpenID Authentication servlet. In this application we have used GUICE to setup our mappings. In our DispatchServletModule we have configured the mapping as below:

serve("/openid2/login").with(OpenIdServlet.class);

Which then maps to an object of this type:

public class OpenIdServlet extends HttpServlet {

The Authentication Process

This took a while because I was new to the OpenID protocol. I had the typical programmers dilema where you know you are tackling a problem someone else has probably completed and published online but just need the quick heads up on how to implement. I already has some code from GWTP Puzzlebazar's project so I quickly adapted that for my purposes.

The doGet method points to the doPost in this servlet so the code below is where this will be found.

Step 1: Establish Parameters and Logout

String openIdIdentifier = request.getParameter("openid_identifier");

if(openIdIdentifier!=null){

this.userDAO.get().logoutSessionUser();

}

The openid_identifier is an important parameter in the URL so you must make sure that this is passed. The duyproject expects this parameter so however you construct your redirect to the servlet it is expecting this in the querystring.

Step 2: Create RelyingParty instance and attempt to authorization

RelyingParty relyingParty = RelyingParty.getInstance();

try {

OpenIdUser openIdUser = relyingParty.discover(request);

Here an instance of the relying party is created which attempts to authorize the URL passed in. It checks whether the user has access to this URL and populates the openIdUser with information related to its status.

After verifying the user the application then checks on how to proceed. The duyproject covers this process very well and the javadoc here is an excellent resource on how to continue: link. The example code given is shown below:

OpenIdUser user = _relyingParty.discover(request);

if(user==null)

{

if(RelyingParty.isAuthResponse(request))

{

// authentication timeout

response.sendRedirect(request.getRequestURI());

}

else

{

// set error msg if the openid_identifier is not resolved.

if(request.getParameter(_relyingParty.getIdentifierParameter())!=null)

request.setAttribute(OpenIdServletFilter.ERROR_MSG_ATTR, errorMsg);

// new user

request.getRequestDispatcher("/login.jsp").forward(request, response);

}

return;

}

if(user.isAuthenticated())

{

// user already authenticated

request.getRequestDispatcher("/home.jsp").forward(request, response);

return;

}

if(user.isAssociated() && RelyingParty.isAuthResponse(request))

{

// verify authentication

if(_relyingParty.verifyAuth(user, request, response))

{

// authenticated

// redirect to home to remove the query params instead of doing:

// request.setAttribute("user", user); request.getRequestDispatcher("/home.jsp").forward(request, response);

response.sendRedirect(request.getContextPath() + "/home/");

}

else

{

// failed verification

request.getRequestDispatcher("/login.jsp").forward(request, response);

}

return;

}

StringBuffer url = request.getRequestURL();

String trustRoot = url.substring(0, url.indexOf("/", 9));

String realm = url.substring(0, url.lastIndexOf("/"));

String returnTo = url.toString();

if(_relyingParty.associateAndAuthenticate(user, request, response, trustRoot, realm, returnTo))

{

// successful association

return;

}

As you can see this handles each particular outcome of the interaction with the OpenID provider. Providing you have supplied this example code with a good url, then the duyproject handles all the redirection and processing required to authenticate the user. The only thing you need to do is implement above the code required to register that a user has authenticated in your application, i.e. logging in DB and creating a session variable. This would occur after the line that reads:

if (openIdUser.isAssociated() && RelyingParty.isAuthResponse(request)) {

Attribute Exchange

The OpenIDUser object contains all the methods needed to extract any AttributeExchange information such as the Country, Language and any other attributes that are part of the AttributeExchange specification.

Do not use the email address as the unique ID!!!!!

I cannot stress this enough because this issue may arrive as you transfer from one authentication system to another. For example say you have a current auth system which requires the user to login via their email address and a password. Fine so far. Now in order to keep your current data model you assume that the email address returned from the OpenID provider can be used as the key again, because you have incorrectly assumed that the OpenID provider checks to make sure that the user who registers with an email address has been verified.

STOP!!!

You cannot rely on the email address returned from the OpenID Provider because some providers allow you to specify what email address you want to return to the RelyingParty website. Thereby changing this to another value of an account you may want access may give you a backdoor access to someones account.

The only uniqueID you can rely on from the OpenID provider is what is known as the ClaimedID (openIdUser.getClaimedId()). This value is the authentication URL the user is allowed access to. For example my AOL ClaimedId is: http://openid.aol.com/thinkjones

Summary

This took me a while to complete, the code not the article, because I was too caught up in thinking that I needed to write absolutely everything of the OpenID process. Relying on the duyproject was a good move as it allowed me to just slot in my current authentication process at the appropriate point. All I needed to do was create a good URL to pass to this component.

When testing the project with the different OpenID providers I needed to test each URL individually because each OID Provider had slightly different requirements in their URL syntax. Hopefully the fairly comprehensive list above will help you implement many solutions into your current web work.

I apologize if this article is a bit vague or badly written. I have jet lag at the moment and wanted to get this article out as quickly as possible. As usual leave questions in the comments.

Four easy steps to implementing a ClickHandler in a composite control.

2010-08-17T17:35:00.000-07:00

After developing a composite control a click handler interface (ClickHandler) is required to respond to user events. A typically example might be the type of thing shown as a row in your Gmail email list. You have developed a control which nicely lays out all the relevant information in the row, but the row as a whole should fire a click event when clicked.

This kind of implementation is easy, but it can get confusing especially if you are new (like me) to this kind of expert level programming. So for my own benefit and yours this is how it is implemented.

Step 1 : Implement HasClickHandlers Interface

In the child composite control first implement the HasClickHandlers interface:

public class ApplicationMenuLink extends Composite implements HasClickHandlers {

Step 2 : Add the unimplemented methods

@Override

public HandlerRegistration addClickHandler(ClickHandler handler) {

return addHandler(handler, ClickEvent.getType());

}

Step 3 : Fire the event when needed

@UiHandler("hyperlinkControlInComposite")

void doClick(ClickEvent e){

this.fireEvent(e);

}

Step 4 : Implement handler in the parent control

instanceOfChildComposite.addClickHandler(new ClickHandler() {

@Override

public void onClick(ClickEvent event) {

//Do Stuff

}

}));

or using the UiHandler convention:

@UiHandler("instanceOfChildComposite")

void doClick(ClickEvent e){

//Do Stuff

}

Conclusion

Et Voila! Thats all there is to it. As usual the path to this solution is a lot more tortuous than it would appear, but hopefully now I have it here it will be simpler for me and all us GWT developers.

Integrating GWT applications into the Google Apps Marketplace

2010-08-10T16:47:00.000-07:00

This article examines how easy it is to integrate a GWT application into the Google Apps Marketplace. Application stores are becoming the de-facto method to distribute software. It is a clean, secure and hassle free method of introducing users to a large software base. In the near future Google will be releasing an application store for chrome to distribute software, and it currently offers a business software alternative for its Google Apps users. This article takes a look at how easy it is to change an existing GWT application for integration into the Google Apps Marketplace.

Google Apps is the term used for a suite of applications that run under your own domain name. You get the Mail, Calendar, Documents, Sites and overall Google experience but it is configured to run on your own domain. A recent extension to this is the Google Apps Marketplace which allows anyone with a useful application, to integrate into the Google authentication and authorization system. Thus allowing the user a seamless experience through their current Google applications and any third-party applications configured to run on this system. The power of this feature cannot be underestimated.

Opening up the Google Apps world to all application developers provides developers with a easy to integrate revenue stream and customer marketplace. Whilst providing the end users with an easy to use configure application store for Google Apps. This is a win, win situation. No whilst it is easy to see how this will be a benefit for web application developers it might be interesting to see how easy it is in practice to integrate your application into this system.

Background Reading

You didn't think I was going to do everything did you? I would seriously recommend reading this article first to get an overview of what we are trying to do here. This gives an overview from a development perspective of what we are trying to achieve.

Writing your First Marketplace App using Java: http://code.google.com/googleapps/marketplace/tutorial_java.html

In addition this page gives a rough overview of the whole process including development, but also submission to the Google Apps Marketplace:
http://developer.googleapps.com/marketplace

On your marks...

The application I am discussing is, my often touted, Simple CRM application, Soho CRM (http://sohocrm.appspot.com). It is a small business focussed CRM system aimed at the small business market. The application is developed in GWT, using Java, and is deployed to Google App Engine.

As you can see from the picture the application looks like a Google application with the familiar toolbar users come to expect. What follows is the process involved in converting this to fit into this architecture.

Step 1 : Create Vendor Profile

In order to get anywhere in this system you first need to become a vendor. The overview page here, http://developer.googleapps.com/marketplace/getting-started, explains how to do that in the section "Becoming a Vendor".

Step 2 : Download Code

Google provides us with an example application which you can deploy to Google App Engine and integrate into your own vendor profile in the Google Apps Marketplace. This code is located here:

Google Apps Marketplace Hello World Java

Step 3 : Integrate code
If you understand theory then the developer resource above would have been good enough for you. I prefer real code so I can create my own internal models of what is happening during this process. To get started I copied all the code in the directory:

\helloworld-java\src\main\java\com\google\code\samples\apps\marketplace

to a marketplace pacakge in my own GWT code

~\server\marketplace\

I also flattened the package all files required existed in this package and it wasn't distributed amongst several packages like it is in the example.

I also renamed the OpenIdServlet class to GoogleAppsOpenIdServlet because regular open id users can already log into the application and I didn't want the classes to become confusing.

GuiceModule.java: This file is in the downloaded code but not in the integration above, because this application already had GUICE configured. I simply took the code from the HW example and integrated it with my own.

ConsumerFactory.java: This file was excluded because again it wasn't required.

A final step in this process is integrating all the required libraries. The downloaded code comes with a library folder to make this easier.

Step 4 : Map Servlets
Examination of the web.xml file reveals the servlets you need to map. These can either be setup here, or if you have a code alternative set them up there. You will need to record what URL is used as the OpenID authenticator as this is sent to the Google Apps Marketplace when you install your application.

Step 5 : Create the manifest file
By this stage your application will be ready for installing. You just now need to configure Google Apps Marketplace to accept your application. The first step in this process is creating the manifest.xml file. This file is a configuration file which tells Google Apps the name and description of your application; how to authenticate; and what Google Services the application should be given access to. The manifest is quite an extensive piece of kit so the full explanation on the file is listed here:

Creating the manifest: http://code.google.com/googleapps/marketplace/manifest.html

Step 6 : Getting Excited - We are almost there!!!
The next stage is to add the application to the Google Apps Marketplace. The vendor profile was created earlier, so after navigating to that URL : https://www.google.com/enterprise/marketplace/viewVendorProfile
You should now be able to see a button which says "Create new listing". Click that button and fill in your application details.

Make sure you check the button "My product may be directly installed into the Google Apps domain". This then reveals the Manifest box in which you will place the manifest.xml code to set the application up.

After completing all the sections click "Save and Preview". On the screen that follows do not publish your application as you will first need to test it.

Step 7 : Grab oAuth Key and Secret
Back on the application listing page of your vendor profile your application should now be listed. If the stages above were completed correctly then a new link "View OAuth Consumer Key" will show under the application. Click this and record this information as you will need it to authenticate your application.

Step 8 : Add oAuthKey and Secret into web.xml.
If you are following the Hello World example then you will need to place the OAuth Key and Secret into the web.xml file. This correctly identifies your application to Google which will then authorise you to view the users OpenId details.

Step 9 : Integrate the user logon process into your application.
In the doPost method of the OpenIdServlet you can see what the application does after authenticating a user. In this section you need to introduce whatever code you need to setup the logged in user. In my code this involved setting the session.user variable to the current user. Then simply redirect the user to the application home page.

Step 9 : Test
If all has gone well then you should be ready to perform two important tests:
1) Installing this application on your domain.
2) Testing the application as an end user.

Installing: Is easy enough. Go to the marketplace home page for your application and click the button "Add It Now". This simply takes you to the domain administrator page for this application and gives you the option of installing the application or not.

Testing: Once installed simply log into your domains mail application and on the right hand side where the more dropdown shows your application should now be visible.

This is where most of my time was spent developing this application. I haven't worked on many OpenID projects so understanding the concepts was a large part of this, but the Hello World example given was very helpful in solving the problems involved. This article, although long, is a cursory look at the steps involved. Any readers wanting help, or more explanation on any of the steps, please let me know and I would be glad to help.

Initial Thoughts on Vaadin : Not so much a GWT complement more of a replacement.

2010-08-03T10:02:00.000-07:00

I have had the intention for a while now to try and comment on the Vaadin framework. The website, plugins and demos exude confidence for this comprehensive toolset. After a commentator on my last post suggested that I try the framework, I took this advice and proceeded through the tutorials.

The address book tutorial is a great introduction to the framework, the web application demonstrated is quite comprehensive and is fairly boiler-plate code free. Check out my finished application here: http://thinktaxi.appspot.com. I, like most developers, dream of the ultimate framework where we can get on with just programming the logic of the application and the boiler place code is handled beautifully and efficiently by the abstraction the framework provides. It is like the search for the Holy Grail, except of course I hope one day that this framework may actually exist.

Vaadin is advertised as being: "Built on GWT-based widgets, Vaadin applications support all Ajax-capable browsers, with no plugins." This is a true statement but after completing the tutorial I feel that this needs further explanation. Vaadin runs completely on the server, using GWT as a container. The integration of GWT and Vaadin appears to be quite separate. An initial peruse around the documentation may lead you to think that Vaadin is a set of GWT-Widgets that can be used to dress up your typical GWT application. This assumption maybe false. I say maybe because I am fully expecting a Vaadin expert to correct my assumption here. Vaadin is almost completely separate to GWT and shouldn't really be considered to be part of it.

So, Vaadin runs on the server, which allows you to write complete Java code, a "benefit" when compared to GWT in which you are allowed to use certain Java libraries in the client code. However the downside is that everything you do in Vaadin involves a trip to the server. This in itself is a crucial point and raises the question. How efficient can Vaadin be if everything requires a round trip? An additional downside is that you are learning a whole new architecture system on top of GWT. Which restricts your future solutions if your companies knowledge base is Vaadin only.

Anyway I am not a hater. Although I am a GWT fanboy so Vaadin lovers prepare to feel the love. What applications might make Vaadin a good solution. Well I think the quick small utility type applications that maybe used on an intranet or for just one company might be the answer. In business, typically the speed of development and deployment is more important than how well your application performs. The function of the application may never reach more than 100 users, so the load on the application will never be high. I was very impressed by the speed and complexity of the application developed through the tutorial and I could see many benefits for RAD development.

In summary Vaadin good for small business development, but it is not a GWT framework contribution and shouldn't be considered as such (If you made that assumption like I did).

The increasing importance of GWT

2010-07-30T09:54:00.001-07:00

Google Web Toolkit is a fantastic piece of kit. As a developer, or as anybody really, when you do a repetitive task for any period of time you become fully aware of the problems associated with it and how to improve them. Microsoft’s take on this problem is to make applications prettier, and more complex, whereas Google and Apple, try to increase complexity utilizing simplicity. My personal opinion is that GWT addresses this by making web application development a lot simpler at every stage of the software lifecycle.

It is clear to any academically minded individual that open source is the best route forward because it takes in the ideas of the people you are trying to encourage to adopt. There is an instant connection and contribution between you and your client base. As the web develops in complexity it is increasingly important that a robust top to bottom professional framework exists to develop complex and layered applications. Developers are increasing excited and frustrated with the multitude of decisions required for any web product. GWT helps with this problem by providing a toolset that addresses many layers in the stack. The proof is also in the proverbial pudding. If you think Google Wave is a good product, then wouldn’t you like to use the same toolset that was used to produce that? Take a look at the popular websites on the web, very few, I am aware are developed using Microsoft technologies, and the ones that are, feel like they have been developed by Microsoft technologies.

The success of the iPhone, iOs and Android platforms is clear. The business model clearly works. At Google IO 2010 the Chrome Applications store was announced which will provide another one stop shop for people to try and buy web applications. With HTML5 on the horizon it is clear these applications are becoming feature rich and their complexity and adoption is likely to increase exponentially. As a result it is essential that the developer be allowed, to use a professional programming language, top to bottom in the software stack. It makes life easier, more robust, and fulfills the need to program professionally. As we move towards the cloud, frameworks such as GWT, will increase in importance as the de-facto choice for cloud based web application programming.

Objectification is not always bad.

2010-07-26T09:09:00.000-07:00

We are like things that make our lives easier, unless the task of completion is the glory unto itself. When it comes to GWT and JDO, a nice layer of abstraction exists already so it is easy to develop a data model and implement it in your system. When GAE is added into the mix, which isn't really a relational database, certain nuances make the implementation just a little more complicated and so any library which helps with this operation is warmly welcomed. The downside is that you are building your application specifically for Google App Engine, rather than any DB which implements JDO.

Luckily, I Love Google. Google I Heart You... And so that is where Objectify steps in. Objectify is a layer which sits on top of your objects to provide easy, get, put, delete and query operations into your Google App Engine database. At this stage I am just promoting and highlighting this functionality but will be soon posting examples of how to use this system.

How to create a custom event handler in GWT

2010-07-16T16:51:00.000-07:00

After struggling for longer than I should have I need to document the process partly for my own benefit and because if I struggled then someone else probably will as well. So what am I documenting.

Scenario:
You have created a custom control Composite and want to implement a custom event for your control. For example in the same way a button has a click event which is handled by the controls that use it.

Technology:
GWT 2.0, Java

Solution Outline:
In this example we are using a paging control as the example. This is a custom control that aims to replicate the kind of functionality as seen in the next, first, prev, last and message functionality when navigating between emails.

Step 1: Create the custom event - PageChangedEvent

The PageChangedEvent will be fired when ever a paging action takes place. For instance if a move next, prev, first or last action is called. The code is pretty self explanatory but for clarity I have separated the code into the boiler-plate section and the code specific to this event.

public class PageChangedEvent extends GwtEvent<PageControlHandler> {

// Boiler plate code required to make your event work correctly in the GWT system

private static final Type<PageControlHandler> TYPE = new Type<PageControlHandler>();

@Override

public com.google.gwt.event.shared.GwtEvent.Type<PageControlHandler> getAssociatedType() {

return TYPE;

}

@Override

protected void dispatch(PageControlHandler handler) {

handler.onPageChanged(this);

}

// Code specific to this custom event

public enum PageChangeType {

first, prev, next, last

}

private final PageChangeType pageChangeType;

public PageControlEvent(PageChangeType pageChangeType) {

this.pageChangeType = pageChangeType;

}

public static Type<PageControlHandler> getType() {

return TYPE;

}

public PageChangeType getPageChangeType(){

return pageChangeType;

}

Step 2 : Advertise that this control has this types of events
In the PageControl which has these kinds of events we need to advertise this fact to the other classes, therefore the control will advertise this by implementing an interface called HasPageChangedHandler:

public class PageControl extends Composite implements ClickHandler, HasPageChangedHandler {

However this interface has yet to exist so we need to create it:

import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.event.shared.HasHandlers;

public interface HasPageChangedHandler extends HasHandlers {

public void addPageControlHandler(PageChangedHandler handler);
}

This invites other parent controls to use this event by registering a PageChangedHandler with this control

Step 4 : Create the PageChangedHandler Interface
The handler interface indicates what type of events, or methods are required when implementing a handler of this type:

import com.google.gwt.event.shared.EventHandler;

public interface PageChangedHandler extends EventHandler{

void onPageChanged(PageChangedEvent event);

}

Step 5 : Implement the methods in the composite control
In Step 2 we implemented an interface, and Step 3&4 we created those interfaces now we need to go back to the PageControl and the unimplemented methods.

@Override
public void addPageChangedHandler(PageChangedHandler handler) {
addHandler(handler, PageChangedEvent.getType());
}

This is an important step. This registers the handler for this type of event. The "addHandler" method is part of the GWT Widget class and is native to GWT. Therefore this method doesn't need to be created.

Step 6 : Wire up the parent control to respond to onPageChangedEvents
There are a myriad of ways of doing this but assuming the parent control has only one page control then I wired it up by implementing the PageChangedHandler onto the main class:

public class MainSearchPresenter extends PresenterImpl<MainSearchPresenter.MyView, MainSearchPresenter.MyProxy>
implements SearchChangedHandler, ContactAddedHandler, ShowSearchResultsHandler, PageChangedHandler {

Which then shows the method that is run when a PageChangedEvent is called:

@Override

public void onPageChanged(PageChangedEvent event) {

if (event.getPageChangeType() == PageChangeType.next) {

getView().setupPager(1l, totalRecords, 20l);

}

However this will not work yet as we haven't registered this class as being ready to accept incoming onPageChanged requests from the pageControl. Therefore whereever you bind up your controls, which will differ depending on what framework you use then you will need to add something like this:

pageControl.addPageChangedHandler(this);

If you were implementing this an anonymous inner class then this kind of setup would be used, which is very similar to the click handlers which are often implemented.

pageControl.addPageChangedHandler( new PageChangedHandler(){

@Override

public void onPageChanged(PageChangedEvent event) {

if (event.getPageChangeType() == PageChangeType.next) {

getView().setupPager(1l, totalRecords, 20l);

}

});

Step 7 : But wait - how do I fire this event from the child control?
Using whatever constructor arguments you require depending on the type of event to fire then you simply call the composites native fireEvent method.

this.fireEvent(new PageChangedEvent(PageChangeType.first));

Conclusion
This took me a day to figure out. Ouch. A lot of it had to do with getting confused with the old listeners method. Which you should ignore if you are using 2.0 GWT or higher. But there were plenty of code examples, which weren't quite complete. I am hoping that this might help a newbie in the future like myself understand this process better.

Soho CRM Moves to GWTP

2010-07-15T10:46:00.000-07:00

As you are probably aware I am currently using, and dare I say recommending using the GWTP framework, as it has a lot of built in features which are very useful to the burgeoning GWT application creators. Basically if you want to free yourself of spaghetti code and extensive boiler plate boredom, then go GWTP, or go home ;)

So I have been using the framework extensively, often asking questions in the forum and have even been invited to contribute to the project. Therefore I started where all responsible people should, and contributed to the much loved documentation. Since I needed a FAQ page I created the start of one. Now after two weeks I have learned a lot, and have the start of my CRM application in Google App Engine - http://sohocrm.appspot.com.

Ok. I know it looks rough. But believe me I have been on a learning expedition which is now starting to bare a good crop.