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 are set.

'apache.org' leads to the appropriate website.
'Disable' shows a disabled link/button.
'Action' uses the action attribute to navigate to 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 unsets 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="..." confirmation="..." ... /> apache.org

<tc:button link="..." ...> with confirmation facet apache.org

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

<tc:button link="..." ...> with confirmation 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