Primefaces聚焦于bean [英] Primefaces set focus from bean

问题描述

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

If I want set focus to the field which has failed to validate. I can use <p:focus context='@form'/> to achieve this simple case, easy. But my problem is, not all validation can be performed at the front-end. For example, I want a user to enter a username, when the user submits the form, bean will check the database whether the username already exists or not, if exist, set error message to the field and set focus to it as well. In this case, the <p:focus /> tag does not work anymore since it actually has passed the front-end validation.

我找到了此答案，并尝试实施它，我想说它只能部分起作用.为什么?因为如果通过声明一个变量从bean手动设置焦点，它将覆盖<p:focus context='@form'/>标记.当此焦点标签失去功能时，如果任何前端验证失败，它将不再将焦点转移到该特定领域.

I found this answer and try to implement it, I would say that it only works partially. Why? because if you set focus manually from bean by declaring a variable for it, it will override the <p:focus context='@form'/> tag. When this focus tag lost its function, if there is any front-end validation failed, it will not bring focus to that particular field anymore.

我尝试过的是使用widgetVar来执行焦点.我为字段声明一个widgetVar名称，比如说widgetVar='username'，在托管bean上，我使用以下代码对其进行聚焦:

What I have tried is using widgetVar to execute focus. I declare a widgetVar name for my field, let say widgetVar='username', and at the managed bean, I use the following code to focus it:

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

不幸的是，它不起作用.不知道execute()不能以这种方式工作还是该语句有问题.对不起，我的英语不好，我们将不胜感激.

Unfortunately, it doesn't work. Not sure if execute() doesn't work in this way or there is a problem with the statement. Sorry for my bad English, any help or suggestion would be appreciated.

推荐答案

PrimeFaces 6.3及更高版本

如评论中所述，实用程序方法可在其中表达式相对于查看根目录或:

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

表达式相对于所提供的基本组件.

where the expression is relative to the provided base component.

只需检查 focus渲染器:

Just check what PrimeFaces does in the 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("});");

您可以在一个动作中简单地做同样的事情:

You can simply do the same in an 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(){...}.

Note that I'm using the command button that triggered the action as the source of the search expression and that you don't need $(function(){...} here.

您唯一需要做的是，而不是将clientId用作action方法的参数，而是创建代码来确定哪个组件应该受到关注.

The only thing you need to do is, instead of taking the clientId as an argument of the action method, create code to determine what component should receive focus.

通过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>

这篇关于Primefaces聚焦于bean的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！