0

目前我有两页和一个模板：

myapp (war)
|-myTemplate.xhtml  //yes i know, the template is in the main folder :(
|-page1.xhtml
|-folder    
    |--page2.xhtml

page1 和 page2 具有相同的结构

因此，当我访问 page1 时，jsf 模板呈现得非常好，但是，当我尝试查看 page2 时，一切看起来都扭曲了。在这种情况下，模板不起作用。

web.xml 以这种方式具有“url 模式”：

<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
</servlet-mapping>

编辑：页面非常简单，模板更加详细

page1.xhtml 和 page2.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="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                template="./mainTemplate.xhtml">

    <ui:define name="content">

        <h1>
            <h:outputText value="#{i18n['cc.title']}"/>
        </h1>

        <h:form id="form">           
           <!-- outputLabels, inputTexts... -->
        </h:form>  

    </ui:define>
</ui:composition>

模板.xhtml

<?xml version='1.0' encoding='iso-8859-1' ?> 
<!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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <f:loadBundle var="i18n" basename="co.gov.rnec.srcw.languages.Mensajes"/>
    <f:loadBundle var="i18nDefuncion" basename="co.gov.rnec.srcw.languages.MensajesDefuncion"/>
    <f:loadBundle var="i18nMatrimonio" basename="co.gov.rnec.srcw.languages.MensajesMatrimonio"/>
    <f:loadBundle var="i18nNacimiento" basename="co.gov.rnec.srcw.languages.MensajesNacimiento"/>
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="styles/styles_ani.css" rel="stylesheet" type="text/css"/>
        <link href="styles/form_styles.css" rel="stylesheet" type="text/css"/>
        <link href="styles/menu.css" rel="stylesheet" type="text/css"/>
        <title>#{i18n['srcw.titulo']}</title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
        <script type="text/javascript" src="js/general/general.js"></script>
        <script type="text/javascript" src="js/general/fechas.js"></script>
        <script type="text/javascript" src="js/general/frmvalidaciones.js"/>
    </h:head>

    <h:body onload="getHora();" >

        <div class="container">
            <div class="header">
                <div class="floatleft">
                    <a href="#"><img src="images/logorneclittle.jpg" alt="Registraduria Nacional del Estado Civil" name="Logo" width="145" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a> 
                </div>
                <div class="floatleft">
                    <p class="size50">&nbsp;</p>
                    <p class="ani-verdanagriscatorce size50"><h:outputText value="#{i18n['main.titulo.titulo']}" escape="false"/></p>
                    <p class="ani-verdanaverdedieciseis size50"><h:outputText value="#{i18n['main.titulo.subtitulo1']}" escape="false"/></p>
                    <p class="ani-verdanagriscatorce size50"><h:outputText value="#{i18n['main.titulo.subtitulo2']}" escape="false"/></p>
                    <div class="floatleft"><p><a href="logout.jsp">#{i18n["main.titulo.salida"]}</a></p></div>
                    <div class="floatleft"><p><a href="cambiaclave.jsp">#{i18n["main.titulo.cambiarclave"]}</a></p></div>
                </div>
                <div class="floatright ani-normalgrisdieztitulo">
                    <p class="size30">&nbsp;</p>
                    <p class="size30">&nbsp;</p>
                    <p class="size30"><h:outputText value="#{i18n['main.label.version']}: #{i18n['srcw.version']}" escape="false"/></p>
                    <p class="size30">#{i18n["main.label.usuario"]}: <h:outputText value="#{sessionScope.nombrecompleto} - #{sessionScope.login}" styleClass="capitalized" /></p>
                    <p class="size30">#{i18n["main.label.cargo"]}: <h:outputText value="#{sessionScope.grupo}" styleClass="capitalized" /></p>
                    <p class="size30" id="reloj"></p>
                </div>
                <br class="clearfloat"/>
                <div id="menu" class="menu">
                    <h:outputText escape="false" value="#{sessionScope.menuAplicacion}"/>
                </div>
                <!-- end .header -->
            </div>
            <div id="formulario" class="content">
            <!-- a form -->
            </div>
        </div>

    </h:body>

</html>

如您所见， page1 与 page2 具有相同的结构（好吧，显然我相应地修改了模板路径）并且没有消息错误。只是在访问page2 时出现了一个格式错误的页面。

4

1 回答 1

2

这是因为您的所有 CSS/JS 资源都是使用相对于文件夹的 URI 引用的。

比如这两个

<link href="styles/menu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

实际上会从

http://localhost:8080/contextpath/styles/menu.css
http://localhost:8080/contextpath/js/jquery-1.8.3.min.js

当你打开page1.xhtml.

但是，当您打开 时folder/page2.xhtml，浏览器会尝试从

http://localhost:8080/contextpath/folder/styles/menu.css
http://localhost:8080/contextpath/folder/js/jquery-1.8.3.min.js

这显然根本不存在。通过查看浏览器的 Web 开发人员工具集中的 HTTP 流量监视器（在 Chrome/Firefox>=23/IE>=9 中按 F12 并检查“网络”选项卡），您应该已经注意到了这个错误。

您基本上需要使这些 URL 与域相关，即以斜杠开头：

<link href="/contextpath/styles/menu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/contextpath/js/jquery-1.8.3.min.js"></script>

或者如果您担心上下文路径的动态性：

<link href="#{request.contextPath}/styles/menu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="#{request.contextPath}/js/jquery-1.8.3.min.js"></script>

但是，更好，实际上是规范的 JSF 方式，是将所有这些文件放在文件夹中，并使用并按照以下答案中的说明将/resources它们作为 JSF 资源引用：如何在 Facelets 模板中引用 CSS / JS / 图像资源？<h:outputStylesheet><h:outputScript>

<h:outputStylesheet name="styles/menu.css" />
<h:outputScript name="js/jquery-1.8.3.min.js" />

这样，JSF 将自动担心生成正确的 URL。

与具体问题无关：鉴于您使用的是 PrimeFaces，手动包含的 jQuery JS 文件会带来麻烦。另请参阅Adding jQuery to PrimeFaces results in Uncaught TypeError over all place的答案。

于 2013-09-22T21:01:33.220 回答