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.
Related
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.
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 have a situation when I want a primefaces' dialog to be displayed only under some conditions so what I made is to set visible attribute. Now I wonder, is it possible to hide component in rendered html when visible is set to false? Let's say someone wiser will work with my application and he will decide to display page's source code and there he will notice my hidden dialog and then he will remove my 'visible' attribute. What happens is that dialog will be displayed to him although it shouldn't be shown. Of course I can write my methods in such way that even if he display the dialog he will not be able to do anything wrong but I would prefer to remove my dialog from rendered html. Is it possible?
Use the rendered attribute and set it to false.
<h:panelGroup layout="block" id="enclosing-panel">
<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40" rendered="#{somecController.dialogRendered}">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
</h:panelGroup>
Whenever you need the dialog use ajax to refresh a div(<h:panelGroup/>) enclosing the dialog.
<p:commandButton value="show dialog" type="button" oncomplete="PF('dlg1').show();" actionListener="#{somecController.refreshPanel}" update="enclosing-panel" />
I want to show the icons without buttons but it doesn't work. I get the following message: no Mime-Type was Found.
The two icons are default icons from Primefaces.
I use JSF 2.1 and primefaces 3.5
<h:graphicImage rendered="#{!task.IS_SEEN}" name="ui-icon-mail-closed"/>
<h:graphicImage rendered="#{task.IS_SEEN}" name="ui-icon-mail-closed"/>
If I use buttons it would work or can I set that the button can not be pressed
<p:commandButton rendered="#{!task.IS_SEEN}" icon="ui-icon-mail-closed" />
<p:commandButton rendered="#{task.IS_SEEN}" icon="ui-icon-mail-open" />
If you want just a clickable image that trigger an action in the backing bean I suggest wrapping a graphic image in a h:commandLink.
<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
<h:graphicImage value="your-image-here"/>
</h:commandLink>
If you want easy to use, nice, vectorial icons I suggest you to check Font Awesome http://fontawesome.io/icons/ as well.
To use Font Awesome just include the following line in your <h:head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>
Then you can easily put the icons inside commandLinks in this simple way:
<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
<i class="fa fa-envelope"></i>
</h:commandLink>
Also you need specify css class ui-icon like this:
<h:panelGroup styleClass="ui-icon ui-icon-mail-closed" />
those are in fact CSS classes that point to a sprite file, so technically they are not icons.
try using:
<h:panelGroup styleClass="ui-icon-mail-closed" rendered="#{!task.IS_SEEN}" />
and if there's a need style it accordingly with padding.
I have a p:selectOneListbox within an h:form but without the value attribute becuase I need to use it only for presentation purposes (only for showing another inputbox, but value submit is not required for this component). But when I try to submit the form using h:commandButton's actionListener that is unsuccessful unless the component's value is binded to a bean using value attribute.
How do I submit the form without needing to specify the value attribute for this p:selectOneListbox?
<p:selectOneListbox >
<f:selectItems ... />
</p:selectOneListbox>
Is there any way I could tell what components to exclude from being processed instead of telling what all to process(as that would bloat up the code unnecessarily with a long list of ids
) ?!
You could put the p:selectOneListbox> into another form and then change its position via css:
<h:form id="otherForm>
<p:selectOneListbox style="position: relative; top: -50px"">
<f:selectItems ... />
</p:selectOneListbox>
</h:form>
This will move the selectBox 50px up from its normal position.
It is a kind of dirty solution and you have to fiddle to find the correct position but it should work.