tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/20-panel/Panel.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://xmlns.jcp.org/jsf/facelets"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

  <p>A <code class="language-markup">&lt;tc:panel/></code> is a simple content container.
    In the most cases it's invisible and wrapping other components.</p>
  <tc:link label="Tag Library Documentation" image="#{request.contextPath}/image/feather-leaf.png"
           link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/panel.html"/>

  <tc:section label="Basics">
    <p>The panel has a custom class, which set a blue background color. The class of the panel is set via the
      <code class="language-markup">&lt;tc:style customClass="blue"/></code> tag.</p>
    <demo-highlight language="markup">&lt;tc:panel>
  &lt;tc:style customClass="blue"/>
  ...
&lt;/tc:panel></demo-highlight>
    <tc:panel>
      <tc:style customClass="blue"/>
      <p>Content of the panel with the blue background.</p>
    </tc:panel>
  </tc:section>

  <tc:section label="Reload">
    <tc:link label="Tag Library Documentation" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/reload.html"/>
    <p>To reload the panel in a dedicated frequency, you can use the
      <code class="language-markup">&lt;f:facet name="reload"></code> tag.
      The content of the panel is an output text, which display the current time.</p>
    <demo-highlight language="markup">&lt;tc:panel>
  &lt;f:facet name="reload">
    &lt;tc:reload frequency="1000"/>
      ...</demo-highlight>
    <tc:panel>
      <f:facet name="reload">
        <tc:reload frequency="1000" update="true"/>
      </f:facet>
      <tc:out id="o1" label="Current Date" value="#{panelController.currentDate}">
        <f:convertDateTime pattern="HH:mm:ss"/>
      </tc:out>
    </tc:panel>
  </tc:section>

  <tc:section label="Reload with update control">
    <p>With the <code class="language-markup">update</code> attribute
      the rendering of the panel can be dropped, if there is no need to
      update the content.
      In this example, we only display the current time, if the seconds
      are between 10 - 19, 30 - 39 or 50 - 59.</p>
    <demo-highlight language="markup">&lt;tc:panel>
  &lt;f:facet name="reload">
    &lt;tc:reload frequency="1000" update="\#{panelController.oddDecaSecond}"/>
      ...</demo-highlight>
    <tc:panel id="panel-reload-update">
      <f:facet name="reload">
        <tc:reload id="reload-update" frequency="1000" update="#{panelController.oddDecaSecond}"/>
      </f:facet>
      <tc:out id="r" label="Current Date" value="#{panelController.currentDate}">
        <f:convertDateTime pattern="HH:mm:ss"/>
      </tc:out>
    </tc:panel>

    This
    <tc:link label="explicit reload link">
      <f:ajax execute="panel-reload-update" render="panel-reload-update"/>
    </tc:link>
    reloads the panel directly (only for testing purpuse here).
  </tc:section>

  <tc:section label="Ajax">
    <p>A panel can also be useful if more than one component should be rerendered.
      A component for rerendering can be set with the <code>render</code> attribute in the
      <code class="language-markup">&lt;f:ajax/></code> tag.
      In this example, 'Outputfield One' and 'Outputfield Two' should be rerendered.
      To do so, the output fields are wrapped in a panel.
      After the input field loosing the focus, the given text is shown by the output fields.</p>
    <tc:in id="i1" label="Inputfield" value="#{panelController.text}">
      <f:ajax render="outputfields"/>
    </tc:in>
    <tc:panel id="outputfields">
      <tc:out id="o2" label="Outputfield One" value="#{panelController.text}"/>
      <tc:out id="o3" label="Outputfield Two" value="#{panelController.text}"/>
    </tc:panel>
  </tc:section>

</ui:composition>