Using NetBeans, I have created a Facelets template and a Facelets template client through the wizards provided. No changes were made to the source code.
However, when navigating in the generated template client with my browser, I noticed that the sections "inserted" (e.g, header, footer, content) were not being stylized in any way.
After a great deal of head banging onto the wall, I finally found a solution for this.
I checked the generated HTML source code in my browser (from
/faces/index.xhtml, my template client) to see where the CSS files were being pointed at:
These files were not publicly available, so the browser couldn't load them to process the styles. This was all generated by NetBeans. My
/faces/index.xhtmlwas generated dynamically with sucess, so it wasn't a problem with the mapping of the Faces servlet.
After comparing my project files, specifically the
WEB-INF/web.xml,with an empty project I came to the conclusion that the cause of the problem was a conflict in servlet URL patterns. This is how my
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
/*URL pattern from the Jersey servlet will basically hide the stylesheets location, so they will not be accessible through the generated template code.
1. The best fix is the right one. Go to your
WEB-INF/web.xmland fix any superposition of URL patterns. In my case I changed the Jersey URL pattern from:
2. If you don't want to do the above method, open your template file (in my case it was
template.xhtml) and replace the following lines:
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />with:
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
The difference is that now the actual HTML CSS include code will be generated in the server with the correct link for the CSS files. I checked the code that was generated in my case, which was:
<link type="text/css" rel="stylesheet" href="/MyProject/faces/javax.faces.resource/css/default.css" />
<link type="text/css" rel="stylesheet" href="/MyProject/faces/javax.faces.resource/css/cssLayout.css" />
And it also works. You can use it but it is less portable and depends on the configuration and future releases.
I hope that in the future Oracle adds a way to auto-detect these conflicts in NetBeans to ease development for beginner Java EE developers.
JSF template not applied
Styles not getting applied for the Facelets template client
Applying a Facelets Template
Update (2015-Oct-11) with a recommended introduction to JSF:
JSF Tutorial: An Introduction to JSF