| <?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>This page show some examples for the collapsible concept of a |
| <tc:link label="Panel" outcome="/content/20-component/050-container/20-panel/Panel.xhtml"/>. |
| Every panel contain a required input field to see if a validation occur while submitting. |
| For better visibility every panel has a border.</p> |
| <tc:section label="Simple Panel"> |
| <p>A simple panel using an controller for the collapsible state. |
| For the 'hide'-Button is the attribute <code>immediate="true"</code> set to submitting without validation. |
| So the panel could be hide even if the input field is empty.</p> |
| <p>For the panel <code>collapsibleMode="absent"</code> is set. |
| The 'Submit'-button can be executed without violation if the panel is in the hidden state.</p> |
| <tc:form id="simple"> |
| <tc:buttons> |
| <tc:button id="showSimple" label="show" action="#{collapsiblePanelController.showPanel}"/> |
| <tc:button id="hideSimple" label="hide" action="#{collapsiblePanelController.hidePanel}" immediate="true"/> |
| </tc:buttons> |
| <tc:button id="submitSimple" label="Submit"/> |
| <tc:panel id="simplePanel" collapsed="#{collapsiblePanelController.panelCollapsed}" collapsedMode="absent"> |
| <tc:style customClass="demo-data-attribute"/> |
| <tc:in id="inSimple" label="Required" required="true"/> |
| </tc:panel> |
| </tc:form> |
| </tc:section> |
| |
| <tc:section label="Full Server Request"> |
| <p>In this example the collapsible state is changed by <code class="language-markup"><tc:operation/></code> |
| with full server request. So the server get the current state.</p> |
| <p>The <code>collapsibleMode="absent"</code> is set. |
| The 'Submit'-button can be executed without violation if the panel is hidden.</p> |
| <p>For the 'hide'-Button the attribute <code>immediate="true"</code> is set to submitting without validation.</p> |
| <tc:form id="server"> |
| <tc:buttons> |
| <tc:button id="showServer" label="show"> |
| <tc:operation name="show" for="serverPanel"/> |
| </tc:button> |
| <tc:button id="hideServer" label="hide" immediate="true"> |
| <tc:operation name="hide" for="serverPanel"/> |
| </tc:button> |
| </tc:buttons> |
| <tc:button id="submitServer" label="Submit"/> |
| <tc:panel id="serverPanel" collapsedMode="absent"> |
| <tc:style customClass="demo-data-attribute"/> |
| <tc:in id="inServer" label="Required" required="true"/> |
| </tc:panel> |
| </tc:form> |
| </tc:section> |
| |
| <tc:section label="Client Side"> |
| <p>A panel which is opened and closed only by the client. |
| The attribute <code>omit="true"</code> is set for the 'show'-button and the 'hide'-button.</p> |
| <p>For the panel <code>collapsibleMode="hidden"</code> is set. |
| After the 'hide' transition, the panel will be in the 'hidden' state - not the 'absent' state. |
| The content of the hidden panel will also be validated.<br/> |
| So, if the input field is empty and the panel is hidden, a violation occur when pressing the 'Submit'-button.</p> |
| <tc:form id="client"> |
| <tc:buttons> |
| <tc:button id="showClient" label="show" omit="true"> |
| <tc:operation name="show" for="clientPanel"/> |
| </tc:button> |
| <tc:button id="hideClient" label="hide" omit="true"> |
| <tc:operation name="hide" for="clientPanel"/> |
| </tc:button> |
| </tc:buttons> |
| <tc:button id="submitClient" label="Submit"/> |
| <tc:panel id="clientPanel" collapsedMode="hidden"> |
| <tc:style customClass="demo-data-attribute"/> |
| <tc:in id="inClient" label="Required" required="true"/> |
| </tc:panel> |
| </tc:form> |
| </tc:section> |
| |
| <tc:section label="Ajax"> |
| <p>Here we have the transitions <code>show</code> and <code>hide</code> with AJAX request. |
| The buttons have set <code>immediate="true"</code> to execute the transition without validation.</p> |
| <p>The <code>collapsibleMode="absent"</code> is set. |
| The 'Submit'-button can be executed without violation if the panel is hidden.</p> |
| <demo-highlight language="markup"><tc:button label="show" immediate="true"> |
| <f:ajax execute="ajaxPanel" render="ajaxPanel"/> |
| <tc:operation name="show" for="ajaxPanel"/> |
| </tc:button></demo-highlight> |
| <tc:form id="ajax"> |
| <tc:buttons> |
| <tc:button id="showAjax" label="show" immediate="true"> |
| <f:ajax execute="ajaxPanel" render="ajaxPanel"/> |
| <tc:operation name="show" for="ajaxPanel"/> |
| </tc:button> |
| <tc:button id="hideAjax" label="hide" immediate="true"> |
| <f:ajax execute="ajaxPanel" render="ajaxPanel"/> |
| <tc:operation name="hide" for="ajaxPanel"/> |
| </tc:button> |
| </tc:buttons> |
| <tc:button id="submitAjax" label="Submit"/> |
| <tc:panel id="ajaxPanel" collapsedMode="absent"> |
| <tc:style customClass="demo-data-attribute"/> |
| <tc:in id="inAjax" label="Required" required="true"/> |
| </tc:panel> |
| </tc:form> |
| </tc:section> |
| </ui:composition> |
