I updated PrimeFaces from 6.0 to 12.0.0. It was also necessary to replace PrimeFaces Layout component to PrimeFaces FlexGrid. After this changes icons are not displayed on any component.
Example:
<p:commandButton title="Wyświetl" icon="fa fa-search" actionListener="#{myRequestBean.showRequest(res)}" />
<th align="right"><span class="ui-inputgroup-addon"><i class="fa fa-lock"></i></span> </th>
Tested on Firefox, IE, Edge the same results
Always follow the migration guides when you upgrade PrimeFaces.
As mentioned in the guides 8 → 10 and 10 → 11 FontAwesome has been removed in 11. This does not mean you cannot use it, it's just not bundled with PrimeFaces anymore. If you want to use it, you should load it.
See also:
How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file
How to use Font Awesome from webjars.org with JSF
The simple solution:
download, import: font-awesome-4.3.0.jar
add context-param
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>
import it to xhtml:
<h:outputStylesheet library="webjars" name="font-awesome/4.3.0/css/font-awesome-jsf.css" />
Related
Primefaces 7.0, JSF 2.1.19
I am trying to replace richfaces 3.3.3 with primefaces 7.0 (and upgrade JSF to 2.1) and got a special behaviour from the fileUpload widget: When I first render the page it works without problems (no fileupload done, just render it), then I navigate again to the same page it is broken:
The fileupload component:
<p:fileUpload disabled="#{antragAttachments.fileUploadDisabled}" id="attachmentUpload" widgetVar="attachmentUpload" binding="#{antragAttachments.fileUpload}"
fileUploadListener="#{antragAttachments.fileUploadListener}" label="Durchsuchen..." uploadLabel="Datei anhängen" cancelLabel="Abbrechen" invalidFileMessage="test typ"
mode="advanced" fileLimit="1" sizeLimit="15728640" invalidSizeMessage="Der Dateianhang ist zu groß! Die maximale Größe beträgt 15MB!" previewWidth="1"
oncomplete="uploadComplete();" auto="true">
</p:fileUpload>
This is the (menu) component the navigate again to the xthtml:
<ui:repeat value="#{name}" var="item" >
<div id="menuOP" class="ebene#{item.shifting} #{item.selected ? 'divselected' : 'divnotselected'} #{item.spriteClass}">
<p:commandLink immediate="#{item.immediate}" value="#{item.label}" rendered="#{item.enabled}" action="#{item.navigate}"
styleClass="#{item.selected ? 'selected' : 'notselected'}" oncomplete="#{item.oncomplete}"/>
<h:outputText id="menuNoLinkText" rendered="#{!item.enabled}" styleClass="disabled" value="#{item.label}" />
</div>
</ui:repeat>
I tried to remove the immediate, set the type to "submit", use h:commandLink (without the oncomplete of course) just to see if I can get this running somehow. Does not work.
I also looked at the Primefaces fileupload introduction from balusC, but my problem is not the fileupload, it is the second rendering. There is also a Primefaces forum entry about something similar, but the trick von melloware did not work also.
What I do not understand, by the first click on the menu the rendering works fine and after every click on the menu-commandlink the browser console tells me that the widget is not available.
I found examples with similar problems, but there is most of the time a javascript call of the widget like PF('attachmentUpload').doSomething(), but this is not the case here.
EDIT:
I found out that when I first click on the commandlink the fileupload.js is loaded:
By the second click this is not the case anymore:
I also found a thread with the same problem: <p:layout> and <p:fileUpload> not working on page refresh, but there the only solution seems to be to take the css and js for fileupload and add it manualy to as resource... which is a little creepy...
I am using PrimeFaces 3.5 and trying to use the pe:codeMirror tag from primefaces extensions.
I added primefaces-extensions-3.2.0.jar and resources-codemirror-3.2.0.jar.
(also tried with 4.0.0 for these two jars - same behavior).
I added
xmlns:pe="http://primefaces.org/ui/extensions"
My xhtml has:
<pe:codeMirror mode="javascript" value="#{grouperBean.selectedSearchName}" lineNumbers="true" theme="eclipse"/>
The bean is a session bean:
#ManagedBean(name = "grouperBean")
#SessionScoped
But on the page it seems to not expand - it stays a pe tag and therefore the browser shows nothing. I.e. when I look at the html page I see:
<tr class="ui-widget-content" role="row"><td role="gridcell" colspan="2">
<pe:codeMirror mode="javascript" value="" lineNumbers="true" theme="eclipse">
</pe:codeMirror>
</td></tr>
What am I missing that makes it not expand?
Any help greatly appreciated
I am not using PrimeFaces theme and don't want to use any theme. For calender the image and icons are not coming. Only blank button is coming. Please let me know how to get all the icons without using any PrimeFaces theme.
My .xml code is
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>none</param-value>
</context-param>
and my .xhtml code is
<p:calendar value="#{calendarManagedBean.date}" showOn="button" />
I am not able to upload the image. But calendar is coming and button also. But calendar icon and calendar internal icons are not coming
Edit - please see bottom.
I've got a primefaces calendar component on my page. The textbox appears but when I click it the calendar does not appear. Here is the component code.
<p:calendar id="clientApptTime" value="#{ScheduleMB.datePrime}"
pattern="HH:mm" timeOnly="true" />
My facelet and the template both use h:head and h:body tags and I have the
xmlns:p="http://primefaces.org/ui" up top.
I'm using primefaces 3.3.1, java 1.6 and Mojarra 2.1.
Also I'm not getting any error messages on either the server or my error console.
Anybody have any ideas?
And here is the rendered page source:
span id="j_idt34:clientApptTime"><input id="j_idt34:clientApptTime_input"
name="j_idt34:clientApptTime_input" type="text" class="ui-inputfield ui-widget
ui-state-default ui-corner-all" /></span><script id="j_idt34:clientApptTime_s"
type="text/javascript">$(function()
{PrimeFaces.cw('Calendar','widget_j_idt34_clientApptTime',
{id:'j_idt34:clientApptTime',popup:true,locale:'en_US',dateFormat:'m/d/y
hh:mm',timeOnly:true,stepHour:1,stepMinute:1,stepSecond:1,hourMin:0,hourMax:23,minuteMin:0,
minuteMax:59,secondMin:0,secondMax:59});});</script>
Answer seems to be that Primefaces will not work with Tomahawk. After I removed all the Tomahawk references Primefaces worked fine. Anyone know what I can do about that (this may be a question for another post)?
I have an h:selectOneMenu and an a4j:commandButton, the latter of which reRenders a component called content which looks like this:
<rich:panel id="content">
<a4j:include viewId="#{MyBacking.viewId}" />
</rich:panel>
When the response is rendered and the component loads the content of the new JSP page, the tabs contained in that page use a skin that is different from the rest of the app (I think default blue).
I've noticed that after the included code is loaded, if I hit refresh, although this causes the bean to reissue the page contents, the skin is properly assigned.
My web xml says:
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>glassX</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>enable</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name>
<param-value>enable</param-value>
</context-param>
Is this effect because RichFaces is in some way not in control of the rendering of the tabs at this point?
How can I ensure the tabs conform to the skin? All the documentation is relating to overriding a skin, and I'd rather not have to override and skin with the skin that it should already have.
Thanks
I am not sure if it will solve your problem, however you can try to force Richfaces to avoid using the default skin by setting a specific web.xml parameter:
<context-param>
<param-name>org.richfaces.LoadStyleStrategy</param-name>
<param-value>ALL</param-value>
</context-param>
You can find more details about this property here.
edited, to set the correct param-value, as stated in the comments.
I've just noticed I'd included a styleClass parameter - and because the jsp is now included didn't have access to the css facet reference.