JSF 2.0 dynamically controlling which values get posted back based on CSS

Question

I have this form with ~170 individual text boxes with values in a session scoped bean. There is a requirement to only submit values when the component has a certain CSS class.

The way I originally approached this was to create a PhaseListener at the UPDATE_MODEL_VALUES and test the CSS class there. If the class was the affected class I set the value of the component to null. Then on the front end, I switched the class on focus using a generic JavaScript method. This meant in terms of changes to each componenet I only needed to add:

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

which is kind of nice given how many components I need to change.

This was working fine until I re-factored my e form to use multiple h form tags. Now the CSSclass is switching on the front end, but this change is not being saved. The phase listener is getting the old class.

I'm thinking this is obviously related to me switching the class in jQuery/javascript. What I am wondering is:

1. Is there a better way to do this arachatectually? One that preferably means I don't have to modify 170+ componenets?
2. If I do have to continue with using Javascript to switch the class, is there a way I can post that change back from javascript?

Sorry if this is an obvious question, I'm still a little green with the JSF lifecycle.

I'm using JSF 2.0 MyFaces

For reference here is an example of a component on my form that needs to be filtered:

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

where "examfieldgrey" is the class I test for when determining if I'm going to block a component.

And the whiteField method:

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

And my phase listener before phase method where I filter:

// 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--;
}

Ignore the print functions, they don't do anything ;)

Thanks guys!

Edit

This is a copy operation so the backing bean has values in it after construction of the bean. The option of using the primefaces selector is great if I hit submit and the backing bean is not already populated. But I'm not sure if it will be able to actually clear out those values.

One other thing to note is that I am referencing values inside an instance of my form object. I don't know if that helps but it wasn't present in my original post.

Answer 1

I was able to get this one solved by creating a map of boolean values for each field on the form with string keys that are the ids of the fields. Each value represented weather or not to copy the field. I update this value using ajax on blur. And I set the CSS class to be based on the boolean value in the map for that field.

Rendering didn't work out so well. Originally I was doing this all on focus but it quickly became apparent that attempting to rendering a textbox on focus would actually lose focus to the textbox. So, on focus I just call a quick js function to switch the class as I had been doing originally.

Since the css class is chosen based on the map on the front end, it gets updated before the phase listener is called and the components get filtered properly.

Thanks for the help BalusC!

Answer 2

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

If you happen to use PrimeFaces already or are open to use it, since the latest 3.3 version you can use the new @() selector syntax which accepts jQuery based CSS selectors in process and update attributes of PrimeFaces ajax components (which are equivalent to execute and render attributes of JSF standard <f:ajax> component).

For example

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

or

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

will instruct JSF to process only the HTML input elements having classname of foo.

---

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

That's because you didn't keep JSF component tree in the server side in sync with the HTML DOM tree in the client side. You're making changes in the client side only without notifying JSF about this. CSS classes are not been sent as a request parameter to the server side, only the HTML form input values are. You basically need to change the CSS classes by JSF instead of by JS/jQuery so that the change is also reflected in the JSF component tree.

Implementing this is however not exactly trivial and potentially wasteful. Easiest is thus to use PrimeFaces with its @() selector support. This selector is evaluated in the client side and converted to a string of JSF-understandable component client IDs matching the selector. This thus takes client side changes fully into account.