Button and Link

A classic link can be set with the <tc:link/> tag. You can also set a link by <tc:button/>. The behavior of a link and a button is the same, it differs in the appearance.

Tag Library Documentation: <tc:link/> | <tc:button/>

Basics

The next two sections show how a link and a button is set.

'apache.org' leads to the appropriated website.
'Disable' show a disabled link/button.
'Action' use the action attribute to link the component section.
The image leads to www.apache.org.

<tc:link>

<tc:link label="apache.org" link="https://www.apache.org/"/>

Alps |

Intro (link) |

Intro (outcome) |

apache.org | | |

Link with an image

<tc:button>

<tc:button label="apache.org" link="https://www.apache.org/"/>

apache.org

outcome, link, fragment

Use the outcome attribute for internal links to a viewId.

Use the link attribute for links to resources or external URLs.

Use the fragment to jump to an ID on the linked site.

Dropdown

Links and buttons can also be dropdown elements. You can just put a link tag in another link or button tag and set the omit attribute for the parent.

Dropdown Link

<tc:link label="MusicPlayer" omit="true">
  <tc:link image="bi-play-circle" label="Play"/>
  ...
</tc:link>

Dropdown Button

<tc:button label="MusicPlayer" omit="true">
  <tc:link image="bi-play-circle" label="Play"/>
  ...
</tc:button>

For a dropdown menu without a toggle icon, use markup hideToggleIcon

Dropdown with Radio Buttons and Checkboxes

<tc:button label="Options" omit="true">
  ...
  <tc:selectOneRadio>
    <tc:selectItem itemValue="Option 1"/>
    ...
  </tc:selectOneRadio>
  ...
</tc:button>

Markups

Buttons

Colors can be set with markups. Markup none unset the color.

<tc:button label="Primary" markup="primary"/>
<tc:button label="Secondary" markup="secondary"/>
<tc:button label="Success" markup="success"/>
<tc:button label="Danger" markup="danger"/>
<tc:button label="Warning" markup="warning"/>
<tc:button label="Info" markup="info"/>
<tc:button label="Light" markup="light"/>
<tc:button label="Dark" markup="dark"/>
<tc:button label="None" markup="none"/>

Colors can also be set with an outline markup.

<tc:button label="Primary" markup="outlinePrimary"/>
<tc:button label="Secondary" markup="outlineSecondary"/>
<tc:button label="Success" markup="outlineSuccess"/>
<tc:button label="Danger" markup="outlineDanger"/>
<tc:button label="Warning" markup="outlineWarning"/>
<tc:button label="Info" markup="outlineInfo"/>
<tc:button label="Light" markup="outlineLight"/>
<tc:button label="Dark" markup="outlineDark"/>

The size can be changed with markup large or small.

Confirmation

A confirmation dialog can be added to a link or a button via <f:facet name="confirmation">. The message text is added with <tc:out/>.

<tc:link link="..." confimation="..." ... />

apache.org

<tc:button link="..." ...>

with confimation facet

apache.org

<tc:link confimation="..." ... />

<tc:button link="..." ...>

with confimation facet

Target

Todo! The target attribute should be checked with JSF 2.2 Client-Window-Handling.

The destination of the link can be set with the target attribute. For example a new window/tab or a specific iframe ( <tc:object/>).

New Window

<tc:link label="open https://www.apache.org/ in new window"
        link="https://www.apache.org/" target="_blank"/>

open https://www.apache.org/ in new window

IFrame

The iframe is set with <tc:object name="objectframe" .../> (see Object). The value of the target attribute is in this case 'objectframe'.

apache.org | myfaces.apache.org/tobago

Menu

Button and Link

Basics

<tc:link>

<tc:button>

outcome, link, fragment

Dropdown

Dropdown Link

Dropdown Button

Dropdown with Radio Buttons and Checkboxes

Markups

Buttons

Links

Confirmation

Target

New Window

IFrame