为什么我的 p:progressBar 没有显示，只有数字? [英] Why is my p:progressBar not displayed, only the number?

查看：20
本文介绍了为什么我的 p:progressBar 没有显示，只有数字?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<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="内容"><p:outputLabel value="..."/><p:graphicImage id="image" 渲染="true"值="..."缓存=假"/><p:progressBar id="progressBar"value="#{mainOp.progress}"呈现=真"缓存=假"labelTemplate="{value}%"style="width:400px; font-size:12px"间隔=100"/>...</pm:content><pm:footer title="m.MyProduct.info"></pm:footer></pm:page></h:body>

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

@ManagedBean(name = MainOpView.NAME)@SessionScoped公共类 MainOpView {public static final String NAME = "mainOp";[...]私人整数进度= 0;公共无效初始化(){[...]进度 = 21;}公共整数 getProgress() {返回进度；}public void setProgress(final Integer aProgress) {进度 = aProgress;}}

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

我该如何解决(让进度条可见)?

更新 1 (27.12.2014 13:43 MSK):我使用的是 Primefaces 5.1.

 <依赖><groupId>org.primefaces</groupId><artifactId>primefaces</artifactId><version>5.1</version></依赖><依赖><groupId>com.sun.faces</groupId><artifactId>jsf-api</artifactId><version>2.1.11</version></依赖><依赖><groupId>com.sun.faces</groupId><artifactId>jsf-impl</artifactId><version>2.1.11</version></依赖><依赖><groupId>javax.servlet</groupId><artifactId>jstl</artifactId><version>1.2</version></依赖><依赖><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version></依赖><依赖><groupId>javax.servlet.jsp</groupId><artifactId>jsp-api</artifactId><version>2.1</version></依赖>

解决方案

问题有两方面.

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

看起来 脚本默认没有包含在 PrimeFaces 移动 CSS/JS 中，因此需要单独加载.然而，负责生成 HTML 输出的内联 PrimeFaces.cw(...) 调用似乎缺少第四个参数，该参数应该表示 CSS/JS 资源名称.从生成的 HTML 输出中查看以下摘录(格式化我的):

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

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

这显然是 PrimeFaces 移动版中的一个错误.最好的办法是向 PF 人员这个问题给 PF 人员.

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

.ui-progressbar .ui-widget-header {背景颜色:粉红色；}

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

I have following XHTML file with a progress bar:

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

In the correspoding bean, I set the progress propety to 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;
    }
}

When the page is rendered, I can see the 21 % lettering, but not the progress bar itself.

How can I fix it (make the progress bar visible) ?

Update 1 (27.12.2014 13:43 MSK): I'm using 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>

解决方案

The problem is two-fold.

First problem is a bug in primefaces:primefaces-mobile.js which exposes as follows in browser's JS console (noted should be that I removed the <p:graphicImage> to reduce noise):

It appears that the <p:progressBar> script isn't by default included in PrimeFaces mobile CSS/JS and thus needs to be loaded individually. However, the inline PrimeFaces.cw(...) call in the generated HTML output, which is responsible for that, appears to lack the 4th argument which should represent the CSS/JS resource name. See the following extract from the generated HTML output (formatting mine):

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

This causes the CSS/JS resource name to end up as 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

This is clearly a bug in PrimeFaces mobile. Your best bet is to report this issue to the PF guys.

In the meanwhile, you can workaround this by executing this script in end of head or begin of body, either inline or via a custom script file:

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

This basically defaults to lowercased version of widget name when no CSS/JS resource name is defined. Now the progress count appears as bold and there's a space in front of that count:

This brings us to the second problem. The .ui-progressbar .ui-widget-beader CSS is missing the background color in the CSS. On standard (non-mobile) PrimeFaces, this is defined in theme-specific CSS file such as primefaces-aritso:theme.css. For mobile PrimeFaces, this style is thus expected in primefaces:primefaces-mobile.css, however it contains only the <p:panel> style.

I'm here not sure if this is a bug or an oversight in PrimeFaces mobile. Also here, your best bet is to report this issue to the PF guys.

In the meanwhile, you can get it to style by adding the following CSS in end of head, either inline or via a custom CSS file:

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

You might only want to add a tiny border as finishing touch.

这篇关于为什么我的 p:progressBar 没有显示，只有数字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆