2013-09-22 195 views
0

目前,我有两页,一个模板:JSF页面无法与模板渲染

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

第1页和第2页具有相同的结构

所以,当我进入到第1页JSF的模板处理得很好,但是,当我试着看第2页时,一切看起来都是扭曲的。该模板在这种情况下不起作用。

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> 

的template.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具有相同的结构(很明显,我相应地修改了模板路径)并且没有消息错误。正好在访问第2页时出现格式不正确的页面时。

+0

为什么不显示如何在失败的页面中引用/使用模板? – BalusC

+0

已添加xhtml。使用Tomcat7 + jsf(jar)。该项目的很大一部分是基于servlet,我们正在尝试迁移到jsf。 – Sergio

+0

这很有帮助,谢谢。 – BalusC

回答

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中按F12> = 23/IE> = 9并选中网络选项卡)。

你基本上需要将这些网址域名相对,即与一家领先的斜杠:

<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文件夹中,并根据回答中的指示使用<h:outputStylesheet><h:outputScript>作为JSF资源引用:How to reference CSS/JS/image resource in Facelets template?

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

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


无关到具体的问题:手动包括jQuery的JS文件是因为你使用PrimeFaces配方麻烦。另请参阅Adding jQuery to PrimeFaces results in Uncaught TypeError over all place的答案。