entrada-POST

Nesta nova entrada, vamos aprender como criar interfaces de utilizador, ou UI, que se ajustem aos diferentes tamanhos do ecrã. Além disso, veremos também como utilizar os dados que podemos obter dos diferentes elementos da UI.

Elementos típicos de uma UI

Para criar uma UI, existem certos elementos que nos ajudam a construir uma interface completa e funcional, como por exemplo botões ou caixas de introdução de texto. Para desenhar a interface de utilizador, temos que escrever o código correspondente a cada elemento, modificando os seus parâmetros para adequá-lo às nossas necessidades. O código de alguns dos elementos de maior interesse para gerar interfaces é:

Botão:

botón checkbox: (o Modo pode ser true ou false, e determina se se inicia seleccionada ou não)

checkbox texto: Imprime um texto no ecrã:

Slider: Cria uma barra onde podemos deslizar um marcador e que nos dará o valor entre o mínimo e o máximo que marcarmos:

Input: Cria uma caixa de texto onde se pode escrever:

editText No caso da checkbox, podemos utilizar toggle, que cria um botão que pode mudar de estado, ou switch, que gera um botão “deslizante”, mas não tem a possibilidade de adicionar texto junto ao botão, e por isso seria necessário criar um elemento de texto para indicar qual a função desse switch. A funcionalidade básica dos três elementos é a mesma, mas dependendo das características da aplicação ou dos nossos gostos, utilizaremos um ou outro. Para ver como se escrevem as restantes funções, é possível utilizar a referência rápida e procurar dentro de UI (o que pode elevar a erros se não for actualizado) ou dentro dos exemplos. Uma boa práctica para criar interfaces é manter fixa a altura dos elementos, podendo assim saber onde colocar o elemento seguinte. Como exemplo: se um elemento tem uma altura h = 150, podemos colocar o elemento seguinte a uma distância ligeiramente maior no final, ou seja, o valor da altura mais a margem (150 + m). Nos elementos seguintes, incluiríamos incrementos até colocá-los na posição desejada. Por exemplo, duas vezes a altura mais a margem 2*150 + m.

Criar UIs que se adaptam aos diferentes tamanhos de ecrã

Como podemos aceder aos dados do terminal que se está a utilizar para executar o código, podemos utilizá-lo para gerar interfaces que se adaptam a diferentes tipos de ecrã. Para gerar este código, utilizamos as funções ui.screenWidth e ui.screenHeight, que devolvem a largura e a altura do ecrã, respectivamente. O código que se pode utilizar para gerar este tipo de programas, é:

Em primeiro lugar, estabelecemos uma margem que utilizaremos para separar os elementos da UI da borda vertical, e estabelecer uma margem entre os diferentes elementos, para evitar que se sobreponham. Dependendo do número de elementos que se incluam na interface e do tamanho destes elementos, é possível que o texto que mostrem, seja visualizado incorrectamente, e por isso é preferível fixar a altura (h no código anterior) dos elementos e evitar utilizar alturas adaptativas (no código anterior, fazemos com que a largura dos elementos seja adaptativa a diferentes tamanhos de ecrã). Se fizermos com que a posição no “eixo do X” dos elementos seja margin (tal como fixámos w = ui.screenWidth – 2 * margin) então os elementos terminarão no “final” do ecrã com a mesma margem em ambos os lados, dando a sensação de ser uma interface com um desenho mais cuidado. Cotas

Variáveis no Protocoder

As variáveis no Protocoder diferenciam-se da linguagem Arduino, na qual não temos que determinar o tipo de dado que a variável irá armazenar. No Arduino quando queremos guardar um número inteiro, utilizamos por exemplo:

E no Protocoder:

Isto ajuda-nos a evitar problemas de incompatibilidades entre os dados que introduzimos e os dados que a variável espera receber, evitando assim erros.

Funções no Protocoder

Para gerar uma função, no Protocoder utilizamos um código similar a este:

Por exemplo, uma função que mostre um toast, ou seja, uma mensagem flutuante no ecrã do próprio Android, seria assim…

… onde showToast é o nome da função e string é o parâmetro que tem que passar para a função. Por exemplo, para utilizar esta função, poderíamos utilizar esta linha de código:

Criar a UI e programar uma aplicação

bq_Aquaris_E4Neste caso, vamos criar uma aplicação que simule um ecrã de acesso de um utilizador a um serviço, em que lhe é pedido um username (nome de utilizador) e uma password (palavra-passe), depois de ele ter pressionado um botão. Vamos também incluir uma checkbox que altera a transparência de uma imagem (para aprender como se usa) e um botão com uma imagem, que leva a um pop-up (uma mensagem no ecrã, com informação para o utilizador). Em primeiro lugar, alteramos a cor do fundo e incluímos o código partilhado anteriormente nesta lição, o que nos facilitará na criação da nossa aplicação:

Antes de começar a incluir elementos, vale a pena parar um minuto e pensar, ou inclusivamente, desenhar um esquema, com os elementos que vamos incluir e em onde vamos colocá-los. Neste caso, incluiremos duas entradas de texto e um botão para interagir com “o username e a password”, uma checkbox e uma imagem e um botão que mostrará o pop-up.

Gestor de password (palavra-passe)

Em primeiro lugar, criamos as variáveis onde vão ser armazenados os dados que o utilizador irá introduzir no ecrã, assim como o username e a password correctos:

A seguir geramos os códigos das duas entradas de texto:

No elemento pass, utilizámos a posição y do elemento como h + margin, pois o elemento anterior possui um tamanho igual a h, e portanto queremos que fique separado deste. Para os seguintes elementos, utilizaremos 2*h + margin, 3*h +margin, etc. Em ambos os elementos, utilizamos a variável val para armazenar na variável correspondente, userName ou password, que se introduz com o teclado. Para finalizar este gestor de palavra-passe, temos que incluir finalmente, um botão que confirme se o username e a password inseridos, estão correctos:

Checkbox e alteração da transparência nos elementos

checkbox é um elemento que permite marcar (check) ou desmarcar (uncheck). Normalmente utiliza-se para alterar uma condição, como por exemplo, acender ou apagar uma luz, marcar ou desmarcar uma opção. Neste programa Protocoder, utilizaremos a checkbox para alterar a transparância, alpha, de uma imagem, mas isso pode ser realizado com praticamente qualquer elemento, view. Em primeiro lugar, criamos a checkbox e atribuímos o nome alpha:

checkbox é normalmente acompanhada pela opção que vamos modificar, que é representada como um texto entre aspas no principio dos parâmetros. O valor val (devolvido pela função) será true ou false, dependendo de a “setinha” estar seleccionada ou não, respectivamente. Para mudar a transparência de um elemento, ou view, utilizamos a sintaxe:

Para cambiar a transparência de algum elemento, temos que modificar nomeView pelo nome da variável que atribuímos ao elemento visual, e alteramos número por um número entre 0 e 255, que corresponde a transparente e opaco, respectivamente.

Botão com imagem e popup

Por último, vamos incluir um botão com uma imagem (incluída nos downloads), que pode ser utilizado para mostrar informação através de uma caixa de diálogo. Em primeiro lugar, temos que inserir a imagem na caixa de uploads, na parte inferior direita, copiá-la para a pasta do projecto, que por sua vez está dentro da pasta Protocoder (no Android) ou conectar-nos através do FTP ao nosso terminal (pode activar-se o FTP nas opções do Protocoder). Uma vez que a imagem esteja no sítio certo, temos que escrever este código para incluir o botão com a imagem:

Os parâmetros são, respectivamente: posição X, posição Y, tamanho X, tamanho Y, nome da imagem. A programação é igual para qualquer botão: ao pressionarmos sobre ele, vai executar-se o código que se escreve dentro da sua definição. Para usar o pop-up, uma janela que “salta” e se coloca à frente da interface, utilizamos o seguinte código:

No nosso caso, utilizamos este código:

Como é possível saber qual a opção que foi “pressionada”, podemos trabalhar com a resposta, que será true ou false, se for pressionada a Resposta_sim ou a Resposta_nao.