JSF 2.0: How include <h:head> attributes?
i'm with a problem, if i use:
<head>
.. stylesheet and javascripts
</head>
My style from stylesheet is all right, but with an alert in the bottom: "One or more resources have the fate of 'head', but no component of 'head' was defined in the view."
so if i change <head> by <h:head> the warning disappear but my style gone too..
what is the problem ?
UPDATE:
// 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 T开发者_StackOverflow中文版ransitional//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 & 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 -->
UPDATE 2: i'm trying the @Vineet and @George suggestion, but i'm with a trouble: This works :
<link href="#{request.contextPath}/css/style.css" rel="styleSheet" type="text/css"/>
But when i try to use in JSF like:
<h:outputStylesheet name="./css/style.css" />
The structure of the folder is:
WebPages
META-INF
WEB-INF
css
html
images
js
jsf
..// .xhtml files
It doesn't work...
Any idea guys ?
Best regards, Valter Henrique.
You should use #{request.contextPath} to point absolute app location.
If your scripts located in js folder of your app, you can use
<script type="text/javascript" src="#{request.contextPath}/js/jquery.lavalamp.js"/>
or h:outputScript and h:outputStyleSheet as @Vineet Reynolds suggested
UPDATE:
if you want to use h:outputStyleSheet you should create resources folder in WebPages and copy css and js folder in it. So the structure of the folder will be
WebPages
META-INF
WEB-INF
resources
css
js
html
images
jsf
..// .xhtml files
then you can use h:outputStyleSheet such way :
<h:outputStylesheet library="css" name="style.css" />
and for javascript
<h:outputScript library="js" name="somejs.js"/>
For more details about packaging resources in jsf 2 look at this post
加载中,请稍侯......
精彩评论