tobago-example/tobago-example-demo/src/main/webapp/content/20-component/060-popup/Popup.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>A popup dialog is created with <code class="language-markup">&lt;tc:popup/></code>.
    It can be filled with other components.</p>
  <p>The popup dialog is based on the
    <tc:link label="Collapsible"
             outcome="/content/30-concept/53-collapsible/Collapsible.xhtml"/> concept.</p>
  <p>Tag Library Documentation:
    <tc:link label="&lt;tc:popup/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/popup.html"/>
    |
    <tc:link label="&lt;tc:operation/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.base}/doc/#{apiController.currentRelease}/tld/tc/operation.html"/></p>

  <tc:section label="Client Side Popup">
    <tc:form id="form2">
      <p>To create a client side popup you have to know about <code>collapsedMode</code>.
        The mode indicated whether a collapsed popup should be rendered.
        If <code>collapsedMode="absent"</code>, which is default, a hidden popup dialog will no be rendered.
        If <code>collapsedMode="hidden"</code>, a hidden popup dialog will be rendered on the page, but hidden by CSS.
      </p>
      <p>Be careful with validations. For example, hidden required input fields will be validated after submit.</p>
      <p>So to create the popup, use
        <code class="language-markup">&lt;tc:popup collapsedMode="hidden"></code>.
        The attribute <code class="language-markup">collapsed="true"</code> is default,
        because the popup should normally not be opened after loading the page.
        The hidden popup must be already rendered, so the client don't have to send any requests to the server.</p>
      <p>Client side opening and closing can be done with the
        <code class="language-markup">&lt;tc:operation name="show|hide" for="[ID]"/></code> tag.
        The attribute <code>name</code> must be set and can have the value 'show' and 'hide'
        which is to show and hide the popup, obviously.
        The other mandatory attribute is the <code>for</code> attribute.
        It contain the ID of the popup on which the transition should be executed.</p>

      <pre><code class="language-markup">&lt;tc:button label="Open" omit="true">
  &lt;tc:operation name="show" for="clientPopup"/>
&lt;/tc:button></code></pre>
      <tc:button id="open" label="Open" omit="true">
        <tc:operation name="show" for="clientPopup"/>
      </tc:button>
      <tc:out id="out" label="Text from Popup" value="#{popupController.popup2Text}"/>

      <tc:popup id="clientPopup" collapsedMode="hidden">
        <tc:box label="Client Side Popup">
          <tc:panel id="clientPopupMessages">
            <tc:messages id="messages"/>
          </tc:panel>
          <p>This is a popup dialog with an inputfield.</p>

          <b>Submit</b>
          <pre><code class="language-markup">&lt;tc:button label="Submit">
  &lt;f:ajax execute="in" render="in :::out clientPopupMessages"/>
&lt;/tc:button></code></pre>
          <p>The 'Submit'-button send an ajax request to submit the value in the inputfield.
          </p>

          <b>Submit &amp; Close</b>
          <pre><code class="language-markup">&lt;tc:button label="Submit &amp; Close">
  &lt;tc:operation name="hide" for="clientPopup"/>
&lt;/tc:button></code></pre>
          <p>The 'Submit &amp; Close'-button execute a submit and run the operation 'hide' to close the popup.</p>

          <b>Cancel</b>
          <pre><code class="language-markup">&lt;tc:button label="Cancel" omit="true">
  &lt;tc:operation name="hide" for="clientPopup"/>
&lt;/tc:button></code></pre>
          <p>The 'Cancel'-button execute a 'hide'-operation to close the popup.
            Also the attribute <code>omit="true"</code> is set to prevent submit.</p>

          <tc:in id="in2" label="Required Field" required="true" value="#{popupController.popup2Text}"/>
          <tc:buttons>
            <tc:button id="submit2" label="Submit">
              <f:ajax execute="in2" render="in2 :::out clientPopupMessages"/>
            </tc:button>
            <tc:button id="submitClose2" label="Submit &amp; Close">
              <tc:operation name="hide" for="clientPopup"/>
            </tc:button>
            <tc:button id="cancel2" label="Cancel" omit="true">
              <tc:operation name="hide" for="clientPopup"/>
            </tc:button>
          </tc:buttons>
        </tc:box>
      </tc:popup>
    </tc:form>
  </tc:section>

  <tc:section id="markup" label="Markup">
    <p>The width of the popups can be changed by markups.</p>
    <p><code class="language-markup">&lt;tc:popup ... markup="large"></code> or
      <code class="language-markup">&lt;tc:popup ... markup="small"></code></p>
    <tc:button id="dropdownButton" label="Open" omit="true">
      <tc:link id="largePopupLink" label="Large Popup" omit="true">
        <tc:operation name="show" for="largePopup"/>
      </tc:link>
      <tc:link id="smallPopupLink" label="Small Popup" omit="true">
        <tc:operation name="show" for="smallPopup"/>
      </tc:link>
    </tc:button>
    <tc:popup id="largePopup" collapsedMode="hidden" markup="large">
      <tc:box label="Large">
        <p>A popup with markup <code>large</code>.</p>
        <tc:button id="closeLargePopup" label="Close" omit="true">
          <tc:operation name="hide" for="largePopup"/>
        </tc:button>
      </tc:box>
    </tc:popup>
    <tc:popup id="smallPopup" collapsedMode="hidden" markup="small">
      <tc:box label="Small">
        <p>A popup with markup <code>small</code>.</p>
        <tc:button id="closeSmallPopup" label="Close" omit="true">
          <tc:operation name="hide" for="smallPopup"/>
        </tc:button>
      </tc:box>
    </tc:popup>
  </tc:section>
</ui:composition>