Layout wechseln über RadioButtons

[melaniemueller]

Hey zusammen,

ich habe folgenden Aufgabenstellung:

Erstellen Sie eine Anwendung, bei der zur Laufzeit zwischen den Layouts für ein innen liegendes Panel gewechselt werden kann. In diesem Panel sollen sich mindestens drei Labels oder ähnliche Komponenten befinden.

Bieten Sie dem Anwender dabei mindestens drei verschiedene Layouts über eine Gruppe mit Optionsfeldern an. Welche Layouts Sie genau verwenden, ist Ihnen freigestellt. Sie können zum Beispiel auch GridLayouts mit unterschiedlicher Spaltenzahl benutzen.

Sobald der Anwender ein anderes Layout auswählt, sollen die Änderungen sofort sichtbar werden. Bitte beachten Sie dabei, dass sich ausschließlich das Layout für das innen liegende Panel ändern soll. Das Layout der Anwendung an sich soll unverändert bleiben.

Nun dachte ich eigentlich ich hätte die Lösung und wäre fertig, jedoch beim Testen hab ich schnell gemerkt das funktioniert nicht so wie ich das möchte.
Das Fenster sieht so aus wie ich es mir vorgestellt habe, jedoch wenn ich auf einen Button zum Wechseln des Layouts klicke, verändert es sich zwar, aber auch nicht so wie ich es eingestellt habe, und klicke ich anschließend wieder auf einen anderen Button passiert nichts mehr.

Wo steckt der Fehler??

So sieht das Fenster aktuell aus:


Hier mein Code:

package einsendeaufgabe10;

import java.awt.FlowLayout;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.ItemEvent;
import java.awt.event.ItemListener;

import javax.swing.ButtonGroup;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JRadioButton;
import javax.swing.border.TitledBorder;

public class LayoutWechsler extends JFrame {
    
    private JButton schaltflaecheBeenden;
    private JRadioButton layout1, layout2, layout3;
    private JLabel ausgabe1, ausgabe2, ausgabe3;
    private ButtonGroup gruppe;
    private JPanel panelLayouts, panelButtonBeenden, panelVeränderbar;
    
    
    class MeinListener implements ActionListener, ItemListener {

        @Override
        public void actionPerformed(ActionEvent e) {
            if (e.getActionCommand().equals("Beenden"))
                System.exit(0);
                
        }

        @Override
        public void itemStateChanged(ItemEvent e) {
        
        if (layout1.isSelected() == true)
            panelVeränderbar.setVisible(false);
            panelVeränderbar.setLayout(new FlowLayout());
            panelVeränderbar.setVisible(true);
        if (layout2.isSelected() == true)
            panelVeränderbar.setVisible(false);
            panelVeränderbar.setLayout(new GridLayout(3,0));
            panelVeränderbar.setVisible(true);
        if (layout3.isSelected() == true)
            panelVeränderbar.setVisible(false);
            panelVeränderbar.setLayout(new GridLayout(0,3));
            panelVeränderbar.setVisible(true);   
        
            
        }
    }
    
    public LayoutWechsler(String titel) {
        super(titel);
        
        
        // eine Gruppe für die RadioButtons erstellen
        gruppe = new ButtonGroup();
        // Die Buttons für die verschiedenen Layouts erzeugen
        layout1 = new JRadioButton("1");
        layout2 = new JRadioButton("2");
        layout3 = new JRadioButton("3");
        // das erste Layout als Starteinstellung
        layout1.setSelected(true);
        // die Buttons zur Gruppe hinzufügen
        gruppe.add(layout1);
        gruppe.add(layout2);
        gruppe.add(layout3);
        // ein neues Panel erstellen und die RadioButtons hinzufügen
        panelLayouts = new JPanel();
        panelLayouts.add(layout1);
        panelLayouts.add(layout2);
        panelLayouts.add(layout3);
        // einen Rahmen mit Titel für das Panel erstellen
        panelLayouts.setBorder(new TitledBorder("Wähle ein Layout:"));

        // die Schaltfläche Beenden erstellen und einem Panel hinzufügen
        schaltflaecheBeenden = new JButton ("Beenden");
        panelButtonBeenden = new JPanel();
        panelButtonBeenden.add(schaltflaecheBeenden);
        
        // Labels erstellen
        ausgabe1 = new JLabel("Spielerei");
        ausgabe2 = new JLabel("mit verschiedenen");
        ausgabe3 = new JLabel("Layouts");
        // Panel für die Labels erstellen
        panelVeränderbar = new JPanel();
        // die Labels dem Panel hinzufügen
        panelVeränderbar.add(ausgabe1);
        panelVeränderbar.add(ausgabe2);
        panelVeränderbar.add(ausgabe3);
        panelVeränderbar.setBorder(new TitledBorder("Layout-Veränderung"));
        
        // ein Layout für den äußeren Container erstellen
        setLayout(new GridLayout(0,2,20,20));
        add(panelLayouts);
        add(panelVeränderbar);
        add(panelButtonBeenden);
        setResizable(false);
        
        // Listener erstellen und verbinden
        MeinListener listener = new MeinListener();
        schaltflaecheBeenden.addActionListener(listener);
        layout1.addItemListener(listener);
        layout2.addItemListener(listener);
        layout3.addItemListener(listener);
        
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                
        //das Fenster packen und anzeigen
        pack();
        setVisible(true);

    }

}

 

[Robert Zenz]

Es gibt in Java die Moeglichkeit auf geschwungene Klammern zu verzichten und stattdessen (implizit) einfach nur die naechste Zeile als Block zu haben. Also zum Beispiel:

for (int counter = 0; counter < count; counter++) {
    // 1: Executed in the loop
    // 2: Executed in the loop
    // 3: Executed in the loop
}

for (int counter = 0; counter < count; counter++)
    // 1: Executed in the loop
    // 2: Executed outside the loop
    // 3: Executed outside the loop

Du machst genau das in deiner if-Kaskade, zu vergisst geschwungene Klammern zu verwenden um alle drei Zeilen beim if auszufuehren. Korrekt eingerueckt sieht dein Code so aus:

        if (layout1.isSelected() == true)
            panelVeränderbar.setVisible(false);

        panelVeränderbar.setLayout(new FlowLayout());
        panelVeränderbar.setVisible(true);

        if (layout2.isSelected() == true)
            panelVeränderbar.setVisible(false);

        panelVeränderbar.setLayout(new GridLayout(3,0));
        panelVeränderbar.setVisible(true);
       
        if (layout3.isSelected() == true)
            panelVeränderbar.setVisible(false);
       
        panelVeränderbar.setLayout(new GridLayout(0,3));
        panelVeränderbar.setVisible(true);

Daher gibt es fast immer die Regel "keine impliziten Bloecke, immer geschwungene Klammern verwenden, auch wenn es nur eine Zeile gibt im Block" um genau solche Fehler zu vermeiden.

---

Ein paar andere Kommentare zu deinem Code:

1. Definieren von mehreren Variablen auf einer Zeile sollte vermieden werden, da es schwieriger wird zu sehen welche Variablen wo/wie deklariert wurden.
2. Verwende bessere Namen. Im Moment heiszt bei dir alles "1", "2" und "3". Besser waere wenn du durchgaengig "flowLayout", "vertikalesGridLayout" und "horizontalesGridLayout" verwendest, dann musst du nicht mehr mental staendig umdenken was was ist. Auch wuerde dadurch die Oberflaeche klarer werden. Zum Beispiel wird aus "layout2" dann "vertikalesGridLayoutRadioButton". Natuerlich, ist laenger, macht den Code aber um einiges einfacher zu lesen und zu warten.
3. Du definierst derzeit alles als Klassenvariablen, das ist nicht unbedingt gut. Versuche Variablen immer im Scope zu begrenzen so gut es geht, also zum Beispiel die ButtonGroup muss keine Klassenvariable sein, es reicht diese im Konstruktor zu deklarieren (weil du greifst ja nie wieder darauf zu).
4. Du setzt "setDefaultCloseOperation" aber rufst explizit "System.exit(0)" auf. Besser waere es wenn du beim "Beenden" Button einfach nur den Form schlieszt. "System.exit" aufzurufen ist immer mit einer gewissen Vorsicht zu genieszen, in deinen Faellen jetzt nicht relevant, aber man muss beachten dass "System.exit" ein "hartes" beenden der JVM/Prozess ist. Das ist in etwa so als wuerdest du den Stecker ziehen, da gibt es einfach keine Garantien mehr ob noch finalizer oder final-Bloecke aufgerufen werden oder nicht.
5. Verwende einen Code-Formatter, deine IDE sollte einen haben. Damit wird dein Code automatisch formatiert und sieht immer gleich aus. Auch waere dir damit dein Fehler aufgefallen, weil die Zeilen dann einfach korrekt eingerueckt gewesen waeren.

 

[melaniemueller]

Daher gibt es fast immer die Regel "keine impliziten Bloecke, immer geschwungene Klammern verwenden, auch wenn es nur eine Zeile gibt im Block" um genau solche Fehler zu vermeiden.

Es sind wirklich immer diese Kleinigkeiten die beim Programmieren Großes bewirken können. Ich hab es geändert und nun funktioniert alles!

1. Definieren von mehreren Variablen auf einer Zeile sollte vermieden werden, da es schwieriger wird zu sehen welche Variablen wo/wie deklariert wurden.
2. Verwende bessere Namen. Im Moment heiszt bei dir alles "1", "2" und "3". Besser waere wenn du durchgaengig "flowLayout", "vertikalesGridLayout" und "horizontalesGridLayout" verwendest, dann musst du nicht mehr mental staendig umdenken was was ist. Auch wuerde dadurch die Oberflaeche klarer werden. Zum Beispiel wird aus "layout2" dann "vertikalesGridLayoutRadioButton". Natuerlich, ist laenger, macht den Code aber um einiges einfacher zu lesen und zu warten.
3. Du definierst derzeit alles als Klassenvariablen, das ist nicht unbedingt gut. Versuche Variablen immer im Scope zu begrenzen so gut es geht, also zum Beispiel die ButtonGroup muss keine Klassenvariable sein, es reicht diese im Konstruktor zu deklarieren (weil du greifst ja nie wieder darauf zu).

Das habe ich auch direkt umgesetzt.

Du setzt "setDefaultCloseOperation" aber rufst explizit "System.exit(0)" auf. Besser waere es wenn du beim "Beenden" Button einfach nur den Form schlieszt. "System.exit" aufzurufen ist immer mit einer gewissen Vorsicht zu genieszen, in deinen Faellen jetzt nicht relevant, aber man muss beachten dass "System.exit" ein "hartes" beenden der JVM/Prozess ist. Das ist in etwa so als wuerdest du den Stecker ziehen, da gibt es einfach keine Garantien mehr ob noch finalizer oder final-Bloecke aufgerufen werden oder nicht.

Der Part wurde im Kurs so erklärt, dass man es zur Sicherheit setzen sollte. Daher verwende ich immer beides. Aber gut zu wissen, was System.exit exakt bedeutet.

Verwende einen Code-Formatter, deine IDE sollte einen haben. Damit wird dein Code automatisch formatiert und sieht immer gleich aus. Auch waere dir damit dein Fehler aufgefallen, weil die Zeilen dann einfach korrekt eingerueckt gewesen waeren.

Da muss ich mal schauen, wie das bei Eclipse funktioniert.

Ich danke dir für deine ausführliche Antwort - hat mir sehr geholfen!

 

[Robert Zenz]

Da muss ich mal schauen, wie das bei Eclipse funktioniert.

Rechtsklick "Source -> Format", sollte "Ctrl+Shift+F" sein.

Du kannst auch in den Projekt-Eigenschaften unter "Java Editor -> Save Actions" direkt hinterlegen dass der Code bei jedem speichern formattiert werden soll. Super praktisch weil die Formattierung dann einfach immer richtig ist (vielleicht etwas gewoehnungsbeduerftig weil beim speichern Dinge "springen" koennen).

 

[mihe7]

An so Beispielen kann man immer schön zeigen, wie man Dinge aufteilen kann und noch schöner ist, dass man das nicht als Lösung abgeben kann - weil das auffällt

Fangen wir mal damit an, dass Du verschiedenen Layouts einen Titel geben willst. Das kann man mit einer Datenklasse modellieren:

import java.awt.LayoutManager;

public class LayoutDescriptor {
    public final String name;
    public final LayoutManager layout;

    public LayoutDescriptor(final String name, final LayoutManager layout) {
        this.name = name;
        this.layout = layout;
    }
}

Hier habe ich einfach auf Kapselung verzichtet -> war faul (und ab Java 14 bzw. 16 gibts dann record dafür).

Deine Klasse heißt "LayoutWechsler". Wenn man ein wenig überlegt, dann ist das Wechseln des Layouts eine Aktion und auch das lässt sich entsprechend modellieren. Dabei kann man gleich den LayoutDescriptor verwenden:

import java.awt.Container;
import java.awt.LayoutManager;
import java.awt.event.ActionEvent;
import javax.swing.AbstractAction;

public class ChangeLayoutAction extends AbstractAction {
    private final Container parent;
    private final LayoutManager layout;

    public ChangeLayoutAction(final LayoutDescriptor descriptor, final Container parent) {
        super(descriptor.name);
        this.parent = parent;
        this.layout = descriptor.layout;
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        parent.setLayout(layout); // setzt neues Layout, markiert den Container als invalid
        parent.validate(); // validiert den Container, was für die Neuberechnung des Layouts sorgt
        parent.repaint(); // zeichnet den Container neu
    }
}

Jetzt kommen wir zum UI:

import java.awt.*;
import javax.swing.*;
import java.util.List;
import java.util.ArrayList;

public class Test {
    
    private void createAndShowGUI() {
        LayoutDescriptor[] descriptors = {
            new LayoutDescriptor("Flow Layout", new FlowLayout()),
            new LayoutDescriptor("horizontales Grid", new GridLayout(0, 3)),
            new LayoutDescriptor("vertikales Grid", new GridLayout(3, 0))
        };

        JPanel content = createContent(descriptors[0]);
        List<Action> actions = createChangeLayoutActions(descriptors, content);
        List<JRadioButton> selectionButtons = createRadioButtons(actions);
        JPanel selection = createSelection(selectionButtons);

        JFrame frame = new JFrame(getClass().getName());
        frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        frame.add(selection, BorderLayout.NORTH);
        frame.add(content);
        frame.setSize(600, 400);
        frame.setVisible(true);
    }

    private List<Action> createChangeLayoutActions(LayoutDescriptor[] descriptors, JPanel container) {
        List<Action> actions = new ArrayList<>(descriptors.length);
        for (LayoutDescriptor descriptor : descriptors) {
            actions.add(new ChangeLayoutAction(descriptor, container));
        }
        return actions;
    }

    private List<JRadioButton> createRadioButtons(List<Action> actions) {
        List<JRadioButton> buttons = new ArrayList<>(actions.size());
        for (Action action : actions) {
            buttons.add(new JRadioButton(action));
        }
        return buttons;
    }

    private JPanel createSelection(List<JRadioButton> buttons) {
        ButtonGroup group = new ButtonGroup();        
        JPanel panel = new JPanel();
        for (JRadioButton button : buttons) {
            group.add(button);
            panel.add(button);
        }
        if (!buttons.isEmpty()) {
            buttons.get(0).setSelected(true);
        }
        panel.setBorder(BorderFactory.createTitledBorder("Layout-Auswahl"));
        return panel;
    }


    private JPanel createContent(LayoutDescriptor descriptor) {
        JPanel panel = new JPanel(descriptor.layout);
        for (int i = 0; i < 5; i++) {
            JLabel label = new JLabel("Label #" + (i+1));
            panel.add(label);
        }
        panel.setBorder(BorderFactory.createTitledBorder("Inhalt"));
        return panel;
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new Test().createAndShowGUI());
    }
}

Das UI fügt eigentlich nur noch die Teile zusammen. In Zeile 9 definiere ich einfach ein Array von LayoutDescriptor-Objekten. Man könnte hier auch eine List verwenden, diese als Instanzvariable deklarieren usw. Für den Zweck hier reicht das aber und das Array hat den Vorteil, dass es sich auch unter Java 8 schön initialisieren lässt (man hätte auch Arrays.asList verwenden können, aber das schönere List.of gibts erst ab Java 9).

In Zeile 15 wird das erste Layout verwendet, um ein Panel mit Beispielinhalten erzeugen zu lassen. Die Methode createContent ist ziemlich unspektakulär.

Analog wird in Zeile 18 einfach ein Panel mit den RadioButtons in der ButtonGroup erzeugt. Auch nichts aufregendes. Das Erzeugen der Aktionen und der Buttons habe ich einfach mal in zwei separate, kleine Methoden ausgelagert. So ist sofort klar, was dort jeweils passiert.

Ab Zeile 20 wird nur noch das Fenster erzeugt und angezeigt. Das wars auch schon. Das UI ist relativ dumm - die eigentliche Magie steckt in der Action.