Muitos colegas tem entrado em contato através do e-mail tdevrocks@tdevrocks.com.br para solicitar um help em relação navegação entre formulários. A principal pergunta dos colegas é em relação a um recurso bastante útil no Windows, em desktops. Quando chamamos o método ShowModal de um formulário, esse pode ser usado como um diálogo pausado, onde só deixamos o usuário passar para o próximo passo se o resultado dessa pausa for verdadeiro ou se a ação for executada.

Em aplicativos móveis os conceitos mudam assim como programar para web é diferente de programar para desktop. É sempre importante ter na cabeça que precisamos abrir a mente para novos paradigmas. Nesse tutorial mostrarei uma das técnicas que tenho utilizando atualmente para “pausar” uma ação em mobile. Veremos:

• Criação de layout em com 3 (Três) formulários;
• Ajustes do layout com abas;
• Navegação entre os formulários.

Requisitos:

• Vídeo: FireUI Novo Form Designer no RAD Studio XE7
• Vídeo: TMultiView no RAD Studio XE7
• Post: Tutorial: Criando meu app step-by-step

Criando o layout principal

O exemplo que criaremos aqui será extremamente simples, apenas para demonstrar a técnica que tenho utilizado. A ideia é criar uma espécie de “Assistente de Cadastro”, como as telas de instalação de programas no Windows, onde passamos por diversas telas. O usuário tocará em um botão de adição e será redirecionado a uma “janela de diálogo”. Na verdade faremos todo o trabalho usando abas do TabControl.

A primeira coisa que faremos é criar uma aplicação Mobile utilizando o menu correspondente no RAD Studio XE7. Abra o item File > New > MultiDevice – Application – Delphi e escolha o template Blank Application. Nosso formulário principal terá o nome de “frmPrincipal”. Salve sua unit como “UntPrincipal”. Nesse formulário adicione um componente TLayout modificando-o para permanecer com alinhamento Client. Troque o nome desse TLayout para lytPrincipal.

Agora adicione dentro do lytPrincipal um ToolBar. Naturalmente ele permanecerá alinhado ao topo. Nele adicione um SpeedButton com as seguintes propriedades configuradas:

• Align: Right;
• Margins.Right: 8px
• Name: spbAdd;
• StyleLookup: addtoolbuttonbordered

Isso fará com que tenhamos um botão de adição na parte superior. Esse será nosso botão que fará a simulação de adição de um registro em um banco de dados. Nós chamaremos um “diálogo” antes de entrar na tela de cadastro.

Agora, adicione um componente TabControl. Nós adicionaremos 3 (Três) abas nesse componente e cada aba será referente a uma “página” de nosso “assistente de cadastro”. Troque o nome desse TabControl para tbctrlPrincipal e coloque seu alinhamento para Client. Adicione 3 (três) abas. Vamos configurar cada uma das abas.

Aba 1: Dê o nome de tbitemPrincipal e em sua propriedade Text digite “Principal”. O Text não será mostrado ao usuário, apenas servirá de referência enquanto estamos no Delphi. Agora adicione a essa aba (TabItem) um label trocando seu Text para “Principal” e o alinhamento para Client. Na propriedade TextSettings, modifique o alinhamento HorzAlign para Center. Isso fará o texto do label aparecer centralizado na aba.

Aba 2: Apenas modifique o Text para “Diálogo”;

Aba 3. Apenas modifique o Text para “Cadastro”;

Retomando raciocínio

Basicamente o que faremos nesse tutorial é abrir 2 (dois) outros forms dentro das abas 2 (Diálogo) e 3 (Cadastro). Quando o usuário tocar em “+”, será redirecionado para a aba “Diálogo” e nela está carregada o formulário 2. Na segunda aba quando o usuário tocar em “Avançar”, faremos ele ir para a aba número 3 (Três) cadastro. E tanto na aba 2 quanto na 3, teremos um botão para voltar à aba anterior. Como em um assistente.

Agora vamos preparar um pouco da programação.

Na seção Public do formulário principal vamos criar o primeiro método. Ele será usado para mover a visualização das abas para frente e para trás. Antes disso insira um componente ActionList ao form e clique duas vezes nele.  No botão New Action clique na seta à direita dele para que possamos criar uma ação padrão clicando em New Standard Action. Selecione a opção ChangeTabAction e dê o nome para ela de actionTab. Essa ação recebe o nome da Tab para onde queremos ir, depois basta que chamemos o método para executar a ação. Retorne ao código e na seção Public digite a assinatura do método abaixo:

procedure GoToTab(ATabTarget: TTabItem; Sender: TObject);

Pressione Ctrl + Shift + C para que o Delphi crie para nós o escopo do método. Nós vamos ver que é simples, muito simples esse método, rs. Apenas digite:

procedure TfrmPrincipal.GoToTab(ATabTarget: TTabItem; Sender: TObject);
begin
  actionTab.Tab := ATabTarget;
  actionTab.ExecuteTarget(Sender);
end;

Veja como é simples. Apenas modificamos a propriedade Tab da nossa ação padrão passando para ela a Tab destino que recebemos no parâmetro do método. Em seguida chamamos a função ExecuteTarget da action passando um Sender. Feito isso, sempre que chamarmos esse procedimento, componente TabControl fará o trabalho de mudar de aba.

Nessa primeira fase, teremos um formulário principal com o aspecto da Figura 1.

Figura 1. Formulário Principal

Criando os demais formulários

Muito bom. Até aqui nada demais. O que faremos agora é criar e preparar os demais formulários para que possam ser adicionados ao projeto e possamos navegar entre eles. Crie um novo formulário agora selecionando Multi-Device Form – Delphi. Dê o nome a esse formulário de frmDialogo e salve-o como UntDialogo. Inclua nesse formulário primeiro um TLayout e modifique seu Name para lytDialogo e seu Align para Client. Adicione agora um ToolBar e nele dois SpeedButtons como a seguir:

SpeedButton1.

• Name := spbVoltar
• Align := Left
• Margins.Left := 8;
• StyleLookup := backtoolbutton
• Text := Voltar;

SpeedButton2:

• Name := spbAvancar
• Align := Right
• Margins.Right := 8
• StyleLookup := arrowrighttoolbutton

Inclua também um label no formulário e alinhe esse label como Client e em TextSettings na sub-propriedade HorzAlign coloque Center, ou se preferir adicione alguns componentes nesse form. A ideia é só identificar que estamos no formulário 2. Veja um exemplo de design na Figura 2.

Figura 2. Formulário Diálogo

Agora criaremos um terceiro formulário semelhante a esse. A única diferença será o SpeedButton da direita que será nosso botão Gravar. Crie esse novo formulário com o nome de frmCadastro e a unit salve como UntCadastro. Repita os passos anteriores apenas modificando o botão da direita. Dê o nome a ele de spbGravar e o Text como “Gravar”. O StyleLookup modifique para buttonstyle. Se preferir insira alguns controles no form ou faça como no passo anterior, adicionando um label com o Text igual a “Cadastro”. Veja um exemplo na Figura 3.

Figura 3. Formulário de Cadastro

Navegar em forms e aguardar uma ação

Vamos para a parte final agora onde faremos toda a codificação para mudança de abas e abertura dos respectivos formulários. Retorne ao primeiro formulário, o principal, e faça uso dos dois novos formulários usando o menu File > Use Unit. Adicione o frmDialogo e frmCadatro a área Interface do principal. Em seguida pressione F12 para vermos a página de código e suba até a área Public. Adicione duas novas variáveis, como mostrado a seguir:

FDialogo : TfrmDialogo1;
FCadastro : TfrmCadastro

Repare que utilizei a mesma técnica empregada em nosso Tutorial: Criando meu app step-by-step, dessa forma tenho controle total sobre o formulário que será criado/aberto. Tendo como objetivo abrir o segundo formulário dentro da aba 2 (dois, Diálogo) faremos uma programação relativamente simples. Veja na Listagem 1 o evento OnClick no spbAdicao. Clique duas vezes no nosso botão de adição e digite o código.

procedure TfrmPrincipal.spbNovoClick(Sender: TObject);
begin
  if not (Assigned(FDialogo)) then
    FDialogo := TfrmDialogo1.Create(Self);

  tbitemDialogo1.AddObject(FDialogo.lytDialogo);
  frmPrincipal.GoToTab(frmPrincipal.tbitemDialogo1, Sender);
end;

Listagem 1. Chamando o diálogo

Não há grandes segredos aqui. Primeiro testamos se a variável referente ao diálogo é diferente de nil, ou seja, já recebeu a instância de algum objeto (nesse caso o form 2). Caso negativo, nós criamos o frmDialogo. Em seguida adicionamos o lytDialogo, o TLayout presente no form 2, fazendo com que todos os componentes presentes no formulário sejam “redirecionados” para o form principal. Por fim chamamos o nosso método GoToTab passando para ele a segunda aba como alvo e o Sender do próprio método.

A programação no formulário principal se encerra no OnCreate dele, onde vamos posicionar por default na primeira aba do TabControl e esconder as abas para que o usuário não veja que temos 3 (três) abas. Digite o código abaixo no OnCreate.

  tbctrlPrincipal.ActiveTab   := tbitemPrincipal;
  tbctrlPrincipal.TabPosition := TTabPosition.None;

Em nosso segundo formulário faremos a programação dos dois botões existentes. Antes de tudo, temos que adicionar as units do Form 1 (Principal) e Form 3 (Cadastro), para isso acesse File > Use Unit e selecione os dois formulários que aparecem. Mande adicionar na seção Implementation, para evitar referência circular na compilação.

No código no primeiro botão (voltar) digite o código da linha a seguir. Verifique como é simples. Apenas estamos chamando nosso método GoToTab do formulário principal passando para ele a aba principal. Por isso incluímos a unit UntPrincipal ao nosso Uses.

frmPrincipal.GoToTab(frmPrincipal.tbitemPrincipal, Sender);

A programação do formulário de cadastro, ou seja, o OnClick do botão spbAvancar se assemelha a evento OnClick do botão spbAdicao do formulário principal. Precisamos verificar se a variável FCadastro já foi criada, criar o formulário de cadastro e em seguida adicionar o lytCadastro a terceira aba do TabControl principal. Veja a Listagem 3.

procedure TfrmDialogo1.spbAvancarClick(Sender: TObject);
begin
  if not (Assigned(frmPrincipal.FCadastro)) then
    frmPrincipal.FCadastro := TfrmCadastro.Create(Self);

  frmPrincipal.tbitemCadastro.AddObject(frmPrincipal.FCadastro.lytCadastro);
  frmPrincipal.GoToTab(frmPrincipal.tbitemCadastro, Sender);
end;

Listagem 3. Botão Avançar

Creio que já tenha entendido o que precisaremos fazer agora no formulário de cadastro. O botão Voltar deverá chamar novamente a aba de diálogo e o gravar nós simularemos a gravação de um registro e redirecionaremos para a aba principal. No OnClick do botão Voltar da tela de cadastro digite apenas:

frmPrincipal.GoToTab(frmPrincipal.tbitemDialogo1, Sender);

E no botão Gravar, apenas:

  ShowMessage('Dados Gravados com sucesso!');
  frmPrincipal.GoToTab(frmPrincipal.tbitemPrincipal, Sender);

Repare que fazemos referência ao form principal, portanto temos que adicionar a UntPrincipal ao uses do form usando File > Use Unit. Salve todo o projeto e execute tanto no Windows quanto no Android ou iOS, funcionará 100%. É evidente que é necessário fazer outros controles para liberar os formulários de memória, etc, mas isso fica a critério de cada um #ficaadica.

Conclusão

Nesse tutorial, vimos como é simples trabalhar com mais de um formulário em aplicações Android e iOS. O segredo de tudo é desmistificar os conceitos de programação para smartphones e tablets. Os conceitos de desenvolvimento para cada plataforma mudam e precisamos estar atentos a isso. Cada dispositivo e sistema operacional possui suas particularidades, então devemos esquecer um pouco o jeito de programar para Desktop e modificar nossos métodos.

#GoToDelphi

Download do código-fonte