Exibindo barra de progresso com JSF e Primefaces

Exibindo barra de progresso com JSF e Primefaces. O Prime Faces possui o componente progressbar onde exibe uma barra de progresso enquanto um método é executado sendo possível mostrar o status do progresso em percentual e mensagens para o usuário ver o que esta ocorrendo.
Utilizar esse componente é interessante pois o usuário que acionou o método percebe que o sistema de fato esta fazendo algo.
Criei um exemplo com:

  • Javaserver Faces – Mojarra 2.2.13
  • PrimeFaces 6.0
  • Apache Tomcat 8.0.27
  • Maven 3.3
  • JDK 8.0.101
  • Java EE 7
  • Netbeans 8.1

O exemplo a seguir ira processar uma quantidade de notas definido pelo usuário, o progressbar ira mostrar o percentual de notas já processada e informando qual nota esta no momento da ação, após a ação uma tabela ira ser apresentada com as notas processadas e um botão de cancelar notas estará visível fazendo o mesmo processo com o progressbar porem limpando a lista de notas.

Crie um projeto no Netbeans , na categoria Maven>Aplicação Web;
progres-bar-primefaces-1

de nome ao projeto;
progres-bar-primefaces-2
Selecione o servidor Apache Tomcat 8.0.27 e a especificação Java EE 7 Web;
progres-bar-primefaces-3
E clique em finalizar.
Com o projeto criado vá em Propriedades > Frameworks e clique em adicionar e selecione a opção Java Server Faces;
progres-bar-primefaces-4
Defina a extensão que ira ser usada pelo JavaServer Faces,eu prefiro usar o .jsf ;
progres-bar-primefaces-5
Marque a opção do Prime Faces e clique em OK;
progres-bar-primefaces-6
No projeto em Arquivos do Projeto abra o pom.xml.
E configure o da seguinte forma:
progres-bar-primefaces-7
progres-bar-primefaces-8
progres-bar-primefaces-9
Expanda a pasta Paginas Web e exclua os arquivo index.html e welcomePrimefaces.xhtml, mantendo apenas o index.xhtml para o exemplo. No pacote do projeto crie a classe ExemploBean, a estrutura do projeto ficara da seguinte forma:
progres-bar-primefaces-10
Agora vamos codificar a classe ExemploBean que será do tipo ViewScoped, onde os dados são mantidos enquanto não houver troca ou atualização de pagina, que será responsável em processar as notas, atualizar o progressbar, atualizar a mensagem de erros e de informação ao usuário.
progres-bar-primefaces-11
progres-bar-primefaces-12
progres-bar-primefaces-13
progres-bar-primefaces-14
progres-bar-primefaces-15
progres-bar-primefaces-16
A classe contem 4 variáveis e 5 métodos:
1. progresso = valor entre 0 a 100 que será usado no progressbar;
2. mensagem = mensagem de notas sendo processadas ou canceladas ;
3. quantidadeNotas = quantidade de notas que o usuário informou;
4. notas = lista de notas processadas;

init() = atribui valores para quantidade e notas na renderização da pagina.
criarMensagem(String texto) = cria uma mensagem que será exibida para usuário através do componente p:messages,onde texto é a mensagem informada.
resetarProgresso() = reseta o progresso e a mensagem do progressbar.
atualizarProgresso(int i) = atualiza o progresso,onde i é posição da nota na lista.
processarNotas(int acao)= processa as notas,podendo ser adicionadas ou canceladas, onde ação sendo 1 as notas serão processadas , 2 as notas serão canceladas e3 as notas serao processadas porem ira ocorrer um erro.

No arquivo index.xhtml estão os componentes de Prime Faces e JavaServer Faces,e são eles:
progres-bar-primefaces-17
progres-bar-primefaces-18
progres-bar-primefaces-19
progres-bar-primefaces-20
h:form =formulário do jsf
p:messages = mostra mensagens criada pelo facesmessage
o atributo closable=true significa que será possível fechar a mensagem;
p:outputLabel = label usado para relacionar com input text;
o atributo for=”qtd” corresponde ao id do inputtext;
o atributo rendered=”#{exemploBean.notas.size() eq 0}” significa que esse label so será mostrado se a lista de notas estiver vazia;
p:inputText= campo usado para digita quantidade de notas;
o atributo required=”true” torna obrigatório a informação dele;
f:validateLongRange =faz validação no inputtext onde o valor minimum=”1″ e maximum=”1000″;
p:commandButton =botão que chama um método da classe;
o atributo onclick=”PF(‘pb’).start();PF(‘poll’).start();” inicia o progressbar e o atualizador da mensagem;
o atributo onstart=”PF(‘dlg’).show()” exibite a janela do progressbar,;
o atributo oncomplete=”PF(‘dlg’).hide();PF(‘pb’).cancel();PF(‘poll’).stop();” após a finalização do método ira fechar a janela,cancelar o progressbar e para o atualizador de mensagem;
o atributo update=”:form :prg” atualiza os dois forms da pagina;
o atributo actionListener=”#{exemploBean.processarNotas(1)}” aciona o método de processarNotas da classe sendo que o parâmetro 1 significa ira processar notas ,parâmetro 2 ira cancelar as notas e 3 ira processar as notas porem com erro.
p:dataTable =lista de notas processadas após a conclusão do método;
o atributo value=”#{exemploBean.notas}” é a lista de notas;
o atributo var=”n” é o apelido para represetar uma nota da lista,;
o atributo scrollable=”true” define que ultrapassando a largura e altura definidas um scroll devera ser inserido;
o atributo scrollHeight=”400″ define o altura máxima antes do scroll,;
o atributo paginator=”true” define que ira paginar a lista;
o atributo rows=”30″ define que ira mostrar cada 30 registro por pagina;
o atributo rendered=”#{exemploBean.notas.size() gt 0}” define que datatable ira ser mostrado se a lista de notas não estiver vazia.
f:facet = exibe um cabeçalho para a lista de notas;
o atributo name=”header” significa que o texto será exibido como cabeçalho;
p:column = coluna do datatable;
o atributo headerText=”Numero” é o cabeçalho da coluna;

p:dialog = janela do progressbar e atualizador de mensagem,;
o atributo widgetVar=”dlg” define um nome para ser usado em funções javascript;
o atributo appendTo=”@(body)” faz com que a janela esteja acima do body do HTML;
o atributo modal=”true” desabilita ao cesso aos componentes atrás da janela,;
o atributo width=”400″ define a largura da janela, o atributo height=”100″ define a altura da janela;
o atributo header=”Progresso” define o cabeçalho da janela;
o atributo draggable=”false” define que a janela não poderá será arrastada;
o atributo closable=”false” define que a janela não terá opção de fechar;
o atributo closeOnEscape=”false” define que a janela não terá opção de fechar pela tecla esc;
o atributo resizable=”false” define que a janela não poderá ser redimensionada;
o atributo minimizable=”false” define que a janela não pode minimizada;
p:poll =atualiza um componente de tempo em tempo;
o atributo interval=”1″ define que o componente declarado em update será atualizado em 1 segundo;
o atributo widgetVar=”poll” define o nome para ser usado em funções javascript,;
o atributo autoStart=”false” desabilita o atutostart do poll;
o atributo async=”true” define que as requisicoes não será enfileiradas,;
o atributo update=”:prg:msg” define o componente que será atualizado;
o atributo immediate=”true” define que não haverá validações no formulário quando o poll for executado
h:outputText =saída comum de texto do jsf
p:progressBar = componente responsável pelo progresso do método;
o atributo widgetVar=”pb” identifica o componente para serpor funções javascript,;
o atributo ajax=”true” garante que a atualização do progresso será via Ajax;
o atributo labelTemplate=”{value}%” formata a visualização do progresso;
o atributo styleClass=”animated” define que a barra ira ser animada,;
o atributo global=”false” define que o progressbar não é global.
progres-bar-primefaces-21
progres-bar-primefaces-22
progres-bar-primefaces-23
progres-bar-primefaces-24
Com isso você viu como usar o progressbar do primefaces para mostrar informação enquanto um método esta em execução, pode substituir o método processarNotas por qualquer outro que esteja acessando o banco de dado,consumindo um WebService e etc.

Vídeo

Github

https://github.com/deividnn/progressbar-jsf/

Tutorial em PDF

Mais de 200 aulas curso completo em JSF 2.2
JSF 2.2 e PrimeFaces
Curso completo em JSF 2.2 com PrimeFaces, Spring e Hibernate. Iremos do básico ao avançado em JSF.
2.985 alunosHoras do curso 100h Horas do curso certificado
Promoção R$ 189
12x de R$ 18,41
A melhor forma de aprender a desenvolver sistemas em Java é tendo como exemplo um projeto e curso completo onde possa observar o código para melhor entendimento do funcionamento das rotinas a acompanhar as vídeos aulas de desenvolvimento. Esse curso contém tudo que um desenvolvedor precisa saber para entrar no mercado de trabalho.
Rotinas avançadas para o dia a dia web
Top 10 Java EE
Ensinaremos passo a passo o desenvolvimento de rotinas avançadas e super importantes em Java Web.
536 alunosHoras do curso 15h Horas do curso certificado
Promoção R$ 49
5x de R$ 10,54
Todo programador deve dominar as seguintes técnicas em desenvolvimento de sistemas abordadas por este curso completo.


Acesse
Cursos e Projetos
Java
Acesse
Outros Cursos
PHP MySQL Android
Acesse
Encomende um Projeto
Feito pra Você
Acesse
Tire as Dúvidas On-line
Consultor
Acesse
Aulas de Java só suas
Encomende Agora
Acesse
Dividindo Conhecimento
Posts e Tutoriais
Acesse
Sites e Parceiros
Associados
Acesse
Conheça os curso gratuitos
Grátis

2 Respostas do Autor

  1. Renan disse:

    Não sabia que primefaces tinha esta propriedade. Obrigado por transmitir este conhecimento e parabéns pelo site muito bom, vou divulgá-los aos meus colegas de TI.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Instrutor Java Quer se tornar aluno VIP? CLIQUE AQUI!
Instrutor Java

Alex Fernando Egidio
Autor, criador e fundador do Java Avançado Cursos TI. Atua no mercado como desenvolvedor e engenheiro de sistemas em Java é apaixonado por desenvolvimento web em Java e pela “mágica” que seus frameworks trazem para o dia a dia de nós desenvolvedores.
Com mais de 10 anos de experiência ajuda programadores do Brasil todo a se tornarem profissionais.