Link & Button <tc:link> <tc:button>

<!--
 * 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://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:demo="http://myfaces.apache.org/tobago/example/demo">
  <ui:param name="title" value="#{demoBundle.button_link} &lt;tc:link> &lt;tc:button>"/>
  <p>A classic link can be set with the <code class="language-markup">&lt;tc:link/></code> tag.
    You can also set a link by <code class="language-markup">&lt;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="&lt;tc:link/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{demoBundle.tagDocUrl}/#{apiController.currentRelease}/tld/tc/link.html"/>
    |
    <tc:link label="&lt;tc:button/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{demoBundle.tagDocUrl}/#{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 #{demoBundle.component} section.<br/>
      The image leads to www.apache.org.</p>
    <tc:section label="&lt;tc:link>">
      <pre><code class="language-markup">&lt;tc:link label="apache.org" link="https://www.apache.org/"/></code></pre>

      <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="&lt;tc:button>">
      <pre><code class="language-markup">&lt;tc:button label="apache.org" link="https://www.apache.org/"/></code></pre>
      <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">
      <pre><code class="language-markup">&lt;tc:link label="MusicPlayer" omit="true">
  &lt;tc:link image="fa-play-circle" label="Play"/>
  ...
&lt;/tc:link></code></pre>
      <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">
      <pre><code class="language-markup">&lt;tc:button label="MusicPlayer" omit="true">
  &lt;tc:link image="fa-play-circle" label="Play"/>
  ...
&lt;/tc:button></code></pre>
      <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">
      <pre><code class="language-markup">&lt;tc:button label="Options" omit="true">
  ...
  &lt;tc:selectOneRadio>
    &lt;tc:selectItem itemValue="Option 1"/>
    ...
  &lt;/tc:selectOneRadio>
  ...
&lt;/tc:button></code></pre>
      <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>
        <pre><code class="language-markup">&lt;tc:button label="Primary" markup="primary"/>
&lt;tc:button label="Secondary" markup="secondary"/>
&lt;tc:button label="Success" markup="success"/>
&lt;tc:button label="Danger" markup="danger"/>
&lt;tc:button label="Warning" markup="warning"/>
&lt;tc:button label="Info" markup="info"/>
&lt;tc:button label="Light" markup="light"/>
&lt;tc:button label="Dark" markup="dark"/>
&lt;tc:button label="None" markup="none"/></code></pre>
        <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>
        <pre><code class="language-markup">&lt;tc:button label="Primary" markup="outlinePrimary"/>
&lt;tc:button label="Secondary" markup="outlineSecondary"/>
&lt;tc:button label="Success" markup="outlineSuccess"/>
&lt;tc:button label="Danger" markup="outlineDanger"/>
&lt;tc:button label="Warning" markup="outlineWarning"/>
&lt;tc:button label="Info" markup="outlineInfo"/>
&lt;tc:button label="Light" markup="outlineLight"/>
&lt;tc:button label="Dark" markup="outlineDark"/></code></pre>
        <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">&lt;f:facet name="confirmation"></code>.
      The messagetext is added with <code class="language-markup">&lt;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')}">Warning!</span>
      The <code class="language-markup">target</code> attribute is not reliable in combination with
      <tc:link link="https://deltaspike.apache.org/" label="DeltaSpike"/> and its @WindowScoped.
      This is because DeltaSpike renames the <code>window.name</code>, with the <code>dswid</code>, so the
      target can't be found, after the first call.
    </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">&lt;tc:object/></code>).</p>
    <tc:section label="New Window">
      <pre><code
              class="language-markup">&lt;tc:link label="open https://www.apache.org/ in new window"
        link="https://www.apache.org/" target="_blank"/></code></pre>
      <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">&lt;tc:object name="objectframe" .../></code>
        (see <tc:link label="#{demoBundle.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>