jsf - Primefaces 从 bean 设置焦点

Question

如果我想将焦点设置到验证失败的字段。我可以使用 <p:focus context='@form'/>实现这个简单的案例，easy。但我的问题是，并不是所有的验证都可以在前端进行。例如，我想让用户输入一个用户名，当用户提交表单时，bean 会检查数据库是否存在该用户名，如果存在，则将错误消息设置到该字段并设置焦点。在这种情况下，<p:focus />标签不再起作用，因为它实际上已经通过了前端验证。

我找到了 this回答并尝试实现它，我会说它只能部分起作用。为什么？因为如果您通过为其声明一个变量来从 bean 手动设置焦点，它将覆盖 <p:focus context='@form'/>标签。当这个焦点标签失去作用时，如果有任何前端验证失败，它就不会再将焦点带到该特定字段。

我尝试过使用 widgetVar执行焦点。我声明 widgetVar我的领域的名称，比方说 widgetVar='username' ，并且在托管 bean 处，我使用以下代码来聚焦它:

RequestContext.getCurrentInstance().execute("PF('username').focus()");

不幸的是，它不起作用。不确定 execute()这样不行或者语句有问题。抱歉我的英语不好，如有任何帮助或建议，我们将不胜感激。

Answer 1

PrimeFaces 6.3 及更高版本

如评论中所述，PrimeFaces class 中提供了一个实用方法。 :

PrimeFaces.current().focus(String expression)

表达式是相对于 view root 的，或者:

PrimeFaces.current().focus(String expression, UIComponent base)

表达式与提供的基础组件相关。

PrimeFaces 6.3 之前

只需检查 PrimeFaces 在 focus renderer 中做了什么:

ResponseWriter writer = context.getResponseWriter();
UIComponent forComponent = SearchExpressionFacade.resolveComponent(
        context, focus, focus.getFor());

String clientId = forComponent.getClientId(context);

writer.write("$(function(){");
writer.write("PrimeFaces.focus('" + clientId + "');");
writer.write("});");

你可以简单地在一个 Action 中做同样的事情:

public void focus(String expression) {
  FacesContext context = FacesContext.getCurrentInstance();
  UIComponent forComponent = SearchExpressionFacade.resolveComponent(
    context,
    UIComponent.getCurrentComponent(context),
    expression
  );
  String clientId = forComponent.getClientId();
  RequestContext.getCurrentInstance().execute("PrimeFaces.focus('" + clientId + "');");
}

请注意，我使用触发操作的命令按钮作为搜索表达式的来源，您在这里不需要 $(function(){...}。

您唯一需要做的是，不要将 clientId 作为 action 方法的参数，而是创建代码来确定哪个组件应该获得焦点。

使用 XHTML 测试:

<h:form id="main">
  <p:inputText id="text1"/>
  <p:inputText id="text2"/>
  <p:commandButton value="Focus 1" action="#{myBean.focus('text1')}"/>
  <p:commandButton value="Focus 2" action="#{myBean.focus('text2')}"/>
  <p:commandButton value="Form" action="#{myBean.focus('@form')}"/>
</h:form>