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...