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

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 >.>

Related

<h:button> not executing simple bean method

im trying to do a simple bean method, but it does not work, dont show the syso in the console of eclispe, and when i click the button, it change my url to http://localhost:8080/Projeto01/index.jsf?jftfdi=&jffi=%2Findex.xhtml
why dont work and why it change the url for this strange url ?
my msg.java(bean)
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean
#SessionScoped
public class Msg {
public void show() {
System.out.println("Working Bean Method");
}
}
my index.xhtml
<!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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition>
<h:head></h:head>
<h:body>
<h:form>
<h:button value="Show" action="#{msg.show()}"></h:button>
</h:form>
</h:body>
</ui:composition>
</html>
and my web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<display-name>do0</display-name>
<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>*.jsf</url-pattern>
</servlet-mapping>
</web-app>
The <h:button> is a simple page-to-page navigation button. As you can see in the tag documentation, it doesn't support the action attribute at all. You're most likely confusing the <h:button> with <h:commandButton> which in turn supports that attribute.
In order to achieve your functional requirement of invoking a JSF backing bean method on press of a button, just replace <h:button> by <h:commandButton>:
<h:commandButton value="Show" action="#{msg.show()}" />
See also:
Difference between h:button and h:commandButton
As to those jftfdi and jffi query string parameters in the target URL, this is a bug in Mojarra's implementation of the new JSF 2.2 flow scope. This is fixed in Mojarra 2.2.5. Note that this is further unrelated to your concrete problem as you shouldn't be using a <h:button> in first place.
See also:
How to disable jftfdi jffi query params in JSF

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)

Basic JSF with Session doesn't work in glassfish

I wanted to test Session replication of session and application scoped beans of JSF 2 in a clustered environment, currently trying with glassfish. To do so I created a simple application that I deployed to the server first to verify it's working (it doesn't).
Here is what I did so far:
Setup a Ubuntu Virtual Machine in Oracle VirtualBox
download glassfish as zip-file and unzip it in the home directory
start glassfish
deploy the JSF-app as war-file
go to the page of the app: localhost:8080/jsftest/index.jsf
try to set a variable saved in session/application scope
Depending on javax.faces.STATE_SAVING_METHOD in web.xml the result:
server: viewExpiredException is thrown
client: value is not stored and default value is shown
To create the app I did the following:
create new dynamic web project in eclipse
unzip all files from myfaces core in WEB-INF/lib
set the classes-folder to WEB-INF/classes
write beans and a .xhtml as below
The session scoped bean (application scoped is similiar):
#ManagedBean(name = "sessbean")
#SessionScoped
public class MySessionScopeBean implements Serializable{
private static final long serialVersionUID = -4733271400646173098L;
private String value = "default session data";
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
The index.xhtml:
<?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:outputText value="Session id: #{sessionScope['id']}" />
<h:form>
<h:panelGroup>
<h:outputText value="Session Variable:"/>
<br/>
<h:inputText value="#{sessbean.value}"/>
</h:panelGroup>
<h:commandButton value="submit"/>
</h:form>
<h:form>
<h:panelGroup>
<h:outputText value="Application Variable:"/>
<br/>
<h:inputText value="#{appbean.value}"/>
</h:panelGroup>
<h:commandButton value="submit"/>
</h:form>
</h:body>
</html>
So this very basic example doesn't work. Any suggestions?
Also the Session-ID is not shown by #{sessionScope['id']}, don't know if that is the way to do it.
Got it working by removing parts of the (generated) web.xml file. The working file looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
<display-name>jsftest</display-name>
<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>*.jsf</url-pattern>
</servlet-mapping>
</web-app>
What I stripped out (don't know which part caused the failure):
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<description>
This parameter tells MyFaces if javascript code should be allowed in
the rendered HTML output.
If javascript is allowed, command_link anchors will have javascript code
that submits the corresponding form.
If javascript is not allowed, the state saving info and nested parameters
will be added as url parameters.
Default is 'true'</description>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>
If true, rendered HTML code will be formatted, so that it is 'human-readable'
i.e. additional line separators and whitespace will be written, that do not
influence the HTML code.
Default is 'true'</description>
<param-name>org.apache.myfaces.PRETTY_HTML</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>
If true, a javascript function will be rendered that is able to restore the
former vertical scroll on every request. Convenient feature if you have pages
with long lists and you do not want the browser page to always jump to the top
if you trigger a link or button action that stays on the same page.
Default is 'false'
</description>
<param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
<param-value>true</param-value>
</context-param>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>

JSF PrimeFaces simple example: blank page only

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

Glassfish not display JSF components

On my index.xhtml I have Java Server Face components which are displayed correctly and use a managed bean. But if I link to any other page or even a page with the EXACT same code those pages will not display these components, only the text.
Suppose index.xhtml is like this and displays correctly:
<?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:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<h:inputText value="#{user.name}"/>
<h:commandButton action="#{user.submit}" value="Submit" />
</h:form>
</h:body>
</html>
If I add a link to any other page (even one with the same code) JSF components are not displayed for them. Is this because the other pages perhaps can't 'see' the managed bean? Or something else?
Thanks for your help.
It looks like the pages which you want to call are not processed by the Faces Servlet.
In the web.xml of your application you define the url-pattern of server requests that will be processed by this servlet. By default this is often /faces/*. This means that the link that you call must contain this pattern in order to be processed by the Faces Servlet.
If you create your project with Netbeans, the mapping usually looks like the following:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
So try to use links that contain this url pattern or use relative links instead.
If you use h:link instead of a:href, the url-pattern is automatically prepended:
<h:link value="My other page" outcome="otherpage" />
will be rendered as:
My other page

Resources