Posted under JSF
Permalink
Tags jQuery, JSF, Primefaces, Tip
With Primefaces, rather than applying your own style for borders, headers etc. it is important where possible to tie the styling in to the theme using theme classes.
Here is an example of this from the Primefaces showcase, used to display the header for each example:-
<h1 class=”title ui-widget-header ui-corner-all”>DataTable – Pagination</h1>
This example places a border around the header according to the theme, sets the appropriate background, and adds corner rounding as per the theme.
Whilst in some cases another Primefaces component might be the right approach (in this case a panel would do it), in many cases this is undesirable and also overkill for the job. Taking our lead from the Primefaces showcase, it is clearly acceptable to use the underlying jQuery UI classes where appropriate, as I have also done here.
Here is another example page fragment which I have used to group a few controls/buttons in a box:-
<h:head>
<style type=”text/css”>
.ui-widget, .ui-widget .ui-widget {
font-size: 80% !important;
}
.ss-controlgroup {
float: left;
}
</style>
</h:head>
<h:body>
<h:form>
<h:panelGroup layout=”block” styleClass=”ui-widget-content ui-corner-all ss-controlgroup”>
(controls in the box go here)
</h:panelGroup>
</h:form>
</h:body>
Details of the jQuery UI, on which Primefaces is based, may be found here.
Leave a Reply
You must be logged in to post a comment.