I've having problems trying to customize the footer on a calendar using the f:facet tag. The content in the tag is being ignored, being the default footer shown instead.
I can customise the footer using rich:calendar attributes like showApplyButton, but I think it is not possible to remove the selected date that appears on the left of Clean button ('Netejar' in the image) without adding the Apply button, which is something my customer doesn't want.
We are using RichFaces 4.3.5.Final.
Code:
<rich:calendar
value="#{YourBeanHere.yourDateHere}"
locale="es_ES">
<f:facet name="footer">
<h:panelGrid columns="3" width="100%" columnClasses="fake, width100 talign">
<h:outputText value="{selectedDateControl}" style="font-weight:bold;" />
<h:outputText value="{timeControl}" style="font-weight:bold;" />
<h:outputText value="{todayControl}" style="font-weight:bold;" />
</h:panelGrid>
</f:facet>
</rich:calendar>
Calendar sample as it is shown with the code above:
Thanks in advance for your help.
The calendar footer is not customizable (not every component is set up to use the facets). You have to put the grid under the table and hide the footer (.rf-cal-ftr) if you need to.
i'm trying to do an horizontal menu, using JSF, Trinidad and facelets,
the menu is created so:
<f:facet name="navigation2">
<tr:navigationTree inlineStyle="display: inline-block; background: white;"
var="item" value="#{menuModel.model}">
<f:facet name="nodeStamp">
<tr:commandNavigationItem text="#{messages[item.label]}"
action="#{item.getAction}" immediate="true"/>
</f:facet>
</tr:navigationTree>
</f:facet>
the elements are taken from a menagedBean that i can't modify
I tried to play with css but nothing worked
Try switching to a <tr:navigationPane>.
<f:facet name="navigation2">
<tr:navigationPane var="item" value="#{menuModel.model}">
<f:facet name="nodeStamp">
<tr:commandNavigationItem text="#{messages[item.label]}"
action="#{item.getAction}" immediate="true"/>
</f:facet>
</tr:navigationPane>
</f:facet>
I also have some problems dealing with a custom menu, what I do is the use of jquery for the menu, so you have to create a XML with the menu and import the .js files and call the jquery library.
Im using rich faces 4.1.0 and i do want to customize the rich:dataScroller. I tried doing it in the below way, but still the labels displays as <<<< and <<. Any one knows the solution for this
Thanks!
<rich:dataScroller maxPages="20">
<f:facet name="first">
<h:outputText value="First"/>
</f:facet>
<f:facet name="last">
<h:outputText value="Last"/>
</f:facet>
<f:facet name="next">
<h:outputText value="Next"/>
</f:facet>
<f:facet name="previous">
<h:outputText value="Previous"/>
</f:facet>
</rich:dataScroller>
rich:dataScroller has fastControls as one of its attributes which helps in achieving this.
The attribute specifies the visibility of fastControls. Possible values are: "show"
(controls are always visible ). "hide" (controls are hidden. "auto" (unnecessary controls
are hidden). Default value is "show".
Explanation for this can be found in rich:dataScroller docs. See also
I would like to be able to conditionally omit a footer from a PrimeFaces panel element:
<p:panel header="some text">
<f:facet name="footer">
#{message}
</f:facet>
<!-- ... -->
</p:panel>
I hoped that the rendered attribute would work:
<p:panel header="some text">
<f:facet name="footer" rendered="#{!empty message}">
#{message}
</f:facet>
<!-- ... -->
</p:panel>
But the footer is still rendered, with empty content. It appears that facet does not have the rendered attribute: http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_facet.html.
What's the right way to do this?
I was able to solve this by swapping the facet out for an attribute. To summarize:
This works
<p:panel ...>
<f:attribute name="footer" value="#{message}"/>
<!-- ... -->
</p:panel>
But this doesn't work
<p:panel footer="#{message}">
<!-- ... -->
</p:panel>
Neither does this
<p:panel ...>
<f:facet name="footer">#{message}</f:facet>
<!-- ... -->
</p:panel>
Nor this
<p:panel ...>
<f:facet name="footer">
<h:outputText value="#{message}" rendered="#{!empty message}"/>
</f:facet>
<!-- ... -->
</p:panel>
by "works" I mean:
"renders no footer — not just an empty footer — when #{message} is empty or null; otherwise, correctly renders the footer with the specified text."
PrimeFaces forum thread on this issue
You could declare a ui:param and let the template check the param while renderring.
The facet in the template could then be declared as:
<f:facet name="#{hideFooter == null or not hideFooter ? 'footer' : ''}">
#{message}
</f:facet>
Any page can then declare this param
<ui:param name='hideFooter' value='#{some rule}' />
and set the appropriate rule for the param. For any page that does not declare the param, the footer will be displayed.
Here's what I did in trying to conditionally render a facet within a composite component.
<composite:interface>
<composite:facet name="header" required="false" />
</composite:interface>
<composite:implementation>
<p:panel>
<c:if test="#{empty component.facets.header}" >
<f:facet id="#{cc.attrs.id}_default_header" name="header">
all sorts of stuff here
</f:facet>
</c:if>
<c:if test="#{not empty component.facets.header}">
<composite:insertFacet id="#{cc.attrs.id}_custom_header" name="header" />
</c:if>
<composite:insertChildren id="#{cc.attrs.id}_content"/>
</p:panel>
</composite:implementation>
This let's the user of the composite component supply the header facet if they want, and if they don't, we supply a default. Obviously, instead of providing a default, you could simply not do anything.
This mixes c:if in jsf controls, but we didn't see any adverse effects.
I have come across a similar issue with plain JSF. I am not sure how a <p:panel> is rendered, but if it is rendered as a table, you can try this:
First, declare a CSS-class like this:
.HideFooter tfoot {
display: none;
}
Then set that class conditionally on the panel:
<p:panel styleClass="#{renderFooterCondition ? null : 'HideFooter'}">
The footer is still rendered in the JSF-sense, but it is not displayed and does not take up any space in the page when viewed by the user-agent.
I successfully solved this problem using ui:fragment
<ui:fragment rendered="...Test...">
<f:facet name="footer">
...
</f:facet>
</ui:fragment>
works for example to conditionnaly render the footer of a primefaces datatable (the rendered attribute of the facet does not work).
Not sure how well this would work for your footer, but I had the same issue with a legend I was trying to conditionally render. I fixed it by using the rendered on anything inside the facet tag.
<p:fieldset>
<f:facet name="legend">
<h:outputText value="#{header1}" rendered="#{header1.exists}"/>
<h:outputText value="#{header2}" rendered="#{not header1.exists}"/>
</f:facet>
content
</p:fieldset>
I had difficulty trying c:if with my ui:repeat, so this was my solution. Not quite the same as your problem, but similar.
Facets are not intended to render HTML, which is why it doesn't have the rendered attribute. Facets add functionality to a page. The term facet is probably a poor choice of name. It's very ambiguous.
..if the list compiled by ITworld's Phil Johnson has it right, the
single hardest thing developers do is name things.
ie.
JSF facets
A project facet is a specific unit of functionality that you can add to a project when that functionality is required. When a project facet is added to a project, it can add natures, builders, classpath entries, and resources to a project, depending on the characteristics of the particular project. JSF facets define the characteristics of your JSF enabled web application. The JSF facets specify the requirements and constraints that apply to your JSF project.
The JSF facets supply a set behaviors and capabilities to your web application.
This is a counter-answer to the answer from Ludovic Pénet.
This worked for me in <f:facet name="footer"> in selected p:column items of a p:dataTable (Primefaces 5.3):
...
Note how I have the ui:fragment inside the f:facet, not outside (not wrapping) it. It definitely completely removes the entire row when every footer facet is tested to NOT render (as far as I can tell, independent of the content within the ui:fragment).
Try with this, from primefaces web page
<p:columnGroup type="footer">
<p:row>
<p:column colspan="3" style="text-align:right" footerText="Totals:" />
<p:column footerText="your value in ajax" />
<p:column footerText="your value in ajax" />
</p:row>
</p:columnGroup>
clik here, to view primefaces' webpage
For those who landed here trying to hide the footer, instead of header, but the syntax component.facets.footer didn't work, should try this:
<p:panel id="panelContent">
<c:if test="#{not empty cc.facets.footer}">
<f:facet name="footer" height="100%">
your content
</f:facet>
</c:if>
</panel>
Why don't you enclose the content of the footer into a panelGroup which has the rendered attribute?
This way:
<p:panel header="some text">
<f:facet name="footer">
<h:panelGroup rendered="#{!empty message}">
#{message}
</h:panelGroup>
</f:facet>
<!-- ... -->
</p:panel>
I do it in my weapp and it works, no footer is rendered.
I don't use primefaces though, I do it with h:datatable, but I think that it must works with p:panel too.
I try this solution and ok. (http://www.coderanch.com/t/431222/JSF/java/dynamically-set-panel-header-condition)
<rich:dataGrid value="#{myMB.student.list}" rendered="#{!empty myMB.student and !empty myMB.student.list}" var="st" rowKeyVar="row">
<rich:panel>
<f:facet name="header">
<h:panelGroup id="panelHeader">
<h:outputText value="Just one student" id="header1" required="true" rendered="#{!myMB.manyStudents}"/>
<h:outputText value="#{row+1}º Student" id="header2" required="true" rendered="#{myMB.manyStudents}"/>
</h:panelGroup>
</f:facet>
<rich:panel>
I specified this
<rich:panel>
<f:facet name="header">
Panel #1. Changing Style Synchronously
</f:facet>
Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
classes overwrite the ones come from the skin.
</rich:panel>
from the RichFaces demo, in my JSF page and no header appears, although I've nothing in my css which would interfere. What might be the reason for this?
Thanks
i dont see any problem with using f:facet
try
<f:facet name="header">
<div><h:graphicImage value="/images/search.png" />
<h:outputText value=" Action Logs Search" /></div>
</f:facet>
in order to regenerate the error you mentioned
Mine disappeared when I accidentally included the panel's facets in the panel form. The facets must be children of the modal panel:
<rich:panel>
<a4j:form> <!-- This is trouble! -->
<f:facet name="header">
Panel #1. Changing Style Synchronously
</f:facet>
Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
classes overwrite the ones come from the skin.
</a4j:form>
</rich:panel>
OK, do please feel free to comment on why the f:facet tag is not working, but I get my nice shiny headers when I change the code so it's like this instead:
<rich:panel header="header">
Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
classes overwrite the ones come from the skin.
</rich:panel>