Seguindo a série de tutoriais sobre personalização de aplicativos para iOS e Android, nessa publicação responderemos uma pergunta que temos recebido com certa frequencia: como incluir uma mensagem “Aguarde” em nossos aplicativos móveis. É muito comum em aplicativos desktop usarmos um ProgressBar para mostrar o progresso de uma deteminada tarefa. Em mobile isso é um pouco diferente, pois precisamos pensar em outros fatores.

Progresso com FGX

Existem diversas formas de se mostrar mensagens para o usuário durante a execução de tarefas, por isso mostraremos aqui apenas uma das formas que adotamos em nossos aplicativos: a utilização do componente de terceiro FGX, russo. Esse componente nada mais é do que uma série de classes que nos ajudam a melhorar a mensageria de nossas aplicações. O componente é FREE e recomendado para quem não deseja criar sua própria classe para “resolver esse problema”.

A primeira premissa, obviamente, é baixar e instalar os componentes, que em nosso entendimento é muito simples. Acesse primeiramente o site do desenvolvedor nesse link. Escolha o download referente à sua versão do Delphi e baixe o arquivo correspondente. Em nosso exemplo baixaremos o arquivo 0.6.0.60.zip que serve para RAD Studio XE8, mas já testamos também no RAD Studio e Delphi 10 Seattle.

Descompacte o arquivo em um diretório de sua preferência e em seguida abra o Delphi. Clique em File > Open Project e localize o arquivo FGXGroup.groupproj no diretório do arquivo descompactado. Esse projeto é composto por dois pacotes (.bpl) que são fgx220.bpl e dclfgx220.bpl. Selecione o primeiro pacote e em seguida clique com o botão direito do mouse nele e selecione Install. Repita esse processo para o segundo pacote, com isso estamos preparados para usar todos os componentes que acompanham o pacote.

Utilizando os componentes

O primeiro componente que veremos é o de atividade, fgActivityDialog. Esse componente nos proporciona mostrar uma mensagem personalizada na tela do dispositivo que informará o usuário qual tarefa estamos realizando no momento. Crie uma nova aplicação MultiDevice Application – Delphi usando menu File > New e em seguida localize a paleta de componentes FGX: Extended FM Controls. Localize o componente informado e insira um deles em tela.

Clique uma vez no componente Activity e olhe suas propriedades, ele é bem simples. Você verá que ele basicamente possui as propriedades Message e Tittle. Essas são as únicas propriedades que precisamos mexer. Além das propridades, ele possui dois métodos:

• Show: Mostra caixa de diálogo;
• Hide: Oculta a caixa de diálogo.

Insira um botão em tela e no evento OnClick dele, codifique algo como abaixo:

  fgActivityDialog.Message := 'Por favor, aguarde';
  fgActivityDialog.Show;
  try
    Sleep(1000);
    fgActivityDialog.Message := 'Baixando arquivo info.txt';
    Sleep(1000);
    fgActivityDialog.Message := 'Baixando arquivo jogo.xml';
    Sleep(1000);
    fgActivityDialog.Message := 'Baixando arquivo delphi.zip';
    Sleep(1000);
    fgActivityDialog.Message := 'Finalizando';
    Sleep(500);
  finally
    fgActivityDialog.Hide;
  end;

Estamos, claro, simulando alguma atividade em nosso aplicativo. Usamos o método Sleep(1000) para dar uma pausa de um segundo simulando o tempo de carga do arquivo. Em uma aplicação real você usará os métodos Show e Hide antes e depois do comando que julgamos demorar um pouco mais para ser executado, respectivamente. Por exemplo. Digamos que queremos mostrar um diálogo informado ao usuário que uma determinada lista de dados do sistema está sendo carregada, vamos exemplificar uma lista de Clientes, uma query. O código ficaria mais ou menos como abaixo:

  fgActivityDialog.Title   := 'Aguarde...';
  fgActivityDialog.Message := 'Abrindo cadastro de Clientes';
  fgActivityDialog.Show;

  qryClientes.Active := False;
  qryClientes.SQL.Clear;
  qryClientes.SQL.Add('SELECT RAZAO, ENDERECO, APELIDO, CNPJ FROM CLIENTES WHERE ATIVO="S"');
  qryClientes.Active := True;

  fgActivityDialog.Hide;

Note que estamos adicionando um título a mensagem usando a propriedade Title e configurando a mensagem ao usuário “Abrindo cadastro de clientes”. Em seguida chamamos o método Show, abrimos a query e por fim ocultamos a mensagem. Em outras palavras podemos usar esse método para informar ao usuário sobre qualquer tarefa.

O segundo e também interessante componente é o fgProgressDialog. Ele mostra para o usuário uma barra de progresso que podemos configurar e mostrar exatamente o estado atual de uma tarefa, como o download de um arquivo por exemplo.

Insira uma instância desse componente em tela dê atenção às suas propriedades. A primeira delas é o Kind, ou tipo de progresso. Determinated significa que sabemos o início e fim do progresso. Undeterminated, evidentemente, o contrário, quando você não sabe quanto tempo uma tarefa irá durar.

Depois encontramos novamente as propriedades Title e Message que característica apresentada no componente Activity. E por fim a propriedade Progress, onde podemos configurar em runtime o estado atual da tarefa. Insira um novo botão em tela e no evento OnClick digite o código abaixo.

  fgProgressDialog.ResetProgress;
  fgProgressDialog.Show;
  try
    fgProgressDialog.Message := 'Preparando conteúdo do download';
    fgProgressDialog.Kind := TfgProgressDialogKind.Undeterminated;
    Sleep(1000);
    fgProgressDialog.Kind := TfgProgressDialogKind.Determinated;
    Sleep(1000);
    fgProgressDialog.Message := 'Baixando pacote 1';
    fgProgressDialog.Progress := 10;
    Sleep(1000);
    fgProgressDialog.Message := 'Baixando pacote 2';
    fgProgressDialog.Progress := 20;
    Sleep(1000);
    fgProgressDialog.Message := 'Reciclando dados';
    fgProgressDialog.Progress := 60;
    Sleep(1000);
    fgProgressDialog.Message := 'Finalizando';
    fgProgressDialog.Progress := 90;
    Sleep(500);
    fgProgressDialog.Progress := 100;
    Sleep(500);
  finally
    fgProgressDialog.Hide;
  end;

Como podemos ver, é bem fácil fazer uso do componente dando todas as informações tarefa a tarefa para o usuário de nosso aplicativo. Em caso de downloads de arquivos, você pode inclusive encontrar na internet diversos algoritimos que calculam a quantidade de bytes já baixados de um determinado arquivo e então usar para mostrar byte a byte o download de arquivos. Isso é muito interessante.

Nas figuras baixo você pode visualizar algumas das telas em ação dos componentes mencionados. Há ainda outros componentes importantes que acompanham esse pacote, assim como exemplos de uso. Acesse o diretório de instalação do pacote FGX e localize a pasta Samples, nela você encontra os exemplos de uso de cada um deles.

Conclusão

Mais um artigo onde mostramos que é possível personalizarmos nossos aplicativos móveis com apenas algumas breves linhas de comando e simplicidade no desenvolvimento.

Se gostou do artigo, pedimos que dedique alguns segundos de seu tempo e clique em Curtir e Compartilhe nas redes sociais essa publicação, assim você ajuda nosso blog a crescer ainda mais.

Obrigado, até a próxima e…

#GoToDelphi