The developers at the Java Swing team are anxious of reproducing the look of the operating system the Java Runtime Environment runs under. A window created with Java under Windows® XP shall look like a native window would look like under this OS. Running under a MacOS®, the window shall look like a native MacOS® window.

However, when it comes to Windows® Vista®, developers are certainly a step behind: many elements differ from the standard components of the OS. In another tutorial I was already about how to implement a Vista® like help viewer component. This time I will write about the information windows that are used extensively throughout GUI programs. They are called message boxes.


In this tutorial I will show how to easily create Vista®-like message boxes. At the end of the tutorial you will find a usefull class which offers various message box types and can easily be used within your own application.

The difference


On the left you see the standard message box that Swing generates using one of the JOptionPane.showMessageDialog(...) methods under the Windows look and feel. On the right you see a dialog window resembling the ones in Windows® Vista®, which you will be able to create after reading this tutorial.

Getting started

We don't use the standard message boxes that Swing offers any more and create an own class for creating the dialogs. This said, we need to take a look at the Microsoft® guidelines of creating message boxes in Vista® first. They can be found in the Windows® Vista® Developer Center [LINK].

Since we want to build similar looking dialogs we first need to take a look at the ones that exist in Vista®. As the container component we choose a JDialog. Compared to a JWindow or JFrame it has the advantage of being able to be set as modal. This means that our program will interrupt its work until the message box is being closed by the user.

The needed elements comprise a ImageIcon for the small image, a JTextArea for the message text and another JLabel for the blue colored title text. An ActionListener is registered to the button and closes the dialog window after a click on. 
  1. import javax.imageio.ImageIO;
  2. import javax.swing.*;
  3. import java.awt.*;
  4. import java.awt.event.*;
  5. import java.awt.image.BufferedImage;
  6. import java.io.IOException;
  7.  
  8. public class VistaDialog extends JDialog 
  9. {
  10.    /** Fonts for the texts */
  11.    private static Font titleFont = new Font("Segoe UI", Font.PLAIN, 15);
  12.    private static Font messageFont = new Font("Segoe UI", Font.PLAIN, 12);
  13.  
  14.    /** Colors for the background and the title text */
  15.    private static Color background = Color.WHITE;
  16.    private static Color titleTextColor = new Color(0, 90, 210); // blue
  17.  
  18.    /**
  19.     * Shows a dialog window in Windows Vista style
  20.     * 
  21.     * @param title the dialog's title
  22.     * @param labelText the blue title text
  23.     * @param messageText the description text
  24.     */
  25.    public VistaDialog(String title, String labelText, String messageText){
  26.       super();
  27.       setLayout(new BorderLayout());
  28.  
  29.       // Icon for the little image
  30.       BufferedImage icon = null;
  31.       try{
  32.          icon = ImageIO.read(getClass().getResource("images/error.png"));
  33.       }
  34.       catch(IOException e){
  35.     	 System.out.println("Error loading image: " + e.getMessage());
  36.       }
  37.       JLabel iconLabel = new JLabel();
  38.       iconLabel.setIcon(new ImageIcon(icon));
  39.  
  40.       // JLabel for the blue title text
  41.       JLabel titleText = new JLabel(labelText);
  42.       titleText.setForeground(titleTextColor);
  43.       titleText.setFont(titleFont);
  44.  
  45.       // JPanel for the image and the title
  46.       JPanel headerPanel = new JPanel();
  47.       headerPanel.setBackground(background);
  48.       headerPanel.setLayout(new FlowLayout(FlowLayout.LEFT));
  49.       headerPanel.add(iconLabel);
  50.       headerPanel.add(titleText);
  51.  
  52.       // JTextArea for the detailed description text
  53.       JTextArea messages = new JTextArea(messageText);
  54.       messages.setLineWrap(true);
  55.       messages.setWrapStyleWord(true);
  56.       messages.setFont(messageFont);
  57.       messages.setEditable(false);
  58.  
  59.       // JPanel for the information text
  60.       JPanel mainPanel = new JPanel();
  61.       mainPanel.setLayout(new BorderLayout(10, 10));
  62.       mainPanel.setBackground(background);
  63.       messages.setBackground(background);
  64.       // an empty border is used for spacing issues
  65.       messages.setBorder(BorderFactory.createEmptyBorder(10, 50, 0, 10));
  66.       mainPanel.add(messages, BorderLayout.CENTER);
  67.  
  68.       // JPanel for the button
  69.       JPanel buttonPanel = new JPanel();
  70.       buttonPanel.setLayout(new FlowLayout(FlowLayout.RIGHT));
  71.       JButton closeButt = new JButton();
  72.       closeButt.setText("Close");
  73.       closeButt.addActionListener(new ActionListener(){
  74.          public void actionPerformed(ActionEvent e){
  75.     	    // dispose the dialog after a click on the button
  76.     	    dispose();
  77.     	 }
  78.       });
  79.       buttonPanel.add(closeButt);
  80.  
  81.       // add the panels to the dialog window
  82.       add(headerPanel, BorderLayout.NORTH);
  83.       add(mainPanel, BorderLayout.CENTER);
  84.       add(buttonPanel, BorderLayout.SOUTH);
  85.  
  86.       // settings for the dialog
  87.       setTitle(title);
  88.       setIconImage(null);
  89.       setModal(true);
  90.       setAlwaysOnTop(true);
  91.       setMinimumSize(new Dimension(400, 200));
  92.       pack();
  93.       setResizable(false);
  94.       setLocationRelativeTo(null); // center the window on the screen
  95.       setDefaultCloseOperation(DISPOSE_ON_CLOSE);
  96.       // show the dialog window
  97.       setVisible(true);	
  98.    }
  99. }
In lines 10-16 some conatants for the fonts and colors are declared. The little image is loaded within lines 30 to 39. You find the needed images for download at the end of the tutorial. The short blue title text is inserted in lines 42 to 44. The title text and the image are put onto a JPanel (lines 47-51).
Afterwards, the detailed description text is put into a text area and into another JPanel (lines 54-67).
Then, the close button is being added (lines 70-80). In the end some settings concerning the dialog window itself are being made and the dialog is being shown. A call within your program could be done using something like this:

new VistaDialog("Error", "An unusual error occurred...", "A very severe error occurred while saving the file!");

Finished! You can now add dialogs in Windows® Vista® style to your application. Attached to this tutorial you find a class that offers several dialog types (also the type of yes/no question dialogs).