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

javascript - 正则表达式匹配字符/数字/数字/数字
fiddle :http://jsfiddle.net/rtucgv74/ 我正在尝试将第一个字符与 3 位数字匹配。所以下面的代码应该提醒f234。但反而返回 null ？源代码: var reg
asp正则表达式匹配数字$数字$数字$
复制代码代码如下: Dim strOk,strNo strOk = "12312321$12
c#数字/数字/字符串模式的正则表达式
我想找 {a number} / { a number } / {a string}模式。我可以得到number / number工作，但是当我添加 / string它不是。我试图找到的例子: 15
java - 数字.数字.数字的模式表达式？
我，我正在做一个模式正则表达式来检查字符串是否是: 数字.数字.数字，如下所示: 1.1.1 0.20.2 58.55541.5221 在java中我使用这个: private static Patt
python - 检查字符串是否包含python中的数字/数字/数字
我有一个字符串，我需要检查它是否在字符串的末尾包含一个数字/数字，并且需要将该数字/数字递增到字符串末尾 +1 我会得到下面的字符串 string2 = suppose_name_1 string3
java - (数字/数字)的正则表达式
我正在寻找一个正则表达式 (数字/数字)，如(1/2) 数字必须是 1-3 位数字。我使用 Java。我认为我的问题比正则表达式更深。我无法让这个工作 String s ="(1/15)";
typescript [数字，数字]与数字[]
谁能帮我理解为什么我在使用以下代码时会出现类型错误: function sumOfTwoNumbersInArray(a: [number, number]) { return a[0] +
google-apps-script - Apps 脚本错误 : Cannot find method getRange(number, 数字、数字、数字)
我看到有些人过去也遇到过类似的问题，但他们似乎只是不同，所以解决方案也有所不同。所以这里是: 我正在尝试在 Google Apps 脚本中返回工作表的已知尺寸范围，如下所示: var myRange
Python - 如何将此模式(数字/数字)与正则表达式匹配？
我试图了解python中的正则表达式模块。我试图让我的程序从用户输入的一行文本中匹配以下模式: 8-13 之间的数字“/” 0-15 之间的数字例如:8/2、11/13、10/9 等。我想出的模式
java - 如何将扫描仪输入拆分为(数字)(带空格的字符串)(数字)
简单地说，我当前正在开发的程序要求我拆分扫描仪输入(例如:2 个火腿和奶酪 5.5)。它应该读取杂货订单并将其分成三个数组。我应该使用 string.split 并能够将此输入分成三部分，而不管中间字
c++ - (数字)和(-数字)的含义
(number) & (-number) 是什么意思？我已经搜索过了，但无法找到含义我想在 for 循环中使用 i & (-i)，例如: for (i = 0; i 110000 .对于i没有高于
javascript - 数字 = parseInt(数字);需要从 rel 属性中获取非数字
需要将图像ID设置为数字 var number = $(this).attr('rel'); number = parseInt(number); $('#carousel .slid
typescript - Typescript 可以确保数组具有重复的类型模式吗？例如[字符串，数字，字符串，数字，....(永远)]
我有一个函数，我想确保它接受一个字符串，后跟一个数字。并且可选地，更多的字符串数字对。就像一个元组，但“无限”次: const fn = (...args: [string, number] | [s
javascript - html 输入类型更改=数字 "available"值。还将更改另一个输入类型=数字 "Total"
我想复制“可用”输入数字的更改并将其添加或减去到“总计”中如果此人将“可用”更改为“3”，则“总计”将变为“9”。如果用户将“可用”更改为“5”，则“总计”将变为“11”。 $('#id1').b
r - 如何在 R 中的(字符/数字)和(字符/数字)类型之间进行换行
我有一个与 R 中的断线相关的简单问题。我正在尝试粘贴，但在获取(字符/数字)之间的断线时遇到问题。请注意，这些值包含在向量中(V1=81,V2=55,V3=25)我已经尝试过这段代码: cat(p
c++ - 数字 xor K - K = 数字 + K xor K，为什么？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
angular - typescript 错误 "Argument of type ' 数字[ ]' is not assignable to parameter of type ' 数字'”
我在 Typescript 中收到以下错误: Argument of type 'number[]' is not assignable to parameter of type 'number' 我
JavaScript 数字
在本教程中，您将通过示例了解JavaScript 数字。在JavaScript中，数字是基本数据类型。例如， const a = 3; const b = 3.13; 与其他一些编程语言不同
JavaScript 数字
我在 MDN Reintroduction to JavaScript 上阅读JavaScript 数字只是浮点精度类型，JavaScript 中没有整数。然而 JavaScript 有两个函数，pa
Excel编程自动完成部分输入(数字)
我们在 Excel 中管理库存。我知道这有点过时，但我们正在发展商业公司，我们所有的钱都被困在业务上，没有钱投资 IT。所以我想知道我可以用Excel自动完成产品编号的方式进行编程吗？这是一个产品

首页

博学

6Ren·AI

商城

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