Version :
Apache MyFaces 2.1.14
RichFaces 4.3.5
Issue:
We are migrating from jsf 1.2 to jsf 2.
I have raised a similar question here regarding style sheets.
The issue is the same style (as per answer in above question ) is not taking effect in anothet rich:dataTable component .
Finally , the built-in richfaces style sheet worked as shown in below code.
The generated html code for table header is shown also where rf-dt-shdr-c (built-in style sheet changing which solved the issue) comes into picture.
So the issue is :
Why is generated html different for the same rich:dataTable components with same styles.
The only change added in this rich:dataTable to that from others is the sorting behaviour like shown in below code :
Code :
<!-- rich faces built in style (worked )-->
.rf-dt-shdr-c{
background-image:url(../images/heading-bg.gif) !important;
background-position: left top !important;
background-color: #FFFFFF !important;
white-space:nowrap !important;
}
<!-- header class (not working ) -->
.headerClass1 {
background-image:url(../images/heading.gif);
background-color: #FFFFFF;
background-position:top left;
background-repeat:repeat-x;
}
<!-- rich dataTable with column sorting using a4j:commandLink in header -->
<rich:dataTable value="#{bean.data}" var="val" styleClass="adminTable1" headerClass="headerClass1" rows="#{bean.rowsPerPage}" rowClasses="oddRow,evenRow" render="requests" index="index">
<c:forEach items="#{items}" var="column">
<rich:column sortBy="" sortOrder="">
<f:facet name="header">
<a4j:commandLink/>
</f:facet>
</rich:column>
</c:forEach>
</rich:dataTable>
<!-- html generated for table header part for this question (rf-dt-hdr richDataTableHeader1 is missing here whereas rf-dt-shdr-c comes into play ) -->
<thead class="rf-dt-thd" id="sampleForm:req:th">
<tr class="rf-dt-shdr" id="sampleForm:req:ch">
<th class="rf-dt-shdr-c" id="sampleForm:req:j_id_1d_1_w_1" scope="col">
<!-- html generated for other rich:dataTables , -->
<thead class="rf-dt-thd" id="profForm:app:th">
<tr class="rf-dt-hdr richDataTableHeader1 rf-dt-hdr-fst" id="profForm:app:0">
<th class="rf-dt-hdr-c" id="profForm:app:j_id_67">
You are trying to set headerClass for a table that has no header defined. Your should set the header class on columns since those are the elements with a header.
Related
Using varStatus of ui:repeat is helpful to identify the odd and even rows if I display all the records in the list that is mapped to ui:repeat.
However, how do I handle a situation if I choose to display only specific records in the arraylist mapped to ui:repeat ? i.e. say for example that I display a table of students who have only scored more than 75% but my list that is mapped to ui:repeat contains the entire list of students. In this case, alternate row coloring does not work as some times consecutive rows have the same row color assigned to them. Is there an efficient workaround for this ?
Is there a similar feature like rowClasses that h:dataTable uses for ui:repeat?
You can do this by using css condition:
<style type="text/css">
.test1{
display:none;
}
.test2{
display:block;
}
</style>
<ui:repeat value="#{tabview.students}" var="dt">
<div class="#{(dt.scored gt 75) ?'test1':'test2'}">#{dt.model}</div>
</ui:repeat>
For the Odd/Even, you can use the varStatus
<ui:repeat var="item" value="#{myBean.myList}" varStatus="status">
<div class="some-class ${status.even ? 'row-even' : 'row-odd'}"> ... </div>
</ui:repeat>
CSS
.row-even {
background-color: floralwhite;
}
.row-odd {
background-color: gainsboro;
}
I have a form in which there is a selectbox, and a inputtext field with default red color.
I want to change color of inputtextfield when that checkbox is selected.
How can I do that?
I am trying to achieve in this way, but unable to get change color.
pojo:
private Boolean changeColor=false;
private boolean sign1;
public void ChangeColorEvent(){
System.out.println("inside color change event");
changeColor=true;
sign1=true;
}
<h:outputText value="understood and Signed?: " />
<p:selectBooleanCheckbox label="Yes" value="#{patient.sign1}" >
<p:ajax update="hppa1" listener="#{patient.ChangeColorEvent}" />
</p:selectBooleanCheckbox>
<h:panelGroup>
<p:inputText id="hppa" size="5" style="color:White;background:Red;" rendered="#{!patient.changeColor}" />
<p:inputText id="hppa1" size="5" rendered="#{patient.changeColor}" style="color:White;background:Green;"/>
</h:panelGroup>
You can use the approach suggested by Daniel. Or a slightly different version would be this
<p:inputText id="hppa1" size="5" style="#{patient.changeColor eq true ? 'color:White;background:Green;' : 'color:White;background:Red;'}"/>
Saves you unnecessary markup and processing!
UPDATE: btw, you can very well handle these events in Javascript if you do not need any server side reflection of the sign1 boolean flag
Alternative approach with jQuery using styleClass as #Daniel mentioned would be like this :
Define style classes in your css:
.red {
background-color: red;
}
.blue{
background-color: blue;
}
Have just one p:inputText (your approach with switching between two of them is really wrong) and add a styleClass="red" to it.
<p:inputText id="inputID" styleClass="red"/>
Then define this function :
<script type="text/javascript">
function changeColor(param){
if (jQuery("[id*="+param+"]").hasClass('red')){
jQuery("[id*="+param+"]").removeClass('red');
jQuery("[id*="+param+"]").addClass('blue');
}
else {
jQuery("[id*="+param+"]").removeClass('blue');
jQuery("[id*="+param+"]").addClass('red');
}
};
</script>
And use it in p:selectBooleanCheckbox:
<p:selectBooleanCheckbox onchange="changeColor('inputID')"/>
Note 1: [id*="+param+"] in jQuery is because primefaces adds ids to your element (p:inputText) depending on what wraps it (eg. form, dataTable, ...). With [id*="+param+"] you can basically escape these added ids and find your desired inputText.
Note 2: If you want to work only with red class you can use :
function changeColor(param){
jQuery("[id*="+param+"]".toggleClass('red'));
};
EDIT: This approach has no problem with initial stage which you mentioned in comment to #NikhilPatil answer.
for start add id to your <h:panelGroup id="myWrapper">
and change the p:ajax to this <p:ajax update="myWrapper" ....
You can't update elements that are not rendered... read this Similar issue
Or , an alternative solution (since you are using primefaces) is to change your <h:panelGroup> into <p:outputPanel id="panel" autoUpdate="true"> and leave alll the rest the way it was
Output panel is a container element with several use cases, this example uses an autoUpdate outputPanel to update a component page which doesn't exist on page initially and rendered based on a condition.
Output Panel
But the way you are trying to change color is completely wrong... instead of hiding and displaying the element you should modify the css attributes of ONE element...
define 2 css classes like this
.classOne{
color:White;
background:Red;
}
.classTwo{
color:White;
background:Green;
}
.classThree{
color:White;
background:Blue;
}
and change the styleClass="" of your <p:inputText id="hppa1"
like this
<p:inputText id="hppa1" styleClass="#{patient.className}".....
add String changeColor to your bean + getter/setter and change its values from classOne to classTwo ....
I have a XUL tree formed using XML template. I have treecol for URL's and I want to embed those url's as a hyperlink.
<tree id="myTodoListTree" flex="1" seltype="multiple"
datasources="file://C:/mercredi.xml" ref="*" querytype="xml" >
<treecol id="url" label="Facebook" flex="1" />
<template>
<query expr="CONTACT">
<assign var="?facebook" expr="./URL/text()"/>
</query>
<action>
<treechildren id="myTodoListTreeChildren">
<treeitem uri="?">
<treerow>
<treecell value="true" editable="false" label="?facebook"/>
</treerow>
</treeitem>
</treechildren>
</action>
</template>
</tree>
This thread has similar problem but no proper solution.
How to embedded a link in a XUL treecell?
Even in the Mozilla website referred by the above link has no proper solution.
I couldn't find any refrence in XUL School mozilla website.
For emaple, this is one of the url item in the tree-cell: It's a duplicate value
http://www.facebook.com/profile.php?id=101112487211054
Using CSS I can assign something to the entire treecolumn like this: it works.
treechildren:-moz-tree-column {
border-right:1px solid rgb(220,220,220) !important;
}
When i tried to assign to the specific column, it's not working.
#url>treechildren::-moz-tree-column(hover){
cursor: pointer;
text-decoration: underline;
}
This selector is wrong: #url>treechildren::-moz-tree-column(hover). The cell with id url does not have <treechildren> in it, the <treechildren> has a cell in it. Try something like this instead: treechildren .url::-moz-tree-column(hover), which selects any cell with the classs url.
I have a data table which has two images per column, one that is displayed and also a hidden image that is not. The idea is to dislpay the hidden image on top of the other image if an attribute #{person.isLocked} result set is set to 'T'. My code has a div and within that div has two div's, one for the main image and then one for the image that will be overlayed. (Code below) The image that is to be overlayed has a style attribute display: none; . I need somehow to check to see if the #{person.isLocked} equals 'T', if so then I need to change the css to display:block; else leave it be.
<p:dataGrid var="person" value="myBean.people">
<p:column>
<h:panelGird style="margin-left:auto; margin-right:auto;">
<div>
<div style="position:absolute; z-index:1;">
<p:graphicImage value="image?id=#{person.id}" cache="false"/>
</div>
<div style="position:absolute; z-index:100; display: none;">
<p:graphicImage value="./images/lock.png" cache="true"/>
</div>
</div>
</h:panelGrad>
</p:column>
</p:dataGrid>
The only solution I have come up with is instead of storing 'T' or 'F' in the database as #{person.isLocked}, store the css attribute instead, so I would store 'block' or 'none' and then call the person attribute in the style like so.
<div style="position:absolute: z-index:100; display: #{person.isLocked}">
<p:graphicImage value="./images/lock.png" cache="true"/>
</div>
This seems like a bad design though. I don't want to manipulate the data in my database just for display purposes. Has anyone found a different way of doing this?
I've never used Primefaces, but you could try
<ui:fragment rendered="#{person.isLocked}">
<!-- your div here -->
</ui fragment>
We add Struts errors and messages using ActionSupport.addActionError(...) and addActionMessage(...) and then output the results using <actionerror class="x"/> and <actionmessage class="x"/>.
When these tags output the messages they output in the form: <ul><li><span class="x">msg</span></li></ul>
As you can see you can specify the css class (in this example 'x') to apply formatting. Problem is that we want to apply the margin-top and margin-bottom css properties and you can't use these properties (I gather) with <span> elements - only with <div> elements.
So is there anyway you can get these Struts tags to output error/message using a <div> instead of a <span>?
Thanks.
Update:
As per the answer/workaround below, I just enclosed the struts tag within a div:
<div class="error-status">
<s:actionerror cssClass="error"/>
<s:actionmessage cssClass="status" />
</div>
The error-status CSS class set the properties on the LI:
.error-status LI { MARGIN-TOP: 5px; MARGIN-BOTTOM: 5px; display: block; }
.error { COLOR: red }
.status { color: #0066CC }
You can apply margin to spans if you also apply display:block.
But the optimal solution is to apply margin to the li elements.