Window Decoration, Part 3 - Custom Decoration for Dialogs(18:12, 23. Mar. 2010)

In Window Decoration Part 1 and Part 2 you've learned some basics about customizing window decorations based on predefined themes. In case that you want to use a totally different look for some of your windows, you can use named UI-properties to apply a new style to a window instance. The example below describes how to create a translucent window decoration for dialogs - you can also see similar dialogs on a very popular phone.

The first step is to create a translucent image file which will be used for our special dialog.

Window Decoration

The Synth file blueWindow.xml contains the declarations of the named default properties. Please note that the dialog name (BlueWindow) is appended to each needed default property - that's what we call named default property and that's also the way how static UI-properties become dynamic in Synthetica.

<synth>

  <style id="blueWindow">
    <defaultsProperty key="Synthetica.window.opaque.BlueWindow" type="boolean" value="false"/>
    <defaultsProperty key="Synthetica.window.contentPane.opaque.BlueWindow" type="boolean" value="false"/>

    <string id="rootPaneBorderSelected">/demo/bluewindow/blueWindow.png</string>
    <defaultsProperty key="Synthetica.rootPane.border.selected.BlueWindow" type="idref" value="rootPaneBorderSelected"/>
    <!-- remark line below to use default style for inactive window  -->
    <defaultsProperty key="Synthetica.rootPane.border.BlueWindow" type="idref" value="rootPaneBorderSelected"/>
    
    <defaultsProperty key="Synthetica.rootPane.titlePane.opaque.BlueWindow" type="boolean" value="false"/>
    <defaultsProperty key="Synthetica.rootPane.titlePane.title.center.BlueWindow" type="boolean" value="true"/>
    <defaultsProperty key="Synthetica.rootPane.titlePane.background.verticalTiled.BlueWindow" type="boolean" value="false"/>

    <defaultsProperty key="Synthetica.rootPane.border.insets.BlueWindow" type="insets" value="50 13 19 13"/>
    <defaultsProperty key="Synthetica.rootPane.border.size.BlueWindow" type="insets" value="8 13 19 13"/>
    <defaultsProperty key="Synthetica.rootPane.border.respectFill.BlueWindow" type="boolean" value="true"/>
  </style>

</synth>

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

UIManager.setLookAndFeel(new SyntheticaBlackEyeLookAndFeel(){
    @Override
    protected void loadXMLConfig(String fileName) throws ParseException
    {
      super.loadXMLConfig(fileName);
      super.loadXMLConfig("/demo/bluewindow/blueWindow.xml");
    }
  });

The last step is to apply the style to your dialog - simply by setting the named UI-property extension (BlueWindow) as component name.

JDialog d = new JDialog(owner);
d.setTitle("Blue Window Dialog");
//apply new window style
d.setName("BlueWindow");

 

Demo Screenshot

WebStart Demo

Download Demo Sourcecode

Note: The example works for dialogs and for non-maximizable frames. For maximizable frames some additional properties have to be specified. Because of some JVM bugs, for proper execution Java 6u14 or above is required - on MAC Java 1.5 is good enough.

Related Articles
Window Decoration, Part 1 - Basics and Title Pane
Window Decoration, Part 2 - Non-Rectangular Window Shapes
Customization - How to apply a Firefox style to a JTabbedPane

The upcoming article explains how to display your logo in the window title pane...CU JY