Creating a Swing Dashboard Widget - Part 4 (Close)

Widgets have a close button, it has the following properties:
- Is positioned above the widget just over the top left corner
- It only appears when the user has 'Alt' pressed
- Clicking it causes the widget to close (with a nice swoosh animation)

Well, the animation will have to wait, but the button is easy to knock up in Swing.

- The button will extend AbstractButton and draw it's own close icon of a white cross inside a black disc.
- The button will listen for mouse clicks inside the disc area, and call System.exit(0) to close the widget.
- The widget frame has a JLayeredPane allowing arbitrary placement of the button above the main panel
- Add input/action entries on the widget frame to respond to the alt key and call button.setVisible(true/false).
<br />public class CloseButton extends AbstractButton {<br /><br /> private static int INSET = 2;<br /><br /> public CloseButton() {<br /> setForeground(Color.WHITE);<br /> setBackground(Color.BLACK);<br /> setOpaque(false);<br /> setSize(new Dimension(25, 25));<br /> if (!WidgetFrame.isOSX())<br /> setVisible(false);<br /><br /> addMouseListener(new MouseAdapter() {<br /> public void mouseClicked(MouseEvent e) {<br /> e.translatePoint(-INSET, -INSET);<br /> if (getShape().contains(e.getPoint()))<br /> System.exit(0); // dumb exit<br /> }<br /> });<br /> }<br /><br /> private Shape getShape() {<br /> return new Ellipse2D.Float(INSET, INSET, getWidth() - INSET - INSET - 1,<br /> getHeight() - INSET - INSET - 1);<br /> }<br /><br /> @Override<br /> protected void paintComponent(Graphics g) {<br /> super.paintComponent(g);<br /> Graphics2D g2 = (Graphics2D)g.create();<br /> g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,<br /> RenderingHints.VALUE_ANTIALIAS_ON);<br /><br /> Shape disc = getShape();<br /> <br /> // background<br /> g2.setColor(getBackground());<br /> g2.fill(disc);<br /><br /> // faint outline<br /> g2.setColor(new Color(0, 0, 0, 80));<br /> g2.setStroke(new BasicStroke(3f, BasicStroke.CAP_ROUND,<br /> BasicStroke.JOIN_ROUND));<br /> g2.draw(disc);<br /><br /> // edge<br /> g2.setColor(getForeground());<br /> g2.setStroke(new BasicStroke(2.5f, BasicStroke.CAP_ROUND,<br /> BasicStroke.JOIN_ROUND));<br /> g2.draw(disc);<br /><br /> // cross<br /> int i = 9;<br /> g2.drawLine(i, i, getWidth() - i - 1, getHeight() - i - 1);<br /> g2.drawLine(getWidth() - i - 1, i, i, getHeight() - i - 1);<br /> }<br />}<br />
In the main widget frame class add the button to a high layer, and set up the 'Alt' input actions:
<br /> private void addCloseButton() {<br /> final CloseButton closeButton = new CloseButton();<br /> getLayeredPane().add(closeButton, JLayeredPane.DRAG_LAYER - 1);<br /> closeButton.setLocation(18, 16);<br /><br /> if (!isOSX()) {<br /> final String SHOW_CLOSE = "show-close";<br /> KeyStroke altDown =<br /> KeyStroke.getKeyStroke(KeyEvent.VK_ALT, InputEvent.ALT_DOWN_MASK,<br /> false);<br /> getRootPane().getInputMap(JComponent.WHEN_IN_FOCUSED_WINDOW).put(altDown,<br /> SHOW_CLOSE);<br /> getRootPane().getActionMap().put(SHOW_CLOSE, new AbstractAction() {<br /> public void actionPerformed(ActionEvent e) {<br /> closeButton.setVisible(true);<br /> }<br /> });<br /><br /> final String HIDE_CLOSE = "hide-close";<br /> KeyStroke altUp = KeyStroke.getKeyStroke(KeyEvent.VK_ALT, 0, true);<br /> getRootPane().getInputMap(JComponent.WHEN_IN_FOCUSED_WINDOW).put(altUp,<br /> HIDE_CLOSE);<br /> getRootPane().getActionMap().put(HIDE_CLOSE, new AbstractAction() {<br /> public void actionPerformed(ActionEvent e) {<br /> closeButton.setVisible(false);<br /> }<br /> });<br /> }<br /> }<br />
Gives this beauty...



Update: Pressing the 'Alt' key is pretty unintuitive for users to close the widgets. Dashboard has a widget manager which offers an alternate more intuitive method to close them. As the Java widgets are trying to avoid the need for a widget engine, I'll just make the close button fade in and out as the mouse moves in or out of the widget - just like the info button in the next part...

Creating a Swing Dashboard Widget - Part 3 (Transparency)

Now we're talking!

To make the background transparent in Java 6 u10 is simple, just call AWTUtilities.setWindowOpaque(this, false);.

Things for me are more complicated as I'm developing on OSX which doesn't have a u10 build available (Apple are at least a year behind the rest of Java). Luckily OSX has long been able to make Java windows transparent just by setting the window background color a transparent one. Why Sun didn't follow this pattern???

So, to make the JFrame transparent on all platforms:
<br /> private void makeTransparent() {<br /> setUndecorated(true); // remove the window controls<br /> setResizable(false); // remove the resize control<br /><br /> // OSX transparency<br /> setBackground(new Color(0f,0f,0f,0f));<br /><br /> // Non-reflection version for Java 6 SE u10:<br /> // AWTUtilities.setWindowOpaque(this, false);<br /> //<br /> // Reflection version (to compile on Java 1.5):<br /> try<br /> {<br /> Class clazz = Class.forName("com.sun.awt.AWTUtilities");<br /> Method method = clazz.getMethod("setWindowOpaque",<br /> new Class[]{Window.class, Boolean.TYPE});<br /> method.invoke(clazz, new Object[]{this, false});<br /> }<br /> catch (ClassNotFoundException e)<br /> {<br /> // Oh well, not Java 6 u10<br /> } catch (NoSuchMethodException e)<br /> {<br /> } catch (IllegalAccessException e)<br /> {<br /> } catch (InvocationTargetException e)<br /> {<br /> }<br /> }<br />

This gives a distinctly widgetty looking...



OSX is even kinder by allowing this widget to be dragged around, Windows will have to get a special mouse listener later.

Creating a Swing Dashboard Widget - Part 2 (Border)

Widgets have nice rounded borders. The LineBorder in the JDK doesn't really cut it: It's not anti-aliased, it draws weird artifacts, and it's tough to have the outside of the border transparent while inside the border is opaque.
While there are separate ways to fix these things, it's fairly easy to write one:

<br />public class RoundedBorder extends AbstractBorder {<br /> private Insets insets;<br /> private Stroke stroke;<br /> private Color strokeColor;<br /> private int arc;<br /> private float strokeWidth;<br /> <br /> /**<br /> * Simple rounded border with no outline<br /> * @param arc<br /> */<br /> public RoundedBorder(int arc) {<br /> this.arc = arc;<br /> int i = (int)(arc / Math.PI) / 2;<br /> insets = new Insets(i, i, i, i);<br /> }<br /><br /> /**<br /> * Rounded border with an outline<br /> * @param arc<br /> * @param strokeWidth width of the outline<br /> * @param color color of the outline<br /> */<br /> public RoundedBorder(int arc, float strokeWidth, Color color) {<br /> this.arc = arc;<br /> int i = (int)((arc / Math.PI) + ((strokeWidth * 2) / (Math.PI)));<br /> insets = new Insets(i, i, i, i);<br /> this.stroke = new BasicStroke(strokeWidth);<br /> this.strokeColor = color;<br /> this.strokeWidth = strokeWidth;<br /> }<br /><br /> public void paintBorder(Component c, Graphics g, int x, int y, int width,<br /> int height) {<br /> Graphics2D g2 = (Graphics2D)g.create();<br /> g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,<br /> RenderingHints.VALUE_ANTIALIAS_ON);<br /><br /> // In real code optimize by preserving the rect between calls<br /> if (stroke != null) {<br /> int i = (int)strokeWidth / 2;<br /> RoundRectangle2D.Float rect =<br /> new RoundRectangle2D.Float(i, i, width - strokeWidth,<br /> height - strokeWidth, arc, arc);<br /> g2.translate(x, y);<br /> g2.setColor(c.getBackground());<br /> g2.fill(rect);<br /><br /> g2.setColor(strokeColor);<br /> g2.setStroke(stroke);<br /> g2.draw(rect);<br /> } else {<br /> RoundRectangle2D.Float rect =<br /> new RoundRectangle2D.Float(0, 0, width, height, arc, arc);<br /> g2.translate(x, y);<br /> g2.setColor(c.getBackground());<br /> g2.fill(rect);<br /> }<br /> }<br /><br /> // boring stuff from here on...<br /><br /> public Insets getBorderInsets(Component c) {<br /> return insets;<br /> }<br /><br /> public Insets getBorderInsets(Component c, Insets insets) {<br /> return insets;<br /> }<br /><br /> public Rectangle getInteriorRectangle(Component c, int x, int y, int width,<br /> int height) {<br /> return getInteriorRectangle(c, this, x, y, width, height);<br /> }<br /><br /> public static Rectangle getInteriorRectangle(Component c, Border b, int x,<br /> int y, int width, int height) {<br /> Insets insets;<br /> if (b != null)<br /> insets = b.getBorderInsets(c);<br /> else<br /> insets = new Insets(0, 0, 0, 0);<br /> return new Rectangle(x + insets.left, y + insets.top,<br /> width - insets.right - insets.left,<br /> height - insets.top - insets.bottom);<br /> }<br />}<br />

As this border does the job of filling the entire background of the component with the component's background color, we can make the actual component transparent and this will leave nice transparent areas outside the curves of the corners. (Opaque components fill their entire bounds with the background color).
The drawback of this is that the border is painted after the component's contents, so custom painting for the widget content must be done in the paint method rather than the paintComponent or it won't show up.

Creating a Swing Dashboard Widget

Java 6 u10 will allow transparent windows and undockable applets. This should allow the creation of some Dashboard widget like Swing apps.

I'll see how close I can get to creating a basic widget in Swing. I'll take it one step at the time and post all the code and a demo at the end.

The exercise is purely a UI one. The code marvelousness and resource usage won't be a top concern here.

Step 1 - Test app with basic widget

In this case a blue square that does nothing. In the next few steps I'll try and get it more widget like.

<br />public class Frame1<br /> extends JFrame<br />{<br /> public Frame1()<br /> {<br /> setLayout(new FlowLayout());<br /> ((JComponent)this.getContentPane()).setBorder(<br /> BorderFactory.createEmptyBorder(20,20,20,20));<br /> setSize( new Dimension(220, 240));<br /> setTitle("Widget");<br /> add(createComp()); <br /> <br /> setLocationRelativeTo(null);<br /> setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );<br /> setVisible(true);<br /> }<br /><br /><br /> private JComponent createComp()<br /> {<br /> JPanel panel = new JPanel();<br /> panel.setPreferredSize(new Dimension(160,160));<br /> panel.setOpaque(true);<br /> panel.setBackground(new Color(20,50,110));<br /><br /> return panel;<br /> } <br /> <br /> public static void main(String[] args)<br /> {<br /> new Frame1();<br /> }<br />}<br />

Looks like this:

Flippable Swing Components

One of the nice things about Dashboard widgets is that their preferences are presented on the reverse of each widget. Doing this means that preferences don't take any extra screen real estate, they don't need a dedicated preferences dialog, and a nice flipping animation gives users a natural sense of their location.

Here's a basic implementation for Java Swing components. Webstart Demo





How it's done
A new ReversibleComponent takes a front and back component and does the following:
The front and back components are placed on top of each other in a JLayeredPane, the back one is initially hidden with setVisible(false).
Pressing the 'i' button starts the transition to the back. The transition animation technique is pretty much the same as my animated tree (why does JRoller delete hosted images after a while??). An image of each of the front and back components is captured, then temporary 'tween' images are composited and displayed in a layer above the real components during the animation.
The animation uses a perspective transform from JHLabs to gradually spin the front image away and the back image in. A semi transparent gradient is also drawn over the top to darken the end of the image spinning 'away' from the user giving a better sense of depth.
Once the animation is complete, the front component is hidden, the back one made visible and the 'tween' image overlay is removed. Voila! A spinning JComponent.

Source Code