Skip to content

Latest commit

 

History

History
114 lines (80 loc) · 5.97 KB

titlepane.md

File metadata and controls

114 lines (80 loc) · 5.97 KB

Radiance look and feel - title pane

Introduction

Radiance provides a collection of APIs to configure the layout inside and around the title pane area of application windows.

In the screenshot above, the title pane control buttons (minimize, maximize, close) are on the left. In addition, each one of the three panes (folders, thread list, email thread) "pushes" some of its content into the title pane area:

  • The refresh icon in the folders pane
  • The search box in the thread list pane
  • Action icons in the email thread pane

Let's see what APIs Radiance provides to achieve this functionality.

Title content gravity

Use RadianceThemingCortex.GlobalScope.configureTitleContentGravity() API to configure the overall layout of the "core" content of the title pane - title text, application icon and control buttons:

  • The first parameter controls the gravity of the title text itself - leading, centered, trailing, platform-based or default Swing.
  • The second parameter controls the gravity of the control buttons - leading, trailing, platform-based or default Swing.
  • The third parameter controls the gravity of the application icon - none (icon not shown), next to title text, opposite of control buttons, platform-based or default Swing.

Extending application content into the title pane

The following APIs are available on RadianceThemingCortex.WindowScope:

  • extendContentIntoTitlePane(Window, RadianceThemingSlices.HorizontalGravity, RadianceThemingSlices.VerticalGravity) to marks the specified window to have its content extend vertically into the title pane area.
  • getTitlePaneControlInsets(Window) to query the insets that should be reserved for the main control buttons – close / maximize / minimize.
  • setPreferredTitlePaneHeight(Window, int) to increase the preferred height of the title pane area in case the content you extend into that area is taller than the main control buttons.
  • getTitleControlButtonGroupHorizontalGravity(Window window) to get the horizontal gravity for the control button group.
  • createTitlePaneControlButton(Window) to get a button that has consistent visual appearance and preferred size with the main control buttons.
  • markLabelAsTitlePaneText(Window, JLabel) to mark a label to be drawn as title pane text (window title).

Let's see a couple of examples.

Example A

In this example, we configure the frame as:

// Extend our content into the title pane and configure the title control buttons to be
// vertically centered and in the leading horizontal position (in our main selector
// pane).
RadianceThemingCortex.WindowScope.extendContentIntoTitlePane(visorMail,
        RadianceThemingSlices.HorizontalGravity.LEADING,
        RadianceThemingSlices.VerticalGravity.CENTERED);

// And increase the height of the title pane to play nicer with additional
// content that we are displaying in that area.
RadianceThemingCortex.WindowScope.setPreferredTitlePaneHeight(visorMail, 40);

The first call "moves" the control buttons to the leading position - which is the left edge of the title pane under left-to-right orientation. The second call increases the title pane height to 40 pixels to accommodate taller content - such as the search box. Note the second parameter in the first call, instructing Radiance to vertically center the control buttons in the taller title pane.

In addition, we're also using RadianceThemingCortex.WindowScope.createTitlePaneControlButton() API to create the refresh button in the first (folders) pane:

// Use Radiance API to create a button that has consistent look with the
// title pane control buttons
JButton refreshButton = RadianceThemingCortex.WindowScope.createTitlePaneControlButton(window);

refreshButton.setIcon(icon);
refreshButton.setToolTipText("Refresh mail");
builder.add(refreshButton).xy(1, 1);

Example B

We first configure the gravity of the control buttons to leading, along with increased title pane height to accommodate custom content:

RadianceThemingCortex.WindowScope.extendContentIntoTitlePane(this,
        RadianceThemingSlices.HorizontalGravity.LEADING,
        RadianceThemingSlices.VerticalGravity.CENTERED);
RadianceThemingCortex.WindowScope.setPreferredTitlePaneHeight(this, 40);

And now we want to make sure that the leading "New chat" button does not go into the area reserved for the control buttons. Here is the full code for the layout of this custom title pane:

FormBuilder builder = FormBuilder.create().
        columns("pref, 8dlu, center:0dlu:grow, 8dlu, pref, 8dlu, pref, 8dlu, pref").
        rows("p").
        padding(new EmptyBorder(8,
                12 + RadianceThemingCortex.WindowScope.getTitlePaneControlInsets(this).left,
                0, 12));

builder.add(new JButton("New chat")).xy(1, 1);

JLabel titleLabel = new JLabel("Chat", ic_chat_black_24px.of(16, 16), JLabel.CENTER);
titleLabel.setIconTextGap(6);
RadianceThemingCortex.WindowScope.markLabelAsTitlePaneText(this, titleLabel);
builder.add(titleLabel).xy(3, 1);

builder.add(new JTextField(12)).xy(5, 1);
builder.add(new JLabel(ic_help_outline_black_24px.of(14, 14))).xy(7, 1);
builder.add(new JLabel(ic_person_black_24px.of(12, 12))).xy(9, 1);

JPanel titlePane = builder.build();
titlePane.setPreferredSize(new Dimension(100, 40));
titlePane.setOpaque(true);
ComponentOrParentChainScope.setDecorationType(titlePane,
        DecorationAreaType.PRIMARY_TITLE_PANE);

this.getContentPane().add(titlePane, BorderLayout.NORTH);

The important part is the call to RadianceThemingCortex.WindowScope.getTitlePaneControlInsets which is then used to configure the padding on the FormBuilder.