Change default color of a popupPanel? - jsf-2

I have a popupPanel:
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Simple popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<p>Any content might be inside this panel.</p>
<p>
The popup panel is open and closed from the javascript function of component client side object. The following code
hide this panel:
<f:verbatim>#</f:verbatim>{rich:component('popup')}.hide()
</p>
</rich:popupPanel>
I´m using this example:
Simple popup example
I want to change the color, the default color is blue, I want to change this color to Red or Green, is it possible ?
If it is relevant, i´m using richfaces 4.
Thanks in advance !

Add This css :
.rf-pp-hdr{
background: red;
}

Related

Set the background color of a cell in a p:datatable

I have a primefaces datatable and I'm trying to set the background-color of cells as following :
<p:column sortBy="#{salle.couleur}">
<f:facet name="header">
<h:outputText value="#{messages.Couleur}" />
</f:facet>
<h:outputText style="background-color:##{salle.couleur}" />
</p:column>
the value of #{salle.couleur} is something like this : 0909e8, thats why use a # before the value.
But it doesn't work, and when I inspected the html page I can see that the cell has indeed a background-color :
How can I solve this ?
In your case the inspected <span /> is empty, so there is nothing to color with a custom background. That is beacause you do not set the background color of the cell but of the cells content. I would recommend to set the background color on the cell itself via:
<p:column
sortBy="#{salle.couleur}"
style="#{empty salle ? '' : 'background-color: #'.concat(salle.couleur).concat(';')}"
>
...
</p:column>
So even if the cells content is empty the cell itself will have a custom background color. The empty salles condition in the ternary operator prevents the column header from getting colored also.

Primefaces datatable with commandLink conflicts with row selection

I am working with PrimeFaces 5. The row selection is enabled and I want to embed a commandLink in one of the columns. When I click on the commandLink, I show a dialog, but I do not want the row to be selected. Is this possible (currently both events happen, the dialog is shown and the row is selected)?
<p:dataTable id="tableData" widgetVar="tableData" var="p"
value="#{bean.list}" ...
selection="#{bean.selectedItem}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{actionBean.onSelect}"
update="#form" onstart="PF('statusDialog').show();"
oncomplete="PF('statusDialog').hide();" />
<p:column headerText="Title" ...>
<p:commandLink id="clickableTitle" onstart="PF('statusDialog').show();"
oncomplete="PF('statusDialog').hide();PF('detailsDialog').show()">
<h:outputText value="#{p.title}" styleClass="link"/>
</p:commandLink>
</p:column>

p:spacer width is changing based on screen resolution

I am using p:spacer in my xhtml file to create some empty space in the left side of the Panel Grid, and right side I have two buttons. The alignment works fine for the resolution (1366 X 768 screens). But if the page is opened on a screen with a resolution 1280 X 1024 using IE 10 browser, the left side space increases and the right side buttons goes out of the view and a horizontal scroll bar appears. I don't want users to scroll to see the buttons. Sample code is given below.
<p:accordionPanel value="#{dataBean.userList}" var="j" activeIndex="null">
<p:tab title="#{j.department} - #{j.userCount}">
<p:panelGrid columns="2">
<p:column>
<p:spacer width="1050" height="5" />
</p:column>
<p:column>
How to put the space that will adjust based on the resolution ?
Using PrimeFaces 4.0.
I wouldn't recommend using p:spacer for that particular case. Instead, you can play with styles to achieve what you want to do. This will work:
Use this style (put it wherever you have your css):
<style type="text/css">
.grid{width: 100%;}
.column1{width: 100%;}
.column2{}
</style>
And use it in the styleClass and columnClasses attributes of the p:panelGrid like this:
<p:accordionPanel value="#{dataBean.userList}" var="j" activeIndex="null">
<p:tab title="#{j.department} - #{j.userCount}">
<p:panelGrid columns="2" styleClass="grid" columnClasses="column1,column2">
<p:column></p:column>
<p:column>
<p:commandButton value="hi"/>
<p:commandButton value="bye"/>
</p:column>
</p:panelGrid>
</p:tab>
</p:accordionPanel>
This way your first column will take all the available space leaving your second column with the buttons aligned to the right, and not depending on the resolution.

rich:dataGrid borders issue rich faces 4

We are upgrading from jsf 1.2 to jsf 2.
We are using apache myfaces 2.1 and rich faces 4.3.
The issue is i am not able to get borders around <rich:dataGrid> component.
I have seen posts describing how to remove the borders but no one specifies how to get borders.
It seems that borders are by default rendered earlier (they were coming when rich faces 3 is used ) but after upgrading to rich faces 4 , ther are not rendered
by default.
Following is the xhtml snippet.
<rich:dataGrid value="#{bean.getListValues}" var="value" columns="1" rowKeyVar="index" id="qsns"
style="border-bottom-width:10px;">
<h:panelGrid id="qsn#{index+1}" border="10" columns="2">
<h:outputText value="qsn #{index+1}"/>
<h:selectOneMenu value="#{value.qsn}">
<f:selectItems value="#{bean.qsnPool}" />
</h:selectOneMenu>
<h:outputText value="Answer"/>
<h:inputText value="#{value.answer}"/>
</h:panelGrid>
</rich:dataGrid>
I also tried setting borders explicitely for panelGrid (border="10") in above snippet.
and to rich:dataGrid (border-bottom-width:10px), but it is not working as specified in url according to url : http://docs.jboss.org/richfaces/latest_4_2_X/Component_Reference/en-US/html/chap-Component_Reference-Tables_and_grids.html#sect-Component_Reference-Tables_and_grids-richlist
Can anyone please help ?
The border-bottom-width:10px; isn't working because the border-bottom-style is none.
The borders around <rich:datagrid> aren't defined on one element. The left and top borders are defined on the datagrid, class rf-dg. The bottom and right are defined on the grid cells, class rf-dg-c. You'll have to overwrite the classes if you want to change all the borders.
I am able to get the desired behavoiur by following changes
.tableClass1 .rf-dg-c{
border: 1px solid #000;
}
table.tableClass1.rf-dg{
border-collapse:collapse;
}
<rich:dataGrid value="#{bean.getListValues}" var="value" columns="1" rowKeyVar="index" id="qsns"
styleClass="tableClass1">
<h:panelGrid id="qsn#{index+1}" border="10" columns="2">
<h:outputText value="qsn #{index+1}"/>
<h:selectOneMenu value="#{value.qsn}">
<f:selectItems value="#{bean.qsnPool}" />
</h:selectOneMenu>
<h:outputText value="Answer"/>
<h:inputText value="#{value.answer}"/>
</h:panelGrid>
</rich:dataGrid>
With above style classes and xhtml code , borders are perfectly rendered.
First style sheet renders borders for grid cells and second style sheet collapses
the space between adjacent cell borders (since cellspacing attribute doesn't work for rich:dataGrid)
The above selectors apply only to local <rich:dataGrid> , that means not affecting globally for all <rich:dataTables>
The border attribute is not doing much, try using CSS styling:
<h:panelGrid style="border: 1px solid #000;"> ...
Or use CSS via classes:
<h:panelGrid styleClass="myClass"> ...
In your CSS:
.myClass {
border: 1px solid #000;
}

Primefaces dataTable column width , color scheme , checkboxes functionality

I am new to primefaces and jsf and facing a few problems using it.
Following is the code i am using in jsf
<p:dataTable id="plazaId" var="plaza" value="#{coverageBean.plazaDataModel}" selection="#{coverageBean.selectedPlaza}" rowIndexVar="rowIndex" width="100%" border="0" cellspacing="0" cellpadding="0" >
<p:column id="name" headerText="Select" selectionMode="multiple"
style="width:18px" />
<p:column id="plazaName" headerText="Plaza's" style="width: 50%" bgcolor="#dcdcdc">
<h:outputText value="#{plaza.name}" bgcolor="#dcdcdc"></h:outputText>
</p:column>
<p:column id="plazaDirect" headerText="Directo" style="width: 10%" bgcolor="#dcdcdc">
<h:outputText value="#{plaza.direct}" bgcolor="#dcdcdc"></h:outputText>
</p:column>
</p:dataTable>
I have checked the Beans and backend. They are all correct.
The issues are :
I like to change the width using percentage in this table . But its not working.
I like all the rows to be of the same color. But its showing alternate colors (white and blue)
And is there a way to make the checkbox of simple html style . But its a little fancy.
Could anyone help with any of there problems. Thanks in advance
I like to change the width using percentage in this table . But its not working.
You have syntax issues with your JSF view. Their is no bgcolor attribute of h:outputText, this is a style attribute.
<h:outputText value="#{plaza.name}" headerText="Plazas" style="bgcolor: #dcdcdc;" />
This is also true for the p:column component as well...
<p:column id="plazaName" headerText="Plaza's" style="width: 50%; bgcolor: #dcdcdc;">
This also should fix your background color issue.
And is there a way to make the checkbox of simple html style . But its a little fancy.
This would actually be quite difficult to do. The p:selectBooleanCheckbox is really a styled div with javascript events attached to it. Within this div is a hidden input type="checkbox" that exists as the form element that gets posted back. You can't do this without tinkering with javascript and stylesheets that I know of.
As of today, this is not possible. Refer to http://code.google.com/p/primefaces/issues/detail?id=2801
It is to do with styling. Define style as required.
It is to do with styling. Define style as required.

Resources