Tuesday Jun 04, 2013

How-to highlight input field content when accessed from auto-tab

A question on the OTN forum has been how to highlight the content of an input field when navigation to it occurs using the auto tab functionality. As a reminder, the "autotab" property of an input field, if set to "true", tabs out of the field that you currently edit when the maximum length of the field entry is reached.

The problem reported on OTN for JDeveloper 11.1.2.4 (and I am sure its the same on other versions of JDeveloper) is that manual tabbing into a next field will highlight the fields content (value) whereas autotab doesn't. To enforce consistent highlighting behavior, you can use JavaScript as shown in the page sample below:

<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <af:document title="AutoTab.jsf" id="d1">
    <af:resource type="javascript">
      function onFocusHandler(inputEvent){
         var textfield = 
             AdfAgent.AGENT.getElementById(inputEvent.getSource().getId()+'::content');
         textfield.select();
     }
    </af:resource>
      <af:form id="f1">
        <af:panelFormLayout id="pfl1">
            <f:facet name="footer"/>
             <af:inputText label="First Name" id="it1" 
                           value="#{viewScope.fieldValues.firstName}" 
                           maximumLength="5" autoTab="true"/>
             <af:inputText label="Last Name" id="it2" 
                           value="#{viewScope.fieldValues.lastname}">
                <af:clientListener method="onFocusHandler" type="focus"/>
             </af:inputText>
          </af:panelFormLayout>
       </af:form>
   </af:document>
</f:view>

The af:clientListener is attached to the input field for which you want to show content highlighting on autotab. Attach the same client listener definition to  all field that should have the content highlighting. Instead of adding the JavaScript to the page, you want to create an external JS library file and link it from the page as the JS code above is reusable.

Note that the use of "'::content" in the JavaScript uses knowledge about the way component IDs are rendered at runtime in ADF Faces. If component rendering changes in a future release (you never know) then your code will break at this point and needs to be corrected. So heads-up on this risk (though should be a small one). To the time of writing this lines there is no other API (option) available to get to the HTML field handle in ADF Faces.

Also note the use of AdfAgent.AGENT.getElementById, which is a performant wrapper API in ADF Faces around the document.findElementById function of the Browser DOM. As a rule of thumb you should always work with ADF Faces JS APIs and don't directly reach out to the DOM yourself.

Wednesday Jan 18, 2012

How to access selected rows in an af:selectManyChoice component

To create an ADF bound select many choice component, drag a collection from the Data Controls panel to a JSF page. In the opened context menu, choose Multiple Selection | ADF Select Many Choice.

This generates the page source code similar to this:

<af:selectManyChoice value="#{bindings.allDepartments.inputValue}"  
                     label="#{bindings.allDepartments.label}"
                     id="smc1">
  <f:selectItems value="#{bindings.allDepartments.items}" id="si1"/>
</af:selectManyChoice>

Note that the value property of the SelectManyChoice component pints to the sane list binding as the f:selectItems tag. To access the user selected values, you use a managed bean to access the ADF binding layer.

If you are only interested in the selected values, then you use code like shown below. Note that the sample I built used JDeveloper 11g R2, which is why the ID type is Integer. Doing the same with JDeveloper 11g R1 would require the casting to oracle.jbo.domain.Number for ID columns.

public String cb1_action() {
  BindingContext bctx = BindingContext.getCurrent();
  BindingContainer bindings = bctx.getCurrentBindingsEntry();
  JUCtrlListBinding allDepartsmentList = 
           (JUCtrlListBinding) bindings.get("allDepartments");
    Object[] selVals = allDepartsmentList.getSelectedValues();
    for (int i = 0; i < selVals.length; i++) {
      Integer val = (Integer)selVals[i];
      //...
    }
   return null;
}

However, what if you wanted to know more about the selected list value; for example the value of another attribute of the selected row? In this case you use similar code, with a little change though. Instead of calling getSelectedValues(), the call is to getSelectedIndices().


public String cb1_action() {
  BindingContext bctx = BindingContext.getCurrent();
  BindingContainer bindings = bctx.getCurrentBindingsEntry();
  JUCtrlListBinding allDepartsmentList = 
          (JUCtrlListBinding) bindings.get("allDepartments");
  int[] selVals = allDepartsmentList.getSelectedIndices();
  for (int indx : selVals ) {
    Row rw = allDepartsmentList.getRowAtRangeIndex(indx);
    //... do your stuff
  }
  return null;
}

About

The Oracle JDeveloper forum ranks in the Top 5 of the most active forums on the Oracle Technology Network (OTN).



The OTN Harvest blog is a summary of selected topics posted on the OTN Oracle JDeveloper forum.



It is an effort to turn knowledge exchange into an interesting read for developers who enjoy little nuggets of wisdom





Frank Nimphius

Search

Archives
« July 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  
       
Today