CODEWITHSUNDEEP
jsfprimefaces
joshpt
joshpt

Reputation: 733

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:

This is a screenshot of what I get when I do a "run as" by right-clicking on the .xhtml file 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. enter image description here

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.

Upvotes: 0

Views: 1370

Answers (2)

joshpt
joshpt

Reputation: 733

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

Upvotes: 1

Lukas Eichler
Lukas Eichler

Reputation: 5903

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>

Upvotes: 1

Related Questions