i have a "problem" with a tab component for tabView from Primefaces.
I did a tabView with dynamic tabs based on a array.
But some tabs can't be rendered, based on a boolean attribute of the object from that array .
I tried rendered="true" or "false" but nothing happens (on tab).
I use rendered="#{_item.show}" i tried use disabled feature and works fine, but is not my need.
Someone have an idea to how to solve this issue?
check my code:
<p:tabView id="tabs" value="#{myBean.list}" var="_item" orientation="left" style="height:800px!important;" >
<p:tab title="#{_item}" rendered="#{_item.show}" >
Add disabled attribute to your <p:tab> and use this style for hiding tab:
<style>
#tabs li.ui-state-disabled {
display: none;
}
</style>
Value after # is your <p:tabView> clientId, so if it is in a naming container like <h:form id="myForm"> then just change your selector to #myForm\:tabs.
rendered="false" works but it doesn't render content of the tab, not the tab itself.
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.
I'm trying to create multiple accordionPanels.
I tried to include this tag inside repeat elements (e.g. c:forEach).
The accordionPanel is well rendered, but I'm unable to switch from one tab to another.
These are some codes I tried:
<ui:repeat value="#{myBackingBean.myList}" var="o">
<p:accordionPanel dynamic="true" cache="true" multiple="true" widgetVar="accordion">
<p:tab title="Title 1">
#{o.data_one}
</p:tab>
<p:tab title="Title 2">
#{o.data_two}
</p:tab>
</p:accordionPanel>
</ui:repeat>
And also
<c:forEach items"${myBackingBean.myList}" var="o">
<p:accordionPanel dynamic="true" cache="true" multiple="true" widgetVar="accordion">
<p:tab title="Title 1">
#{o.data_one}
</p:tab>
<p:tab title="Title 2">
#{o.data_two}
</p:tab>
</p:accordionPanel>
</ui:repeat>
Both of these codes produces a list of accordionPanels, each with two tabs.
But I'm unable to switch from one tab to another: If I click one tab it does not open nor close (except for the last accordionPanel).
Noteworthy, if I put two or more accordionPanels by hand (without JSF loops) they works.
Also, I've checked the requests the browser sends when I try to open/close a tab. The requests I intercept are like:
<?xml version="1.0" encoding="utf-8"?><partial-response><changes><update id="mainForm:tabView"><![CDATA[
// something that always use the id of the HTML tag of the _last_ accordionPanel
</update></changes></partial-response>
How can I put an <accordionPanel> inside an <ui:repeat> or <c:forEach> so that I can still switch the accordionPanel's tab?
Its the problem with the widgetVar when you put p:accordion in ui:repeat, it will generate Accordion Panel components with different/dynamic Ids but not with different/dynamic widgetVar when you explicitly specify widgetVar like you're doing in your code.
Which is basically name to Javascript Object to access the Client side Api functions of p:accordion.
So If you are not using that widgetVar of p:accordions anywhere, Remove widgetVar attribute, then the widgetVar will be generated dynamically.
If you still want to use widgetVar, give dynamic name yourself, for example:
widgetVar="accordion_#{o.data_one}"
Note: I tried the above strategy with only on ui:repeat.
Using:Primefaces 3.5 and JSF 2.1.13 and its working for me.
PrimeFaces's CommandButton allows to specify an icon:
<p:commandButton value="Press me" icon="redBall" ... />
However, I need to enable/disable the icon depending on a JSF managed bean property.
I tried
<p:commandButton value="Press me" icon="#{bean.iconClass}" ... />
This works for choosing different icons, but does not allow to disable the icon altogether (i.e. get the same rendering like without the icon= attribute). I can return an empty string in getIconClass(), but PrimeFaces will still render the extra <span> for the icon inside the button, and CSS styling causes this span to be visible with a default icon.
Is there a way to tell PrimeFaces "I want no icon at all" (other than taking out the icon= attribute altogether)?
I can think of 2 ways without duplicating the button.
Supply the icon as <f:attribute> which is conditionally added by <c:if>.
<p:commandButton ...>
<c:if test="#{not empty bean.icon}"><f:attribute name="icon" value="#{bean.icon}" /></c:if>
</p:commandButton>
Set a style class which hides the icon altogether and supply it conditionally.
.hideicon .ui-icon { display: none; }
.hideicon .ui-button-text { padding-left: 1em; }
with
<p:commandButton ... icon="#{bean.icon}" styleClass="#{empty bean.icon ? 'hideicon' : ''}" />
A lame workaround would be to have 2 commandbuttons. One with icon definition and one without. And then render the correct one.
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;
}
I am creating a portal in jsf with a left menu(rich:panelMenu) and with a content area on the right side. I want to refresh only the content area with different forms on clicking the menu items in the left menu. The menu selection needs to retained. Which is the proper technique to handle this ?
Do you mean aside from specifying the ID of the content panel in the reRender attribute of your a4j commandButton/commandLink/support tag (or whatever you use as your menu) ?
UPDATE:
Well you could use an a4j include like this:
<rich:panel id="menu">
<a4j:commandLink id="link1" action="#{myBean.setContentViewIdLink1}" reRender="content">Link 1</a4j:commandLink>
</rich:panel>
<rich:panel id="content">
<a4j:include viewId="#{myBean.viewId}"/>
</rich:panel>
UPDATE#2:
The setContenViewIdLink1 might look something like this:
public void setContenViewIdLink1() {
this.contentView = "/page1.xhtml";
}