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>
Related
How do i add a "custom" button in p:schedule? I tried doing it with the help of a header facet like in the p:dataTable component, but to no avail.
Sorry for being unclear initially, it also probably didnt help that someone butchered my question by editting it's title, here are more details with snippets of code.
I want to do somthing similar to this:
<p:tab title="#{bean.name}" value="bean" >
<f:facet name="title">
<h:outputText value="#{bean.name}"/>
<p:selectBooleanButton styleClass="...">
<p:ajax converter="... />
</p:selectBooleanButton>
</f:facet>
</p:tab>
The code is creating a tab (for an accordionpanel) with a text+button in it instead of the default text only.
I am looking for the same behaviour in a p:schedule component.
<p:schedule value="#{scheduleView.lazyEventModel}" leftHeaderTemplate="today" centerHeaderTemplate="prev, title, next" rightHeaderTemplate="month, agendaWeek" >
<f:facet name="header">
<h:outputText value="#{bean.name}"/>
<p:commandButton styleClass="..."/>
</f:facet>
</p:schedule>
The same add a button to the header principle, except this time on schedule. And of course since schedule does not have any facets available for overwriting this approach does not work.
Finally, my question is: How do I add a button in the p:schedule header like in the picture above?
P.S: Forgive me for confusing you people with datatable, used it because it supports multiple facets (header, footer).
Client side it is all html that can be manipulated with javascript (jquery if you like).
So if you create your schedule and button like this:
<h:panelGroup id="mySchedule">
<p:schedule value="#{scheduleView.lazyEventModel}" leftHeaderTemplate="today" centerHeaderTemplate="prev, title, next" rightHeaderTemplate="month, agendaWeek"/>
<h:outputText value="#{bean.name}" id="scheduleOutputText"/>
<p:commandButton styleClass="..." id="scheduleCommandButton"/>
</h:panelGroup>
You can move the h:outputText and p:commandButton into the schedule with jquery dom manipulation.
$("#scheduleCommandButton").insertBefore(".fc-left");
$("#scheduleOutputText").insertBefore("#scheduleCommandButton");
If you put this script inside the panelGroup and update the panelGroup each time you'd normally update the schedule via ajax, the button and text should be added moved again in an update.
<h:panelGroup id="mySchedule">
<p:schedule value="#{scheduleView.lazyEventModel}" leftHeaderTemplate="today" centerHeaderTemplate="prev, title, next" rightHeaderTemplate="month, agendaWeek"/>
<h:outputText value="#{bean.name}" id="scheduleOutputText"/>
<p:commandButton styleClass="..." id="scheduleCommandButton"/>
$("#scheduleCommandButton").insertBefore(".fc-left");
$("#scheduleOutputText").insertBefore("#scheduleCommandButton");
</h:panelGroup>
You could also put the text and button in a panelgroup and move that by dom manipulation. Just make sure you use the right selectors (I did not prepended the form id to the selectors above). You can also use class selectors instead of id's. That is up to you.
But make sure you use this with care. As #JasperDeVries mentioned in a comment, it is easy to break things. Use it just sparsely, carefully and only as a last resort
I've got a datatable in a .xhtml page, that shows products of a database.
Let's say that I can only see Name and Code for every row, how can I show more detail of the product in the same page?
Moreover, my product bean is in ViewScope, so i'm not able to show details in another .xhtml page (I've tried many times, but if in case you guys have a solution for this, that's good).
PS: I don't know anything about Javascript yet, so i'd prefer mostly solutions based on jsf and java :)
You mean that you want to display more fields at datatable?
Add more columns..
<h:dataTable value="#{pr.products}" var="p">
<h:column>
<f:facet name="header">Name</f:facet>
#{p.name}
</h:column>
<h:column>
<f:facet name="header">Code</f:facet>
#{p.code}
</h:column>
<h:column>
<f:facet name="header">Price</f:facet>
#{p.price}
</h:column>
........
</h:dataTable>
JSF example: http://www.mkyong.com/jsf2/jsf-2-datatable-example/
If you using primefaces see showcase: http://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml
EDIT
If you want to make a dialog that shows the details of the selected product see at primefaces showcase the "selection" example.
Primefaces 3.5 doesn't seem to filter data at all from the datatable, oddly enough it somehow reorders them as I type, so, there must be some AJAX calls firing, but obviously not the right ones.
<h:panelGroup id="table-wrapper-component">
<prime:dataTable
rendered="#{artifactSelectionBackingBean.visibleComps}"
value="#{artifactSelectionBackingBean.components}"
var="tagInfoObject" emptyMessage="No tags found with given criteria"
filteredValue="#{artifactSelectionBackingBean.filteredComponents}">
<prime:ajax event="filter" global="false" />
<prime:column sortBy="#{tagInfoObject.tagId}"
headerText="Identifier" filterMatchMode="contains" filterBy = "#{tagInfoObject.tagId}">
<h:outputText value="#{tagInfoObject.tagId}" />
</prime:column>
<prime:column sortBy="#{tagInfoObject.type.tagTypeId}"
headerText="Tag Identifier" filterMatchMode="contains" filterBy ="#{tagInfoObject.type.tagTypeId}">
<h:outputText value="#{tagInfoObject.type.tagTypeId}" />
</prime:column>
<prime:column sortBy="#{tagInfoObject.title}" headerText="Title" filterMatchMode="contains" filterBy="#{tagInfoObject.title}">
<h:outputText value="#{tagInfoObject.title}" />
</prime:column>
<prime:column filterBy="#{tagInfoObject.description}"
filterMatchMode="contains" sortBy="#{tagInfoObject.description}"
styleClass="wrap" headerText="Component Description">
<h:outputText value="#{tagInfoObject.description}" />
</prime:column>
</prime:dataTable>
</h:panelGroup>
Any help is appreciated! All the Beans and method calls exist and return the appropriate data, just that the filtering doesn't seem to work at all.
Also, note that sorting functions properly only filtering does not!
The issue was that you always need to wrap any filtering/sorting attributes in a data table with an h:form tag. This is not explicitly specified in the documentation of PrimeFaces, however, it is in the showcase here. I wrapped the whole thing in form tags.
So, don't forget to wrap your data tables in a form if you want any type of interaction provided by primefaces.
Your managed Bean Code will do a lot of good
Post your managed bean code.
May be you have not set the value for artifactSelectionBackingBean.filteredComponents in the managed bean
I have a simpleTogglePanel set up as follows:
<rich:simpleTogglePanel
headerClass="myHeaderClass"
opened="false"
switchType="client" style="border: 0px;" bodyClass="myBodyClass">
<f:facet name="header">
<h:outputText styleClass="panelHeader" value="#{myBean.header}"></h:outputText>
</f:facet>
<f:facet name="closeMarker">
<h:outputText value="^"/>
</f:facet>
<f:facet name="openMarker">
<h:outputText value=">" />
</f:facet>
Content
</rich:simpleTogglePanel>
I want to move the open/close marker(which I have made ^ and > respectively to the left of the panel.
I have tried using float: left in myHeaderClass aswell as float:left !important and float:left;text-align: right.
Nowhere can I find anything that explains how to do this.The styling I found on sites where people were showing functionality of the simpleTogglePanel overall and this seemed to be all I didn't have.
I am using JSF 1.2(Apache MyFaces Implementation) and Richfaces 3.3.
CSS which govern the markers in rich:simpleTogglePanel is rich-stglpnl-marker as per RichFaces reference guide (scroll down for Classes names that define a component appearance section)
rich-stglpnl-marker Defines styles for a wrapper <div> element of a marker
Whereas headerClass is applicable for header elements only.
headerClass applicable to header elements
I am developing a Seam-Jsfv1.2-EJB3 web app.
I have a datatable and checkboxes in each row. Moreover, I have a datascroller at the bottom of my table as well.
My problem is when I click the next page number from the scroller, the selected checkboxes at the first page of the datatable is gone. I mean, even if they were selected, clicking the next page make them deselected. I see it by going back to the first page again by clicking the scroller.
Do you have any idea about that problem?
In order to clearify my case, I attached my code below:
<rich:dataTable
id="apiV2ProductList" rows="10" var="_apiV2Product"
value="#{apiV2ProductList.resultList}"
rendered="#{not empty apiV2ProductList.resultList}" reRender="ds">
<rich:column>
<f:facet name="header">
<h:selectBooleanCheckbox id="selectionCheckAll" onclick="selectAll()" />
</f:facet>
<h:selectBooleanCheckbox id="selectionCheck" onclick="increase(this)" value="#{_apiV2Product.selectValue}" >
</h:selectBooleanCheckbox>
</rich:column>
...
<f:facet name="footer">
<rich:datascroller id="ds" renderIfSinglePage="false">
</rich:datascroller>
</f:facet>
Many thanks in advance.
Baris
You can extend the org.richfaces.renderkit.html.DatascrollerTemplate
write your own DataScroller for your own styling by adding a component with the below configuration in faces-config.xml
<component>
<component-type>exCustHtmlDatascroller</component-type>
<component-lass>org.jsf.common.ui.EXCustHtmlDatascroller</component-class>
</component>
<render-kit>
<renderer>
<component-family>org.richfaces.Datascroller</component-family>
<renderer-type>exCustDataScrollerTemplate</renderer-type>
<renderer- class>org.jsf.common.ui.EXCustDataScrollerTemplate</renderer-class>
</renderer>
</render-kit>
Adding an a4j support tag between scroller has solved my problem:
<f:facet name="footer">
<rich:datascroller id="ds" renderIfSinglePage="false">
<a4j:support event="onpagechange"/>
</rich:datascroller>
</f:facet>
However the other thing is, I am using JQuery to style my table (ex. on mouse over and out), and this time, when I click the next page of my table, the style is gone.
Any help would be great, many thanks in advance.
**
PS: BTW the wierest thing to my mind is it comes me impossible to find a solution by yourself for this kind of problems. Your creation may not always be enough to solve (at least here in my example, adding a4j:support thing) I am asking experts, how can we handle that kind of things by ourselves...
**
You don't need jQuery for styling the datatable
<rich:dataTable id="dataTable" var="x"
onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
The problem you were seeing with the styles being removed is due to the nature of AJAX, and the way the table is reRendered.
Assuming you were firing the initial styling call based on some form of page onLoad, the first time the page is rendered, your styles will be applied. However, when you click the "next" button with the paginator, you are pulling a lot of new HTML down, and replacing the old HTML in the table with the newer, updated information. The proble you're seeing is that you saw styling because jQuery applied styles to the old nodes, upon reRender, those nodes are completely thrown away, along with their styling. You simply need to figure out the hook to call the "styling" method, and re-execute that call after the table is re-rendered.
Generally, I use an a4j:status tag, and set up the onstart or onstop to re-parse the table.