Beispiel für JSF 2 PanelGrid und PanelGroup

Die Komponenten & werden hauptsächlich als alternative Option zum Anordnen der Komponenten in einer bestimmten Form verwendet, indem das HTML-Markup zum Anordnen von Komponenten in Zeilen und Spalten generiert wird. Auf der anderen Seite, wird oft in Verbindung mit verwendet die zwei oder mehr Komponenten gruppiert, sodass sie als eine behandelt werden.

Am häufigsten wird das Panel-Gruppen-Tag verwendet, wenn es darum geht, eine Eingabekomponente als Beispiel in Verbindung mit ihrer Fehlermeldung zu gruppieren (wird später besprochen). Durch das Gruppieren des Textfelds und der Fehlermeldung werden diese in derselben Tabellenzelle platziert. Beiden Komponenten werden unterschiedliche Attribute zum Stylen der unterschiedlichen Körperteile bereitgestellt. Bei Verwendung von haben Sie die Möglichkeit, eine breite Palette von Styling-Attributen zu verwenden, z bgcolor, ColumnClasses, FooterClasses, HeaderClasses, RowClasses, CaptionClass Und captionStyle Neben diesen grundlegenden HTML 4-Attributen wird eine Panel-Beschriftung optional von der Facette mit dem Namen (caption) bereitgestellt. Bei Verwendung von haben Sie jedoch die Möglichkeit, die grundlegenden HTML 4-Attribute wie style und styleClass zu verwenden.

Lesen Sie auch:

  • JSF 2-Tutorials
  • JSF-Tutorials
  • Einführung in JSF

1. Verwaltete Bohne

IndexBean.java

package net.javabeat.jsf;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class IndexBean {
	private String outcome = "index";
	private String userInput = "";

	public String getOutcome() {
		return outcome;
	}

	public void setOutcome(String outcome) {
		this.outcome = outcome;
	}

	public String getUserInput() {
		return userInput;
	}

	public void setUserInput(String userInput) {
		this.userInput = userInput;
	}

	public String addFacesMessage(){
		// Add a message for the input
		FacesContext.getCurrentInstance().addMessage("input",
				new FacesMessage(FacesMessage.SEVERITY_ERROR, "Say Hello JavaBeat !", "Say Hello JavaBeat !"));
		// This empty string token will be understood by the JSF navigation handler
		// This empty token means, don't take me off this view
		return "";
	}
}

2. Die Aussicht

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
	<title>JavaBeat JSF2 Button &amp; Link Components</title>
	<style>
		.col {
			background-color: red;
		}
		.row {
			font-style: italic;
		}
		.caption {
			background-color: aqua;
			font-style: inherit;
			font-weight: bolder;
		}
		.header {
			background-color: yellow;
			font-style: oblique;
		}
	</style>
</h:head>
<h:body>
	<h:form prependId="false">
		<h1>
			<h:outputText value="JavaBeat JSF 2.2 Examples" />
		</h1>
		<h2>
			<h:outputText value="PanelGrid &amp; PanelGroup Example" />
		</h2>
		<h1>Panel Grid Demo:</h1>
		<h:panelGrid columns="2" border="1" columnClasses="col,col"
							headerClass="header" captionClass="caption"
								rowClasses="row">
			<f:facet name="header">
				<h:outputText value="Header"/>
			</f:facet>
			<f:facet name="caption">
				<h:outputText value="Caption"/>
			</f:facet>
			<h:outputText value="JavaBeat Component First Row/First Column"/>
			<h:outputText value="JavaBeat Component First Row/Second Column"/>
			<h:outputText value="JavaBeat Component Second Row/First Column"/>
			<h:outputText value="JavaBeat Component Second Row/Second Column"/>
			<h:outputText value="JavaBeat Component Third Row/First Column"/>
			<h:outputText value="JavaBeat Component Third Row/Second Column"/>
		</h:panelGrid>

		<h1>Panel Group Demo:</h1>
		<h:panelGroup id="panelGroup" columns="2">
			<h:inputText id="input" value="#{indexBean.userInput}"/>
			<h:commandButton value="Send A Message For JavaBeat !" action="#{indexBean.addFacesMessage}"/>
			<h:message for="input" showDetail="true" showSummary="false" errorStyle="color:red;"/>
		</h:panelGroup>

		<h1>Panel Group Inside PanelGrid Demo:</h1>

		<h:panelGrid columns="1" columnClasses="col,col">
			<h:panelGroup columns="2">
				<h:outputText value="JavaBeat Component First Row/First Column "/>
				<h:outputText value="JavaBeat Component First Row/Second Column "/>
			</h:panelGroup>
			<h:panelGroup columns="2">
				<h:outputText value="JavaBeat Component Second Row/First Column "/>
				<h:outputText value="JavaBeat Component Second Row/Second Column "/>
			</h:panelGroup>
		</h:panelGrid>
	</h:form>
</h:body>
</html>

3. Der Bereitstellungsdeskriptor (web.xml)

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

4. JSF 2 PanelGrid & PanelGroup Demo

Der folgende Schnappschuss zeigt Ihnen das vollständige Szenario der Verwendung von „panelGrid“ und „panelGroup“.
Beispiel für JSF 2 PanelGrid und PanelGroup

Beachten Sie die folgenden wichtigen Punkte, die im obigen Schnappschuss gezeigt werden:

  • Die Panel-Rasterkomponente, die zum Anordnen der Komponenten verwendet wird.
  • Die Panel-Gruppenkomponente wird zum Gruppieren von Komponentensätzen verwendet und macht sie zu einer Komponente. Diese Gruppierung ist sehr klar, wenn Sie Folgendes bemerkt haben (Panel-Gruppe innerhalb der Panel-Raster-Demo). Die Verwendung von Paneelgruppenkomponenten hat Auswirkungen auf das Verfahren zum Verlegen des Paneelrasters; also anstatt das anzuzeigen 4 Reihen Da das Panel-Raster so konfiguriert wurde, dass es 1 Spalte pro Zeile akzeptiert, wird für jede Zeile eine Panel-Gruppe gerendert und der Inhalt der Panel-Gruppenkomponente verworfen, obwohl jede Panel-Gruppe mehr als eine Spalte enthielt.
  • Die Panelgruppe behandelt die Eingabe und ihre Nachricht als eine Komponente, sodass sie in derselben Zelle liegen (Siehe Panel-Gruppen-Demo).

(wpdm_file id=18)

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen