20 Eine GUI für die Klasse Mathematik
20.1 BorderLayout

 
GUI GUI (= Grafical User Interface) ist ein Klasse oder Programm, das die grafische Oberfläche für andere Programme (oft Fachklassen genannt) bietet. Diese grafisch gestalteten Oberflächen kann man als Schnittstelle zwischen Bediener und den Fachklassen verstehen. Was heißt das konkret? Wir haben im Kapitel 12 und 13 die Klasse Mathematik aufgebaut (Wenn Sie sich nicht mehr gut erinnern können, empfiehlt es sich die wesentliche Teile dieser Kapitel noch einmal zu wiederholen) . Um die einzelnen Methoden zu testen, hatten wir kleine Testprogramme geschrieben. Damit wollen wir uns jetzt nicht mehr zufrieden geben. Wir wollen lieber ein Programm haben, dessen Erscheinungsbild das Bild links z.B. hat. Das Programm besitzt ein Eingabefeld um eine Zahl einzutragen, einen Schalter (Button) um die Berechnung der Fakultät der Zahl im Eingabefeld zu veranlassen und ein Ausgabefeld um das Ergebnis darzustellen. So beschrieben liegt das Programm, zwischen dem Bediener des Rechners und der Klasse Mathematik, die den eigentlichen Job, des Berechnens erledigt.  Bevor wir uns an das Programmieren dieser GUI heranmachen, müssen wir uns noch etwas mit dem Layout beschäftigen. In Kap 19.2 haben wir das Flowlayout benutzt, das die grafischen Objekte nacheinander, also in der Reihenfolge, wie sie angelegt werden in den Objektbehälter ablegen. Wir benutzen jetzt ein Borderlayout, das uns mehr Gestaltungsmöglichkeiten bietet. Zur Programmierung benutzen wir wieder unsere Vorlage, die uns der Java-Editor anbietet.
 
Gerüst 
public class Geruest extends JFrame {

  // Anfang Variablen

  // Ende Variablen



  public Geruest (String title) {

    // Frame-Initialisierung

    super (title);

    setDefaultCloseOperation(EXIT_ON_CLOSE);

    setSize(300, 300);

    Container cp = getContentPane();

    cp.setLayout(new BorderLayout());



    // Anfang Komponenten



    // Ende Komponenten



    setVisible(true);

  }



  // Anfang Ereignisprozeduren

  // Ende Ereignisprozeduren



  public static void main (String[] args) {

    new Geruest("Geruest");

  }

}
  Wir sehen, standardmäßig wir hier das komfortable Borderlayout vorgegeben. Das geschieht so, dass dem Objektbehälter cp mit der Methode setLayout(...) ein definiertes Layout übergeben wird. In unserem Fall wird mit new BorderLayout() ein nicht benanntes BorderLayout-Objekt erzeugt und übergeben. Was sind nun die Eigenschaften dieses Boderlayouts? Ein Bild hilft hier weiter. Es zeigt, in welche Bereiche der Behälter aufgeteilt wird, und wie die Bereiche genant werden. Wir können uns leicht vorstellen, dass das Eingabefeld der Fakultäts-GUI in den Norden, das Ausgabefeld in den Süden und das Button in das Zentrum. Die Bereiche Osten und Westen sind nicht belegt, weshalb sie zu 'nichts' zusammenschrumpfen und nicht sichtbar sind.

 
Erzeugender Objekte  und ihr Plazieren  im Behälter 
Zunächst deklarieren wir Aus- und Eingabefeld, sowie den Schaltknopf
  private JTextField eingabeFeld, ausgabeFeld;

  private JButton rechenButton;

Initialisiert, wir sagen jetzt lieber instanziiert, werden sie im Konstruktor unserer GUI, dort wo die Vorlage für Komponenten Platz gehalten hat:

    // Anfang Komponenten

    eingabeFeld = new JTextField("Eingabe einer Zahl");

    eingabeFeld.setHorizontalAlignment(eingabeFeld.RIGHT);

    cp.add(eingabeFeld,BorderLayout.NORTH);



    rechenButton = new JButton("Fakultät[n]");

    cp.add(rechenButton,BorderLayout.CENTER);



    ausgabeFeld = new JTextField();

    ausgabeFeld.setHorizontalAlignment(ausgabeFeld.RIGHT);

    cp.add(ausgabeFeld,BorderLayout.SOUTH);

    ausgabeFeld.setEditable(false);

    // Ende Komponenten

1. Grafik-Objekt: eingabeFeld
Es wird instanziiert und dabei mit einem Vorgabetext, nämlich "Eingabe einer Zahl" versehen. Der Kode in der zweiten Zeile sorgt dafür das der Text in dem Textfeld rechtsbündig dargestellt wird. schließlich wird das Grafikobjekt in die Region Norden des Containers angelegt.

2. Grafikobjekt: rechenButton
Nach seiner Instanziierung wird es im Zentrum des Containers platziert.

3. Grafikobjekt: ausgabeFeld
Dieses Objekt ist analog zum eingabeFeld konstruiert. Eine kleine Abweichung allerdings: In der letzten Zeile, wird dafür gesorgt, dass der Bediener keine Eintragungen in dieses Feld vornehmen kann.

Mit setSize(200,100) wird die Breit auf 200 und die Höhe auf 100 Pixel gesetzt. Übrigens, dass diese Methode ohne Punktnotation aufgerufen wird, ist leicht zu verstehen. Die Methode setSize(...) ist nämlich in der Klasse Component implementiert. Da unsere Klasse von JFrame erbt, JFrame aber über mehrere Stationen von Component erbt, wird die Methode setSize(...) so benutzt, als wäre sie in unserer Klasse implementiert.
 
zu 20.2 Eingabe- und Ausgabefelder: Fakultätsrechner
zur Startseite www.pohlig.de  (C) MPohlig 2004