JTechDev

Style Java application for Mac OS X

In this tutorial, I will show you how to convert a plain looking Java application to a Mac OS X styled application when on Mac OS X. I will be using an extremely helpful library called “macwidgets”. You can find out more about macwidgets and find the library downloads here: https://github.com/JTWalraven/macwidgets

Here is the description of what the macwidgets library does:

"Mac Widgets for Java is a collection of widgets seen in OS X applications, offered through a Java API. These widgets help Java developers create Mac themed applications. Their usage is not restricted to Mac though, as they will render across platforms."

Getting started

To start off, you will need a base Java application.
You can download a simple example application here to follow along with this tutorial. The macwidgets library can be found here.

The first thing that needs to be done is to add the macwidgets jar and the forms jar as dependencies to the project. Once you do that, you can use all of the features in macwidgets.

Make the menu bar Mac OS X styled

You will want to make the menu bar show up as the normal menu bars do on a Mac if you have any intention of running your application on Mac OS X. This does not require the macwidgets library at all. In fact, all you have to do is add the following:


// Set that the file menu will be on the top of the screen 

System.setProperty("apple.laf.useScreenMenuBar", "true"); 

System.setProperty("com.apple.mrj.application.apple.menu.about.name", "@AppName");

This makes the menu bar go to the top of the screen and also sets the name of the application in the about dialog to be @AppName.

Make the window Snow Leopard metal style

The next thing you need to do is set the window to the Snow Leopard metal style. This will require macwidgets. First, import the MacUtils:

import com.explodingpixels.macwidgets.MacUtils;

Then you need to apply the style to the JFrame:

// Change the style of the window to mac os x. 
MacUtils.makeWindowLeopardStyle(f.getRootPane());

The windows should now look like the following:

JavaMacTheming#1

Make a unified tool bar

To make the tool bar unified, you will need to change the toolbar from a JToolBar to a UnifiedToolBar. To do this, change the the following code:

// Create a new toolbar 
JToolBar toolBar = new JToolBar(); 
f.add(toolBar, BorderLayout.NORTH);

to:

// Create a new toolbar 
UnifiedToolBar toolBar = new UnifiedToolBar(); 
f.add(toolBar.getComponent(), BorderLayout.NORTH);

Also, the buttons will need to be slightly changed. For each button, you will need to add the following:

button.putClientProperty("JButton.buttonType", "textured");

And you will need to convert the button to an AbstractButton and add it through one of three add methods:

// Create a new mac button based on the JButton. 
AbstractButton macButton = MacButtonFactory.makeUnifiedToolBarButton(button); 
// Add the button to the left side of the toolbar. 
toolBar.addComponentToLeft(button);

Your toolbar initialization code should now look like this:

// Create a new toolbar
UnifiedToolBar toolBar = new UnifiedToolBar();
f.add(toolBar.getComponent(), BorderLayout.NORTH);

// Create a button for the toolbar
JButton saveButton = new JButton("Save");
// Make sure the text is in the correct position
saveButton.setVerticalTextPosition(SwingConstants.BOTTOM);
saveButton.setHorizontalTextPosition(SwingConstants.CENTER);

// Set the icon of the button
saveButton.setIcon(new ImageIcon(MacThemeExample.class.getResource("floppy.png")));
saveButton.putClientProperty("JButton.buttonType", "textured");

// Make the dimensions of the button consistant
saveButton.setPreferredSize(new Dimension(80, 60));
saveButton.setMinimumSize(new Dimension(80, 60));
saveButton.setMaximumSize(new Dimension(80, 60));

AbstractButton macSaveButton = MacButtonFactory.makeUnifiedToolBarButton(saveButton);
// Add the button to the toolbar
toolBar.addComponentToLeft(macSaveButton);

// Create a button for the toolbar
JButton cogButton = new JButton("Configure");
// Make sure the text is in the correct position
cogButton.setVerticalTextPosition(SwingConstants.BOTTOM);
cogButton.setHorizontalTextPosition(SwingConstants.CENTER);

// Set the icon of the button
cogButton.setIcon(new ImageIcon(MacThemeExample.class.getResource("cog.png")));
cogButton.putClientProperty("JButton.buttonType", "textured");

// Make the dimensions of the button consistant
cogButton.setPreferredSize(new Dimension(80, 60));
cogButton.setMinimumSize(new Dimension(80, 60));
cogButton.setMaximumSize(new Dimension(80, 60));

AbstractButton macCogButton = MacButtonFactory.makeUnifiedToolBarButton(cogButton);
// Add the button to the toolbar
toolBar.addComponentToLeft(macCogButton);

The application should now look like the image below:

JavaMacTheming#2

You now have a fully functional window that has a beautiful tool bar. But wait a minute! Why is the background dark gray? This is because making the window Leopard style means the metal style. This metal style makes the whole window a darker gray color.

Make the panels Mac OS X styled

To change the color from the darker gray color, you will have to set the color of the panel to the native panel color for Mac OS X. Note: If you have a tab pane, you will also have to get the color for that on mac on set the panel’s color.

// Set the panel's style to mac os x.
panel.setBackground(new Color(237, 237, 237));

Why is the color (237,237,237)? This is what mac uses as the default color of the window. It should now look like this:

JavaMacTheming#3

The main window now looks and acts just like a Mac application! The only thing that is left is making the HUD window appear to be a Mac HUD window.

Making a JDialog look like a Mac OS X HUD window

First, replace JDialog in the initialization with HudWindow.

HudWindow dialog = new HudWindow();

Now, wherever dialog used to be referenced, replace with dialog.getDialog() unless you are adding an item, in which case you would replace it with dialog.getContentPane().

dialog.getJDialog().setTitle("HUD");
dialog.getJDialog().setSize(300, 350);
dialog.getJDialog().setLocationRelativeTo(null);
dialog.getJDialog().setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);

// Add a label
dialog.getContentPane().add(new JLabel("Hello world!  This is a dialog!"), BorderLayout.NORTH);

// Add a button
dialog.getContentPane().add(new JButton("Click me!"), BorderLayout.SOUTH);

// Show the dialog
dialog.getJDialog().setVisible(true);

Please note that BoarderLayout is not a very good layout manager to use with this as it will not actually effect the layout that much. The window should now look like the following:

JavaMacTheming#4

#Making HUD items Mac OS X HUD styled

JLabel:

Simply replace the initializer with:

HudWidgetFactory.createHudLabel("Text");

Everything else will be handled for you.

JButton:

This is almost exactly the same as the JLabel:

HudWidgetFactory.createHudButton("Text");

The application should end up looking something like this:

JavaMacTheming#5

And that’s it!

Conclusion

Macwidgets makes it very easy to set up and make your Java applications look like they were native coca applications. Many of these features you would only want to use on mac so you may want to use “PlatformUtils.isMac()” to check if you are on the mac platform. There are many examples of how to use macwidgets here: https://github.com/JTWalraven/macwidgets/wiki/Examples There are also many examples of how to use macwidgets included in the source code. Leave any questions or comments you have below.