The difference between standard JSF and PrimeFaces components

Standard JSF components such as h:inputText result in simple HTML being emitted into the page. To demonstrate what I mean, you need to perform the following steps:

We then add the following inside the h:body tag:

<h:form id="mainform">
  <h:panelGrid id="maintable" columns="2">
  <h:outputLabel id="simpleLabel1" value="A standard inputText component:" for="standardInput"/>
  <h:inputText id="standardInput"/>
  <p:outputLabel id="pfLabel2" value="A PrimeFaces inputText component:" for="pfInput"/>
  <p:inputText id="pfInput"/>
  </h:panelGrid>
</h:form>

NetBeans will give you a hint indicating that you need to add the PrimeFaces namespace declaration to the page by displaying a small red lamp icon to the left of the affected line. By clicking on the lamp icon, NetBeans prompts you to add the appropriate namespace.

Now, run the project and type http://localhost:8080/PFThemes/chapter2/difference.xhtml in the browser that NetBeans opens.

This is what you will see:

As you can see, the standard JSF components cause standard html to be added to the page. The PrimeFaces components do the same, but they look different. This is because PrimeFaces uses a default theme, which uses CSS to set the look and feel of the components in the browser.

If you use Google Chrome to view the page, you can also inspect the elements that you see on the page by right-clicking on one of them, such as the standard inputText component, and clicking on the Inspect element menu option.

This is how the HTML for the h:inputText field looks:

<input id="mainform:standardInput" type="text" name="mainform:standardInput">

Apart from the ID that JSF creates for us based on the parent component IDs, there is nothing unusual about it.

Now, do the same for the lower p:outputLabel, element. You should see the following HTML:

<label id="mainform:pfLabel2" class="ui-outputlabel ui-widget" for="mainform:pfInput">A PrimeFaces inputText component:</label>

Look at the class attribute; there are some CSS classes added. It is these CSS rules that PrimeFaces uses not only for structural settings, dimensions, and so on, but also to set the way they appear visually. It is here that we begin to see how a PrimeFaces theme works.

Now, let's inspect the p:inputText field:

<input id="mainform:pfInput" name="mainform:pfInput" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false">

Here, we see that not only does PrimeFaces set the CSS rules in the class attribute, and quite a few of them too; but it also adds things like the role and aria attributes as well. The use of the role and aria attributes is important for accessibility. Screen readers, used by people with impaired vision, understand these attributes and can read them out so that users know that there is a component that they can interact with. This is another very strong point in PrimeFaces' favor.