JSF 2.0：如何包含 <h:head> 屬性？

Question

我有問題，如果我使用：

<head>
    .. stylesheet and javascripts 
</head>

我從樣式表獲得的樣式可以，但是在底部有一個警告：“一個或多個資源的命運是'head'，但視圖中沒有定義'head'的組件。”

因此，如果我將<head>更改為<h:head> ，警告消失，但我的風格也消失了。

問題是什么？

更新：

// index.xhtml
<head>
    <ui:include src="jsf/components/head_index.xhtml" id="head" />
</head>
<h:body styleClass="nojs"> 
...
</h:body>

// head_index.xhtml   
<!DOCTYPE html 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:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">

    <link rel="shortcut icon" href="#{request.contextPath}/images/logo.ico" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="" />
    <meta name="title" content="" />
    <meta name="description" content="" />

    <title>TITLE</title>
    <!-- ////////////////////////////////// -->
    <!-- //      Start Stylesheets       // -->
    <!-- ////////////////////////////////// -->
    <link href="./css/style.css" rel="stylesheet" type="text/css" />
    <link href="./css/nivo-slider.css" rel="stylesheet"  type="text/css" media="screen" />
    <!-- ////////////////////////////////// -->
    <!-- //      Javascript Files        // -->
    <!-- ////////////////////////////////// -->
    <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="./js/cufon-yui.js"></script>
    <script type="text/javascript" src="./js/geosanslight_500.font.js"></script>
    <script type="text/javascript">
             Cufon.replace('h1') ('h2') ('h3') ('h4') ('h5') ('h6') ('.middle-text');

    </script>
    <script type="text/javascript" src="./js/jquery.lavalamp.js"></script>
    <script type="text/javascript" src="./js/jquery.easing.1.1.js"></script>
    <script type="text/javascript">
    var $ = jQuery.noConflict();
            $(document).ready(function(){
            /* Function for lavalamp navigation menu and dropdown */
            $("#menu").lavaLamp({
                    fx: "backout",
                    speed: 700
            });

            $(" #menu ul ").css({display: "none"}); // Opera Fix
            $(" #menu li").hover(function(){
            $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
            },function(){
            $(this).find('ul:first').css({visibility: "hidden"});
            });

            /* if javascript disabled */
            $("body").removeClass("nojs").addClass("js");




    });
    </script>
    <script type="text/javascript" src="./js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    /* homepage slideshow */
    $(window).load(function() {
            $('#slider').nivoSlider({
                    effect:'random', //Specify sets like: 'fold,fade,sliceDown'
                    slices:15,
                    animSpeed:500, //Slide transition speed
                    pauseTime:6000,
                    directionNav:false, //Next &amp; Prev
                    startSlide:0 //Set starting Slide (0 index)
            });
    });
    </script>
    <!--[if lte IE 8]>
    <script type="text/javascript" src="http://demo.templatesquare.com/html/genesis/genesis-default/js/DD_roundies_0.0.2a-min.js"></script>
    <script type="text/javascript" src="http://demo.templatesquare.com/html/genesis/genesis-default/js/ie_rounded_config.js"></script>
    <![endif]-->

</ui:composition>


//top 
<div id="top">
    <div id="topleft">
        <div id="logo">
            <h1><a href="./index.xhtml">PROJECT</a></h1>
        </div><!-- end #logo -->
    </div><!-- end #topleft -->

更新2：我正在嘗試@Vineet和@George建議，但是我遇到了麻煩：可行：

<link href="#{request.contextPath}/css/style.css" rel="styleSheet" type="text/css"/>

但是當我嘗試在JSF中使用時：

<h:outputStylesheet name="./css/style.css" />

文件夾的結構為：

WebPages
   META-INF
   WEB-INF
   css
   html
   images
   js
   jsf
   ..// .xhtml files

沒用...

有想法嗎？

最好的問候，Valter Henrique。

Answer 1

您應該使用#{request.contextPath}來指向應用程序的絕對位置。 如果您的腳本位於應用程序的js文件夾中，則可以使用

<script type="text/javascript" src="#{request.contextPath}/js/jquery.lavalamp.js"/>

或h:outputScript和h:outputStyleSheet作為@Vineet Reynolds建議

更新：
如果要使用h:outputStyleSheet ，則應在WebPages創建resources文件夾，然后在其中復制css和js文件夾。 因此文件夾的結構將是

WebPages
   META-INF
   WEB-INF
   resources
      css
      js
   html
   images
   jsf
   ..// .xhtml files

那么您可以使用h:outputStyleSheet這樣的方式：

<h:outputStylesheet library="css" name="style.css" />

和JavaScript

<h:outputScript library="js" name="somejs.js"/>

有關jsf 2中打包資源的更多詳細信息，請參見這篇文章

JSF 2.0：如何包含 <h:head> 屬性？

問題描述

1 個解決方案

解決方案1
4 已采納 2011-06-19 15:33:50

JSF 2.0：如何包含 <h:head> 屬性？

問題描述

1 個解決方案

解決方案1 4 已采納 2011-06-19 15:33:50

解決方案1
4 已采納 2011-06-19 15:33:50