Tobago Demo

Menu

Collapsible Panel

This page show some examples for the collapsible concept of a Panel. Every panel contain a required input field to see if a validation occur while submitting. For better visibility every panel has a border.

Simple Panel

A simple panel using an controller for the collapsible state. For the 'hide'-Button is the attribute immediate="true" set to submitting without validation. So the panel could be hide even if the input field is empty.

For the panel collapsibleMode="absent" is set. The 'Submit'-button can be executed without violation if the panel is in the hidden state.

Full Server Request

In this example the collapsible state is changed by <tc:operation/> with full server request. So the server get the current state.

The collapsibleMode="absent" is set. The 'Submit'-button can be executed without violation if the panel is hidden.

For the 'hide'-Button the attribute immediate="true" is set to submitting without validation.

Client Side

A panel which is opened and closed only by the client. The attribute omit="true" is set for the 'show'-button and the 'hide'-button.

For the panel collapsibleMode="hidden" 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.
So, if the input field is empty and the panel is hidden, a violation occur when pressing the 'Submit'-button.

Ajax

Here we have the transitions show and hide with AJAX request. The buttons have set immediate="true" to execute the transition without validation.

The collapsibleMode="absent" is set. The 'Submit'-button can be executed without violation if the panel is hidden.

<tc:button label="show" immediate="true"> <f:ajax execute="ajaxPanel" render="ajaxPanel"/> <tc:operation name="show" for="ajaxPanel"/> </tc:button>
© 2005-2023 Apache Software Foundation, Licensed under the Apache License, Version 2.0.