The panelPopup component can be used to display various types of content inside a draggable or modal dialog. These dialogs can be used on pages to display important information and options to the user in a manner similar to a standalone offline application.
The draggable popup panel can be moved around the page while still allowing interaction with the underlying page. The modal popup panel cannot be moved, and prevents page interaction by applying a partially transparent gray overlay. The following screenshot is of the ice:panelPopup component demo in component-showcase. Notice the draggable dialog covered by the modal popup.
The panelPopup does not require any beans specific to the application. For example, static text can be used inside the body using only page level tools, which removes the complexity of bean setup. In the case of each example in this tutorial, a backing bean will only be used for the advanced demo.
The panelPopup component has 2 available facets (header and body) that can be filled and styled with content. The general layout of the panelPopup code is therefore similar to:
In this tutorial both facets contain outputText components, although it is possible to place other extended or custom components inside the popup panel. It is recommended that anything inside the facet be wrapped in either an ice:panelGroup or ice:panelGrid.
The facets would then be placed inside the ice:panelPopup tag. Because this section is demonstrating a draggable panelPopup, the draggable="true" attribute is added to the tag. This results in the following code:
The example page has added content inside the facets, as well as some minor styling to each component. Once completed, the draggable example looks similar to:
The creation of this draggable dialog was very simple, as draggablePanelPopup.jspx shows.
The modal panelPopup is implemented in a similar manner to the draggable version, as the next tutorial will demonstrate.
Using the draggable page as a basis, the new page modalPanelPopup.jspx can be created easily. When viewed, the page appears similar to:
Notice the blocking mechanism of the modal dialog, and also how the panelPopup cannot be dragged.
The appearance of these 2 examples is rather generic and may not suit your application. The next section will demonstrate how to customize the CSS for panelPopup.
Next the default panel styles should be copied into the override sheet. To find the default styles, look inside the CSS normally linked to, which is ./xmlhttp/css/rime/rime.css. Copy all popup related styles into a new sheet, in our case override.css.
After this is done, you can begin customizing the styles. This demonstration changes the colors and borders of the header and body facet, as well as the panelPopup itself. The result is similar to the following:
After this is done, you can begin customizing the styles. This demonstration changes the colors and borders of the progress bar, to give it a brighter sunken appearance. The result is similar to the following:
To achieve the color change of the panelPopup header, the following CSS changes were used:
As was mentioned earlier, complex components can be used inside of the panelPopup, and backing beans can be added to increase the functionality. The next tutorial will demonstrate both of these functions.
Placing a new component inside the panelPopup is done by adding their tags, as shown below.
This would result in the dialog body containing an inputText, checkbox, link, and calendar. This demonstrates the flexibility of popup panel contents. With this set of components inside the panelPopup, the page appears similar to:
This section also demonstrates how to use backing beans with this component. As you can see from the screenshot, a close button (appears as X) has been added. This close button acts as a toggle to change the visibility of the panelPopup.
The bean PopupBean.java is used, and is bound in faces-config in the standard way (shown below for reference):
Once this is done, a visible attribute is added to the panelPopup, which uses the backing bean value, as shown below.
The next step is to add 2 buttons to the page; one for opening a popup and one for closing the popup. These would be similar to the following:
The backing bean methods for these buttons and visibility attribute must now be written. The code for this is simple; the open method would toggle the visibility to true, and the close method would set it to false. For completeness, this is demonstrated below.
When these bindings and methods are complete, the page will allow opening and closing of the popup dialog, as can be seen in advancedPanelPopup.jspx.
As you can see, it is trivial to add complex components and dynamic functionality to a popup panel.
© Copyright 2021 ICEsoft Technologies Canada Corp.