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!