The difference between standard JSF and PrimeFaces components_PrimeFaces Theme Development-QQ阅读男生中文都市网

上QQ阅读APP看书，第一时间看更新

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:

Create a JSF page in your project in a new folder called chapter2 and name the page difference.xhtml.
To create the folder, right-click on the Web Pages folder in the Project navigator and move the mouse over the New item. Select the Folder option, name the folder chapter2, and click on Finish.
Then, right-click on the chapter2 folder, move the mouse over the New item, and select JSF Page. Name the page difference and click on Finish.

Tip

NetBeans will add the appropriate file ending for you. So, if you type in difference.xhtml, the file will actually be named difference.xhtml.xhtml. So you don't need to add the extension explicitly.

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:

The difference between standard JSF and PrimeFaces components

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.

Tip

The names of the CSS rules are the same regardless of which theme is being used. Having predictable CSS rule names makes it very easy to apply themes to a PrimeFaces application.

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.