2

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>
Glory to Russia
  • 17,289
  • 56
  • 182
  • 325

1 Answers1

6

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Issue was already reported in PF: http://code.google.com/p/primefaces/issues/detail?id=7717, please 'star' the issue – Kukeltje Jan 23 '15 at 12:29