x:notebook

Xavax Custom JSF Library

x:notebook

The x:notebook tag provides JSF developers with a familiar tab paradigm which allows the user to select one of several virtual pages of a notebook by clicking on one of the notebook tabs displayed along the top of the page.

The image files and style guide used by x:notebook to render the row of tab labels and selected panel are included in the WEB-INF directory of the jar file. If your application server does not automatically install these in the proper place, you will need to extract them from the jar file and install them manually.

If x:notebook is used in a web page, the header of that page should include the style sheet Notebook.css which is included in the WEB-INF directory of the jar file. Here is an example of how to include the style sheet.

<link title="Style" href="Notebook.css" type="text/css" rel="stylesheet">

Attributes
Name	Required	Request-time	Type	Description
imageRoot	true	false	`java.lang.String`	The root pathname for images required by the notebook renderer.
notebookClass	false	false	`java.lang.String`	The style class for the table element used to render the row of tabs.
selectedPanelClass	false	false	`java.lang.String`	The style class used for the selected panel.
selectedTabClass	false	false	`java.lang.String`	The style class used for the selected tab label.
unselectedTabClass	false	false	`java.lang.String`	The style class used for the unselected tab labels.

Inherited Attributes
Core Attributes	inherited from `AbstractTag`

Example

<x:notebook imageRoot="images">
  <h:panelGroup>
    <f:facet name="label">
      <x:tabLabel>
        <h:outputText value="Name" />
      </x:tabLabel>
    </f:facet>
    ... Name Tab Contents ...
  </h:panelGroup>
  <h:panelGroup>
    <f:facet name="label">
      <x:tabLabel>
        <h:outputText value="Address" />
      </x:tabLabel>
    </f:facet>
    ... Address Tab Contents ...
  </h:panelGroup>
  <h:panelGroup>
    <f:facet name="label">
      <x:tabLabel>
        <h:outputText value="Phone" />
      </x:tabLabel>
    </f:facet>
    ... Phone Tab Contents ...
  </h:panelGroup>
  <h:panelGroup>
    <f:facet name="label">
      <x:tabLabel>
        <h:outputText value="Contacts" />
      </x:tabLabel>
    </f:facet>
    ... Contacts Tab Contents ...
  </h:panelGroup>
</x:notebook imageRoot="images">

The preceeding example produces the following notebook shown with the 'Address' tab selected.

Name

Address

Phone

Contacts

Address