Primefaces 5 Carousel 展示 - 渲染图像，但使用项目符号而不是 Carousel答案

【问题标题】：Primefaces 5 Carousel showcase - renders images, but uses bullet points instead of a CarouselPrimefaces 5 Carousel 展示 - 渲染图像，但使用项目符号而不是 Carousel
【发布时间】：2014-05-23 18:50:24
【问题描述】：

这是 Primefaces 轮播在 Primefaces 5.0 中的样子：

我创建了一个新的 Eclipse(Dynamic Web Project) 项目，试图尽可能减少变量。

我使用的库： Primefaces 5.0（我也尝试了很多 3 和 4 版本） Mojarra 2.2.6（我也尝试了几个低于此的版本）在 Tomcat 7.0.52 上运行

这是我的网页代码：

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

这是我的 web.xml 文件：

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

是的，我知道还有其他关于 Primefaces Carousel 的问题。我一天中的大部分时间都在其他地方阅读这些文章和其他几十篇文章。

我也尝试将 .jstl 库放入其中。添加 primefaces 主题会在其周围添加一个边框，但 Carousel 仍然不正确。

web.xml 文件正是我在另一个 Eclipse Web 项目中所拥有的，它适用于我使用过的所有其他 primefaces 组件，所以我不认为 web.xml 文件是问题所在。

关于如何让这个 Primefaces Carousel 正确渲染有什么想法吗？图像正在拉起，但 Carousel 组件的“肉”并没有通过。

编辑： Carousel 的 Primefaces 展示案例在这里： http://www.primefaces.org/showcase/ui/data/carousel.xhtml 我的目标是让最基本的 Carousel 工作。

Edit2(05-27-2014): 根据 LarsBauer 的添加标题标签的建议，输出网页现在看起来有点不同。它看起来像一个矩形而不是项目符号列表，但仍然不是它需要的位置。我尝试在其他 Primefaces 项目中使用的标题中添加 primefaces 样式（当然也复制文件），但这并没有改变任何东西。

Edit3（05-27-2014）：根据 Templar 的建议，我添加了 h:body 标签。更改对输出没有任何不同，但如果该标签不存在，我会想象该页面稍后会出现问题。不知道为什么我忘了添加它。

【问题讨论】：

你试过在它周围放一个
吗？另外不要忘记在您的页面中添加。这就是 PrimeFaces 加载所有 css 和 js 的地方。
谢谢。我不知道那个样式信息。添加 h:head 标签确实改变了网页的输出，如上面我的 Edit2: 中所示。添加 h:form 没有做任何事情，不管有没有它，或者在 f:view 标签中/在/外。此外，使用 form 而不是 h:form 也没有改变任何东西。我很确定我以后需要为其他事情添加表单标签。

标签： jsf primefaces

【解决方案1】：

您的h:form 需要在您的h:body 中。还请查看您的 Javascript 控制台以查看任何客户端呈现错误。

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

【讨论】：

感谢您的建议。添加 h:body 标签并没有改变输出，但无论如何，h:body 标签无疑需要在页面的未来出现。

【解决方案2】：

很遗憾，我花了这么多天才弄明白，但 Internet Explorer 8 是问题所在。任何现代浏览器都能正确显示所有内容。我在其他项目中使用的其他 Primefaces 组件工作正常，但在 Carousel 中则不然。

强制使用旧版本的是我的公司，我敢打赌你肯定知道那是谁>.>

【讨论】：