Archive for February, 2009

Book Review: Filthy Rich Clients - Swing made cool 0

Overview

Filthy Rich Clients is a book about java swing written by Romain Guy and Chet Haase all about how to make swing apps look great, well in their own words:

Filthy Rich Clients refers to ultra-graphically rich applications that ooze cool

This book, unlike a lot of other programming books, does exactly what it sets out to do, by the end of the book you will understand the most basic aspects of swing and how to get your application to look and feel fantastic. Not only that but the book is set out and written in a way that makes you want to read it from the fist page to the last, its not just a technical book you use as a reference but a technical book you actually enjoy reading!

That being said lets take a look at the book in a bit more detail.

Content

The content of this book may seemingly be about advanced swing effects but actually does a great job in taking anyone from swing basics right through to swing god!

It starts by introducing the fundamentals of swing, awt and to some extent any basic graphics toolkit. It then manages to take a very well paced tour through basic fundamentals, images, performance (possibly the most important thing is introduced early on) constantly building on the previous chapters so as you progress through the book you start to see benefit of all you have been reading coming together as your skills progress. In fact half way through you are manipulating images, drawing reflections and gradients and making some pretty nice looking swing interfaces.

During the second half of the book i found the pace started to pick up a bit, never to an unmanageable speed, rather like the authors were starting to get into the flow of the book. You move on to animation fundamentals, effects and then onto dynamic effects which brings everything together into a really cool final sample app. At this point you will have a text field that pulses red as someone enters the wrong text, screens that slide to reveal the next screen, video with reflection, screens that fade out and my personal favourite a JButton that morphs into an arrow when you press it!

By the end of this book I found myself sitting there wondering how on earth I had this amazingly cool GUI working and I actually understood what was going on.

Style

In what could be a first for any programming book I’ve read this book actually made me laugh, the personality of the authors really comes through. A prime example of this light hearted approach to technical writing comes in one of the basic drawing sections, creating a circle with a smaller circle inside gives you a graphical doughnut. Normally this wouldn’t raise an eye but a small number by the word doughnut leads you to a footnote that reads:

“mmm, doughnuts”

Whilst the may not seem a work of comedy genius, when your 100 pages into a book on low level graphics routines a little comment like that always raises a smile and is a real novelty in a book like this, not that i don’t love foot notes that link to a website, that makes you sign up, that allows you to download a 300 page xml schema, with no documentation, to spend 10 years of your life trying to figure out, only to find it was a draft schema that is never used in the real world, those books are always good fun!

Examples

The examples in this book all come as NetBeans projects, not my favorite but not the end of the world, each chapter has samples, things to try and this is what i found really made me learn what was going on. The book is much more like a tutor than just something you read for tips or small bits of knowledge.

Better than all this you can, right now, go download the samples and have a go! Pop over to the filthy rich clients site and check out the examples for yourself.

Summary

Its a rare occurrence for me to find a book about programming that i want to read from the front to the back for the sake of entertainment, usually i just learn what i have to and move on. This book is easily the definitive book on creating cool swing interfaces but also understanding about swing under the hood so you get lightning fast user interfaces.

Don’t just take my word for it, go get a copy today of Filthy Rich Clients and change the way you create your java GUI’s.

Designing a Smarter UI Action Framework 0

First of all let me apologize for the silence over Christmas(plus a bit) - a snowboarding accident, moving house, seeing family, its amazing how much time these things take!

In my previous post on designing a UI action framework we got started on a simple way to separate actions from the UI and put it all together. Brilliant, but you cant help but think we can make it better…

Lets say a user has a simple text editor, they may have kindly set up a save action that opens a file browser and puts the contents of the editor into a file, they may have a file menu with a save menu item and maybe a toolbar button that runs the same action, but what if the user hasn’t entered any text? You could disable the menu and toolbar button but that means our logic is getting mixed in with our interface, if you cant save then it makes sense that the save action cant be run not that the buttons are turned off.

So this is how we make our system smarter, now we will improve our tiny framework a bit so that actions can be turned on or off and the UI can reflect that. Please take care though, its easy to keep adding to a framework and end up with a huge load of classes that can do millions of things but make it very complicated, here were going for something small, compact and efficient.

First of all we need to modify our IAction class and its sub actions so they hold a state and also so we can manipulate that state to enable or disable them. Planning ahead we also then need to notify anything that’s interested about state changes, so we will provide a listener type system for this. Add these methods to your interface:

void setEnabled(boolean enabled);

void addActionStateListener(IActionStateListener listener);

Dont forget to knock up the interface for the listener too:

public interface IActionStateListener {
void stateChanged(String actionID, boolean enabled);
}

Not the most challenging code ever written but it does allow you to turn things on and off, and allows you to listen to that event (you can write methods to remove listeners etc easily)

Now that we can turn our actions on and off the next real task is to reflect this in the UI, there are 2 ways of doing this. First each UI component can be created, its action performed can call the action manager (as in the previous post on this topic) and it can also add and react to its listeners. Thats great if you building a tiny system, if your adding more than just a handful of buttons and menu items I would suggest you subclass that item and move this logic into that, making your UI code a lot neater and shirinking your codebase.

As the first option is easy i’m sure you can figure it out, so ill take the 2nd approach and subclass the UI objects just to demonstrate how this can be done, in this case ill hook up a menu item that can do all this reacting to the actions.

public class MyMenuItem extends JMenuItem {
    private static final long serialVersionUID = -2941768987720461279L;
private final String actionId;
    public MyMenuItem(final String label, final KeyStroke accelerator, final String actionId) {
super(label);
super.setAccelerator(accelerator);
this.addActionListener(new ActionListener() {
public void actionPerformed(final ActionEvent e) {
ActionManager.getInstance().runAction(actionId);
}
});
        // save the action id for this button
this.actionId = actionId;
        // listen for action updates
hookActionListener(this);
}
    private void hookActionListener(MindMapMenuItem item) {
        ActionManager.getInstance().addActionStateListener(new IActionStateListener() {
public void stateChanged(String actionID, boolean enabled) {
// react to the changes if applicable
if (actionID.equals(MyMenuItem.this.actionId)) {
MyMenuItem.this.setEnabled(enabled);
}
            }
});
}
}

The final stage of this UI is to hook it all together, for this is just add a simple listener to my text area that forces me to check for data as the user types, I then go via the action manager to update the state of my action and watch the UI react to that change!

Ok now our UI is becoming smart, it reacts to the user and is really starting to look like a nice little application given the tiny amount of code we have written. It also scales up quite nicely for fairly meaningful peices of software.

In my final post ill show you how we can take this simple word editor and using some fantastic external libraries and coding tricks turn our smart UI into something smart AND beautiful.

I’ll also provide full source code so if your not able to follow this then you can just click run and see it in action.