QPanelUI Demo

What Is It

The QPanelUI is a PanelUI that supports:

How To Use It

You can configure our own QPanelUI by calling:

Color topColor = Color.lightGray;
Color bottomColor = Color.gray;
QPanelUI ui = QPanelUI(topColor, bottomColor);
ui.setShadowSize(3);
ui.setCalloutSize(5);
ui.setCalloutType(QPanelUI.CalloutType.TOP_CENTER);
myPanel.setUI(ui);

Or you can use a static helper method to use a generic out-of-the-box look:

/**
 * This returns a subtly off-white UI with rounded corners and a (even more
 * subtle) one-pixel gray border.
 */
public static QPanelUI createBoxUI();

/**
 * This returns a white UI with rounded corners, a small callout, and
 * shadow.
 */
public static QPanelUI createToolTipUI();

How It Works

When a QPanelUI is installed on a JPanel it replaces the panel's Border. This custom border is sized so it can accommodate the callouts, shadow, rounded corners, etc.

The border and the QPanelUI share the same renderer. When the border is rendered clipping is used to punch a hole in the middle of the Graphics, and when the QPanelUI is rendered clipping is used to strip away the border. So the panel and its border render the same elements twice with complementary clipping.

There are two additional criteria that guided the current implementation:

  1. Using this PanelUI should not interfere with LayoutManagers. That is: how LayoutManagers place children shouldn't affect or be affected by this UI.
  2. Children of this panel shouldn't overlap the borders/shadows/callouts of this UI. That is: children shouldn't require any extra padding to accommodate this UI. If someday you switch this UI out (or in): the children should mostly be unaffected.

In this demo if you mouse over the preview: some markings appear to show the total width/height of the panel, and where the border starts/stops.

Discussion

This is the third rewrite of a recurring pet project of mine: a simple, configurable good-looking panel L&F. The previous iteration included a more distinct look, but this implementation tries to lean towards aesthetics that better fit Flat 2.0 UIs. The callouts were added so this can accommodate popover and stylized tooltips.