Primefaces Icon wird nicht dargestellt


#1

Hallo,

ich habe folgende .xhtml Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:fn="http://java.sun.com/jsp/jstl/functions"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<h:head>
<style type="text/css">
    .value {
        font-weight: bold;
    }
</style>
</h:head>

<h:body>
<h:form id="form">
    <p:dataGrid var="car" value="#{dataGridView.cars}" columns="3" layout="grid"
        rows="12" paginator="true" id="cars"
        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="6,12,16">
         
        <f:facet name="header">
            Cars for Sale
        </f:facet>
 
        <p:panel header="#{car.id}" style="text-align:center">
            <h:panelGrid columns="1" style="width:100%">
                <p:graphicImage name="demo/images/car/#{car.brand}.gif"/> 
 
                <h:outputText value="#{car.year}" />
 
                <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                    <h:outputText styleClass="pi pi-search" style="margin:0 auto;"/>
                    <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
                </p:commandLink>
            </h:panelGrid>
        </p:panel>
 
    </p:dataGrid>
 
    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dataGridView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dataGridView.selectedCar.brand}-big.gif"/> 
                </f:facet>
                 
                <h:outputText value="Id:" />
                <h:outputText value="#{dataGridView.selectedCar.id}" />
 
                <h:outputText value="Year" />
                <h:outputText value="#{dataGridView.selectedCar.year}" />
 
                <h:outputText value="Color:" />
                <h:outputText value="#{dataGridView.selectedCar.color}" style="color:#{dataGridView.selectedCar.color}"/>
             
                <h:outputText value="Price" />
                <h:outputText value="$#{dataGridView.selectedCar.price}" />
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>
</h:body>
</html>

Der Code ist von der Primefaces Homepage. Es funktioniert auch alles, bis auf die Darstellung eines Icons (Lupe).

<h:outputText styleClass="pi pi-search" style="margin:0 auto;"/>

Auf der PrimeFaces Homepage wird ein Lupe-Icon an dieser Stelle ausgegeben. Wenn ich den Code bei mir laufen lasse wird nichts ausgegeben.

Ich habe gelesen, dass man evtl. PrimeIcons installieren muss.

Das habe ich gemacht. Funktioniert aber irgendwie immer noch nicht.

Kann mir jemand weiterhelfen?


#2

Könnte ein Problem mit dem Pfad sein. Mach es erst mal einfacher, bevor du das in ein dynamisches Konstrukt steckst. Schreibe am besten erst mal nur den Dateinamen ohne Pfad in den Code und lege die Grafikdatei ins gleiche Verzeichnis, in dem auch deine JSF-Datei (XHTML) abgelegt ist.
Geht es dann erst mal?


#3

Das Laden von Icons innerhalb der .xhtml Datei funktioniert,

Es gibt den Bereich:

<p:graphicImage name="demo/images/car/#{car.brand}.gif"/> 

Dort werden .gifs geladen und ausgegeben. Die .gifs liegen alle im Pfad /resources/demo/images/car/…

Wie gesagt, der Rest funktioniert.

Ich dachte eher, dass das mit der

styleClass="pi pi-search"

Definition zu tun hat. Evtl. wird über CSS das Icon geladen.

Den Vorschlag die Grafik Datei in den gleichen Ordner wie die .xhtml Datei zu legen funktioniert glaube ich nicht denn Resourcen (Images) müssen unter:

webapp/resources/...

liegen.


#4

Wenn eine Style-Angabe im Code steht, wird es schon so sein. Dann musst du mal in der eingebundenen CSS-Datei nachsehen.