I need to use an image as background in a modalPanel title.
I'm using JSF + Richfaces.
Is is possible?
Thanks
This should be possible by inserting a header facet into the modal panel with the content that you wish to appear in the panel.
<f:facet name="header">
<div style="background: url("/bla/foo.png") repeat-x scroll 50% 50% #F36D21;" />
</f:facet>
On the inside you can just declare a div with a repeating background image as a backdrop to other content in your facet header.
Related
I need to put extra buttons in the dialog box in Primefaces.
For example I want to put some buttons like Save Update Close instead of just close button.
Is there any way to do that?
Thank you for your time.
<p:dialog ... >
<f:facet name="header">
<p:commandButton value="Hello button"></p:commandButton>
</f:facet>
But it will appear on the left side of dialog header. You will need to override Primefaces CSS:
.ui-dialog .ui-dialog-title
it has float: left; attribute.
Also use some browser developer tool like FireBug to fix CSS. Good luck.
This is probably a CSS problem, but I cannot understand the reason by myself.
I often found some selectonemenus behaving like the one in picture:
The dropdown field is "covered".
Then I click it, select a value and... it starts displaying correctly.
I am using Cupertino theme.
If I analyze the generated source, here's what I find:
<div class="ui-helper-hidden-accessible">
<input id="carrello:formCarrello:j_idt165_focus" name="carrello:formCarrello:j_idt165_focus" type="text">
</div>
<label id="carrello:formCarrello:j_idt165_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 0px;">
Seleziona...
</label>
The label has "width:0px;". If I remove it, the menu is displayed correctly.
Good but... I DID NOT add that attribute. Why is Primefaces adding it?
EDIT
The source of the first menu:
<p:selectOneMenu value="#{posController.rigaVendita.codiceIva}" effect="fade" converter="codiceIvaConverter">
<f:selectItem itemLabel="Seleziona..." itemValue="" />
<f:selectItems value="#{posController.codiciIva}" var="ci" itemLabel="#{ci.codice}" itemValue="#{ci}" />
</p:selectOneMenu>
The same problem in all browser.
It isn't a css compatibility issue, the fault is the "0px" width attribute!
Ok I finally found what caused the bug!
I had the same problem with selectOneMenu label.
It is because I used the default forward page navigation, that's why in some pages components were working and not in other pages.
Actually it's not working when the url is not matching the page.
Solution : concat view id with "?faces-redirect=true" in action attribute of commandLink or commandButton
This can help:
http://www.mkyong.com/jsf2/jsf-page-forward-vs-page-redirect/
http://www.mkyong.com/jsf2/implicit-navigation-in-jsf-2-0/
The same problem occurred with the PrimeFaces google map component <p:gmap> you need also to use redirection if you want to use it
( And there is another problem: if you are using a template you have to put
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>in the template.xhtml, see (primefaces GMmap inside a dialog not rendering) )
EDIT
And apparently it's OK:
PrimeFaces does not support forward based navigations within an ajax request, you need to do redirect instead or set ajax to false.
http://primefaces.org/faq.html
I've just had the same problem. I guess it was a bug of primefaces. My solution is to override zero width of that element — just add this code into your CSS file:
.ui-selectonemenu-label{
width: 100%!important;
}
I had the same problem and the solution consists in over write the css of the selectOneMenu in this case, correspond to two selectors, that are the following:
.ui-selectonemenu .ui-selectonemenu-trigger{
width: auto !important;
padding-top: 0.4em;
}
.ui-selectonemenu{
padding-right: 0px !important;
}
See the image before correction
See the image after correction
We are using iFrame to display reports generated in the application on the GUI.
The report is correctly displayed on the GUI within the iframe.
However, on certain button click I want the iframe to disappear(render=false). But to my utter disbelief, this is not happening.
Once iframe is rendered on the page, it is not getting rendered=false unless I refresh the entire page.
The iframe is placed inside <rich:layoutPanel>.
I tried keeping iframe inside <h:panelGrid> and <h:panelGroup> and rendered it using there render property however the iframe itself was not coming up.
When it came, even when render attribute of <h:panelGrid> was set to false, the iframe was not being rendered=false.
I understand that iframe will create a separate DOM against the existing DOM for the entire page but there should be some way out to render the iframe based on certain button click.
Code snippet for iFrame:
<h:panelGroup id="checkIFrame" rendered="#{Bean.renderPanelGroup}">
<iframe frameborder="0" align="left"
src="${pageContext['request'].contextPath}/moduleName/PageName.jsf"
name="PdfPnl" id="PdfPnl" scrolling="auto" width="750"
height="500" marginheight="5" marginwidth="10">
</iframe>
</h:panelGroup>
Code snippet for button on clicking which, the iframe should be rendered=false
<a4j:outputPanel id="outButton">
<a4j:commandButton value="Send" immediate="true" status="Hello"
rendered="#{Bean.renderTrueFalse}" reRender="outButton,checkIFrame"
id="Again" process="FormName" actionListener="#{bean.affirmative}"
/>
</a4j:outputPanel>
How can I render the iframe=false/true based on some button click?
You can't reRender a component that has a rendered attribute defined on it. You need to reRender a parent component of checkIFrame that has no rendered attribute defined on it.
UPDATE:
<h:panelGroup id="aParentPanel">
<h:panelGroup id="checkIFrame" rendered="#{Bean.renderPanelGroup}">
<iframe frameborder="0" align="left"
src="${pageContext['request'].contextPath}/moduleName/PageName.jsf"
name="PdfPnl" id="PdfPnl" scrolling="auto" width="750"
height="500" marginheight="5" marginwidth="10">
</iframe>
</h:panelGroup>
</h:panelGroup>
...
<a4j:commandButton reRender="aParentPanel".../>
...
Is it possible to have items in a rich:dataTable display with a different icon depending on their #{bean.type} similar to how you can alter the icon in a rich:tree and rich:treeNode?
you can add a <f:facet name="header"> in your rich column that can display any HTML, or in your rich column you can have any html which could be custom images.
you can add a rendered attribute to <h:graphicImage> based on the value of #{bean.type} or #{bean.type} could be a link to the image for to get.
for example
<h:graphicImage value="/images/icons/tables/down_icon.gif" rendered="#{carsSortingBean.sortsOrders['mileage']=='descending'}" />
<h:graphicImage value="/images/icons/tables/up_icon.gif.gif"
rendered="#{carsSortingBean.sortsOrders['mileage']=='ascending'}" />
So yes. There are lots of way's to customize the output of a dataTable
I have a JSF page with a rich:dataTable where, in each row, I put h:commandLinks to lead to pages with the details of the row selected.
I wanted to make the whole row clickable, calling the action method when the user clicks anywhere in the row.
Is that possible without JavaScript?
And if JavaScript is the only way out, what would be the best way do it? Search for a commandLink and "click" it?
Thanks in advance!
I got the whole rows clickable with a bit of styling. I made the links inside the cells occupy the whole cell with display: block; for the links and padding:0 for the cell.
So, here is what you need to do. In the JSF page, set up rowClasses and the links in each cell:
<rich:dataTable value="#{myMB.listaElems}" var="elem" rowClasses="clickable">
<rich:column>
<h:commandLink action="#{myMB.preUpdate(elem)}" value="#{elem.item1}" />
</rich:column>
<rich:column>
<h:commandLink action="#{myMB.preUpdate(elem)}" value="#{elem.item2}" />
</rich:column>
</rich:datatable>
And in the CSS sheet:
tr.clickable td {
padding: 0;
}
tr.clickable td a {
display: block;
padding: 4px;
}
And that's it!
The only downside is that you need to repeat the link in each cell, but the HTTP flow remains simple, you don't need to change any component, and it will work for h:links or good old <a> html links -- a pretty acceptable tradeoff, I'd say. :)
The basic problem is that JSF (core) is tied to the HTML table element for query-result rendering via the dataTable component. Since a JSF dataTable renders as an HTML table, the result is limited to what can be managed in columns (no out-of-the-box row control that I have seen). The HTML/CSS way to do this is quite elegant but in order to accomplish this in JSF, I believe the UIComponent renderer for dataTable would need to be overridden to output this:
<div class="table">
<a href="#" class="row">
<span class="cell">Column-1-Value</span>
<span class="cell">Column-2-Value</span>
</a>
...
</div>
With CSS styles table row and cell representing display:table, display:table-row and display:table-cell; respectively. This makes the row completely clickable but it behaves as a proper table. I have not embarked on re-writing the JSF renderers and solving the JSF commandLink and other component problems to accomplish the rendering as above but that is probably the ultimate answer. I am not a fan of JSF after fighting with it on a few projects now (as compared to lighter weight combinations of concepts from basic HTML/CSS, a sprinkling of JavaScript, clean Java/Servlets, etc).
in your datatable use this one:
<a4j:jsFunction name="selectRow" action="#{userBean.myListener" ...>
<a4j:param name="currentRow" assignTo="#{userBean.selectedRowId}"/>
</a4j:jsFunction>
its called when you select a row, and you can do whatever you want and pass the selected row with the <a4j:param ...as an option you should also be able to call yourLink.click() or something similar, but that wont be the problem to find out...
reference : Richfaces Forum
You may want to try rich:scrollableDataTable. it has attribute onRowClick which you can specify as an event attribute into a4j:support / a4j:ajax nested inside your table. This will make your row clickable.
-cheers :)
For the new RichFaces 4.x, you can use the a4j:commandLink this instead, and make the complete row selectable in CSS. Notice that the 'rowClasses="clickable"' refers to the CSS class to select the whole row:
<rich:column id="fileName" sortable="false" width="618px">
<a4j:commandLink action="#{controller.setSelectedFile(file)}"
oncomplete="window.open('#{menuBar.PrintPage}?outputType=pdf', '_blank');"
rendered="#{not controller.getButtonDisabled(file)}"
execute="#this" limitRender="true">
<h:outputText value="${file}"
style="text-align:left;width:100%;min-width:400px;"
title="${file.name} is viewable.">
<f:converter converterId="MVC.View.Converter_FilePath" />
</h:outputText>
</a4j:commandLink>
</rich:column>
Use this CSS class to select the whole row:
tr.clickable td {
padding: 0;
}
tr.clickable td a {
display: block;
padding: 4px;
}