I'm using a captcha in my JSF page (not recaptcha or randomly generated image value, etc). Initially it gets its value from CaptchaServlet. I want to add "refresh image" button without refreshing the whole page, but the code below doesn't work.
<h:panelGrid id="grid" columns="1" style="margin-bottom:10px">
<h:graphicImage id="capimg" value="#{facesContext.externalContext.requestContextPath}/../Captcha.jpg"/>
</h:panelGrid>
The refresh button with PrimeFaces <p:commandButton>
<p:commandButton value="This" process="#this" update="grid" onclick="#{facesContext.externalContext.requestContextPath}/../Captcha.jpg"/>
refreshes the whole page.
Do you have any suggestions? Can I use a managed bean and forward to a servlet?
The <p:commandButton> uses Ajax to asynchronously update parts of the page. However, it requires that all necessary JavaScript libraries are included to do all the Ajax works. This should automatically happen when you have a <h:head> instead of a <head> in the master template. The JSF 2.0 resource management will then include the necessary <script> elements in there. If you have read the server logs, you should have noticed warnings that this has failed because the <h:head> is missing.
Here's how a minimum JSF 2.0 Facelet master template should look like, with PrimeFaces taglib declared:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.som/jsf/core"
xmlns:h="http://java.sun.som/jsf/html"
xmlns:ui="http://java.sun.som/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<title>Page title</title>
</h:head>
<h:body>
<h1>Put your content here</h1>
</h:body>
</html>
Please note the <h:head> and <h:body> instead of <head> and <body>. Rightclick the generated HTML page in the webbrowser an choose View Source. You should see the included <script> elements in there.
Update: get rid of the onclick attribute. It's not valid JavaScript code. Further you also need to ensure that the servlet response with the image is not cached by the webbrowser. You can do that by adding the following headers before you write any bit to the response:
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.
Related
I was testing couple of new features of JSF and I came across Post Redirect Get.
I wanted to redirect from my first page say first.xhtml to second.xhtml.
I have a number as a property in both the managed beans and I wanted to pass it to the second bean from the first bean using request parameter.
This is my first page
<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">
<head>
<title>Landing Page</title>
</head>
<body>
<h3>Enter Number</h3>
<h:form>
<h:inputText id="input" name="number" value="#{postRedirectGet.number}" />
<h:commandButton value="redirect to result"
action="resultPage?faces-redirect=true&includeViewParams=true">
</h:commandButton>
</h:form>
</body>
</html>
And in the second page I have
<!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">
<f:metadata>
<f:viewParam name="number" value="#{postRedirectResult.number}"/>
</f:metadata>
<head>
<title>Result Page</title>
</head>
<body>
<h:form>
<h:outputText value="Number #{postRedirectGet.number}" />
<h:outputText value="Number #{postRedirectResult.number}" />
<h:commandButton value="Redirect to index" action="/index?faces-redirect=true" />
</h:form>
</body>
</html>
Now the page is doing a POST using commandButton and then redirecting to second page from first but it passes number=0 in the URL. It works if I change
<f:viewParam name="number" value="#{postRedirectResult.number}"/>
to
<f:viewParam name="number" value="#{postRedirectGet.number}"/>
but I thought the viewParam is used to set the value to a bean and not used to pass the values in URL. Could someone please explain how can we do POST and set the property of the managed bean on next page.
The problem is that the f:viewParam is used in two different ways in two scenarios . In h:link it is used to set the property of target bean , in h:commandButton it is used to compute the GET URL and then the target bean property can be set using #ManagedProperty . Is my understanding correct or can the f:viewParam be used to set the property in h:commandButton POST redirect get also.
What you seem to be missing is what includeViewParams does. Let me quote this very informative article (you should read all of it):
The other special query string parameter, includeViewParams, tells the navigation handler to include the view parameters when performing the navigation. But what view parameters should be included? The view parameters to be included when performing the navigation are declared on the to-view-id page.
So JSF looks at your resultpage.xhtml to determine which parameters to pass. And then dutifully proceeds to pass the current value of postRedirectResult#number (which at this time is unset/0).
To have the GET number parameter reflected in your bean, pass it as a real parameter:
<h:commandButton value="redirect to result"
action="resultPage?faces-redirect=true&number=4" />
See also:
What can <f:metadata>, <f:viewParam> and <f:viewAction> be used for?
There are different 4 ways to transfer data from JSF Page To Backing Bean.
We can use
f:param
f:setPropertyActionListener
f:attribute
Method expression (JSF 2.0).
Here you can try f:setPropertyActionListener as..
<h:commandButton value="redirect to result"
action="resultPage?faces-redirect=true">
<f:setPropertyActionListener target="#{postRedirectResult.number}" value=4 />
</h:commandButton>
Here is the link for this.
I am using gwt and the gwt is including in my jsp like below
Once i clicked the menu item it is taking me to myJsp.jsp which includes gwt module and i am displaying form with upload button.
Once i click the upload, it is uloading a file (and get the blobKey) and returns back to the same jsp(myJsp.jsp) but here before dispatching to this jsp(second time) i am setting one attribute in the request.
I am trying to get that attribute in the jsp by using ${ImportId} but i am getting empty value.
The below is my jsp.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<script type="text/javascript" language="javascript" src="/ActivityLog/ActivityLog.nocache.js">
</script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' class="iframe"></iframe>
<div class="wrapper">
<input type="hidden" name="memcacheHeaderId" value="${importId}" />
<div id="activityLogModule">
</div>
</div>
</div>
</body>
</html>
When ever executing gwt module ${importId} is null.
Second time before dispatching to this jsp, i am setting request.setAttribute("importId", importId); but in the jsp i am not getting this value
What might be the reason, Is there scope problem?
the only reason is you are setting value in request, as your request is completed, server discard your request.
when you are setting
request.setAttribute("importId", importId);
Than you must be redirecting to the JSP, which creates a new Request for the JSP to the Server. Meaning server creates a new request object and does not remembers the old object with your attribute set into it.
I am not much aware of gwt but in JSP-Servlet, there are 2 mechanisms 1)Redirect and 2)Forward. we use Forward mechanism to go to the JSP with the Same request object, so the attribute which is set into the Object is available on the JSP as well, because it is a copy of the request object passed in the Request.
So please check what you can do in GWT.
i am using ready-made template(with css and j-queries) in my java ee app. all the primefaces components are rendered properly except the panelgrid control of primefaces 3.2.
it is displayed with border. i want it without border.
i have removed all the table styling from the css of custom ready-made template.
still the border is there.
when i remove the readymade template, the panelgrid is rendered perfectly without any border. how do i remove the border and what is the cause of this problem?
edited:
xhtml file:
<!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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AP administration panel - A massive administration panel</title>
</h:head>
<h:body>
<div>
<h:form>
<p:panelGrid columns="2" style="border: none">
<h:outputText value="scrip symbol"/>
<p:inputText value=""/>
<p:commandButton value="submit"/>
</p:panelGrid>
</h:form>
</div>
</h:body>
</html>
When overriding PrimeFaces default styles, you have to specify a CSS selector of at least the same strength or to specify a stronger selector. The strength of a CSS selector (the cascading rules) is specified in the W3 CSS specification and clearly explained in this article: Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade.
Based on PrimeFaces own CSS, the following selectors should do:
.ui-panelgrid tr, .ui-panelgrid td {
border: none;
}
Just put them in a .css file which you include by <h:outputStylesheet> inside the beginning of the <h:body> so that it will be included after PrimeFaces own style.
<h:body>
<h:outputStylesheet name="layout.css" />
...
</h:body>
See also:
How to remove border from specific PrimeFaces p:panelGrid?
How do I override default PrimeFaces CSS with custom styles?
Update: As per your update, your CSS doesn't seem to be loaded at all. You should have noticed this by verifying the HTTP traffic in browser builtin webdeveloper toolset (press F12 in Chrome/IE9/Firebug) and seeing that it returned a HTTP 404 error. When using <h:outputStylesheet> you need to put the CSS file in the /resources folder of the webcontent. So you must have a /resources/css/mycss.css in order to be able to use <h:outputStylesheet name="css/mycss.css" />.
See also:
How to reference CSS / JS / image resource in Facelets template?
I have recently started working with JSF2.0 and Facelets, but have run into what I hope is an easy answer for most of you out there. When I am trying to add any HTML tag within a <ui:define> tag I receive the following error:
javax.faces.view.facelets.TagException: /content/home/test.xhtml #11,10 Tag Library supports namespace: http://java.sun.com/jsf/facelets, but no tag was defined for name: div
If I remove all of the HTML tags from the section the page displays correctly. Here is my simple page that I have been trying to get working:
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:jrc="http://com.comanche.web.components">
<ui:composition template="/templates/masterLayout.xhtml" xmlns="http://java.sun.com/jsf/facelets">
<ui:define name="windowTitle">Home</ui:define>
<ui:define name="content">
<div>I want to add HTML and am having lots of trouble.</div>
</ui:define>
</ui:composition>
</html>
I know I should be able to add HTML within the define tag. What do I need to do to get HTML in without any errors.
Your <ui:composition> declaration is using the wrong global XML namespace. You definied http://java.sun.com/jsf/facelets as global XML namespace while it should have been assigned to ui: XML namespace. The <div> tag doesn't exist in the Facelets taglib (which is what the exception is trying to tell you). You should have assigned http://www.w3.org/1999/xhtml as global XML namespace. Further, the <!DOCTYPE> and <html> will be ignored anyway. The sole content of the file should be the following:
<ui:composition template="/templates/masterLayout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define name="windowTitle">Home</ui:define>
<ui:define name="content">
<div>I want to add HTML and am having lots of trouble.</div>
</ui:define>
</ui:composition>
Nothing before or after <ui:composition> in the very same file is necessary.
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
i'm new in jsf, i would like to know how i can reuse others .jsf pages without 'copy paste' them.
In .jsp i do:
// head.jsp
<head> ... </head>
// top.jsp
<body> ... </body>
Then i include them in my new .jsp
// index.jsp
<%#include file="head.jsp" %>
<%#include file="top.jsp" %>
...
How can i do this with jsf ?
i'm trying this way:
<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>
<ui:include src="components/head.xhtml" />
</h:head>
<h:body>
<ui:include src="components/top.xhtml" />
</h:body>
</html>
But is not working..
Any idea ?
Best regards,
Valter Henrique.
Facelets is the default view technology for JSF2, so I would use its <ui:include> tag here. Make sure your paths are correct - they should start with webapp root, one containing WEB-INF - and also make sure the included facelets contain <ui:composition> tag around the included content. Anything outside this tag will be ignored.
Try looking for the "import" tag in the core library.
I think ui:include might be for facelets rather than plain jsf.