|
Everybody knows the commonly used title panel layout for frames which is used by most desktop applications - see sketch below.
The screenshot below demonstrates how it can look in a real application with the SyntheticaAluOxide theme.
Note: In the screenshot the title panel background is not distinguishable from the toolBar even if the toolBar isn't part of the title panel. The visual behavior depends on the active theme.
In Synthetica V2.15 we support an additional layout called SECONDARYMENU which is useful to make an application more unique. The sketch below outlines the title panel elements. As you can see the menu button is spanned across two rows and a user component can be directly set for the second row.
Lets take a closer look at each step to enable this layout/style for the SyntheticaTunes application. The first step is to create a custom XML-file which holds the new window style. Because in most cases you want to change the appearance for the main frame only, Synthetica supports specifying a separate style for a named window.
<!--
*******************************************************************************
MainFrame style
*******************************************************************************
-->
<style id="MainFrame">
<defaultsProperty key="Synthetica.rootPane.titlePane.title.visible.MainFrame" type="boolean" value="false" />
<defaultsProperty key="Synthetica.rootPane.titlePane.layoutStyle.MainFrame" type="string" value="SECONDARYMENU" />
<defaultsProperty key="Synthetica.rootPane.titlePane.showMenuBarInTitlePane.MainFrame" type="boolean" value="true" />
<defaultsProperty key="Synthetica.rootPane.titlePane.clipMenuBarWidth.MainFrame" type="boolean" value="true" />
<defaultsProperty key="Synthetica.rootPane.titlePane.title.alignment.MainFrame" type="integer" value="11" />
<defaultsProperty key="Synthetica.rootPane.titlePane.menuButton.alignment.MainFrame" type="integer" value="11" />
<defaultsProperty key="Synthetica.rootPane.titlePane.iconifyButton.alignment.MainFrame" type="integer" value="11" />
<defaultsProperty key="Synthetica.rootPane.titlePane.toggleButton.alignment.MainFrame" type="integer" value="11" />
<defaultsProperty key="Synthetica.rootPane.titlePane.closeButton.alignment.MainFrame" type="integer" value="11" />
<defaultsProperty key="Synthetica.rootPane.titlePane.menuBar.insets.MainFrame" type="insets" value="4 8 0 0"/>
<defaultsProperty key="Synthetica.rootPane.titlePane.menuButton.insets.MainFrame" type="insets" value="0 0 0 0"/>
<defaultsProperty key="Synthetica.rootPane.titlePane.iconifyButton.insets.MainFrame" type="insets" value="2 0 0 0"/>
<defaultsProperty key="Synthetica.rootPane.titlePane.toggleButton.insets.MainFrame" type="insets" value="2 0 0 0"/>
<defaultsProperty key="Synthetica.rootPane.titlePane.closeButton.insets.MainFrame" type="insets" value="2 0 0 2"/>
</style>
The most important settings are in the first four entries - the rest covers alignment (set to top - GridBagConstraints.NORTH) and insets. In the next step we have to load the XML-file when the look and feel is set.
UIManager.setLookAndFeel(new SyntheticaAluOxideLookAndFeel(){
@Override
protected void loadCustomXML() throws ParseException
{
loadXMLConfig("/resources/custom.xml");
}
});
To apply the style to the window set the window name and update the rootPaneUI.
setName("MainFrame");
getRootPane().updateUI();
The menu button is ued for the application logo - for this take a lookup for the button and set the logo as icon.
JButton b = (JButton)SyntheticaLookAndFeel.findComponent("RootPane.titlePane.menuButton", this);
b.setIcon(new ImageIcon(this.getClass().getResource("/resources/icons/menuButton.png")));
The menu bar is set a usual - only the tool bar has to be set in a specific way.
setJMenuBar(new AppMenuBar());
toolBar = new TunesToolBar();
toolBar.setFloatable(false);
((SyntheticaTitlePane)((SyntheticaRootPaneUI)getRootPane().getUI()).getTitlePane()).setUserComponent(toolBar);
That's all, the new appearance is more unique and gives your app a cool, modern look. Note: With the new style the application header needs a bit more horizontal space but less vertical space - this fits pretty well with current display ratios (16:9, 16:10).
The complete application source code is available for SyntheticaAddons customers only and can be downloaded from the SyntheticaAddons download page.
Sometimes you have to keep the menu bar at it's regular position i.e. to use the whole herizontal space. This can be simply achieved by setting the UI-property "Synthetica.rootPane.titlePane.showMenuBarInTitlePane" to false - see custom XML. The result is also appealing but of course needs some extra vertical space.
Related Posts
|