Beispiel für ein JSF 2-Formular

Die meisten Webanwendungen werden auf der Grundlage einer Formularübermittlung ausgeführt, und JSF 2-Anwendungen bilden da keine Ausnahme. Der ist die Komponente, die dafür verantwortlich ist, dass und die Ansicht zurück an den Server senden können. Der für die Übermittlung verwendete Inhaltstyp ist der Standardtyp application/x-www-form-urlencodedsobald Sie die Angabe des Attributs weggelassen haben enctype. Die Werte, die für die folgende Eigenschaft übergeben werden können:

  • application/x-www-form-urlencoded: Dies ist die Standardeinstellung, alle Zeichen werden vor dem Senden codiert (Leerzeichen werden in +-Symbole umgewandelt und Sonderzeichen werden in ASCII-HEX-Werte umgewandelt).
  • mulipart/form-data: Es werden keine Zeichen kodiert. Dieser Wert ist erforderlich, wenn Sie Formulare verwenden, die über eine Datei-Upload-Steuerung verfügen.
  • text/plain: Leerzeichen werden in +-Symbole umgewandelt, es werden jedoch keine Sonderzeichen kodiert.

Obwohl das HTML-Formular-Tag über Methoden- und Aktionsattribute verfügt, h:form Dies ist nicht der Fall, da Sie den Status im Client speichern können – eine Option, die als verstecktes Feld implementiert ist – und das Posten von Formularen mit dem GET nicht zulässig ist. Der Inhalt dieses versteckten Felds kann recht umfangreich sein und den Puffer für Anforderungsparameter überlaufen, daher werden alle JSF-Formularübermittlungen mit der POST-Methode implementiert. Es ist kein Ankerattribut erforderlich, da die Übermittlung von JSF-Formularen immer auf der aktuellen Seite gepostet wird. Die Navigation zu einer neuen Seite erfolgt, nachdem die Formulardaten gepostet wurden, da der Navigationshandler das Token berücksichtigt, das von der aufgerufenen Aktion zurückgegeben wird.

Lesen Sie auch:

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

Der Tag generiert ein HTML-Formularelement. Wenn Sie beispielsweise in einer JSF-Seite mit dem Namen /index.xhtml ein h:form-Tag ohne Attribute verwenden, generiert der Form-Renderer HTML wie folgt:

<form id="_id0" method="post" action="/faces/index.html"
       enctype="application/x-www-form-urlencoded">

Wenn Sie das id-Attribut nicht explizit angeben, wird wie bei allen generierten HTML-Elementen ein Wert von der JSF-Implementierung generiert. Sie können das id-Attribut für Formulare explizit angeben, damit in Stylesheets oder Skripten darauf verwiesen werden kann.

Alle von der JSF-Implementierung generierten Formularsteuerelemente haben Namen, die (Formularname:Komponentenname) Wo Formularname stellt den Namen des Formulars des Steuerelements dar und Komponentenname stellt den Namen des Steuerelements dar. Wenn Sie keine ID-Attribute angeben, erstellt die JSF-Implementierung Bezeichner für Sie.

Die Verwendung von oder ohne sie in das JSF-Formular einzuschließen, führt zu keiner Formularübermittlung.

1. Verwaltete Bohne

IndexBean.java

package net.javabeat.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@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 submit(){
		this.userInput = "The user has entered \""+this.userInput+" \"";
		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>
	<script>
		function check(){
			var message = document.getElementById("form:input");
			if(confirm("Are you sure sending message "+ message.value + " !")){
				return true;
			}
			return false;
		}
	</script>
</h:head>
<h:body>
	<h:form id="form">
		<h1>
			<h:outputText value="JavaBeat JSF 2.2 Examples" />
		</h1>
		<h2>
			<h:outputText value="JSF2 Form Example" />
		</h2>
		<h:outputText value="Enter Greeting Message : " />
		<h:inputText id="input" value="#{indexBean.userInput}" />
		<h:commandButton value="Submit" action="#{indexBean.submit}" onclick="return check();"/>
		<h:outputText value="#{indexBean.userInput}"/>
	</h:form>
</h:body>
</html>
  • Das JavaScript ist in der Lage, die Komponente des Formulars mithilfe des Ausdrucks zu finden formId:componentId.
  • Die Schaltfläche „Senden“ (commandButton/commandLink) löst keine Übermittlung aus, wenn sie nicht in ein Formular eingeschlossen ist.

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>
  • Der Status der Ansicht wurde mithilfe der Client-Methodik gespeichert, sodass die JSF-Implementierung eine verborgene Eingabe zum Erreichen dieser Speicherung bereitstellt.

4. Die übersetzte Form

<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
	<script>
		function check(){
			var message = document.getElementById("form:input");
			if(confirm("Are you sure sending message "+ message.value + " !")){
				return true;
			}
			return false;
		}
	</script></head><body>
<form id="form" name="form" method="post" action="/JavaBeat-JSF-Installation/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form">

		<h1>JavaBeat JSF 2.2 Examples
		</h1>
		<h2>JSF2 Form Example
		</h2>Enter Greeting Message : <input id="form:input" type="text" name="form:input" value="The user has entered &quot;Hello JavaBeat ! &quot;"><input type="submit" name="form:j_idt11" value="Submit" onclick="return check();">The user has entered "Hello JavaBeat ! "
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="fBTaoNkQRIl7YrSFyl44T8F96eXEe8iLJcL9n82xrPoB21m+OMee7vrrDxZLNpqidpXRfvCd/piHubd54c7hFwOEr7R8RNdihnLCc+3ASOmpJbJ8PTUw1vRk63DGv5oYooW06I2drUVYuv5oS/FC6UU3faddktGlxRu6PzAbHK5BisZz0I5pqxwuZpTw5D0YIEtjImnIUaDX2jqiMF+rsUvasLCnNNjGFOsstWDaYcZT0n2EoAyBMjvTYMfDlR+crLHKELW3zbVpwJBN3kyT5/LuI/wQpM0CMgm9Uuar7u1C6h3O8p+6A0AgNT2p+VDcfVIkcYYM1XTyr9o1iPy0sKlaatmdCt5z9r7S4nnQ8t2tyLgaDYIvUAiEXsfeKD+TVss7xqDRo57xgjwkD0jlyc51YQ6Ck27kGCCPqYU6X7rTj+NHm9gmqMFz3fobl1+AD2JpsTX12y7UFhIRNdb7y2TP4N0RQ4wmiB4t4MSEV9Kc6QV02X9fYyo6R7mFuuufj8Cby9hPHJuN7N3ZcdLsYUqtK7k53cVZOIIiX+toYggWYSSWwHD7xC9SdsoX9mIT" autocomplete="off">
</form>
</body></html>
  • Die JSF-Implementierung erstellt eine versteckte Eingabe, um den Speicherstatus der Ansicht zu erreichen.
  • Die JSF-Implementierung generiert die Bezeichner für die Formularkomponenten. Wenn Sie sich also den Eingabebezeichner notiert haben, sollten Sie sehen, dass er wie folgt identifiziert wird Formular:Eingabewobei die Formular-ID „form“ und die Eingabe-ID „input“ ist.

5. JSF-Formular-Demo

Der folgende Schnappschuss zeigt Ihnen das vollständige Szenario der Verwendung der Formularkomponente.

Beispiel für ein JSF 2-Formular

  • Der Benutzer hat die Nachricht übermittelt und die Backing-Bean fügt den Text (Der Benutzer hat eingegeben) für die vom Benutzer eingegebene Nachricht hinzu.
  • Die Schaltfläche „Senden“ ruft eine Java-Script-Methode auf überprüfen Sobald darauf geklickt wird, identifiziert diese Funktion den Eingabewert mithilfe der Komponente, die vom Java-Skript getElement identifiziert wurde.
  • Also die Backing-Bean-Methode einreichen einen leeren String zurückgegeben hat, wird die Ansicht erneut angezeigt.
  • Die Übermittlung wurde aufgrund der darin enthaltenen Schaltfläche „Senden“ abgeschlossen .

(wpdm_file id=19)

Kommentar verfassen

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

Nach oben scrollen