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:
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
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.
Related
I developed a PrimeFaces based application that I now want to protect with PicketLink in a CDI way. I followed this example and created a login page with several PrimeFaces components including a layout). All styling and functionality is however lost. Even a simplified login.xhtml page (to match the example linked to above) does not have styling.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head/>
<h:body>
<p:panel>
<h:form method="POST" prependId="false">
<p:inputText id="j_username" />
<p:password id="j_password"/>
<p:commandButton id="login" value="Login" action="#{identity.login()}" ajax="false"/>
</h:form>
</p:panel>
<p>Tip: you can login with a username/password of jane/abcd1234.</p>
</h:body>
</html>
The reason the css and js files are not loaded is because the security 'profile' in the original example has all resources protected besides a login.xhtml file. JSF by default loads resources from the 'virtual' javax.faces.resource folder. This needs to be excluded from authentication to. The HttpSecurityConfiguration in the original example should be adapted to exlude this virtual folder in the config.
public class HttpSecurityConfiguration {
public void onInit(#Observes SecurityConfigurationEvent event) {
SecurityConfigurationBuilder builder = event.getBuilder();
builder
.http()
.forPath("/javax.faces.resource/*")
.unprotected()
.forPath("/index.jsf")
.unprotected()
.allPaths()
.authenticateWith()
.form()
.authenticationUri("/login.jsf")
.loginPage("/login.jsf")
.errorPage("/error.jsf")
.restoreOriginalRequest()
.forPath("/logout")
.logout()
.redirectTo("/index.jsf");
}
}
I have a requirement to add a button in one of the xhtml component. When a user clicks the button, a new window should open redirecting the user to another xhtml file which is also in the same component project.
This is what I have in my component project,
|->src
|-> main
|->java
|->META-INF
|->faces-config.xml
|->resources
|->components
|->A.xhtml
|->B.xhtml
I need to add a button in A.xhtml file which redirects the user to B.xhtml opening a new window. This component is being used in other projects. I tried commandButton with target=_blank, a new window opens but doesn't redirect to B.xhtml.
I observed that if I use ui:include src="B.xhtml" tag in A.xhtml file, then the content of B appears in A. But couldn't find why it is not able to redirect in a new window. Not sure what I am missing and would like to know how this can be achieved.
#Sanjay you can easily achieve this by using primefaces commandbutton component by setting target as '_blank' and ajax as 'false'.
<h:form prependId="false" id="form" target="_blank" >
<p:commandButton value="Click me to open new url" ajax="false" action="B.xhtml"/>
</h:form>
Hope this helps .
you can't redirect to a component, you have to redirect to a PAGE that contains that component.
imagine you have
application
resources
components
A.xhtml
B.xhtml
pages
page1.xhtml
page2.xhtml
and
page1.xhtml contains component A
page2.xhtml contains component B
page1.xhtml contains
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions"
xmlns:cc="http://java.sun.com/jsf/composite/components">
<ui:composition template="/WEB-INF/templates/template.xhtml">
<ui:define name="content">
<cc:a value="someValue" foo="someBar"/>
</ui:define>
</ui:composition>
</html>
and A.xtml is
<h:form prependId="false" id="form" target="_blank" >
<p:commandButton value="open" ajax="false" action="page2.xhtml"/>
</h:form>
so, upvote for #Java, since your answer is almost correct, just change action to address a page and not a component in resources
I am using Primefaces 3.3.1. My use case is very simple, after login user will land on his home page.
Home page is displaying a p:layout with west and center portion.
In Firefox 11 and IE 9 this doesn't show up after login button is pressed but if I do a refresh or reload of the page it displays correctly. But in Chrome after login layout is displayed correctly, no need to do manual refresh.
I am not sure why this is not working for Firefox and IE.
home.xhtml
<!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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:layout style="min-width:400px; min-height:200px;">
<p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="false" collapsible="true">
</p:layoutUnit>
<p:layoutUnit position="center">
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Has anyone encountered similar issue?
In Firebug I don't see any errors.
Update:
It seems this is happening because .ui-layout-unit has visibility = hidden. But why?
I had the same problem, however I followed the initial directions from this thread (serializable and config on the web.xml). Finally I added the <form> tag for the main layout.
Useful links:
http://forum.primefaces.org/viewtopic.php?f=3&t=13901&p=76327#p76327
http://forum.primefaces.org/viewtopic.php?f=3&t=22685
I'm trying to incorporate primefaces into my JSF 2.0 web project.
I've recently updated from facelets 1.x to 2.0 and Added primefaces jar to my library folder. Everything is fine except, the way I have my templates structured has a conflict with the primefaces.
my template.xhtml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><ui:insert name="title">MILO</ui:insert></title>
//Css
//js
</h:head>
<h:body class="milo">
<h:form styleClass="miloForm" enctype="multipart/form-data">
<div id="container">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
<ui:insert name="content">
<!-- include your content file or uncomment the include below and create content.xhtml in this directory -->
</ui:insert>
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert> </div>
</h:form>
</h:body>
And my index.xhtml looked like this:
<!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://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/WEB-INF/templates/base.xhtml">
<ui:define name="content">
<p:editor/>
</ui:define>
Once I have this, the p:editor won't show up. any ideas why? the console won't show me any warnings/errors.
EDIT>>> Found JS Error
In your template.xhtml, you need to replace <head> by <h:head> and <body> by <h:body>. You shouldn't add another ones, that would only result in invalid HTML.
Particularly the <h:head> is mandatory as it allows component libraries like PrimeFaces to auto-include the necessary CSS/JS files by resource dependency injection. The <h:body> is only mandatory whenever you have <h:outputScript> elements with a target="body" so that they will be auto-relocated to the very bottom of the generated HTML <body> element.
Update your concrete problem is caused by a conflict in the manually loaded jQuery library and the one which is auto-included by PrimeFaces. PrimeFaces uses jQuery and jQuery UI under the covers. If you stick to using PrimeFaces, I'd recommend to drop the manually loaded jQuery and use the PrimeFaces-bundled one instead. To cover pages where you don't use PrimeFaces components as well, you can explicitly load PrimeFaces-bundled jQuery for every page by adding the following line to the <h:head>:
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I'm trying with Javaee6 with GlassFish3.1.
I created a web project (with JSF2.0), with only one file, one.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<title>ONE</title>
</h:head>
<h:body>
<h:form id="oneForm">
<h:commandButton id="oneButton" value="To Two" action="two" />
</h:form>
</h:body>
</html>
I've not added web.xml, as it is optional for javaee6.
I added faces-config.xml, so that default servlet mapping works. (with only top element)
<faces-config version="2.0" .../>
When I hit command-button on the page, I'm expecting 'Page Not Found' error. But the page just reloads. If I actually put file two.xhtml, it works correctly, but in it's absence, does not give error, which I'm expecting.
Am I missing something, some config?
Thanks in advance.
This is expected. JSF works with so-called navigation cases. If it doesn't find a matching case, it will just postback to the same view. This is specified in the JSF 2.0 specification (pick the one for evaluation).
7.4.2 Default NavigationHandler Algorithm
...
The default NavigationHandler implementation must behave as if it were performing the following algorithm (although optimized implementation techniques may be utilized):
If no navigation case is matched by a call to the handleNavigation() method, this is an indication that the current view should be redisplayed. As of JSF 2.0, a null outcome does not unconditionally cause all navigation rules to be
skipped.
...
However, when you set the JSF project stage to Development by a context parameter in web.xml,
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
then clicking the button should then result in a development warning message in the postback,
Unable to find matching navigation case with from-view-id '/one.xhtml' for action 'two' with outcome 'two'
so that eventual developer mistakes are at least put in attention.