Kurs OPR. Objektorientierte Programmierung

Kurs OPR Objektorientierte Programmierung Lektion: 008-GUI-Komp., eigenst. Programme Zürcher Hochschule für Angewandte Wissenschaften Mitglied der Fachhochschule Zürich Version 1.4

Inhaltsverzeichnis 1 Erzeugung Grafischer Benützeroberflächen (GUI) 3 1.1 Ziele 3 1.2 AWT und Swing 3 1.3 Design von Benützer-Interfaces 4 1.4 Professionelles Programmieren 5 2 Eigenständige Programme 6 2.1 Ziele 6 2.2 Einführung 6 2.3 Applikationen in Java 7 2.4 Applikationen mit eigener graphischer Benützeroberfläche (GUI) 9 2.5 Kochbuchrezept für die Umwandlung Applets zu Applikationen 13 2.6 Menus 13 GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 2

1 Erzeugung Grafischer Benützeroberflächen (GUI) 1.1 Ziele Sie kennen die Klassenhierarchie der GUI-Komponenten im AWT. Sie kennen den Unterschied von AWT uns Swing. 1.2 AWT und Swing Das AWT (Abstract Window Toolkit) stellt eine ganze Reihe von Komponenten für graphische Benützeroberflächen (GUI: Graphical User Interface) zur Verfügung. Diese Komponenten sind einfach zu handhaben und erlauben bereits, anspruchsvolle GUIs zu entwickeln. Für die Entwicklung professioneller GUIs stellt Java seit der Version 1.2 zusätzlich die sogenannten Swing-Klassen zur Verfügung: Diese stellen dieselben Komponenten wie in AWT zur Verfügung. Die entsprechenden Swing- Komponenten beginnen jeweils mit einem "J", z.b. JButton, JTextField, JScrollBar etc. Daneben weist Swing noch etliche zusätzliche Komponenten für den professionellen Einsatz auf (z.b. Tabellen, Baumstrukturen, uam.) Im Rahmen dieser Vorlesung werden wir uns auf die AWT-Komponenten beschränken, werden aber auf die entsprechenden Swing-Komponenten hinweisen. Swing-Applets: Wenn Sie Swing-Komponenten verwenden, beachten Sie folgende Änderungen an Ihrem Applet import javax.swing.*; statt java.applet.applet; Verwenden Sie Klasse JApplet statt Applet. Default-Layout bei JApplet ist BorderLayout, nicht FlowLayout wie bei Applets. In der Methode müssen Sie als Erstes super.paint(g); aufrufen, um alle Swing- Komponenten des Applets zeichnen zu lassen. Die Klassenhierarchie der GUI-Komponenten von Java sind in Abbildung 1 dargestellt. Die Swing-Komponenten sind alle von JComponent abgeleitet. GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 3

Object Component Button Canvas Checkbox Choice Container Panel Scrollpane Window JComponent Label List Scrollbar TextComponent Dialog Frame JWindow FileDialog JDialog JFrame TextArea TextField Abbildung 1: GUI-Komponenten in Java 1.3 Design von Benützer-Interfaces Das Design von ergonomischen Benützer-Interfaces ist eine Wissenschaft für sich. Professionelle integrierte Entwicklungsumgebungen (IDE) enthalten graphischen GUI-Builder Komponenten können per Maus selektiert und arrangiert werden Code dazu wird automatisch erzeugt Es gibt zahllose Variationen beim GUI-Design. Empfehlenswert: Einen Prototyp des GUIs erstellen und mit Benützer testen. GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 4

1.4 Professionelles Programmieren GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 5

2 Eigenständige Programme 2.1 Ziele Sie können Applikationen in Java schreiben. Sie können die wichtigsten Unterschiede zwischen einem Applet und einer Applikation erklären. Sie können ein gegebenes Applet in eine eigen-ständige Applikation umwandeln und umgekehrt. Sie setzen Menus in Ihren Applikationen richtig und situationsgerecht ein. 2.2 Einführung Bisher haben wir ausschliesslich Applets programmiert. Applets müssen in einer HTML-Seite eingebettet sein und benötigen einen Browser, um lauffähig zu sein: JVM Browser Betriebssystem public class MeinProgramm extends Applet{ public void init(){... public void paint(graphics g) {... Eingabe/Ausgabe Browser HTML-Seite............................. Applet ok public void actionperformed (ActionEvent e){... Abbildung 2: Ablauf eines Applets Der Browser ruft nach dem Aufstarten des Applets dessen init()-methode auf. Bei Bedarf ruft der Browser sodann die Methoden paint(graphics g) und allfällige Listenermethoden (z.b. actionperformed(actionevent) ) auf. Applikationen sind eigenständige Programme. Sie brauchen keinen Browser. Sie laufen vollständig unabhängig von anderen Programmen. Applikationen werden gestartet durch Anklicken oder einen entsprechenden Befehl auf der Kommandozeile. Applikationen können normalerweise nicht über das Internet gestartet werden. Sie können ebenfalls die AWT-Bibliothek benützen (ausser Applet-Klassen). Applikationen haben mehr Rechte bezüglich Zugriff auf lokale Ressourcen (Dateien). GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 6

2.3 Applikationen in Java Applikation mit Ein-/Ausgabe über die Kommandozeile: Eingabe/Ausgabe JVM Betriebssystem public class Gruss{ public static void main(string[] args) {... Kommandozeile > java Gruss Peter Hallo Peter > Abbildung 3: Kommandozeilen-Applikation Einfaches Beispiel: public class Gruss { public static void main(string[] args){ System.out.println("Hallo " + args[0]); Programm 1: Applikation Gruss Jede Applikation muss eine Klassenmethode mit der Signatur: public static void main(string[] args) {... enthalten. Diese main-methode ist der Startpunkt jeder Applikation. String[] args ist ein String-Array, der allfällige Argumente von der Kommandozeile enthält. Die Arraygrösse entspricht genau der Anzahl übergebener Argumente. Das Programm Gruss kann nun von der Kommandozeile aus ausgeführt werden mit dem Befehl: java Gruss java ruft den Java-Interpreter auf und übergibt ihm als Argument den Namen des auszuführenden Programms. Der Java-Interpreter interpretiert sodann den Byte-Code des Programms Gruss. Die Ausführung des Programms Gruss beginnt mit der main-methode der Klasse Gruss. Allgemein wird eine Kommandozeilen-Applikation in Java so aufgerufen: java Klassenname { Argument EBNF 1: Aufruf einer Applikation Klassenname Name des Programms (= Name der public-klasse, ohne ".class") GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 7

{ Argument 0,1 oder mehrere Argumente. Diese werden im String-Array args der Methode main übergeben. Die Anzahl der übergebenen Argumente steht in der Variablen args.length Aufgabe: Schreiben Sie ein Echo-Programm, das die Eingaben auf der Kommandozeile auf den Bildschirm schreibt. Der folgende Aufruf des Programms Echo: java Echo Das ist ein Test sollte als Resultat folgenden Output liefern: Das ist ein Test Lösung: Die main-methode Sie entspricht dem Hauptprogramm in anderen Programmiersprachen. Der Programmablauf beginnt immer mit der main-methode. Die main-methode kann weitere static-methoden direkt aufrufen. Sie kann zudem beliebige Objekte erzeugen. Als erstes erzeugt die main-methode normalerweise ein Objekt der ganzen Applikation, d.h. ein Objekt derjenigen public-klasse, in der die main-methode selbst enthalten ist. Dann ruft die main-methode eine Methode des erzeugten Applikations-Objektes auf. Bei Applikationen, die keine eigene Benützeroberfläche erzeugen, übernimmt die main-methode die Steuerung des gesamten Programmablaufs und wird erst verlassen, wenn alle Arbeiten im Programm beendet sind. GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 8

Bei Applikationen mit eigener grafischer Benützeroberfläche spielt die main- Methode nur eine temporäre Rolle. Nachdem sie die nötigen Objekte der Applikation erzeugt und die notwendigen Methoden aufgerufen hat, wird sie beendet. Der Programmablauf wird sodann von den erzeugten Objekten gesteuert. Ein Typischer Aufbau einer Applikation sieht somit folgendermassen aus: public class Applikation { public static void main(string[] args) { Applikation a = new Applikation(); a.tuetwas(); private void tuetwas() {... Ablauf des Programms: Java-Interpreter ruft die main-methode der Klasse Applikation auf. main erzeugt eine Instanz der Klasse Applikation main ruft sodann eine Methode im erzeugten Objekt auf. Zur Erinnerung: Bei einem Applet wird das erste Objekt (das Applet-Objekt) direkt vom Browser erzeugt. 2.4 Applikationen mit eigener graphischer Benützeroberfläche (GUI) Java-Applikationen können ebenfalls das Abstract Window Toolkit (AWT) verwenden. JVM Betriebssystem public class MeinProgramm extends Frame implements ActionListener{ public static void main(string[] args){ MeinProgramm p = new MeinProgramm(); public void paint(graphics g){... public void actionperformed(actionevent e){... Eingabe/Ausgabe MeinProgramm ok Abbildung 4: GUI-Applikation Dazu muss die Applikation zuerst ein eigenes Fenster erzeugen. Klasse Frame. Klasse Frame Verwaltet ein Fenster mit Scrollbars und Menubalken. Klassenhierarchie: Aus der Klassendiagramm der GUI-Komponenten auf Seite 4 sieht man, dass die Klasse Frame von den Klassen Component-Container-Window abgeleitet ist. GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 9

Ein Frame kann sogenannte WindowEvents erzeugen. Um diese zu behandeln, muss die Applikation einen WindowListener implementieren. Dazu muss sie die folgenden 7 Methoden deklarieren: public void windowopened(windowevent event) wird aufgerufen, nachdem das Fenster das erste Mal sichtbar geworden ist. public void windowclosing(windowevent event) wird aufgerufen, wenn der Benützer das Fenster schliessen möchte. public void windowclosed(windowevent event) wird aufgerufen, sobald Fenster effektiv geschlossen ist. public void windowiconified(windowevent event) wird aufgerufen, nachdem das Fenster zu einem Icon verkleinert worden ist. public void windowdeiconified(windowevent event) wird aufgerufen, sobald der Benützer das Icon wieder geöffnet hat. public void windowactivated(windowevent event) wird aufgerufen, sobald das Fenster aktiv ist, d.h. den Fokus erhält. public void windowdeactivated(windowevent event) wird aufgerufen, sobald Fenster inaktiv geworden ist, d.h. den Fokus abgegeben hat. Konstruktoren: Frame() Frame(String Fenstertitel) erzeugt ein Fenster ohne Titel erzeugt ein Fenster mit Titel Wichtige Methoden (zum Teil von Klasse Window geerbt) setsize(int breite, int hoehe) setzt Fenstergrösse show() macht Fenster sichtbar setvisible(boolean b) macht Fenster un-/sichtbar toback() schiebt Fenster nach hinten tofront() schiebt Fenster nach vorne pack() setzt Fenster auf bevorzugte Grösse settitle(string titel) setzt Fenstertitel setmenubar(menubar menuleiste) setzt neue Menuleiste des Fensters Beispiel: Das Programm PlayBalloon soll als eigenständige Applikation programmiert werden (siehe Programm 2 Seite 12): Wir gehen aus vom PlayBalloon-Applet auf Seite Fehler! Textmarke nicht definiert.. Will man PlayBalloon als eigenständige Applikation programmieren, muss Folgendes am Applet-Code geändert werden: PlayBalloon kann nicht mehr von Applet abgeleitet werden Das hat zur Folge, dass das Applet-Fenster nicht mehr zur Verfügung steht. Die Applikation muss deshalb ein eigenes Fenster erzeugen. Dies erreicht man wie folgt: Die Applikation wird von der Klasse Frame anstatt Applet abgeleitet. Die Applikation muss zusätzlich einen WindowListener implementieren. Die Applikation braucht zusätzlich die Methode public static main(string[] args), die Folgendes macht: Sie erzeugt zuerst ein PlayBalloon-Objekt, und damit ein neues Frame. GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 10

Sie setzt die Grösse des Frames. Sie macht das Frame sichtbar. Die init()-methode wird durch den Konstruktor PlayBalloon() ersetzt. Dieser wird beim Erzeugen eines PlayBalloon-Objekts aufgerufen. Im neuen Konstruktor wird zusätzlich zur früheren init()-methode: der Frame-Titel gesetzt mit settitle(titel) der Layout-Manager bestimmt mit setlayout(layout) das MyBalloon-Objekt als WindowListener bei sich selbst registriert Als WindowListener muss die Applikation 7 WindowListener-Methoden deklarieren. Als einzige der WindowListener-Methoden wird windowclosing implementiert: In ihr wird das Programm beendet mit dem Befehl: System.exit(0); Die restlichen WindowListener-Methode bleiben leer. Beachten Sie: Klasse Balloon bleibt bei der Umstellung vom Applet zur Applikation unberührt! Das PlayBalloon-Programm als eigenständige Applikation: import java.awt.*; import java.awt.event.*; public class PlayBalloon extends Frame implements ActionListener, WindowListener { private Button grow, shrink; private Balloon myballoon; public static void main(string[] args) { PlayBalloon f = new PlayBalloon(); f.setsize(300,300); f.setvisible(true); public PlayBalloon() { settitle("balloon"); setlayout(new FlowLayout()); grow = new Button("Grow"); add(grow); grow.addactionlistener(this); shrink = new Button("Shrink"); add(shrink); shrink.addactionlistener(this); myballoon = new Balloon(20, 50, 50); this.addwindowlistener(this); public void actionperformed (ActionEvent event) { GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 11

if (event.getsource() == grow){ myballoon.changesize(10); if (event.getsource() == shrink){ myballoon.changesize(-10); repaint(); public void paint (Graphics g) { myballoon.display(g); public void windowclosing(windowevent event) { System.exit(0); public void windowiconified(windowevent event) { public void windowopened(windowevent event) { public void windowclosed(windowevent event) { public void windowactivated(windowevent event) { public void windowdeiconified(windowevent event) { public void windowdeactivated(windowevent event) { class Balloon { private int diameter, xcoord, ycoord; public Balloon (int initialdiameter, int initialx, int initialy){ diameter = initialdiameter; xcoord = initialx; ycoord = initialy; public void changesize (int change) { diameter = diameter+change; public void display (Graphics g) { g.drawoval (xcoord, ycoord, diameter, diameter); Programm 2: PlayBalloon-Applikation GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 12

2.5 Kochbuchrezept für die Umwandlung Applets zu Applikationen Umwandlung eines Java-Applets zu einer Java-Applikation: Methode init() in einen Konstruktor (d.h. gleicher Name wie Klasse) ohne Parameter umwandeln. Nicht vergessen: Returntyp bei Konstruktor entfernen. extends Applet durch extends Frame ersetzen Main-Methode schreiben: public static void main(string[] args) muss static sein muss ein Objekt der eigenen Klasse (d.h. des Programms) erzeugen damit wird das entsprechende Frame wird erzeugt muss Grösse der Frames setzen mit setsize(breite, hoehe); muss Frame sichtbar machen mit setvisible(true); Import der Klasse Applet löschen WindowListener implementieren und Applikation bei sich selbst als WindowListener registieren mit this.addwindowlistener(this); Layout-Manager auf FlowLayout ändern, falls gewünscht (Default-Layout für Frames ist BorderLayout) mit setlayout(new FlowLayout()); Kontrollieren, ob keine Methoden der Applet-Klasse mehr verwendet werden. Umwandlung einer Java-Applikation in ein Java-Applet: HTML-Seite mit applet-tag erzeugen. main-methode löschen extends Frame durch extends Applet ersetzen Klasse Applet importieren Konstruktor umbenennen in public void init() Layout-Manager auf Border-Layout setzen, falls gewünscht (Default-Layout für Applets ist FlowLayout) 2.6 Menus Applikationen können im Gegensatz zu Applets neben den anderen GUI-Komponenten auch Menus enthalten. Dazu braucht es eine sogenannte Menuleiste (Menubar). Das ist eine Leiste, an der die Menus aufgehängt sind. Menu-Item: So heissen die einzelnen Einträge eines Menus (können selbst wieder Untermenus sein) Die Klassenhierarchie der Menu-Komponenten ist in Abbildung 5 dargestellt. Klasse MenuComponent Sie ist die Superklasse aller Menu-Klassen, analog wie die Klasse Component Superklasse aller Klassen der GUI-Komponenten ist. GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 13

MenuComponent MenuItem Menu MenuBar Abbildung 5: Klassenhierarchie von Menu Klasse MenuItem erzeugt ein ActionEvent, falls das betroffene MenuItem ausgewählt wird und aktiv ist. Ein MenuItem-Listener muss nicht bei jedem MenuItem als Listener registriert sein. Er kann auch nur als Listener beim Menu selbst oder einem Submenu registriert sein. Die ActionEvents eines Items werden nämlich zum darüber liegenden Menu propagiert. Konstruktoren MenuItem(String label) erzeugt eine Menu-Item label MenuItem(String label, MenuShortCut shortcut) erzeugt ein Menu-Item label mit der zugeordneten Tastenkombination shortcut. Nützliche Methoden boolean isenabled() gibt zurück, ob Menu-Item aktiv ist setenabled(boolean b) Aktiviert oder deaktiviert ein Menu-Item String getlabel() gibt Label des Menu-Items zurück setlabel(string name) setzt Label des Menu-Items auf name addactionlistener(actionlistener o) registriert Object o als Listener setactioncommand(string command) setzt Befehlsname des Menu-Items auf command (dieser kann aus dem ActionEvent- Objekt mit getactioncommand() ausgelesen werden) MenuShortcut getshortcut() gibt Shortcut des Menu-Items zurück setshortcut(menushortcut c) setzt Shortcut des Menu-Items auf c Klasse Menu ist eine Subklasse von MenuItem Konstruktor: Menu(String label) erzeugt Menu mit Titel label Nützliche Methoden add(string label) erzeugt MenuItem label und fügt es ans Ende des Menus an MenuItem add(menuitem item) fügt Menu Item item zum Menu (item wird zudem zurückgegeben) addseparator() fügt einen Separator ans Menu an insert(menuitem item, int pos) fügt Item item an der Stelle pos ins Menu ein GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 14

insertseparator(int pos) fügt Separator an der Stelle pos ein Beispiel: Programm MenuBalloon Abbildung 6: Menu-Leiste des Programms MenuBalloon Der Konstruktor im Programm 3, MenuBalloon, erzeugt für die PlayBalloon-Applikation eine Menuleiste mit den Menus Size und Move wie in Abbildung 6. Das Menu Size hat die Einträge Grow und Shrink, Move die Einträge Left und Right. (Es wird angenommen, dass die Klasse Balloon zusätzlich die beiden Methoden moveleft() und moveright() implementiert): public class MenuBallon extends Frame implements ActionListener, WindowListener { private Balloon myballoon; private MenuItem growitem, shrinkitem; private MenuItem leftitem, rightitem; public static void main(string[] args) { MenuBalloon f = new MenuBalloon(); f.setsize(300,300); f.setvisible(true); public MenuBalloon() { settitle("balloon"); setlayout(new FlowLayout()); MenuBar menubar = new MenuBar(); // size-menu Menu sizemenu = new Menu("Size"); growitem = new MenuItem("Grow"); sizemenu.add(growitem); growitem.addactionlistener(this); shrinkitem = new MenuItem("Shrink"); sizemenu.add(shrinkitem); shrinkitem.addactionlistener(this); menubar.add(sizemenu); // move-menu Menu movemenu = new Menu("Move"); leftitem = new MenuItem("Left"); GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 15

movemenu.add(leftitem); leftitem.addactionlistener(this); movemenu.addseparator(); rightitem = new MenuItem("Right"); movemenu.add(rightitem); rightitem.addactionlistener(this); menubar.add(movemenu); setmenubar(menubar); myballoon = new Balloon(20, 50, 50); this.addwindowlistener(this); public void actionperformed (ActionEvent event) { if (event.getsource() == growitem){ myballoon.changesize(10); if (event.getsource() == shrinkitem){ myballoon.changesize(-10); if (event.getsource() == leftitem){ myballoon.moveleft(); if (event.getsource() == rightitem){ myballoon.moveright(); repaint(); Programm 3: Applikation MenuBalloon 5 Schritte, um eine Menuleiste zu erzeugen: 1. Neue Menuleiste erzeugen: MenuBar menubarname = new MenuBar(); 2. Neues Menu erzeugen: Menu menuname = new Menu(menuTitel); 3. Neuen Menueintrag erzeugen und ins Menu einfügen: MenuItem einitem = new MenuItem(itemName); menuname.add(einitem); einitem.addactionlistener(this); Objekt als Listener des entsprechenden Menu-Item-Events anmelden. 4. Schritt 3 für alle MenuItems wiederholen 5. Menu zu Menuleiste hinzufügen: menubarname.add(menuname); 6. Schritte 2 4 für alle Menus wiederholen MenuLeiste in Frame einfügen: setmenubar(menubarname); GUI-Komp., eigenst. Programme.doc 2010 InIT/ZHAW 16