CardLayout - Versionsgeschichte

L-ectron-X am 14. November 2021 um 17:15 Uhr

2021-11-14T17:15:08Z

← Nächstältere Version		Version vom 14. November 2021, 17:15 Uhr
Zeile 1:		Zeile 1:
			'''Autor: Gernot Segieth'''

	=Das CardLayout - Tutorial=		=Das CardLayout - Tutorial=
	...wird anhand eines einfachen Beispiels zeigen, wie einfach es ist, mit einem CardLayout GUI-Komponenten für schnelle Bildwechsel vorzubereiten.		...wird anhand eines einfachen Beispiels zeigen, wie einfach es ist, mit einem CardLayout GUI-Komponenten für schnelle Bildwechsel vorzubereiten.

L-ectron-X: /* Layout-Stategie */

2021-03-13T16:43:33Z

Layout-Stategie

← Nächstältere Version		Version vom 13. März 2021, 16:43 Uhr
Zeile 5:		Zeile 5:
	Ein Standardeinsatzzweck ist z.B. der eines Wizards, bei dem schrittweise einzelne verschiedene {{JAPI\|Panel}}s nach einer Benutzeraktion "nach vorne" geholt werden können.		Ein Standardeinsatzzweck ist z.B. der eines Wizards, bei dem schrittweise einzelne verschiedene {{JAPI\|Panel}}s nach einer Benutzeraktion "nach vorne" geholt werden können.

	==Layout-~~Stategie~~==		==Layout-Strategie==
	Das CardLayout sorgt dafür, dass alle hintereinander liegenden Container in der gleichen Größe angezeigt werden, um ein Springen durch Redimensionierung der [[GUI]] zu verhindern.		Das CardLayout sorgt dafür, dass alle hintereinander liegenden Container in der gleichen Größe angezeigt werden, um ein Springen durch Redimensionierung der [[GUI]] zu verhindern.

L-ectron-X: /* Das CardLayout - Tutorial */

2018-07-28T13:22:43Z

Das CardLayout - Tutorial

← Nächstältere Version		Version vom 28. Juli 2018, 13:22 Uhr
Zeile 3:		Zeile 3:

	Das {{JAPI\|CardLayout}} "stapelt", ähnlich einem Spielkartenstapel, Components hintereinander, wobei aber immer nur eine {{JAPI\|Component}} sichtbar ist. Dadurch lassen sich schnelle Wechsel zu anderen Teilen einer Benutzeroberfläche durchführen, oder Teile von Benutzeroberflächen blitzschnell austauschen.<br>		Das {{JAPI\|CardLayout}} "stapelt", ähnlich einem Spielkartenstapel, Components hintereinander, wobei aber immer nur eine {{JAPI\|Component}} sichtbar ist. Dadurch lassen sich schnelle Wechsel zu anderen Teilen einer Benutzeroberfläche durchführen, oder Teile von Benutzeroberflächen blitzschnell austauschen.<br>
	Ein Standardeinsatzzweck ist z.B. der eines Wizards, bei dem schrittweise einzelne verschiedene {{JAPI\|~~Panels~~}} nach einer Benutzeraktion "nach vorne" geholt werden können.		Ein Standardeinsatzzweck ist z.B. der eines Wizards, bei dem schrittweise einzelne verschiedene {{JAPI\|Panel}}s nach einer Benutzeraktion "nach vorne" geholt werden können.

	==Layout-Stategie==		==Layout-Stategie==
	Das CardLayout sorgt dafür, dass alle hintereinander liegenden Container in der gleichen Größe angezeigt werden, um ein Springen durch Redimensionierung der [[GUI]] zu verhindern.~~<br>~~		Das CardLayout sorgt dafür, dass alle hintereinander liegenden Container in der gleichen Größe angezeigt werden, um ein Springen durch Redimensionierung der [[GUI]] zu verhindern.

	Werden also mehrere Container (bspw. {{JAPI\|JPanel}}s) mit unterschiedlichen Dimensionen im CardLayout angelegt, so erhalten alle Container die Größe des größten Containers.		Werden also mehrere Container (bspw. {{JAPI\|JPanel}}s) mit unterschiedlichen Dimensionen im CardLayout angelegt, so erhalten alle Container die Größe des größten Containers.

	'''Die erste dem CardLayout hinzugefügte Komponente, ist die Komponente, die nach beim ersten Aufruf des CardLayouts angezeigt wird.'''~~<br>~~		'''Die erste dem CardLayout hinzugefügte Komponente, ist die Komponente, die nach beim ersten Aufruf des CardLayouts angezeigt wird.'''

	Alle als "Cards" organisierten {{JAPI\|Container}} sind außerdem in der Reihenfolge im CardLayout gespeichert, in der sie ihm hinzugefügt wurden.		Alle als "Cards" organisierten {{JAPI\|Container}} sind außerdem in der Reihenfolge im CardLayout gespeichert, in der sie ihm hinzugefügt wurden.

L-ectron-X: /* Schritt für Schritt */

2018-05-25T15:37:47Z

Schritt für Schritt

← Nächstältere Version		Version vom 25. Mai 2018, 15:37 Uhr
Zeile 86:		Zeile 86:
	Als zweites Argument erwartet die add()-Methode aus {{JAPI\|Container}} ein Constraints-Objekt, das die hinzuzufügende Komponente unterscheidbar macht. Das kann ein beliebiger Objekttyp sein. Wir haben uns hier für einen String-Typ entschieden, der die hinzuzufügende Komponente etwas näher "beschreibt".		Als zweites Argument erwartet die add()-Methode aus {{JAPI\|Container}} ein Constraints-Objekt, das die hinzuzufügende Komponente unterscheidbar macht. Das kann ein beliebiger Objekttyp sein. Wir haben uns hier für einen String-Typ entschieden, der die hinzuzufügende Komponente etwas näher "beschreibt".

	Gut. Zum "Durchblättern" unseres Kartenstapels können wir uns ~~zwei~~ [[JButton]] erzeugen, die wir auf ein weiteres JPanel setzen.		Gut. Zum "Durchblättern" unseres Kartenstapels können wir uns nun Objekte von [[JButton]] erzeugen, die wir auf ein weiteres JPanel setzen, das alle benötigten JButton zur Steuerung des CardLayouts enthalten soll.
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
	JPanel buttonPanel = new JPanel();		JPanel buttonPanel = new JPanel();
			</syntaxhighlight>
			Dieses Button-Panel setzen wir später zusammen mit dem bereits erzeugten <code>cardPanel</code> in einen JFrame. Dazu gleich mehr...

			Zunächst erzeugen wir noch die JButton zum Durchblättern unseres CardLayouts.
			<syntaxhighlight lang="java">
	JButton forwardButton = new JButton("Weiter");		JButton forwardButton = new JButton("Weiter");
	forwardButton.addActionListener(new ActionListener() {		forwardButton.addActionListener(new ActionListener() {

L-ectron-X: /* Schritt für Schritt */

2018-05-25T15:26:47Z

Schritt für Schritt

← Nächstältere Version		Version vom 25. Mai 2018, 15:26 Uhr
Zeile 34:		Zeile 34:

	class ColorPanel extends JPanel {		class ColorPanel extends JPanel {
			private static int count = 1; //ein Zähler für die erzeugten Instanzen dieser Klasse

	public ColorPanel(Color color) {		public ColorPanel(Color color) {
			super(new BorderLayout());
	setBackground(color);		setBackground(color);
	JLabel ~~label~~ = new JLabel(color.toString());		JLabel countLabel = new JLabel(String.valueOf(count++));
	~~label~~.setHorizontalAlignment(JLabel.CENTER);		countLabel.setFont(countLabel.getFont().deriveFont(64f));
	add(~~label~~);		countLabel.setForeground(getComplementaryColor(color));
			countLabel.setHorizontalAlignment(JLabel.CENTER);

			JLabel colorLabel = new JLabel(color.toString());
			colorLabel.setForeground(getComplementaryColor(color));
			colorLabel.setHorizontalAlignment(JLabel.CENTER);
			add(colorLabel, BorderLayout.NORTH);
			add(countLabel, BorderLayout.CENTER);
	}		}

	@Override		@Override
	public Dimension getPreferredSize() {		public Dimension getPreferredSize() {
	return new Dimension(400, ~~300~~);		return new Dimension(400, 250);
			}

			//ermittelt die Komplementärfarbe
			private Color getComplementaryColor(Color color) {
			int r = 255 - color.getRed();
			int g = 255 - color.getGreen();
			int b = 255 - color.getBlue();
			return new Color(r, g, b);
	}		}
	}</syntaxhighlight>		}
			</syntaxhighlight>
			Die Klasse <code>ColorPanel</code> erzeugt zwei {{JAPI\|JLabel}} und ordnet sie in einem [[BorderLayout]] an. Das <code>countLabel</code> zählt die von <code>ColorPanel</code> erzeugten Instanzen.

			Das <code>colorLabel</code> zeigt den Wert des ihm übergebenen Color-Objektes an.

			Außerdem implementiert die Klasse eine <code>getComplementaryColor(Color color)</code>-Methode, die die Komplementärfarbe des übergebenen Color-Objektes ermittelt. So ist sichergestellt, dass die Texte auf der Hintergrundfarbe jederzeit lesbar sind.

	Von dieser Klasse können wir uns später einige Objekte (Karten) erstellen und unserem Behälter (Kartenstapel) hinzufügen. Die Farb-Panels möchten wir dann "durchblättern".		Von dieser Klasse können wir uns später einige Objekte (Karten) erstellen und unserem Behälter (Kartenstapel) hinzufügen. Die Farb-Panels möchten wir dann "durchblättern".
Zeile 55:		Zeile 79:
	cardPanel.add(new ColorPanel(Color.BLUE), "BLAU");		cardPanel.add(new ColorPanel(Color.BLUE), "BLAU");
	cardPanel.add(new ColorPanel(Color.YELLOW), "GELB");		cardPanel.add(new ColorPanel(Color.YELLOW), "GELB");
	~~cardPanel.add(new ColorPanel(Color.BLACK), "SCHWARZ");~~
	~~cardPanel.add(new ColorPanel(Color.GREEN), "GRÜN");~~
	</syntaxhighlight>		</syntaxhighlight>
			'''usw.'''

	Die add()-Methode unseres Kartenstapels ({{JAPI\|JPanel}}) erwartet als erstes Argument die {{JAPI\|Component}}, die dem Kartenstapel hinzugefügt werden soll. Hier erzeugen wir entsprechend eine neue Instanz unseres <code>ColorPanel</code>, dem wir die gewünschte Farbe als Argument mit geben.		Die add()-Methode unseres Kartenstapels ({{JAPI\|JPanel}}) erwartet als erstes Argument die {{JAPI\|Component}}, die dem Kartenstapel hinzugefügt werden soll. Hier erzeugen wir entsprechend eine neue Instanz unseres <code>ColorPanel</code>, dem wir die gewünschte Farbe als Argument mit geben.
Zeile 63:		Zeile 86:
	Als zweites Argument erwartet die add()-Methode aus {{JAPI\|Container}} ein Constraints-Objekt, das die hinzuzufügende Komponente unterscheidbar macht. Das kann ein beliebiger Objekttyp sein. Wir haben uns hier für einen String-Typ entschieden, der die hinzuzufügende Komponente etwas näher "beschreibt".		Als zweites Argument erwartet die add()-Methode aus {{JAPI\|Container}} ein Constraints-Objekt, das die hinzuzufügende Komponente unterscheidbar macht. Das kann ein beliebiger Objekttyp sein. Wir haben uns hier für einen String-Typ entschieden, der die hinzuzufügende Komponente etwas näher "beschreibt".

	Gut. Zum "Durchblättern" unseres Kartenstapels können wir uns zwei ~~{{JAPI\|JButtons}}~~ erzeugen, die wir auf ein weiteres JPanel setzen.		Gut. Zum "Durchblättern" unseres Kartenstapels können wir uns zwei [[JButton]] erzeugen, die wir auf ein weiteres JPanel setzen.
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
	JPanel buttonPanel = new JPanel();		JPanel buttonPanel = new JPanel();
Zeile 82:		Zeile 105:
	</syntaxhighlight>		</syntaxhighlight>

	Wenn wir bspw. das gelbe JPanel jederzeit anzeigen können wollen, fügen wir noch einen weiteren ~~{{JAPI\|~~JButton}} ein:		Außerdem möchten wir mit einem Klick die erste (oben) und die letzte (unten) Karte unseres Kartenstapels anzeigen. Dafür sehen wir zwei weitere [[JButton]] vor:
			<syntaxhighlight lang="java">
			JPanel buttonPanel = new JPanel();

			JButton firstButton = new JButton("Anfang");
			firstButton.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e) {
			//hier kommt noch die Ereignisbehandlung hinein
			}
			});

			JButton lastButton = new JButton("Ende");
			lastButton.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e) {
			//hier kommt noch die Ereignisbehandlung hinein
			}
			});
			</syntaxhighlight>

			Wenn wir bspw. das gelbe JPanel jederzeit anzeigen können wollen, fügen wir noch einen weiteren [[JButton]] ein:
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
	JButton yellowButton = new JButton("Gelb!");		JButton yellowButton = new JButton("Gelb!");
Zeile 91:		Zeile 133:
	});		});
	</syntaxhighlight>		</syntaxhighlight>
	Zum Aufrufen eines ganz bestimmten JPanels, wird wie oben bereits angeschnitten, ein {{JAPI\|String}} als "Schlüsselwert" benutzt. Damit kann zu jeder Zeit ein ganz bestimmter Container angezeigt werden.~~<br>~~		Zum Aufrufen eines ganz bestimmten JPanels, wird wie oben bereits angeschnitten, ein {{JAPI\|String}} als "Schlüsselwert" benutzt. Damit kann zu jeder Zeit ein ganz bestimmter Container angezeigt werden.

	Wir kommen gleich noch dazu, wie der Code dazu aussieht.		Wir kommen gleich noch dazu, wie der Code dazu aussieht.

	Die JButtons werden nun noch dem ButtonPanel hinzugefügt:		Die JButtons werden nun noch dem ButtonPanel hinzugefügt:
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
			buttonPanel.add(firstButton);
			buttonPanel.add(rearwardButton);
	buttonPanel.add(forwardButton);		buttonPanel.add(forwardButton);
	buttonPanel.add(~~rearwardButton~~);		buttonPanel.add(lastButton);
	buttonPanel.add(yellowButton);		buttonPanel.add(yellowButton);
	</syntaxhighlight>		</syntaxhighlight>

L-ectron-X: /* Die fertige Beispiel-Applikation */

2018-05-25T14:55:54Z

Die fertige Beispiel-Applikation

← Nächstältere Version		Version vom 25. Mai 2018, 14:55 Uhr
Zeile 123:		Zeile 123:
	cl = new CardLayout();		cl = new CardLayout();
	JPanel cardPanel = new JPanel(cl);		JPanel cardPanel = new JPanel(cl);

	//2. Karten erzeugen und dem Kartenstapel hinzufügen		//2. Karten erzeugen und dem Kartenstapel hinzufügen
	cardPanel.add(new ColorPanel(Color.WHITE), "WEISS");		cardPanel.add(new ColorPanel(Color.WHITE), "WEISS");
Zeile 130:		Zeile 130:
	cardPanel.add(new ColorPanel(Color.YELLOW), "GELB");		cardPanel.add(new ColorPanel(Color.YELLOW), "GELB");
	cardPanel.add(new ColorPanel(Color.BLACK), "SCHWARZ");		cardPanel.add(new ColorPanel(Color.BLACK), "SCHWARZ");
	cardPanel.add(new ColorPanel(Color.GREEN), "GRÜN");		cardPanel.add(new ColorPanel(Color.PINK), "PINK");
			cardPanel.add(new ColorPanel(Color.GREEN), "GRÜN");
			cardPanel.add(new ColorPanel(Color.ORANGE), "ORANGE");
			cardPanel.add(new ColorPanel(Color.CYAN), "CYAN");
			cardPanel.add(new ColorPanel(Color.LIGHT_GRAY), "LIGHT_GRAY");
			cardPanel.add(new ColorPanel(Color.MAGENTA), "MAGENTA");

	//3. Das ButtonPanel für Benutzeraktionen		//3. Das ButtonPanel für Benutzeraktionen
	JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.CENTER));		JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.CENTER));

	//4. Buttons erzeugen		//4. Buttons erzeugen
			JButton firstButton = new JButton("Anfang");
			firstButton.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e) {
			cl.first(cardPanel);
			}
			});

	JButton forwardButton = new JButton("Weiter");		JButton forwardButton = new JButton("Weiter");
	forwardButton.addActionListener(new ActionListener() {		forwardButton.addActionListener(new ActionListener() {
Zeile 147:		Zeile 159:
	public void actionPerformed(ActionEvent e) {		public void actionPerformed(ActionEvent e) {
	cl.previous(cardPanel);		cl.previous(cardPanel);
			}
			});

			JButton lastButton = new JButton("Ende");
			lastButton.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e) {
			cl.last(cardPanel);
	}		}
	});		});
Zeile 158:		Zeile 177:

	//5. Buttons ins ButtonPanel einfügen		//5. Buttons ins ButtonPanel einfügen
	buttonPanel.add(rearwardButton);		buttonPanel.add(firstButton);
			buttonPanel.add(rearwardButton);
	buttonPanel.add(forwardButton);		buttonPanel.add(forwardButton);
			buttonPanel.add(lastButton);
	buttonPanel.add(yellowButton);		buttonPanel.add(yellowButton);

L-ectron-X: /* Layout-Stategie */

2018-05-25T12:34:16Z

Layout-Stategie

← Nächstältere Version		Version vom 25. Mai 2018, 12:34 Uhr
Zeile 10:		Zeile 10:

	'''Die erste dem CardLayout hinzugefügte Komponente, ist die Komponente, die nach beim ersten Aufruf des CardLayouts angezeigt wird.'''<br>		'''Die erste dem CardLayout hinzugefügte Komponente, ist die Komponente, die nach beim ersten Aufruf des CardLayouts angezeigt wird.'''<br>
	Alle als "Cards" organisierten {{JAPI\|Container}} sind außerdem in der Reihenfolge im CardLayout gespeichert, in der sie ihm hinzugefügt wurden. In dieser Reihenfolge können sie mit den [[Methode\|Methoden]] next() und previous() von CardLayout durchlaufen werden. Mit first() und last() kann jeweils der erste bzw. letzte Container angezeigt werden.~~<br>~~		Alle als "Cards" organisierten {{JAPI\|Container}} sind außerdem in der Reihenfolge im CardLayout gespeichert, in der sie ihm hinzugefügt wurden.

			In dieser Reihenfolge können sie mit den [[Methode\|Methoden]] next() und previous() von CardLayout durchlaufen werden.

			Mit first() und last() kann jeweils der erste bzw. letzte Container angezeigt werden.

	Für den schnellen direkten Zugriff auf einen ganz bestimmten Container, können die Container mit einem Constraints-Objekt verknüpft werden, das den Container näher beschreibt und mit dem die genaue Identifizierung möglich wird. Oft wird hierfür ein {{JAPI\|String}} verwendet.		Für den schnellen direkten Zugriff auf einen ganz bestimmten Container, können die Container mit einem Constraints-Objekt verknüpft werden, das den Container näher beschreibt und mit dem die genaue Identifizierung möglich wird. Oft wird hierfür ein {{JAPI\|String}} verwendet.

L-ectron-X: /* Die fertige Beispiel-Applikation */

2018-04-28T13:40:14Z

Die fertige Beispiel-Applikation

← Nächstältere Version		Version vom 28. April 2018, 13:40 Uhr
Zeile 152:		Zeile 152:
	});		});

	//6. Buttons ins ButtonPanel einfügen		//5. Buttons ins ButtonPanel einfügen
	buttonPanel.add(rearwardButton);		buttonPanel.add(rearwardButton);
	buttonPanel.add(forwardButton);		buttonPanel.add(forwardButton);
	buttonPanel.add(yellowButton);		buttonPanel.add(yellowButton);

	//7. Komponenten einem JFrame hinzufügen		//6. Komponenten einem JFrame hinzufügen
	JFrame frame = new JFrame("CardLayout-Demo");		JFrame frame = new JFrame("CardLayout-Demo");
	frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);		frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);

L-ectron-X: /* Die fertige Beispiel-Applikation */

2018-04-28T13:39:38Z

Die fertige Beispiel-Applikation

← Nächstältere Version		Version vom 28. April 2018, 13:39 Uhr
Zeile 157:		Zeile 157:
	buttonPanel.add(yellowButton);		buttonPanel.add(yellowButton);

	//6. Komponenten einem JFrame hinzufügen		//7. Komponenten einem JFrame hinzufügen
	JFrame frame = new JFrame("CardLayout-Demo");		JFrame frame = new JFrame("CardLayout-Demo");
	frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);		frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);

L-ectron-X: /* Die fertige Beispiel-Applikation */

2018-04-28T13:39:02Z

Die fertige Beispiel-Applikation

← Nächstältere Version		Version vom 28. April 2018, 13:39 Uhr
Zeile 130:		Zeile 130:
	JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.CENTER));		JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.CENTER));

	//4. Buttons erzeugen ~~und ins ButtonPanel einfügen~~		//4. Buttons erzeugen
	JButton forwardButton = new JButton("Weiter");		JButton forwardButton = new JButton("Weiter");
	forwardButton.addActionListener(new ActionListener() {		forwardButton.addActionListener(new ActionListener() {
Zeile 151:		Zeile 151:
	}		}
	});		});

			//6. Buttons ins ButtonPanel einfügen
	buttonPanel.add(rearwardButton);		buttonPanel.add(rearwardButton);
	buttonPanel.add(forwardButton);		buttonPanel.add(forwardButton);
	buttonPanel.add(yellowButton);		buttonPanel.add(yellowButton);

			//6. Komponenten einem JFrame hinzufügen
	//5. Komponenten einem JFrame hinzufügen
	JFrame frame = new JFrame("CardLayout-Demo");		JFrame frame = new JFrame("CardLayout-Demo");
	frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);		frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);