Exemplo 2 – Sem Hardware
O segundo exemplo de aplicação consiste, em entender como executar uma ação com base em variáveis, fazendo uma alteração de uma variável com base no click de um botão.
A aplicação consiste em três botões, botão "Somar 1", botão "Subtrair 1" e botão "Multiplicar por 2", e numa label, na qual, será mostrada uma variável, que inicialmente vai estar com o valor "0". Quando se pressionar o botão "Somar 1", a Label vai mostrar a operação matemática executada, por exemplo, se a Label mostra o valor "0" e carregarmos uma vez no botão "Somar 1", ela vai passar a ter o valor "1", e assim sucessivamente com o resto dos botões.
Desenho do Layout (Designer)
Primeiro de tudo, devemos selecionar o "Screen1" na tabela de componentes para definirmos quais as suas propriedades.
Inicialmente, remover, nas propriedades do Screen 1 a opção "Scrollable" pois esta vai permitir colocar o alinhamento do ecrã centrado segundo a vertical. Seguidamente colocar as opções:
-- AlignHorizontal: Center (Centra os componentes segundo a horizontal)
-- AlignVertical: Center (Centra os componentes segundo a vertical)
-- BackgroundColor: Light Gray (Cor de fundo)
-- ScreenOrientation: Sensor (Como se comporta o ecrã, neste caso se rodar-mos o dispositivo móvel, o ecrã roda, acompanhando o movimento.
-- Title: Início
NOTA: As opções não referidas, devem ficar como estão por defeito, mas sendo que muitas são de personalização, fica ao critério de cada um.
Adicionar um "VerticalArrangement" ao screen, bastando ir à tab "Layout" da Palette, e arrastando para o screen o "VerticalArrangement".
Relativamente à propriedades deste:
-- AlignHorizontal: Center
-- AlignVertical: Center
-- Width: Fill Parent
-- Height: Fill Parent
Seguidamente devem ser adicionados uma Label, um HorizontalArrengement e um botões, os quais podem ser encontrados na Palette. Estes deve ser colocados dentro do VerticalArrengement, aparecendo as dependências nos componentes como pode ser observado na imagem à direita, tendo em conta que a ordem, começando em cima é Label -> HorizontalArrengement -> Botão.
NOTA: Quando um componente esta abaixo de outro com um pequeno avanço, quer dizer que está introduzido dentro deste, e que depende dele.
Seguidamente são colocados dois botões dentro do HorizontalArrangement, e são definidas as propriedades dos 5 componentes.
Label1:
-- Ativar a opção "FontBold"
-- FontSize: 20.0
-- Text: 0
-- TextAlignment: Center
-- Width: Fill Parent...
-- Height: Fill Parent...
HorizontalArrangement1:
-- AlignHorizontal: Center
-- AlignVertical: Center
Button1:
-- BackgroundColor: Yellow
-- Ativar a opção "FontBold"
-- FontSize: 20.0
-- Text: Multiplicar por 2
-- TextAlignment: Center
-- TextColor: Black
-- Width: Fill Parent...
-- Height: Fill Parent...
Button2:
-- BackgroundColor: Red
-- Ativar a opção "FontBold"
-- FontSize: 20.0
-- Text: Somar 1
-- TextAlignment: Center
-- TextColor: Black
-- Width: Fill Parent...
-- Height: Fill Parent...
Button3:
-- BackgroundColor: Blue
-- Ativar a opção "FontBold"
-- FontSize: 20.0
-- Text: Subtrair 1
-- TextAlignment: Center
-- TextColor: Black
-- Width: Fill Parent...
-- Height: Fill Parent...
Construção de Blocos (Blocks)
Primeiro deve criar-se uma variável, ou seja, um local onde vamos guardar o valor que será mostrado no ecrã (Label).
Para tal deve ir-se a Blocks->built-in->Variables, que se encontra no lado esquerdo, e adicionar o bloco "initialize global NAME to", e ligado a esse bloco, vamos colocar o bloco "0" que pode ser encontrado em Blocks->built-in->Math.
No bloco "initialize global NAME to", onde está escrito NAME vamos dar um nome à variável, por exemplo "numero" e o bloco "0" deixa-se ficar a 0 pois queremos que quando o programa inicia apareça na label 0.
Finalmente é necessário criar os eventos que fazem com que os cálculos sejam feitos, neste caso:
-- Somar 1 ao valor guardado na variável;
-- Subtrair 1 ao valor guardado na variável;
-- Multiplicar por 2 o valor da variável.
Começando pela soma, que é representada pelo botão 2, inserir os seguintes blocos, como apresentado na figura à direita:
-- Blocks->Screen1->VerticalArrangement1->HorizontalArrangement1->Button2 BLOCO: "when Button2.Click do"
-- Blocks->built-in->Variables BLOCO: "set ... to"
-- Blocks->built-in->Math BLOCO: " ... + ... "
-- Blocks->built-in->Variables BLOCO: "get ..."
-- Blocks->built-in->Math BLOCO: "0" ( colocar 1, em vez de zero)
-- Blocks->Screen1->VerticalArrangement1->Label BLOCO: "Set Label1.Text to"
-- Blocks->built-in->Variables BLOCO: "get ..."
Para o botão 3 (subtração) em vez do bloco " ... + ... ", usar o " ... - ... " e no botão 1 (multiplicação) usar " ... x ... ".
A lógica da união dos blocos pode ser vista na figura à direita.
Exemplo soma: Quando o botão da soma é pressionado, ao valor apresentado no ecrã é somado 1 e depois o resultado dessa soma é apresentado no ecrã.
