Topic: Tutorials

Getting a team over the fear of daily scrums

Michael Walkden, Tuesday, September 15, 2009 @ 1:23 pm

If my previous post about the value of agile meetings over traditional status meetings got you interested, I want to share a common pattern of behavior I often see from teams trying scrums for the first time. Hopefully you can avoid these and save yourself some time.

For new teams to Agile the statuses given in scrums are generally … well … lies. “Yep, on time. No obstacles.” I was once told by a colleague that, “You can’t hide on an Agile team.” This is true. However, this kind of exposure can be extremely uncomfortable for individuals to get used to. In traditional software teams people aren’t used to their peers asking them direct questions and paying close attention to their progress.
Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

GWTQuery – JQuery-like Syntax in GWT

Dietrich Kappe, Tuesday, November 25, 2008 @ 5:33 pm

Many times open source projects are mute -- they have insufficient documentation. Good technical blogs can function as a sort of ad-hoc documentation. That's what I've tried to do, most recently with my series of posts on GWT and OpenSocial. Vinay, over at Web Technology I/O, often does the same. He's got a great post about Ray Cromwell's GwtQuery (JQuery-like syntax in GWT) and how to make it work.

I've been tinkering with this tool as well and am going to do my own writeup, but thought I'd give you all the heads up. BTW, according to Vinay, the compiled GWT JavaScript for GwtQuery clocks in at 712 bytes!! So much for GWT bloat.

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

GWT Tutorial – Building A Model

Dietrich Kappe, Tuesday, September 23, 2008 @ 12:05 pm

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.

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

Stop, Reload, Error Loading Page 404: Converting Web 1.0 to 2.0

Dietrich Kappe, Friday, March 7, 2008 @ 7:26 pm

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.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

Put on Your X-Ray Specs: Converting Web 1.0 to 2.0

Dietrich Kappe, Thursday, March 6, 2008 @ 12:24 pm

I've blogged in the past about converting Web 1.0 to Web 2.0. There were and still are three options:

1. 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.
2. 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.
3. 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?

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

Yet Another 17 GWT Tutorials

Dietrich Kappe, Thursday, February 7, 2008 @ 5:27 am

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.

1. 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.
2. "Hello World" with IDEA - the first of several GWT tutorials over at developerlife.com. Generously illustrated.
3. Managing History and Hyperlink - thorough explanation of the GWT History mechanism, illustrated with a code-rich example.
4. 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).
5. Using Servlet Sessions in GWT - simple illustration, using a Weather-by-zipcode example, of how to store state on the server using Servlet sessions.
6. Using and creating modules - building modules -- essentially libraries that can be included in other projects -- with GWT. Has an IDEA focus.
7. 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.
8. Building a GWT RPC Service - basic but well written GWT-RPC app that shows how to implement a string reverser service.
9. Anatomy of a GWT Project - a thorough look at where in the project hierarchy GWT artifacts live. Short but educational.
10. 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.
11. 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.
12. GWT Solution #6: Drag and drop - an excerpt from David Geary's GWT: More Cool & Useful Stuff.
13. Getting started with GWT and Google Gears - Chris Fong shows how to use Google Gears in this short tutorial by adapting his GSudokr app.
14. 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.
15. Introduction to the Google Web Toolkit Framework - walks through several examples using Netbeans 6.0.
16. 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.
17. 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.

Technorati Tags: ajax, gwt, tutorials

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

A New ZK Tutorial

Dietrich Kappe, Friday, January 25, 2008 @ 4:22 am

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

• Digg
• Reddit
• del.icio.us

Comments (1)

Software Development

RSpec and Rails Custom Form Builders

Noel Rappin, Friday, December 28, 2007 @ 4:27 pm

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.

• Digg
• Reddit
• del.icio.us

Comments (4)

Software Development

GWT Testing With Groovy? (Heck yeah!)

Ivan Moscoso, Wednesday, December 19, 2007 @ 2:01 am

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.

• Digg
• Reddit
• del.icio.us

Comments (1)

Software Development

Pimp my Webapp: Turning Web 1.0 into Web 2.0, Part 1

Dietrich Kappe, Tuesday, October 16, 2007 @ 12:54 pm

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:

1. 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.
2. 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.
3. 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

• Digg
• Reddit
• del.icio.us

Comments (1)

Software Development

Developer’s Notebook: Mastering (your fear of) regular expressions

Brian Dillard, Friday, September 28, 2007 @ 8:17 am

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

• javascript
• regular expressions

• Digg
• Reddit
• del.icio.us

Comments (4)

Software Development

6 More GWT Tutorials

Dietrich Kappe, Thursday, September 20, 2007 @ 10:59 am

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:

1. 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.
2. 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).
3. 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.
4. 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.
5. 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.
6. 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.

Technorati Tags: ajax, gwt, tutorial

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

36 GWT Tutorials

Dietrich Kappe, Monday, July 16, 2007 @ 9:42 am

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.

1. Getting Started Guide - From the GWT site itself, their basic kickstart.
2. 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.
3. Google Web Toolkit Tutorial: The Break Down - Very short tutorial from early on. Demonstrates a simple rollover with GWT.
4. 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.
5. 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.
6. 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.
7. Exporting WAR in GWT - Tutorial to create a WAR file in command line (works only with WTP 2.0).
8. 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.
9. 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.
10. Trivial GWT Example - from Robert Hanson, who went on to write an excellent book on GWT, a simple GWT-RPC example.
11. 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.
12. 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.
13. GWT Tutorial - focuses on producing a web site, rather than a webapp.
14. 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).
15. GWT Plugin Tutorial - oddly enough, this tutorial demonstrates how to integrate GWT with Struts 2 WITHOUT the GWT plugin. Hmmmm.
16. Getting Started with Google Web Toolkit (GWT) - Very basic, getting started instructions.
17. Tutorial: Creating a Login application - demonstrates the use of Instantiations' GWT Designer tool (WYSIWYG UI design for GWT).
18. 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.
19. String-based RPC between GWT and PHP - forget about serializing Java objects via XML and JSON; this is the dead simple approach.
20. 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.
21. Creating GWT RPC Services Tutorial - short guide to using gwt4nb, the Netbeans plugin for GWT, to create GWT-RPC services.
22. Creating a simple app with GWT4NB - flash based tutorial on creating an anagram application with GWT and Netbeans.
23. Googled by GWT - Part 1 and Part 2. Extensive getting started tutorial with lots of screenshots.
24. Google Web Toolkit Tutorial - short example demonstrates use of the keyboard listener.
25. Step by Step: A Mortgage Calculator using GWT - as it says, a mortgage calculator demo using GWT.
26. 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.
27. 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).
28. Ajax for Java developers: Exploring the Google Web Toolkit - extensive tutorial from IBM developerworks that builds all the way to a weather reporter widget.
29. 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.
30. Asynchronous Google (Web Toolkit) and Django - Integrating GWT and Django using JSON.
31. 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.
32. Using Google Web Toolkit - video HOWTO by Bruce Johnson, the tech lead of GWT.
33. GWT-Spring Integration Demystified - any time a new technology comes along, it just has to be integrated into Spring. Here you go.
34. 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.
35. Ease AJAX development with the Google Web Toolkit - develops a book search application as part of a getting started tutorial.
36. 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

Technorati Tags: ajax, gwt, tutorials

Related Services: Ajax Rich Internet Applications, Custom Software Development

• Digg
• Reddit
• del.icio.us

Comments (9)

Software Development

Mini Review – Google Web Toolkit Solutions: Cool & Useful Stuff

Dietrich Kappe, Sunday, April 29, 2007 @ 10:25 pm

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.

Technorati : ajax, book, digital shortcut, google web toolkit, gwt, review, tutorial

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

How to Write ZK Components

Dietrich Kappe, Sunday, April 29, 2007 @ 9:33 pm

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.

Technorati : ajax, components, tutorial, zk

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development