PrimeFaces CSS skin not showing in login page, also JavaScript undefined errors

StackOverflow https://stackoverflow.com/questions/13822978

Domanda

I am using PrimeFaces 3.4 in my web app and for a particular page the controls are not displayed with the normal PrimeFaces skin:

<!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:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>VMS login</title>
</h:head> 
<h:body> 
  <h:form id="loginForm">
    <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />  
    <p:panel header="#{msgs['login.title']}">
      <p:panelGrid id="loginPanel" columns="2">
        <h:outputText value="#{msgs['login.username']}" />
        <p:inputText id="j_username" value="#{loginFormBean.userName}" required="true"></p:inputText>
        <p:message for="j_username" ></p:message>
        <h:outputText value="#{msgs['login.password']}" />
        <p:password id="j_password" value="#{loginFormBean.password}" required="true" feedback="false"></p:password>
        <p:message for="j_password"></p:message>
        <p:commandButton action="#{loginController.loginUsingSpringAuthenticationManager}" value="#{msgs['login.button']}" update="loginForm" ajax="true"></p:commandButton>
      </p:panelGrid>
    </p:panel>
  </h:form>
</h:body>
</html>

This outputs to:

enter image description here

The panel should have a header and so on.

The interesting thing is that in another page where I am using a <p:layout> with different panels in the layouts they display fine with their normal PrimeFaces look-and-feel.

What am I doing wrong? Thank you

È stato utile?

Soluzione

Given that it only occurs on the login page, that can happen when the authentication mechanism also kicks on requests to JSF resources like CSS/JS/image files and redirects them to the login page as well. The webbrowser would then retrieve the HTML representation of the login page instead of the concrete resources. If you have investigated the HTTP traffic in the webbrowser's developer toolset, then you should have noticed that as well.

If you're using homegrown authentication with a servlet filter, then you need to tell the filter to not redirect them to the login page, but just continue them. It are those /javax.faces.resource/* URLs (you can get that URL path as constant by ResourceHandler#RESOURCE_IDENTIFIER).

if (request.getRequestURI().startsWith(request.getContextPath() + ResourceHandler.RESOURCE_IDENTIFIER)) {
    chain.doFilter(request, response);
    return;
}

// ...

Or if you're using container managed authentication, then you should add /javax.faces.resource/* to allowed URLs which should be skipped from login checks:

<security-constraint>
    <web-resource-collection>
        <web-resource-name>Allowed resources</web-resource-name>
        <url-pattern>/javax.faces.resource/*</url-pattern>
    </web-resource-collection>
    <!-- No Auth Contraint! -->
</security-constraint>

See also Exclude css & image resources in web.xml Security Constraint.

Or when you're using 3rd party authentication framework like Spring Security, then you need to tell it the following way (assuming 3.1.0 or newer)

<http security="none" pattern="/javax.faces.resource/**" />

See also Spring Security 3.0.5.

Or when you're using PicketLink, see PrimeFaces based application with PicketLink does not show style in login page.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top