X

The blog for hints & tips about Oracle Application Development Framework and Mobile Application Framework

How-to notify the server when user tabs out of input field

Frank Nimphius
Master Principal Product Manager

Though the use case covered in this section is more of an
individual problem than of generic interest, the code involved to implement the
solution may be useful. First the use case: For an input text component, a
notification should be sent to the server when the user steps out of the field
using mouse or the keyboard navigation. The notification should be sent no
matter if users changed the field content (in which case a value change
listener would have done) or not (in which case a value change listener is not
enough). The solution to this problem is to use an af:clientListener tag on the input tag
component to invoke a JavaScript function when the user leaves the field (The
component event for this is "blur").

Using an af:serverListener
tag on the input text component then allows to notify the server from the
JavaScript function.

<f:view> <af:document id="d1"> 
    <af:resource type="javascript">
       function onBlurTxtField(evt){
          var source = evt.getSource();
          var custEvent = new AdfCustomEvent(source,"onBlurNotifyServer",
                       {submittedValue : source.getSubmittedValue(),
                       
localValue : source.getValue()}
                        ,true);
          custEvent.queue();
      }  </af:resource>  <af:form id="f1">    <af:inputText label="Label 1" id="it1">
        <af:clientListener   method="onBlurTxtField" type="blur"/>
        <af:serverListener   type="onBlurNotifyServer"                            method="#{TxtHelper.onBlurNotify}"/>

     </af:inputText>    <af:inputText label="Label 2" id="it2"/>
   </af:form>
  </af:document>
</f:view>

The page code above sends a custom event to the server
whenever a user leaves the input text field. The payload sent to the server
contains the submitted and the local component value. Note that in the above
sample --- as we will see next --- the payload is not really required because the
same information can be accessed from the component instance in the referenced
managed bean method.

<af:serverListener type="onBlurNotifyServer"                  method="#{TxtHelper.onBlurNotify}"/>

The managed bean method receives a single argument of type
ClienEvent:

public void onBlurNotify(ClientEvent clientEvent) {
   // get a hold of the input text component
   RichInputText inputTxt =  RichInputText) clientEvent.getComponent();
   //do some work on it here (e.g. manipulating its readOnly state)
   //…
   //Get access to the payload
   Map  parameters = clientEvent.getParameters();
  System.out.println("SubmittedValue = "+parameters.get("submittedValue"));
  System.out.println("LocalValue =  +parameters.get("localValue"));
}

As mentioned, the use case may not be of generic interest. However,
the way you work with the client and server listener for sure made sense to
publish as an example.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.