Home / Questions / 35902
Accepted
Pablo García Tamarit
Asked: 2020-11-25 23:02:31 +0800 CST 2020-11-25 23:02:31 +0800 CST

GlassFish StandAlone does not load images, JSF elements in primefaces and CSS elements

  • 772

I have a project in netbeans that works perfectly. But, I load .war in my glassfish standalone 4.1 (This version is the same as netbeans version)

I make the default .war from netbeans (clean and build)

In the project deployed in GFish StandAlone it does not show neither photos nor the elements inside the main components. Also, the primefaces theme doesn't load the CSS

Sample of the use of images and css in the .xhtml

<h:head>
    <h:outputStylesheet library="resources" name="css/login.css"/>
    <style type="text/css">
        body{

                background-image: url("resources/images/fondoBlanco.jpg");
                background-size: cover;
                background-repeat: no-repeat; 
                background-attachment:fixed;
        }
    </style>
</h:head>

Sample button images

    <p:commandLink action="#{loginBean.sessGmail()}" ajax="true" type="submit" >
        <h:graphicImage library="resources" name="images/iconGmailBlack.png" style="width: 150px; height: 150px; "/>
        <f:param name="idParamtro" value="#{loginBean.userLog}" />
    </p:commandLink>

All help is appreciated

jsf

1 Answers

  1. Best Answer

    If it works in GF/Netbeans, it will work with the "standalone" GF unless it has a configured datasource,connectionpool, Realm, if that is the case, you have to configure it manually since there are times when glassfish-resources.xmlit is not taken into account. (a bit absurd but it happens). But if this is the case you should get some kind of StackTrace. You can check server logto see what's going on since you're not using Netbeans, so you have no way to see the "console". you can find the server log at:

    [lugar_de_instalación]\glassfish\domains\domain1\logs

    in my case:

    C:\Program Files\glassfish-4.1.1\glassfish\domains\domain1\logs

    Most likely, this file will clarify why it is not working as it should, but I don't think it has much to do with the deployment descriptor web.xmlsince it is configured by netbeans when creating a web project.

    If you modified it, make sure you have at least the following configuration, otherwise the pages will not be able to be interpreted by the browser:

    <?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" 
         xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">    


     // Activar el Servlet que se encarga de 
     // crear HTML a partir de etiquetas JSF
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>        
    </servlet>

    // Vincular el "Faces Servlet" 
    // con recursos que estén acorde al "url-pattern"
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>

    // Establecer qué página mostrar al iniciar la app.
    <welcome-file-list>
        <welcome-file>welcome.xhtml</welcome-file>
    </welcome-file-list>

</web-app>

    EDITION

    JSF helps us load external resources dynamically through the resource handler .

    This works as follows:

    1. You have to create a folder called resources inside WebContent or Web Pages, it will have the resources that are going to be used in the app.
    2. To call a resource, do the following:

    With this structure:

    -Web Pages
    |___ WEB-INF
    |___ resources
            |__ css
            |    |_ estilosIndex.css
            |__ js
            |    |_ index.js
            |__ imagenes
                 |_ avatar.png

    If we want to call a resource CSS|Javascriptwe use:

    <h:outputStylesheet library="css" name="estilosIndex.css" />

    either

    <h:outputStylesheet name="css/estilosIndex.css" />

    There is no need to explicitly call the folderresources

    The same goes for javascript:

    <h:outputScript library="js" name="index.js" />

    either

    Ok, now what about PrimefacesJSF components <h:....

    To call an image resource located in resources/you have to use the attributename

    <h:graphicImage name="imagenes/avatar.png" />

<p:graphicImage name="imagenes/avatar.png" />

    either

    <h:graphicImage name="avatar.png" library="imagenes"/>

<p:graphicImage name="/avatar.png" library="imagenes"/>

    The attribute valueis for binary information.

    To call resources from a file css|js, use the resource bundle:

    body{
  background: url("#{resource['imagenes/avatar.png']}");
}
    • 1