Immediate, Autosubmit, and Validation

Often users understand how to use immediate on buttons and form controls to avoid validation, however they sometimes have problems using immediate and autoSubmit. So what's different about using autoSubmit and immediate?

Let's start at the beginning, components that implement the interfaces below support an attribute called "immediate". In both cases processing is moved up to the APPLY REQUEST VALUES phase.

• ActionSource: (an example is commandButton.) An ActionEvent is normally delivered in INVOKE APPLICATION. When immediate is true the action event delivery is moved up to the APPLY REQUEST VALUES phase. An ActionEvent always results in renderResponse() being called implicitly in the default ActionListener (Application.getActionListener()), whether or not an "action" is attached.
• EditableValueHolder: the validation and valueChangeEvent usually take place in the PROCESS VALIDATIONS phase. When immediate is true the component's value will be converted and validated in the APPLY REQUEST VALUES phase, and ValueChangeEvents will be delivered in that phase as well.

So in JSF there's a default actionListener which calls renderResponse. That means that when a button is immediate renderResponse will be called during apply request values, and the validation phase will be skipped.

Let's look at the following example, note that when you press submit you don't get a required field error:

<af:selectBooleanRadio valueChangeListener="#{validate.toggle}" id="show3"
                       text="Show" group="group3"
                       value="#{validate.show3}" immediate="true"/>
<af:selectBooleanRadio id="hide3" text="Hide" group="group3"
                       value="#{validate.hide3}" immediate="true"/>
<af:panelGroupLayout partialTriggers="cb2" id="pgl8">
  <af:inputText label="Required Field" required="true"
                rendered="#{validate.show3}" id="it3"/>
</af:panelGroupLayout>
<af:commandButton text="submit" id="cb2" immediate="true"/>

and in the validate bean here's the toggle method

  
  public void toggle(ValueChangeEvent vce)
  {
    setShow3(Boolean.TRUE.equals(vce.getNewValue()));
  }

Adf Faces adds the concept of "autoSubmit" to form controls, when "autoSubmit" is true the component will automatically submit when the value is changed. When people combine autoSubmit and immediate on a form control, they often expect to skip the validation phase like they would if they had used an immediate button, but there is no default listener for valueChangeEvents.

You might think you can just change the jspx to this without changing the toggle method.

<af:selectBooleanRadio autoSubmit="true"
                       valueChangeListener="#{validate.toggle}" id="show3"
                       text="Show" group="group3" value="#{validate.show3}"
                       immediate="true"/>
<af:selectBooleanRadio autoSubmit="true" id="hide3" text="Hide" group="group3"
                       value="#{validate.hide3}" immediate="true"/>
<af:panelGroupLayout partialTriggers="show3 hide3" id="pgl8">
  <af:inputText label="Required Field" required="true"
                rendered="#{validate.show3}" id="it3"/>
</af:panelGroupLayout>

However you also have to change the toggle method to call FacesContext.renderResponse, like so:

  
  public void toggle(ValueChangeEvent vce)
  {
    setShow3(Boolean.TRUE.equals(vce.getNewValue()));
    FacesContext.getCurrentInstance().renderResponse();
  }

Clearing Properties Set on the Client in ADF Faces

Oracle Adf Faces is based on JSF, which has a server-side component model. One of the things ADF Faces adds is a component model on the client. This means you can get/set component attributes on the client using javascript.

When you set a value on the client, that value is actually sent to the server and set on the component, so that when it is rerendered the new value will be shown. Sometimes this isn't the behavior a user is expecting. This blog will suggest some coding workarounds.

Let's look at an example. An ADF Faces inputText component has a 'changed' attribute. When the 'changed' attribute is true, a blue circle is shown to the left of the label, indicating that the value has changed. Here's what an input looks like when 'changed' is set to true:



So let's say I want to show the changed indicator as soon as the user changes the value. Then when I save the page I re-render, the changed indicator should not be shown since the value has now been saved. You might start with a page like the one below. In this code we are listening for a valueChangeEvent on the client, and when we get it we set 'changed' to true using javascript.

<?xml version='1.0' encoding='utf-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich" version="1.2">
  <jsp:directive.page contentType="text/html;charset=utf-8"/>
  <f:view>
    <af:document id="d1" inlineStyle="padding:20px">
      <af:form>
        <af:resource type="javascript">
          function changed(event) {
              var inputComponent = event.getSource();
              inputComponent.setChanged(true);
          }
        </af:resource>
        <af:inputText id="it" label="label">
          <af:clientListener method="changed" type="valueChange"/>
        </af:inputText>
        <af:commandButton text="Submit"/>
      </af:form>
    </af:document>
  </f:view>
</jsp:root> 

If you run this page in Jdev 11.1.1.2.0 you'll find that you can enter a value in the input, tab out, and the changed indicator does in fact show up. So we're done, right? Well not quite, because you'll also find that when you hit submit the changed indicator does not disappear like we want it to.

Why is the value of changed saved? Under the covers client side convenience setters like setChanged() are really calling AdfUIComponent.setProperty. The doc for setProperty says "Changing the value of a property supported by the component will normally result in the new property value being synchronized with the server automatically." In other words when you call setProperty on the client, the new property value will be sent to the server, and the new value is saved on the component. This means the component will rerender based on the new attribute value. In our example this means that when we submit and the component is rerendered it still thinks changed is true, and thus the blue changed icon is still visible.

When is the new value sent to the server? The new value will be sent to the server the next time there's traffic to the server. In some cases that happens right away, in other cases not.

So what follows are some coding alternatives to consider. Note that depending on how your app is written, some of these may work better than others if validation fails on the server.

Coding Alternative 1

The first coding alternative moves the logic to the server. In this example:

• in the input tag bind changed to a request scoped value
• in the input tag set autoSubmit to true
• in the valueChangeListener for the input component
  • set the request scoped value that the 'changed' attribute is bound to to true
  • call context.renderResponse
  • set the input component as a partial target so that the input component rerenders itself.

<?xml version='1.0' encoding='utf-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich" version="1.2">
  <jsp:directive.page contentType="text/html;charset=utf-8"/>
  <f:view>
    <af:document id="d1" inlineStyle="padding:20px">
      <af:form>
        <af:inputText label="label"
                      autoSubmit="true"
                      changed="#{test.changed}"
                      valueChangeListener="#{test.valueChange}"/>
        <af:commandButton text="Submit" />
      </af:form>
    </af:document>
  </f:view>
</jsp:root> 

And the test backing bean code, which is request scope looks like:

import javax.faces.event.ValueChangeEvent;
import oracle.adf.view.rich.context.AdfFacesContext;

public class TestBean {
    public TestBean() {}
    
    public void valueChange(ValueChangeEvent valueChangeEvent) 
    {
      setChanged(true);
      AdfFacesContext adfFacesContext = AdfFacesContext.getCurrentInstance();
      adfFacesContext.addPartialTarget(valueChangeEvent.getComponent());   
      FacesContext.getCurrentInstance().renderResponse();
    }
    
    public void setChanged(boolean changed) 
    {
        _changed = changed;
    }

    public boolean isChanged() 
    {
        return _changed;
    }    
    private boolean _changed;
}

Coding Alternative 2

Coding alternative 1 relies on having autoSubmit and a valueChangeListener. In this particular example that works, but in other examples you may not have an event that is going to the server. In those cases you might want to use a serverListener, here's the example:

<?xml version='1.0' encoding='utf-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich" version="1.2">
  <jsp:directive.page contentType="text/html;charset=utf-8"/>
  <f:view>
    <af:document id="d1" inlineStyle="padding:20px">
      <af:form>
        <af:resource type="javascript">
          function changed(event) 
          {
            var inputComponent = event.getSource();
            AdfCustomEvent.queue(inputComponent, "myCustomEvent", null, true);
          }
        </af:resource>
        <af:inputText label="label" changed="#{test2.changed}">
          <af:serverListener type="myCustomEvent"
                             method="#{test2.doCustomEvent}"/>
          <af:clientListener method="changed" type="valueChange"/>
        </af:inputText>
        <af:commandButton text="Submit"/>
      </af:form>
    </af:document>
  </f:view>
</jsp:root> 

And the test backing bean code, which is request scope looks like:

package test;

import javax.faces.context.FacesContext;

import oracle.adf.view.rich.context.AdfFacesContext;
import oracle.adf.view.rich.render.ClientEvent;

public class Test2Bean
{
  public Test2Bean()
  {
  }

  public void doCustomEvent(ClientEvent event)
  {
    setChanged(true);
    AdfFacesContext adfFacesContext = AdfFacesContext.getCurrentInstance();
    adfFacesContext.addPartialTarget(event.getComponent()); 
    FacesContext.getCurrentInstance().renderResponse();
  }

  public void setChanged(boolean changed)
  {
    _changed = changed;
  }

  public boolean isChanged()
  {
    return _changed;
  }
  private boolean _changed;

}

Coding Alternative 3

Another option is to call setChanged on the client, which will cause the changed attribute to be set to true on the server, but then we will set changed back to false in the submit button's action listener. Here's the code:

<?xml version='1.0' encoding='utf-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich" version="1.2">
  <jsp:directive.page contentType="text/html;charset=utf-8"/>
  <f:view>
    <af:document id="d1" inlineStyle="padding:20px">
      <af:form>
        <af:resource type="javascript">
          function changed(event) {
              var inputComponent = event.getSource();
              inputComponent.setChanged(true);
          }
        </af:resource>
        <af:inputText binding="#{test3.input}" label="label">
          <af:clientListener method="changed" type="valueChange"/>
        </af:inputText>
        <af:commandButton text="Submit" actionListener="#{test3.clear}"/>
      </af:form>
    </af:document>
  </f:view>
</jsp:root> 

And the test backing bean code, which is request scope looks like:

package test;

import javax.faces.event.ActionEvent;

import oracle.adf.view.rich.component.rich.input.RichInputText;

public class Test3Bean
{
  public Test3Bean()
  {
  }
  
  public void clear(ActionEvent actionEvent)
  {
    _input.setChanged(false);
  }

  public void setInput(RichInputText input)
  {
    _input = input;
  }

  public RichInputText getInput()
  {
    return _input;
  }  
  
  private RichInputText _input;
}