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>`
Related
In my project there is a requirement that when we change language from Engish to Arabic all layout will be displayed in right to left position.
growl message working fine when i didn't use common layout but when i add this thing in common layout of my page then its still showing right side only..
source code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.ui-growl{
#{msg['msg']}:20px;
}
</style>
</h:head>
<body>
<ui:composition template="/home/template/common1/commonLayout.xhtml">
<ui:define name="content">
<h:form id="myform">
<p:growl id="msgs" sticky="true" autoUpdate="true" />
<f:event listener="#{localeControllerBean.islang}" type="preRenderView" />
<p:outputLabel for="sname" value="#{msg['welcome.jsf']}"
styleClass="label" />
<p:inputText id="sname" value="#{sponsorBean.sponsor_name}"
required="true" requiredMessage="#{msg['welcome.jsf']}"
styleClass="input" />
<p:commandButton id="submit" value="Save" ajax="false"
action="#{sponsorBean.save}" style="margin-bottom:50px;"
update="msgs" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Anything outside <ui:composition> is ignored during building the view.
In your commonLayout.xhtml master template you should add a new <ui:insert> inside <h:head>:
<h:head>
...
<ui:insert name="head" />
</h:head>
Then define it inside the <ui:composition> of your template client:
<ui:composition template="...">
<ui:define name="head">
<style>.ui-growl{ #{msg['msg']}: 20px; }</style>
</ui:define>
<ui:define name="content">
...
</ui:define>
</ui:composition>
(by the way #{msg['msg']} is absolutely not self-documenting; I'd myself also rather have used <html dir="#{direction}"> so that you can just use e.g. html[dir='rtl'] .ui.growl selector)
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
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'm working with JSF2 and I want to display a map with the object gmap. As I saw, gmap object doesn't exist anymore with richfaces 4.x, so I tried to import the gmap4jsf.jar to render my map...
To have an exemple I took a part of my code from the Richfaces demo here : Richfaces live demo
The map is displayed well, but if I want to control it (change the type, zoom,...) with the jsf elements from the rich:panel, I get an error in Firebug : "map is undefined"...
Can somebody help me to find out the problem please because I didn't find the answer in other thread...
Here is my code:
<!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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:m="http://code.google.com/p/gmaps4jsf/"><h:head><title>JSF 2.0: Ajax Support</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=myPersonnalKeyIsWrittenHere"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style>.optionList {height: 30px;}</style></h:head><h:body>
<div id="container">
<ui:include src="tpl/menu.xhtml" />
<h1>Gmap4Jsf</h1>
<div align="center">
<f:view contentType="text/html">
<h:panelGrid columns="2">
<h:form id="mapform" prependId="false">
<m:map var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
</h:form>
<h:panelGroup>
<h:form>
<rich:tabPanel switchType="ajax" width="350" height="400">
<rich:tab label="Using Google Map API">
<h:panelGrid columns="2" columnClasses="optionList">
<h:outputText value="Controls:" />
<h:panelGroup>
Hide
Show
<br />
</h:panelGroup>
<h:outputText value="Zoom:" />
<rich:inputNumberSlider id="zoom" showInput="false"
minValue="1" maxValue="18" value="#{gmapBean.zoom}"
onchange="map.setZoom(this.value)" />
<h:outputText value="Map Type:" />
<h:panelGroup>
<a href="javascript: void 0"
onclick="map.setMapType(G_NORMAL_MAP)">Normal</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_SATELLITE_MAP)">Satellite</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_HYBRID_MAP)">Hybrid</a>
<br />
</h:panelGroup>
</h:panelGrid>
</rich:tab>
<rich:tab label="Using Ajax with JSON">
<rich:dataGrid var="place" value="#{gmapBean.point}"
columns="2">
<h:graphicImage onclick="showPlace('#{place.id}')"
style="cursor:pointer" value="resource://#{place.pic}" />
</rich:dataGrid>
</rich:tab>
</rich:tabPanel>
</h:form>
</h:panelGroup>
</h:panelGrid>
</f:view>
</div>
</div>
Ok I found it out...
I had to define the name of the Javascript variable generated by JSF.
So, I just added the attribut "jsVariable" to my gmap element.
<m:map jsVariable="map" var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
Bye
Tried Mojarra - 2.0.8, 2.1.6 , MyFaces 2.0.11,2.1.5
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml" xmlns:f="java.sun.com/jsf/core" xmlns:h="java.sun.com/jsf/html" xmlns:ui="java.sun.com/jsf/facelets">
<body>
<h:form>
<h:inputText id="name" value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="name" render="output" />
</h:commandButton>
<h2><h:outputText id="output" value="#{helloBean.sayWelcome}"/></h2>
</h:form>
</body>
</html>
The XML namespaces are invalid. You've removed the http:// prefix from them all. This is not right.
Here's a rewrite:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Page title</title>
</h:head>
<h:body>
<h:form>
<h:inputText id="name" value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="name" render="output" />
</h:commandButton>
<h2><h:outputText id="output" value="#{helloBean.sayWelcome}"/></h2>
</h:form>
</h:body>
</html>
Note that you also forgot the <h:head> component. This generates a HTML <head> element which allows JSF to auto-include the necessary JS and CSS files. In case of <f:ajax>, the JSF-supplied jsf.js file needs to be (auto)included, otherwise you will face a JS error after the page is been loaded.