JSF PrimeFaces simple example: blank page only - jsf

I tried this example using Primefaces-3.3.1, JSF 2.1, Glassfish 3.1.2 and IntelliJ IDEA 11.1.3 as IDE. Added PF's jar to WEB-INF/lib directory and created 'test.jsf', where I putted the example.
As a result I see blank page. Chrome understands it like this:
<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:p="http://primefaces.org/ui"><head></head><body><h:head>
</h:head>
<h:body>
<p:editor>
</p:editor></h:body>
</body></html>
What's wrong?
Thanks.

looks like you should modify your web.xml
like this
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
take a look at this JSF 2.0 Hello World Example 4. JSF 2.0 Serlvet Configuration

Sometimes when you build a JSP or XHTML page, and you enter in the navigator it doesn't work like a JSF page.
To fix it you need to view the web.xml and change the url-pattern like said Daniel before.
For example, if you have a page called:
index.jsp
and you have this in your web.xml
< url-pattern>*.jsf< /url-pattern>
You need to access through the URL
http:// localhost:8080/project/index.jsf

Related

Primefaces 5 Carousel showcase - renders images, but uses bullet points instead of a Carousel

This is what the Primefaces Carousel is looking like in Primefaces 5.0:
I created a new Eclipse(Dynamic Web Project) project in an attempt to reduce as many variables as possible.
My libraries used:
Primefaces 5.0 (I also tried many 3 and 4 versions)
Mojarra 2.2.6 (and I tried a few versions lower than this too)
running on Tomcat 7.0.52
Here is my web page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<f:view contentType="text/html">
<h:form id="form">
<h:body>
<p:carousel circular="true" vertical="true">
<p:graphicImage name="images/csvExport.png" />
<p:graphicImage name="images/csvExport.png" />
</p:carousel>
</h:body>
</h:form>
</f:view>
</h:body>
</html>
This is my web.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
<url-pattern>*.html</url-pattern>
<url-pattern>*.jsp</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Yes, I know there are other questions about the Primefaces Carousel. I read those and dozens of other articles elsewhere for most of the day.
I tried throwing .jstl libraries in there too. Adding primefaces themes added a bordering box around it, but the Carousel still wasn't right.
The web.xml file is exactly what I have in another Eclipse web project that works just fine for all the other primefaces components I have used, so I'm not thinking the web.xml file is the problem.
Any ideas on how I can get this Primefaces Carousel to render properly? the images are pulling up, but the "flesh" of the Carousel component just isn't coming through.
Edit:
The Primefaces show case for Carousel is here:
http://www.primefaces.org/showcase/ui/data/carousel.xhtml
My objective is to get the most basic Carousel to work.
Edit2(05-27-2014):
Per LarsBauer's suggestion to add a header tag, the output web page now looks a little different. It looks like a rectangle instead of a bulleted list, but still isn't quite where it needs to be. I tried adding primefaces styles in the header that I used in other Primefaces projects(copying over the files too, of course), but that didn't change anything.
Edit3(05-27-2014):
Per Templar's suggestion, I added the h:body tag. The change didn't do anything different with the output, but I would imaging the page would become problematic later on if that tag weren't there. Not sure why I forgot to add it.
Your h:form needs to be inside your h:body. Also take a look at your Javascript console to see any clientside rendering errors.
<f:view contentType="text/html">
<h:body>
<h:form id="form">
<p:carousel circular="true" vertical="true">
<p:graphicImage name="images/csvExport.png" />
<p:graphicImage name="images/csvExport.png" />
</p:carousel>
</h:form>
</h:body>
</f:view>
It sucks that it took me so many days to figure this out, but Internet Explorer 8 is the problem. Any modern browser displays everything properly. The other Primefaces components I use in other projects work fine, but not so with Carousel.
It's my company that mandates the older version be used, and I bet you'd know exactly who that is >.>

Why does the page change in JSF, but not the URL? [duplicate]

This question already has an answer here:
How to navigate in JSF? How to make URL reflect current page (and not previous one)
(1 answer)
Closed 7 years ago.
I have simple test web-application:
First Page - index.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<html>
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
First page
<h:form>
<h:commandButton value="Go to Next page" action="next"/>
</h:form>
</h:body>
</html>
and Next Page - next.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<html>
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Next page
<h:form>
<h:commandButton value="Go to First page" action="index"/>
</h:form>
</h:body>
</html>
When I run my application i have that url on browser:
http://localhost:8080/Test/
and index.xhtml as first page.
Then when I click "Go to Next page" i have url
http://localhost:8080/Test/index.xhtml
and next.xhtml page. And when I click "Go to First page" page changes (to index.xhtml) but url its
http://localhost:8080/Test/next.xhtml
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
What should I do to make that the first page in my application has a URL,
http://localhost:8080/Test/index.xhtml
rather than
http://localhost:8080/Test/
?
I use Tomcat (TomEE)/7.0.37
Though it's an old thread, if someone is still looking for it can try "?faces-redirect=true". Like:
<h:commandButton value="Go to Next page" action="next?faces-redirect=true"/>
You're using command buttons (POST form submit buttons) for plain page-to-page navigation. This is completely wrong. You should be using plain buttons (GET navigation buttons) for this instead.
Replace the
<h:form>
<h:commandButton value="Go to Next page" action="next"/>
</h:form>
by
<h:button value="Go to Next page" outcome="next" />
Note: you don't need a <h:form> at all.
Your concrete problem of "one URL behind" is caused because you're seeing the URL of <h:form> itself being reflected in browser address bar instead of the URL of the form submit's result page. Open the JSF page in your webbrowser, rightclick and View Source and look closer at <form action> value.
See also:
Difference between h:button and h:commandButton
When should I use h:outputLink instead of h:commandLink?
What is the difference between redirect and navigation/forward and when to use what?
How to navigate in JSF? How to make URL reflect current page (and not previous one)

How to pass url parameters to JSF/xHTML?

I know this has been asked multiple times but mine is a slightly diff question.
I have a JSF page which queries a database and throws results, before i move to JSF, i used to do this in JSP and it was working fine.
When i was using JSP below is the link format i used to use
http://localhost:8080/blmdatabase/index.jsp?SearchString=Name&Category=Contact&Submit=Submit
My index.jsp used to capture the values using param.SearchString & param.Category, and 'Submit' used to activate the 'submit' button for the search.
How do i do the same for xHTML/JSF ?
Here is what i tried ...
http://localhost:8080/blmdatabase/index.xhtml?search=#{some search string}
In my index.xhtml
<td>
<f:metadata>
<f:viewParam name="search" value="#{databaseSearch.searchstring}" />
</f:metadata>
<p:inputText id="searchstring" size="20" maxlength="20" value="#{databaseSearch.searchstring}"/> <p:commandButton id="submit" icon="ui-icon-search" title="Search Database" update="panel" actionListener="#{databaseSearch.customerList}" />
</td>
in my databaseSearch.java
#ManagedBean(name = "databaseSearch")
#SessionScoped
public class databaseSearch implements Serializable {
public String searchstring;
//getter and setter for searchstring
}
Also, i would need it 'Submit' the form .... I am new to this, so please excuse me if this was already discussed before ...
Also if i specific index.html , my jsf components would not load, just a blank page. like if i go
http://localhost:8080/blmdatabase/
my primefaces components load fine, but if i do
http://localhost:8080/blmdatabase/index.xhtml
it does not, so now i am wondering how to pass the parameters :(
Web.xml
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
You could 'submit' your form adding <f:event type="preRenderView"> inside the <f:metadata> tag.
<f:metadata>
<f:viewParam name="search" value="#{databaseSearch.searchstring}" />
<f:event type="preRenderView" listener="#{databaseSearch.doSearch}" />
</f:metadata>
This way, you could implement how your bean will search for this specific query string
public void doSearch(ComponentSystemEvent event) {
if(!searchString.isEmpty()) {
// Do your search here
}
}
Your Faces Servlet maps to anything that's hold in the faces virtual folder:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
So http://localhost:8080/blmdatabase/index.xhtml URL won't be parsed through Faces Servlet. You must use http://localhost:8080/blmdatabase/faces/index.xhtml, note the use of faces/ before your index.xhtml file, also note that your <welcome-file> also points to faces/index.xhtml.
The downside of this URL pattern is that Faces Servlet would also process non-facelets resources like JavaScript files (.js), Style files (.css), images (*.png, *.jpg) and others. A better Faces Servlet mapping would be:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
In this way, Faces Servlet will process xhtml pages only and you won't need the faces virtual folder anymore. With this change, now you can access to http://localhost:8080/blmdatabase/index.xhtml with no problems.
you could use a method in the class dataBaseSearch:
if(searchString != null){
//execute a query in database
// return result to a variable(resultSet or list)
}
and use getter and setter to get the the resultSet or List
and render the result in a datatable.

JSF template not applied

I'm running into a problem with JSF and templating. I'm following this tutorial but the only output I see is the one I'm defining in my index.xhtml with
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
my custom content
</ui:define>
without adding the footer and header even though I'm not defining/overwriting the default one in my index file.
If I view the source in the browser it's showing up the same way as in my index.xhtml with ui:composition etc. So it looks like it's not "converting" it to HTML.
The relevant parts of my web.xml:
<servlet>
<description>Controller Servlet for data input</description>
<display-name>InputServlet</display-name>
<servlet-name>InputServlet</servlet-name>
<servlet-class>form.controller.InputServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>InputServlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
My directory structure looks like this:
http://i.imgur.com/ZslOQNr.png
Thanks!
You're using the wrong servlet.
JSF comes with its own servlet, the FacesServlet.
Get rid of the InputServlet from web.xml altogether and map JSF's FacesServlet as follows:
<servlet>
<servlet-name>facesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
That should do it.
See also:
Our JSF wiki page - contains a Hello World and several links to sane tutorials

Servlet mapping jsf

I'm asking myself which way is the best for servlet mapping in jsf? And Why?
Especially I'm wondering always about the different suffix of the facelet resources and the suffix of the url-pattern of the servlet-mapping. My servlet mapping is always coherent to the suffix of my resources.
For Example if I'm using xhtml as facelets my servlet mapping does it also:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
But I see examples where the resources are xhtml files and the servlet mapping is on jsf?
For Example:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
So which way is the best way?
And also I'm wondering why the second way working at all?
For now you won't need an answer on which servlet mapping to use, I think. You would probably be better of with some reading first.
I have taken the liberty to find two related questions which might open your eyes a little considering JSF and the file extension.
What is the difference between creating JSF pages with .jsp or .xhtml or .jsf extension
JSF Facelets: Sometimes I see the URL is .jsf and sometimes .xhtml. Why?

Resources