How to set the cursor on page opening

Technology: ADF11g
Developed in: JDeveloper 11.1.1.3.0
Browsers tested: Firefox 3.6.13 and Internet explorer 7 (7.0.6002.18005)
Used database schema: HR
Used tables: EMPLOYEES

Summary

In this blog a solution is provided how to set the cursor in a specific field on page opening.

When a page with input fields is created by drag and drop from the data control palette it looks like this:



The user first has to click in a field before he can edit it.

But if we add into the af:document tag an initialFocusId clause referring to the component that should be active and set in that component the clientComponent property then the cursor is in that field on page opening.

In this example we changed:

<af:document id="d1"

title="emp">

To:

<af:document id="d1"

title="emp"

initialFocusId="pt1:it4">

With pt1:it4 is the id of the inputText EmployeeId (id it4) in the page template (id pt1).

We changed the input text employee ID from:

<af:inputText value="#{bindings.EmployeeId.inputValue}"

label="#{bindings.EmployeeId.hints.label}"

required="#{bindings.EmployeeId.hints.mandatory}"

columns="#{bindings.EmployeeId.hints.displayWidth}"

maximumLength="#{bindings.EmployeeId.hints.precision}"

shortDesc="#{bindings.EmployeeId.hints.tooltip}"

id="it4">

<f:validator binding="#{bindings.EmployeeId.validator}"/>

<af:convertNumber groupingUsed="false"

pattern="#{bindings.EmployeeId.format}"/>

</af:inputText>

To:

<af:inputText value="#{bindings.EmployeeId.inputValue}"

label="#{bindings.EmployeeId.hints.label}"

required="#{bindings.EmployeeId.hints.mandatory}"

columns="#{bindings.EmployeeId.hints.displayWidth}"

maximumLength="#{bindings.EmployeeId.hints.precision}"

shortDesc="#{bindings.EmployeeId.hints.tooltip}"

id="it4"

clientComponent="true">

<f:validator binding="#{bindings.EmployeeId.validator}"/>

<af:convertNumber groupingUsed="false"

pattern="#{bindings.EmployeeId.format}"/>

</af:inputText>

Now the page looks on opening like this:



The initialFocus clause can also be conditional.

For example, on creation of a new employee the cursor must be in employee ID, when an existing employee is edit the employee ID is not updatable and the cursor must be in firstname.

When the employee is created the employee ID is blank, when an employee is edited it’s filled. This fact is used to render the inialFocus. Change it to:

<af:document id="d1"

title="emp"

initialFocusId="#{bindings.EmployeeId.inputValue==null?'pt1:it4':'pt1:it2'}">

Add a readOnly clause to the employee ID input text:

<af:inputText value="#{bindings.EmployeeId.inputValue}"

label="#{bindings.EmployeeId.hints.label}"

required="#{bindings.EmployeeId.hints.mandatory}"

columns="#{bindings.EmployeeId.hints.displayWidth}"

maximumLength="#{bindings.EmployeeId.hints.precision}"

shortDesc="#{bindings.EmployeeId.hints.tooltip}"

id="it4"

readOnly="#{bindings.EmployeeId.inputValue!=null}"

clientComponent="true">

<f:validator binding="#{bindings.EmployeeId.validator}"/>

<af:convertNumber groupingUsed="false"

pattern="#{bindings.EmployeeId.format}"/>

</af:inputText>

And set the clientComponent property to true for the first name input text (id it2):

<af:inputText value="#{bindings.FirstName.inputValue}"

label="#{bindings.FirstName.hints.label}"

required="#{bindings.FirstName.hints.mandatory}"

columns="#{bindings.FirstName.hints.displayWidth}"

maximumLength="#{bindings.FirstName.hints.precision}"

shortDesc="#{bindings.FirstName.hints.tooltip}"

id="it2"

clientComponent="true">

<f:validator binding="#{bindings.FirstName.validator}"/>

</af:inputText>

Now the page looks for opening in insert or edit mode like this: