10 Replies Latest reply on Mar 9, 2011 9:50 AM by edilmar

Problem with progressBar and livedemo

edilmar Mar 7, 2011 3:01 PM

Hi,

I have an webapp with JSF2/RichFaces3.3.3/CDI/GlassFish3.0.1.

I want to create a button that, when clicked, opens a modalPanel and shows a progressBar.

The first iteration of the progressBar should call a webservice in the managed bean to process something.

Then, in each iteration of the progressBar, I need to check in the managed bean if the webservice response is available. If not, it continues waiting with progressBar; otherwise, the progressBar should stay invisible and a message "Something processed..." shoube stay visible.

First of all, I tried to test the progressBar sample from LIVEDEMO (http://livedemo.exadel.com/richfaces-demo/richfaces/progressBar.jsf?c=progressBar&tab=usage). I copied the same ProgressBarBean.java and created my teste.xhtml like the sample file. Below is my xhtml:

However, this doesn't behaviour like LIVEDEMO sample. Look at my page after rendered:

The button to start process is not show, the progressBar appears directly.

What's the problem with this sample? Is there some problem in ProgressBarBean.java?

My browsers are Firefox 3.5.15 and Chrome 9, Linux Fedora12.

The Console Error from JS in Firefox arises these errors:

1. Alerta: Propriedade desconhecida “text-color”. Declaração ignorada.

Arquivo-fonte: http://localhost:8080/sitesat2/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/progressBar.xcss/DATB/eAGTcz60MXT5DGkAD2IDhA__.jsf

2. Alerta: Propriedade desconhecida “text-color”. Declaração ignorada.

Arquivo-fonte: http://localhost:8080/sitesat2/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/progressBar.xcss/DATB/eAGTcz60MXT5DGkAD2IDhA__.jsf

3. Alerta: Erro no processamento do valor de “filter”. Declaração ignorada.

Arquivo-fonte: http://localhost:8080/sitesat2/a4j/s/3_3_3.FinalMETA-INF/skins/glassX.xcss/DATB/eAGTcz60MXT5DGkAD2IDhA__.jsf

4. Alerta: Erro no processamento do valor de “filter”. Declaração ignorada.

Arquivo-fonte: http://localhost:8080/sitesat2/a4j/s/3_3_3.FinalMETA-INF/skins/glassX.xcss/DATB/eAGTcz60MXT5DGkAD2IDhA__.jsf

1. Problem with progressBar and livedemo

boy18nj Mar 7, 2011 3:13 PM (in response to edilmar)

The button to start process is the button you use to call web service. Post your code.
Actions
2. Problem with progressBar and livedemo

edilmar Mar 7, 2011 4:04 PM (in response to boy18nj)

Hi,

I didn't write the code to call webservice yet. I only tried to use the sample progressBar and it didn't work.
Actions
3. Problem with progressBar and livedemo

boy18nj Mar 7, 2011 4:25 PM (in response to edilmar)

Poat your code, because i have tried demo in my workspace and it works as expected.
Actions
4. Problem with progressBar and livedemo

edilmar Mar 8, 2011 3:46 PM (in response to boy18nj)

The xhtml and java code are the same from livedemo. I just make a copy/paste of sample code. Could you send me your code to compare with mine?
Actions
5. Problem with progressBar and livedemo

snaker Mar 9, 2011 4:12 AM (in response to edilmar)

How i use the progressBar when i call a webservice, an example please
Actions
6. Problem with progressBar and livedemo

ilya_shaikovsky Mar 9, 2011 4:23 AM (in response to snaker)

if the page/Bean code are the same - should works :/ If there are any exceptions in console? Post web-xml also please.
Actions
7. Problem with progressBar and livedemo

marsim86 Mar 9, 2011 4:47 AM (in response to ilya_shaikovsky)

Hi,

I'm Kike's partner. I'm going to put the code example, this is exactly the same that showcase write for you with my needed changes added (marks in bold).

The xhtml file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <h:form id="form">
        <rich:progressBar mode="ajax" value="#{progressBarBean.currentValue}"
            interval="2000" id="pb" enabled="#{progressBarBean.enabled}"
            minValue="0" maxValue="100" reRenderAfterComplete="progressPanel">
            <f:facet name="initial">
                <h:panelGroup>
                    <h:outputText value="Process doesn't started yet" />
                    <a4j:commandButton action="#{progressBarBean.startProcess}"
                        value="Start Process" execute="@form" render="pb"
                        rendered="#{progressBarBean.buttonRendered}"
                                        style="margin: 9px 0px 5px;"
                                       actionListener="#{progressBarBean.elapse}">

                                </a4j:commandButton>

                </h:panelGroup>
            </f:facet>
            <f:facet name="finish">
                <h:panelGroup>
                    <h:outputText value="Process Done" />
                    <a4j:commandButton action="#{progressBarBean.startProcess}"
                        value="Restart Process" execute="@form" render="pb"
                        rendered="#{progressBarBean.buttonRendered}"
                        style="margin: 9px 0px 5px;" />
                </h:panelGroup>
            </f:facet>
            <h:outputText value="#{progressBarBean.currentValue} %" />
        </rich:progressBar>
    </h:form>
</ui:composition>

And the Managed Bean:
public class ProgressBarBean implements Serializable {
          private static final long serialVersionUID = -314414475508376585L;

    private boolean buttonRendered = true;
    private boolean enabled = false;
    private Long startTime;
    int i=0;

    public String startProcess() {
        setEnabled(true);
        setButtonRendered(false);
        setStartTime(new Date().getTime());
        return null;
    }

    public String elapse(){
              System.out.println("llamo a elapse");

              i=0;
              do{
                        i+=5;
                        System.out.println("Estoy en el elapse time(" + i + ")");
                        try {
                                        Thread.currentThread().sleep(1000);
                              } catch (InterruptedException e) {
                                        // TODO Auto-generated catch block
                                        e.printStackTrace();
                              }
              }while(i<100);
              return null;
    }

    public Long getCurrentValue() {
        if (isEnabled()) {
                  System.out.println("i=" + i);
            Long current = (new Date().getTime() - startTime) / 1000;
            if (current >= 100) {
                setButtonRendered(true);
            } else if (current.equals(0)) {
                return new Long(1);
            }
            return (new Date().getTime() - startTime) / 1000;

        }
        if (startTime == null) {
            return Long.valueOf(-1);
        } else {
            return Long.valueOf(100);
        }
    }

    public boolean isEnabled() {
        return enabled;
    }

    public void setEnabled(boolean enabled) {
        this.enabled = enabled;
    }

    public Long getStartTime() {
        return startTime;
    }

    public void setStartTime(Long startTime) {
        this.startTime = startTime;
    }

    public boolean isButtonRendered() {
        return buttonRendered;
    }

    public void setButtonRendered(boolean buttonRendered) {
        this.buttonRendered = buttonRendered;
    }
}

The progressBar isn't update while elapse method is working. I would like while elapse metod was running, the progressBar was changing.
I try to put the elapse call in other places but it never works as I would like.
Actions
8. Problem with progressBar and livedemo

ilya_shaikovsky Mar 9, 2011 4:55 AM (in response to marsim86)

No that's wrong. startProcess makes the progressBar enabled.. but that request should be finished and PB should be updated according to responce to reflect that. And in your case the request it still on server because it performs long-running operation in the same request. so PB on the client has no idea about it's enabled state.
Actions
9. Problem with progressBar and livedemo

marsim86 Mar 9, 2011 5:02 AM (in response to ilya_shaikovsky)

Then, how can i start de progressBar at the same time elapse method, and the PB was updated while elapse is working?
Actions
10. Re: Problem with progressBar and livedemo

edilmar Mar 9, 2011 9:50 AM (in response to ilya_shaikovsky)

Here is my xhtml file, basically the same from sample livedemo, but with html/body tags... The button is not show, the progressBar appears directly.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:sm="http://submacro.dev.java.net/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

<body>
    <h:form>
      <a4j:outputPanel id="progressPanel">
        <rich:progressBar value="#{progressBarBean.currentValue}"
                          interval="2000" label="#{progressBarBean.currentValue} %"
                          enabled="#{progressBarBean.enabled}" minValue="-1" maxValue="100"
                          reRenderAfterComplete="progressPanel">
          <f:facet name="initial">
            <br />
            <h:outputText value="Process doesn't started yet" />
            <a4j:commandButton action="#{progressBarBean.startProcess}"
                               value="Start Process" reRender="progressPanel"
                               rendered="#{progressBarBean.buttonRendered}"
                               style="margin: 9px 0px 5px;" />
          </f:facet>
          <f:facet name="complete">
            <br />
            <h:outputText value="Process Done" />
            <a4j:commandButton action="#{progressBarBean.startProcess}"
                               value="Restart Process" reRender="progressPanel"
                               rendered="#{progressBarBean.buttonRendered}"
                               style="margin: 9px 0px 5px;" />
          </f:facet>
        </rich:progressBar>
      </a4j:outputPanel>
    </h:form>

</body>
</html>
And here is my web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<context-param>
    <param-name>org.richfaces.SKIN</param-name>
    <param-value>glassX</param-value>
</context-param>

<context-param>
    <param-name>org.richfaces.CONTROL_SKINNING</param-name>
    <param-value>enable</param-value>
</context-param>

<filter>
    <display-name>RichFaces Filter</display-name>
    <filter-name>richfaces</filter-name>
    <filter-class>org.ajax4jsf.Filter</filter-class>
    <init-param>
      <param-name>enable-cache</param-name>
      <param-value>true</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>richfaces</filter-name>
    <servlet-name>Faces Servlet</servlet-name>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
    <dispatcher>INCLUDE</dispatcher>
</filter-mapping>

<context-param>
    <param-name>org.ajax4jsf.COMPRESS_SCRIPT</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.LoadStyleStrategy</param-name>
    <param-value>all</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.LoadScriptStrategy</param-name>
    <param-value>all</param-value>
</context-param>

<context-param>
    <param-name>javax.faces.DISABLE_FACELET_JSF_VIEWHANDLER</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>javax.faces.FACELETS_REFRESH_PERIOD</param-name>
    <param-value>2</param-value>
</context-param>
<context-param>
    <param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
</context-param>
<context-param>
    <param-name>com.sun.faces.validateXml</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
    <param-value>.xhtml</param-value>
</context-param>
<context-param>
    <param-name>facelets.DEVELOPMENT</param-name>
    <param-value>true</param-value>
</context-param>

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
    <session-timeout>
            10
    </session-timeout>
</session-config>
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>

<security-constraint>
    <display-name>Restrict XHTML Documents</display-name>
    <web-resource-collection>
      <web-resource-name>XHTML</web-resource-name>
      <url-pattern>*.xhtml</url-pattern>
    </web-resource-collection>
    <auth-constraint>
      <description>Somente desenvolvedores terão acesso aos arquivos XHTML</description>
      <role-name>developer</role-name>
    </auth-constraint>
</security-constraint>

<error-page>
    <exception-type>javax.enterprise.context.NonexistentConversationException</exception-type>
    <location>/expired.html</location>
</error-page>
<error-page>
    <exception-type>org.jboss.weld.context.NonexistentConversationException</exception-type>
    <location>/expired.html</location>
</error-page>
<error-page>
    <exception-type>javax.faces.application.ViewExpiredException</exception-type>
    <location>/expired.html</location>
</error-page>

</web-app>
Actions

Go to original post