IT2 Informatik

Zusammenfassung (Layouts)
Name: Miriam, Sven, Elias, Enes, Noé, Stefan, Datum: 04.05.18 Kurs IT2 Blatt Nr.: 2/2 Lfd. Nr.: 2
Jan, Leo und Paul.

Das Borderlayout
• Erstellung mehrerer Areale (North, East, West, South und CENTER).
• Ein GUI-Element wird einem Bereich zugeordnet.
• Bei nicht Benutzung eines Areals, wird der nicht verwendete Platz auf die anderen Bereiche
aufgeteilt (Mit Ausnahme von dem Bereich Center).
• Die Buttons werden größer und übernehmen die gesamte Fläche eines Areals.

Die Struktur des Borderlayout ist gut für die oberste Ebene einer Benutzeroberfläche geeignet.
Wenn man ein GUI-Element hinzufügen möchte, muss man dieses nur dem Areal hinzufügen.

Das Cardlayout
• Kartenstapel mit zugehöriger Kartenbox.
• Erstellung des Containers mit Parametern.
• Erstellung der Buttons und ihr Aufenthaltsort.
• Item-Listener erstellen.
• Alle Elemente zu dem Container übergeben.
• Beispiel: Google Maps (allg. Android Applikationen).

Das Cardlayout ist geeignet, wenn man nur ein Fenster angezeigt haben und mit Hilfe eines
Dropdown-Menüs oder per Buttons zur nächsten Karte wechseln möchte.

Das Flowlayout
• Freie Skalierung, individuelle Änderungen.
• Flowlayout.CENTER → zentriert die einzelnen Buttons. (Flowlayout.LEFT, Flowlayout.RIGHT)
• Ordnet alle Komponenten nebeneinander.
• Wenn kein Platz in der Zeile, wird das nächste in der weiteren Zeile überschrieben.
• Bei Veränderung der Größe des Fensters → automatische Anpassung der Zeilenanordnung.
• Eingabe des horizontalen, sowie auch des vertikalen Wertes im Konstruktor.
• Beispiel: Word → Die Icon-Leiste.

Das Flowlayout eignet sich hervorragend, um beispielsweise eine Icon-Leiste anzeigen zu können.

Das GridBagLayout
• Anpassung des Fensters beim verkleinern/vergrößern, mithilfe von Schiebereglern.
• Erstellung eines JFrames und die Angabe der Fenstergröße.
• Mindestabstand, Innenpolsterung der Komp., Verteilung, Skalierung und Anzahl näher def.

Das GridBagLayout könnte man für die Benutzung eines Anmeldefensters implementieren, da man
alles strukturiert anordnen kann (Nickname, Passwort, E-Mail-Adresse).
IT2 Informatik
Zusammenfassung (Layouts)
Name: Miriam, Sven, Elias, Enes, Noé, Stefan, Datum: 04.05.18 Kurs IT2 Blatt Nr.: 2/2 Lfd. Nr.: 2
Jan, Leo und Paul.

Das Boxlayout
• Alle Komponenten (Buttons) sind gleich groß.
• Bei Veränderung der Größe des Fensters → Unflexible Anpassung (Alle Buttons werden nicht
angezeigt.

Das Boxlayout ist geeignet, um kleine Minispiele zu programmieren (Tic-Tac-Toe).

Das GroupLayout
• Gruppierung der Buttons.
• Gruppen bestehen aus der vertikalen und horizontalen Ebene.
• Parallelität bei den Ebenen (jeder Button hat den gleichen Abstand).
• Getrennte Implementierung der Ebenen.

Das Grouplayout wird meistens benutzt, um Online-Tests zu programmieren, da bekanntlich diese

sehr viele Checkboxen benötigen.
 IT Layoutübersicht
Abiturvorbereitung
Namen: Datum: Kurs: Blatt N: 1/8 Lfd. N:
Merthan, Keanu, Sebastian W, Max, 04.05.2018 IT OG6
Norman, Semira, Sebastian H., Andrea,
Jona und Batu

GridBagLayout: Das GridBagLayout basiert - wie das GridLayout - auf einem

Gitter. Allerdings ist der GridBagLayout -Manager erheblich feeibler. Er bietet
unter anderem folgende Möglichkeiten: Eine Komponente kann sich über einen
Anzeigebereich von mehreren Gitterzellen erstrecken oder Spalten und Zeilen
können unterschiedlich breit bzw. hoch sein. Eine Komponente kann, die ihr
zugewiesenen Gitterzellen voll ausfüllen oder aber in ihrer normalen Größe
dargestellt werden. Wenn sie in ihrer normalen Größe dargestellt wird, kann
angegeben werden, wie sie innerhalb der zugewiesenen Gitterzellen angeordnet
wird. Falls die Größe des Containers vom Benutzer verändert wird, kann
angegeben werden, zu welchen Anteilen die Höhen-/Breitenänderung auf die
einzelnen Gitterzeilen und -spalten verteilt wird. So kann beispielsweise spezifziert
werden, dass sich Änderungen der Höhe eines Fensters ausschließlich auf die
Höhe einer bestimmten Gitterzeile auswirken und alle anderen Gitterzeilen eine
feste Höhe haben.

So kann dieses Layout z.B. aussehen:

Wie man im oberen Bild sehen kann, ist das GridBagLayout sehr praktisch für
Eingabefelder, oder wie es auch oft benutzt wird, als anmelde Felder, weil Sie ihre
Größe nicht verändern und immer am gleichen Punkt bleiben.

Hierfür war es Wichtig das man den Buttons eine Koordinate gibt, damit Sie immer
an der gleichen Stelle blieben.
 IT Layoutübersicht
Abiturvorbereitung
Namen: Datum: Kurs: Blatt N: 2/8 Lfd. N:
Merthan, Keanu, Sebastian W, Max, 04.05.2018 IT OG6
Norman, Semira, Sebastian H., Andrea,
Jona und Batu

Quellcode:
 IT Layoutübersicht
Abiturvorbereitung
Namen: Datum: Kurs: Blatt N: 3/8 Lfd. N:
Merthan, Keanu, Sebastian W, Max, 04.05.2018 IT OG6
Norman, Semira, Sebastian H., Andrea,
Jona und Batu

Das Flow-Layout ist ein Layout-Manager, der allein entscheidet, wo er ein Element anordnet.
 man hat keine Möglichkeit der Beeinflsslng.
Dabei geht das Flow Layout ähnlich vor wie eine Textverarbeitung mit Fließtext
 jedes Element wird rechts neben das vorher platzierte in eine Zeile gesetzt.
Wenn ein Element keinen Platz mehr hat, wird eine neue Zeile begonnen. Dieses Prinzip gilt auch
während der Laufzeit
 an Fensterveränderlngen anpassbar

Mögliche Werte:

1. RIGHT

2. LEFT

3. CENTER

4. LEADING

5. TRAILING
Konstructoren in dem FlowLayout Manager
1. FlowLayout(): erstellt ein Flusslayout mit zentrierter Ausrichtung und einer
standardmäßigen horizontalen und vertikalen Lücke von 5 Einheiten.

2. FlowLayout(int align): erstellt ein Flusslayout mit der angegebenen Ausrichtung

und einer standardmäßigen horizontalen und vertikalen Lücke von 5 Einheiten.

3. FlowLayout(int align, int hgap, int vgap): erstellt ein Flusslayout mit der
angegebenen Ausrichtung und der angegebenen horizontalen und vertikalen Lücke
 IT Layoutübersicht
Abiturvorbereitung
Namen: Datum: Kurs: Blatt N: 4/8 Lfd. N:
Merthan, Keanu, Sebastian W, Max, 04.05.2018 IT OG6
Norman, Semira, Sebastian H., Andrea,
Jona und Batu

public class FlowLayoutDemo extends JFrame {

private JPanel contentPane;

/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
FlowLayoutDemo frame = new FlowLayoutDemo();
frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}

/**
* Create the frame.
*/
public FlowLayoutDemo() {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
contentPane.setLayout(new BorderLayout(0, 0));
setContentPane(contentPane);

JPanel panel = new JPanel();

contentPane.add(panel, BorderLayout.CENTER);
panel.setLayout(new FlowLayout(FlowLayout.CENTER, 5, 5));

JButton btnNewButton = new JButton("Hallo");

panel.add(btnNewButton);

JButton btnNewButton_1 = new JButton("Moin");

panel.add(btnNewButton_1);

JButton btnNewButton_2 = new JButton("Hey");

panel.add(btnNewButton_2);

JButton btnNewButton_3 = new JButton("Hii");

panel.add(btnNewButton_3);
JLabel label;
label = new JLabel();

panel.add(label);
this.add(panel);

}
 IT Layoutübersicht
Abiturvorbereitung
Namen: Datum: Kurs: Blatt N: 5/8 Lfd. N:
Merthan, Keanu, Sebastian W, Max, 04.05.2018 IT OG6
Norman, Semira, Sebastian H., Andrea,
Jona und Batu

Das BorderLayout ist ein grundlegendes Layout und erfüllt grundlegende

Anforderungen und ist z.B. für den Firebrowser oder Mailreader geeignet.
Das BorderLayout teilt seinen Container in 5 Bereiche ein, welche typischer
Weise je ein oberen und unteren Button haben, welche sich über die
gesamte Breite erstrecken und drei vertikale Button dazwischen (Border
North, South, West, East und Center). Diese Buttons können nach Wunsch
auch unbenutzt bleiben. Bei einer Größenänderung des Containers wird
vom Layout-Manager festgelegt welche Bereiche wieviel Platz zugewiesen
bekommen.

Anleitung:

Als erstes muss man eine Klasse BorderLayoutDemo erstellen und diese
Klasse erbt von javae.swing.JFrame.

Als nächstes ändert man den javae.swing.JPanel in jPanel1 und Defniert

ihn als neuen JPanel. Danach muss man die sichtbaren Elemente als
Objektvariablen anlegen.

Der nächste Schritt besteht darin, einen Konstruktor zu erstellen, und

schreibt gleich eine Methode:
setDefaultCloseOperation(javae.swing.WindowConstants.EXIT_ON_CLOSE).

Nun fügen wir den erstellten JPanel zum BorderLayout hinzu. Der nächste
Schritt besteht darin, die JButtons den JPanels hinzuzufügen und mithilfe
von Methoden zu plazieren bzw. ihren Aufenthaltsort zu bestimmen.

Im nächsten Schritt sorgen wir dafür, dass das jPanel zum aktiven,
sichtbaren Inhalt des JFrames gemacht wird.

Mit der Methode “pack();“ kann man die Elemente auf die kleinstmögliche
Größe bringen.

Zuletzt geben wir die Main Methode an und setzen unser BoderLayout auf
visible, also sichtbar.
IT Layoutübersicht
Abiturvorbereitung
Namen: Datum: Kurs: Blatt N: 6/8 Lfd. N:
Merthan, Keanu, Sebastian W, Max, 04.05.2018 IT OG6
Norman, Semira, Sebastian H., Andrea,
Jona und Batu
 IT Layoutübersicht
Abiturvorbereitung
Namen: Datum: Kurs: Blatt N: 7/8 Lfd. N:
Merthan, Keanu, Sebastian W, Max, 04.05.2018 IT OG6
Norman, Semira, Sebastian H., Andrea,
Jona und Batu

Man setzt beim GridLayout zuerst mittels Konstruktor die Größe des Feldes

Dann fügt man Elemente mit .add auf den Container hinzu (contentPane)

Besetzt wird von links oben nach rechts unten.

contentPane.setLayout(new GridLayout (2, 2));

contentPane.add(new JButton("da"));
contentPane.add(new JButton("da2"));
contentPane.add(new JButton("da"));
contentPane.add(new JButton("da"));

public class GridLayout1337 extends JFrame {

JPanel contentPane;

public static void main(String[] args) {

GridLayout1337 frame = new GridLayout1337();

frame.setVisible(true);

}
public GridLayout1337() {

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setBounds(100, 100, 450, 300);
contentPane = new JPanel();
contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
contentPane.setLayout(new GridLayout(2, 2));
contentPane.add(new JButton("da1"));
contentPane.add(new JButton("da2"));
contentPane.add(new JButton("da3"));
contentPane.add(new JButton("da4"));

setContentPane(contentPane);

}
 IT Layoutübersicht
Abiturvorbereitung
Namen: Datum: Kurs: Blatt N: 8/8 Lfd. N:
Merthan, Keanu, Sebastian W, Max, 04.05.2018 IT OG6
Norman, Semira, Sebastian H., Andrea,
Jona und Batu

Beim BoxLayout packt man Elemente entweder Horizontal oder Vertikal

aneinander.

Code:

Dann fügt man Elemente mit .add hinzu

Beim BoxLayout Konstruktor legt man die Orientierung für die Reihe der
Elemente fest, die gezeigt werden.
In dem Fall oben: Y-AXIS
 [Swing] GroupLayout
Im GroupLayout werden die einzelnen Dimensionen (horizontale/vertikale) unabhängig voneinander definiert. Alle
Komponenten, die mittels GroupLayout angeordnet werden sollen müssen für beide Dimensionen definiert sein.
Ursprünglich wurde das GroupLayout für „GUI builder“ (z.B. die NetBeans IDE) entwickelt, lässt sich aber ebenfalls
händisch programmieren.
Es lässt sich gut zur Anordnung mehrer Komponenten
benutzen, beispielsweise bei der Implementierung eines
Dialogfensters mit mehreren Checkboxen, Eingabefeldern,
usw.

Das GroupLayout funktioniert hierarchisch, die

Komponenten werden innerhalb der einzelnen Dimensionen in
Gruppen angeordnet. Es werden zwei grundlegende Gruppen
definiert: die parallel group und die sequential group. Bei
der parallel group werden die Komponenten „parallel“
angeordnet, bei der sequential group „neben-, bzw.
untereinander“.

Schauen wir uns nun folgendes Beispiel an:

In der horizontalen Dimension erkennen wir, dass die Boxen C1-

C4 sequentiell angeordnet sind, die Boxen C3 und C4 zudem
jedoch parallel zueinander stehen. Die horizontale Dimension
wird durch eine sequentielle Gruppe und eine parallele Gruppe
https://docs.oracle.com/javase/tutorial/figures/uiswing/layout/groups1b.PNG

abgebildet: horizontale = sequentielle Gruppe {c1, c2, parallele Gruppe {c3, c4}}
Die vertikale Dimension ist ebenfalls sequentiell mit einer parallelen Gruppe:
vertikale = sequentielle Gruppe {parallele Gruppe{c1, c2, c3}, c4}

Wir erkennen die Hierarchie: Gruppen können einerseits Komponenten, andererseits aber auch weitere Gruppen
enthalten. Das GroupLayout bietet zudem sogenannte „Gaps“ an, dies sind unsichtbare Lücken. Für den Anfang ist es
jedoch am einfachsten, diese Lücken durch die Methoden GroupLayout.setAutoCreateGaps(true) und
GroupLayout.setAutoCreateContainerGaps(true) automatisch generieren zulassen.

Wir beginnen wie üblich damit, die einzelnen Komponenten (z.B. JButton) zu initialisieren, anschließend erstellen wir
das eigentliche GroupLayout mit
GroupLayout groupLayout = new GroupLayout(frame.getContentPane());.

Nun müssen die einzelnen Dimensionen erstellt werden, dies erfolgt durch
groupLayout.setHorizontalGroup(); und groupLayout.setVerticalGroup();.
Die horizontale bzw. vertikale Gruppe muss nun mit Inhalt gefüllt werden, die folgenden Methoden stehen hierbei zur
Verfügung:

GroupLayout.addGroup(GroupLayout.createParallelGroup())
GroupLayout.addComponent(new JButton())

Bei der addGrop Methode wird eine Gruppe – welche mit createParallelGroup bzw. createSequentialGroup erstellt wird
– dem Layout hinzugefügt.
Bei parallelen Gruppen kann außerdem die Ausrichtung bestimmt werden. Beispiel:

GroupLayout.createParallelGroup(GroupLayout.Alignment.CENTER)

Keanu Dölle Attribution 4.0 International (CC BY 4.0) 01.05.2018

anghenfil.de
Beispielprogramm:

public class GroupLayoutExample {

private JFrame frame;

/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
GroupLayoutExample window = new GroupLayoutExample();
window.frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}

/**
* Create the application.
*/
public GroupLayoutExample() {
initialize();
}

/**
* Initialize the contents of the frame.
*/
private void initialize() {
frame = new JFrame();
frame.setBounds(100, 100, 450, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JProgressBar jpb = new JProgressBar();

jpb.setValue(50);
JButton jb1 = new JButton("-");
JButton jb2 = new JButton("+");
JTextPane jtp = new JTextPane();
jtp.setEditable(false);
jtp.setText("Start of log.\n");
JScrollPane jsp = new JScrollPane(jtp);

StyledDocument doc = jtp.getStyledDocument();

jb1.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent arg0) {
jpb.setValue(jpb.getValue()-10);

try {
doc.insertString(doc.getLength(), "withdrawed 10.\n", null);
} catch (BadLocationException e) {
e.printStackTrace();
}
}
});

jb2.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent arg0) {
jpb.setValue(jpb.getValue()+10);
try {
doc.insertString(doc.getLength(), "added 10.\n", null);

Keanu Dölle Attribution 4.0 International (CC BY 4.0) 01.05.2018

anghenfil.de
 } catch (BadLocationException e) {
e.printStackTrace();
}
}
});

GroupLayout groupLayout = new GroupLayout(frame.getContentPane());

groupLayout.setAutoCreateGaps(true);
groupLayout.setAutoCreateContainerGaps(true);

groupLayout.setHorizontalGroup(groupLayout.createSequentialGroup()
.addGroup(groupLayout.createParallelGroup(GroupLayout.Alignment.CENTER
)
.addComponent(jpb)
.addGroup(groupLayout.createSequentialGroup()
.addComponent(jb1)
.addComponent(jb2)
)
.addComponent(jsp)
)
);
groupLayout.setVerticalGroup(groupLayout.createSequentialGroup()
.addGroup(groupLayout.createParallelGroup()
.addComponent(jpb)
)
.addGroup(groupLayout.createParallelGroup()
.addComponent(jb1)
.addComponent(jb2)
)
.addComponent(jsp)
);
frame.getContentPane().setLayout(groupLayout);
}

Quellcode verfügbar unter https://download.anghenfil.de/Informatik/GUI/GroupLayout

Keanu Dölle Attribution 4.0 International (CC BY 4.0) 01.05.2018

anghenfil.de
 [Swing] CardLayout

Das CardLayout besitzt im Gegensatz zu anderen Layouts die Besonderheit, dass es –

wie ein Kartenstapel – nur die oberste „Karte“ anzeigt. Es ist besonders praktisch, wenn
nur jeweils ein Panel angezeigt werden soll, beispielsweise bei einem Einstellungsdialog,
bei dem man mittels Dropdown Menü eine Einstellung auswählen kann.

Zuallererst müssen wir zuerst ein Objekt der Klasse CardLayout, dann ein JPanel
instanziieren:

CardLayout kartenstapel = new CardLayout();

JPanel kartenstapelBody = new JPanel(kartenstapel); //Neues JPanel Objekt mit
CardLayout erzeugen

Anschließend fügen wir das JPanel mit CardLayout unserem Hauptframe hinzu.

frame.getContentPane().add(kartenstapelBody);

Nun ist es an der Zeit, die einzelnen „Karten“ zu unserem CardLayout hinzuzufügen.
Hierfür müssen entsprechende JPanels erstellt und mittels JPanel.add(JPanel panel)
hinzufügen.

In der Praxis sieht das ganze so aus:

JPanel karte1 = new JPanel();

kartenstapelBody.add(karte1, "karte1");

Das JPanel (hier kartenstapelBody) hält die einzelnen Karten, das CardLayout (hier
kartenstapel) kümmert sich um die Anzeige der entsprechenden Karten.

Mit entsprechenden Steuerelementen – beispielsweise Buttons – lässt sich das

CardLayout nun steuern. Mit den Methoden frst, next, previous, last und show kann
eine entsprechende Karte angezeigt werden. Bei jeder dieser Methoden muss das
„Elternelement“ (kartenstapelBody) angegeben werden, die Methode show, welche eine
bestimmte Karte zeigt, verlangt noch die Angabe der entsprechenden Karte.

kartenstapel.previous(kartenstapelBody);

oder

kartenstapel.show(kartenstapelBody, "karte1");

Keanu Dölle Attribution 4.0 International (CC BY 4.0) 29.04.2018

anghenfl.de
public class Example {

private JFrame frame;

public static void main(String[] args) {

EventQueue.invokeLater(new Runnable() {
public void run() {
try {
Example window = new Example();
window.frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}

public Example() {
initialize();
}

private void initialize() {

frame = new JFrame();
frame.setBounds(100, 100, 450, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().setLayout(new BoxLayout(frame.getContentPane(),
BoxLayout.Y_AXIS));

CardLayout kartenstapel = new CardLayout();

JPanel kartenstapelBody = new JPanel(kartenstapel); //Neues JPanel
Objekt mit CardLayout erzeugen
frame.getContentPane().add(kartenstapelBody);

JPanel karte1 = new JPanel();

kartenstapelBody.add(karte1, "karte1"); //Erste Karte zum CardLayout
hinzufügen
karte1.setBackground(Color.GREEN);

JPanel karte2 = new JPanel();

kartenstapelBody.add(karte2, "karte2"); //Zweite karte zum CardLayout
hinzufügen
karte2.setBackground(Color.RED);

JPanel karte3 = new JPanel();

kartenstapelBody.add(karte3, "karte3"); //Dritte karte zum CardLayout
hinzufügen
karte3.setBackground(Color.MAGENTA);

JPanel navigation = new JPanel(); //Navigationsleiste erstellen

frame.getContentPane().add(navigation);

Keanu Dölle Attribution 4.0 International (CC BY 4.0) 29.04.2018

anghenfl.de
 JButton back = new JButton("Zurück"); //Button zur Navigationsleiste
hinzufügen
navigation.add(back);

JButton forward = new JButton("Vor"); //Button zur Navigationsleiste

hinzufügen
navigation.add(forward);

back.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent arg0) {
kartenstapel.previous(kartenstapelBody);
kartenstapel.show(kartenstapelBody, "karte1");
}
});
forward.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent arg0) {
kartenstapel.next(kartenstapelBody);
}
});
}

Quellcode verfügbar unter https://download.anghenfil.de/Informatik/GUI/CardLayout

Keanu Dölle Attribution 4.0 International (CC BY 4.0) 29.04.2018

anghenfl.de