Aula 1-Desenvolvendo uma aplicação

Neste material estaremos considerando que você já possua as ferramentas de desenvolvimento instaladas em sua máquina, conforme demonstradas na introdução deste curso.

1)    Vamos agora abrir o b4a e montar o nosso aplicativo utilizando-se desse b4a. A figura 1 respresenta a tela inicial:

2)- Crie uma pasta na unidade c: do seu computador com o nome de projetonomesobrenome. Caso não seja possível criar na unidade c:, pode criar em outro lugar do windows.

3)-Agora com o b4a aberto, vá no menu "arquivo", em seguida clique na opção "Salvar como" e salve o projeto com o nome de ProjetoNomeSobrenome dentro da pasta que você acabou de criar no passo anterior.

4)-Agora uma etapa também importante é salvar dentro da mesma pasta criada o designer que será vinculado ao código. Para isso vá até o menu "designer" e selecione a opção "abrir o designer" conforme demonstrado abaixo:

5)-O resultado da ação proposta irá produzir o seguinte resultado.

 Vamos entender o que é o que nesta tela. Vamos lá:

1.    Região onde podemos modificar alguams propriedades tanto dos componentes inseridos como da tela.

2.    Região onde podemos inserir os componentes que farão parte da nossa aplicação.

3.    Região onde podemos inserir códigos extras como os de responsividade por exemplo.

6)- Para inserir os componentes, você poderá clicar no menu "Adicionar view" ou mesmo clicar com o botão direito em cima de qualquer ponto da região 2 conforme demonstrado abaixo.

 

7)- Vamos montar agora a tela do nosso aplicativo. Você poderá conectar o seu smartphone com android na usb do seu computador e visualizar como irá ficar o aplicativo na própria tela do seu celular ( talvez seja necessário fazer algumas configurações adicionais ou até mesmo instalar drivers que podem variar de diferentes modelos de celulares) ou rodar a partir de um emulador como o genymotion ( o qual também pode requerer algumas configurações adicionais). No meu caso estou usando o emulador genymotion o qual já mantive aberto e irei conecta-lo com o b4a através da opção "conectar" contida no menu "editor WYSIWYG".

8)- Você também pode ativar a opção "corresponder ao dispositivo conectado" para que o conteúdo previsto na interface automaticamente se ajuste à tela do celular ou do emulador em questão.

9)-Agora vamos montar a tela do nosso aplicativo da seguinte maneira:

Montando a tela e Mudando propriedades do exercício 1

Para inserir os próximos componentes, faça conforme demonstrado no passo 6.

 

 

Você deve ter notado que:

10)-Ainda com a janela do Visual Designer aberta, clique na opção "Arquivo" e em seguida "Salvar como". A ação proposta irá resultar na caixa de diálogo abaixo.

11)-Na caixa de diálgo Criar Novo Layout, digite o nome de l1 e clique no botão Ok.É muito importante você memorizar o nome que deu ao layout, pois será usado posteriormente no código.

12)-Veja como ficou a tela do aplicativo visualizada através do emulador Genymotion conectado ao b4a.

13)-Porém este layout ainda não possui nenhum código associado a ele que permita seu funcionamento correto. Nesse ponto passaremos ao segundo item do aplicativo, onde iremos declarar os objetos e os eventos no código e comunicá-los com o layout e dar ao layout o funcionamento após as devidas implementações. A forma mais fácil de fazer isso é através do menu "Ferramentas" e "Gerar membros" do Visual Designer, conforme demonstrado abaixo.

13)-O resultado da ação proposta aparece demonstrado abaixo.

14)-Agora selecione todos os objetos com a exceção da Activity, conforme demonstrado abaixo.

15)-Dessa maneira iremos selecionar e inserir no código todos os objetos que iremos utilizar. Agora vamos criar os eventos associados aos botões. Clique no ícone a esquerda da caixa da seleção do btnconectar para expandir as opções conforme demonstrado abaixo.

16)- A figura abaixo demonstra o resultado da ação proposta pelo passo anterior.

17)- Marque a oção "Click" pois iremos desenvolver a implementação do botão no evento click do mesmo. Repita as ações propostas pelos passos 15 e 16 para os botões fechar e limpar ( btnfechar e btnlimpar) de maneira que o resultado fique parecido com o demonstrado abaixo.

18)- Agora clique no botão "Gerar Membros" destacado pela figura abaixo.

19)- Feche a janela "Gerar membros" e em seguida feche a janela do Visual Designer para retornar ao editor de código visualizado abaixo.

20)- Agora uma ETAPA muito importante! Vamos associar o código a tela de layout l1 que criamos anteriormente ( lembrem-se que no passo 11 mencionei que era importante se lembrar de qual nome foi atribuído a tela de layout). Pois bem, as linhas que estão com uma aspa simples na frente, destacadas em verde no código, são linhas de comentários. Descomente a linha "Activity.LoadLayout("Layout1"), retirando a aspa simples desssa linha e substituia a palavra "Layout1" que está entre aspas e parenteses pelo nome que você atribuiu ao seu layout, conforme indicado abaixo.

Ao executar o aplicativo modificado a nova tela será exibida, seja no seu emulador ou até mesmo no próprio celular, porém ainda não estará funcionando corretamente.

21)-Agora vamos fazer a implementação do evento click do botão conectar (btnconectar_Click) conforme demonstrado abaixo.

22)-Agora, ao executar o aplicativo, já será possível conectar os textos digitados, bastando para isso digitar o nome e sobrenome em suas respectivas caixas e logo em seguida, clicar no botão conectar:

Para exercitar seus conhecimentos, segue o  código necessário para realizar as outras ações dos demais botões ( limpar e fechar). Segue a implementação dos mesmos: