Set Initial focus on any ADF UI component

Often developers requires focus on a particular UI component on page load. ADF provides out-of-the-box feature for this problem. All you need is the exact component id of that element.
In this example I will show you how to move cursor to the input box used as a username input. This component was inside a bounded-taskflow exposed in a jspx region.
First the jspx code .

 <af:document id="d1" title="#{sessionScope.pageTitle}" 
partialTriggers="r1" initialFocusId="r1:0:sf1:it1">

This is our login module and now will try to find out its id generated on the webpage by developer tool.

We can now see the actual id of the UI component exposed in browser. It is the same ID we need to put in 

initialFocusId.

Precaution while using javascript in a page fragment or in ADF region

Don't include javascript in the page Fragment just after the jsp:root tag . It will cause undesired effects if this page is navigated from somewhere else.
This will be a wrong approach for a jsff page
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:f="http://java.sun.com/jsf/core">
  <af:resource type="javascript" source="/js/custom.js"/>

The right approach is to include this resource component inside a  container component . Like this

<af:panelFormLayout>
  <af:resource type="javascript" source="/js/custom.js"/>
</af:panelFormLayout> 

ADF javaScript / JS Hacks

1. Using JS in a jsff page
jsff doesn't usually load the js when the af:resource tag is embeded just after jsp:root tag.
To make it work add af:resource inside a formLayout or panelGroupLayout.
            <af:panelGroupLayout>
                      <af:resource type="javascript">
                           function fnc(evt){ ... }
                      </af:resource>
            </af:panelGroupLayout>
more detailed info can be found at
https://blogs.oracle.com/jdevotnharvest/entry/gotcha_when_using_javascript_in