Navigation with Facelets template not working

Question

I'm having some trouble with navigation when using Facelets.

I have my master template in /WEB-INF:

<h:body>
    <div id="container">
        <div id="header">
            <ui:insert name="header">Header</ui:insert>
        </div>

        <div id="navigation">

            <a href="ram.xhtml">RAM</a>
            <a href="mobo.xhtml">Motherboard</a>
            <a href="video.xhtml">Video Card</a>
        </div>

        <div id="content">
            <ui:insert name ="content"></ui:insert>
        </div>

    </div>
</h:body> 

and then 2 template clients that look exactly the same, index.xhtml and ram.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./WEB-INF/layoutTemplate.xhtml">

    <ui:define name="header">
       some text
    </ui:define>

    <ui:define name="content"> 
        some content
    </ui:define>


</ui:composition>

If either of these pages are set as the welcome page in the web.xml, they are rendered correctly, with CSS and everything. But if I try to navigate from one page to the other using the link I get

This XML file does not appear to have any style information associated with it. The document tree is shown below.

Any hints would be greatly appreciated.

Answer 1

This means that the request URL (as appears in browser address bar) didn't match the URL pattern of the FacesServlet as definied in web.xml.

Those links

<a href="ram.xhtml">RAM</a>
<a href="mobo.xhtml">Motherboard</a>
<a href="video.xhtml">Video Card</a>

expects the FacesServlet to be mapped on *.xhtml. But if it's mapped on for example *.jsf and changing it to *.xhtml is not an option for some reason (I however strongly recommend it), then you'd need to fix the links

<a href="ram.jsf">RAM</a>
<a href="mobo.jsf">Motherboard</a>
<a href="video.jsf">Video Card</a>

Or, better, just use <h:link>. It'll implicitly append the proper context path and FacesServlet mapping:

<h:link value="RAM" outcome="ram" />
<h:link value="Motherboard" outcome="mobo" />
<h:link value="Video Card" outcome="video" />

See also:

• Communication in JSF 2.0 - Implicit navigation