css - JSF 2.0 基于 CSS 动态控制回发哪些值

Question

我有这个表单，其中包含约 170 个单独的文本框，其值位于 session 范围的 bean 中。要求仅在组件具有特定 CSS 类时才提交值。

我最初采用的方法是在 UPDATE_MODEL_VALUES 中创建一个 PhaseListener 并在那里测试 CSS 类。如果类是受影响的类，我将组件的值设置为 null。然后在前端，我使用通用的 JavaScript 方法将类切换为焦点。这意味着就每个组件的更改而言，我只需要添加:

... styleClass="examfieldgrey" onfocus="whiteField(this);"

考虑到我需要更改的组件数量，这很好。

在我重构我的 e 表单以使用多个 h 表单标签之前，它工作正常。现在CSSclass在前端切换，但是这个改变没有被保存。阶段监听器正在获取旧类。

我认为这显然与我在 jQuery/javascript 中切换类有关。我想知道的是:

1. 有没有更好的方法来巧妙地做到这一点？最好意味着我不必修改 170 多个组件？
2. 如果我必须继续使用 Javascript 来切换类，有没有办法可以将更改从 javascript 发回？

很抱歉，如果这是一个明显的问题，我对 JSF 生命周期还不太了解。

我正在使用 JSF 2.0 MyFaces

这里有一个需要过滤的表单组件示例供引用:

<h:inputTextarea 
  id="inputVal" 
  styleClass="midTextArea examfieldgrey"
  onfocus="whiteField(this);"
  value="#{bean.form.val}"/>

其中“examfieldgrey”是我在确定是否要阻止组件时测试的类。

还有 whiteField 方法:

function whiteField(field){
    if(! jQuery(field).hasClass("examfieldgrey")){
        return;
    }
    jQuery(field).removeClass("examfieldgrey");
    jQuery(field).addClass("examfieldwhite");
}

在我过滤的阶段方法之前我的阶段监听器:

// TODO: make whatever mode allows ghosting to be configurable outside of
// the system (perhaps in the config file)
/**
 * Before the model is updated, test each component's CSS on the form.  If the 
 * CSS style is 'examfieldgrey' set the value to null so it doesn't get submitted
 */
@Override
public void beforePhase(PhaseEvent arg0) {

    //We need the session to get the backing bean
    if (arg0.getFacesContext().getExternalContext().getSessionMap() == null) {
        return;
    }

    //get the measurements bean so we can determine the form mode 
    if (arg0.getFacesContext().getExternalContext().getSessionMap()
            .get("measurements") == null) {
        return;
    }

    //ensure the bean is the expected data type, it should always be this type.  I'm just paranoid ;)
    if (!(arg0.getFacesContext().getExternalContext().getSessionMap()
            .get("measurements") instanceof MeasurementsController)) {

        return;
    }

    //get, convert and check the backing bean's mode.  We only filter if the mode is COPY
    if (((MeasurementsController) arg0.getFacesContext()
            .getExternalContext().getSessionMap().get("measurements"))
            .getMode() != FormMode.COPY) {

        return;
    }

    //recursivly traverse the componenets and filter the ones who have the CSS class
    traverseChildren(arg0.getFacesContext().getViewRoot().getChildren());
}

/**
 * Traverse a List of UIComponenets and check the CSS.  If it's the 'examfieldgrey' class
 * and the component is a UIInput component, set the value to null. 
 * @param children  a List of the componenets to filter on the form.
 */
private void traverseChildren(List<UIComponent> children) {
    debugLevelCount++;
    if (children == null || children.size() == 0) {
        debugLevelCount--;
        return;
    }

    for (UIComponent component : children) {
        if (component instanceof UIInput) {
            if (component.getAttributes() != null
                    && component.getAttributes().get("styleClass") != null
                    && component.getAttributes().get("styleClass")
                            .toString().contains("examfieldgrey")) {
                ((UIInput) component).setValue(null);
            } else {
                debugPrintAllow(component);
            }
            continue;
        }
        traverseChildren(component.getChildren());
    }
    debugLevelCount--;
}

忽略打印函数，它们什么都不做 ;)

谢谢大家!

编辑

这是一个复制操作，因此支持 bean 在构建 bean 后具有值。如果我点击提交并且支持 bean 尚未填充，则使用 primefaces 选择器的选项很棒。但我不确定它是否能够真正清除这些值。

另一件需要注意的事情是，我在我的表单对象的一个​​实例中引用了值。我不知道这是否有帮助，但我原来的帖子中没有。

Answer 1

There is a requirement to only submit values when the component has a certain CSS class.

如果你碰巧使用PrimeFaces已经或正在开放使用它，因为最新的 3.3 版本你可以使用 new @() selector process 中接受基于 jQuery 的 CSS 选择器的语法和 update PrimeFaces ajax 组件的属性(相当于 JSF 标准 execute 组件的 render 和 <f:ajax> 属性)。

例如

<p:commandButton ... process="@(.foo)" />

或

<p:ajax ... process="@(.foo)" />

将指示 JSF 处理仅类名为 foo 的 HTML 输入元素.

---

Now the CSSclass is switching on the front end, but this change is not being saved. The phase listener is getting the old class.

那是因为您没有使服务器端的 JSF 组件树与客户端的 HTML DOM 树保持同步。您只是在客户端进行更改，而没有通知 JSF。 CSS 类没有作为请求参数发送到服务器端，只有 HTML 表单输入值是。您基本上需要通过 JSF 而不是通过 JS/jQuery 更改 CSS 类，以便更改也反射(reflect)在 JSF 组件树中。

然而，实现这一点并不完全是微不足道的，而且可能会造成浪费。因此，最简单的方法是使用 PrimeFaces 及其 @()选择器支持。此选择器在客户端进行评估，并转换为与选择器匹配的 JSF 可理解的组件客户端 ID 字符串。因此，这充分考虑了客户端的变化。