I went through possible set of options from google and tried to include my 'js' and 'css' in head section how ever when I did page source the css and js files are getting append in body section, below are my code snippet:
<h:head profile="http://www.w3.org/2005/10/profile">
<META charset="UTF-8" lang="en-US" />
<link rel="icon" type="image/png"
href="#{resource['image:Friendsmirror.ico']}" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui.min.js" />
etc......
</h:head>
and output as below:
Below is the complete code: Template:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
lang="#{languageBean.language}">
<!-- Enables CTRL+SHIFT+D for activating Facelets debug window -->
<ui:debug />
<f:view locale="#{languageBean.language}">
<f:loadBundle var="messageResource" basename="MessageResource" />
<h:head profile="http://www.w3.org/2005/10/profile">
<META charset="UTF-8"/>
<link rel="icon" type="image/png"
href="#{resource['image:Friendsmirror.ico']}" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui.min.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.tooltipster.min.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.tokeninput.js" />
<!-- <script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/connect_dashboard.js?some_var_to_bust_cache=24312341" />-->
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/moment.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/livestamp.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.watermark.min.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.jeditable.mini.js" />
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.autocomplete.js" />
<!-- For Input Range and Overlay -->
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.tools.min.js" />
<!-- slimScroll plugin -->
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.slimscroll.min.js" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/main.css?some_var_to_bust_cache=24312340" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/common.css?some_var_to_bust_cache=24312342" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/connect.css?some_var_to_bust_cache=24312340" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/token-input-facebook.css?some_var_to_bust_cache=24312345" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/tooltipster.css?some_var_to_bust_cache=24312340" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/skilltimeline.css" />
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.autocomplete.css" />
<f:facet name="first">
<meta http-equiv="X-UA-Compatible"
content="EmulateIE8,IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Connect" />
<meta name="keywords"
content="timeline, 3d, css, css3, css-only, transitions, responsive, fluid" />
<meta name="author" content="FriendsMirror" />
<title><ui:insert name="title">#{messageResource['expensecontrol.main.title']}</ui:insert></title>
</f:facet>
</h:head>
<h:body>
<p:outputPanel styleClass="content">
<h:outputScript target="head" name="connect_dashboard.js" library="js"/>
<!--<p:ajaxStatus styleClass="ajaxLoader" id="ajaxStatusPanel">
<f:facet name="start">
<h:graphicImage name="ajax-loader.gif" library="image" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
<f:facet name="error">An error has occurred!</f:facet>
</p:ajaxStatus>-->
<ui:insert name="header" />
<ui:insert name="body" />
</p:outputPanel>
</h:body>
</f:view>
</html>
and using template as:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
template="/templates/common_layout.xhtml">
<ui:define name="title">
Jayaram Pradhan
</ui:define>
<ui:define name="header">
<ui:include src="/templates/connectHome_Banner.xhtml" />
</ui:define>
<ui:define name="body">
<p:panel header="TEST Goes Here">
<h:form>
<h:link value="Click Here" outcome="connect">
<f:param name="sessionKey" value="1234" />
</h:link>
</h:form>
</p:panel>
</ui:define>
</ui:composition>
I have tried with
<h:outputScript target="head" name="connect_dashboard.js" library="js"/>
<h:outputStylesheet/>
as well <script> and but still js or css getting append to body only.