| <!-- |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| --> |
| |
| <ui:composition template="/main.xhtml" |
| xmlns="http://www.w3.org/1999/xhtml" |
| xmlns:tc="http://myfaces.apache.org/tobago/component" |
| xmlns:ui="http://xmlns.jcp.org/jsf/facelets" |
| xmlns:f="http://xmlns.jcp.org/jsf/core" |
| xmlns:demo="http://myfaces.apache.org/tobago/example/demo"> |
| |
| <p>A classic link can be set with the <code class="language-markup"><tc:link/></code> tag. |
| You can also set a link by <code class="language-markup"><tc:button/></code>. |
| The behavior of a link and a button is the same, it differs in the appearance.</p> |
| <p>Tag Library Documentation: |
| <tc:link label="<tc:link/>" image="#{request.contextPath}/image/feather-leaf.png" |
| link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/link.html"/> |
| | |
| <tc:link label="<tc:button/>" image="#{request.contextPath}/image/feather-leaf.png" |
| link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/button.html"/></p> |
| |
| <tc:section label="Basics"> |
| <p>The next two sections show how a link and a button is set.</p> |
| <p>'apache.org' leads to the appropriated website.<br/> |
| 'Disable' show a disabled link/button.<br/> |
| 'Action' use the <code>action</code> attribute to link the component section.<br/> |
| The image leads to www.apache.org.</p> |
| <tc:section label="<tc:link>"> |
| <demo-highlight language="markup"><tc:link label="apache.org" link="https://www.apache.org/"/></demo-highlight> |
| |
| <tc:link id="l0i" label="Alps" link="#{request.contextPath}/image/alps.png"/> |
| | |
| <tc:link id="l0l" label="Intro (link)" link="#{request.contextPath}/content/10-intro/intro.xhtml"/> |
| | |
| <tc:link id="l0o" label="Intro (outcome)" outcome="/content/10-intro/Intro.xhtml"/> |
| | |
| <tc:link id="l1" label="apache.org" link="https://www.apache.org/"/> |
| | |
| <tc:link id="l2" label="Disabled" disabled="true" link="https://www.apache.org/"/> |
| | |
| <tc:link id="l4" label="Action" action="#{buttonLinkController.linkToComponentsRoot}"/> |
| | |
| <tc:link id="l5" label="Link with an image" image="#{request.contextPath}/image/feather-leaf.png" |
| link="https://www.apache.org/"/> |
| </tc:section> |
| <tc:section label="<tc:button>"> |
| <demo-highlight language="markup"><tc:button label="apache.org" link="https://www.apache.org/"/></demo-highlight> |
| <tc:button id="b1" label="apache.org" link="https://www.apache.org/"/> |
| <tc:button id="b2" label="Disabled" disabled="true" link="https://www.apache.org/"/> |
| <tc:button id="b4" label="Action" action="#{buttonLinkController.linkToComponentsRoot}"/> |
| <tc:button id="b5" image="#{request.contextPath}/image/feather-leaf.png" link="https://www.apache.org/"/> |
| </tc:section> |
| </tc:section> |
| |
| <tc:section label="outcome, link, fragment"> |
| <p>Use the <code>outcome</code> attribute for internal links to a viewId.</p> |
| <p>Use the <code>link</code> attribute for links to resources or external URLs.</p> |
| <p>Use the <code>fragment</code> to jump to an ID on the linked site.</p> |
| </tc:section> |
| |
| <tc:section label="Dropdown"> |
| <p>Links and buttons can also be dropdown elements. |
| You can just put a link tag in another link or button tag |
| and set the <code>omit</code> attribute for the parent.</p> |
| |
| <tc:section label="Dropdown Link"> |
| <demo-highlight language="markup"><tc:link label="MusicPlayer" omit="true"> |
| <tc:link image="fa-play-circle" label="Play"/> |
| ... |
| </tc:link></demo-highlight> |
| <tc:link label="MusicPlayer" omit="true"> |
| <tc:link image="fa-play-circle" label="Play"/> |
| <tc:link image="fa-pause-circle" label="Pause"/> |
| <tc:link image="fa-stop-circle" label="Stop"/> |
| <tc:link label="Track"> |
| <tc:link label="1"/> |
| <tc:link label="2"/> |
| <tc:link label="3"/> |
| </tc:link> |
| </tc:link> |
| </tc:section> |
| |
| <tc:section label="Dropdown Button"> |
| <demo-highlight language="markup"><tc:button label="MusicPlayer" omit="true"> |
| <tc:link image="fa-play-circle" label="Play"/> |
| ... |
| </tc:button></demo-highlight> |
| <tc:button label="MusicPlayer" omit="true"> |
| <tc:link image="fa-play-circle" label="Play"/> |
| <tc:link image="fa-pause-circle" label="Pause"/> |
| <tc:link image="fa-stop-circle" label="Stop"/> |
| <tc:link label="Track"> |
| <tc:link label="1"/> |
| <tc:link label="2"/> |
| <tc:link label="3"/> |
| </tc:link> |
| </tc:button> |
| </tc:section> |
| |
| <tc:section label="Dropdown with Radio Buttons and Checkboxes"> |
| <demo-highlight language="markup"><tc:button label="Options" omit="true"> |
| ... |
| <tc:selectOneRadio> |
| <tc:selectItem itemValue="Option 1"/> |
| ... |
| </tc:selectOneRadio> |
| ... |
| </tc:button></demo-highlight> |
| <tc:button label="Options" omit="true"> |
| <tc:link label="Link" omit="true"/> |
| <tc:selectBooleanCheckbox label="must ignore" itemLabel="boolean checkbox"/> |
| <tc:link label="apache.org" link="https://www.apache.org/"/> |
| <tc:selectOneRadio label="ignore"> |
| <tc:selectItem itemValue="Option 1"/> |
| <tc:selectItem itemValue="Option 2" itemImage="#{request.contextPath}/image/feather-leaf.png"/> |
| <tc:selectItem itemValue="Option 3"/> |
| </tc:selectOneRadio> |
| <tc:link label="Link" omit="true"/> |
| <tc:selectManyCheckbox label="ignore"> |
| <tc:selectItem itemValue="Checkbox 1"/> |
| <tc:selectItem itemValue="Checkbox 2" itemImage="#{request.contextPath}/image/feather-leaf.png"/> |
| <tc:selectItem itemValue="Checkbox 3"/> |
| </tc:selectManyCheckbox> |
| <tc:link label="Link" omit="true"/> |
| </tc:button> |
| </tc:section> |
| </tc:section> |
| |
| <tc:section id="markup" label="Markups"> |
| <tc:segmentLayout medium="7seg 5seg"> |
| <tc:box label="Buttons"> |
| <p>Colors can be set with markups. Markup <code>none</code> unset the color.</p> |
| <demo-highlight language="markup"><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"/></demo-highlight> |
| <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"/> |
| <tc:separator/> |
| <p>Colors can also be set with an outline markup.</p> |
| <demo-highlight language="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"/></demo-highlight> |
| <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"/> |
| </tc:box> |
| <tc:box label="Links"> |
| <tc:link label="thin" markup="thin"/> |
| <tc:link label="normal"/> |
| <tc:link label="bold" markup="bold"/> |
| <tc:link label="italic" markup="italic"/> |
| <tc:separator/> |
| <tc:link label="Primary" markup="primary"/> |
| <tc:link label="Secondary" markup="secondary"/> |
| <tc:link label="Success" markup="success"/> |
| <tc:link label="Danger" markup="danger"/> |
| <tc:link label="Warning" markup="warning"/> |
| <tc:link label="Info" markup="info"/> |
| <tc:link label="Light" markup="light"/> |
| <tc:link label="Dark" markup="dark"/> |
| </tc:box> |
| </tc:segmentLayout> |
| </tc:section> |
| |
| <tc:section label="Confirmation"> |
| <p>A confirmation dialog can be added to a link or a button via |
| <code class="language-markup"><f:facet name="confirmation"></code>. |
| The message text is added with <code class="language-markup"><tc:out/></code>.</p> |
| <tc:link id="l6" label="apache.org" link="https://www.apache.org/" confirmation="Are you sure?"/> |
| <tc:button id="b6" label="apache.org" link="https://www.apache.org/"> |
| <f:facet name="confirmation"> |
| <tc:out value="Are you sure?"/> |
| </f:facet> |
| </tc:button> |
| <tc:link id="l7" label="Action" confirmation="Are you sure?"/> |
| <tc:button id="b7" label="Action"> |
| <f:facet name="confirmation"> |
| <tc:out value="Are you sure?"/> |
| </f:facet> |
| </tc:button> |
| </tc:section> |
| |
| <tc:section label="Target"> |
| <p> |
| |
| <span class="#{demo:bootstrapClass('BADGE')} #{demo:bootstrapClass('BADGE_WARNING')}">Todo!</span> |
| The <code class="language-markup">target</code> attribute should be checked with |
| JSF 2.2 Client-Window-Handling. |
| </p> |
| <p>The destination of the link can be set with the <code>target</code> attribute. |
| For example a new window/tab or a specific iframe (<code class="language-markup"><tc:object/></code>).</p> |
| <tc:section label="New Window"> |
| <demo-highlight language="markup"><tc:link label="open https://www.apache.org/ in new window" |
| link="https://www.apache.org/" target="_blank"/></demo-highlight> |
| <p><tc:link label="open https://www.apache.org/ in new window" link="https://www.apache.org/" target="_blank"/> |
| </p> |
| </tc:section> |
| <tc:section label="IFrame"> |
| <p>The iframe is set with <code class="language-markup"><tc:object name="objectframe" .../></code> |
| (see <tc:link |
| label="Object" |
| outcome="/content/20-component/020-output/60-object/Object.xhtml"/>). |
| The value of the <code>target</code> attribute is in this case 'objectframe'.</p> |
| <p><tc:link label="apache.org" link="https://www.apache.org/" target="objectframe"/> |
| | |
| <tc:link label="myfaces.apache.org/tobago" link="https://myfaces.apache.org/tobago/" target="objectframe"/></p> |
| <tc:object id="o1" name="objectframe" src="https://www.apache.org/"> |
| <tc:style width="100%" height="500px"/> |
| </tc:object> |
| </tc:section> |
| </tc:section> |
| </ui:composition> |