CURSO APP INVENTOR 2 - BASICO - TOPICO 4.pdf

Curso APP Inventor Brasil

APRIMORANDO NOSSA TELA DE CADASTRO – PARTE I

APP Inventor Brasil [email protected]


Nesta aula vamos conhecer alguns componentes bem interessantes, porém focaremos no básico. Va até o palette e arraste os seguintes componentes: DatePicker e TimePicker, o quarto e o quinto na coluna palette.

Figura 28: DataPicker e TimePicker no palette O DataPicker é um botão que, quando clicado, abre uma caixa de diálogo para permitir que o usuário selecione uma data. Ele possui muitos métodos (funções prontas para sua utilização), vamos usar apenas uma em nosso aplicativo. Assim com o primeiro, o TimePicker também é um botão que abre uma caixa de diálogo para que você selecione um horário. Configure os dois Picker’s para que fiquem parecidos com estes:

Figura 29: Botões formatados A essa altura acredito que você já saiba como deixá-lo assim, sem que haja a necessidade de serem mostradas as configurações aqui na apostila. Caso esteja com dificuldades, no material complementar você pode encontrar todas essas configurações. Voltando ao nosso APP, agora vamos conhecer mais um componente e este é essencial para que nós possamos organizar elementos em nossa tela. Vá ao palette em layout e você encontrara três componentes: os arragement. São tabelas, onde você pode colocar outros componentes dentro delas. Arraste para tela o HorizontalArragement, que permite que os itens sejam alinhados horizontalmente, posicione-o logo abaixo do nosso DatePicker (botão definir data), essa tabela só possui cinco propriedades:



Figura 30: Tabelas

Figura 31: Propriedades das tabelas



Precisamos alterar a largura para que ela se ajuste ao tamanho da tela e o alinhamento vertical deve ser centralizado. Desta forma ficaram assim:

Figura 32: Tabela configurada Arraste o datePicker para dentro da tabela, e coloque outra label ao seu lado. A figura abaixo mostra como deve ficar após as modificações:

Figura 33: Tabela com formatação final As propriedades alteradas na label foram: FontSize, TextAlign, BackgroundColor, Widht e Text (que recebeu o texto genérico), conforme já foi dito não ficaremos mostrando cada configuração dos elementos que já vimos em aulas anteriores, somente quando houver propriedade que não vimos é que serão mostrados todos os detalhes. Agora que aprendeu a usar as tabelas, faça a mesma coisa para o botão de baixo.



Figura 34: Resultado final O último componente desta aula será o clock , ele é usado para converter hora e data capturados dos picker’s em formatos válidos. Ele está localizado no palette, em sensores.

Figura 35: Clock O clock é um elemento não-visível, portanto ele será mostrado fora da tela de simulação, logo abaixo dela. Nosso trabalho na aba designer acabou por enquanto, vamos aos blocos. Primeiro vamos conhecer os eventos que vamos manipular, no DataPicker e TimePicker são os e AfterTimeSet . Os dois executam mesmos: o AfterDateSet a mesma instrução, no caso do AfterDateSet você programa o que vai acontecer logo após a data ser selecionada, o mesmo serve para o AfterTimeSet.

A label que colocamos ao lado do botão de definir hora e definir data servirá para apresentar os valores selecionados nas caixas de diálogo, para isso basta alterar o texto da label após a data ou o horário ter sido selecionado, porem queremos que esses valores sejam mostrados nos formatos que estamos acostumados. Vamos usar o método FormatDate do componente clock para fazermos isso: APP Inventor Brasil [email protected]


Figura 35: Bloco FormatDate Veja que falta um bloco a ser encaixado ainda. O instant é uma propriedade do DatePicker que nos retorna o valor escolhido na caixa de diálogo. Va no DatePicker e procure o instant para ser colocado no lugar que está sem bloco. Ainda no método de formatar data você deve colocar o formato que deseja fazer a conversão, os valores para esses formatos estão no link https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html. Após configurar o formato e o valor para ser formatado nosso bloco está assim:

Figura 36: Bloco completo Para fazer o mesmo com o timePicker basta procurar pelo bloco

FormatTime e

colocar a propriedade instant do timePicker. Faça o teste, com o AI Companion e verifique se tudo ocorre como o planejado. Vou deixar no material complementar o arquivo .apk do aplicativo desenvolvido ate o momento e um arquivo de texto mostrando as configurações de propriedades dos componentes usados nesta aula.

De acordo com as nossas aulas e com os conteúdos apresentados, recrie esse layout usando os componentes apresentados nessa quarta aula. Esse App deve ser programado para que quando o horário e a data sejam selecionados essas informações apareçam no lugar da mensagem que fica ao lado dos botões.


CURSO APP INVENTOR 2 - BASICO - TOPICO 4.pdf

Recommend Documents