iApp scrollbars with separated buttons
August 2, 2009
Thanks to Kathryn Huxtable, Mac Widgets for Java now offers iApp scrollbars with buttons at the top-and-bottom/left-and-right (instead of together at the bottom/right).
I’ve incorporated Kathryn’s changes, which you can get via the Subversion repository or via the latest developer build. To split the buttons, as seen in the screen shot above, call IAppWidgetFactory.setIAppScrollBarButtonsSeparate(true).
Exploding Pixels 
August 2, 2009 at 9:51 pm
[…] Ken Orr posts that his Mac Widgets for Java project now supports iApp scrollbars with separated buttons. […]
August 3, 2009 at 8:12 pm
Very nice,very nice. I use MacWidgets in my own little app and even though I dont have a mac, It looks like it probably because of the great work Ken did. Will there be any more iApp style controls for MacWidgets?I saw those Checkboxes, radiobuttons and buttons in iTunes that are iApp controls.
August 3, 2009 at 8:17 pm
Thanks Tristan (and thank Kathryn for this latest enhancement). What iApp style controls would you like to see?
August 5, 2009 at 4:02 pm
I would really like to see the iApp style buttons and checkboxes for now. Later maybe radiobuttons, text fields and maybe lists. I think that those controls could be done easily with some gradients or so.
August 4, 2009 at 3:07 am
hey ken,
i am using your macwidgets … a lot things are awesome …
BUT:
i have got a problem with the MenuBar of the HudWindow.
i tried to add a JMenuBar on the JDialog. That works …! but i need the mac styled menu … so i used the command System.setProperty(“apple.laf.useScreenMenuBar”, “true”);
but nothing changed …
any ideas?
August 4, 2009 at 12:11 pm
Hi Jonas,
I believe using the screen menus is the default, so I don’t think you need put that client property. Do you see the same behavior when you use a regular JDialog? If you do, I’d recommend posting the java-dev@lists.apple.com mailing list.
-Ken
August 5, 2009 at 5:03 pm
I think JDialogs can’t have menu bars?
August 6, 2009 at 9:47 am
hey guys,
JDialogs can have menu bars and JDialogs behave exactly the same like the HudWindow.
So it was my mistake trying to use the screen menu with HudWindow.
Is there a version where the HudWindow is derived of a JFrame? Or do you know about a little work around, to use the HudWindow as JDialog with a screen menu?
Thx in advance!
jonas
August 6, 2009 at 12:11 pm
Hi Jonas,
HudWindow is implemented using a JDialog — there’s no way to work around this.
-Ken
August 6, 2009 at 3:03 pm
thx 4 your answer … but in general it is a fault of the JDialog or? cause it is able to provide a menuBar like a JFrame but not able to show it as a screen menubar :(
August 6, 2009 at 9:48 am
Or is this a fault of the JDIalog?
August 6, 2009 at 12:31 am
Actually I found an example of iApp controls I’d like to see. Right here: http://www.apple.com/mobileme/whats-new/
Just scroll down to the remote wipe thing and there is the confirmation dialog on the right with iApp controls.
August 11, 2009 at 4:30 pm
I have a HudWindow version made from a JWindow because I had some issues with the JDialog with my Look & Feel. Works nicely but I never needed a menu bar in a JDialog or JWindow. Yet. I really think Menu Bars in Dialogs don’t make sense. I think that it talks about that in the Apple User Interface Guidelines. I really try to at least follow some parts of it.
August 13, 2009 at 1:23 pm
Hey Tristan,
it is a little bit complicated to explain ;)
In my application i am using the hudwindow as the first main component that is visible. The problem is that i need the MenuBar with this first component.
Would you mind to give me your JWindow Version of the hudwindow?
greetz
jonas
August 16, 2009 at 5:33 pm
OK.
Here it is:
import com.explodingpixels.macwidgets.*;
import com.explodingpixels.util.PlatformUtils;
import com.explodingpixels.widgets.WindowDragger;
import com.explodingpixels.widgets.WindowUtils;
import javax.swing.*;
import javax.swing.border.Border;
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.Area;
import java.awt.geom.RoundRectangle2D;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;
/**
*
* An implementation of an OS X Transparent Panel, also known as a Heads Up Display (HUD). For a
* full descrption of what a Transparent Panel is, see the Transparent Panels
* section of Apple’s Human Interface Guidelines.
*
*
* HUD’s are designed to offer a lightweight way to unobtrusivley offer controls to the user. The window
* looks like this:
*
*
*
*
* As Apple points out, this component is not appropriate for all situations and should be used
* judiciously.
*
*/
public class HudWindow {
private final JWindow fDialog;
private JComponent fContentPane;
private final TitlePanel fTitlePanel;
private final HudPanel fHudPanel = new HudPanel();
private final BottomPanel fBottomPanel;
private static final int ROUNDED_RECT_DIAMETER = 16;
/**
* Creates a Heads Up Display style window.
*/
public HudWindow() {
this(“”);
}
/**
* Creates a Heads Up Display style window.
*
* @param title the title to use for this window.
*/
public HudWindow(String title) {
this(title, null);
}
/**
* Creates a Heads Up Display style window.
*
* @param title the title to use for this window.
* @param owner the {@link Frame} that this HUD is parented to. Can be null.
*/
public HudWindow(String title, Frame owner) {
fDialog = new JWindow(owner);
// fDialog.setTitle(title);
fTitlePanel = new TitlePanel(title, createCloseButtonActionListener());
fBottomPanel = new BottomPanel(fDialog);
init();
}
private void init() {
// indicate that this frame should not make all the content draggable. by default, when you
// set the opacity to 0 (like we do below) this property automatically gets set to true.
// also note that this client property must be set *before* changing the opacity (not sure
// why).
fDialog.getRootPane().putClientProperty(“apple.awt.draggableWindowBackground”, Boolean.FALSE);
// fDialog.setUndecorated(true);
WindowUtils.makeWindowNonOpaque(fDialog);
fHudPanel.add(fTitlePanel, BorderLayout.NORTH);
// fHudPanel.add(fBottomPanel, BorderLayout.SOUTH);
// set the backing frame’s content pane.
fDialog.setContentPane(fHudPanel);
// set the HUD panel’s content pane to a blank JPanel by default.
JPanel panel = new JPanel();
panel.setOpaque(false);
setContentPane(panel);
// listen to the frame’s title property so that we can update the label rendering the title.
fDialog.addPropertyChangeListener(“title”, createTitlePropertyChangeListener());
WindowUtils.createAndInstallRepaintWindowFocusListener(fDialog);
new WindowDragger(fDialog, fTitlePanel);
}
/**
* Gets the {@link JDialog} backing this {@code HudWindow}.
*
* @return the {@code JDialog} backing this {@code HudWindow}.
*/
public JWindow getJDialog() {
return fDialog;
}
/**
* Hides the close button on this HUD’s title bar.
*/
public void hideCloseButton() {
fTitlePanel.hideCloseButton();
}
/**
* Gets the {@link JComponent} to add content to.
*
* @return the container to add content to.
*/
public JComponent getContentPane() {
return fContentPane;
}
/**
* Sets the {@link JComponent} to use as the container for this {@code HudWindow}’s content.
*
* @param contentPane the container for this {@code HudWindow}’s content.
*/
public void setContentPane(JComponent contentPane) {
// remove the old content pane if there was one.
if (fContentPane != null) {
fHudPanel.remove(fContentPane);
}
fContentPane = contentPane;
fHudPanel.add(fContentPane, BorderLayout.CENTER);
}
private PropertyChangeListener createTitlePropertyChangeListener() {
return new PropertyChangeListener() {
public void propertyChange(PropertyChangeEvent evt) {
//fTitlePanel.setTitle(fDialog.getTitle());
}
};
}
private ActionListener createCloseButtonActionListener() {
return new ActionListener() {
public void actionPerformed(ActionEvent e) {
// simulate clicking the “real” close button on a window.
fDialog.dispatchEvent(new WindowEvent(fDialog, WindowEvent.WINDOW_CLOSING));
}
};
}
private static class TitlePanel extends JPanel {
private static final Color FONT_COLOR = new Color(255, 255, 255, 255);
private static final Color UNFOCUSED_FONT_COLOR = new Color(0xcccccc);
private static final Color HIGHLIGHT = new Color(255, 255, 255, 25);
private static final Color TOP_BACKGROUND_TOP = new Color(255, 255, 255, 59);
private static final Color TOP_BACKGROUND_BOTTOM = new Color(196, 196, 196, 59);
private static final Color BOTTOM_BACKGROUND = new Color(255, 255, 255, 30);
private static final Color UNFOCUSED_BACKGROUND = new Color(0, 0, 0, 10);
private static final Icon CLOSE_ICON = new ImageIcon(
TitlePanel.class.getResource(
“/com/explodingpixels/macwidgets/images/close.png”));
private static final Icon CLOSE_HOVER_ICON = new ImageIcon(
TitlePanel.class.getResource(
“/com/explodingpixels/macwidgets/images/close_hover.png”));
private static final Icon CLOSE_PRESSED_ICON = new ImageIcon(
TitlePanel.class.getResource(
“/com/explodingpixels/macwidgets/images/close_pressed.png”));
private final JButton fCloseButton = new JButton(CLOSE_ICON);
private final JComponent fSpacer;
private final JLabel fLabel;
private TitlePanel(String title, ActionListener closeButtonActionListener) {
fLabel = new JLabel(title, SwingConstants.CENTER);
fLabel.setFont(fLabel.getFont().deriveFont(Font.BOLD, 11.0f));
setOpaque(false);
setPreferredSize(new Dimension(-1, 20));
updateFocusState();
fCloseButton.setBorder(getCloseButtonBorder());
fCloseButton.setVerticalAlignment(SwingConstants.CENTER);
fCloseButton.setOpaque(false);
fCloseButton.setFocusable(false);
fCloseButton.setBorderPainted(false);
fCloseButton.setContentAreaFilled(false);
fCloseButton.setRolloverIcon(CLOSE_HOVER_ICON);
fCloseButton.setPressedIcon(CLOSE_PRESSED_ICON);
fCloseButton.addActionListener(closeButtonActionListener);
fSpacer = MacWidgetFactory.createSpacer(fCloseButton.getPreferredSize().width, 0);
setLayout(new BorderLayout());
add(fLabel, BorderLayout.CENTER);
add(fCloseButton, PlatformUtils.isMac() ? BorderLayout.WEST : BorderLayout.EAST);
add(fSpacer, PlatformUtils.isMac() ? BorderLayout.EAST : BorderLayout.WEST);
}
private void hideCloseButton() {
fCloseButton.setVisible(false);
fSpacer.setVisible(false);
}
private Border getCloseButtonBorder() {
return PlatformUtils.isMac()
? BorderFactory.createEmptyBorder(0, 5, 0, 0)
: BorderFactory.createEmptyBorder(0, 0, 0, 5);
}
private void setTitle(String title) {
fLabel.setText(title);
}
private void updateFocusState() {
Boolean focused = WindowUtils.isParentWindowFocused(this);
fLabel.setForeground(focused == null || focused ? FONT_COLOR : UNFOCUSED_FONT_COLOR);
}
@Override
protected void paintComponent(Graphics g) {
// create a copy of the graphics object and turn on anti-aliasing.
Graphics2D graphics2d = (Graphics2D) g.create();
graphics2d.setRenderingHint(
RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// calculate the point in the title bar at which to change the background color.
int midPointY = ROUNDED_RECT_DIAMETER / 2 + 3;
// if the window has focus, draw a shiny title bar.
// else draw a flat background.
if (WindowUtils.isParentWindowFocused(this)) {
// 1. The top half ————————————————————–//
// create and set the shiny paint.
GradientPaint paint =
new GradientPaint(0, 0, TOP_BACKGROUND_TOP, 0, midPointY, TOP_BACKGROUND_BOTTOM);
graphics2d.setPaint(paint);
// create a rounded rectangle area as big as the entire title bar, then subtract
// off the bottom half (roughly) in order to have perfectly square edges.
Area titleArea = new Area(new Area(new RoundRectangle2D.Double(
0, 0, getWidth(), getHeight(), ROUNDED_RECT_DIAMETER, ROUNDED_RECT_DIAMETER)));
titleArea.subtract(new Area(new Rectangle(0, midPointY, getWidth(), midPointY)));
// draw the top half of the title bar (the shine).
graphics2d.fill(titleArea);
// 2. The bottom half ———————————————————–//
// draw the bottom half of the title bar.
int bottomHeight = getHeight() – midPointY;
graphics2d.setColor(BOTTOM_BACKGROUND);
graphics2d.fillRect(0, midPointY, getWidth(), bottomHeight);
} else {
// create an area that has rounded corners at the top and square corners at the
// bottom.
graphics2d.setColor(UNFOCUSED_BACKGROUND);
Area titleArea = new Area(new Area(new RoundRectangle2D.Double(
0, 0, getWidth(), getHeight(), ROUNDED_RECT_DIAMETER, ROUNDED_RECT_DIAMETER)));
titleArea.subtract(new Area(
new Rectangle(0, midPointY, getWidth(), midPointY)));
graphics2d.fill(titleArea);
graphics2d.setColor(HIGHLIGHT);
graphics2d.drawLine(0, getHeight() – 1, getWidth(), getHeight() – 1);
}
graphics2d.dispose();
}
}
private static class HudPanel extends JPanel {
private static final Color HIGHLIGHT = new Color(255, 255, 255, 59);
private static final Color HIGHLIGHT_BOTTOM = new Color(255, 255, 255, 25);
private static final Color BACKGROUND = new Color(30, 30, 30, 216);
private HudPanel() {
setLayout(new BorderLayout());
setOpaque(false);
}
@Override
protected void paintBorder(Graphics g) {
// create a copy of the graphics object and turn on anti-aliasing.
Graphics2D graphics2d = (Graphics2D) g.create();
graphics2d.setRenderingHint(
RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// paint a border around the window that fades slightly to give a more pleasnt highlight
// to the window edges.
GradientPaint paint = new GradientPaint(0, 0, HIGHLIGHT, 0, getHeight(), HIGHLIGHT_BOTTOM);
graphics2d.setPaint(paint);
graphics2d.drawRoundRect(0, 0, getWidth() – 1, getHeight() – 1, ROUNDED_RECT_DIAMETER,
ROUNDED_RECT_DIAMETER);
graphics2d.dispose();
}
@Override
protected void paintComponent(Graphics g) {
// create a copy of the graphics object and turn on anti-aliasing.
Graphics2D graphics2d = (Graphics2D) g.create();
graphics2d.setRenderingHint(
RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
graphics2d.setComposite(AlphaComposite.Src);
// draw the rounded rectangle background of the window.
graphics2d.setColor(BACKGROUND);
graphics2d.fillRoundRect(0, 0, getWidth(), getHeight(),
ROUNDED_RECT_DIAMETER, ROUNDED_RECT_DIAMETER);
// tell the shadow to revalidate.
getRootPane().putClientProperty(“apple.awt.windowShadow.revalidateNow”, new Object());
graphics2d.dispose();
}
}
private static class BottomPanel extends JPanel {
private static final Icon RESIZE_ICON = new ImageIcon(
TitlePanel.class.getResource(
“/com/explodingpixels/macwidgets/images/resize_corner_dark.png”));
private final Window fWindow;
private final JLabel fResizeCorner = new JLabel(RESIZE_ICON);
private int fXOffsetToWindowEdge;
private int fYOffsetToWidnowEdge;
public BottomPanel(Window window) {
super(new FlowLayout(SwingConstants.RIGHT));
fWindow = window;
add(fResizeCorner);
fResizeCorner.addMouseListener(createMouseListener());
fResizeCorner.addMouseMotionListener(createMouseMotionListener());
}
private MouseAdapter createMouseListener() {
return new MouseAdapter() {
@Override
public void mousePressed(MouseEvent e) {
Point windowPoint =
SwingUtilities.convertPoint(fResizeCorner, e.getPoint(), fWindow);
fXOffsetToWindowEdge = fWindow.getWidth() – windowPoint.x;
fYOffsetToWidnowEdge = fWindow.getHeight() – windowPoint.y;
}
};
}
private MouseMotionListener createMouseMotionListener() {
return new MouseMotionAdapter() {
@Override
public void mouseDragged(MouseEvent e) {
Point windowPoint = SwingUtilities.convertPoint(fResizeCorner, e.getPoint(), fWindow);
fWindow.setSize(windowPoint.x + fXOffsetToWindowEdge,
windowPoint.y + fYOffsetToWidnowEdge);
}
};
}
}
}
For some strange reason, the close button does not work, but there should be an easy fix.
September 3, 2009 at 10:01 pm
I’ve also noticed that Snow Leopard, which I possibly shouldn’t have installed yesterday, has a lighter background on the title bar, so you don’t want to do the paint hack on the UnifiedToolBar on Snow Leopard, at least with Java 1.6.
BTW, I’ve been thinking of trying to develop a complete PLAF for an iApp-like interface that would be cross-platform. One would have to skirt Apple L&F patents, of course.
I would LGPL such a thing, if I get there.
-K
October 1, 2009 at 11:00 pm
Yes? I would help you. I just did a iApp CheckboxUI for my app.
September 5, 2009 at 8:09 am
Hi Ken,
Just wanted to say good job and thanks!
P.S. any workaround for the snow leopard + unified toolbar coloring?
September 5, 2009 at 10:55 am
Thanks Martha! I just installed Snow Leopard and will look at the Unified Toolbar issue ASAP.
-Ken