A popup dialog is created with <tc:popup/>
.
It can be filled with other components.
The popup dialog is based on the
Tag Library Documentation:
A simple popup realised with a controller. The open button calls the openPopup1
action.
This is a popup dialog with an inputfield.
Submit
<tc:button label="Submit"/>
The 'Submit'-button submit the value in the inputfield.
Submit & Close
<tc:button label="Submit & Close" action="\#{popupController.closePopup1}"/>
The 'Submit & Close'-button submit the value in the inputfield and
call the close-method in the controller.
Cancel
<tc:button label="Cancel" immediate="true"
action="\#{popupController.closePopup1}"/>
The 'Cancel'-button calls the close-method in the controller and
has immediate="true"
, so no submit is executed.
To create a client sided popup you have to know about collapsedMode
.
The mode indicated whether a collapsed popup should be rendered.
If collapsedMode="absent"
, which is default, a hidden popup dialog will no be rendered.
If collapsedMode="hidden"
, a hidden popup dialog will be rendered ob the page, but hidden by CSS.
Be careful with validations. For example, hidden required input fields will be validated after submit.
So to create the popup, use
<tc:popup collapsedMode="hidden">
.
The attribute collapsed="true"
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.
Client sided opening and closing can be done with the
<tc:operation name="show|hide" for="[ID]"/>
tag.
The attribute name
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 for
attribute.
It contain the ID of the popup on which the transition should be executed.
<tc:button label="Open" omit="true">
<tc:operation name="show" for="clientPopup"/>
</tc:button>
This is a popup dialog with an inputfield.
Submit<tc:button label="Submit">
<f:ajax execute="in" render="in :::out clientPopupMessages"/>
</tc:button>
The 'Submit'-button send an ajax request to submit the value in the inputfield.
Submit & Close<tc:button label="Submit & Close">
<tc:operation name="hide" for="clientPopup"/>
</tc:button>
The 'Submit & Close'-button execute a submit and run the operation 'hide' to close the popup.
Cancel<tc:button label="Cancel" omit="true">
<tc:operation name="hide" for="clientPopup"/>
</tc:button>
The 'Cancel'-button execute a 'hide'-operation to close the popup.
Also the attribute omit="true"
is set to prevent submit.