One or more resources has the target of 'head' but not 'head' component has been defined within the view
This means that you're using plain HTML <head>
instead of JSF <h:head>
in your XHTML template. The JSF <h:head>
allows automatic inclusion of CSS/JS resources in the generated HTML <head>
via @ResourceDependency
annotations. PrimeFaces as being a jQuery based JSF component library needs to auto-include some jQuery/UI JS/CSS files and this really requires a <h:head>
.
So, search for a
<head>
<title>Some title</title>
...
</head>
in your templates and replace it by
<h:head>
<title>Some title</title>
...
</h:head>
See also:
- What's the difference between <h:head> and <head> in Java Facelets?
- Unable to understand <h:head> behaviour
- How to programmatically add JS and CSS resources to <h:head>?
- How to include another XHTML in XHTML using JSF 2.0 Facelets?
Thank you for your useful answer, the JS/CSS/Jquery script are added when using H:HEAD, below are the generated HTML page :
1- using <head>
tag
<head>
<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
2- using <h:head>
tag
<head><link type="text/css" rel="stylesheet" href="/PrimefacesExamples /face/javax.faces.resource/theme.css?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/PrimefacesExamples/faces/javax.faces.resource/primefaces.css?ln=primefaces&v=4.0" />
<script type="text/javascript" src="/PrimefacesExamples/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=4.0"></script>
<script type="text/javascript" src="/PrimefacesExamples/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&v=4.0"></script>
<script type="text/javascript" src="/PrimefacesExamples/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=4.0"></script>
<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>