jsf - 为什么我的 p :progressBar not displayed, 只有数字？-6ren

jsf - 为什么我的 p :progressBar not displayed, 只有数字？

转载作者：行者123 更新时间：2023-12-02 17:35:11

26

4

我有以下带有进度条的 XHTML 文件:

<!DOCTYPE html>
<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:pm="http://primefaces.org/mobile">

    <f:view renderKitId="PRIMEFACES_MOBILE"/>
    <h:head></h:head>
    <f:event listener="#{mainOp.init}" type="preRenderView" />

    <h:body id="body">
        <pm:page id="page">
            <pm:header title="MyProduct">
            </pm:header>

            <pm:content id="content">
                <p:outputLabel value="..."/>
                <p:graphicImage id="image" rendered="true"
                                value="..."
                                cache="false"/>
                <p:progressBar id="progressBar"
                               value="#{mainOp.progress}"
                               rendered="true"
                               cache="false"
                               labelTemplate="{value}%"
                               style="width:400px; font-size:12px"
                               interval="100"/>
                ...
            </pm:content>

            <pm:footer title="m.MyProduct.info"></pm:footer>
        </pm:page>
    </h:body>
</html>

在相应的 bean 中，我将进度属性设置为 21。

@ManagedBean(name = MainOpView.NAME)
@SessionScoped
public class MainOpView {
    public static final String NAME = "mainOp";
    [...]

    private Integer progress = 0;

    public void init()
    {
        [...]

        progress = 21;
    }

    public Integer getProgress() {
        return progress;
    }

    public void setProgress(final Integer aProgress) {
        progress = aProgress;
    }
}

呈现页面时，我可以看到 21 % 字样，但看不到进度条本身。

Screenshot

如何修复它(使进度条可见)？

更新 1 (27.12.2014 13:43 MSK):我正在使用 Primefaces 5.1。

    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>5.1</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-api</artifactId>
        <version>2.1.11</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-impl</artifactId>
        <version>2.1.11</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.1</version>
    </dependency>

最佳答案

问题是双重的。

第一个问题是 primefaces:primefaces-mobile.js 中的错误它在浏览器的 JS 控制台中公开如下(注意应该是我删除了 <p:graphicImage> 以减少噪音):

enter image description here

看来 <p:progressBar>脚本默认不包含在 PrimeFaces 移动 CSS/JS 中，因此需要单独加载。但是，内联 PrimeFaces.cw(...)在生成的 HTML 输出中调用，它负责，似乎缺少应该代表 CSS/JS 资源名称的第 4 个参数。请参阅生成的 HTML 输出中的以下摘录(格式化我的):

<script id="page:progressBar_s" type="text/javascript">
    $(function() {
        PrimeFaces.cw(
            "ProgressBar",
            "widget_page_progressBar",
            { id: "page:progressBar", widgetVar: "widget_page_progressBar", initialValue: 21, ajax: false, labelTemplate: "{value}%" }
        );
    });
</script>

这会导致 CSS/JS 资源名称以 undefined 结束。 :

GET http://localhost:8088/playground/javax.faces.resource/undefined/undefined.js.xhtml?ln=primefaces&v=5.1
GET http://localhost:8088/playground/javax.faces.resource/undefined/undefined.css.xhtml?ln=primefaces&v=5.1

这显然是 PrimeFaces 移动版中的一个错误。你最好的选择是 report这个问题交给 PF 伙计们。

与此同时，您可以通过内联或通过自定义脚本文件在头部结尾或主体开头执行此脚本来解决此问题:

var originalPrimeFacesCw = PrimeFaces.cw;
PrimeFaces.cw = function(name, id, options, resource) {
    resource = resource || name.toLowerCase();
    originalPrimeFacesCw.apply(this, [name, id, options, resource]);
};

当没有定义 CSS/JS 资源名称时，这基本上默认为小部件名称的小写版本。现在进度计数显示为粗体，并且该计数前面有一个空格:

enter image description here

这给我们带来了第二个问题。 .ui-progressbar .ui-widget-beader CSS 缺少 CSS 中的背景颜色。在标准(非移动)PrimeFaces 上，这是在主题特定的 CSS 文件中定义的，例如 primefaces-aritso:theme.css .对于移动 PrimeFaces，这种风格因此在 primefaces:primefaces-mobile.css 中是预期的。 , 但是它只包含 <p:panel>风格。

我不确定这是 PrimeFaces 移动版中的错误还是疏忽。同样在这里，你最好的选择是 report这个问题交给 PF 伙计们。

与此同时，您可以通过内联或通过自定义 CSS 文件在头部末尾添加以下 CSS 来设置样式:

.ui-progressbar .ui-widget-header {
    background-color: pink;
}

enter image description here

您可能只想添加一个小边框作为画龙点睛的一笔。

关于jsf - 为什么我的 p :progressBar not displayed, 只有数字？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27645923/

26

4

0

文章推荐： php - 正则表达式删除空行，但保留新行

文章推荐：使用 Join 的 SQL Not IN 查询

文章推荐： haskell - 将类型定义为 Monad

jsf-2 - JSF - JSF 实现如何识别操作？
我试图了解 JSF 实现如何识别用户的各种可能操作。在我放在一起的简单应用程序中，我在 login.xhtml 页面中配置了以下字段。用户名 - 输入字段密码 - 密码字段登录按钮取消按钮登
jsf - 我需要 jsf-api 或 jsf-impl 还是两者都需要才能开始使用 JSF？为什么不合并？
我已经开始学习 JSF，我想知道在我们的类路径中包含什么 JAR 以开始使用 JSF。是jsf-api或 jsf-impl ?或者我们必须同时包含两者？如果两者都是，那么为什么它们不合并？最佳答案
jsf - 将值从页面传递到其他页面 JSF
我是 java server faces (JSF) 的初学者，我需要将文本输入的内容传递到第二页以显示它，同样适用于第二页:我想将单选按钮值传递到第三页。我搜索并尝试了很多但没有成功。例如我试过
jsf - JSF 页面中的动态操作
我有一个 JSF 页面。我的 CommandButton 操作方法值取决于 bean 变量值。例子: Bean headerBean 具有可变的 actionValue，值为“someBean.do
jsf-2 - 如何在按下另一个 JSF 页面的某个按钮时返回相同的 JSF 页面
我有两个 JSF 页面，假设 A 和 B。从这两个页面 A 和 BI 可以导航到页面 C。现在页面 C 中有一个按钮(确定按钮)，单击它应该导航回 A 或 B，具体取决于从哪里(A 或 B)调用 C
jsf - JSF 中的条件
我可以在没有 JSTL 标签的情况下使用 JSF 执行条件逻辑吗？例如，我制作了一个复合组件，并想说明，如果指定了“id”属性，则定义“id”属性，但如果未指定“id”属性，则不要指定“id”属性。
jsf - JSF 应用程序中的动态语言环境切换？
我有一个应用程序，用户可以在其中从我的应用程序的欢迎页面动态切换语言环境。我看到早期的开发人员(在没有太多文档的情况下继承了代码)已经从 ViewHandler 覆盖了以下三个方法，并告诉我这是动态切
jsf - JSF 的可视化设计器
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
jsf - JSF 中的浏览器刷新处理
有没有一种方法可以在我的 JSF 2.0 应用程序中处理浏览器刷新事件，以便在浏览器刷新页面时将用户导航到欢迎页面？这让我想到了另一个问题，即如何在托管 bean 中进行页面导航？干杯，最佳答案
jsf - JSF 中的验证错误后丢失的值
我有两页。搜索页面是第一个接受用户输入的页面。第二页显示数据表中的结果集。第二页有 3 个面板，用于结果集、更新和在单个页面中创建。根据单击的按钮，我将面板呈现为真和假。 . . . . . .
jsf - 我如何验证两个组件的值是否相同？ JSF
由于我们在 Asp.Net 中有 comparevalidator，我们在 JSF 中有什么来验证两个字段的值是否相同？我想验证密码和确认密码字段。最佳答案不，这样的验证器在基本的 JSF 实现中
jsf - JSF 自定义复合组件与自定义经典组件有什么区别
我想构建一个自定义 JSF 组件。现在我从 oracle 阅读了一些文档并看到了一些代码示例。问题是我有点困惑: 似乎有两种方法可以使用 JSF 2.0+ 构建自定义组件。据我了解，自 JSF 2.0
jsf - JSF 中合成页面内的命令按钮
我遇到了与 user1598186 在他的问题中提到的相同的问题:p:commandButton doesn't call bean's method in an page 但是，没有给出解决方案(
jsf - JSF 中的条件渲染
这个问题在这里已经有了答案: Ajax update/render does not work on a component which has rendered attribute (1 个回答)
jsf - JSF 中的条件重定向
是否有内置机制可以有条件地重定向到另一个 View ？如果他/她已经登录，我希望用户从登录页面重定向到“主页”。我已经有两种基本方法，但对于第一种我不知道如何实现，第二种是一种肮脏的解决方法。添加
jsf - 用逗号格式化为数字 JSF
如何在 JSF 中格式化值我需要格式化一个数字，如:12345.67 到 12,345.67 可以用模式吗？最佳答案尝试使用: 关于jsf - 用逗号格式化为数字 JSF，我们在Sta
jsf - JSF 中无状态的用处是什么？
根据this blog JSF 正在走向无状态。使用 JSF 的全部意义不在于它使保存和恢复状态成为一件苦差事。 JSF 成为无状态的有什么意义？您能否提供一个有用的示例。最佳答案首先，我想澄清
jsf - JSF ResourceBundle中的EL变量
我读到某个地方(不再找到它)，可以在资源包中使用EL Expresions，然后在不更改* .xhtml文件的情况下使用它。 some.text=#{someBean.stepsLeft} more
jsf - JSF 中的基本安全性
我想看一个简单的登录应用程序，不像this那么简单尽管。我想要实现的是对 JSF 的工作原理的理解，我开发了很多 ASP.NET，您可以在其中隐藏代码，并且您可以在其中检查是否在登录时创建了 ses
jsf - JSF 中的日期输出格式
如果#{myBean.birthdate}是java.util.Calendar或java.util.Date类型，我可以格式化吗this 在 EL 本身内部可能使用现有函数，其输出类似于 DateF

首页

博学

6Ren·AI

商城

jsf - 为什么我的 p :progressBar not displayed, 只有数字？