Wenn in PrimeFaces die Fokuskomponente <p: focus> aktiviert ist: Beim Laden der Seite wird das erste sichtbare Eingabefeld angezeigt. Wenn die Überprüfung fehlgeschlagen ist, wird automatisch das erste Fehlerfeld angezeigt. Es funktioniert sehr gut und muss bei der Formularverarbeitung eine Komponente verwenden. Ich frage mich nur, warum es nicht standardmäßig aktiviert ist.
In diesem Lernprogramm zeigen wir Ihnen ein einfaches Anmeldeformular und verwenden <p: focus>, um sich auf das Fehlerfeld zu konzentrieren.
Benutztes Werkzeug :
-
PrimeFaces 3.3
-
JSF 2.1.11
-
Eclipse 4.2
-
Maven 3
-
Tomcat 7
1. Anmeldeformular
Ein einfaches Formular, Benutzername und Passwort.
index.xhtml
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"> <h:head> </h:head> <h:body> <f:facet name="last"> <h:outputStylesheet library="default" name="css/style.css"/> </f:facet> <h1>PrimeFaces focus example</h1> <div style="width: 500px"> <h:form> <p:panel id="panel-signup"> <!-- enable focus component --> <p:focus context="panel-signup"/> <p:inputText id="username" required="true" label="username" size="40" requiredMessage="Please enter your username." value="#{userAction.username}"> </p:inputText> <p:watermark for="username" value="Username ** "/> <p:message for="username"/> <p:password id="password" required="true" label="password" size="40" requiredMessage="Please enter your password." match="confirmPassword" value="#{userAction.password}" maxlength="20"> </p:password> <p:watermark for="password" value="Password ** "/> <p:message for="password"/> <p:password id="confirmPassword" required="true" size="40" requiredMessage="Please confirm your password." label="confirmPassword" value="#{userAction.password}" maxlength="20"> </p:password> <p:watermark for="confirmPassword" value="Type Password Again ** "/> <p:message for="confirmPassword"/> <p:commandButton value="Register" style="margin:20px" action="#{userAction.register}" ajax="false"/> </p:panel> </h:form> </div> </h:body> </html>
UserBean.java - Nichts tun, wenn alles in Ordnung ist, zur Dankeseite weiterleiten.
package com.mkyong; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name = "userAction") @SessionScoped public class UserBean { String username; String password; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String register() { return "thanks?faces-redirect=true"; } }
2. Demo
http://localhost : 8080/primefaces/index.jsf
Abbildung: Seite wird geladen, konzentrieren Sie sich auf die erste Eingabe (Benutzername).
Abbildung: Überprüfung fehlgeschlagen, konzentrieren Sie sich auf das erste Feld, das den Fehler verursacht hat.
Quellcode herunterladen
Laden Sie es herunter - Link://wp-content/uploads/2012/10/primefaces-focus-example.zip[primefaces-focus-example.zip](12 KB)
Referenzen
-
http://www.primefaces.org/showcase/ui/focus.jsf [PrimeFaces-Fokus
Komponentenschaufenster]. http://www.primefaces.org/docs/api/3.4/org/primefaces/component/password/Password.html [PrimeFaces
Passwort JavaDoc]