How does JSF generate the name of the form input field?

Question

Any idea anyone? Is it possible that we specify the name of the form input field? How to go about doing that?

Answer 1

It's generated as formId:fieldId

So, if you had the following:

<h:form id="searchForm">
   <h:inputText id="searchField" ... />
</h:form>

The name (and HTML ID) of the search field would be:

searchForm:searchField

Answer 2

More generally, all JSF components have an ID. If you don't provide one, JSF will create an automatic ID, using the format j_idXXX (XXX is a incremented number).

Some components implement the javax.faces.component.NamingContainer interface, in particular <h:form>. This means that all children of this component will have their ID prefixed by the ID of this container, separated by a ':'. So, in the example:

<h:form id="myForm">
    <h:inputText id="myInput" .../>
</h:form>

the real ID of the input (i.e. the ID of the HTML input object) will be myForm:myInput.

Answer 3

As has been stated, the HTML name and id attributes are generated by the naming containers and based on the application namespace. This prevents collisions when controls are children of repeating controls (like a UIData) or a JSP is rendered twice in one page (like in a portlet environment). The id rendered to the HTML is the clientId.

It is possible to hardcode or build the clientId manually, but this is a very fragile approach. It is better to use the component's getClientId(FacesContext) method; this is what the renderers use.

A bean that can get the clientId for a bound component:

/** Request scope */
public class IdBean implements Serializable {
  private UIComponent mytext;

  public String getClientId() {
    return mytext.getClientId(FacesContext.getCurrentInstance());
  }

  public UIComponent getMytext() { return mytext; }
  public void setMytext(UIComponent mytext) { this.mytext = mytext; }

  public List<String> getRows() {
    List<String> rows = new ArrayList<String>();
    for (int i = 0; i < 10; i++) {
      rows.add("row" + i);
    }
    return rows;
  }
}

The view:

  <f:view>
    <h:form>
      <h:dataTable value="#{idBean.rows}" var="row">
        <h:column>
          <h:outputLabel value="#{row}" />
          <h:inputText binding="#{idBean.mytext}"
            onclick="foo('#{idBean.clientId}');" />
        </h:column>
      </h:dataTable>
    </h:form>
  </f:view>

  <script type="text/javascript">
    function foo(name) {
     alert('You clicked '+name);
    }
  </script>

The mytext control is rendered 10 times, so any code that emits its name must also be a child of the dataTable.

Answer 4

For most pages which contain a view, form and some components, the clientID will be the colon seperated string contained the form-id and component-id. Example:

The input text client ID would be "myForm:myInputText". If you have nested within a subview, then that will be the first thing in the list, for example:

Now the input text client ID would be "mySubview:myForm:myInputText".