Java

The next few weeks will be quite busy for me. I’ll be at Google I/O the last week of May in San Francisco to give a talk on Android entitled Turbo-charge your UI. If you want to learn cool techniques on how to improve the performance of your Android applications, that’s where you want to be! There will be other very interesting Android talks so if you are an Android developer or wish to become one, I can only encourage you to attend. To make things even better, the registration is actually pretty cheap.

The week following Google I/O, I will be at CommunityOne West, still in San Francisco, to talk about Android again. Actually, this will be (almost) the same talk as Google I/O. CommunityOne is always fun and it’s free.

Finally, I will be at JavaOne to deliver a session (twice) about animations with my good friend Chet Haase. This talk will be language-agnostic, but there will be demos, and the techniques we’ll discuss apply to Swing/Java 2D, Flex, Android, Java FX and any other UI toolkit. I don’t think we’re gonna give away Flex books this year but you’ll be able to laugh at Chet. I mean, laugh at his jokes.

Upcoming conference talks

Julian Gamble just pointed me to his new open source project, aerithnetbeans. This project offers most of the widgets we created for Aerith as a reusable library that integrates nicely with NetBeans’ GUI editor. If you are interested, I invite you to check out the showcase movies.

Aerith widgets library in NetBeans

I’ve been using IntelliJ IDEA 8 since its recent release and I love it. There are not many new features I will use but the UI and performance improvements are most welcome. Congratulations to the JetBrains team for another excellent release!

IntelliJ IDEA 8

I am very happy to say that I will be at Devoxx this year to give a couple of presentations about Android. The presentations are, very surprisingly, entitled Filthy Rich Android Clients. If you want to learn cool stuff about Android and/or if you want to see cool demos running on a real Android phone, come to Devoxx :)

Android talk at Devoxx

A few months ago I stumbled upon what came to be one of the most interesting Swing blogs I’ve ever read. Actually, it is the most interesting Swing blog I know of. Exploding Pixels, by Ken Orr, shows how to create beautiful looking Swing applications for Mac OS X.

Ken has a great sense of design, pays great attention to details and his examples are really well written. Even if you do not work with Mac OS X, you’ll find a lot of valuable information on his blog, in particular how a UI developer should deal with details and pixel-perfect designs. I highly recommend you read all of Ken’s posts right now :)

Sexy Swing Apps on Mac OS X

Thanks to the hard work of Kouichi Matsuda, Filthy Rich Clients is now available in Japanese. Now I wish I didn’t drop out of my Japanese class after only one year :)

Filthy Rich Clients in Japanese

Android is still eating away all of my spare time but I really hope to be able to blog again very soon.

Still Alive

Sun has posted the slides and audio of Filthy Rich Clients 2008. Enjoy!

Slides and Audio for Filthy Rich Clients at JavaOne 2008

Chet and I just posted our JavaOne 2008 slides online.

Slides from JavaOne 2008: Filthier, Richer, Clientier

Chet and I will be presenting Filthy Rich Clients at JavaOne once again this year. We are excited and happily surprised by the high number of pre-registrations for our talk, the room is almost full already! However, if you plan on attending this session, make sure you check your schedule as Sun decided to move Filthy Rich Clients from Tuesday to Thursday late afternoon, to make room for some JavaFX thingies.

Also, we will be at the bookstore for a signing session. After our session, from 5:15pm to 5:45pm, if you have a copy of Filthy Rich Clients and would like us to scribble on it, come by and we’ll be happy to deface your book.

I will also probably spend some time at the Google booth where you can always stop by to chat about Google related stuff.

JavaOne, Talk and Signing Sessions

Chet just wrote a very interesting blog about graphics benchmark, and BubbleMark in particular, used to compare various RIA runtimes performance. I highly recommend reading it.

Graphics Benchmark

Chet and I are going to present another installment of Filthy Rich Clients at JavaOne 2008. We have a bunch of cool ideas for techniques and demos we would like to show you but I am very interested in hearing what you want to know about. If you have any visual effect, animation or graphics technique you would like to learn, please tell me and we’ll try to put it in our presentation.

What do you want to hear about?

I would like to apologize to the loyal readers of this blog for the lack of updates since last december. Android is a fascinating project which keeps me very busy at work and I would probably need to clone myself a few times to implement all the features I would like to see in it. I’ve also spent quite some time settling in my new life in California and this blog was the unfortunate victim of those time-consuming tasks. I do not despair coming back to my writings very soon. I can at least tell you that Filthy Rich Clients will be back this year at JavaOne, maybe with a surprise :)

Update

Sun Microsystems just released Project Scene Graph, a scene graph API for Java 2D and Swing. This API makes it very easy to write complex drawings or visual effects. It also lets you blend Swing component with regular Java 2D objects, with as little effort as possible. The web site contains early binaries and sources as well as a nice introduction PDF that Chet Haase presented at JavaPolis 2007.

Project Scene Graph

Geertjan Wielenga just published his review of Filthy Rich Clients.

Another Filthy Rich Clients Review

Daniel Spiewak just published a very nice introduction to Fuse at JavaLobby. I wish I had spent more time working on Fuse this year but at least it works really well. I know that Daniel is using it, or was using it, in a big Swing application.

Introduction to Fuse

I spent the whole day using IntelliJ 7.0 and so far I am very pleased with the update. Three major improvements are making my life much easier. First, the IDE seems faster and more responsive on some operations (on a project containing tens of thousands of files). Then the debugger offers a better layout and all the issues I had with it in IntelliJ 6.0 seem to be gone. Finally, the Perforce integration is finally on par with the rest of the IDE. Annoying bugs are gone and useful new features are available.

Thanks a lot to JetBrains for this very nice upgrade!

First Steps With IntelliJ 7.0

Jasper reports that the Swing team is hiring!

The Swing Team is Hiring

Chet finally released his AnimatedTransition library. This library is discussed in details in Chapter 18 of our book. Given its name, I won’t insult you by explaining what this library does :)

Animated Transitions Made Easy

Some of you asked for an eBook version of Filthy Rich Clients and so far the only way to download a PDF of our book was to subscribe to Safari. You can now buy the PDF only on informIT, without any subscription. Enjoy!

eBook for Filthy Rich Clients

Geertjan sent us a great plugin for NetBeans 6. When installed, this plugin lets you open any of the examples from our book directly into NetBeans. Just click on the File > New Project... menu item, select your demo, and you’re done!

Alpha Window

To add this feature to NetBeans, you first need to download the plugin and the install it manually from the Tools > Plugins > Downloaded screen.

Last but not least, Geertjan is showing on JavaLobby how to use Filthy Rich Clients techniques in NetBeans. If your application is built on top of the NetBeans Platform, you might want to read these articles: Part 1, Part 2 and Part 3.

Filthy Rich Clients Demos as NetBeans Plugin

When we showed off the REALiTY demo for Extreme GUI Makeover 2007 at JavaOne, I demonstrated translucent shaped windows in Java. The code behind this effect is a lot like other effects from the same demo.

In REALiTY, translucent shaped windows are used to show more details about the selected table row. You can see how it looks like in the following screenshot or in one of theses two videos: QuickTime high quality and QuickTime low quality.

Alpha Window

I really encourage you to look at the videos to see how the shaped window is animated. When shown and disposed, a fade animation is displayed. Whenever the selection changes in the table, the window smoothly follows the selection. Also, the details window sticks to the main frame when the user moves it around.

First of all, the window’s background is drawn with a simple PNG image. I could have implemented it in Java 2D, with the same tricks used for the blurry dialog, but I was running out of time. Window’s translucency is achieved with the help of JNA. I previously described how to use JNA on this blog so I won’t waste your time here.

Everything else is implemented using the Beans Binding framework and the Timing Framework. Those two libraries made the code a breeze to write. For instance, the following snippet shows how to make the window fade:

public void hideWindow() {
    Animator animator = PropertySetter.createAnimator(
            400, this, "alternateAlpha", 0.0f);
    animator.setAcceleration(0.2f);
    animator.setDeceleration(0.3f);
    animator.addTarget(new TimingTargetAdapter() {
        @Override
        public void end() {
            SwingUtilities.invokeLater(new Runnable() {
                public void run() {
                    setVisible(false);
                }
            });
        }
    });
    animator.start();
}

public float getAlternateAlpha() {
    return alternateAlpha;
}

public void setAlternateAlpha(float alternateAlpha) {
    this.alternateAlpha = alternateAlpha;
    AlphaWindow.updateAlphaForWindow(this, alternateAlpha);
}

As you can see, we simply set up an animator and let the Timing Framework and JNA do their job. To make the window follow the selection is equally easy. In the following snippet, AlternateDetailPanel refers to the panel that contains the pictures shown in the translucent window. We simply bind the selectionBound property of the table to the animatedLocation location of the window.

void setAlternateDetailView(AlternateDetailPanel detailView) {
    BindingContext ctx = new BindingContext();

    Binding binding = new Binding(this, "${selectionBounds}",
         SwingUtilities.getWindowAncestor(detailView), "animatedLocation");
    binding.setConverter(BOUNDS_CONVERTER);
    ctx.addBinding(binding);

    ctx.addBinding(this, "${selectedHome.photoList}", detailView, "photoList");
    ctx.bind();
 }

The selectionBound is a custom property that defines the boundaries of the selected row in screen coordinates. Here are the getter and setter for that property:

public Rectangle getSelectionBounds() {
    return selectionBounds;
}

private void setSelectionBounds(int row) {
    Rectangle oldBounds = selectionBounds;
    selectionBounds = table.getCellRect(row, 0, true);
    Point screen = table.getLocationOnScreen();
    selectionBounds.x += screen.x;
    selectionBounds.y += screen.y;
    selectionBounds.width = table.getWidth();

    firePropertyChange("selectionBounds", oldBounds, selectionBounds);
}

The setSelectionBound() method is called internally every time the selection changes. This in turn triggers the bean binding setup earlier and invokes setAnimatedLocation() on the window. Once again, the Timing Framework does all of the work for us:

public Point getAnimatedLocation() {
    return getLocation();
}

public void setAnimatedLocation(Point p) {
    Animator animator = PropertySetter.createAnimator(
            200, this, "location", p);
    animator.setAcceleration(0.1f);
    animator.setDeceleration(0.1f);
    animator.start();
}

You might have noticed that the selectionBound is a Rectangle whereas the animatedLocation is a Point. How do we convert from one to the other? This is the purpose of the line binding.setConverter(BOUNDS_CONVERTER) used when setting up the binding. This converter takes a rectangle and turns it into a point. The point is defined as being vertically centered in the rectangle and shifted to the left of the right edge:

public static final BindingConverter BOUNDS_CONVERTER =
    new BindingConverter() {
        @Override
        public Object sourceToTarget(Object value) {
            Rectangle bounds = (Rectangle) value;
            return new Point(bounds.x + bounds.width - 35,
                    bounds.y + bounds.height / 2);
        }

        @Override
        public Object targetToSource(Object value) {
            return null;
        }
    };

Last but not least we need to make the shaped window follow the main frame when it moves. Doing so is quite easy but requires two code paths, one for Windows, one for Mac OS X. On Windows, when you drag a frame, the componentMoved event is called a regular interval. However, on Mac OS X, this event is triggered only when you release the frame after the drag. That’s why on Windows we simply update the location of the shaped window when the main frame moves, whereas on Mac OS X we animated the shaped window to its new location:

theReality.getMainFrame().addComponentListener(new ComponentAdapter() {
    @Override
    public void componentMoved(ComponentEvent e) {
        Point location = reality.getMainFrame().getLocation();
        int dx = location.x - lastKnownLocation.x;
        int dy = location.y - lastKnownLocation.y;

        Point p = getLocation();
        p.x += dx;
        p.y += dy;

        if (OperatingSystemSupport.isWindows()) {
            setLocation(p);
        } else {
            setAnimatedLocation(p);
        }
    }
});

Even though this effect is not the most impressive visually, I find it very interesting because of the way it relies on the Beans Binding framework. This framework is meant to bind data between components&emdash;don’t forget that visual properties like dimensions and locations are also data!

Do not hesitate to read the session slides for further information.

Translucent shaped Windows (Extreme GUI Makeover)

Geertjan recently asked Chet and I to choose a few of our Filthy Rich Demos to be included in the NetBeans Sample Catalog. Geertjan also started working on a new NetBeans module that lets you create a New Project template from one or more samples. This module can now be used to add all of the demos in the New Project wizard at once.

Also note that Geertjan will soon provide us with a NetBeans module containing all of our demos. That way, you will be able to have them opened in NetBeans by just adding a module to the IDE.

Filthy Rich Samples in NetBeans

InfoQ just published a review of Filthy Rich Clients. This review contains a link to chapter 14 of the book, Timing Framework Fundamentals. Enjoy!

Another Free Chapter