p:inplace 在验证失败时仍会切换回来

Question

我是 PrimeFaces 的新手，当我尝试将 <p:inplace> 和 <f:facet> 用于多个输入字段时，即使验证失败，它仍然会切换回来。

代码如下：

<p:inplace editor="true">
  <f:facet name="output">
    <h:outputText value="Hello Inplace" />
  </f:facet>
  <f:facet name="input">
    <p:inputText value="#{myBean.name}" required="true" />
    <p:inputText value="#{myBean.age}" required="true" />
  </f:facet>
</p:inplace>

因此，当我将 2 个输入字段留空时，它仍会切换回输出方面，而它应该与红色边框保持相同。 请帮帮我。谢谢。

Answer 1

我认为 inplace.isValid() 中存在与使用构面相关的错误，因为我看到了同样的问题。这是 InplaceRenderer 中 encodeMarkup 方法的相关代码。如您所见，确实期望输入和输出的命名方面。

protected void encodeMarkup(FacesContext context, Inplace inplace) throws IOException {
    // ...

    boolean validationFailed = context.isValidationFailed() && !inplace.isValid();
    String displayStyle = validationFailed ? "none" : "inline";
    String contentStyle = validationFailed ? "inline" : "none";

    UIComponent outputFacet = inplace.getFacet("output");
    UIComponent inputFacet = inplace.getFacet("input");

    // ...
}

您可以在此处查看完整代码：https://github.com/primefaces/primefaces/blob/master/src/main/java/org/primefaces/component/inplace/InplaceRenderer.java

查看 InplaceTemplate 中的 isValid，它看起来只尝试验证 inplace 的直接子代，并且不会通过其其他后代向下递归（除非 getFacetsAndChildren 将后代树变平，我现在正在研究）。由于构面不是 EditableValueHolder 的实例，因此它甚至不会尝试对其进行验证并返回 true。这是整个 isValid 方法。

public boolean isValid() {
    boolean valid = true;

    for(Iterator<UIComponent> it = this.getFacetsAndChildren(); it.hasNext();) {
        UIComponent component = it.next();
        if(component instanceof EditableValueHolder && !((EditableValueHolder) component).isValid()) {
            valid = false;
            break;
        }
    }

    return valid;
}

您可以在https://github.com/primefaces/primefaces/blob/master/src/main/java-templates/org/primefaces/component/inplace/InplaceTemplate.java查看完整代码

我不知道除了提交错误之外还有其他解决方案。

编辑

<p:inplace id="inplace" editor="true">
    <f:facet name="output">
        <h:outputText value="#{bean.value}" />
    </f:facet>
    <f:facet name="input">
        <p:inputText id="input" value="#{bean.value}" required="true" requiredMessage="Required field message goes here" />
        <p:message for="input" />
    </f:facet>
</p:inplace>

将其更新为这样的内容让我们更加接近，因此在 facet 中有多个组件可能是问题所在。

<p:inplace id="inplace" editor="true">
    <p:ajax event="save" update="message" />
    <f:facet name="output">
        <h:outputText value="#{bean.value}" />
    </f:facet>
    <f:facet name="input">
        <p:inputText id="input" value="#{bean.value}" required="true" requiredMessage="Required field message goes here" />
    </f:facet>
</p:inplace>
<p:message id="message" for="input" />

不幸的是，在点击取消时，这仍然与重置字段和消息有关，但至少这对我们来说是朝着正确方向迈出的一步。