{"id":1428,"date":"2011-07-25T11:35:19","date_gmt":"2011-07-25T11:35:19","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1428"},"modified":"2011-07-25T11:38:05","modified_gmt":"2011-07-25T11:38:05","slug":"primefaces-ppanel-component","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1428","title":{"rendered":"Using the Primefaces p:panel component"},"content":{"rendered":"

This post details some tips discovered whilst experimenting with p:panel.<\/p>\n

1\/ The toggle button on the right hand side of the panel is rendered with ui-state-default<\/em>. This does not look attractive with some themes \u2013 it often looks like a bit of a zit due to the background on the thick plus sign icon. I noticed that the dialog component p:dialog does not render its close icon in the header with ui-state-default,<\/em>  and this looks much more attractive as the surrounding highlight on the icon only shows on hover.<\/p>\n

This can be applied to p:panel by removing the ui-state-default<\/em> class from the anchor tags around the icons on the panel header. The following example jQuery performs this (in my case, the panelDivId argument is the ID of an h:paneGroup\/div surrounding the panel:-<\/p>\n

\n

function ss_PanelFixIcons(panelDivId) {
    var escapedPanelDivId = panelDivId.replace(\/:\/g, ‘\\\\3A ‘);
    var panelIcons = jQuery(‘div#’ + escapedPanelDivId + ‘ div.ui-panel-titlebar > a.ui-panel-titlebar-icon’);
    panelIcons.removeClass(‘ui-state-default’);
}<\/p>\n<\/blockquote>\n

 <\/p>\n

2\/ It would be nice to be able to explicitly expand and collapse the panel as well as to just toggle it. In fact the panel widget does expose its current state via its cfg <\/em>property, although this is not publicly documented. The following example functions use this to provide explict expand, collapse, and set to passed boolean state functions. In addition a function is provided to get the current panel state:-<\/p>\n

\n

function ss_PanelExpand(widgetVar) {
    if (widgetVar.cfg.collapsed) {
        widgetVar.toggle();
    }
}<\/p>\n

function ss_PanelCollapse(widgetVar) {
    if (!widgetVar.cfg.collapsed) {
        widgetVar.toggle();
    }
}<\/p>\n

function ss_PanelSetCollapsed(widgetVar, state) {
    if (!widgetVar.cfg.collapsed == state) {
        widgetVar.toggle();
    }   
}<\/p>\n

function ss_PanelGetCollapsed(widgetVar) {
    return widgetVar.cfg.collapsed;
}<\/p>\n<\/blockquote>\n

 <\/p>\n

3\/ A query came up on the Primefaces forum on how to lazy load the panel, as it eagerly loads and the expand\/collapse is all done client side. The post is available here<\/strong><\/a>. the solution is straightforward:-<\/p>\n