I am using the primefaces datatable with bootsfaces, and there is a CSS conflict that I would like to work around.
Implementing the filter example from the primefaces showcase:
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
gives me this result:
datatable filter example good
However, adding a bootsfaces component to the page, eg (the only change is to add an empty <b:inputtext> element):
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<b:inputText></b:inputText>
<p:dataTable var="car" value="#{dtFilterView.cars}" widgetVar="carsTable"
emptyMessage="No cars found with given criteria" filteredValue="#{dtFilterView.filteredCars}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.id}" headerText="Id" footerText="contains" filterMatchMode="contains">
<h:outputText value="#{car.id}" />
</p:column>
<p:column filterBy="#{car.year}" headerText="Year" footerText="lte" filterMatchMode="lte">
<f:facet name="filter">
<p:spinner onchange="PF('carsTable').filter()" styleClass="year-spinner">
<f:converter converterId="javax.faces.Integer" />
</p:spinner>
</f:facet>
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="#{car.brand}" headerText="Brand" footerText="exact" filterMatchMode="exact" filterStyle="width: 100px">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('carsTable').filter()" >
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{dtFilterView.brands}" />
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{car.brand}" />
</p:column>
<p:column filterBy="#{car.color}" headerText="Color" footerText="in" filterMatchMode="in" filterStyle="margin-bottom 0px">
<f:facet name="filter">
<p:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" panelStyle="width:125px" scrollHeight="150">
<f:selectItems value="#{dtFilterView.colors}" />
</p:selectCheckboxMenu>
</f:facet>
<h:outputText value="#{car.color}" />
</p:column>
<p:column filterBy="#{car.sold}" headerText="Status" footerText="equals" filterMatchMode="equals">
<f:facet name="filter">
<p:selectOneButton onchange="PF('carsTable').filter()">
<f:converter converterId="javax.faces.Boolean" />
<f:selectItem itemLabel="All" itemValue="" />
<f:selectItem itemLabel="Sold" itemValue="true" />
<f:selectItem itemLabel="Sale" itemValue="false" />
</p:selectOneButton>
</f:facet>
<h:outputText value="#{car.sold ? 'Sold': 'Sale'}" />
</p:column>
<p:column filterBy="#{car.price}" headerText="Price" footerText="custom (min)" filterFunction="#{dtFilterView.filterByPrice}">
<h:outputText value="#{car.price}">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:outputText>
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
gives this result:
primefaces datatable filter style error
The dropdown box for the filters has its margin changed, causing the down arrow to not be in the correct position. The text is also reduced to 0.85.
Is there a way that I can combine bootsfaces with primefaces datatable and maintain the primefaces drop-down menu formatting?
Thanks Stephan - great work on bootsfaces btw, it's a lot of fun to program with.
Your changes didn't quite match the primefaces example on my system, but they were an improvement, and gave me a good insight into how to make my own changes.
Using these style overrides worked better on my system:
<style>
.ui-widget {
font-size: 16px !important;
}
.ui-selectcheckboxmenu-label {
margin-bottom: 0px;
}
.ui-selectcheckboxmenu-trigger {
width: auto !important;
}
.ui-selectonemenu-trigger {
width: auto !important;
}
.ui-selectcheckboxmenu-label {
font-weight: normal !important;
}
label{
font-weight: normal !important;
}
body {
line-height: 18px !important;
}
</style>
It's not perfect yet, but adding these few lines of CSS code make the BootsFaces version look almost perfectly like the original, PrimeFaces-only version:
<h:head>
<title>Facelet Title</title>
<style>
.ui-widget {
font-size: 17.6px !important;
}
* {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
*:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
body {
margin: 8px !important;
}
</style>
</h:head>
However, most of these settings might affect the BootsFaces components. Setting the font size to 0.85 is almost certainly a bug in BootsFaces, which we're going to solve, but the other settings look like different approaches to resetting the CSS default settings of the browser. In other words: fixing the look and feel of complex PrimeFaces component might ruin the look and feel of BootsFaces components.
Related
I am developing a Web Java Application with JSF 2.2 and PrimeFaces 6.0. I am building a p:tree and I would like to change the ui-icons color as, for example, in the next picture (the text is censoring).
My xhtml code is:
<p:tree value="#{docBean.root}" var="doc">
<p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
<h:outputText value="#{doc.name}" />
</p:treeNode>
</p:tree>
I tried with...
.ui-icon-folder-open{
color: red;
}
...but the just icon background changed to red.
Thank you!
For me the most flexible and easiest solution is to use font-awesome 'icons' for the nodes. They are not effectively icons but as the name states, fonts. So these can be changed by css. Hence their popularity and why they are also included in PrimeFaces
The PrimeFaces showcase for tree with icons shows that you can add custom icons for nodes, both the open and closed ones and also for the leaves. Luckily everything you add in the corresponding attributes client-side ends up in 'class' attributes on the html AND you can add multiple white space values in the attributes. This is what font-awesome needs, so by adding expandedIcon="fa fa-folder-open" or collapsedIcon="fa fa-folder" you can get the right icons and with a default style of .fa { color: orange} you get exactly what you want.
In a full example with changed leaves would be something like this:
<style>
.fa {
color: orange;
}
</style>
<h:form>
<p:tree value="#{treeIconView.root}" var="doc">
<p:treeNode expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder">
<h:outputText value="#{doc.name}"/>
</p:treeNode>
<p:treeNode type="document" icon="fa fa-file-o">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="picture" icon="fa fa-file-picture-o">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="mp3" icon="fa fa-file-video-o">
<h:outputText value="#{doc.name}" />
</p:treeNode>
</p:tree>
</h:form>
But you can go a lot further. Look at the following image:
It is produced with the following example:
<style>
.fa {
color: orange;
}
.videoColor {
color: blue;
}
.colorOpen {
color: green;
}
.fa-file-picture-o {
color: purple;
}
.color30KB {
color: red;
}
</style>
<h:form>
<p:tree value="#{treeIconView.root}" var="doc">
<p:treeNode expandedIcon="fa fa-folder-open colorOpen" collapsedIcon="fa fa-folder">
<h:outputText value="#{doc.name}"/>
</p:treeNode>
<p:treeNode type="document" icon="fa fa-file-o">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="picture" icon="fa fa-file-picture-o #{doc.size == '30 KB' ? 'color30KB' : '' }">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="mp3" icon="fa fa-file-video-o videoColor">
<h:outputText value="#{doc.name}" />
</p:treeNode>
</p:tree>
</h:form>
You can add additional 'classes' in the icon attributes, but you can also use the fa classes that are already added and use that in css selectors, or you can add specific conditional 'classes' in the icons based on values etc... And since it can all be changed by css, you can not only change the color, but also the size, rotation, css animations or whatever.
Im design a navigation bar for a webpage in jsf.
I want some links to be on the right of the bar and some on the left. It doesnt seem to work.
Any ideas?
<h:panelGrid columnus="2">
<h:panelGroup styleClass="alignmentLeft">
<h:panelGrid columns = "2" columnsClasses = "alignmentLeft">
<h:outputLink>... </h:outputLink>
<h:outputText/>
<h:outputLink>... </h:outputLink>
<h:outputText/>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup styleClass="alignmentRight">
<h:panelGrid columns = "2" columnsClasses = "alignmentRight">
<h:outputLink>... </h:outputLink>
<h:outputText/>
<h:outputLink>... </h:outputLink>
<h:outputText/>
</h:panelGrid>
</h:panelGroup>
</h:panelGrid>
.alignmentRight {
text-align : right;
}
Try this out, there was a typing mistake in your coding as well, its the first h:panelGrid 's column you have typed "columnus"
Inside <h:head> the style sheet must be declared.
<h:head>
<h:outputStylesheet name="styles.css"
library="css" />
</h:head>
then in <h:body>
<h:body>
<h:panelGrid columns="2" width="600">
<h:panelGroup>
<h:panelGrid columns="2" columnClasses="alignmentLeft" width="200">
<h:outputLink>...1 </h:outputLink>
<h:outputLink>...2 </h:outputLink>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup>
<h:panelGrid columns="2" columnClasses="alignmentRight" width="200">
<h:outputLink>...3 </h:outputLink>
<h:outputLink>...4 </h:outputLink>
</h:panelGrid>
</h:panelGroup>
</h:panelGrid>
</h:body>
In style sheet (styles.css) the styles are,
.alignmentLeft {
text-align : left;
border: 1px solid black;
background-color: orange;
}
.alignmentRight {
text-align : right;
border: 1px solid black;
background-color: lime;
}
In according to this post, I want to redesign my template, because I have the same issue.
My <h:commandButton>'s are not called.
EDIT: I implement a way to make a template from this tutorial: KLICK
Here's my new main template-client called app.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="./layout/layout.xhtml">
<ui:define name="header">
<ui:include src="./misc/header.xhtml"/>
</ui:define>
<ui:define name="rightColumn">
Ads here
</ui:define>
<ui:define name="leftColumn">
<ui:include src="./misc/sideBar.xhtml"/>
</ui:define>
<ui:define name="content">
<h:panelGroup id="contentPanel">
<ui:include src="#{appController.content}.xhtml" />
</h:panelGroup>
</ui:define>
<ui:define name="footer">
<ui:include src="./misc/footer.xhtml"/>
</ui:define>
</ui:composition>
</body>
</html>
The master-layout page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./css/default.css" rel="stylesheet" type="text/css" />
<link href="./css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
<style type="text/css" media="all">
body
{
background-color: #2b3a3c;
color: #2d2e2e;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.2em;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
#outerWrapper
{
background-color: #fff;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 100%;
}
#outerWrapper #header
{
background-color: #8ab573;
border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 1.5em;
font-weight: bold;
line-height: 1.7em;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn
{
background-color: #eef6ed;
border-left: solid 1px #8ab573; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 180px;
height: 200px;
}
#outerWrapper #contentWrapper #leftColumn
{
background-color: #eef6ed;
border-right: solid 1px #8ab573; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 180px;
height: 200px;
}
#outerWrapper #contentWrapper #content
{
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper .clearFloat
{
clear: both;
display: block;
}
#outerWrapper #footer
{
background-color: #8ab573;
border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 1.5em;
font-weight: bold;
line-height: 1.7em;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<ui:insert name="header"/>
</div>
<div id="contentWrapper">
<div id="rightColumn">
<ui:insert name="rightColumn"/>
</div>
<div id="leftColumn">
<ui:insert name="leftColumn"/>
</div>
<div id="content">
<ui:insert name="content"/>
</div>
<br />
</div>
<div id="footer">
<ui:insert name="footer"/>
</div>
</div>
</body>
</html>
And this is one of the Pages, which gets included. EDIT: I set in the managed bean this page as default. The menu at the left side doesn't do anything at the moment. Because it isn't needed at the moment. The only thing i want is that this action gets called if i click on this button: <h:commandButton id="btn_plan" value="Planen" action="#{hldyPlanningController.addHoliday()}" style="width: 170px; height: 30px"/>
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
</f:facet>
</h:head>
<h:body>
<h:form id="frm_hldy_plan">
<p:panelGrid style="width: 100%;" >
<f:facet name="header">
<p:row>
<p:column colspan="2" style="height:50px;">
Urlaubsplanung
</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width: 420px; vertical-align: top;" colspan="1">
<p:panel style="font-size: 12px; width: 420px; position: relative; border: 1px solid gray">
<f:facet name="header">
Urlaubsantrag Formular
</f:facet>
<p:panelGrid id="pnl_userinfo" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Persönliche Informationen</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:120px">
<h:outputText value="Name:"/>
</p:column>
<p:column>
<h:outputText value="#{loginController.sessionData.user_name}" />
</p:column>
</p:row>
<p:row>
<p:column style="width:120px">
<h:outputText value="Team:" />
</p:column>
<p:column>
<h:outputText value="#{loginController.sessionData.teams_name}" />
</p:column>
</p:row>
</p:panelGrid>
<br/>
<p:panelGrid id="pnl_time" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Zeitraum</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="cld_startdate" value="Startdatum:" />
</p:column>
<p:column>
<p:calendar value="#{hldyPlanningController.startdate}" id="cld_startdate" showOn="button" pattern="dd.MM.yyyy" required="true" requiredMessage="Startdatum ist ein Pflichtfeld!" showWeek="true"/>
</p:column>
</p:row>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="cld_enddate" value="Enddatum:" />
</p:column>
<p:column>
<p:calendar value="#{hldyPlanningController.enddate}" id="cld_enddate" showOn="button" pattern="dd.MM.yyyy" required="true" requiredMessage="Enddatum ist ein Pflichfeld!" showWeek="true"/>
</p:column>
</p:row>
</p:panelGrid>
<br/>
<p:panelGrid id="pnl_misc" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Weiteres</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="opt_hType" value="Typ:"/>
</p:column>
<p:column>
<p:selectOneButton value="#{hldyPlanningController.type}" id="opt_hType" required="true" requiredMessage="Typ ist ein Pflichtfeld!">
<f:selectItem itemLabel="Urlaub" itemValue="U" />
<f:selectItem itemLabel="Absetzen" itemValue="A" />
</p:selectOneButton>
</p:column>
</p:row>
<p:row>
<p:column style="width:120px">
<p:outputLabel for="txta_note" value="Bemerkung:"/>
</p:column>
<p:column>
<p:inputTextarea maxlength="45" rows="2" cols="30" value="#{hldyPlanningController.note}" id="txta_note"/>
</p:column>
</p:row>
</p:panelGrid>
<br/>
<p:panelGrid id="pnl_actions" style="font-size: 12px; width: 400px; border: 1px solid gray">
<f:facet name="header">
<p:row>
<p:column colspan="2">Aktion</p:column>
</p:row>
</f:facet>
<p:row>
<p:column>
<h:commandButton id="btn_plan" value="Planen" action="#{hldyPlanningController.addHoliday()}" style="width: 170px; height: 30px"/>
</p:column>
<p:column>
<h:commandButton id="btn_submit" value="Abschicken" style="width: 170px; height: 30px"/>
</p:column>
</p:row>
</p:panelGrid>
</p:panel>
</p:column>
<p:column colspan="1" style="vertical-align: top;">
<p:panel style="font-size: 12px; border: 1px solid gray;">
<f:facet name="header">
Mitarbeiter, die in diesem Zeitraum auch Urlaub geplant haben
</f:facet>
<p:schedule value="#{calendarController.eventModel}" widgetVar="myschedule"></p:schedule>
</p:panel>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</h:body>
</html>
All Beans are #MangedBean and #SessionScoped. I'm using JSF2.1 with Primefaces 3.4.1 on Tomcat 7.x;
I'm new to the JSF Framework and can't figure out what i'm doing wrong in this case. Please help me.
Thanks a lot.
I propose 2 methods to solve your issue:
1- Put the commandButton outside the panel grid, just before the form tag as follows:
<h:commandButton action="#{ficheDescControl.edit()}" value="Valider" />
</h:form>
2- use the UI:composite instead of include. I used it and I'm able to trigger CommanButton properly. You can take a look of a question of mine where the command button works:
How to pass a bean from jsf to another using templating?
I have a full page layout. Top layoutUnit is having a menu and selectOneMenu. The menu items are not getting displayed properly. The menu items are overlapping with selectOneMenus.
here is my xhtml code and styles used.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style type="text/css">
.ui-widget {
font-size: 12px !important;
}
**.ui-layout-north {
z-index: 20 !important;
overflow: visible !important;
}
.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}**
</style>
</h:head>
<h:body>
<p:layout fullPage="true" id="layout1">
<p:layoutUnit id="top" position="north" size="104">
<h:form>
<p:menubar autoSubmenuDisplay="true" id="menubar1">
</p:menubar>
<h:panelGroup id="t1">
<p:toolbar rendered="#{menuBean.renderP1}" id="toolbar1">
<p:toolbarGroup align="left">
<p:selectOneMenu id="prod" value="#{menuBean.product}"
style="width:155px;" required="true"
requiredMessage="Select a product">
<f:selectItem itemLabel="Select product" itemValue="" />
<f:selectItems value="#{menuBean.products}" />
<!-- Product changed -->
<p:ajax event="change" update="prodVar,brkType,brkRevision"
listener="#{menuBean.productChanged}" />
</p:selectOneMenu>
<p:spacer width="50" height="10" />
<p:selectOneMenu id="prodVar" value="#{menuBean.productVariant}"
style="width:165px;" required="true"
requiredMessage="Select product variant">
<f:selectItem itemLabel="Select Variant" itemValue="" />
<f:selectItems value="#{menuBean.productVariants}" />
<!-- productVariant changed -->
<p:ajax event="change" update="brkType,brkRevision"
listener="#{menuBean.productVariantChanged}" />
</p:selectOneMenu>
</p:toolbarGroup>
</p:toolbar>
</h:panelGroup>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<h:form id="form2">
<h:panelGroup id="t2">
<p:tabView id="tabView" rendered="#{menuBean.renderP2}">
</h:panelGrid>
</p:tab>
</p:tabView>
</h:panelGroup>
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
i remember that it is reported to Cagatay sometime ago here is the issue and fixed with the version of primefaces 3.0RC1. Also, you can try adding to your css file to make layouts visible.
.ui-layout-north {
overflow:visible !important;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
I couldn't find any solution to fix this display issue. For a work around I had moved all the select menus from north to center layout. It fixed the issue temporarily.
In JSF is it possible to have a datatable displays records as follows?
[Name ][Last Name][Age]
1. John Doe 20
Extra info on record 1
2. John Smith 20
Extra info on record 2
Thank you
I'm sure there are a number of ways you could do this.
If you don't mind nesting tables, you can use the panelGrid tag and CSS.
View:
<f:view>
<h:dataTable value="#{peopleBean.people}" var="row">
<h:column id="column1">
<f:facet name="header">
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="First Name" />
<h:outputText value="Last Name" />
<h:outputText value="Age" />
</h:panelGrid>
</f:facet>
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="#{row.firstname}" />
<h:outputText value="#{row.lastname}" />
<h:outputText value="#{row.age}" />
</h:panelGrid>
<h:outputText styleClass="extra" value="#{row.extraInfo}" />
</h:column>
</h:dataTable>
</f:view>
Stylesheet:
TABLE {
width: 100%;
}
TABLE TR TD {
text-align: left;
}
.cell {
width: 40%;
}
.age {
width: 20%;
}
.extra {
background-color: silver;
padding: 4px;
display: block;
width: 100%;
}
Third libraries, such as RichFaces, allow you to do that with the principle of subTable.
You can check this example from RichFaces. It is a little more complicated compared as what you want to do, but it shows the usage of subTable component...