I'm trying for the first time to use templates with JSF 2.0 with Eclipse, but I'm having problems.
The original index.xhtml page works correctly, and when I click on a button, everything works fine. However, if I change the index page so that it uses a template file it no longer works properly. The modified index.xhtml page is here:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/templates/main-template.xhtml">
<ui:define name="title">
Simulator using JSF 2.0 - Test Version 2
</ui:define>
<ui:define name="header">
Home Page of the Simulator using JSF 2.0 - Test Version 2
</ui:define>
<ui:define name="body">
Click on the button to select the required option
<h:outputText value="and login" rendered="#{!login.loggedIn}"/>
<h:form prependId="false">
<h:commandButton value="Option 1" action="#{login.option1}"/>
<h:commandButton value="Option 2" action="#{login.option2}"/>
<h:commandButton value="Option 3" action="#{login.option3}"/>
<h:commandButton value="Logout" disabled="#{!login.loggedIn}" action="#{login.logout}"/>
</h:form>
</ui:define>
</ui:composition>
and the template file, main.template.xhtml, is in the sub-folder templates, is here:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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>
<title>
<ui:insert name="title">Title</ui:insert>
</title>
</h:head>
<h:body>
<ui:insert name="header">Header</ui:insert>
<br/>
We are in template.xhtml
<br/>
<ui:insert name="body">Body</ui:insert>
</h:body>
</html>
If I remove all code with the "h" tags in index.xhtml, the file picks up correctly the code in templates/main-template.xhtml, so the path is correct. However, if I include code with the "h" tags, as is here, Eclipse complains that the tags are not recognized and the page fails.
If I include the line xmlns:h="http://java.sun.com/jsf/html" at the top, then Eclipse recognized the "h" tags and the page is correctly rendered, but the application fails when I click a button, and returns the error:
javax.servlet.ServletException: javax.el.PropertyNotFoundException:
/index.xhtml #15,68 action="#{login.option1}": Target Unreachable,
identifier 'login' resolved to null
Perhaps somehow the line xmlns:h="http://java.sun.com/jsf/html" in the template file is messing things up, but the whole idea of templates is to include as much common code in a template file.
Does anybody have any idea what is going on, and what the solution to this is?
The web.xml and faces-config.xml are standard, and don't think anything has to be done with them.
Your idea of how templates should work seems correct, but there are some points that we should clarify. Maybe this would help you:
Namespaces
About namespaces, whenever you use a tag library in a page, you should declare it's namespace. Even if you're using templates and you've declared them in your template. You could think that namespace declarations are not inherited, if it helps.
In this case I see that you index.xhtml page is using h:commandButton but hasn't declared its namespace.
Beans
For a bean to be found by EL you should have the following:
A class annotated with #ManagedBean importing from javax.faces.bean.ManagedBean package, like this:
import javax.faces.bean.ManagedBean;
#ManagedBean
#ViewScoped
public class Login
{
// ...
}
In this case your bean should be found by EL by the name login, by convention. (Decapitalize the first letter of your class name)
Or you could give it a name:
import javax.faces.bean.ManagedBean;
#ManagedBean(name="login")
#ViewScoped
public class MyLoginBean
{
// ...
}
In this case, by convention it would be called myLoginBean but we gave it a name, in this case login, so EL should find it by the name login.
If you want to use CDI instead of plain JSF, you could use #Named annotation to define how your bean should be found by EL, following the same naming convention.
import javax.inject.Named;
import javax.enterprise.context.RequestScoped;
#Named(value="login")
#RequestScoped
public class MyLoginBean
{
// ...
}
Remember that data that you want EL to find and change must have the proper getters and setters.
Hint
I would kindly suggest that you create simpler code in order to test funcionality. In this case you could test templating first and then bean, actions, etc...
I hope it helps.
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 have a home page that is written in JSF 2.2. It uses a public template that is shared by many other pages. I don't want to include <f:view transient="true"> in the public template because I want to make only this particular home page as transient.
Now I have this code in my home page
<f:view transient="true">
<ui:define name="content">
.....
<h:commandLink value="#{msg['homepage.createaccount']}"
action="#{homepageController.createNewAccount()}" />
</ui:define>
</f:view>
now HomepageController is a named session bean.
#Named
#Session
public class HomepageController {
//code here
}
The <f:view = "transient"> does not seem to work. Is it because the controller is Session scoped ?
The controller is session scoped because while loading the first page, we fetch several important lists that are used later by many parts of application.
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'm quite new to using JSF and I'm not sure if that's the right way to go, but in Rails you usually have a main application file into which the current page is loaded. That way I don't have to worry about copy-pasting the menu, etc. every time.
How can I achieve that with JSF 2? Can I navigate to the same main page every time and tell it to load a current content? Or do I tell the current page that I navigate to to load the "main frame around the content"?
Thanks!
Yes of course, JSF 2.0 has page-templating feature. You define a template that defines a generic layout to all the view pages.
Facelets tags to create basic page:
ui:insert – defines content that is going to replace by the file that load the template;
ui:define – defines content that is inserted into tag ui:insert;
ui:include – includes content from another page;
ui:composition – the specified template is loaded, if used with template attribute, and the children of this tag defines the template layout. In other case, it’s a group of elements, that can be inserted somewhere.
For example:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/templates/myLayout.xhtml">
<ui:define name="menu">
<ui:include src="/mypath/menu.xhtml"/>
</ui:define>
<ui:define name="content">
<ui:include src="/mypath/content.xhtml"/>
</ui:define>
</ui:composition>
or
<ui:insert name="content">
<ui:include src="/mypath/mycontent.xhtml"/>
</ui:insert>
JSF doesn't support what you want to archive. Instead, it support the views and basic layout(template). What you need it this:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
template="path/to/template.xhtml>
<your custom content here/>
<ui:composition/>
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.