Facelets Mimi Opkins CECS493 Fall 2016

Facelets  User interfaces are typically a web application’s most volatile aspect during development, and they are often comprised of brittle code that is difficult to change, making user interfaces expensive to develop.  You can implement flexible UIs with Facelets.

Facelets Tags  Facelets supports a number of tags for templating and other purposes.  Facelets tags can be grouped in these categories:  Including content from other XHTML pages ( ui:include )  Building pages from templates ( ui:composition, ui:decorate, ui:insert, ui:define, ui:param )  Creating custom components without writing Java code ( ui:component, ui:fragment )  Miscellaneous utilities ( ui:debug, ui:remove, ui:repeat )  To use Facelets tags, add the following namespace declaration to your JSF page: xmlns:ui="

Facelets Tags

Templating with Facelets  Most web applications follow a similar pattern, in which all pages have a common layout and styling. For example, it is typical for pages to have the same header, footer, and sidebars.  Facelets lets you encapsulate that commonality in a template, so that you can update the look of your site by making changes to the template, not the individual pages.  Facelets templates encapsulate functionality that is shared by multiple pages, so you don’t have to specify that functionality individually for each page. Encapsulation is the cornerstone of both object-oriented programming, and the well-known DRY (Don’t Repeat Yourself) principle.  My opinion: use CSS for layout

 When you place the ui:debug tag in a Facelets page, a debug component is added to the component tree for that page.  If the user types a hotkey, which by default is CTRL+SHIFT+d, JSF opens a window and displays the state of the component tree and the application’s scoped variables.

Facelets debug output

Examining the component tree and scoped variables  You can click on Component Tree or Scoped Variables, to show the component tree or the application’s scoped variables

Using ui:debug  The ui:debug tag is useful during development, so developers can instantly see the current page’s component tree and the application’s scoped variables  You will probably want to remove the tag in production.  For that reason, we recommend that you put the ui:debug tag in a template, where it is specified in one place, and shared among many views, instead of replicating the tag in each view’s XHTML page.

 Sometimes, to find out which part of a JSF page causes a stack trace, you may want to use the time-honored divide-and-conquer strategy of commenting out parts of the page to isolate the offending component.  Somewhat surprisingly, the XML comments are not useful for this purpose.  For example, if you comment out a button in an XHTML page, like this:

 JSF will process the value expression #{msgs.loginButtonText}, and place the result, as a comment, in the generated HTML page.  Assuming that #{msgs.loginButtonText} evaluates to Log In, you will see the following in the generated HTML page:  If the getLoginButtonText() method throws an exception, then the XML comments don’t help you at all.  Instead, use ui:remove, like this:

Handling Whitespace  The handling of whitespace in Facelets pages can be a bit surprising. By default, whitespace is trimmed around components. For example, consider the tags:  They are separated by whitespace (the newline after the h:outputText and the spaces before h:inputText ).  Facelets won’t turn that whitespace into a text component. This is a good thing—otherwise the tag sequence would not work correctly inside an h:panelGrid.  However, if you have two links in a row, the whitespace handling is unintuitive. The tags  Yield links PreviousNext with no space in between. The remedy is to add a space with a value expression #{' '}.

ui:repeat  The ui:repeat tag repeatedly inserts its body into the page.  Useful for data tables:

ui:repeat Attributes  The ui:repeat tag has several attributes that can make it a better choice than h:dataTable in some situations.  The following attributes let you iterate over a subset of the collection:  offse t is the index at which the iteration starts (default: 0)  step is the difference between successive index values (default: 1)  size is the number of iterations (default: (size of the collection – offset) / step)  For example, if you want to show elements 10, 12, 14, 16, 18 of a collection, you use:

More ui:repeat Attributes - varStatus  The varStatus attribute sets a variable that reports on the iteration status. The iteration status has these properties:  Boolean properties even, odd, first, and last, which are useful for selecting styles.  Integer properties index, begin, step, and end, which give the index of the current iteration and the starting offset, step size, and ending offset.  Note that begin = offset and end = offset + step × size, where offset and size are the attribute values from the ui:repeat tag.

More ui:repeat Attributes - index  The index property can be used for row numbers: