Übungsaufgaben zum Thema GUI und Ereignisbehandlung

Aufgabe 1: GUI erstellen

In dieser Übung werden wir als erste grafische Benutzeroberfläche die GUI eines Audioplayers entwickeln. Der Player ist ziemlich einfach aufgebaut: Er besteht nur aus einem Ein/Aus-Schalter ("ON"), einigen Radio Buttons für die Auswahl von Audiodateien (SF1-3: Sound File 1-3) und einem Textfeld ("OFF"). Später wird dieses Textfeld Informationen zur gegenwärtig abgespielten Audiodatei anzeigen und ob der Player eingeschaltet ist:

Die grafische Benutzeroberfläche ist ein für sich allein funktionierender, autonomer Bestandteil des Programms. Die eigentliche Verbindung zum Programmcode, der durch die Bedienelemente gesteuert werden soll, erfolgt dann in der nächsten Aufgabe mit Hilfe von Ereignissen.

1. Öffnen Sie zunächst eine neue Sketch-Datei mit dem Namen Audioplayer und definieren Sie in dieser zuerst ein Textfeld. Hierfür ist es erforderlich, die AWT- und Swing-Packages (Bibliotheken) zu importieren:

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

   Der Stern besagt hier, dass alle Klassen aus den Packages benutzbar sein sollen.

   Legen Sie in der Datei eine neue Klasse mit dem Namen AudioplayerGui an, die von der Klasse JFrame erbt. Diese stellt die Grundlage für die zu erstellende Bedienoberfläche dar.
   
   GUI-Komponenten werden wie andere Objekte auch erzeugt, d. h. zuerst wird eine Referenzvariable deklariert. Diese bekommt nachfolgend ein mit new generiertes Objekt der gewünschten Klasse zugewiesen. Dies kann auch direkt im Klassenrumpf geschehen, ohne dass ein Konstruktor dafür erforderlich wäre. Erzeugen Sie auf diese Weise ein JTextField-Objekt:
   

   public class AudioplayerGui extends JFrame{
     JTextField t = new JTextField(50);
     // hier weitere Anweisungen für die übrigen GUI-Elemente einfügen
   }
   

   Die Dokumentation der grafischen Komponenten finden Sie in der Java 8.0 Documentation.

   Schauen Sie sich beispielhaft die Dokumentation des JTextFields unter dem Eintrag "All Classes" an. Wofür steht die 50 in der obigen Instanzierung?

   Erweitern Sie den obigen Codeabschnitt um eine Check Box mit der Beschriftung "ON", die später als Ein-/Ausschalter des Audioplayers fungieren wird, und drei Radio Buttons für die Auswahl des gewünschten Sound Files ("SF1-3"). Diese sollen wie bei alten Kofferradios funktionieren, d. h. es darf immer nur ein Knopf zur Zeit selektiert sein.
   

2. Fügen Sie danach einen Konstruktor AudioplayerGUI() in ihre Klasse ein. Wir benötigen diesen, weil das Generieren der Komponenten alleine nicht ausreicht, um diese auf dem Bildschirm darzustellen. Damit die Komponenten auf dem Bildschirm erscheinen, müssen sie zuerst in einen Container gelegt werden. (Was ist der Container in diesem Zusammenhang?)
   Der Konstruktor wird automatisch aufgerufen, wenn die Anwendung gestartet wird. Er ist also der geeignete Ort, um die GUI-Komponenten auf den Bildschirm zu bringen.

   Tun Sie dies durch Einfügen von add()-Anweisungen in den Konstruktor, in der Weise, dass das Textfeld im Norden und die Check Box im Süden und die Radio Buttons dazwischen platziert werden.

3. Initialisieren Sie das Textfeld mit dem oben im Bild angegebenen Text. Starten Sie danach die Anwendung und probieren Sie, Text in das Textfeld einzugeben. Wenn dies möglich ist, so schalten Sie dies durch Aufruf von t.setEditable(false);  im Konstruktor ab. Ersetzen Sie dabei t durch den Namen ihres Textfeldobjekts.
   Legen Sie auch einen Font ihrer Wahl fest, z. B. "Arial", BOLD, 14. Der entsprechende Methodenaufruf hierfür ist

t.setFont(new Font("Arial",Font.BOLD,14));

   In entsprechender Weise können Sie auch den Font für z. B. ihre Radio Buttons anpassen.
   
   Eine Liste der auf Ihrem System installierten Fonts können Sie sich mit dem folgenden Code in der Processing-Konsole anzeigen lassen:

   GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment(); 
   String fonts[] = ge.getAvailableFontFamilyNames(); 
     
   // Getting the font family names 
   for (int i=0; i < fonts.length; i++) { 
     System.out.print(fonts[i] + ", "); 
   }

Aufgabe 2: Ereignisbehandlung

1. Obwohl die GUI des Audioplayers schon funktioniert, wird dieser noch nicht mit der GUI gesteuert. In dieser Übung werden wir das ändern. Erweitern Sie die GUI derart, dass das Drücken der Check Box den Player ein- oder ausschaltet und der Zustand im Textfeld angezeigt wird:

   

   
   Bei aktivierter Check Box wird "ON" angezeigt. Bei deaktivierter Check Box "OFF".
   
   Klicken auf einen Radio Button führt zur Anzeige des zugehörenden Sound Files im Textfeld.

   

   Implementieren Sie hierfür eine entsprechende Anzahl von Action Listeners für die Radio Buttons und die Check Box. Das Auswählen der Sound Files geschieht dabei vorerst unabhängig vom Einschaltzustand des Audioplayers. D. h., auch bei ausgeschaltetem Player ist es möglich mit den Radio Buttons Sound Files auszuwählen.
   

2. Ihr Code wird jetzt eine Reihe von Action Listeners enthalten. Für jeden Radio Button einen sowie einen für die Check Box. Räumen Sie den Code jetzt insoweit auf, dass nur noch ein Action Listener für alle Radio Buttons und die Check Box zusammen benutzt wird. Hierfür müssen die auftretenden Action Events in der actionPerformed() Methode des Action Listeners ausgewertet werden.

3. Verbessern Sie ihren Code schließlich noch dahingehend, dass das Drücken der Radio Buttons nur im eingeschalteten Zustand des Audioplayers zu einem Wechsel der Anzeige im Textfeld führt.