Saturday, March 17, 2007

Sun Tech Days (London), Day 2, Report 4 - Extreme GUI Makeover

Note: My battery ran out half way through this session but I think what I got is worth putting up. You can get the source and slides from the session when it was done at JavaONE 2006 here.

Slightly worryingly the metaphor chosen for this presentation is to compare your java app and your daughter. You love her and spend lots of time on her right? You want her to look good right? Errrrrr OK... Things get a little safer and we get down to the code... Cultural differences are a wonderful thing.

Java 2D Basics

Get the Graphics2D object and then you can change the rendering context. E.g. stroke (lines), fill, composite (overlap two images), transform, clip (don't show the whole picture based on a certain shape) and rendering hints (e.g. anti aliasing)

Example code: [Shows fill and clip. First fill with a gradient and then clip with a round rectangle.]

Example code: [Shows Composition. AlphaComposite class. SOMetimes you want to show the source, sometimes the destination and sometimes both. Once ou have set the composite ( with setComposite( ) ) you can set the overlap of the image.]

SwingX Project
Java has a very strict process if you want to change the default behavious of a Java class. Sometimes you want to extend of change the basic behaviour but to follow JCP can tajke 2 years. Swing Labs was created on which contains several projects including SwingX which has very basic components which extend basic components extending basic swing (e.g. JXTable which makes sorting and highlighting is easy).

See the code: [Shows the SwingXDemo from Netbeans]

There are native look and feels for different platforms

Timing Framework
We are all fans of cartoons and animation makes your application more "adorable". There is a swing class called Timer (in javax.swing). It has an actionPerformed( ) method which is called when time passed and you do some animation.

But you have no easy way to define the diration of your animation. Also, what if ou want to make your app go in reverse? There is no way in Timer. The Timing Framework was created (on
  • Cycle: This defines how long an animation will last.
  • Envelope: You also define how often your callback method is called.
  • TimingTarget: The new callback target - begin( ), end( ), timingEvent( fraction ) where fraction is the fraction of the total time passed since the last callback
First create a TimingTarget. Then create an Animator (with duration, repeatCount, repeatBehaviourand target as arguments). Then set the animation resolution (how often to call the TimingTarget) and the end behaviour.

Finally you call animation.start( ) to start the animation.

[Another demo from the Netbeans examples (Timing Examples project) - a button moves. Another demo - racetrack. This has sound.]

Welcome the Supemodel (A Mozilla Thuderbird Clone)
  • Sexy border - DropShadowBorder (extends basic border). You create a ShadowFactory to create a shadow for whatever you are shadowing.
  • If you use DropShadowPanel the shadows are made for you. It extends JPanel and just need to create a single ShadowFactory and then add things to the Panel. They will all have shadows created for you automatically.
  • CoolBar - Extends the standard JToolBar. Done by overriding the paintComponent( Graphics g ) method
  • CoolButton - extends JButton. Every JButton is a rectangle. CoolButtons need not be. Cool. You can even make them translucent... Apparently it's "pretty easy" by using Composite and set the opacity to 0.1f. Sweet.
  • Fade in and Fade out - Use the TimeController to use animation which you start when you detect the mouse has moved in and start again when the mouse moves out. You can do the same thing to make it step in and out of opacity...
  • Customising Fold Tree - override getTreeCellRendererComponent ( )
Running out of battery!... Ded.

No comments: