Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

jsf - Why is my p:progressBar not displayed, only the number?

0 votes
1.2k views
in Technique[技术] by (71.8m points)

jsf - Why is my p:progressBar not displayed, only the number?

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.

Screenshot

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

enter image description here

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:

enter image description here

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

enter image description here

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


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...