Tutorial:
Datenbank-Ladeprogramm mit Graphischer Benutzeroberfläche (Java_Intro_02) – GUI codieren

Dieses Dokument enthält die Anleitungen zum Codieren der Graphischen Benutzeroberfläche (GUI / Graphic User Interface).

Dabei werden in diesem Schritt nur die Elemente platziert und noch keine Reaktion auf das Anklicken von Schaltflächen implementiert.

Inhaltsverzeichnis:

Vorigerer Schritt: Einrichten des Projects 

Vorbemerkung und Funktion des Codes 
Vorbedingungen 
Code für die Anzeige der GUI 
Test 
Weitere Schritte und verwandte Dokumentation 

Nächster Schritt: ActionHandler 

Vorbemerkung und Funktion des Codes

In diesem Dokument wird der Code so weit implementiert, daß nach dem Starten des Programms die Benutzeroberfläche sichtbar wird.
Anschließend an den implementierten Code werden jene Teile des Codes erläutert, die die Hierarchie der einzelnen Elemente für die GUI und deren Eigenschaften festlegen.

Vorbedingungen

• Schritt 1: Einrichten des Projects ausgeführt – und dessen Vorbedingungen auch.

▲ zum Inhaltsverzeichnis

Code für die Anzeige der GUI

package js_intro02.client;
 
import java.awt.*;
import javax.swing.*;
/**
 *
 * @author kurt@javascout.biz
 * @date 2008-01-25
 *
 * @description
 *  Übungsbeispiel für:
 *  * Die Erstellung einer Graphischen Benutzeroberfläche GUI / Graphic User Interface).
 *  * Reagieren auf Klicks auf Schaltflächen (Buttons).
 *  * Öffnen und Lesen von sequentiellen Dateien.
 *  * Benutzen einer XML-Struktur zum Ermitteln von Parametern.
 *  * Verbindung zu einem Datenbanksystem aufbauen.
 *  * Ausführen von SQL-Kommandos gegen eine Datenbank.
 *  * Ausgeben von Informationen auf eine GUI.
 *  * Drucken der auf der GUI ausgegebenen Informationen.
 *
 * @change-log
 * when         who               why
 * --------------------------------------------------------
 *
 */
public class DB_Load extends JFrame {
/*
 * Elemente für den Aufbau der GUI.
 * Erklärung der Funktion bei den einzelnen Methoden zur Initialisierung. */
    private JPanel pnl_Main=null;
    private JButton btn_Select=null;
    private JButton btn_Start=null;
    private JButton btn_Print=null;
    private JTextField txt_InputFile=null;
    private JScrollPane scroll_Report=null;
    private JTextArea txt_Report=null;
/* */
/*
 * Constructor der Klasse; die Kommandos hier werden ausgeführt
 * wenn ein Objekt der Klasse erstellt wird. */
    public DB_Load(){
/* Zuerst wird der Constructor der geerbten Klasse (JFrame) ausgeführt. */
      super();
/* Dann wird die Methode mit den Initialisierungen der GUI ausgeführt. */
      initialize();
    }
/*
 * Definition der einzelnen GUI-Elemente.
 */
/*
 * Schaltfläche für die Auswahl der Datei mit den SQL-Kommandos. */
    private JButton get_btn_Select() {
/* Code, der das Element erstellt und die Eigenschaften festlegt
 * wenn es nicht bereits initialisiert ist. */
      if (btn_Select == null) {
        try {
/* 'Construct' eines neuen Objektes. */
          btn_Select = new JButton();
/* GUI-Element mit Namen versehen; über diesen kann es einfacher identifiziert werden. */
          btn_Select.setName("btn_Select");
/* Tool-Tip-Text festlegen; das ist jener Text der angezeigt wird
 * wenn der Mauszeiger über dem GUI-Element ist. */
          btn_Select.setToolTipText("Datei mit den SQL-Kommandos auswählen");
/* Abstand zu den imaginären Rändern des Feldes innerhalb des GridBagLayout.
 * Das verhindert ein 'Zusammenstoßen' von GUI-Elementen. */
          btn_Select.setMargin(new Insets(3,3,3,3));
/* Position innerhalb des GridBagLayout-Feldes. */
          btn_Select.setVerticalTextPosition(SwingConstants.CENTER);
          btn_Select.setHorizontalTextPosition(SwingConstants.CENTER);
/* Angezeigten Text festlegen. */
          btn_Select.setText("Auswahl der SQL-Kommando-Datei");
        }
        catch (Throwable Exc) {
/* Fehler beim Erstellen des Elementes; Fehlermeldung ausgeben. */
          System.out.println("Fehler beim initialisieren von 'btn_Select'.");
          Exc.printStackTrace();
        }
      }
      return btn_Select;
    }
/*
 * Ein-/Ausgabe-Feld für das Verzeichnis und den Namen der Datei
 * mit den SQL-Kommandos. */
    protected JTextField get_txt_InputFile() {
      if (txt_InputFile == null) {
        try {
          txt_InputFile = new JTextField();
          txt_InputFile.setName("txt_InputFile");
          txt_InputFile.setToolTipText("Selected Input-File containing SQL-commands");
          txt_InputFile.setMargin(new Insets(3,3,3,3));
/* Eingabe in dieses Feld nicht erlauben weil die Auswahl der Datei über die
 * Schaltfläche 'btn_Select' erfolgt. */
          txt_InputFile.setEditable(false);
        }
        catch (Throwable Exc) {
/* Fehler beim Erstellen des Elementes; Fehlermeldung ausgeben. */
          System.out.println("Fehler beim initialisieren von 'txt_InputFile'.");
          Exc.printStackTrace();
        }
      }
      return txt_InputFile;
    }
/*
 * Schaltfläche für das Ausführen der SQL-Kommandos. */
    private JButton get_btn_Start() {
      if (btn_Start == null) {
        try {
          btn_Start = new JButton();
          btn_Start.setName("btn_Start");
          btn_Start.setToolTipText("Ausführung der SQL-Kommandos beginnen.");
          btn_Start.setMargin(new Insets(3,3,3,3));
          btn_Start.setVerticalTextPosition(SwingConstants.CENTER);
          btn_Start.setHorizontalTextPosition(SwingConstants.CENTER);
          btn_Start.setText("Start SQL-Kommandos");
        }
        catch (Throwable Exc) {
/* Fehler beim Erstellen des Elementes; Fehlermeldung ausgeben. */
          System.out.println("Fehler beim initialisieren von 'btn_Start'.");
          Exc.printStackTrace();
        }
      }
      return btn_Start;
    }
/*
 * Ein-/Ausgabe-Bereich für die Dokumentation der ausgeführten SQL-Kommandos
 * und die Rückmeldungen vom Datenbanksystem. */
    protected JTextArea get_txt_Report() {
      if (txt_Report == null) {
        try {
          txt_Report = new JTextArea();
          txt_Report.setName("txt_Report");
          txt_Report.setToolTipText("Report");
          txt_Report.setMargin(new Insets(3,3,3,3));
/* Eingabe in dieses Feld nicht erlauben weil hier nur Meldungen angezeigt werden. */
          txt_Report.setEditable(false);
        }
        catch (Throwable Exc) {
/* Fehler beim Erstellen des Elementes; Fehlermeldung ausgeben. */
          System.out.println("Fehler beim initialisieren von 'txt_Report'.");
          Exc.printStackTrace();
        }
      }
      return txt_Report;
    }
/*
 * Scroll-Bereich für 'txt_Report'.
 * Der Scroll-Bereich wird automatisch mit Scroll-Bars versehen wenn Breite bzw.
 * Höhe nicht mehr für die Anzeige des Textes in 'txt_Report' ausreichen. */
    private JScrollPane get_scroll_Report() {
      if (scroll_Report == null) {
        try {
/* Als Inhalt des ScrollPane wird gleich die TextArea für die Kontroll-Ausgaben definiert. */
          scroll_Report = new JScrollPane(get_txt_Report());
          txt_Report.setName("scroll_Report");
/* Setzen der Anfangsgröße. */
          txt_Report.setPreferredSize(new Dimension(800, 600));
        }
        catch (Throwable Exc) {
/* Fehler beim Erstellen des Elementes; Fehlermeldung ausgeben. */
          System.out.println("Fehler beim initialisieren von 'scroll_Report'.");
          Exc.printStackTrace();
        }
      }
      return scroll_Report;
    }
/*
 * Schaltfläche für den Start des Drucks der Meldungen. */
    private JButton get_btn_Print() {
      if (btn_Print == null) {
        try {
          btn_Print = new JButton();
          btn_Print.setName("btn_Print");
          btn_Print.setToolTipText("Meldungen des Programms ausdrucken.");
          btn_Print.setMargin(new Insets(3,3,3,3));
          btn_Print.setVerticalTextPosition(SwingConstants.CENTER);
          btn_Print.setHorizontalTextPosition(SwingConstants.CENTER);
          btn_Print.setText("Meldungen drucken");
        }
        catch (Throwable Exc) {
/* Fehler beim Erstellen des Elementes; Fehlermeldung ausgeben. */
          System.out.println("Fehler beim initialisieren von 'btn_Print'");
          Exc.printStackTrace();
        }
      }
      return btn_Print;
    }
/*
 * Panel, auf dem die oben definierten GUI-Elemente für Ein- bzw. Ausgabe
 * platziert werden. */
    private JPanel get_pnl_Main() {
      if (pnl_Main == null) {
        try {
          pnl_Main = new JPanel();
          pnl_Main.setName("pnl_Main");
/*
 * Das Panel hat das GridBagLayout.
 * Dieses Layout ist flexibel und verändern die Größe einzelner GUI-Elemente
 * proportional mit der Größenveränderung des Fensters. */
          pnl_Main.setLayout(new GridBagLayout());
/*
 * GridBagConstraints für das aufzunehmende GUI-Element festlegen. */
          GridBagConstraints gbc_btn_Select = new GridBagConstraints();
/* Position: linke Spalte (gridx = 0) in der obersten Reihe (gridy = 0). */
          gbc_btn_Select.gridx = 0;
          gbc_btn_Select.gridy = 0;
/* Größenveränderung in der Breite (horizontale Ausrichtung) zulassen. */
          gbc_btn_Select.fill = GridBagConstraints.HORIZONTAL;
/* Proportionalität der Größenveränderung im Vergleich zu anderen
 * GUI-Elementen in der selben Reihe. */
          gbc_btn_Select.weightx = 1;
/* Ausrichtung innerhalb des 'Grid' Feldes: am rechten Rand. */
          gbc_btn_Select.anchor = GridBagConstraints.LINE_END;
/* GUI-Element in das Panel 'einhängen'; Position ist durch die GridBagConstraints bestimmt. */
          get_pnl_Main().add(get_btn_Select(), gbc_btn_Select);
/*
 * GridBagConstraints für das aufzunehmende GUI-Element festlegen. */
          GridBagConstraints gbc_txt_InputFile = new GridBagConstraints();
          gbc_txt_InputFile.gridx = 1;
          gbc_txt_InputFile.gridy = 0;
          gbc_txt_InputFile.fill = GridBagConstraints.HORIZONTAL;
/* Definition, daß das GUI-Element 2 'Felder' des GridBags breit ist. */
          gbc_txt_InputFile.gridwidth = 2;
          gbc_txt_InputFile.weightx = 3;
          gbc_txt_InputFile.anchor = GridBagConstraints.CENTER;
/* */
          get_pnl_Main().add(get_txt_InputFile(), gbc_txt_InputFile);
/*
 * GridBagConstraints für das aufzunehmende GUI-Element festlegen. */
          GridBagConstraints gbc_btn_Start = new GridBagConstraints();
          gbc_btn_Start.gridx = 0;
          gbc_btn_Start.gridy = 1;
          gbc_btn_Start.fill = GridBagConstraints.HORIZONTAL;
          gbc_btn_Start.gridwidth = 3;
          gbc_btn_Start.weightx = 1;
          gbc_btn_Start.anchor = GridBagConstraints.LINE_START;
/* */
          get_pnl_Main().add(get_btn_Start(), gbc_btn_Start);
/*
 * GridBagConstraints für das aufzunehmende GUI-Element festlegen. */
          GridBagConstraints gbc_scroll_Report = new GridBagConstraints();
          gbc_scroll_Report.gridx = 0;
          gbc_scroll_Report.gridy = 2;
          gbc_scroll_Report.gridwidth = 3;
          gbc_scroll_Report.fill = GridBagConstraints.BOTH;
          gbc_scroll_Report.weightx = 10;
          gbc_scroll_Report.weighty = 10;
          gbc_scroll_Report.anchor = GridBagConstraints.CENTER;
/* */
          get_pnl_Main().add(get_scroll_Report(), gbc_scroll_Report);
/*
 * GridBagConstraints für das aufzunehmende GUI-Element festlegen. */
          GridBagConstraints gbc_btn_Print = new GridBagConstraints();
          gbc_btn_Print.gridx = 2;
          gbc_btn_Print.gridy = 3;
          gbc_btn_Print.fill = GridBagConstraints.HORIZONTAL;
          gbc_btn_Print.weightx = 1;
          gbc_btn_Print.anchor = GridBagConstraints.LINE_START;
/* */
          get_pnl_Main().add(get_btn_Print(), gbc_btn_Print);
        }
        catch (Throwable Exc) {
/* Fehler beim Erstellen des Elementes; Fehlermeldung ausgeben. */
          System.out.println("Fehler beim initialisieren von 'pnl_Main'");
          Exc.printStackTrace();
        }
      }
      return pnl_Main;
    }
/*
 * Methode mit den Kommandos zum Anzeige der GUI. */
    private void initialize() {
/* Das Fenster (JFrame) wird auf der Benutzeroberfläche angezeigt. */
      setVisible(true);
/* Die Größe des Fensters wird festgelegt. */
      setSize(800, 700);
/* Text für die Title-Bar, das ist der blaue Streifen am oberen Rand. */
      setTitle("JavaScout-Tutorial::Datenbank Ladeprogramm (Java_Intro_02)");
/* Das Haupt-Panel für das Fenster wird festglegt.
 * Auf diesem Panel sind dann Sub-Panels bzw. andere GUI-Elemente 'angeordnet'. */
      setContentPane(get_pnl_Main());
    }
/* */
/*
 * Methode die definiert, daß diese Klasse ein ausführbares Programm ist. */
    public static void main(String[] args) {
      try {
/* Ein Objekt dieser Klasse wird erstellt. */
        DB_Load aDB_Load = new DB_Load();
      }
      catch(Throwable exc) {
/* Fehler beim Erstellen des Objektes; Fehlermeldung ausgeben. */
        System.out.println("Exception occured in main() of DBLoad");
        exc.printStackTrace(System.out);
      }
    }
}

Anschließend wird der Code durch Anklicken des Save-Symbols ( / Diskette links oben) gespeichert.

Eine kurze Erklärung der einzelnen Teile des Codes:

• import java.awt.*;
import javax.swing.*;

  Damit werden die Programm-Bibliotheken importiert, die Klassen für die Elemente, mit denen die Graphische Benutzeroberfläche gestaltet wird, enthalten.
  java.awt.* ist die ältere Bibliothek und enthält einfache Basis-Funktionalität.
  javax.swing.* ist eine jüngere Bibliothek mit erweiterter Funktionalität für ein zeitgemäßes Design der GUI-Elemente.

• (weitere sind noch zu schreiben wenn das Dokument mit der Theorie fertig ist.)

▲ zum Inhaltsverzeichnis

Test

Der Code für das Client-Programm kann jetzt durch Auswahl von Run>Run ausgeführt werden.

▲ zum Inhaltsverzeichnis

Weitere Schritte und verwandte Dokumentation

▲ zum Inhaltsverzeichnis