Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Panel

A <tc:panel/> is a simple content container. In the most cases it's invisible and wrapping other components.

Tag Library Documentation

Basics

The panel has a custom class, which set a blue background color. The class of the panel is set via the <tc:style customClass="blue"/> tag.

<tc:panel> <tc:style customClass="blue"/> ... </tc:panel>

Content of the panel with the blue background.

Reload

Tag Library Documentation

To reload the panel in a dedicated frequency, you can use the <f:facet name="reload"> tag. The content of the panel is an output text, which display the current time.

<tc:panel> <f:facet name="reload"> <tc:reload frequency="1000"/> ... 19:49:23

Reload with update control

With the update attribute the rendering of the panel can be dropped, if there is no need to update the content. In this example, we only display the current time, if the seconds are between 10 - 19, 30 - 39 or 50 - 59.

<tc:panel> <f:facet name="reload"> <tc:reload frequency="1000" update="#{panelController.oddDecaSecond}"/> ... 19:49:23 This reloads the panel directly (only for testing purpose here).

Ajax

A panel can also be useful if more than one component should be rerendered. A component for rerendering can be set with the render attribute in the <f:ajax/> tag. In this example, 'Outputfield One' and 'Outputfield Two' should be rerendered. To do so, the output fields are wrapped in a panel. After the input field losing the focus, the given text is shown by the output fields.

© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.