Olá desenvolvedores, no tutorial anterior, progress bar parte1 apresentamos o primeiro exemplo de implementação de uma barra progressiva com Javascript. Neste segundo exemplo utilizaremos o jQuery.

Iremos trabalhar dentro da estrutura da página JSP onde implementamos o primeiro exemplo. Desse modo, o primeiro passo para trabalharmos com jQuery é declará-lo na página JSP progresbar.jsp, utilizaremos a declaração jQuery para o CSS e Javascript. A declaração é feita no escopo da tag <head>.

Mas diferente do que fizemos com o Javascript onde utilizamos o id para referenciar um elemento da DOM, iremos neste exemplo, utilizar uma classe de CSS já existente no jQuery e sobrescrevê-la, a classe .ui-progressbar que conterá apenas uma position relative.

E a segunda classe que conterá inicialmente um texto o qual receberá alguns parâmetros de estilização. Lembrando que a estilização do css incorporado a página HTML acontecerá sempre dentro do cabeçalho (head).

Agora dentro da tag body criaremos uma div para exibir a barra de progresso, esta será referenciada a partir de um id. E aninhada dentro da primeira div, implementaremos uma segunda div, cuja classe é a mesma que estilizamos no CSS.

IMPLEMENTANDO O JQUERY

A ideia é que tão logo a página seja carregada a função jQuery será startada. O escopo da função receberá uma variável com o id da primeira div, e uma segunda variável com a classe da div aninhada.

Para criar a barra de progresso consideraremos a primeira div, e lembrando que desejamos que ela seja iniciada assim que a página estiver carregada, dessa forma atribuiremos um valor de entrada false para esta div.

E então criaremos um método que dispara um evento de mudança, ou executa uma função quando um evento de mudança ocorre. Assim, enquanto houver mudança na barra de progresso o método change() incrementará valores fazendo a barra progredir continuamente.

No caso da nossa implementação o change() irá especificar uma função a ser executada quando o evento de mudança ocorrer para os elementos selecionados. Estes elementos são a progresslabel e progressbar.

Mas se por outro lado o progresso da barra já estiver completo, exibiremos a mudança do status de “carregando…” para “completo!”.

OBS. Deixamos o fechamento da chave seguido da vírgula, para que fique claro que trata-se da continuação da implementação do jQuery.

O progresso será exibido em porcentagem que será incrementada até que chegue ao estágio final que significa progresso completado com sucesso, ou seja, 100%. Então a progresbar ou terá um valor ou será zero, havendo um valor, ele será incrementado de dois em dois.

Assim, se o valor for menor ou igual a 99, o incremento prosseguirá, e para isso chamaremos a função progress de forma recursiva por meio do método setTimeout que executa uma função depois de esperar um número especificado de milissegundos.

E fora do escopo da função progress(), nós a chamaremos com um intervalo de dois segundos para a primeira execução.

setTimeout(progress, 2000);

EM POUCAS PALAVRAS

E assim temos o exemplo de implementação de dois estilos diferentes de barra de progresso que você poderá implementar em seus projetos. Eu fico por aqui e nós nos vemos no próximo tutorial.