Adding components to Facelet pages

After you have a Facelet page, you can create page content by dragging UI components onto your web page from the palette.

Before you begin

  1. Create a Facelet-enabled web project.
  2. Create a Facelet web page.

About this task

After the XHTML file opens in the editor, the Standard Faces Components drawer opens in the Palette view next to the new page. The Facelet Tags drawer in the Palette view contains all of the Facelet UI components that you can drag and drop onto your XHTML file. If you do not see the palette, click Window > Show View > Basic > Palette.
Standard Faces Components drawer
Facelet Tags drawer
Table 1. Standard Faces Components drawer
Component Tag Description
Data Table <h:dataTable> Creates a table of data in which the rows correspond to data records and the columns correspond to fields or categories. Features include paging controls, headers and footers, and support for row selection and actions.
Panel - Group <h:panelGroup> Groups other components (such as links, buttons, sub-panels, and separators) without introducing any additional layout. Use this component when an action needs to be performed on multiple components at once, for example an AJAX update.
Panel - Grid <h:panelGrid> Creates an HTML table used to lay out other components (such as hyperlinks, buttons, and separators) in a grid.
Button - Navigate <h:button> Creates an button that generates a GET request when the button is clicked. A navigation rule can be used to determine the destination of the request.
Button - Command <h:commandButton> Creates a push button that may have text and/or an image in it. If the button is of type submit, clicking the button submits the form and passes a command (action) to the server. The button may run an action.
Link - Navigate <h:link> Creates an anchor that generates a GET request when the link is clicked. A navigation rule can be used to determine the link destination.
Link - Command <h:commandLink> Inserts a link that runs an action by submitting a form
Link <h:outputLink> Displays a hyperlink that goes to a specified URL.
Input <h:inputText> Creates a single-line input control used to input text or formatted text such as a number, date, time, or formatted string. The control can be augmented with various kinds of input assist components including keystroke management, typeahead support and helper buttons. You can create an input field for the following types of data:
  • String
  • Number
  • Date/Time
Input - Text Area <h:inputTextarea> Creates a multi-line input control used to input lengthy unformatted text.
Input - Password <h:inputSecret> Adds a password input field to the page. Text entered into the field is echoed back to the user in a modified form (usually as asterisks) and the browser tries to protect the password from being accessible as clear text to other programs.
Check Box <h:selectBooleanCheckbox> Creates an unlabeled boolean check box.
Check Box Group <h:selectManyCheckbox> Creates a set of labelled check boxes. A user may select zero or more choices from the list of buttons.
Radio Button Group <h:selectOneRadio> Creates a group of labelled radio buttons. A user may select one choice from the list of buttons.
Combo Box <h:selectOneMenu> Displays a drop-down combo box from which the user chooses one item. The combo box input field is not directly editable.
List Box - Single Select <h:selectOneListbox> Inserts a list box in which the user selects one item.
List Box - Multiple Select <h:selectManyListbox> Inserts a list box in which the user can select multiple items.
Output <h:outputText> Creates output text that cannot be modified by the user. The text can be static or bound to a data source. Output components can display data from a data source as well as to display static text within most other Faces components (for example, as a label for an input field).
When you add an output component, choose one of the following formats on the Properties view for the Output component:
  • String
  • Number
  • Date/Time
Output - Formatted Text <h:outputFormat> Outputs a formatted message to the page. The message can be a combination of static text and dynamic data that comes from a data storage.
Image <h:graphicImageEx> Displays an image on the page. Can display an image from a data source as well.
Label <h:outputLabel> Inserts an accessibility output label.
Display Error <h:message> Inserts error text that is conditionally displayed. Errors are associated with a specific component.
Display Errors <h:messages> Inserts error messages that are conditionally displayed when an error has occurred on the page. Displays errors for entire page.
Stylesheet <h:outputStylesheet> Adds a link to a stylesheet.
Script <h:outputScript> Adds a reference to a JavaScript file.
Metadata <f:metadata> Holds view parameters (<f:viewParam>which take a parameter from the query string and store it in a variable. View parameters support bookmarking Facelet views with GET requests.
Table 2. Facelet Tags drawer
Component Tag Description
Component <ui:component> Inserts a new UIComponent instance into a JSF component tree as the root of all the child components and fragments. Components and fragments outside of the tag are not visualized by the Facelets view handler. Components and fragments inside of the tag are visualized by the view handler.
Fragment <ui:fragment> Inserts a new UIComponent instance into a JSF component tree as the root of all the child components and fragments. Components and fragments outside of the tag are not visualized by the Facelets view handler. Components and fragments inside of the tag are visualized by the view handler.
Composition <ui:composition> Wraps content that is included in another Facelet. Contents outside of the tag are not visualized by the Facelets view handler. Contents inside of the tag are visualized by the view handler.
Decorate <ui:decorate> Decorates content included from another Facelet. Content outside of the decorate tag is displayed by the Facelets view handler. Content within the decorate tag are passed to the associated template.
Define <ui:define> Defines the named content that is inserted into a template.
Include <ui:include> Includes a template as part of the current page.
Insert <ui:insert> Declares a named content element that is defined by another Facelet.
Param <ui:param> Passes objects as named variables between Facelet pages. This tag can be a child of <ui:composition>, <ui:decorate> or <ui:include>.
Debug <ui:debug> Displays debugging information about the JSF component tree and scoped variables in your browser during testing. In the Properties view, you can define the hot key to use along with CTRL + Shift to open the debug window.
Remove <ui:remove> Removes blocks of XML content from a Facelet at compilation time. This tag has no attributes. It is tag is often used in conjunction with the jsfc attribute to indicate that the tag should be removed from the rendered page.
Tip: The remove tag does not have any attributes; therefore, the Properties view is empty.
Repeat <ui:repeat> Iterates over a collection of data exposed to a Facelet page as a value-binding EL expression.
Insert Children <composite:insertChildren> Used in composite components. Allows any child components or template text within the composite component tag in the Web page using the component to be inserted into the composite component at the point where this tag is placed. This tag should not be used more than once in the composite component.
Insert Facet <composite:insertFacet> Used in composite components. Inserts or moves the facet defined within the composite component tag in the Web page using the component, to the parent tag of where this tag is placed. Place a insertFacet tag where you would regularly put an f:facet tag under one of the composite's children.
Render Facet <composite:renderFacet> Used in composite components. Displays the facet defined in the composite component body in the current location. Place this tag where you want to put a facet inside of the composite itself, for example, headers or footers.
Other JSF 2.0 tags are not available on the palette, but can be added in the Source pane or by editing components in the Properties view:
Table 3. Other JSF 2.0 tags
Tag Description Adding the tag
<f:ajax> Enables Ajax behavior. In the Properties view, click the Ajax tab for a component and select the Support Ajax check box.
<f:event> Adds a system event listener to a component. In the Quick Edit view, select one of the following event types and add a listener:
  • preRenderComponent
  • preRenderView
  • postAddToView
  • preValidate
  • postValidate
<f:validateBean> Specifies validation groups for the Bean Validation Framework In the Properties view, after adding a view parameter, on the Validation tab, select Use bean validation . Specify validation groups used when validating a particular component. A validation group is a fully-qualified class name. You can also insert this tag from the Validation tab for all other <h:input> and <h:select> tags.
<f:validateRegEx> Validates the value of an input component against a regular expression pattern. In the Properties view, after adding a view parameter, on the Validation tab, in the Constraint list, select the type of characters that the input component allows.
<f:validateRequired> Sets the required attribute of the parent component. In the Properties view, after adding a view parameter, on the Validation tab, select Value is required . You can also insert this tag from the Validation tab for all other <h:input> and <h:select> tags.
<f:viewParam> Maps incoming request parameter values to components within the view. Drag a Metadata component from the Standard Faces Component drawer to your page. In the Properties view, select Add to add a view parameter.
For more information about Facelet tags, see http://java.sun.com/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/index.html.
  • Adding system event listeners to Facelet components
    You can define actions for specific events for Facelet components.
  • Adding navigation to Facelet components
    To navigate from one Facelet page to another in the same project, you can use implicit navigation or you can set navigation rules. Navigation rules are the rules you set for which page to go to when a certain outcome occurs on the original page. For example, if a user receives an error message while trying to clickSubmit, a navigation rule can automatically navigate to a new page that tells the user how to fix the problem.
  • Adding parameters to Facelet components
    You can add parameters to Facelet components. Parameters are name-value pairs that you can use to pass variables or text between Facelet pages or templates.
  • Adding flash scope variables (JSF 2.0)
    You can pass temporary objects between views using flash scope variables. Flash scope is useful if you want to enter data on a page and have the data available for the next request, but not for subsequent requests.

What to do next

After you add the component to your page, you can configure the component properties in the Properties view. To open the Properties view, click Window > Show View > Properties.
Feedback