TOC

Поле ошибки фокуса PrimeFaces автоматически

В PrimeFaces, если включен компонент фокуса <p: focus> : при загрузке страницы она будет фокусироваться на первом видимом поле ввода; Если проверка не удалась, она автоматически сфокусируется на первом поле ошибки. Это работает очень хорошо, и должен использовать компонент при обработке формы. Интересно, почему не включить его по умолчанию?

В этом уроке мы покажем вам простую форму регистрации, использующую <p: focus> для фокусировки на поле ошибки.

Используемые инструменты:

, PrimeFaces 3.3

, JSF 2.1.11

, Затмение 4.2

, Maven 3

, Tomcat 7

1. Форма регистрации

Простая форма, имя пользователя и поле пароля.

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 - ничего не делать, если все в порядке, перенаправить на страницу благодарности. 

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. Демо

http://локальный : 8080/primefaces/index.jsf

Рисунок: Страница загружена, фокус на первом вводе, который является полем имени пользователя.

фокус на первое поле ввода

Рисунок: проверка не пройдена, обратите внимание на первое поле, вызвавшее ошибку.

фокус на поле ошибки

Скачать исходный код

Загрузите его - ссылка://wp-content/uploads/2012/10/primefaces-focus-example.zip[primefaces-focus-example.zip](12 КБ)

Рекомендации

, http://www.primefaces.org/showcase/ui/focus.jsf [PrimeFaces focus

витрина компонентов], http://www.primefaces.org/docs/api/3.4/org/primefaces/component/password/Password.html [PrimeFaces

пароль JavaDoc]

ссылка://тег/фокус/[фокус]ссылка://тег/простые лица/[основные лица]

Related