Java GUI-Tutorial
JAVA GUI Tutorial
Wie erstelle ich mein erstes
GUI unter Java?
Gute Bücher zum Thema Java Gui sind bei
Amazon erhältlich!
Empfehlungen für einige Bücher findest du am Ende der Seite.
Die Elemente
Zuerst sollte man einmal wissen, aus welchen Elementen bzw. Objekten so ein GUI(=Graphical User Interface) besteht. denn, zumindest war das bei mir so, erst dann wird einem klar was man da eigentlich macht bzw. programmieren muss!
1. Das Fenster – Frame
2. Ein Untergrund auf den wir etwas platzieren können – Panel
3. Diverse Dinge wie Buttons, Textfelder,….. welche auf dem Panel plaziert werden
Im Prinzip kann man immer sagen:
zuerst Frame erstellen
dann Panel erstellen
diverse Buttons usw. auf Panel packen bzw. neue Panels darauf packen
Panel auf Frame packen
Frame anzeigen
Zuerst gibts ja da mal das eigentliche Fenster. Wir erstellen es mit Swing und nehmen hierfür ein JFrame.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import javax.swing.*;
public class FirstGUI extends JFrame
{
public FirstGUI()
{
super("Fenster");
setSize(300,300);
setLocation(300,300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public static void main(String[] args)
{
FirstGUI g = new FirstGUI();
}
}
So nun haben wir erstmal ein
Fenster am Bildschirm, nur wie haben wir das nun geschafft?
Zeile 1: Wir importieren diese Bibliothek für diverse Befehle
Zeile 3: Klasse erstellen, erbt von JFrame
Zeile 5: Konstruktor
Zeile 7: Aufruf des Konstruktors der Superklasse mit übergabe eines Strings
Zeile 8: Fenster auf Grösse 300×300
Zeile 9: Fenster auf Position 300/300
Zeile 10: Beim schliessen des Fensters –> Programm beenden
Zeile 11: Mach das Fenster sichtbar
Genausogut funktioniert dieser
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import javax.swing.*;
public class FirstGUI{
private JFrame fenster;
public FirstGUI(){
fenster = new JFrame("Fenster");
fenster.setSize(300,300);
fenster.setLocation(300,300);
fenster.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
fenster.setVisible(true);
}
public static void main(String[] args){
FirstGUI g = new FirstGUI();
}
}
Einziger Unterschied, diese Klasse ist keine Subklasse von JFrame. Darum müssen wir ein Objekt von JFrame erstellen und sämtliche Befehle mit dem Namen des Objektes und dannach die Methode aufrufen.
Welche Art man wählt kommt ganz darauf an, ob sich die komplette Klasse wie ein JFrame verhalten soll oder nicht.
Fenster anreichern
Gut, nun so ein leeres Fenster ist vielleicht am Anfang eine schöne Motivation, jedoch gibt es uns nicht wirlich viel! Wie wäre es nun wenn wir z.B. einen Button daraufsetzen würden!? Gut, mal sehen. Wie wir oben gelesen haben, benötigen wir dafür ein Panel also quasi Unterlage (nicht immer unbedingt, man kann aber z.B. Mausabfragen nur auf ein Panel machen). Wir werden nun also ein Panel und einen Button erzeugen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import javax.swing.*;
import java.awt.*;
public class FirstGUI extends JFrame
{
private JButton button;
private JPanel panel;
public FirstGUI()
{
super("Fenster");
setLocation(300,300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(new BorderLayout(5,5));
panel = new JPanel(new GridLayout(1,1));
button = new JButton("erster Button");
panel.add(button);
getContentPane().add(panel);
pack();
setVisible(true);
}
public static void main(String[] args)
{
FirstGUI g = new FirstGUI();
}
}
So hier sind nun einige neue Dinge passiert!
Zeile 2: AWT Bibliothek importieren für einige Methoden
Zeile 6: Instanzvariable für ein Button
Zeile 7: Instanzvariable für ein Panel
Zeile 14: Ein Layout für JFrame festlegen
Zeile 16: Ein Panel erzeugen mit GridLayout
Zeile 17: Einen Button erzeugen
Zeile 19: Button auf Panel packen
Zeile 21: Panel auf Frame packen
Zeile 23: Komplettes Frame auf optimale Größe packen
Das Layout
Nun haben wir hier des öfteren etwas von Layout gehört, was hat es damit auf sich? Ein Layout gliedert ein Frame oder Panel in Bereiche ein, in diese man gezielt Buttons, Panels, TextField´s usw. hinensetzen kann. Damit das ganze dann auch eine schöne Anordnung hat so wie man sich das wünscht gibt es eben verschiedene Layouts.
Ich will hier jetzt nur auf 2 eingehen. Auf das GridLayout und das BorderLayout. Damit kann man meiner meinung nach schon viel abbilden. Für andere Layouts sucht einfach im Netz.
Das GridLayout
Format: new GridLayout(int Zeilen, int Spalten)
Wie man an der Abbildung sehen kann wird z.B. das Panel in Zeilen und Spalten eingeteilt. Objekte werden automatisch von links oben nach rechts unten angeordnet. Und zwar in dieser Reihenfolge in der man sie auf das Panel packt.
Das Grid Layout
Das BorderLayout
Format: new BorderLayout(int horAbstand, int verAbstand)
Beim BorderLayout wird das Panel in 5 Bereiche eingeteilt. Norden, Süden, Osten, Westen und Mitte. Man kann nun Objekte in ein beliebiges Feld packen.
z.B. panel.add(BorderLayout.EAST, button);
Natürlich auch zu verwenden:
BorderLayout.NORTH, …WEST, …SOUTH
Um in die Mitte zu platzieren braucht man nichts anzugeben. Einfach nur panel.add(button);
Wird ein Bereich nicht gefüllt, entsteht keine freie Fläche, sondern es wird der gesamte Bereich so weit wie möglich genutzt.
Ein Layout kann ein Frame und ein Panel haben. Vielleicht noch andere Komponenten auch, aber da hab ich keine genaue Ahnung darüber (siehe roter Text gaaaanz oben )
Wichtig ist vielleicht auch noch, dass ein Layout ein weiteres enthalten kann. Also wir können z.B. ein BorderLayout hernehmen und dann im West-Bereich ein GridLayout platzieren. Innerhalb diesem könnten wir im Grid 2 wieder ein GridLayout definieren usw.
Das Border Layout
Ereignisse erkennen
Gut, als nächstes wollen wir folgendes Layout entwerfen:
Oben soll ein sogenanntes Label „Layout Test“ angezeigt werden
3 Buttons sollen am linken Rand positioniert sein und daneben soll stehen, welcher Button gerade geklickt wurde
Was brauchen wir?
3 Buttons
2 Labels (zeigen Text an)
1 Panels für Button, die anderen Objekte legen wir direkt aufs Frame (würde auch mit 2 weiteren Panels gehen)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import javax.swing.*;
import java.awt.*;
//Event brauchen wir für das Ereigniss, wenn ein Button geklickt wird
import java.awt.event.*;
public class FirstGUI extends JFrame{
private JButton button1;
private JButton button2;
private JButton button3;
private JPanel panelButton;
private JLabel oben;
private JLabel anzeige;
public FirstGUI(){
super("Fenster");
setLocation(300,300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//Das BorderLayout ist mal das erste - später fügen wir noch ein GridLayout im Westen hinzu
getContentPane().setLayout(new BorderLayout(5,5));
//Buttons erzeugen
button1 = new JButton("Button 1");
button2 = new JButton("Button 2");
button3 = new JButton("Button 3");
//Panels erzeugen auf einem GridLayout
panelButton = new JPanel(new GridLayout(3,1));
//Auf Panel Buttons packen
panelButton.add(button1);
panelButton.add(button2);
panelButton.add(button3);
//Listener für Buttons
addButtonListener(button1);
addButtonListener(button2);
addButtonListener(button3);
//Labels erzeugen
oben = new JLabel("Layout Test");
//Label zentrieren
oben.setHorizontalAlignment(JLabel.CENTER);
anzeige = new JLabel("Button klicken");
//Labels auf Frame packen (direkt auf das BorderLayout)
getContentPane().add(BorderLayout.NORTH, oben);
getContentPane().add(anzeige);
//Panels auf Frame packen (das panelButton hat ein GridLayout, dass jetzt in den WestBereich des BorderLayouts kommt)
getContentPane().add(BorderLayout.WEST, panelButton);
pack();
setVisible(true);
}
public static void main(String[] args){
FirstGUI g = new FirstGUI();
}
private void addButtonListener(JButton b){
b.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent ae){
eingabe(ae.getActionCommand());
}
});
}
private void eingabe(String a){
anzeige.setText(a);
}
}
Abgesehen vom ButtonListener sollte das ganze verständlich sein. Man kann für mehrere Buttons natürlich die JButtons als Array definieren.Die private Methode „addButtoListener“ erwartet als Übergabeparameter ein Button Objekt. Davon haben wir ja vorher 3 angelegt. Diese Methode fügt dann für den übergebenen Button einen ActionListener hinzu.
Der Methode „addActionListener“ muss ein ActionListener Objekt übergeben werden. In diesem Beispiel wird das mit einer anonymen Klasse erledigt (siehe hierzu z.B. diese Erklärung). Im ActionListener wird die Methode „actionPerformed“ überschrieben, diese wird aufgerufen, wenn eben der Button geklickt wird. Wir geben an, dass dann die Methode „eingabe“ aufgerufen werden soll. Dieser wird auch noch der ActionCommand mitübergeben, der den Text des Buttons enthält. In „eingabe“ wird dann der Labeltext auf den übergebenen Text geändert.
Also an und für sich wars das schon. Nur eins vielleicht noch. Man denkt sich vielleicht jetzt „So viel Code für so ein bischen GUI… dann lieber GUI nicht händisch programmieren sondern zusammenklicken“. Nur bleibt das Verständniss auf der trecke!!!!!
Und wenn mal man weiss um was und wie das geht, dann kommts es einem nicht mehr sooo viel vor!
Also dann viel Glück!