JSF 2 DataTable-Beispiel

Der h:dataTable ist eine der wichtigsten Komponenten, die vom Anfang der JSF-Seite kommen. JSF 2 unterstützt die Verwendung von h:dataTable durch Iteration einer Liste von Daten, die in die Liste einer Bean eingefügt werden, um eine HTML-Tabelle zu erstellen. Das wichtigste Attribut bei h:dataTable ist das Wertattribut, das die Daten darstellt, über die h:dataTable iteriert. Die Daten müssen einem der folgenden Typen angehören:

  • Ein Java-Objekt (es spielt keine Rolle, denn die h:dataTable wird einmal iterieren, wenn das Objekt skalar ist – keine Sammlung – und so das Objekt im Hauptteil des Tags verfügbar machen.
  • Eine Anordnung.
  • Eine Instanz von java.util.List
  • Eine Instanz von java.sql.ResultSet
  • Eine Instanz von javax.servlet.jsp.jstl.sql.Result
  • Eine Instanz von javax.faces.model.DataModel.

In diesem Beitrag stellen wir eine einfache h:dataTable vor, die mit einer Instanz von Array verbunden ist. Während h:dataTable iteriert, macht es jedes Element im Array, in der Liste, im Ergebnissatz usw. im Textkörper des Tags verfügbar. Der Name des Elements wird mit einer h:dataTable angegeben var Attribut.

Lesen Sie auch:

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

Die h:dataTable-Komponente kann nur h:column enthalten und verwirft alle anderen Komponenten, aber h:column kann eine unbegrenzte Anzahl der Komponenten rendern. Die h:dataTable-Komponente bietet dem Entwickler die Möglichkeit, eine Kopf- und Fußzeile für die zu erstellende dataTable hinzuzufügen.

1. Verwaltete Bohne

SimpleDataTableBean

package net.javabeat.jsf;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class SimpleDataTableBean {

	private List<Tutorial> tutorials = new ArrayList<Tutorial>();

	public SimpleDataTableBean() {
		this.tutorials.add(new Tutorial(1, "JSF 2"));
		this.tutorials.add(new Tutorial(2, "EclipseLink"));
		this.tutorials.add(new Tutorial(3, "HTML 5"));
		this.tutorials.add(new Tutorial(4, "Spring"));
	}

	public String register() {
		return "registrationInfo";
	}

	public List<Tutorial> getTutorials() {
		return tutorials;
	}

	public void setTutorials(List<Tutorial> tutorials) {
		this.tutorials = tutorials;
	}
}

2. Tutorial-Klasse

Tutorial.java

package net.javabeat.jsf;

public class Tutorial {
	private int tutorialId;
	private String tutorialDescription;

	public Tutorial(int id, String desc){
		this.tutorialId = id;
		this.tutorialDescription = desc;
	}

	public int getTutorialId() {
		return tutorialId;
	}
	public void setTutorialId(int tutorialId) {
		this.tutorialId = tutorialId;
	}
	public String getTutorialDescription() {
		return tutorialDescription;
	}
	public void setTutorialDescription(String tutorialDescription) {
		this.tutorialDescription = tutorialDescription;
	}
}

3. Die Ansichten

simpleDataTable.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">
<h:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="dataTable Example" />
	</h2>
	<h:outputText value="JavaBeat Site Provides the Following Tutorials:"/>
	<br/>
	<h:dataTable value="#{simpleDataTableBean.tutorials}" var="tutorial" border="1">
		<h:column>
			<f:facet name="header">
				<h:outputText value="Tutorial ID"/>
			</f:facet>
			<h:outputText value="#{tutorial.tutorialId}"/>
			<f:facet name="footer">
				<h:outputText value="Tutorial ID"/>
			</f:facet>
		</h:column>
		<h:column>
			<f:facet name="header">
				<h:outputText value="Tutorial Description"/>
			</f:facet>
			<h:outputText value="#{tutorial.tutorialDescription}"/>
			<f:facet name="footer">
				<h:outputText value="Tutorial Description"/>
			</f:facet>
		</h:column>
	</h:dataTable>
</h:form>
</html>

4. Der Bereitstellungsdeskriptor

<?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>

5. JSF 2 DataTable-Demo

Der folgende Schnappschuss zeigt Ihnen das vollständige Beispiel für die Verwendung einer h:dataTable mit ihrer Kopf- und Fußzeilenbeschriftung. Der Snapshot sollte das Konzept demonstrieren, eine h:dataTable-Komponente mit einer einfachen Liste von Tutorial-Objekten zu verknüpfen und das Konzept von zu verwenden var Referenz für den Zugriff auf die Datensätze im Hauptteil der h:dataTable.

JSF 2 DataTable-Beispiel

(wpdm_file id=10)

Kommentar verfassen

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

Nach oben scrollen