- We design and build extraordinary applications for companies looking to make the next great idea a reality.
- learn more
GWT Tutorial - Building A Model
Shalk Neethling has written up a nice, streamlined tutorial on how to build a model in GWT using the GWTx project's support for java.beans.PropertyChangeSupport.
The basic idea here is that while the browser is the View and the server side is the Model and Controller in MVC, you really should structure your browser side code as an MVC itself where only the Model interacts with the server.
Well worth a read.
Stop, Reload, Error Loading Page 404: Converting Web 1.0 to 2.0
OK, onwards in our effort to convert Web 1.0 apps to Web 2.0. Today we'll focus on some of the differences between Web 1.0 and 2.0 from the user experience perspective. When we think about our web interface, we usually think about the links, forms and controls we've put in place. But the reality is that often things go wrong with our app -- sometimes network problems, system problems or application errors -- and we get errors like 404 or 503, or a "page did not load." How does the user respond to these issues?
Usually they make use of the Stop, Reload, Back and Forward buttons. Most times application developers see the use of these browser buttons as a problem, to be mitigated ("Please don't submit this form twice..."; "Don't use the back button or your order will be submitted twice..."). If you think about it a little more carefully, you'll find that these buttons form a vital safety net for web applications, without which users would be crying in frustration at the "Unable to connect..." pages and spinning cursors that have brought your app to a halt.
Topics: Ajax Development, Best Practices, Tutorials, Web 2.0, Web Development
Put on Your X-Ray Specs: Converting Web 1.0 to 2.0
I've blogged in the past about converting Web 1.0 to Web 2.0. There were and still are three options:
- The Christmas Tree Approach - decorate your existing Web 1.0 application with lots of snazzy Ajax widgets. It's quick, but it's a bear to maintain.
- The Version 2.0 Approach - scrap your existing app and develop a Web 2.0 version from scratch. This can take a while and suffers from the same issues that all version 2 projects do, i.e. if version 1.0 has evolved over time, capturing full requirements may be challenging.
- The Resurfacing Approach - keep your backend logic, but rewrite the interface as a single page, desktop-like GUI.
This last approach has many advantages: it's quicker and less expensive than #2, but easier to maintain and gives a more unified user experience than #1. It also has some of it's own pitfalls. Mostly, the issues are around some of the hidden assumptions of a Web 1.0 applications that expects all interaction to occur through a postback.
So, what's the plan? How do we go about converting our 1.0 app via resurfacing? To do this you have to put on your X-ray specs, so to speak, and look at the bones of your application. If you're already using an MVC framework, your ahead of the game. So, what are the analytical steps?
Topics: Ajax Development, Best Practices, Tutorials
Yet Another 17 GWT Tutorials
Half a year has passed since I published 36 GWT Tutorials. As expected, several new tutorials have come along that demonstrate deeper, more sophisticated aspects of the framework, as well as addressing specific IDE's and libraries.
- Ryan Heaton is doing some great work in his blog. This tutorial jams together enunciate (a "convention over configuration" web services deployment framework), maven 2, GWT and Flex to develop an address book application that combines GWT and Flash. Sample code can be checked out from SVN.
- "Hello World" with IDEA - the first of several GWT tutorials over at developerlife.com. Generously illustrated.
- Managing History and Hyperlink - thorough explanation of the GWT History mechanism, illustrated with a code-rich example.
- Deploying GWT Apps - extensive tutorial that looks at many different ways to deploy GWT Apps -- as a part of a WAR, independently, using cross site scripting, into an existing web page, etc. Has a healthy amount of code and examples (though they haven't figured out how to JSONP with GWT).
- Using Servlet Sessions in GWT - simple illustration, using a Weather-by-zipcode example, of how to store state on the server using Servlet sessions.
- Using and creating modules - building modules -- essentially libraries that can be included in other projects -- with GWT. Has an IDEA focus.
- GWT Object Serialization - more than just a GWT-RPC tutorial. This one looks at the serializable types that need to be passed via GWT-RPC, serializable collections, and the annotations that make it all work.
- Building a GWT RPC Service - basic but well written GWT-RPC app that shows how to implement a string reverser service.
- Anatomy of a GWT Project - a thorough look at where in the project hierarchy GWT artifacts live. Short but educational.
- Setup GWT in IDEA 7 - since the old GWT in IDEA demo videos were released, IDEA 7 has been released. This tutorials updates you on how to use the GWT Facet.
- Introduction to GWT - you won't have built anything after this overview, but you'll have a solid understanding of EntryPoints and all the other arcana that goes into making a GWT app.
- GWT Solution #6: Drag and drop - an excerpt from David Geary's GWT: More Cool & Useful Stuff.
- Getting started with GWT and Google Gears - Chris Fong shows how to use Google Gears in this short tutorial by adapting his GSudokr app.
- Hand-On Google Web Toolkit - a tutorial over at Dr. Drobb's that builds a Flickr image album viewer. Nice, since it is non-trivial and demonstrates proxying a service (Flickr) through a server.
- Introduction to the Google Web Toolkit Framework - walks through several examples using Netbeans 6.0.
- A Basic Introduction to GWT and EXT - GWTEXT is one of several GWT/EXT JS integration modules. True to its title, basic, but does get you set up and ready to go with something more serious.
- Building Offline Force.com Applications with Google Gears and Google Web Toolkit - Google Gears, GWT and Apache Axis, Salesforce.com. This is perhaps the best tutorial here and develops the most directly useful application. Bangin'.
I myself am working on a more extensive tutorial to demonstrate porting a Web 1.0 app to GWT. Stay tuned.
A New ZK Tutorial
There are already quite a few tutorials and mini talks on the ZK site, but one more never hurt. Over at Dr. Dobb's, Andrzej Sekula guides you through "Hello, World!" with ZK, while explaining architecture, features and few other things. Worth a look.
Technorati Tags: ajax, zk, tutorial
Topics: Ajax Frameworks, Server Side, Tutorials, ZK
RSpec and Rails Custom Form Builders
I'm working on a small project and trying to use RSpec as the complete testing solution. First thing I did was copy over an existing custom FormBuilder which puts everything in a nice tabular layout. Then I tried to convert the existing Test::Unit tests to RSpec specifications.
I banged my head against this for a few hours, at least partly because the normally-infallable Google-based tech support failed to expose a clear example. So I figure I should at least get a blog post out of it.
The form builder is technically a helper, so it goes in app/helpers, and the test goes in spec/helpers. One problem -- the custom form builder expects to have access to template object and calls content_tag on that object to format the output. Normally, the template object is automatically placed in @template during evaluation. But since RSpec is testing just the helper, and not an associated controller or view, there is no template object.
At first I created a mock template object that just imported the relevant Rails helpers, but then I actually read the documentation in more detail and learned that the RSpec HelperExampleGroup class, which manages helper tests, already imports all those helper modules. So, I can set up my specs like this.
before(:each) do
@object = mock_model(Project)
@object.stub!(:longname).and_return("Long Name")
@builder = TabularFormBuilder.new(:project, @object, self, {}, nil)
end
The first two lines of this just set up a mock object. The key line here is the last one, where the form builder is created with arguments representing the model, the instance, the template, and then options. The template is represented by self, meaning the RSpec HelperExampleGroup, which will respond to content_tag.
Now I was able to write all my specs against the template and use the have_tag and with_tag predicates to validate the output, like so:
it "should build input fields" do
@builder.text_field(:longname).should have_tag("tr") do
with_tag "td.tdheader"
with_tag "label[for *= project_longname]", "Longname"
with_tag "td" do
with_tag "input.text_field#project_longname[name *= longname][size = '30'][value = 'Long Name']"
end
end
end
One other nice feature of the helper specs in RSpec is the ability to directly evaluate ERB. This is designed to be used for validating helpers that take ERB blocks as arguments. Use as follows:
eval_erb("<% table_form_for (@object) { |f| f.text_field(:shortname) } %>")
The method being tested looks like this -- it wraps a form inside an HTML table so that the custom form builder's table layout will render properly:
def table_form_for(name, *args, &proc)
concat("<table>", proc.binding)
form_for(name, *convert_args(TabularFormBuilder, args), &proc)
concat("</table>", proc.binding)
end
The eval_erb method returns a string, which you can then validate. Note that if you are using it to test a form_for derivative like this, you also need to place the following stub method in your spec file's describe block:
def polymorphic_path(args) "http://a.fake.url" end
The polymorphic_path method is used within Rails to convert something like form_for(@object) to the RESTful URL that the form should be submitted to. Normally it's an method of the controller, but in the RSpec helper environment, there is no controller.
There's another issue when validating this form builder. Unlike a typical ERB block, the custom form builder implementation of f.text_field explicitly uses the template object to write output. The eval_erb method does not seem to work as I expected in this case -- the output from inside the block does not appear to be saved.
In other words, when running the eval_erb call above, the resulting string contains the table tag created by the table_form_for method, and the form tag created by form_for. The table rows that are built by the custom form builder itself, however, do not show up in the output. I was able to verify that the output is being generated, so either it's not being stored by the RSpec object, or I still haven't completely figure out how to tie these things together yet.
If you found this example helpful, you might also enjoy my upcoming book Professional Ruby on Rails, scheduled to be published in February, 2008.
Topics: Ruby on Rails, Test Driven Development, Tutorials
GWT Testing With Groovy? (Heck yeah!)
Speaking of GroovyTestCase, I experimented a bit with using both it and JMockit as an alternative to GWTTestCase. This may sound strange at first-- after all, the point of GWTTestCase is to exercise your code in the way it will eventually execute as JS at runtime. What I've effectively done is to run my tests from within Groovy against GWT classes compiled-as-Java. First I will go through an example of what I'm talking about, then I will summarize some of the thoughts I had as a result of going through this exercise.
Below I have an implementation of KeyboardListener which modifies the contents of a TextArea based on keypress. I want to test the behavior of this listener. Here's what I did:
1) Write a test. I did this using Groovy, but you could just as easily write it in Java using JUnitTestCase if you prefer. This particular test verifies that my listener will append an equal amount of whitespace to the next line when the <enter> key is pressed, and position the cursor at the end of that new line. Very simple stuff, but worth testing even outside of GWTTestCase. I find that the Groovy style keeps this test case a lot shorter than it would otherwise be in Java.
class SampleTest extends GroovyTestCase {
private static final char KEY_ENTER = (char) KeyboardListener.KEY_ENTER
private static final int NO_MODIFIERS = 0;
protected void setUp() throws Exception {
Mockit.redefineMethods(GWT, MockGWT)
}
public void testEnterKey() {
def keyListener = new MyKeyListener()
def textArea = new TextAreaFixture(text: " abcd", cursorPos: 8 )
keyListener.onKeyPress(textArea, KEY_ENTER, NO_MODIFIERS)
assertEquals "Content is incorrect", " abcd\r ", textArea.text
assertEquals "Cursor position is incorrect", 13, textArea.cursorPos
}
}
class TextAreaFixture extends TextArea {
String text;
int cursorPos;
}
2) Mock out com.google.gwt.core.client.GWT. This ultimately comes down to mocking out the 'create' method. Notice below that we make a special case for 'DOMImpl.class'. The reason for this is that the actual DOMImpl is decided at runtime. It is also referenced in the constructors of the widget we are testing (i.e. 'TextArea()'). Note that this class needs to be a Java class (i.e. non-Groovy) due to the way in which JMockit redefines methods on existing Java classes. As for why I return 'null' for everything else, I do this to fail fast in any cases I'm not testing. As it turns out, this is all I need for the testcase above.
public class MockGWT {
public static Object create(Class classLiteral) {
try {
if (classLiteral.equals(DOMImpl.class)) {
return new MockDOMImpl();
}
return null;
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}
3) Subclass com.google.gwt.user.client.impl.DOMImpl. Ah-hah! Here's the catch... This step provides us just enough code to satisfy construction of our Widgets. For my purposes, I let my IDE generate this subclass for me, and stuck with the default implementations it generated. I return an instance of it above.
public class MockDOMImpl extends DOMImpl {
public Element createElement(String tag) {
return null;
}
[...]
}
The approach to this style of testing intercepts any calls on the Widgets themselves before anything is allowed to hit the underlying DOM implementation. What I provide above is just an example of how this could be done, specifically when testing behavior of custom classes that happen to inherit or reference GWT classes. Testing things like layout or UI concerns is another matter, but one which I would not consider 'interesting' enough for unit testing, since most of the behavior on the UI can be easily inspected by viewing Widgets as simple beans.
So why would you want to attempt this anyway? First, I happen to like working in Groovy, so I crave more reasons to do exactly that. Second (and more pertinent), much of behavior I find interesting in GWT apps revolves around simple message passing. I trust GWT enough to do its job once I leave the Java space. Beyond this are some philosophical differences I have with GWTTestCase, particularly since GWTTestCase makes it hard to maintain a larger body of unit tests, requires additional configuration in your module file (or as I've done before, constructed a different "test-only" module file that inherited from two module files), did not let me set up tests the way I would like to, etc. I could go on. When unit testing, very little of the logic I write is made less interesting or less relevant outside of a JS runtime environment, so where possible I would like to gain some benefits from treating everything as Java.
There are other benefits. There's the noticeable speedup in execution time when running entirely within the JVM. There's also less restrictions on the test class itself with regards to instance variables, language (i.e. Groovy), dependencies in outside packages, etc. Why wouldn't I want such flexibility in my test code? I really want my test code to be as concise and expressive as possible, particularly as my apps get larger and more complex. I think having alternative ways of approaching this kind of testing brings a lot of these types of benefits.
Topics: Ajax Development, Groovy, GWT, Testing, Tutorials, Unit Tests
Pimp my Webapp: Turning Web 1.0 into Web 2.0, Part 1
Everyone wants the Web 2.0. But how to get there, especially if you have a dowdy old Web 1.0 application? Will I have to spend the annual GDP of a smallish Central American nation on the rewrite? There are three general approaches that evolved over the last year:
- The Christmas Tree Approach - decorate your Web 1.0 app with Ajax widgets and simple backend JSON or XML services. Pro: doesn't require major investment. Con: app still mostly suffers from the Web 1.0 downsides -- postbacks, CRUD, etc.
- The Refrosting the Cake Approach - transform all of your views from HTML to JSON or XML. Develop a client side GUI that calls your applications controllers and views. Pro: doesn't require full rewrite. Con: control flow moves from server side to client side; won't take full advantage of RIA opportunities, such as direct manipulation or document-centric interfaces; really just a nice face on CRUD.
- The From Scratch Approach - take the opportunity to rethink your application as something other than the web equivalent of a green screen. Imagine Photoshop or Word as a traditional webapp. Pro: unencumbered by the old system. Con: costly; you may lose your way in reinventing your app.
I think approach #2, Refrosting the Cake, is actually quite appealing. You can make using that dowdy old webapp quite a bit more pleasant with a quick coat of Ajax. There was a really interesting article on this written by Brian Walsh back in July of 2006. It sort of got lost as a pure Tibco GI article, but it has much wider applicability. In it, Brian uses XStream to convert the views of a SpringMVC sample application from HTML to XML. He then uses Tibco GI to build a UI that talks to the controllers and views on the back end.
I used a similar approach to convert a dowdy old application -- mwhois -- to Web 2.0. Instead of Tibco GI, I used GWT. And instead of XML, I used JSON.
The old application looked somewhat homely...
...and suffered from the kludgey flow and heavy postbacks typical of Web 1.0. I proceded to identify the different views and converted them (via mwhois' templates) into JSON.
simple search: domain=agiledev&ext=com
{ "isAvail" : false, "domain" : "agiledev", "ext" : "com", "whoisServer" : "whois.crsnic.net" }
raw record: domain=french&ext=biz&show_raw=1
{ "domain" : "french", "ext" : "biz", "raw" : "Domain Name: FRENCH.BIZ\nDomain ID: D2708502-BIZ\nSponsoring Registrar: COMMUNI GAL COMMUNICATIONS LTD.\nSponsoring Registrar IANA ID: 418\nDomain Status: clientTransferProhibited\nRegistrant ID: GC683CO965021\nRegistrant Name: jamil akhtar\nRegistrant Address1: Regent House\nRegistrant Address2: 24-25 Nutford Place\nRegistrant City: London\nRegistrant Postal Code: W1H 5YN\nRegistrant Country: Great Britain (UK)\nRegistrant Country Code: GB\nRegistrant Phone Number: +44.7729391052\nRegistrant Facsimile Number: +44.2075693152\nRegistrant Email: jamil@cityfinancialcorp.co.uk\nAdministrative Contact ID: GC683CO965021\nAdministrative Contact Name: jamil akhtar\nAdministrative Contact Address1: Regent House\nAdministrative Contact Address2: 24-25 Nutford Place\nAdministrative Contact City: London\nAdministrative Contact Postal Code: W1H 5YN\nAdministrative Contact Country: Great Britain (UK)\nAdministrative Contact Country Code: GB\nAdministrative Contact Phone Number: +44.7729391052\nAdministrative Contact Facsimile Number: +44.2075693152\nAdministrative Contact Email: jamil@cityfinancialcorp.co.uk\nBilling Contact ID: GC683CO965021\nBilling Contact Name: jamil akhtar\nBilling Contact Address1: Regent House\nBilling Contact Address2: 24-25 Nutford Place\nBilling Contact City: London\nBilling Contact Postal Code: W1H 5YN\nBilling Contact Country: Great Britain (UK)\nBilling Contact Country Code: GB\nBilling Contact Phone Number: +44.7729391052\nBilling Contact Facsimile Number: +44.2075693152\nBilling Contact Email: jamil@cityfinancialcorp.co.uk\nTechnical Contact ID: GC683CO965021\nTechnical Contact Name: jamil akhtar\nTechnical Contact Address1: Regent House\nTechnical Contact Address2: 24-25 Nutford Place\nTechnical Contact City: London\nTechnical Contact Postal Code: W1H 5YN\nTechnical Contact Country: Great Britain (UK)\nTechnical Contact Country Code: GB\nTechnical Contact Phone Number: +44.7729391052\nTechnical Contact Facsimile Number: +44.2075693152\nTechnical Contact Email: jamil@cityfinancialcorp.co.uk\nName Server: DNS.INTER.NET.IL\nName Server: NS.COMMUNIGAL.NET\nCreated by Registrar: COMMUNI GAL COMMUNICATIONS LTD.\nLast Updated by Registrar: COMMUNI GAL COMMUNICATIONS LTD.\nDomain Registration Date: Wed Mar 27 00:01:00 GMT 2002\nDomain Expiration Date: Wed Mar 26 23:59:59 GMT 2008\nDomain Last Updated Date: Mon Mar 12 16:25:34 GMT 2007\n\n>>>> Whois database was last updated on: Sun Oct 14 17:51:14 GMT 2007 <<<<\n\nNeuLevel, Inc., the Registry Operator for .BIZ, has collected this information\nfor the WHOIS database through an ICANN-Accredited Registrar. This information\nis provided to you for informational purposes only and is designed to assist\npersons in determining contents of a domain name registration record in the\nNeuLevel registry database. NeuLevel makes this information available to you\n\"as is\" and does not guarantee its accuracy. By submitting a WHOIS query, you\nagree that you will use this data only for lawful purposes and that, under no\ncircumstances will you use this data: (1) to allow, enable, or otherwise\nsupport the transmission of mass unsolicited, commercial advertising or\nsolicitations via direct mail, electronic mail, or by telephone; (2) in\ncontravention of any applicable data and privacy protection acts; or (3) to\nenable high volume, automated, electronic processes that apply to the registry\n(or its systems). Compilation, repackaging, dissemination, or other use of the\nWHOIS database in its entirety, or of a substantial portion thereof, is not\nallowed without NeuLevel's prior written permission. NeuLevel reserves the\nright to modify or change these conditions at any time without prior or\nsubsequent notification of any kind. By executing this query, in any manner\nwhatsoever, you agree to abide by these terms.\n\nNOTE: FAILURE TO LOCATE A RECORD IN THE WHOIS DATABASE IS NOT INDICATIVE\nOF THE AVAILABILITY OF A DOMAIN NAME.\n" }
global search: domain=agilesoftware&do_global=1
{ "domain" : "agilesoftware", "avail" : [{ "domain":"agilesoftware","ext":"biz" },{ "domain":"agilesoftware","ext":"be" }], "unavail" : [{ "domain":"agilesoftware","ext":"com" },{ "domain":"agilesoftware","ext":"net" },{ "domain":"agilesoftware","ext":"org" },{ "domain":"agilesoftware","ext":"co.uk" },{ "domain":"agilesoftware","ext":"info" }] }
wizard search: do_wizard=1&company=pathfinder&keyword1=uxd&keyword2=agile&ext=com
{ "whoisServer" : "whois.crsnic.net", "avail" : [{ "domain":"pathfinderuxd","ext":"com" },{ "domain":"pathfinder-uxd","ext":"com" },{ "domain":"uxdpathfinder","ext":"com" },{ "domain":"uxd-pathfinder","ext":"com" },{ "domain":"pathfinder-agile","ext":"com" },{ "domain":"agilepathfinder","ext":"com" },{ "domain":"agile-pathfinder","ext":"com" },{ "domain":"uxdagile","ext":"com" },{ "domain":"agileuxd","ext":"com" },{ "domain":"uxd-agile","ext":"com" },{ "domain":"agile-uxd","ext":"com" }], "unavail" : [{ "domain":"pathfinder","ext":"com" },{ "domain":"pathfinderagile","ext":"com" },{ "domain":"uxd","ext":"com" },{ "domain":"agile","ext":"com" }] }
Then I wrote a simple, tabbed interface using GWT and the MyGWT widgets and slapped the two together.
I'll have more details on the code details in part 2 of this article. For now, you can look at the old and new interfaces.
Technorati Tags: ajax, gwt, mygwt, tibco gi, JSON, XML, web20
Topics: Ajax Development, Best Practices, Design Patterns, Google, GWT, JSON, Tutorials
Developer’s Notebook: Mastering (your fear of) regular expressions
Regular expressions are one of the most difficult programming concepts for novices and journeymen to wrap their heads around. Take a look at most any blog posting about RegExes and the comments will invariably be littered with words like "hate," "pain" and "AAAAARGH!"
Once you get comfortable with them, though, regular expressions become one of the most powerful tools in your programming arsenal. For Ajax/JavaScript developers, they can lend power and elegance to everything from form validators to keystroke interpreters to JSON, CSS and DOM parsers - in short, many of the thing you'll want to do on the client side of any powerful webapp. Take a look under the hood of any respected Ajax/DHTML library and you'll see RegEx literals being used liberally.
It's no secret that I'm big on programming books, especially O'Reilly ones, but I can think of few books that have been more useful than Jeffrey E. F. Friedl's "Mastering Regular Expressions". One difficult aspect of JavaScript regular expressions is their syntax, which is completely different from the better-known Perl variety. Friedl steps back from the implementation details of individual RegEx engines to explain the central concepts common to them all. After having this book for a year, I still refer to it so often that I can't say when I'll be ready to graduate to Tony Stubblebine's "Regular Expression Pocket Reference." In the meantime, when I'm away from my copy of the Friedl book, there are plenty of online resources to guide me.
Cheat sheets & quick references
These links don't offer really in-depth tutorials, but they do show you the JavaScript RegEx syntax at a glance.
- WikiCodia reference
- Visibone cheat sheet
- John Robert Morris cheat sheet
- JavaScript Kit tutorial
- Zytrax.com RegEx user guide
Interactive terminals
Apparently, everybody and their mother decided to build a little DHTML/Ajax app to let you create regular expressions, run arbitrary text against them, and check out the results. This is a fantastic way to play with the technology and get more confident in your abilities. Here are 9 different implementations of the same basic idea. I haven't used all of them, so let me know in the comments which are most useful.
- http://regexpal.com/
- http://www.rexv.org/
- http://www.xaprb.com/demos/rx-toolkit/
- http://www.cuneytyilmaz.com/prog/jrx/
- http://www.codeproject.com/jscript/regex2.asp
- http://lawrence.ecorp.net/inet/samples/regexp-format.php
- http://tools.netshiftmedia.com/regexlibrary/
- http://www.arachnoid.com/regex_lab/index.html
- http://weitz.de/regex-coach/
And for the over-achievers
For those of you so advanced in your RegEx powers that you've hit the limitations of the built-in JavaScript implementation, check out XRegExp, an open-source regular-expression library that supports named capture and other advanced features.
Technorati tags
Topics: Developer's Notebook, Javascript, Javascript Libraries, Tools, Tutorials
6 More GWT Tutorials
Since posting 36 GWT Tutorials, a few more have made their way onto the web. Many of these are more sophisticated than the last batch, developing non-trivial example applications, a sign that GWT development is maturing:
- GWT and OpenLayers integration - OpenLayers is an open source GeoServer, sort of an OpenSource google maps. The tutorial demonstrates integrating GWT with OpenLayers using Eclipse. Lots of code and screen shots with a simple working application at the end.
- Screencast Tutorial for GWT-RPC in Eclipse - if you learn better by watching someone drive and IDE, you can follow along as someone uses GWT 1.4.10 to create and extend a simple GWT-RPC app in Eclipse (3.2).
- Integrating XForms with GWT - another in a series of quality tutorials published at IBM's Developer Works. What are XForms? XForms 1.0 defines a device-neutral, platform-independent set of form controls suitable for general-purpose use. They are implemented in Mozilla Browsers (Firefox, etc.) through XUL. So, marrying XForms and GWT.
- Simplifying Ajax development using Cypal Studio for GWT - pointed out to me by my colleague Noel Rappin. Cypal studio is a plugin for Eclipse that simplifies common GWT tasks.
- Building an Offline Salesforce Application with GWT and Gears - integrating Google Gears, Apache Axis, GWT and Salesforce.com. If you want to see how to build a non-trivial application that stretches the bounds of Ajax and the browser, this is an excellent tutorial.
- Creating a GWT War File in Eclipse - really more of a recipe than a tutorial, but still useful.
If you know of any other new GWT tutorials, feel free to add them in the comments.
36 GWT Tutorials
While the excellent GWT in Action was released last month, there are lots of people that want to get their feet wet before plunking down $50 for a book. To that end, I've pulled together all of the GWT tutorials I'm aware of. There's a little bit of everything here: simple getting started guides; "Hello, World!" apps in all flavors; tutorials that focus on a specific aspect of GWT, such as history management and JSON; extensive examples that are still valuable even if you have the aforementioned book; guides for integrating GWT with a non-Java backend. Hopefully, you will find something to your liking here.
- Getting Started Guide - From the GWT site itself, their basic kickstart.
- Kickstarting Google Web Toolkit on the Client Side - Early "Hello, World!" tutorial with a second, animation example. This quick-start tutorial aims to translate some of the knowledge gained from my monkeying about with GWT into a useful text which will get other developers up and running quickly. To keep things nice and simple, we'll focus on only client-side matters.
- Google Web Toolkit Tutorial: The Break Down - Very short tutorial from early on. Demonstrates a simple rollover with GWT.
- Working with the Google Web Toolkit - Extensive tutorial with lots of screenshots that demonstrates everything from the basic getting started to some of the more interesting features, such as history support (i.e. the back button.). Article includes a Maven module for GWT.
- Introduction to the Google Web Toolkit - another extensive tutorial, this one from Oracle, so if you want to see how to GWT with JDeveloper, this one is for you.
- GWT Tutorial with Googlipse - yes, Googlipse is no more, but Cypal Studio has taken it's place. This demonstrates one way of doing GWT with Eclipse.
- Exporting WAR in GWT - Tutorial to create a WAR file in command line (works only with WTP 2.0).
- GWT Small Guide - I wrote this guide thinking in the user's who want's develope dynamic application's with the GWT (Google Web Toolkit) in an AMP(Apache,MySQL,PHP) environment's. The basic idea is write a small and very simple application using MySQL and PHP at the server side, and GWT for the client interfaze, using JSON for the communication between the client and the server.
- Ajax for Java developers: Exploring the Google Web Toolkit - One of several GWT tutorials from IBM's developerworks. In this article, I'll run through creating a simple GWT application to fetch a weather report from a remote Web API and display it in the browser. On the way, I'll briefly cover as many of GWT's capabilities as possible, and I'll mention some of the potential problems you'll come across.
- Trivial GWT Example - from Robert Hanson, who went on to write an excellent book on GWT, a simple GWT-RPC example.
- Build an Ajax-enabled application using the Google Web Toolkit and Apache Geronimo - recent (May 2007) two part series (part two is here) with source code, flash demos, etc.. Requires registration.
- Google Web Toolkit - This article describes the development of a simple Ajax application on Mac OS X using GWT and familiar Java tools, such as Apache Ant, the Tomcat 5.0 servlet container, and the IntelliJ IDEA integrated development environment (the latter is a commercial IDE). The article assumes some knowledge of Java and Ant.
- GWT Tutorial - focuses on producing a web site, rather than a webapp.
- Getting Started - the first of Paval JBanov's planned five GWT tutorials. The others are First Application, Core widgets and panels, Custom widgets and RPC (not yet written).
- GWT Plugin Tutorial - oddly enough, this tutorial demonstrates how to integrate GWT with Struts 2 WITHOUT the GWT plugin. Hmmmm.
- Getting Started with Google Web Toolkit (GWT) - Very basic, getting started instructions.
- Tutorial: Creating a Login application - demonstrates the use of Instantiations' GWT Designer tool (WYSIWYG UI design for GWT).
- Basic GWT / PHP Communication - Part 1: Java and Part 2: PHP. All the GWT documentation is about hooking up Java on the front and back ends. What about PHP? This shows how.
- String-based RPC between GWT and PHP - forget about serializing Java objects via XML and JSON; this is the dead simple approach.
- Using cURL to Interface GWT with an Existing Site - this one is kind of hard to explain. If you know about curl and PHP, this article is worth reading.
- Creating GWT RPC Services Tutorial - short guide to using gwt4nb, the Netbeans plugin for GWT, to create GWT-RPC services.
- Creating a simple app with GWT4NB - flash based tutorial on creating an anagram application with GWT and Netbeans.
- Googled by GWT - Part 1 and Part 2. Extensive getting started tutorial with lots of screenshots.
- Google Web Toolkit Tutorial - short example demonstrates use of the keyboard listener.
- Step by Step: A Mortgage Calculator using GWT - as it says, a mortgage calculator demo using GWT.
- IntelliJ IDEA: Google Web Toolkit as 1-2-3 - Animated demo walks through the configuration of IntelliJ Idea for the
Google Web Toolkit and shows how to write a GWT image viewer
application. - IntelliJ IDEA: Creating GWT Application from a Web Module - Animated demo of using GWT in a web module (IDEA's project/module type for Java webapps).
- Ajax for Java developers: Exploring the Google Web Toolkit - extensive tutorial from IBM developerworks that builds all the way to a weather reporter widget.
- Integrating the Google Web Toolkit with JSF using G4jsf - I can't say that I really love JSF, but if you bend that way, this will teach you how to marry the two. Extensive with lots of code snippets and screenshots.
- Asynchronous Google (Web Toolkit) and Django - Integrating GWT and Django using JSON.
- Using VistaFei IDE 1.0 for GWT: A Tutorial - VistFei is an IDE. The last time I looked at it, this tutorial had somehow lost it's screenshots and the CSS had been jacked up.
- Using Google Web Toolkit - video HOWTO by Bruce Johnson, the tech lead of GWT.
- GWT-Spring Integration Demystified - any time a new technology comes along, it just has to be integrated into Spring. Here you go.
- Build an Ajax application using Google Web Toolkit, Apache Derby, and Eclipse - Part 1 and Part 2. Extensive tutorial in two parts, the first of which deals with the front end, the second of which deals with the back end.
- Ease AJAX development with the Google Web Toolkit - develops a book search application as part of a getting started tutorial.
- Roughian Examples - combination demo/tutorial of GWT. Version 2 is under development.
If I've missed any, please add them to the comments.
Update: See Yet Another 17 GWT Tutorials
Mini Review - Google Web Toolkit Solutions: Cool & Useful Stuff
A mini book deserves a mini review, and so it is with the "Digital Shortcut" from January 2007 entitled Google™ Web Toolkit Solutions (Digital Short Cut): Cool & Useful Stuff. The 112 page PDF goes further than any of the free tutorials out there in that it develops two non-trivial applications using GWT: a Yahoo! Trips app that uses proxied Yahoo web services, and an Address Book, that makes use of Hibernate persistence.
The applications are non-trivial in that they tackle complex use cases, backend processing, web service, backend persistence and the integration of third party Javascript frameworks -- all aspects of GWT application development that are of great interest to serious developers. (Source code available for download.) In order, the chapters cover the following:
- Chapter 1 covers what must already be fairly familiar to most GWT developers -- making an RPC call to a backend servlet. This chapter, however, does an exceptionally good job of explaining the why and how of GWT RPC in exhaustive detail. The Yahoo Trips application is used to illustrate how to proxy an RSS feed.
- Chapter 2 shows how to integrate third party Javascript libraries with GWT. In this case Scriptaculous is used to provide an effect in the Yahoo Trips application to the panel containing the search results. The chapter focuses on two ways to incorporate scripts in the app -- simply including script tags in the application html file, and GWT script injection, i.e. through the GWT config file.
- Chapter 3 shows one way of how to implement drag and drop with GWT, using a fairly OO approach. The code seems pretty reusable and useful. Again, the Yahoo! Trips app is used.
- Chapter 4 shows how to bring GWT into the mix. Most of it is old hat for experienced Hibernate hands, but the example does work through implementing a sort of remote DAO using the GWT RPC. It's always good to see how that is done, even if it looks simple on paper. The Address Book app is used for this example.
- Chapter 5 shows how to use ant to deploy your apps to Tomcat. I assume most everyone is using Googlipse or some non-free alternative, but writing ant files for automated build environments is still a useful thing to know.
- Chapter 6 illustrates the use of popups and "deferred commands." Popups are obvious (modal and modeless dialogs); deferred commands are a way of giving focus to widgets that have not yet been displayed. I really haven't seen good treatment of this aspect of GWT programming elsewhere. Uses the Address Book app for this example.
Over all, the book doesn't skimp on explanations and code samples and is written in a clear style. It doesn't address unit testing with JUnit, but I suppose you can get that information elsewhere. For those of you who like to learn by doing, this is a decent tutorial (and worth the $10 price tag) that can tide you over until the bigger GWT tomes come out.
Topics: Ajax Frameworks, Books, GWT, Tutorials
How to Write ZK Components
A big selling point of the server side component Ajax frameworks like ZK and Echo2 is the ability to leverage a library of components so you can stick to the server side environment and not have to bother with Javascript, CSS, etc. Of course in order for this to work out, there has to be a healthy library of components, and for there to be such a healthy library, the writing of those components has to be easy or at least well documented. Over at Javaworld, they've got a three part series on how to write ZK Forge components (part 1, part 2, part 3).
The three parts show how to write a Hello World, a custom button, and a custom panel component, respectively. Note, since this is where the rubber meets the road, i.e. the Java framework meets the browser in all its Javascript/CSS/XHTML glory, you will need to have some of those skills to really benefit from these tutorials.
Topics: Ajax Frameworks, Javascript, Tutorials, ZK
Coming Up - The Next Echo2 Tutorial
I've been hard at work on the next installment of my Echo2 tutorial series, which has been stalled at installment #1 (sorry about that). I decided that a nice, simple Sudoku program might be just the ticket for installment #2. Saturday was spent spelunking around, looking for some reusable Java Sudoku code. That was a bust. Everyone had their generator and solver glued to a GUI, and the actual generator code was fuggly. So the rest of Saturday was spent implementing an efficient puzzle generator.
My all too brief Easter Sunday was spent slapping the Sudoku library from Saturday into an Echo2 app. I didn't get all the way there. Right now, the application generates and displays the puzzles and will toggle back and forth between the solution view. You can try it out here.
Note that this Sudoku puzzle generator produces "hard" puzzles with minimal constraints, i.e. blanking out any of the filled in squares will produce a puzzle with more than one solution. Just a warning.
BTW, the toggling back and forth between the solution and puzzle view takes a bit of time (lots of components being updated). Using something like EPNG's StackedPaneEx (see the April 4th announcement of new goodies in the Echo2 forums) would speed things up quite a bit:
This is a Pane that can contain an number of child components (including other Panes) but ONLY ONE can is visible at a time. The others may however be rendered on the client (lazy is default) and when you pop the stack of visible children, the previous top child is hidden and the one under is in the stack is shown.
This is useful for "descending" in the UI. Say you have a form, that the user selects a record and you show a related subform of data. With StackedPaneEx, you can push the subform onto the stack, have it display and then at the click of a "return" button, display the top level form without re-rendering it.
This performance issue is actually a good lesson in the limits of GUI frameworks (Ajax libraries that sit on the browser side and manipulate the DOM are also affected): if you have to represent hundreds or even thousands of objects or widgets in a GUI, the overhead of the component heirarchy and event observer/observable plumbing makes doing this directly using first-class GUI objects problematic. One approach would involve rendering the widgets graphically (SVG?), and translating mouse clicks on the graphic into model events through pixel location to object mapping. As an example, think of an application that allows patrons to buy stadium tickets. You don't want to render every one of the 20,000 available seats, so instead you allow the patrons to drag a box across a graphic of the stadium and display a corresponding zoom box with a few dozen seats.
OK, enough digression. I'll try and get this tutorial done and polished up by the end of the week, but these tutorials always end up taking a long time to produce; to teach you have to remove all confusion and to be clear and brief at the same time is hard work.
GWT Roundup
GWT continues to have a lot of ferment around it.
- Over at the Official GWT Blog, we learn that GWT Beta 1.1.10 is now available -- thanks to a heap of contributions from users -- and that a new 68 page online book on GWT has been released:
...provides you with a thorough introduction to the Google Web Toolkit. From installation, through your first application, to UI components and Remote Procedure calls, you'll learn the ins and outs of the framework. Some knowledge of Java programming and HTML is assumed, but you don't have to be an expert in web programming.
-
Gunnar Wagenknecht has taken the source for Googlipse and extended it quite a bit. He's released his new, extended GWT Eclipse Plugin here, along with a flash movie demonstrating its use.
-
Not to be outdone, NetBeans now also has support for GWT via a project template.
-
There is now a GWT Powered site (http://www.gwtpowered.org) that tracks developments in and around GWT.
- Over at Robert Hanson's blog he has a nice article on the new SVGPanel Widget.
This article explains how you can use the SVG support contained in GWT Widget Library o.o.5 to render SVG elements, and how you can make your page compatible with both Firefox and Internet Explorer 6.
-
Over at NubGames, they've put together another nice tutorial, this one with a focus on creating new widgets and doing layouts and the effectiveness of GWT as a UI toolkit.
-
Don't neglect to check out the unofficial GWT Wiki. Somewhat in competition with the GWT Powered site above.
- Built on top of JJAX, a framework for Enterprise AJAX Applications.
JJAX builds on GWT by providing a framework for building secure database driven applications
[snip]
Secure and authenticated access to GWT applications and RPCs. Build one or multiple application modules and decide which RPC calls each application has secure access to.
[snip]
Very handy bread crum GUI feature including bread crum trail containers that allow for advanced navigation without a lot of programming effort. All the hard lifting for managing state and navigation is done by the framework. Often times when building navigation from view to another view implementing return button or back button features can lead to messy code. JJax has built in support for managing GUI state and bread crums.
[snip]
When you upgrade the GWT/JJAX client (fix a bug or add a new feature), you can optionally force end users to load the new client version into thier browser. For example, this can be necessary if there is a serious bug that requires users to upgrade their GWT client immidiately or if the client upgrade is required to synchronize with a corresponding server change that impacts API compatiability in the RPCs. With this feature the server hosting administrator controls if the end user needs to upgrade their GWT client (even if they are in an active session).
Pretty soon these GWT roundup posts will have to be several pages long. GWT is becoming a subcontinent of Ajax development all its own.
Topics: Ajax Frameworks, GWT, Tutorials
About Pathfinder
Recent
- Bandwidth profiling Flex projects and more with Charles
- iPhone SDK: UIViewController Testing & TDD
- Icons are evil; so are menus - unless you do them right
- The Truth About Designing For Security
- GWT, Gadgets and OpenSocial, Part 2
- Has Many has_many: A Refactoring Story
- The Hidden Power of Canvas
- Review of fixture_replacement2 plugin
- Chess Game Viewer in GWT
- From JSP to Ruby on Rails: First thoughts on front-end coding conventions
Archives
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
Topics
.NET
2d physics
3d
3D GPS
3D physics
37signals
Accessibility
actionscript
activerecord
acts_as_ferret
Add new tag
Adium
ADO.NET Entity Framework
Adobe
Adobe AIR
Advertising
agile
Agile Development
AIR
Ajax
Ajax Applications
Ajax Bookmarking
Ajax Components
Ajax Development
Ajax Examples
Ajax Experience
Ajax Frameworks
Ajax history management
Ajax Intervention
Ajax libraries
AJAX Obfuscation
Ajax Performance
Ajax Products
Ajax Tools
Ajax Widgets
Amazon
amf
Analysis
Android
Announcement
Announcements
antennae
Apollo
apple
Application Architecture
Application Development
architecture
AS3
ASP.NET
Asynchronous Processing
awards
Azure
Back Button
bandwidth
bandwidth profiling
Benchmarking
Best Practices
BitmapData.draw
BJAX
Blaze Advisor
blog
blogging
Books
Browsers
Business
Business Reasons for Ajax
Business Rules
C#
caching
Canvas
Case Studies
Charles
chess
Chesspresso
Chicago
Cloud Computing
CMS
COBOL
code
code art
Code Generation
Color
COMET
Conference
Confluence
Consistency
Content Management
CRM
CruiseControl
CSS
Custom Flex Component
data visualization
Degrafa
Design
Design Patterns
design thinking
Desktop
Desktop RIA
Developer's Notebook
DHTML
Diagnose
Dojo
Domain Knowledge
Drools
EC2
Echo2
Echo3
Editorial
ERP
Ethnographic Research
events
externalinterface
Ext JS
Facebook
ferret
FileReference
Firefox
Firefox Extensions
fixtures
Flash
flash awards
flash player
flash player 10
Flex
flex css
flex skins
flexunit
Flickr
Flock
Flow
Frameworks
FriendFeed
front end
front end development
fulltext search
Games
Gauge Component
getting things done
Git
Google
Google calendar
Google Gadgets
Google Gears
g phone
Grails
Graphics
Greasemonkey
Groovy
GStreamer
GTD
Gwittir
GWT
hardware
Healthcare
Hibernate
HTML
Hudson
IDE
Ideation
IE
IE6
IE7
IE8
iGoogle
illustrator cs3
ILOG JRules
importing graphics to flex
Information Architecture
Innovation
Instructional Design
Interaction Design
interaction patterns