Swing-Dialoge im Vista-Stil

Herkömmliche Swing-Dialoge weichen von denen in Windows(R) Vista(R) ab. Dieses Tutorial zeigt, wie Sie Vista-ähnliche Dialoge erstellen.


Die Java Swing-Entwickler sind stets bemüht, die grafischen Oberflächen an die verschiedenen Betriebssysteme anzupassen. Ein mit Java erzeugtes Fenster soll unter Windows XP genauso aussehen, wie es dies bei anderen Programmen auch tut. Auf einem Mac soll ein Fenster, Button und jede Textbox genauso aussehen wie andere Programme auf dem Mac.

Bei Windows Vista liegen die Entwickler jedoch noch zurück: viele Elemente unterscheiden sich von den Standardkomponenten des Betriebssystems. So auch die Informationsdialoge, auch Message Boxen genannt.


In diesem Tutorial soll gezeigt werden, wie mit einfachen Mitteln eine eigene Klasse entworfen werden kann, welche die aus Vista® bekannten Dialoge nachbildet. Am Ende des Tutorials findet sich eine nützliche Klasse, die Sie für Ihre eigenen Projekte benutzen können.

Der Unterschied


Auf der linken Seite sehen Sie den Standard-Dialog, welcher Swing unter Vista erzeugt, wenn Sie die Methode JOptionPane.showMessageDialog(...) verwenden. Auf der rechten Seite sehen Sie hingegen ein eigens erzeugtes Dialogfenster, welches dem Aussehen einer Dialogbox in Windows Vista erheblich ähnlicher sieht.

Die Herangehensweise

Wir lösen uns von der Standardlösung und erstellen uns eine eigene Klasse zur Darstellung von Dialogen. Dazu orientieren wir uns an den Microsoft®-Richtlinien zur Erstellung von MessageBoxen, wie sie im Windows Vista Developer Center festgelegt sind [LINK].

Zuerst schauen wir uns daher die vorgegebenen Dialoge an und gestalten unsere Dialogfenster gemäß den Vorgaben. Als Container verwenden wir einen JDialog. Dieser hat gegenüber dem JWindow oder JFrame den Vorteil, dass er sich mittels Methodenaufruf modal einstellen lässt. Das bedeutet, dass die Programmausführung gestoppt wird und erst dann fortgesetzt, wenn der Benutzer den Dialog mittels Knopfdruck schließt.

Die benötigten Elemente umfassen ein ImageIcon zur Darstellung der kleinen Grafik, eine JTextArea für den Nachrichtentext und ein weiteres JLabel für den blauen Überschriftstext. Ein ActionListener horcht auf dem Button und schließt das Dialogfenster bei einem Klick darauf.
  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. /** Schriftarten für die Texte */
  11. private static Font titleTextFont = new Font("Segoe UI", Font.PLAIN, 15);
  12. private static Font messageTextFont = new Font("Segoe UI", Font.PLAIN, 12);
  13.  
  14. /** Farben für den Hintergrund und den Titeltext */
  15. private static Color background = Color.WHITE;
  16. private static Color titleTextColor = new Color(0, 90, 210); // blau
  17.  
  18. /**
  19.   * Zeigt ein Dialogfenster im Windows Vista-Stil an
  20.   *
  21.   * @param title der Titel des Dialogfensters
  22.   * @param labelText der blaue Informationstext
  23.   * @param messageText der ausführliche Text
  24.   */
  25. public VistaDialog(String title, String labelText, String messageText){
  26. super();
  27. setLayout(new BorderLayout());
  28.  
  29. // Icon für die Grafik
  30. BufferedImage icon = null;
  31. try{
  32. icon = ImageIO.read(getClass().getResource("images/error.png"));
  33. }
  34. catch(IOException e){
  35. System.out.println("Bild nicht gefunden!");
  36. e.printStackTrace();
  37. }
  38. JLabel iconLabel = new JLabel();
  39. iconLabel.setIcon(new ImageIcon(icon));
  40.  
  41. // JLabel für den kurzen blauen Informationstext
  42. JLabel titleText = new JLabel(labelText);
  43. titleText.setForeground(titleTextColor);
  44. titleText.setFont(titleTextFont);
  45.  
  46. // JPanel für die Grafik und die Kurzbeschreibung
  47. JPanel headerPanel = new JPanel();
  48. headerPanel.setBackground(background);
  49. headerPanel.setLayout(new FlowLayout(FlowLayout.LEFT));
  50. headerPanel.add(iconLabel);
  51. headerPanel.add(titleText);
  52.  
  53. // JTextArea für die ausführliche Fehlerbeschreibung
  54. JTextArea messages = new JTextArea(messageText);
  55. messages.setLineWrap(true);
  56. messages.setWrapStyleWord(true);
  57. messages.setFont(messageTextFont);
  58. messages.setEditable(false);
  59.  
  60. // JPanel für den Informationstext
  61. JPanel mainPanel = new JPanel();
  62. mainPanel.setLayout(new BorderLayout(10, 10));
  63. mainPanel.setBackground(background);
  64. messages.setBackground(background);
  65. // ein leerer Rahmen dient dem Einhalten eines Abstandes zum Rand
  66. messages.setBorder(BorderFactory.createEmptyBorder(10, 50, 0, 10));
  67. mainPanel.add(messages, BorderLayout.CENTER);
  68.  
  69. // JPanel für den Button
  70. JPanel buttonPanel = new JPanel();
  71. buttonPanel.setLayout(new FlowLayout(FlowLayout.RIGHT));
  72. JButton closeButt = new JButton();
  73. closeButt.setText("Schließen");
  74. closeButt.addActionListener(new ActionListener(){
  75. public void actionPerformed(ActionEvent e){
  76. // Dialog beim Klick auf "Schließen" verstecken
  77. setVisible(false);
  78. }
  79. });
  80. buttonPanel.add(closeButt);
  81.  
  82. // die JPanels werden dem Dialogfenster hinzugefügt
  83. add(headerPanel, BorderLayout.NORTH);
  84. add(mainPanel, BorderLayout.CENTER);
  85. add(buttonPanel, BorderLayout.SOUTH);
  86.  
  87. // Dialogweite Einstellungen vornehmen
  88. setTitle(title);
  89. setIconImage(null);
  90. setModal(true);
  91. setAlwaysOnTop(true);
  92. setMinimumSize(new Dimension(400, 200));
  93. pack();
  94. setResizable(false);
  95. setLocationRelativeTo(null);
  96. setDefaultCloseOperation(DISPOSE_ON_CLOSE);
  97. // Dialogfenster anzeigen
  98. setVisible(true);
  99. }
  100. }
In den Zeilen 10-16 werden Konstanten für die Schriftarten und die Farben vereinbart. In den Zeilen 30 bis 39 wird die Grafik geladen. Sie finden die benötigten Grafiken am Ende des Tutorials zum Download. Von Zeile 42 bis 44 wird der blaue Kurztext hinzugefügt. Der Kurztext wird zusammen mit der Grafik auf ein JPanel gelegt (Zeile 47-51).
Danach wird der ausführliche Informationstext in einen Textbereich gegeben und in ein weiteres JPanel gelegt (Z. 54-67).
Dann wird der Button im unteren Teil des Dialogs hinzugefügt (Z. 70-80). Schließlich werden einige dialogweite Einstellungen vorgenommen und das Dialogfenster angezeigt. Ein Aufruf des Dialogs erfolgt nun beispielsweise mit

new VistaDialog("Mein Titel", "Dies ist aber ungewöhnlich...", "Es ist ein sehr schlimmer Fehler unterlaufen!");

Fertig! Sie können nun Dialoge im Vista Design für Ihre Programme einsetzen. Im Anhang an dieses Tutorial finden Sie eine Klasse, welche Ihnen ebenfalls die Anzeige von reinen Informationsmeldungen oder auch Ja/Nein-Abfragen ermöglicht.


 
 von Manuel Kaess am 13.02.2008  0 Kommentare ungenügend