Primefaces renders without css styles?

Question

I've browsed the topics related to primefaces not rendering, but I couldn't find a case that matches mine.

So, when we take a look at the commanButton as an example, the button renders but it looks just like the default jsf button:

I am guessing that it's maybe because the css doesn't load?

This is what it looks like in code:

<?xml version="1.0" encoding="UTF-8"?>
<!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:ui="http://xmlns.jcp.org/jsf/facelets"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:p="http://primefaces.org/ui">
<h:head>

</h:head>
<h:body>
    <p:commandButton value="Example button" />
    .
    ..
    ...
</h:body>
</html>

The primefaces library got downloaded for sure - i can see it in External Libraries section:

here's my pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>Catering</groupId>
  <artifactId>Catering</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>Catering Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
    <groupId>junit</groupId>
  <artifactId>junit</artifactId>
  <version>3.8.1</version>
  <scope>test</scope>
</dependency>
<dependency>
  <groupId>javax</groupId>
  <artifactId>javaee-api</artifactId>
  <version>7.0</version>
  <scope>provided</scope>
</dependency>
<dependency>
  <groupId>org.hibernate</groupId>
  <artifactId>hibernate-core</artifactId>
  <version>5.2.1.Final</version>
</dependency>
<dependency>
  <groupId>postgresql</groupId>
  <artifactId>postgresql</artifactId>
  <version>9.1-901-1.jdbc4</version>
</dependency>
<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <version>1.16.10</version>
  <scope>provided</scope>
</dependency>
<dependency>
  <groupId>org.primefaces</groupId>
  <artifactId>primefaces</artifactId>
  <version>6.0</version>
</dependency>
  </dependencies>
  <build>
     <finalName>Catering</finalName>
  </build>
 </project>

And this is how I have it configured in web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app 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"
     version="3.1">
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
...
..
.

</web-app>

What are your ideas? Let me know if you need any more of the source code.

Did you inspect the network traffic via your browser developer tool? — Kukeltje, Sep 02 '16 at 08:10
It turns out to be related to security constraints defined in web.xml . When i remove this part it surprisingly works. I am gonna describe it when i fully solve it. — Broccoli, Sep 02 '16 at 19:17

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

Ok, so the problem was caused by me having security constraint set on all files

<security-constraint>
    <display-name>pages_auth</display-name>

    <web-resource-collection>
        <web-resource-name>pages_auth</web-resource-name>
        <url-pattern>/*</url-pattern>
    </web-resource-collection>

    <auth-constraint>
        <role-name>user</role-name>
    </auth-constraint>
</security-constraint>

And then when trying to access protected resource (which refers to css file too) primefaces doesn't get rendered properly on the login page. It is descibed how to solve it here: PrimeFaces not rendering when using login form authentication.

edited May 23 '17 at 12:32

Community

1
1

answered Sep 02 '16 at 19:41

Broccoli

1,249
1
13
19

First of all, in the answer you don't say how it should be configured to work. Do you have a working example? Secondly that is not a bug, but exactly as you tell it to behave. If the css etc is behind a secured url, they cannot be loaded on a non-secured page. Would be a problem with plain html too. Thirdly, this part was missing in the web.xml in the question. Next time create a [mcve] and you would find this quickly – Kukeltje Sep 03 '16 at 07:14
Yeah, thanks for advice, I didn't think that security could play a role here. – Broccoli Sep 03 '16 at 09:15
Still, your answer does not contain a solution... Can you enhance it? – Kukeltje Sep 05 '16 at 19:15
For now I can't really reproduce this error to dig into that topic, but general guideline would be to pay attention to the resources you secure, try excluding css, js, and jpg files as suggested in the link. – Broccoli Sep 05 '16 at 20:35

Primefaces renders without css styles?

1 Answers1