JSF 2 SelectManyMenu-Beispiel

JavaServer-Gesichter (JSF 2) stellt eine Reihe von Benutzeroberflächenkomponenten bereit, die die häufigsten Anforderungen abdecken. Eine der wichtigsten Komponenten ist eine -Komponente. Das selectManyMenu ist eine Komponente, die zur Mehrfachauswahl verwendet wird. Die Verwendung der Komponente „selectManyMenu“ kann durch die Verwendung von Inline-Auswahlwerten oder durch die Verwendung einer Liste von Optionen erreicht werden, die in der verwalteten Bean definiert sind. In diesem Tutorial wird anhand eines einfachen Beispiels erläutert, wie dieses Tag verwendet wird.

Lesen Sie auch:

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

1. Verwaltete Bohne

SelectManyMenuBean.java

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 SelectManyMenuBean {

	public List tutorials;
	public List selectedTuorials;

	public SelectManyMenuBean(){
		this.tutorials = new ArrayList();
		this.tutorials.add(new Tutorial(1, "JSF 2"));
		this.tutorials.add(new Tutorial(2, "JPA"));
		this.tutorials.add(new Tutorial(3, "Maven"));
	}

	public List getTutorials() {
		return tutorials;
	}

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

	public List getSelectedTuorials() {
		return selectedTuorials;
	}

	public void setSelectedTuorials(List selectedTuorials) {
		this.selectedTuorials = selectedTuorials;
	}

	public String submitTraining(){
		return "selectedTraining";
	}

}

2. Java-Klasse

Das bereitgestellte Beispiel hängt vom Tutorial-Typ (Klasse) zum Erstellen von Optionen ab. Dies ist eine dritte Art der Auswahl anstelle der Verwendung von Inline-Optionen und SelectItem, wie Sie im SelectOneMenu-Beispiel gesehen haben. Diese Verwendung gilt auch für selectOneMenu. 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

Das nächste kommende Szenario zeigt Ihnen eine Beispielansicht, die das Schulungs-Tutorial und das Schulungsniveau anzeigt. Sobald der Auszubildende diese Auswahl mithilfe der Aktion „Schulung senden“ übermittelt hat, leitet der Navigationshandler der JSF-Implementierung den Auszubildenden in eine andere Ansicht, um ihm die übermittelten Werte anzuzeigen .

selectManyMenu.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="SelectManyMenu Example" /></h2>
	<h:selectManyMenu value="#{selectManyMenuBean.selectedTuorials}">
		<f:selectItems value="#{selectManyMenuBean.tutorials}" var="tutorial"
				itemValue="#{tutorial.tutorialId}" itemLabel="#{tutorial.tutorialDescription}">
		</f:selectItems>
	</h:selectManyMenu>
	<h:commandButton value="Submit Training" action="#{selectManyMenuBean.submitTraining}"></h:commandButton>
	</h:form>
</html>

selectedTraining.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">
	<f:view>
		<h1><h:outputText value="JavaBeat JSF 2.2 Examples" /></h1>
		<h2><h:outputText value="SelectManyMenu Example" /></h2>
		<h:form>
			<h:outputText value="Selected Tutorials: "/>
			<br/>
			<ui:repeat var="tutorial" value="#{selectManyMenuBean.tutorials}">
				<h:outputText value="#{tutorial.tutorialDescription}"/>
				<br/>
			</ui:repeat>
		</h:form>
	</f:view>
</html>

4. 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>

5. JSF 2 SelectManyMenu-Demo

Die folgenden Schnappschüsse, die Sie sehen würden, bieten Ihnen ein laufendes Beispiel für die Verwendung von SelectManyMenu.

JSF 2 SelectManyMenu Beispiel 1

JSF 2 SelectManyMenu Beispiel 2

(wpdm_file id=5)

Kommentar verfassen

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

Nach oben scrollen