November 8th, 2010
3:11 pm
Changing Primefaces Structural CSS – Thin Panel example

Posted under JSF
Tags , , ,

Update 10/5/2011

The example project which contains this example is PrimeThemeSwitcherTableNonCC, on page ThinPanel.xhtml. This project may be found in the repository here.

Note that the styling for the repository version has changed slightly from below and is as follows:-

div.ss-thinpanel.ui-panel{
    padding:0px !important;
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    margin-bottom: 1px !important;
}
.ss-thinpanel > div.ui-panel-titlebar {
    padding-top: 4px !important;
    padding-bottom: 3px !important;
    border:none !important;
}

 

Original Post

Sometimes it is desirable to change not the skin of a component but its structure – size, borders etc.
One example of mine was when I wanted an accordion like component which allows multiple panels to be open simultaneously. The accordion used to allow this but does not any longer. A good alternative to the accordion in this case is a stack of panel components, as they can all have independent expand/collapse buttons, and the close button is optional and so can be removed. As a bonus, a submenu can be added if desired as shown in the component showcase.

My issue with the panel for this use case was simply that it looked too chunky and took up too much real estate on the screen when a stack of them was present. I therefore produced some alternative structural CSS to produce a weight watcher’s version of panel, with the aim that a stack of them would take up no more vertical space than a similar stack of the same number of accordion tabs. In fact, in the end my weight watcher’s panel has ended up slightly slimmer than the accordion.

The following example page shows a stack of 3 standard ‘full fat’ panels followed by a similar stack of 3 of the thin version.
Note the following important points about the way the CSS is implemented:-

  • The CSS selectors are all driven by the CSS class ss-thinpanel. Simply including this in the styleClass attribute of the p:panel component enables the thin version.
  • As the new version is tied to the new class ss-thinpanel I have done nothing in CSS which would affect existing use of the panel component – as the example shows, the old can be used alongside the new.
  • The CSS overrides the structural CSS for the panel component, not the skinning CSS. This way, the changes work consistently across all the themes and do not require any theme changes to be made.
  • This technique is useful for any occasion where an alternative flavour of a component is needed – just ensure that the structural CSS is targeted (so all themes work), and drive the change by a new CSS class name. You can then have a number of alternative flavours of a component which are useable just by including the required classname.

<!DOCTYPE HTML>
<html xmlns="http://www.w3c.org/1999/xhtml"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:p="http://primefaces.prime.com.tr/ui">
<f:view contentType="text/html">
<h:head>
    <link type="text/css" rel="stylesheet"
     href="#{request.contextPath}/resources/themes/eggplant/skin.css" />

<style type="text/css">       
        .ui-widget, .ui-widget .ui-widget {
            font-size: 75% !important;
        }
        div.ss-thinpanel.ui-panel {
            padding:0px !important;
            border-top-width: 1px !important;
            border-right-width: 1px !important;
            border-bottom-width: 1px !important;
            border-left-width: 1px !important;
            margin-bottom: 1px !important;
        }
        .ss-thinpanel > div.ui-panel-titlebar {
            padding-top: 3px !important;
            padding-bottom: 2px !important;
            border:none !important;
        }
    </style>
</h:head>
<h:body>
<h:form id="frmTest">
    <h:panelGroup layout="block" style="width:800px;">
        <p:panel toggleable="true" toggleSpeed="500" collapsed="true" header="F.C. Barcelona">
            <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
            having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
            They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
            including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners’ Cups,
            a record three Inter-Cities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
            The club is also the only European side to have played continental football in every season since its inception in 1955." />
        </p:panel>
        <p:panel toggleable="true" toggleSpeed="500" collapsed="true" header="F.C. Barcelona">
            <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
            having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
            They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
            including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners’ Cups,
            a record three Inter-Cities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
            The club is also the only European side to have played continental football in every season since its inception in 1955." />
        </p:panel>
        <p:panel toggleable="true" toggleSpeed="500" collapsed="true" header="F.C. Barcelona">
            <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
            having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
            They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
            including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners’ Cups,
            a record three Inter-Cities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
            The club is also the only European side to have played continental football in every season since its inception in 1955." />
        </p:panel>
    </h:panelGroup>
    <br/>
    <h:panelGroup layout="block" style="width:800px;">
        <p:panel toggleable="true" styleClass="ss-thinpanel" toggleSpeed="500" collapsed="true" header="F.C. Barcelona">
            <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
            having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
            They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
            including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners’ Cups,
            a record three Inter-Cities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
            The club is also the only European side to have played continental football in every season since its inception in 1955." />
        </p:panel>
        <p:panel toggleable="true" styleClass="ss-thinpanel" toggleSpeed="500" collapsed="true" header="F.C. Barcelona">
            <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
            having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
            They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
            including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners’ Cups,
            a record three Inter-Cities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
            The club is also the only European side to have played continental football in every season since its inception in 1955." />
        </p:panel>
        <p:panel toggleable="true" styleClass="ss-thinpanel" toggleSpeed="500" collapsed="true" header="F.C. Barcelona">
            <h:outputText value="FC Barcelona is one of only three clubs never to have been relegated from La Liga and is the most successful club in Spanish football along with Real Madrid,
            having won twenty La Liga titles, a record twenty-five Spanish Cups, eight Spanish Super Cups, four Eva Duarte Cups and two League Cups.
            They are also one of the most successful clubs  in European football having won fourteen official major trophies in total,
            including ten UEFA competitions. They have won three UEFA Champions League titles, a record four UEFA Cup Winners’ Cups,
            a record three Inter-Cities Fairs Cups (the forerunner to the UEFA Europa League), three UEFA Super Cups and one FIFA Club World Cup.
            The club is also the only European side to have played continental football in every season since its inception in 1955." />
        </p:panel>
    </h:panelGroup>
</h:form> 
</h:body>
</f:view>
</html>

No Comments »

Trackback URI | Comments RSS

Leave a Reply

You must be logged in to post a comment.