Window Decoration, Part 5 - TitlePane Variations(09:25, 03. Jun. 2010)

Synthetica V2.10 supports some new UI-properties which allows you to customize the title pane layout for your frames and dialogs. The image below demonstrates a regular title pane with the Simple2D theme.

RegularTitlePane

However, for a more modern look you maybe prefer a different layout with a larger icon (menu button) and a slightly different menu bar location. As you maybe know Synthetica provides style support for multiple component instances. So it's possible to use a different layout only for the main screen of your application - other windows are not affected and appear in regular style.

Large TitlePane

An additional synth file contains all necessary declarations of the named default properties. Please note that the window name (LargeTitlePane) is appended to each needed default property.

<synth>

  <style id="largeTitlePaneWindow">
    <defaultsProperty key="Synthetica.rootPane.titlePane.showMenuBarInTitlePane.LargeTitlePane" type="boolean" value="true" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.menuButton.useOriginalImageSize.LargeTitlePane" type="boolean" value="true" />    
    <defaultsProperty key="Synthetica.rootPane.titlePane.menuButton.alignment.LargeTitlePane" type="integer" value="11" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.menuButton.insets.LargeTitlePane" type="insets" value="2 0 0 0" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.iconifyButton.alignment.LargeTitlePane" type="integer" value="11" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.iconifyButton.insets.LargeTitlePane" type="insets" value="2 0 0 0" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.toggleButton.alignment.LargeTitlePane" type="integer" value="11" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.toggleButton.insets.LargeTitlePane" type="insets" value="2 0 0 0" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.closeButton.alignment.LargeTitlePane" type="integer" value="11" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.closeButton.insets.LargeTitlePane" type="insets" value="2 0 0 0" />
  </style>  

  <style id="slimTitlePaneWindow">
    <defaultsProperty key="Synthetica.rootPane.titlePane.showMenuBarInTitlePane.SlimTitlePane" type="boolean" value="true" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.title.visible.SlimTitlePane" type="boolean" value="false" />
    <defaultsProperty key="Synthetica.rootPane.titlePane.menuBar.insets.SlimTitlePane" type="insets" value="-20 0 0 0" />
  </style>  
    
</synth>

In your application you have to load the additional configuration file through a custom loader just like below.

UIManager.setLookAndFeel(new SyntheticaSimple2DLookAndFeel(){
    @Override
    protected void loadXMLConfig(String fileName) throws ParseException
    {
      super.loadXMLConfig(fileName);
      super.loadXMLConfig("/demo/titlepane/titlePaneVariations.xml");
    }
  });

After setting the window name to the configured value the new style appears.

JFrame f = new JFrame("Large TitlePane Window");
//apply new window style
f.setName("LargeTitlePane");

Sometimes, when you need as much space as possible for the content area of your application, it's useful to place the menubar on top - in this case the window title disappears. In the screenshot below the slim title pane style (SlimTitlePane) is set.

Slim TitlePane

WebStart Demo

Download Demo Sourcecode

Note: To keep executables as small as possible, the webstart app doesn't includes the Java2D-library SyntheticaBatik - therefore Java 6 is required for proper execution.

Related Posts

Window Decoration, Part 1 - Basics and Title Pane
Window Decoration, Part 2 - Non-Rectangular Window Shapes
Window Decoration, Part 3 - Custom Decoration for Dialogs
Window Decoration, Part 4 - Logo Renderer and More