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.
Related
Here's a snippet of my code!
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Associate Management Pool</title>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
</h:head>
I am using PrimeFaces's color picker (the popup version). However, when I click on the icon to bring up the color picker, it shows up below all my other content (below the submit button and not below the icon like it's supposed to do). I have tried removing my css and moving everything around to no avail. The color picker is in a <h:form>, a <div>, and a <h:panelGrid>.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Index</title>
<h:outputStylesheet name="css/styles.css" />
</h:head>
<h:body>
<div class="title"> <h1> Testing </h1> </div>
<br />
<h:form>
<div class="forms">
<h:messages />
<h:panelGrid columns="2" columnClasses="column1Class column2Class" cellpadding="10">
<h:outputText value="Test1 " />
<h:inputText value="#{userConfig.test1}" />
<h:outputText value="ColorInline1 " />
<p:colorPicker value="#{userConfig.colorInline1}" mode="inline"/>
<h:outputText value="ColorInline2: " />
<p:colorPicker value="#{userConfig.colorInline2}" mode="inline"/>
<h:outputText value="ColorPopup " />
<p:colorPicker value="#{userConfig.colorPopup}" />
<h:outputText value="Test2" />
<h:inputText value="#{userConfig.test2}" />
</h:panelGrid>
<br />
<p:commandButton action="newValsIndex" value="Submit" ajax="false"> </p:commandButton>
</div>
</h:form>
</h:body>
</html>
I was able to reproduce your problem easily, actually, in the showcase, it is working properly. The major difference is that you have less components. Testing their code alone in an empty page generate theses css/javascript includes :
<link href="/javax.faces.resource/theme.css.jspx?ln=primefaces-aristo" rel="stylesheet" type="text/css">
<link href="/javax.faces.resource/primefaces.css.jspx?ln=primefaces" rel="stylesheet" type="text/css">
<link href="/javax.faces.resource/colorpicker/colorpicker.css.jspx?ln=primefaces" rel="stylesheet" type="text/css">
<script src="/javax.faces.resource/jquery/jquery.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/primefaces.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/colorpicker/colorpicker.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/jquery/jquery-plugins.js.jspx?ln=primefaces" type="text/javascript">
As soon as you cleanup the example and keep only the p:colorPicker, the last one is missing. This looks like a PrimeFaces bug, you can work arround by adding this line in your h:head :
<h:outputScript name="jquery/jquery-plugins.js" library="primefaces" />
Why do I lose all CSS and JS when I refresh page that has templating in JSF?
My Template :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">
<h:form>
<h:commandButton value="Home" action="#{auth.goHome()}"/>
<h:commandButton value="Logout" action="#{auth.logout}"/>
</h:form>
</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
</html>
Child Page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="/contentTemplate.xhtml" >
</ui:composition>
</h:body>
</html>
**GET http://localhost:11032/Integration/Common/resources/css/default.css 404 (Not Found) welcome.xhtml:5
GET http://localhost:11032/Integration/Common/resources/css/cssLayout.css 404 (Not Found)**
for start try to replace
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
(and the other css) with
<h:outputStylesheet name="css/default.css" target="head" /> (do same for the other css)
If that wont work you can try using #{facesContext.externalContext.requestContextPath}
<link href="#{facesContext.externalContext.requestContextPath}/css/default.css" rel="styleSheet" type="text/css"/>
I want to use p:fileUpload to upload image in my application.
Here i create a demo program for that which work correctly. but when i put it within the JSF template it's look is change and doesn't invoke the FileUploadEvent.
Here is my jsf page: (working)
// ------------
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced"
update="messages"
sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
auto="true"/>
<p:growl id="messages" showDetail="true"/>
</h:form>
//-------- Backing bean
#ManagedBean
public class FileUploadController
{
public void handleFileUpload(FileUploadEvent event) {
FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
try {
String path = FacesContext.getCurrentInstance().getExternalContext().getRealPath("/");
SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmss");
String name = fmt.format(new Date())
+ event.getFile().getFileName().substring(
event.getFile().getFileName().lastIndexOf('.'));
File file = new File(path + "/" + name);
this.setFileName(name);
this.setState(Boolean.TRUE);
InputStream is = event.getFile().getInputstream();
OutputStream out = new FileOutputStream(file);
byte buf[] = new byte[1024];
int len;
while ((len = is.read(buf)) > 0) {
out.write(buf, 0, len);
}
is.close();
out.close();
} catch (Exception e) {
System.out.println("Exception in file io");
}
}
}
//------- Now i put it within the template it doesn't work as following
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="/layout/homeLayout.xhtml">
<ui:define name="content">
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced"
update="messages"
sizeLimit="100000"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
auto="true"/>
<p:growl id="messages" showDetail="true"/>
<br/>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
//------- Here is my homeLayout.xhtml (Template)
<?xml version='1.0' encoding='UTF-8' ?>
<!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://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<!-- JQuery Data Table Dependencies START-->
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/demo_page.css" rel="stylesheet" type="text/css"/>
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/demo_table_jui.css" rel="stylesheet" type="text/css"/>
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css"/>
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#dataTbl1").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
});
</script>
<!-- JQuery Data Table Dependencies END-->
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<h:graphicImage url="#{facesContext.externalContext.requestContextPath}/resources/images/loginUser.png"/>
<h:outputText value="Jewellery Shop" style="font-size: x-large;font-family: Monotype-Corsiva"/>
<ui:include src="../pages/common/userMenu.xhtml"/>
</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
</html>
I try a lot to find whats the problem but i can't find the soluti
PrimeFaces already ships with jQuery and jQuery UI bundled. It might have conflicted with your jQuery libraries which you added manually and hence cause all PrimeFaces components which depend on assistance of jQuery to fail. Also the value of jQuery datatables is questionable as the PrimeFaces <p:dataTable> practically supports almost everything also supported by jQuery DataTables plugin. Explore the <p:dataTable> showcase to learn about all of its capabilities.
There's not really need to manually use jQuery and jQuery UI when using PrimeFaces. It already ships with a big set of rich UI components based on top of jQuery UI. You should instead look what component PrimeFaces offers for the particular functional requirement and use it.
See also:
What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
I faced the same problem when I wanted to use it with JSF template. I have found the solution. The problem appears when you use the regular expression
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
When you parameterise the allowType with <ui:param name="allowType" value="/(\.|\/)(rptdesign)$/" /> then it replaces the "\." with "." (dot without slash).
I have sent the allowType value with double slash like below and now it is working fine.
<ui:include src="path_to_dialogUploadFiles.xhtml" >
<ui:param name="name" value="UploadDesign" />
<ui:param name="header" value="Header value" />
<ui:param name="fileUploaderListenerBean" value="#{listenerBean}" />
<ui:param name="commandButtonValue" value="Upload" />
<ui:param name="isMultiple" value="true" />
<ui:param name="allowType" value="/(\\.|\\/)(gif|jpe?g|png)$/" />
</ui:include>`
Hi making my first page using Struts2.
This is the easy code :
<%# taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/interfaccia.css" />
<link rel="stylesheet" type="text/css" href="css/links.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/profile.css" />
<link rel="stylesheet" type="text/css" href="css/affitta.css" />
<title>
Struts2 - The Sinfonet Portal
</title>
</head>
<body>
<s:div cssStyle="contenitore">
<s:div cssStyle="header">
<s:div cssStyle="header1">
<img src="img/logosw.png" alt="Logo Sinfonet" />
</s:div>
<s:div cssStyle="header2">
<img src="img/band1.jpg" alt="Flag 1" class="photoband" />
<img src="img/band2.jpg" alt="Flag 2" class="photoband" />
<img src="img/band3.jpg" alt="Flag 3" class="photoband" />
</s:div>
</s:div>
<s:div cssStyle="center">
<s:div cssStyle="menu">
<s:div cssStyle="menu_table">
<s:label cssStyle="menu_title" value="Login" />
<s:label cssStyle="menu_span" value="Username" />
<s:textfield />
<s:label cssStyle="menu_span" value="Password" />
<s:textfield />
</s:div>
</s:div>
</s:div>
</s:div>
</body>
</html>
I don't know why it doesnt get the right CSS style (in fact the page looks strange).
What am I wrong?
Have you checked that all of your CSS files are served properly (i.e., they aren't resulting in 404 errors)?
You could try out your page with <div instead of <s:div and see what you get.
I was having a same problem, after parsing through struts css seem to vanish.
Solution: Just add folder name before style in href.
e.g:
Before:
href="style.css"
After:
href="foldername/style.css"
Seems to be nothing Struts2-specific. As Steven answered, check that you get the css-files served if you enter the URL they should be at directly. If not, it may be that you'll have to take a look in your WebContent/WEB-INF/web.xml file if you're directing the requests wrong.
Try something like this
<link href="<s:url value="css/interfaccia.css"/>" rel="stylesheet" type="text/css"/>
You Have to mention the whole path in every page
like..
<link rel="stylesheet" type="text/css" href="<s:url value="/css/style.css" />" />
for images
<img id="logo" src="<s:url value="/images/logo.png" />" />