I have a working JSF application that allows a user to enter their name, press the Submit button, and they are presented with a page that welcomes them.
The structure is very simple, there is a Person bean that has a setter and getter for a name, and the textfield sets the name, and the welcome page gets the name from the bean to present it on the welcome page.
My question is can I invoke java methods from XHTML when the user presses the Submit button, because I need to open a connection to the database. The code for the first page of the application looks like this in the xhtml file:
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>JSF 2.0 Hello World</title>
</h:head>
<h:body>
<h3>JSF 2.0 Hello World Example - hello.xhtml</h3>
<h:form>
<h:inputText value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me" action="welcome"></h:commandButton>
</h:form>
</h:body>
</html>
So it looks like when they hit Welcome Me, the welcome.xhtml file is called up and the bean is passed to it. But I also need to execute some code to open the database when the Welcome Me button is pressed, how can I do this?
For that, the action attribute of the command button should be bound to the action method of the bean.
<h:commandButton value="Welcome Me" action="#{helloBean.submit}" />
In the method you've all the freedom to write down Java code which should be executed when the button is pressed.
public String submit() {
// ...
return "welcome";
}
The returned string will be used as navigation outcome. If you return null or void, it will return to the same view.
See also:
Our JSF wiki page
Related
I have a problem with the JSF 2.2 Feature <f:viewAction action="#{...}/>.
I placed this tag in my XHTML-Page, it's called viewActionStart.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<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:p="http://primefaces.org/ui">
<h:head />
<h:body>
<f:view>
<f:metadata>
<f:viewAction action="#{redirect.getView()}" onPostback="true"
immediate="true" />
</f:metadata>
</f:view>
<h:outputText value="If you see that text, the viewAction was not performed." />
</h:body>
</html>
If I visit this XHTML-Page directly, everything works fine: The method redirect.getView() is called and a redirect to another page is performed.
Now I have my landing page, that is shown before that viewActionStart-Page. There is a button, that basically should navigate to my viewActionStart-Page to show the <f:viewAction> effect. The following code is from this landing page index.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<f:view>
<h:form>
<h:commandButton action="viewActionStart.xhtml"
value="To f:viewAction Page" />
</h:form>
</f:view>
</h:body>
</html>
If I hit that command button, the content of the viewActionStart.xhtml is shown. Why does JSF ignore the <f:viewAction>? I do not understand why the viewAction does not work on every page load. I tried around with those onPostback and "immediate" attributes, but nothing changes.
Another weird result is, that after I hit the command button and see the content of viewActionStart.xhtml the URL still remains on localhost:8080/UIIncludeTest/index.xhtml. But shouldn't look this URL like localhost:8080/UIIncludeTest/viewActionStart.xhtml after the command button does navigation?
Am I doing something wrong? Or do I simply misunderstood <f:viewAction>? The weird thing, is, that it works if I browse directly to viewActionStart.xhtml.
I'm trying to get this working on:
JSF-2.2.6
Tomcat-7.0.47
PrimeFaces 5.0
I have read the numerous posts related to <f:viewAction> but nothing helped.
The <f:viewAction onPostback="true"> applies only on postbacks on the very same view. I.e. it runs only when a <h:form> in the very same view has been submitted. The <f:viewAction> is never intented to be executed upon POST navigation triggered by a submit of a <h:form> of another view. Moreover, the term "postback" in the attribute name also confirms this. This term means in web development world "a POST request on the URL of the page itself".
You need to open it by a GET request instead of a POST request. Replace the <h:commandButton> by <h:button>:
<h:button outcome="viewActionStart.xhtml" value="To f:viewAction Page" />
(note: the <h:form> is not necessary anymore)
Or, if you really intend to perform a POST request first for some unclear reason (it would have been a bit more understandable if you were invoking a bean action method, but you're here merely navigating, so the whole POST request doesn't make any sense), then let it send a redirect:
<h:commandButton action="viewActionStart.xhtml?faces-redirect-true" value="To f:viewAction Page" />
Either way, the URL should now be properly reflected in address bar. This was at its own indeed a strong hint that you was donig things the wrong way ;)
See also:
How to navigate in JSF? How to make URL reflect current page (and not previous one)
Difference between h:button and h:commandButton
I have a problem with the JSF 2.2 Feature <f:viewAction action="#{...}/>.
I placed this tag in my XHTML-Page, it's called viewActionStart.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<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:p="http://primefaces.org/ui">
<h:head />
<h:body>
<f:view>
<f:metadata>
<f:viewAction action="#{redirect.getView()}" onPostback="true"
immediate="true" />
</f:metadata>
</f:view>
<h:outputText value="If you see that text, the viewAction was not performed." />
</h:body>
</html>
If I visit this XHTML-Page directly, everything works fine: The method redirect.getView() is called and a redirect to another page is performed.
Now I have my landing page, that is shown before that viewActionStart-Page. There is a button, that basically should navigate to my viewActionStart-Page to show the <f:viewAction> effect. The following code is from this landing page index.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<f:view>
<h:form>
<h:commandButton action="viewActionStart.xhtml"
value="To f:viewAction Page" />
</h:form>
</f:view>
</h:body>
</html>
If I hit that command button, the content of the viewActionStart.xhtml is shown. Why does JSF ignore the <f:viewAction>? I do not understand why the viewAction does not work on every page load. I tried around with those onPostback and "immediate" attributes, but nothing changes.
Another weird result is, that after I hit the command button and see the content of viewActionStart.xhtml the URL still remains on localhost:8080/UIIncludeTest/index.xhtml. But shouldn't look this URL like localhost:8080/UIIncludeTest/viewActionStart.xhtml after the command button does navigation?
Am I doing something wrong? Or do I simply misunderstood <f:viewAction>? The weird thing, is, that it works if I browse directly to viewActionStart.xhtml.
I'm trying to get this working on:
JSF-2.2.6
Tomcat-7.0.47
PrimeFaces 5.0
I have read the numerous posts related to <f:viewAction> but nothing helped.
The <f:viewAction onPostback="true"> applies only on postbacks on the very same view. I.e. it runs only when a <h:form> in the very same view has been submitted. The <f:viewAction> is never intented to be executed upon POST navigation triggered by a submit of a <h:form> of another view. Moreover, the term "postback" in the attribute name also confirms this. This term means in web development world "a POST request on the URL of the page itself".
You need to open it by a GET request instead of a POST request. Replace the <h:commandButton> by <h:button>:
<h:button outcome="viewActionStart.xhtml" value="To f:viewAction Page" />
(note: the <h:form> is not necessary anymore)
Or, if you really intend to perform a POST request first for some unclear reason (it would have been a bit more understandable if you were invoking a bean action method, but you're here merely navigating, so the whole POST request doesn't make any sense), then let it send a redirect:
<h:commandButton action="viewActionStart.xhtml?faces-redirect-true" value="To f:viewAction Page" />
Either way, the URL should now be properly reflected in address bar. This was at its own indeed a strong hint that you was donig things the wrong way ;)
See also:
How to navigate in JSF? How to make URL reflect current page (and not previous one)
Difference between h:button and h:commandButton
Hi i have this demo form with RF 4.5.2, the oncomplete execute 3 times, i need a way to execute a method after the ajax call but only one time, i think that is the behaviour of the oncomplete but if it doesnt you can suggest any other ideas to accomplish this:
<!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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head></h:head>
<body>
<rich:panel>
<h:form>
<a4j:commandButton id="btnAccion" value="enviar" oncomplete="#{archivoAfipController.emptyAction()}"/>
</h:form>
</rich:panel>
</body>
</html>
You're supposed to use the action attribute for the purpose of invoking a managed bean method on submit.
<a4j:commandButton ... action="#{archivoAfipController.emptyAction}" />
The oncomplete must represent a client side script expression (thus, e.g. JavaScript, which is in JSF perspective basically a plain vanilla String!), which should be executed when the ajax action has completed, the response has returned, and all necessary parts of the view have been updated in the client side.
See also:
<a4j:commandButton> tag documentation
https://stackoverflow.com/a/20146879/ (only second half of the answer is relevant)
I am new to JSF, I am currently running JSF 2.0 with tomcat and Primefaces. I have created a simple page using the primefaces layoutUnit and primefaces menu. I have a three panel layout with the menu in the left panel, the main page in the center, and some metric / graphing stuff in the right panel. I am having issues understanding how to create separate views for the main panel which will be viewed when selecting the appropriate menu tool item. I want to use ajax so there is no page refresh so I just want to create something where if I have a "users" tool, when I click it the users view will show up in the center panel, similarly if I have a configure tool, I want the configure view to be shown. I have tried to create seperate layoutUnits for each view and then use the rendered="" to render it when a certain tool is clicked but this does not work. Can anyone shed some light on the proper way to do this? I can not find any examples online. thanks.
You should try thinking your web application in terms of template and use the Facelets template feature. (Which version of JSF are you using? Try using JSF2...).
Your primefaces layout could be part of the template. Therefore, each page ("users", "tools") using the template would actually correspond to the main panel of your layout "automatically" have le left and right panels added to it.
Let's say you have a "users" submenu in the menu component of your left panel. It would then link to your "users" view (using Ajax).
You should read: http://www.ibm.com/developerworks/java/library/j-jsf2fu2/
You have to create template
Step :1
<?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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
<div>
/* define your pages here.*/
/*menuPage refers the header information*/
<div class="menuPage">
<ui:insert name="menuPage" />
</div>
/* mainPage refers the what are your .xhtml files*/
<div class="mainPage">
<ui:insert name="mainPage" />
</div>
/*footer page*/
<div class="footerPage">
<ui:insert name="footerPage" />
</div>
</div>
</html>
Step :2
Then create separated page for MenuPage.xhtml, MainPage.xhtml and FooterPage.xhtml
Step :3
Write 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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="template.xhtml">
<ui:define name="menuPage">
<ui:include src="menuPage.xhtml" />
</ui:define>
<ui:define name="mainPage">
<ui:include src="mainPage.xhtml" />
</ui:define>
<ui:define name="footerPage">
<ui:include src="footerPage.xhtml" />
</ui:define>
</ui:composition>
</html>
I have this working code in my webapp:
<h:button value="Edit user..." outcome="/public/user" >
<f:param name="userName" value="#{authBean.authUser}"/>
</h:button>
What it does:
It makes the button send a GET
It passes the specified parameter in the URL, making it bookmarkable.
What I need:
It should work like h:button above (send GET)
the button should look like other Primefaces buttons (eg. decorated with an image... etc).
This is the closest I could get:
<p:commandButton value="Edit user..." action="/public/user?faces-redirect=true" ajax="false" immediate="true" >
<f:param name="userName" value="#{authBean.authUser}"/>
</p:commandButton>
It sends a POST that gets redirected to the new URL with a GET. However the parameter is lost in the process.
Another idea:
<p:linkButton value="Edit user..." href="http://localhost:8080/contextpath/faces/public/user.xhtml">
<f:param name="userName" value="#{authBean.authUser}"/>
</p:linkButton>
The GET request is aborted (??? according to Firebug) and the current page is POSTed again.
What is the proper way of doing this?
UPDATE: this works (on an empty page, with no p:dataTable):
<p:linkButton value="Edit user..." href="http://localhost:8080/contextpath/faces/public/user.xhtml?userName=myusername">
but this does not:
<p:linkButton value="Edit user..." href="http://localhost:8080/contextpath/faces/public/user.xhtml?userName=myusername&secondParam=otherValue">
the latter results in:
500: javax.servlet.ServletException:
Error Parsing /sample0.xhtml: Error
Traced[line: 14] The reference to
entity "secondParam" must end with the
';' delimiter.
UPDATE2: the & should be escaped:
<p:linkButton value="Edit user..." href="http://localhost:8080/contextpath/faces/public/user.xhtml?userName=myusername&secondParam=otherValue">
and it looks good... but I still get the GET aborted and POST resent:
alt text http://img64.imageshack.us/img64/1017/primefaceslinkbutton.jpg
This is the full empty page I've been trying it with:
<?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:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head />
<h:body>
<h:form>
<p:linkButton value="Click me" href="http://stackoverflow.com" />
</h:form>
</h:body>
</html>
Primefaces 2.1 release.
In PrimeFaces 2.2., we'll deprecate linkButton and introduce p:button. Issue ticket;
http://code.google.com/p/primefaces/issues/detail?id=1037
Use p:linkButton.
Update: as per your update with the code example, the URL should be specified in href attribute, not in the url attribtue. Also see the component's documentation which I linked here above.
The symptoms at least sounds like as if you're firing an asynchronous (Ajax) GET request, not a synchronous one. FireBug would then indeed give this kind of error when the request is fired on a different domain.
Don't you have some other Javascripts which are disturbing/colliding with the linkButton's default behaviour? The button is navigating by a simple onclick="window.location=newurl;".
Update 2: does it work if you test it standalone in a simple page? E.g.
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<title>Test</title>
</h:head>
<h:body>
<p:linkButton value="test" href="http://stackoverflow.com" />
</h:body>
</html>