My Blog has moved to Github Pages

Saturday 30 October 2010

Some old sketches ...

I decided it was high time I got a copy of my photos from the last 10 years or so backed-up somewhere. I downloaded Picasa (3.0-beta for ubuntu x64) and signed up for web-albums and started rummaging through my pics.  Picasa tells me I have 5,773 pictures in my ~/Pictures directory, so I could be having to spend rather a long time sorting through that lot!

Scrolling through I came across some old sketches from way back (2002 and older), some of which I had scanned at various stages during the sketch. After a bit of fighting with Picasa (I didn't want it to throw away my original tif files) I got it to pick up the extra converted jpg copies which i made, and tried to upload them ... no go on that score, its still doing incrementally backing-off retries and failing to upload with no explanation. The log file location says "c:\Documents and settings...", which is a bit of a laugh given i'm running ubuntu :)

Instead I uploaded those converted jpg's via the web-albums website, and shared the album. Here's a sample:


pony sketch, step 1

pony sketch, step 2

pony sketch, finished

Honestly no idea why the last one has a blue-ish tint to it - I must have screwed up scanning it or something. I'll balance the colours and re-upload if I get a chance.

This was drawn from a photo I took at Llyn-Brianne in mid Wales, some time around 2002. There was a whole herd of what I can only assume are wild ponies just wandering around up there, and this little guy was one of them.

This sketch is a full side of A4, drawn with Derwent studio colour pencils. I saw someone drawing with these at an art show I went to with my dad years ago, and bought the 72 pack there and then - they really are fantastic.

Monday 25 October 2010

Making pretty diagrams with GraphViz

So recently I needed to draw some directed-graph diagrams - work-flow diagrams in this particular instance. After a bit of googling I came across some nice examples of diagrams produced by graphviz - actually what really turned me on to graphviz was this nice set of examples from Kent Bye.

A little tinkering and I soon had my workflow definitions (declared in xml in our application) rendered nicely with GraphViz. The markup language is deadly simple and intuitive, and the directed graphs - I didn't try anything else - which it produces are really good looking.

Lets take a look at some examples, starting simply with two nodes related in one direction only. The markup would look like this:

digraph {
  "Start" -> "End" [];
}

That's it.  No really.  This is all you need to create a simple, two-node directed graph diagram.  To draw the diagram you need to install graphviz (with a quality OS like ubuntu you just need the magic incantation "sudo apt-get install graphviz" and you're up and running. Once installed invoke graphviz like this:

dot -Tpng -oMyGraph.png MyGraph.dot

This invokes the directed-graph drawing tool, tells it to produce a png image from the input file "MyGraph.dot" and store it in the output file "MyGraph.png". The resulting diagram looks like this:
Coolness!

Lets get a bit trickier. We can control the size and shape of our nodes, and label the edges:

digraph {
  "A" [shape="circle"];
  "B" [shape="rectangle"];
  "C" [shape="diamond"];

  "A" -> "B" [label="A to B"];
  "B" -> "C" [label="B to C"];
  "A" -> "B" [label="A to C"];
}

Here's the diagram:
Isn't it just too cool? Last one coming up - this time with colours:

digraph {
  "Back" [shape="egg" color="green" style="filled" fillcolor="yellow"];
  "Forth" [shape="house" color="red"];
  "Other" [shape="invtriangle" color="blue"];

  "Back" -> "Forth" [color="orange" label="weee"];
  "Forth" -> "Back" [color="purple" label="eeew"];

  "Other" -> "Forth"
  "Other" -> "Back"
}

And here's how it looks:
I realize this just scratches the surface - there's a whole bunch of other node shapes you can use, you can define defaults for nodes and edges once at the beginning of your *.dot file, and much much more.

I only discovered GraphViz about 2 months ago, but since I did i've been using it quite a lot. Its very handy for drawing simple representations of work-flows, navigational flows, any kind of hierarchical structures (trees and graphs), etc., and just so simple to write. Generating the *.dot syntax programmatically is extremely easy - I now have our app invoking "dot" to generate the graphs on the fly.

Note: Google Charts now has experimental support for (a subset of) graphviz. Check it out here.You don't even have to install graphviz :)

Saturday 16 October 2010

GWT Widgets with html id attributes

It isn't immediately obvious how to get your GWT widgets to produce id attributes that you can use from external scripts or testing tools like WebDriver or Selenium.

To make your widgets produce id attributes you need to invoke the ensureDebugId method with an id string, e.g.

Label myLabel = new Label("Say something");
myLabel.ensureDebugId("myLabel");

Now, if you run that you still won't get any id attributes. The clue is in the method name ensureDebugId. You actually need to inherit the Debug module in your module descriptor (.gwt.xml) file.  The module to inherit is: 

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

Now if you view the source of your label you'll see that it has an id attribute, but you might be surprised that it doesn't quite match the id you supplied ("myLabel"). In fact it will say "gwt-debug-myLabel".

Testing GWT OOPHM with WebDriver

Reminder to self: When testing GWT OOPHM with WebDriver, don't use the HtmlUnitDriver you damned fool - it does not have a GWT plugin, so it just sees the bootstrap html and nothing more than that. To test in OOPHM with WebDriver you have to use a real browser that has a GWT plugin :)

Testing GWT apps with WebDriver

Today I've been playing a little with WebDriver for testing GWT apps.  First impressions:
  1. WebDriver is awesome - can't wait to try testing more complex web-apps!
  2. WebDriver opens up all kinds of possibilities beyond testing web-apps - for example to drive interactive demos and tutorials.
  3. Did I mention WebDriver is awesome? :)
Preparing the Eclipse project

To get started I made a new toy project to play in. I don't use the Google Eclipse plugins for GWT dev - if you do you could create this project using the wizards instead. I develop in Eclipse, but always set up my projects with Maven, so the first step for me was to create a new maven project:

mvn archetype:create -DgroupId=com.sjl -DartifactId=webdriver

Next, create the Eclipse project so I can use eclipse to edit the maven pom...

mvn eclipse:eclipse

And then edit pom.xml in Eclipse to add the GWT, JUnit4 and WebDriver dependencies (by default maven adds JUnit 3.8, so I replace that with JUnit 4.4).

To add the GWT dependencies you also need a repository that actually has them - I use the CodeHaus gwt maven plugins during the build step, which also exposes the CodeHaus repository for fetching the dependences:


  <pluginRepositories>
    <pluginRepository>
      <id>codehaus-snapshots</id>
      <name>Codehaus plugin snapshot repository</name>
      <url>http://snapshots.repository.codehaus.org</url>
    </pluginRepository>
  </pluginRepositories> 
   ...
  <dependencies>
   <dependency>
      <groupId>com.google.gwt</groupId>
      <artifactId>gwt-dev</artifactId>
      <version>2.0.4</version>
      <optional>true</optional>
   </dependency>
   <dependency>
      <groupId>com.google.gwt</groupId>
      <artifactId>gwt-user</artifactId>
      <version>2.0.4</version>
      <scope>provided</scope>
    </dependency>
        ...

Next the WebDriver dependencies - I got these as transitive dependencies of selenium2:

    <dependency>
      <groupId>org.seleniumhq.selenium</groupId>
      <artifactId>selenium</artifactId>
      <version>2.0a4</version>
    </dependency>
 


Having edited the pom.xml file you need to rebuild the eclipse project using the eclipse maven plugin:

mvn eclipse:eclipse

This will take a little while to download the dependencies if you don't already have them - the gwt dependencies in particular are quite large.  Once the command completes you need to refresh the project in Eclipse for it to reload the project classpath.

Creating a simple GWT app

I made a really simple application to play with, consisting of just an EntryPoint that displays a Label, and a PushButton which adds more Label's when clicked.  I had just a handful of aims in mind for this first attempt:
  1. Get a GWT app to load via WebDriver
  2. Find an element which GWT has created (the first Label)
  3. Interact with an element that does something (the PushButton)
  4. Check that the something actually happened and that we can test for it.
The GWT code for this is extremely simple:


Pushing the button adds a new Label for each push - something we should be able to detect pretty easily.

My gwt module file looks like this:


Next I made an "ApplicationDriver" class to wrap up the details of getting WebDriver to interact with the web app and let our tests deal with the web app in terms of a ubiquitous domain language - overkill for this simple example i'm sure, but if you want to write expressive tests for a complex web app you really need to do so at a higher level than WebDriver invocations. The ApplicationDriver class looks like this:


Now there are a few things worth noting here, as it took me a while to arrive at this point with something that actually worked.

First of all, notice that i'm using the FirefoxDriver implementation. I had started out with HtmlUnitDriver which works just fine for testing a compiled GWT app (provided you create it with javascript support - new HtmlUnitDriver(true), and ignore the warnings about x-javascript) but I wanted to test during development by running OOPHM. Stupidly I was trying to get this to work with the HtmlUnitDriver for a while, til I had a Homer Simpson moment (doh!) and realized that of course HtmlUnitDriver can't work - it doesn't have a GWT plugin :).

Secondly, the FirefoxDriver implementation starts up an instance of Firefox with a profile called "WebDriver". If you don't have a profile with that name Firefox will create one when it starts, but it won't have any of your plugins (including the GWT plugin!). Its easy to create a new profile (close all instances of firefox down completely then run it from the cmdline with the -profilemanager switch) - precise instructions vary by platform. I created the profile then just copied my existing profile contents to it to save installing all the plugins again. In the sample code above i've told WebDriver to use the "default" profile instead by setting a system property.

Finally, note that I'm finding the PushButton by id lookup. To make this work you have to force GWT to spit out an id for the element, and allow for the fact that GWT adds a prefix ("gwt-debug-") to the id you specify. To force GWT to produce id's for your Widget elements:
  1. Inherit the Debug module in your module descriptor file (.gwt.xml)
  2. Set an id on the Widget using widget.ensureDebugId("theId");

Finally I built the testcase on top of the ApplicationDriver, starting with a test to detect the first Label, then a test to click the PushButton and check that a new Label is added.  The testcase looks like this:


That's it ... start up GWT OOPHM, run the Junit testcase, and marvel as Firefox starts up, runs the app, and shuts down again (3 times - once for each test), leaving you with a nice green bar in JUnit. I'm sure that restarting firefox between each test would be a bad idea - slooooow - in practice, I just wanted to try it to see that it worked :)

The next interesting test to play with will be testing asynchronous activity like AJAX requests.  I'm hoping there'll be some nice Patterns described by the WebDriver community for writing such tests.

Tuesday 12 October 2010

I had an idea...

... for carrying a profile around the web, using hovercards to display some info about you wherever you leave a comment or whatever.  A quick google shows i'm too late again - Gravatar beat me to it (grrr). They've done a nice job of it though.

Monday 4 October 2010

Best monospace font for programming?

Back in the day, when I ran Windoze XP on my development machines, I used to use the wonderful "Consolas" font developed by Microsoft.

Since switching to Ubuntu some, uhhh ... 3 years ago, I've been using the free Inconsolata font - and I agree with kvz, it is very nice.  One small problem with it for development is it isn't monospaced - though I don't notice it causing me any real problems.

Anyways, lately I've been playing with Liberation mono instead, which is monospaced, and so far i'm liking it a lot.  In IntelliJ/JetBrains Idea i'm running it at 17pt, which looks super-smooth and readable on my 17" 1080p laptop.

To install Liberation in ubuntu:

sudo apt-get install ttf-liberation

When Llama's attack

So I was cycling home the other night, it was dark and drizzling. Around half-way home my journey takes me past an Agricultural College, which has a few small fields of livestock.

As I passed one particular field a large, black, something loped towards me, with exactly the gait of the chimps in Planet of the Apes.  Man I nearly fell off my bike, but then I realized - as it got closer - what it was: a damn Llama.

Those creatures have the weirdest gait! Must be all those extra knees (see Pyramids).

Transforming Java Collections

So I posted last time about filtering Java Collections using a "functional" approach. Today I'll look at another useful operation - transformation.

This is slightly more complicated than filtering, but not much. The problem this time is to take a List of Object's of some Type, and transform it into a List of Object's of a different Type.  For example, convert a List of ReallyComplexObject's to a List of EquallyComplexObject's:



Of course there are many alternative ways to write this.  Not least you should factor out the creation of the EquallyComplexObject to a separate method that would be invoked in the for loop.  I took a similar approach with transformation that I used for filtering, and arrived at:



Again, the expressiveness of this really shines when you factor the Transformer out into a separate class, or create it in a separate method.  Our client code becomes:



To support this the Util class gets a few extra bits and pieces:



Its turned out to be surprisingly useful - i'm already using it in lots of places and finding the results pleasingly readable.  The biggest gain, to my mind, is that you get to code at a higher level of abstraction because in each case you don't have to think about the mechanics of iterating the original List's.

Yes I know its ridiculously simple to iterate a for loop, and where the predicate or transformation is simple the alternative presented here appears to have dubious value, but somehow making a "Filter" or a "Transformer" that focuses on how to filter or transform just one object is ... well, its transformative.  Try it, you might like it :)

Saturday 2 October 2010

Filtering Java Collections

OK, its my first ever blog post, so no laughing - gotta start somewhere, right?  It doesn't help that the cat is tap-dancing on my keyboard at every opportunity.

Anyways, I recently made a couple of handy utility methods and classes for filtering and transforming java.util.List's (well, Iterable's actually), using a more functional approach, which I thought I'd describe.  For a first-post I thought i'd start with filtering. (I know, I know, Google-collections / Guava ... hey I like programming for programming's sake ok?).

The basic problem is: you have a List of Objects of some type, and you want to create a new List containing a subset of the original, where some objects are removed based on some properties of those Objects.  To make the example concrete lets say we have a list of Strings (List<String>) and we want to remove any String with length less than 3 characters.  The obvious way to do it is:



Short and simple, but not particularly pretty, readable or re-usable.  Lets not forget that here the predicate or "test" is simple - as the complexity of the predicate grows, so the readability of this implementation declines.  A natural next step with a more complex predicate would, of course, be to factor the predicate out into a separate method. 

One thing that certainly doesn't feel right is that the predicate is actually expressed as an inverse of the intended behaviour - it basically says "if the string has at least 3 characters, keep it".

Anyway, after filtering a few lists with code similar to this, I decided to factor it out into something that's a little more re-usable, makes it easier to express the intent, and thus makes the code more readable.  First, lets look at what the same operation would look like using the utility code, then we'll get to the utility itself:



Now that's a little more wordy, largely because of Java's lack of closure's, but that's a topic for another post :).  What I do like about it is that the intent is expressed more clearly - "filter", "remove", aString.length() < 3.

We could make it clearer by writing the Filter implementation as a separate top-level (or nested) class, instead of an anonymous one:



Alternatively we can achieve similar clarity with an anonymous inner class by factoring out the creation of that class into a separate method:



Here the slightly unconventional method name "stringsShorterThan" helps readability in the calling code.

I put the utility code for this into a little class where we were already gathering some other general utility methods, innovatively called "Util".  It looks something like this:



Unsurprisingly that's just the code we started with, factored out into a utility method that ever-after lets you provide just the predicate for removal, wrapped in a little boiler plate.  If the predicate is complex, or frequently needed, you can factor it out into a top-level class, create a test-case for it, and benefit from re-use.