DIES IST EINE UNTERSEITE DER JAVA-PAGE
Zurück zur Java Bluej Page


JAVA GUI Tutorial

Wie erstelle ich mein erstes GUI unter Java?

 

Ganz wichtig ist es, dass die Erklärungen auf dieser Seite nicht unbedingt richtig sein müssen!!!
Die hier abgebildeten Codes funktionieren zwar, jedoch möchte ich davor warnen, bzw. übernehme keine Verantwortung auf die Richtigkeit der hier gegebenen Erklärungen, da ich mich nicht selbst als Java-Profi sehe!!

 

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.

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?

import javax.swing.*;                                                                   Wir importieren diese Bibliothek für diverse Befehle

public class FirstGUI extends JFrame                                                Klasse erstellen, erbt von JFrame

      public FirstGUI()                                                                    Konstruktor
      {
              super("Fenster");                                                           Aufruf des Konstruktors der Superklasse mit übergabe eines Strings
              setSize(300,300);                                                          Fenster auf Grösse 300x300
              setLocation(300,300);                                                    Fenster auf Position 300/300
              setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);             Beim schliessen des Fensters --> Programm beenden
              setVisible(true);                                                            Mach das Fenster sichtbar
      }

 

Genausogut funktioniert dieser Code:

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.

---

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

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!

import javax.swing.*;                                                                    
import java.awt.*;                                                                        AWT Bibliothek importieren für einige Methoden

public class FirstGUI extends JFrame
{
   private JButton button;                                                                Instanzvariable für ein Button
   private JPanel panel;                                                                    Instanzvariable für ein Panel

   public FirstGUI()
   {
       super("Fenster");
       setLocation(300,300);
       setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       setLayout(new BorderLayout(5,5));                                            Ein Layout für JFrame festlegen

       panel = new JPanel(new GridLayout(1,1));                                   Ein Panel erzeugen mit GridLayout
       button = new JButton("erster Button");                                       Einen Button erzeugen

       panel.add(button);                                                                  Button auf Panel packen

       getContentPane().add(panel);                                                   Panel auf Frame packen

       pack();                                                                                 Komplettes Frame auf optimale Größe packen
       setVisible(true);
   }

   public static void main(String[] args)
   {
        FirstGUI g = new FirstGUI();
   }
}

 

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.

 

---

 

Gut, als nächstes wollen wir folgendes Layout entwerfen:

 

 

Oben soll ein sogenanntes Label "Layout Test" anzeigen
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:

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);
        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
        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
        getContentPane().add(BorderLayout.NORTH, oben);
        getContentPane().add(anzeige);

        //Panels auf Frame packen 
        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. Den ButtonListener will ich jetzt hier nicht erklären, erstens weil ich das evtl. nicht so genau könnte. Aber im Prinzip legt man für jeden Button eine Methode an. Beim Klick wird diese aufgerufen und von dort auf die Methode eingabe weitergeleitet, mitgeliefert wird der Text am Button. Mittels setText(a) wird der Labeltext 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 Strecke!!!!!
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! Für Anregungen oder Beschwerden: mfe[at]chello.at

Link zu guter Swing-Seite Swing-Wiki