Um UX melhorado com AJUI_Progressbar

Alguma vez executou uma acção, nada parecia acontecer, e não sabia se devia clicar novamente ou continuar à espera? Não há feedback fornecido, mesmo que a aplicação esteja a executar uma acção em segundo plano? Talvez a acção exija algum tempo para devolver um resultado? Como deve saber, 4D já fornece uma componente de barra de progresso integrada que torna o tempo de execução mais tolerável, mas se quiser algo com um design mais parecido com a web então continue a ler, porque é isso que a AJUI_Progressbar lhe dá!

O que é a AJUI_Progressbar

A AJUI ProgressBar é um componente desenvolvido com 4D 17 R3, baseado na tecnologia SVG e 4D Worker. Permite gerar barras de progresso muito facilmente. O componente cria um conjunto de propriedades para definir as características e a renderização visual das barras de progresso. Há também fórmulas de acesso a avaliadores e métodos para a geração de barras de progresso.

O componente contém dois tipos de instâncias, representando duas variantes específicas das barras de progresso disponíveis. A primeira é um estilo linear e a segunda é circular. Cada variante tem propriedades específicas do seu desenho.

Podem ser atribuídos às barras valores numéricos que vão de 0 a 100, mas como o texto apresentado pode ser personalizado, é possível representar visualmente outros valores. O componente utiliza o Worker para actualizar a página ao gerar barras de progresso. O Trabalhador também tem outra utilização: proporcionar a capacidade de gerir as animações.

O componente oferece vários métodos para personalizar e manipular a barra de progresso usando um objecto e funções. Também fornece dois métodos para recuperar instâncias para cada tipo de barra de progresso:

• Nova barra de progresso AJUI_ProgressBar: Barra de progresso linear.
• Nova Barra de Progresso Circular da AJUI: Barra de progresso circular.

Ambos os métodos retornam obejctos contendo as propriedades da barra, os seus valores por defeito, bem como fórmulas para os manipular.

Os outros métodos disponíveis são prefixados com “HDI” (How do I). Estes métodos permitem-lhe chamar formulários contendo exemplos de como utilizar as características do componente.

Estabelecimento de uma barra de progresso linear

• Primeiro, adicionar um objecto de imagem a um formulário. Este objecto será utilizado para hospedar a barra de progresso. Pode-se adicionar vários objectos de imagem se se quiser gerar várias barras de progresso simultaneamente.
• O segundo passo consiste em criar uma instância da barra de progresso. Pode optar por lançar um dos dois métodos descritos acima. Idealmente, o objecto devolvido pelo método da sua escolha deve ser armazenado na variável “Forma”. É também recomendado acrescentar um nível ao objecto “Forma”.

Uma vez feito isso, adicione o nome do seu objecto de imagem à instância. Depois, para testar, sugerimos que modifique o valor da progressão (por defeito: 0) e active as animações. Para gerar a sua barra de progressão, basta lançar a correspondente fórmula de “lançamento”.

Se tiver adicionado vários objectos de imagem, repita o segundo passo para cada um deles (uma instância por objecto de imagem).

Eis como é o código para uma barra de progresso linear:

AJUI_Progressbar em profundidade

Mais detalhes, bem como um tutorial passo a passo sobre a utilização e configuração do componente, estão disponíveis aqui. Quer opte por utilizar a barra de progresso AJUI_Progressbar ou o componente da barra de progresso 4D incorporado, irá tranquilizar os utilizadores de que algo está de facto a acontecer. Divirta-se!