tobago-example/tobago-example-demo/src/main/webapp/content/20-component/070-tab/01-ajax/Tab_Ajax.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!--
 * 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">

  <p>Tabs can be created with one or more <code class="language-markup">&lt;tc:tab/></code> within a
    <code class="language-markup">&lt;tc:tabGroup></code>.
    Within a tab, content can be added like in a section or a panel.</p>
  <p>To activate Ajax, the <code>switchType</code> attribute must have the value "reloadTab".
    On all tabgroups on this page, Ajax is activated.</p>
  <p>Tag Library Documentation:
    <tc:link label="&lt;tc:tabGroup/>" image="#{request.contextPath}/image/feather-leaf.png" link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/tabGroup.html"/>
    |
    <tc:link label="&lt;tc:tab/>" image="#{request.contextPath}/image/feather-leaf.png" link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/tab.html"/>
    |
    <tc:link label="&lt;tc:tabChangeListener/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/tabChangeListener.html"/></p>

  <tc:section label="Basics">
    <p>A simple tabgroup. The second tab is disabled.</p>
    <tc:tabGroup id="tg1" switchType="reloadTab">
      <tc:tab id="t11" label="One">
        First tab.
      </tc:tab>
      <tc:tab id="t12" label="Two" disabled="true">
        Second tab.
      </tc:tab>
      <tc:tab id="t13" label="Three">
        Third tab.
      </tc:tab>
    </tc:tabGroup>
  </tc:section>

  <tc:section label="Header">
    <p>This example show the different headers if the <code>label</code> or the <code>image</code> is used.</p>
    <tc:tabGroup id="tabGroupHead" switchType="reloadTab">
      <tc:tab id="tabHead1" label="Only label">
        <p>Only a label is set.</p>
        <pre><code id="tabHead1Code" class="language-markup">&lt;tc:tab label="Only label"/></code></pre>
        <f:verbatim><script type="text/javascript">Prism.highlightElement($('#tabHead1Code')[0]);</script></f:verbatim>
      </tc:tab>
      <tc:tab id="tabHead2" label="Label with image" image="#{request.contextPath}/image/feather-leaf.png">
        <p>A label and an image are set.</p>
        <pre><code id="tabHead2Code"
                class="language-markup">&lt;tc:tab label="Label with image" image="\#{request.contextPath}/image/feather-leaf.png"></code></pre>
        <f:verbatim><script type="text/javascript">Prism.highlightElement($('#tabHead2Code')[0]);</script></f:verbatim>
      </tc:tab>
      <tc:tab id="tabHead3" image="#{request.contextPath}/image/feather-leaf.png">
        <p>Only an image is set.</p>
        <pre><code id="tabHead3Code" class="language-markup">&lt;tc:tab image="\#{request.contextPath}/image/feather-leaf.png"></code></pre>
        <f:verbatim><script type="text/javascript">Prism.highlightElement($('#tabHead3Code')[0]);</script></f:verbatim>
      </tc:tab>
      <tc:tab id="tabHead4">
        <p>Neither a label or an image are set. In this case the header gets a label with the indexnumber of the tab in
          the tabgroup.</p>
      </tc:tab>
    </tc:tabGroup>
  </tc:section>

  <tc:section label="Open Folder Example">
    <p>The image in the header depends on what tab is currently selected.</p>
    <pre><code class="language-markup">&lt;tc:tabGroup selectedIndex="\#{tabController.index}"></code></pre>
    <tc:tabGroup id="ft" switchType="reloadTab" selectedIndex="#{tabController.index}">
      <tc:tab id="ft1" label="One" image="#{request.contextPath}#{tabController.tabOneImage}">
        <p>First folder open.</p>
      </tc:tab>
      <tc:tab id="ft2" label="Two" image="#{request.contextPath}#{tabController.tabTwoImage}">
        <p>Second folder open.</p>
      </tc:tab>
      <tc:tab id="ft3" label="Three" image="#{request.contextPath}#{tabController.tabThreeImage}">
        <p>Third folder open.</p>
      </tc:tab>
    </tc:tabGroup>
  </tc:section>

  <tc:section label="TabChangeListener">
    <p>The <code class="language-markup">&lt;tc:tabChangeListener/></code> tag is used to bind a
      <code>TabChangeListener</code>. The <code>TabChangeListener</code> is an interface,
      which is implemented in this example by <code>SimpleTabChangeListener</code>.</p>
    <code class="language-markup">&lt;tc:tabChangeListener type="org.apache.myfaces.tobago.example
      .demo.actionlistener.SimpleTabChangeListener"
      binding="\#{tabController.tabChangeListener}"/></code>
    <tc:tabGroup switchType="reloadTab">
      <f:ajax render="outPanel"/>
      <tc:tabChangeListener type="org.apache.myfaces.tobago.example.demo.actionlistener.SimpleTabChangeListener"
                            binding="#{tabController.tabChangeListener}"/>
      <tc:tab label="One">
        <p>Changed to tab one.</p>
      </tc:tab>
      <tc:tab label="Two">
       <!-- <f:ajax render=":page:header:headerInfo"/> -->
        <p>Changed to tab two.</p>
      </tc:tab>
      <tc:tab label="Three">
        <p>Changed to tab three.</p>
      </tc:tab>
    </tc:tabGroup>
    <tc:box label="Data from the tab group above" id="outPanel">
      <tc:out label="NewTabIndex" value="#{tabController.newTabIndex}"/>
      <tc:out label="ClientID" value="#{tabController.clientId}"/>
      <tc:out label="TabChangedCount" value="#{tabController.count}"/>
    </tc:box>
  </tc:section>

  <tc:section label="SwitchType='none'">
    <p>If no switch type is activated with <code>switchType="none"</code>, you have full control over the tab group.
      In this example the tabs are used as buttons to refresh the timestamps. The functionallity of
    switching the tab comes explicitly by adding the id of the tab group to the ajax tag.</p>
    <tc:tabGroup id="tabGroupSwitchTypeNone" switchType="none">
      <tc:tab id="nt1" label="One">
        <f:ajax execute="::tabGroupSwitchTypeNone" render="::tabGroupSwitchTypeNone ::outTimestamp1"/>
        One
      </tc:tab>
      <tc:tab id="nt2" label="Two">
        <f:ajax execute="::tabGroupSwitchTypeNone" render="::tabGroupSwitchTypeNone ::outTimestamp2"/>
        Two
      </tc:tab>
      <tc:tab id="nt3" label="Three">
        <f:ajax execute="::tabGroupSwitchTypeNone" render="::tabGroupSwitchTypeNone ::outTimestamp3"/>
        Three
      </tc:tab>
    </tc:tabGroup>

    <tc:box label="Area outsite of the tab group">
      <tc:out id="outTimestamp1" label="Timestamp One" value="#{eventController.currentTimestamp}"/>
      <tc:out id="outTimestamp2" label="Timestamp Two" value="#{eventController.currentTimestamp}"/>
      <tc:out id="outTimestamp3" label="Timestamp Three" value="#{eventController.currentTimestamp}"/>
    </tc:box>
  </tc:section>
</ui:composition>