Lektion 12 - GUI (Graphical User Interfaces)

Info

Die meisten Java-Programme sind natürlich keine Hamster-Programme, sondern "echte" Anwendungen mit einer grafischen Benutzeroberfläche. Dies nennt man im Englischen "GUI - Graphical User Interface".

In dieser Lektion werdet ihr erste GUI-Anwendungen erstellen.

Aufgabe 1 - Hallo, Horst!

Schritt 1:

Erstelle mit dem JavaEditor einen neuen JFrame.

Schritt 2:

In der oberen Leiste findest du die Steuerelemente, wie z.B. Schaltflächen (Buttons), Marken (Labels) und Textfelder (TextFields).

Schritt 3:

Erstelle das folgende Formular, indem du die passenden Steuerelemente von der Palette auf das Formular ziehst.

Schritt 4:

Verändere die Eigenschaften (Attribute) der einzelnen Steuerelemente, indem du diese unten rechts anpasst, sodass dein Formular genau wie in Schritt 3 aussieht. Passe die Texte des Labels und des Buttons an.

Schritt 5:

Klicke im Formular doppelt auf den "Sage Hallo!"-Button. Du kommst nun in den Quellcode-Editor. Die Methode in der du landest, wird ausgeführt, wenn man im Formular auf "Sage Hallo!" klickt.

public void bSageHallo_ActionPerformed(ActionEvent evt) {
  // TODO hier Quelltext einfügen
} // end of bSageHallo_ActionPerformed

Füge den folgenden Code in deine bSageHallo_ActionPerformed-Methode ein:

JOptionPane.showMessageDialog(this, "Hallo, " + jTextField1.getText());

Den ganzen Code drum herum ignorieren wir erst einmal. Am Ende sollte es so aussehen:

Führe das Programm mit einem Klick auf den "Starten"-Knopf aus und probiere dein erstes GUI-Programm aus!

Lösungen zu Aufgabe 1:

HalloHorst.jfm

object HalloHorst: TFGUIForm
  Left = 672
  Top = 440
  BorderIcons = [biSystemMenu]
  Caption = 'HalloHorst'
  ClientHeight = 65
  ClientWidth = 225
  Color = clBtnFace
  ParentFont = True
  FormStyle = fsStayOnTop
  OldCreateOrder = True
  Position = poDesigned
  Visible = True
  OnClose = FormClose
  OnCloseQuery = FormCloseQuery
  OnResize = FormResize
  FrameType = 5
  Resizable = False
  Undecorated = False
  Background = clBtnFace
  PixelsPerInch = 96
  TextHeight = 13
  object lName: TJLabel
    Tag = 1
    Left = 8
    Top = 8
    Width = 46
    Height = 20
    Hint = 'jLabel1'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -12
    Font.Name = 'Dialog'
    Font.Style = [fsBold]
    Foreground = 3355443
    Background = clBtnFace
    Text = 'Name:'
    HorizontalAlignment = LEFT
    VerticalAlignment = CENTER
    HorizontalTextPosition = RIGHT
    VerticalTextPosition = CENTER
    IconTextGap = 4
    DisplayedMnemonic = 0
    DisplayedMnemonicIndex = 0
  end
  object jTextField1: TJTextField
    Tag = 2
    Left = 64
    Top = 8
    Width = 150
    Height = 20
    Cursor = crIBeam
    Hint = 'jTextField1'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -12
    Font.Name = 'Dialog'
    Font.Style = []
    Foreground = 3355443
    Background = clWhite
    HorizontalAlignment = LEFT
    Text = ''
    Editable = True
  end
  object bSageHallo: TJButton
    Tag = 4
    Left = 8
    Top = 32
    Width = 211
    Height = 25
    Hint = 'jButton1'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -12
    Font.Name = 'Dialog'
    Font.Style = [fsBold]
    Foreground = 3355443
    Background = 15658734
    actionPerformed = 'bSageHallo_ActionPerformed'
    Text = 'Sage Hallo!'
    Mnemonic = 0
    DisplayedMnemonicIndex = 0
    Selected = False
    BorderPainted = True
    FocusPainted = False
    ContentAreaFilled = True
    HorizontalAlignment = CENTER
    VerticalAlignment = CENTER
    HorizontalTextPosition = RIGHT
    VerticalTextPosition = CENTER
    IconTextGap = 4
    RolloverEnabled = False
    Border.BorderType = NoBorder
    Border.LineColor = clBlack
    Border.LineThickness = 0
    Border.LineRounded = False
    Border.EtchHighlightColor = clBlack
    Border.EtchShadowColor = clBlack
    Border.Etchtype = 0
    Border.BevelHighlightColor = clBlack
    Border.BevelShadowColor = clBlack
    Border.Beveltype = 0
    Border.MatteColor = clBlack
    Border.MatteTop = 0
    Border.MatteLeft = 0
    Border.MatteBottom = 0
    Border.MatteRight = 0
  end
end

HalloHorst.java

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
 
/**
 *
 * Beschreibung
 *
 * @version 1.0 vom 17.06.2021
 * @author 
 */
 
public class HalloHorst extends JFrame {
  // Anfang Attribute
  private JLabel lName = new JLabel();
  private JTextField jTextField1 = new JTextField();
  private JButton bSageHallo = new JButton();
  // Ende Attribute
 
  public HalloHorst() { 
    // Frame-Initialisierung
    super();
    setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
    int frameWidth = 241; 
    int frameHeight = 104;
    setSize(frameWidth, frameHeight);
    Dimension d = Toolkit.getDefaultToolkit().getScreenSize();
    int x = (d.width - getSize().width) / 2;
    int y = (d.height - getSize().height) / 2;
    setLocation(x, y);
    setTitle("HalloHorst");
    setResizable(false);
    Container cp = getContentPane();
    cp.setLayout(null);
    // Anfang Komponenten
 
    lName.setBounds(8, 8, 46, 20);
    lName.setText("Name:");
    cp.add(lName);
    jTextField1.setBounds(64, 8, 150, 20);
    cp.add(jTextField1);
    bSageHallo.setBounds(8, 32, 211, 25);
    bSageHallo.setText("Sage Hallo!");
    bSageHallo.setMargin(new Insets(2, 2, 2, 2));
    bSageHallo.addActionListener(new ActionListener() { 
      public void actionPerformed(ActionEvent evt) { 
        bSageHallo_ActionPerformed(evt);
      }
    });
    cp.add(bSageHallo);
    // Ende Komponenten
 
    setVisible(true);
  } // end of public HalloHorst
 
  // Anfang Methoden
 
  public static void main(String[] args) {
    new HalloHorst();
  } // end of main
 
  public void bSageHallo_ActionPerformed(ActionEvent evt) {
    // TODO hier Quelltext einfügen
    JOptionPane.showMessageDialog(this, "Hallo, " + jTextField1.getText());
 
  } // end of bSageHallo_ActionPerformed
 
  // Ende Methoden
} // end of class HalloHorst

Aufgabe 2:

Erstelle den folgenden JFrame:

Vor der main(…)-Methode soll eine Zufallszahl deklariert werden, die in der main(…)-Methode generiert wird:

static int zufallszahl = 0;
 
public static void main(String[] args) {
  new Zahlenraten();
 
  zufallszahl = (int)Math.floor(Math.random() * 100 + 1);
} // end of main

Wenn der Raten-Button angeklickt wird, soll mit
```
int geraten = Integer.parseInt(jTextField1.getText());
```
die geratene Zahl ermittelt werden. Danach musst du mit Hilfe von if-Anweisungen und dem JOptionPane von oben folgendes umsetzen:
- Wenn die geratene Zahl zu hoch ist, soll als Nachricht "Zu hoch geraten" ausgegeben werden.
- Wenn die geratene Zahl zu niedrig ist, soll als Nachricht "Zu niedrig geraten" ausgegeben werden.
- Wenn richtig geraten wurde, soll als Nachricht "Richtig geraten, die Zahl war: XX" ausgegeben werden (XX soll durch die Zahl ersetzt werden).

Lösung zu Aufgabe 2

Zahlenraten.jfm

object Zahlenraten: TFGUIForm
  Left = 913
  Top = 253
  BorderIcons = [biSystemMenu]
  Caption = 'Zahlenraten'
  ClientHeight = 73
  ClientWidth = 233
  Color = clBtnFace
  ParentFont = True
  FormStyle = fsStayOnTop
  OldCreateOrder = True
  Position = poDesigned
  ShowHint = True
  Visible = True
  OnClose = FormClose
  OnCloseQuery = FormCloseQuery
  OnResize = FormResize
  FrameType = 5
  Resizable = False
  Undecorated = False
  Background = clBtnFace
  PixelsPerInch = 96
  TextHeight = 13
  object lZahl: TJLabel
    Tag = 1
    Left = 8
    Top = 8
    Width = 62
    Height = 20
    Hint = 'jLabel1'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -12
    Font.Name = 'Dialog'
    Font.Style = [fsBold]
    Foreground = 3355443
    Background = clBtnFace
    Text = 'Zahl:'
    HorizontalAlignment = LEFT
    VerticalAlignment = CENTER
    HorizontalTextPosition = RIGHT
    VerticalTextPosition = CENTER
    IconTextGap = 4
    DisplayedMnemonic = 0
    DisplayedMnemonicIndex = 0
  end
  object jTextField1: TJTextField
    Tag = 2
    Left = 80
    Top = 8
    Width = 145
    Height = 25
    Cursor = crIBeam
    Hint = 'jTextField1'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -12
    Font.Name = 'Dialog'
    Font.Style = []
    Foreground = 3355443
    Background = clWhite
    HorizontalAlignment = LEFT
    Text = ''
    Editable = True
  end
  object bRaten: TJButton
    Tag = 4
    Left = 8
    Top = 40
    Width = 219
    Height = 25
    Hint = 'jButton1'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -12
    Font.Name = 'Dialog'
    Font.Style = [fsBold]
    Foreground = 3355443
    Background = 15658734
    actionPerformed = 'bRaten_ActionPerformed'
    Text = 'Raten!'
    Mnemonic = 0
    DisplayedMnemonicIndex = 0
    Selected = False
    BorderPainted = True
    FocusPainted = False
    ContentAreaFilled = True
    HorizontalAlignment = CENTER
    VerticalAlignment = CENTER
    HorizontalTextPosition = RIGHT
    VerticalTextPosition = CENTER
    IconTextGap = 4
    RolloverEnabled = False
    Border.BorderType = NoBorder
    Border.LineColor = clBlack
    Border.LineThickness = 0
    Border.LineRounded = False
    Border.EtchHighlightColor = clBlack
    Border.EtchShadowColor = clBlack
    Border.Etchtype = 0
    Border.BevelHighlightColor = clBlack
    Border.BevelShadowColor = clBlack
    Border.Beveltype = 0
    Border.MatteColor = clBlack
    Border.MatteTop = 0
    Border.MatteLeft = 0
    Border.MatteBottom = 0
    Border.MatteRight = 0
  end
end

Zahlenraten.java

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
 
/**
 *
 * Beschreibung
 *
 * @version 1.0 vom 17.06.2021
 * @author 
 */
 
public class Zahlenraten extends JFrame {
  // Anfang Attribute
  private JLabel lZahl = new JLabel();
  private JTextField jTextField1 = new JTextField();
  private JButton bRaten = new JButton();
  // Ende Attribute
 
  public Zahlenraten() { 
    // Frame-Initialisierung
    super();
    setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
    int frameWidth = 249; 
    int frameHeight = 112;
    setSize(frameWidth, frameHeight);
    Dimension d = Toolkit.getDefaultToolkit().getScreenSize();
    int x = (d.width - getSize().width) / 2;
    int y = (d.height - getSize().height) / 2;
    setLocation(x, y);
    setTitle("Zahlenraten");
    setResizable(false);
    Container cp = getContentPane();
    cp.setLayout(null);
    // Anfang Komponenten
 
    lZahl.setBounds(8, 8, 62, 20);
    lZahl.setText("Zahl:");
    cp.add(lZahl);
    jTextField1.setBounds(80, 8, 145, 25);
    cp.add(jTextField1);
    bRaten.setBounds(8, 40, 219, 25);
    bRaten.setText("Raten!");
    bRaten.setMargin(new Insets(2, 2, 2, 2));
    bRaten.addActionListener(new ActionListener() { 
      public void actionPerformed(ActionEvent evt) { 
        bRaten_ActionPerformed(evt);
      }
    });
    cp.add(bRaten);
    // Ende Komponenten
 
    setVisible(true);
  } // end of public Zahlenraten
 
  // Anfang Methoden
 
  static int zufallszahl = 0;
 
  public static void main(String[] args) {
    new Zahlenraten();
 
    zufallszahl = (int)Math.floor(Math.random() * 100 + 1);
  } // end of main
 
  public void bRaten_ActionPerformed(ActionEvent evt) {
    // TODO hier Quelltext einfügen
    int geraten = Integer.parseInt(jTextField1.getText());
 
    if (geraten > zufallszahl) {
      JOptionPane.showMessageDialog(this, "Du hast zu hoch geraten!");  
    } else if (geraten < zufallszahl) {
      JOptionPane.showMessageDialog(this, "Du hast zu niedrig geraten!");  
    } else {
      JOptionPane.showMessageDialog(this, "Du hast richtig geraten! Die Zahl war: " + zufallszahl);  
    } // end of if-else
 
  } // end of bRaten_ActionPerformed
 
  // Ende Methoden
} // end of class Zahlenraten

Aufgabe 3:

Erstellt eigene GUI-Programme, indem ihr:

entweder die Konsolen-Programme (Taschen-, Währungs-, Temperatur-, BMI- oder Blutalkoholspiegelrechner) als GUI-Programme nachbaut
oder euch eigene Programme ausdenkt.

Gebt mindestens eines dieser GUI-Programme ab (jeweils die .java und die .jfm Datei!)