I'm using the expression #{resource['library:file']} within a facelets page to generate an ajaxified button with an image within an RichFaces (4.2.2.Final) toolbar.
<h:form>
<rich:toolbar height="40px">
<rich:toolbarGroup>
<a4j:commandButton value="my label" image="#{resource['icons:icon32.gif']}"/>
</rich:toolbarGroup>
</rich:toolbar>
</h:form>
generates the following code for the a4j:commandButton where the context path is generated twice.
<input type="image" alt="my label"
src="/com.test.my.context/com.test.my.context/faces/javax.faces.resource/icon32.gif?ln=icons"
value="my label"
onclick="RichFaces.ajax("j_idt73:j_idt76",event,{"incId":"1"} );return false;"
name="j_idt73:j_idt76" id="j_idt73:j_idt76">
If I use <h:graphicImage library="icons" name="icon32.gif"/> within rich:toolbarGroup the generated URL is right.
Furthermore I've include the image by css using background: url(#{resource['library:file']}) which doesn't gives the result I've searched for, but it works!
Is the expression #{resource['library:file']} only allowed within css files?
Where is the problem within my code?
According to JIRA Issue RF-12523 it's fixed in 4.3.1.Final.
Related
In a JSF, Primefaces 6 project, I get the following warning:
Unable to find component for ID dateFrom_input in view
Here is the view:
<h:outputLabel for="dateFrom_input" />
<p:autoComplete id="dateFrom" ...></p:autoComplete>
p:autoComplete is replaced by:
<span id="searchForm:dateFrom">
<input id="searchForm:dateFrom_input" name="searchForm:dateFrom_input" type="text" autocomplete="off">
...
</span>
Basically, I have to set the label for component dateFrom_input to get the feature working (I mean clicking on label to jump in the field...). It works but the warning appear.
It looks I cannot make reference to something in a widget...
How two shut this warning up?
UPDATE
In a DOM point of view, what I do is correct (label for parameter set with the input ID). But in a JSF point of view, p:autocomplete field is not yet "compiled" as HTML and it cannot reach the input (which effectively take ID dateFrom_input once compiled)
Please try to use the following:
<p:outputLabel for="dateFrom" value="Click here! "/>
<p:autoComplete id="dateFrom" ...></p:autoComplete>
I must print some component from html page. I used from Prime Faces, but I have some problem.
Internet Explorer 11 add some text to printed images ("Submit Query").
Problem occur in h:commandButton which have empty value.
How I may resolve this problem??
You can achieve by using css background-image with image in order to present a background image.
<h:commandButton value=" " style="background-image: url(your-image.png)" />
If you do not want to have the appearance of a button, you can nest <h:graphicImage> inside
<h:commandLink> and instead.
<h:commandLink ...>
<h:graphicImage value="your-image.png" />
</h:commandLink>
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 defined a custom component and tried to use binding as the following:
<ui:composition ...>
<div>
<f:subview>
<a4j:outputPanel>
<h:commandButton id="t1" value="test!" />
...
</a4j:outputPanel>
</f:subview>
</div>
</ui:composition>
This component works properly until I added a binding attribute like this:
<h:commandButton id="t1" binding="#{foo}" value="test!" onclick="alert('I am #{id:cid(foo)}'); return false;" />
This component doesn't show up, and I can't find the corresponding piece of code for this button.
Anyone knows a fix?
yes, it is used multiple times
There's the cause. The binding should refer an unique reference for the component. Right now you've physically multiple components referring to one and same reference.
I'm not sure what's the concrete functional requirement is, but more than often this approach is unnecessary when you're already inside the JavaScript context. The particular example can then also just be solved as follows:
<h:commandButton id="t1" value="test!" onclick="alert('I am ' + id); return false;" />
The ID of the generated HTML element itself is namely exactly the same as JSF component client ID.
This question already has an answer here:
Ajax update/render does not work on a component which has rendered attribute
(1 answer)
Closed 7 years ago.
Hello I have this code to conditionally render components in my page:
<h:commandButton action="#{Bean.method()}" value="Submit">
<f:ajax execute="something" render="one two" />
</h:commandButton>
<p><h:outputFormat rendered="#{Bean.answer=='one'}" id="one" value="#{messages.one}"/></p>
<p><h:outputFormat rendered="#{Bean.answer=='two'}" id="two" value="#{messages.two}"/></p>
It gets the answer and renders the component but in order to see it on my page, I need to refresh the page. How can I fix this problem? Any suggestions?
The JSF component's rendered attribute is a server-side setting which controls whether JSF should generate the desired HTML or not.
The <f:ajax> tag's render attribute should point to a (relative) client ID of the JSF-generated HTML element which JavaScript can grab by document.getElementById() from HTML DOM tree in order to replace its contents on complete of the ajax request.
However, since you're specifying the client ID of a HTML element which is never rendered by JSF (due to rendered being false), JavaScript can't find it in the HTML DOM tree.
You need to wrap it in a container component which is always rendered and thus always available in the HTML DOM tree.
<h:commandButton action="#{Bean.method()}" value="Submit">
<f:ajax execute="something" render="messages" />
</h:commandButton>
<p>
<h:panelGroup id="messages">
<h:outputFormat rendered="#{Bean.answer=='one'}" value="#{messages.one}"/>
<h:outputFormat rendered="#{Bean.answer=='two'}" value="#{messages.two}"/>
</h:panelGroup>
</p>
Unrelated to the concrete problem, you've there a possible design mistake. Why would you not just create a #{Bean.message} property which you set with the desired message in the action method instead, so that you can just use:
<h:commandButton action="#{Bean.method()}" value="Submit">
<f:ajax execute="something" render="message" />
</h:commandButton>
<p>
<h:outputFormat id="message" value="#{Bean.message}" />
</p>
I know it's not the central point of the question, but as I had this problem many times in the past, I just post it here to help others who are in need.
For those who uses PrimeFaces there's a component in PrimeFaces Extension called Switch.
Sometimes you need to display different outputs or components depending on a value. Usually you can achieve this by using the ui:fragment tag. With the pe:switch util tag you won't have to declare ui:fragment tags, with different checks like ui:fragment rendered="#{!empty someController.value}", anymore.
style="visibility: #{questionchoose.show==false ? 'hidden' : 'visible'}"