Programação 1

3. Exemplo de aplicação

Como exemplo de aplicação, desenvolvi um cronômetro. O

CronôDroid.

O app tem um uso bem simples, sendo que ao clicar em

Iniciar o cronômetro começa a contar.

IFES, SERRA-ES.
 Programação 1

Ao clicar em volta, é criada uma lista de voltas, que são

usadas para marcar voltas ou algum tempo específico desejado.

Ao clicar em parar o contador para, e o botão torna-se em “Zerar”.

Ao clicar em zerar o contador é zerado e todas as voltas são
apagadas.

IFES, SERRA-ES.
 Programação 1

Link para teste: https://goo.gl/kTNaiw

IFES, SERRA-ES.
 Programação 1

4. Criando um App semelhante

O primeiro passo para criar um App semelhante ao CronôDroid é

cirar um novo projeto.

Com um novo projeto criado, o

primeiro elemento a ser adicionado é
o HorizontalArrangement, que é um
elemento de layout utilizado para
organizar outros elementos de forma
horizontal, que são posicionados
dentro dele.

Apenas clique e arraste-o pela tela. Ele é representado por um

painel em branco na tela.

IFES, SERRA-ES.
 Programação 1

Na aba de componentes vamos renomea-lo para

painelBotoes. Na aba de propriedades vamos alterar a
prorpriedade AlignHorizontal para “center” e a propriedade Width
para 100%.

Agora vamos arrastar dois botões para dentro do

painelBotoes. Em cada botão a propriedade Width deve ser setada
para 50%, resultando no seguinte:

Agora vamos adicionar um novo elemento de layout chamado

VerticalArrangement, que serve para organizar elementos dentro
dele de forma vertical. Vamos renomear esse painel para
painelCronometro e setar suas propriedades AlignHorizontal para
“center”, AlignVertical para “Top” e Width para 100%.

IFES, SERRA-ES.
 Programação 1

Agora, dentro do painelCronograma vamos inserir um label,

que é um elemento de texto, que servira de contador. Vamos
renomear o label para txtClock. Esse label deve ter as seguintes
propriedades setadas:
· FontBold: Checado
· FontSize: 45
· Text: “00:00:00”
· TextAlign: Center

Logo abaixo do painelCronometro vamos inserir um botão, com a

propriedade Width em 100%.
Após esse novo botão vamos inserir um novo elemento cahamdo
ListView, que é um elemento para fazer a exibição de listas, no
qual, usaremos para contar as voltas do cronômetro.
O resultado é o seguinte:

IFES, SERRA-ES.
 Programação 1

Por fim vamos alterar o label de cada botão, na propriedade

Text, como na imagem seguinte. O tamanho e estilo da fonte
encontram-se todas na aba de propriedades, como mostrado
anteriormente.

Por fim temos que adicionar um novo elemento chamado

Clock que se encontra na aba Sensors da palheta. Basta arrastar
para tela que ele será adicionado. Esse elemento não é visível. Ele
será utilizado para fazer a contagem usando o timer. O relógio tem
uma propriedade chamada TimerInterval que deve ser setada em
100.

Após isso, verifique se os nomes de cada elemento

corresponde ao meu exemplo, assim podemos prosseguir para a
parte lógica.

IFES, SERRA-ES.
 Programação 1

· Parte Lógica

Dando inicio na parte logica da aplicação, a primeira coisa que fiz

foi declarar as váriaveis globais, como seguinte:

Sendo:
· min, seg e mili relativos ao tempo, e seriam usados para
contar e atualizar a label do cronograma.
· volta utilizada para contar a quantidade de voltas
· tempo que seria o texto equivalente a concatenação do tempo
das variaveis min, seg e mili.

IFES, SERRA-ES.
 Programação 1

· timeToShow, é o conjunto de todos os tempos a serem

mostrados na lista, separados por virgula, que faz a quebra de
linha na tela.

Em seguida, o primeiro evento que usei foi o de inicialização de

tela, para que o Timer esteja parado e o botão volta desativado
enquanto o cronômetro não está a correr.

O próximo passo foi implementar o clique do botão de

iniciar(btnStart), que usa o bloco seguinte:

A sequencia de eventos é a seguinte:

· Seta a propriedade Text do botão btnCleanReset para

“PARAR”, para ficar mais claro ao usuário onde clicar para
que o cronômetro pare.
· Alterar a propriedade TimerEnabled do relógio para True,
assim o timer começa a correr, acionando os eventos que
veremos a seguir.
· Seta o botão btnVolta como ativado, para que o usuário possa
clicar e marcar voltas, adicionando-as na lista.

IFES, SERRA-ES.
 Programação 1

Quando setamos a propriedade do relogio TimerEnabled como

true, um evento é iniciado, e é nele que fazemos a contagem do
tempo, como demonstrado no bloco a seguir.

Onde GetTimeRunning é uma procedure(função), onde é feita

a contagem e OrganizeTime é a função que organiza o label do
cronômetro a ser exibido na tela.

Na função GetTimeRunning está toda a lógica de contagem.

Onde mili sempre é incrementada em +1, e caso seja maior que 9,
ela volta a 0 e incrementa 1 a seg e assim sucessivamente,
efetuando toda a contagem.

IFES, SERRA-ES.
 Programação 1

A função OrganizeTime simplesmente faz uma concatenação

de texto do tempo. Verificando se o numero tem apenas um
algarismo para colocar o zero na frente, para ficar visualmente
melhor. Ex: “01:10:01”

Como último passo do evento Timer, o valor da variável tempo

é setado na label txtClock para que seja exibido na tela o valor
atual.

IFES, SERRA-ES.
 Programação 1

Para o evento do botão btnVolta foi utilizado os seguintes

blocos.

Esse evento é responsável por concatenar um novo tempo a string

timeToShow. Sendo que os tempos tem de ficar separados por
vírgula para ter uma quebra de linha, visualmente na lista.

IFES, SERRA-ES.
 Programação 1

Para o evento do botão btnCleanReset, foram utilizados os

seguintes blocos.

Aqui foi utilizado uma lógica simples na qual, a primeira vez

que o botão é apertado, o botão de volta é desativado, o label do
botão é alterado para “ZERAR” e o Timer é parado.
Caso haja um segundo clique seguido no botão, caso o Timer
esteja parado, a condição do If é verdadeira todas as variaveis
globais são zeradas para o estado inicial.

IFES, SERRA-ES.
Programação 1

IFES, SERRA-ES.
 Programação 1

Como resultado final temos o conjunto de blocos na pagina anterior, e o

aplicativo com o seguinte visual.

As questões de cores, tamanhos, posições e entre outras questões

visuais vão de cada pessoa. Todas elas podem ser alteradas nas
propriedades de cada elemento, podendo varias de pessoa para pessoa sem
problemas. O importante para que o aplicativo funcione corretamente está na
parte lógica.

IFES, SERRA-ES.