jsf - 自定义组件，即 UIInput 和 UICommand

Question

在处理 JSF 自定义组件时遇到了一些困难。如果有人能让我先行一步，那就太好了。

这个想法是有一个组件可以让我翻阅 LocalDate 。考虑一个更简单的日期选择器。呈现的 HTML 有两个按钮，一个用于将日期增加一天，另一个按钮用于将日期减少一天。该值本身存储在隐藏的输入中。附件是该组件的一个简单版本，它不起作用，但希望描述了我想要实现的目标。

这个想法是说 <my:datePager value="#{myBackingBean.someDate}" />在页面上，并在单击任一按钮后执行一些逻辑/操作。

例如<my:datePager value="#{myBackingBean.someDate} action="..." />或<my:datePager value="#{myBackingBean.someDate} previous="..." next="..."/>不知道哪个更好。

这就是我所遇到的问题:如何调用 previous和next组件上的方法？

这是迄今为止我的 JSF 2.3 自定义组件:

@FacesComponent(LocalDatePager.COMPONENT_TYPE)
public class LocalDatePager extends UIInput {

    public static final String COMPONENT_TYPE = "LocalDatePager";

    public LocalDatePager() {
        setConverter(LocalDateConverter.INSTANCE);
    }

    public void previous() {
        LocalDate localDate = (LocalDate) getValue();
        localDate = localDate.minusDays(1);
        setValue(localDate);
    }

    public void next() {
        LocalDate localDate = (LocalDate) getValue();
        localDate = localDate.plusDays(1);
        setValue(localDate);
    }

    @Override
    public void decode(FacesContext context) {
        super.decode(context);
    }

    @Override
    public void encodeEnd(FacesContext context) throws IOException {
        ResponseWriter writer = context.getResponseWriter();

        writer.startElement("div", this);
        writer.writeAttribute("class", "btn-group", null);
        writer.writeAttribute("role", "group", null);
        writer.startElement("button", this);
        writer.writeAttribute("type", "button", null);
        writer.writeAttribute("class", "btn btn-outline-primary", null);
        writer.writeText("Previous", null);
        writer.endElement("button");
        writer.startElement("button", this);
        writer.writeAttribute("type", "button", null);
        writer.writeAttribute("class", "btn btn-outline-primary", null);
        writer.writeText("Next", null);
        writer.endElement("button");
        writer.endElement("div");

        writer.startElement("input", this);
        writer.writeAttribute("name", getClientId(context), "clientId");
        writer.writeAttribute("type", "hidden", null);
        writer.writeAttribute("value", getValue(), "value");
        writer.endElement("input");
    }

}

根据我的理解，我所拥有的组成部分是心灵，两者都是 UIInput和UICommand 。我需要实现 ActionEvent ？火值变化事件？

目前，我在支持 bean 中而不是在组件中执行整个 previous 和 next 方法。这会导致大量重复代码，我认为自定义组件最适合。我尝试使用复合组件，但这也没有让我走得太远。

到目前为止，另一种方法是客户端行为:执行 JavaScript、更改隐藏输入的值并提交表单。这感觉更糟。

如果有人能给我指出正确的方向，那就太好了。

Answer 1

作为UIInput

首先，您需要在 encodeXxx() 方法中将按钮呈现为正常的提交按钮。另外，您宁愿使用 encodeAll() 而不是 encodeEnd() 来实现此目的，因为这似乎是一个“叶子”组件，因此您不希望来对付 child 。实现encodeAll() 会更加高效。将现有的 encodeEnd() 方法重命名为 encodeAll() 并调整按钮的编码，如下所示:

writer.startElement("button", this);
writer.writeAttribute("type", "submit", null); // instead of "button"
writer.writeAttribute("name", getClientId(context) + "_previous", "clientId");
writer.writeText("Previous", null);
// ...
writer.startElement("button", this);
writer.writeAttribute("type", "submit", null); // instead of "button"
writer.writeAttribute("name", getClientId(context) + "_next", "clientId");
writer.writeText("Next", null);
// ...
// The hidden input field in your existing code is fine as-is.

然后您可以在请求参数映射中检查它们。如果您想让您的组件保持为 UIInput，那么我建议在 getConvertedValue() 方法中执行该工作:

@Override
protected Object getConvertedValue(FacesContext context, Object submittedValue) throws ConverterException {
    LocalDate localDate = (LocalDate) super.getConvertedValue(context, submittedValue);

    if (localDate != null) {
        Map<String, String> params = context.getExternalContext().getRequestParameterMap();

        if (params.get(getClientId(context) + "_previous") != null) {
            localDate = localDate.minusDays(1);
        }
        else if (params.get(getClientId(context) + "_next") != null) {
            localDate = localDate.plusDays(1);
        }
    }

    return localDate;
}

然后你可以简单地在值更改监听器中完成这项工作:

<my:datePager value="#{bean.localDate}" valueChangeListener="#{bean.onpage}" />

public void onpage(ValueChangeEvent event) {
    // ...
}

这基本上就是全部了。无需手动触发值更改事件。其余逻辑已由 JSF 处理。

然而，这种方法的缺点是，这可能会在 JSF 生命周期的错误时刻被调用。当您确实希望在调用应用程序阶段调用它时，会在验证阶段调用值更改监听器。想象一下，这个按钮放置在一个表单中，其状态取决于与 #{bean.localDate} 关联的数据，那么它们的更新模型值阶段可能会出错，因为 localDate code> 更改得太早了。

作为UICommand

如果上述缺点是真正的阻碍，尽管有 work around ，那么您最好将 UIInput 转换为 UICommand。不可能两者兼而有之。你选择其中之一。我个人的建议是选择 UICommand，因为这对于 JSF 生命周期中的行为来说“更自然”，同时牢记组件的唯一目的(“分页到下一个/上一个日期”)。步骤如下:

1. 将 extends UIInput 替换为 extends UICommand。

2. 删除构造函数中的 setConverter() 调用。

3. 保留encodeAll()方法。完全没问题。

4. 删除 getConvertedValue() 方法并实现 decode()，如下所示:

    @Override
    public void decode(FacesContext context) {
        Map<String, String> params = context.getExternalContext().getRequestParameterMap();
   
        if (params.get(getClientId(context) + "_previous") != null) {
            queueEvent(new ActionEvent(context, this));
        }
        else if (params.get(getClientId(context) + "_next") != null) {
            queueEvent(new ActionEvent(context, this));
        }
    }
   

   这些 queueEvent() 调用将导致调用同一组件的 broadcast()。因此，按如下方式覆盖它:

    @Override
    public void broadcast(FacesEvent event) throws AbortProcessingException {
        FacesContext context = event.getFacesContext();
        Map<String, String> params = context.getExternalContext().getRequestParameterMap();
        LocalDate localDate = LocalDate.parse(params.get(getClientId())); // TODO: gracefully handle any conversion error.
   
        if (params.get(getClientId(context) + "_previous") != null) {
            localDate = localDate.minusDays(1);
        }
        else if (params.get(getClientId(context) + "_next") != null) {
            localDate = localDate.plusDays(1);
        }
   
        getValueExpression("value").setValue(context.getELContext(), localDate);
        super.broadcast(event); // Invokes bean method.
    }
   

   请注意value 属性是如何在模型中手动解码、转换和更新的。尽管这是作为隐藏输入值传递的，但您可能需要添加一些逻辑来妥善处理任何转换错误，如 TODO 中所示。

现在您可以按如下方式使用它:

<my:datePager value="#{bean.localDate}" action="#{bean.onpage}" />

public void onpage() {
    // ...
}