LiveCode: Programação simples para desktop e mobile/LiveCode em plataformas móveis/Toques gerais

Programar para os telefones celulares e tablets com sistemas iOS e Android nunca foi exatamente fácil, e as respectivas plataformas oficiais de programação -- XCode (Objective C) e Eclipse (Java) -- também muito pouco fazem para facilitar a vida dos iniciantes. Felizmente, depois de algumas disputas e discussões com a própria Apple, a RunRev foi autorizada a tornar o LiveCode capaz de gerar código para os iPhones e iPads, e algum tempo depois também passou a dar suporte ao Android. Ficou muito mais fácil criar aplicativos para os aparelhos móveis, mas isso não significa que ficou exatamente fácil.

A linguagem de programação é a mesma da programação para desktop, os paradigmas essenciais de stacks e cards se mantêm, mas o desenvolvimento para plataformas mobile tem lá suas peculiaridades. A começar, ainda é necessário usar um computador de mesa ou um notebook, e não o próprio dispositivo, como muitos ainda sonham que venha a acontecer um dia. E para desenvolver aplicativos para iOS está mantida a imposição da Apple de que o tal computador seja um Macintosh com OS X. Testar os programas durante o desenvolvimento deixa de ser uma tarefa simples e rápida como alternar entre a ferramenta Run e a ferramenta Edit, mesmo com o uso de emuladores. Há uma série de funcionalidades exclusivas para plataformas móveis, e outras tantas dos programas para desktop que não são ainda suportadas em nenhuma delas. O LiveCode é um sistema de desenvolvimento multiplataforma, de fato, e tecnicamente é possível gerar aplicativos para Linux, Mac, Windows, Android e iOS em uma tacada só, mas raramente isso será suficiente ou adequado.

Não obstante, preparar o LiveCode para gerar e testar aplicações mobile é demorado e trabalhoso. Antes de tratarmos destes meandros, é melhor discutirmos nesta página o que há de diferenças, limitações e recursos, para que você possa avaliar se já vale a pena passar por este trabalho ou se é melhor esperar uma nova versão do LiveCode que, quem sabe, tornará o processo mais simples.

Nesta página estão descritas em linhas gerais as funcionalidades e recursos disponíveis tanto para iOS quanto para Android, em seus denominadores comuns, mas é importante saber que alguns destes recursos diferem significativamente em uma plataforma ou outra (com os recursos para iOS geralmente um pouco mais avançados). Depois de passar por esta página, veja também as páginas específicas sobre cada sistema.

O que não funciona em plataformas móveis

editar

Touchscreen

editar

Para o principal dispositivo de entrada de dados das plataformas móveis, o LiveCode gera quatro mensagens: touchStart, touchEnd, touchRelease e touchMove. Todas elas são acompanhadas de um número que identifica o toque do começo ao fim, individualmente (ou seja, cada dedo na tela gera um toque diferente). É esse chamado "touchID" que permite a detecção de dois ou mais toques simultâneos na tela.

Os eventos touchStart e touchEnd são equivalentes, respectivamente, às mensagens mouseDown e mouseUp: acontecem quando um toque começa e termina. Para facilitar a portabilidade de programas entre desktop e mobile, inclusive, o LiveCode faz com que os manipuladores on mouseDown e on mouseUp funcionem em dispositivos móveis como se fossem escritos como on touchStart e on touchEnd, o que é suficiente para várias aplicações.

Já as duas mensagens seguintes são menos óbvias. O evento touchRelease é gerado, por exemplo, quando um toque é interrompido por uma chamada recebida pelo celular. O evento touchMove é gerado logo que um toque é iniciado e a cada pequeno movimento ocorrido em um toque. A mensagem é enviada com o número identificador do toque, a nova posição horizontal e a nova posição vertical em que ele se encontra.

Algumas das funcionalidades originalmente criadas para mouse funcionam de forma equivalente em touchscreens, mas há algumas diferenças significativas. Para detectar a posição em que um toque se inicia, é possível usar a função the mouseLoc como em aplicações desktop, mas até o LiveCode 6.6 (março de 2014) a função retornava valores errados quando havia mais de um toque ativo na tela. Como mouseLoc não pode receber o identificador de cada toque como argumento, e como a mensagem touchStart não recebe a posição inicial do toque, uma forma mais confiável de obter a posição inicial do toque certo é manipular a primeira ocorrência da mensagem touchMove e guardar em uma variável do script ou global as posições horizontal e vertical que acompanham a mensagem.

Toques sequenciais

editar

Alguns usuários relatam sucesso em usar a mensagem mouseDoubleUp para manipular a ocorrência de dois toques rapidamente sucessivos e aproximadamente na mesma posição em touchscreens.

Uma maneira alternativa de detectar toques sucessivos, e que permite até a geração de eventos para mais de dois toques, é:

  • criar um manipulador on touchStart que registre o tempo no início do toque, usando por exemplo a função the milliseconds, e compare esse tempo com o valor de uma variável global ou do script que contenha o registro do tempo em que o último toque ocorrido terminou, e também compará-lo a um valor predefinido de tempo máximo de intervalo entre um toque e outro;
  • no manipulador on touchEnd, registrar na tal variável global ou do script o tempo no fim do toque;
  • em um manipulador on touchMove, salvar em outra variável externa (possivelmente uma variável array com dados para cada toque) a posição inicial do toque. Esse valor pode ser usado pelo manipulador on touchStart para comparar a posição do toque que se inicia com a posição em que o último toque se encerrou, e assim determinar se os toques devem ser considerados sequenciais.

Toque longo

editar

Toques longos são muito usados em dispositivos móveis: no Android em suas versões 4.0 em diante, por exemplo, são normalmente utilizados para iniciar um processo de seleção de múltiplos itens de uma lista. A maneira fácil de detectar toques longos no LiveCode é subtrair o tempo registrado no início do toque, com um manipulador on touchStart, do tempo registrado no fim do toque pelo manipulador on touchEnd, e comparar o resultado dessa subtração com um valor predefinido de duração mínima de um toque para que ele seja considerado longo.

Arrastar (swipe)

editar

Os movimentos de tipo swipe se assemelham ao movimento de virar páginas de um livro, e são usados principalmente para passar da visão detalhada de um item para outro em um aplicativo. Manipuladores para as mensagens touchEnd e touchMove podem identificar e reagir a um movimento destes ao considerar que a variação entre a posição inicial e a posição final de um toque, na horizontal ou na vertical, é maior do que um mínimo preestabelecido.

Toques e gestos "multifingers"

editar

Visual e controles (widgets)

editar

Até a versão 6.5.2, não havia como o LiveCode gerar por conta própria aplicativos para iOS ou Android com os mesmos padrões visuais dos aplicativos nativos destas plataformas. Alguns programadores conseguiram desenvolver extensões do LiveCode que permitem a geração de controles e interfaces de aparência bastante próxima, mas estas extensões não faziam parte do LiveCode e nem eram de graça: a mais conhecida delas, o MobGui, custava US$ 50.

No Android, até a versão 6.5.2 os controles de interface eram exibidos com o toolkit Motif, criado para sistemas desktop de arquitetura Unix na década de 1990, e muito diferente do visual nativo.

Diferenças nos controles entre desktop e mobile

editar

Controles exclusivos para plataformas móveis

editar

O LiveCode permite a criação, remoção e configuração, via código, de alguns dos chamados "controles nativos" do iOS e do Android. Para isso, há a família mobileControl de comandos e funções.

mobilePick

editar

Especialmente em smartphones, com suas telas menores que os tablets, são comuns menus que ocupam toda a tela e modais (ou seja, exigem uma resposta e bloqueiam outras ações do usuário no aplicativo).

Seletores de data e horário

editar

Indicador de atividade ("aguarde")

editar

Controles

editar

Em dispositivos móveis, com suas telas touchscreen, é de se esperar que alguns controles comuns em aplicações de computadores não sejam usados ou funcionem de maneira diferente. No LiveCode também é assim e alguns controles simplesmente ainda não ganharam equivalentes para aplicativos mobile, apesar de a RunRev ter já manifestado que está trabalhando nisso.

Botões pushbutton e rectangular - Funcionam e podem ser configurados com borda, sem borda, opacos ou transparentes...

Controles exclusivos para plataformas móveis

editar

mobilePick

editar

Especialmente em smartphones, com suas telas menores que os tablets, são comuns menus que ocupam toda a tela e modais (ou seja, exigem uma resposta e bloqueiam outras ações do usuário no aplicativo).

Importação de gráficos para simular controles

editar

Pode ser um recurso parcialmente o look and feel de uma aplicação nativa, mas não espere resolver todos os seus problemas com isso. O recurso Import as Control (disponível no menu File) permite que sejam utilizados gráficos gerados em programas de desenho como Inkscape ou programas especializados em prototipagem de interfaces, como o Evolus Pencil.

Uma abordagem possível é gerar uma tela inteira como um gráfico, importá-lo a um card e colocar sobre as áreas apropriadas controles do LiveCode configurados para ficarem transparentes.

Redimensionamento e orientação de tela

editar

Redimensionamento automático

editar

A versão 6.5.1 do LiveCode trouxe um recurso muito útil para o desenvolvimento de aplicações de visual mais simples ou sem grandes pretensões: o redimensionamento automático das telas, de acordo com o tamanho do dispositivo em que a aplicação é utilizada e com alguns parâmetros. Uma nova propriedade de stack foi criada para isso e seu uso é bastante simples -- basta editar o script do stack, especificamente no trecho que define a reação ao evento preOpenStack, que ocorre logo quando o stack é executado:

on preOpenStack

set the fullscreenmode of this stack to "exactFit"

end preOpenStack

A propriedade fullscreenmode ("modo tela cheia") pode receber alguns valores para definir o modo de redimensionamento da tela:

  • exactFit - faz com que as telas do stack sejam esticadas ou encolhidas na medida exata para que todo o card seja exibido. Se o tamanho original do card é mais largo ou mais alto que a tela do dispositivo, esta opção fará com que os cards apareçam distorcidos,esticados.
  • letterbox - os cards são esticados ou encolhidos, sempre mantendo-se a proporção original, até que suas duas dimensões (largura ou altura) se encaixem na tela do dispositivo. Se alguma delas ficar menor que o espaço disponível, este será preenchido com áreas vazias em seus dois lados opostos.
  • noBorder - os cards são esticados ou encolhidos até que uma de suas dimensões seja completamente exibida na tela, e a outra será "cortada" se a proporção de largura e altura dos cards e da tela do dispositivo não forem iguais.
  • noScale - Os cards não são redimensionados, e são apenas colocados de maneira centralizada na tela. É uma opção útil quando se tem um stack de dimensões pequenas: os cards maiores que a tela do dispositivo serão cortados em suas bordas.

Orientação

editar

Por padrão, uma aplicação móvel criada com LiveCode vai funcionar em apenas uma orientação.

Quando o dispositivo é girado, e o sistema está configurado para reagir a esta mudança de orientação, o LiveCode gera a mensagem orientationChanged, que pode ser manipulada para que sejam recalculadas e alteradas as posições e dimensões dos controles na tela, ou para que seja exibido um outro card da aplicação, especialmente desenhado para a nova orientação. Além disso, é possível obter a qualquer instante o posicionamento do aparelho com a função mobileDeviceOrientation e a orientação atual da tela a qualquer momento com a função mobileOrientation. Antes disso tudo, porém, é preciso que, já quando a aplicação é iniciada, sejam definidas as orientações que serão suportadas pelo aplicativo -- o que é feito com o comando mobileSetAllowedOrientations em um manipulador on preOpenStack.

Os comandos e as funções que lidam com orientações usam como parâmetros, argumentos e valores de retorno um conjunto de valores predefinidos pelo LiveCode:

  • portrait - É a disposição vertical padrão, na qual o botão home do aparelho está colocado para baixo.
  • portrait upside down - Disposição vertical na qual o aparelho está "de cabeça para baixo" e seu botão Home está colocado para cima.
  • landscape left - Disposição horizontal, com o botão Home à esquerda.
  • landscape right - Disposição horizontal com o botão Home à direita.

A função mobileDeviceOrientation ainda pode retornar, além destes, os seguintes valores:

  • face up - o aparelho está deitado com a tela para cima.
  • face down - o aparelho está deitado com a tela para baixo.
  • unknown - não foi possível identificar em que posição está o aparelho.

O simples uso de mobileSetAllowedOrientations já fará com que, ao se girar o aparelho, todos os cards e seus controles também sejam girados para a nova orientação. No entanto, suas dimensões não são automaticamente alteradas, e alguns controles podem ficar invisíveis, "cortados" da tela. O redimensionamento automático obtido com a propriedade fullscreenmode funciona como esperado, mas os resultados podem ser distorcidos ou insatisfatórios caso, por exemplo, se queira apresentar versões diferentes de uma mesma tela em um smartphone e em um tablet.

Telas e resoluções

editar

Uma das maiores dificuldades da programação para dispositivos móveis é a imensa variedade de telas, com diferentes tamanhos e características.

A função mobilePixelDensity serve para detectar a resolução da tela do dispositivo, e retorna valores diferentes no iOS e no Android: no primeiro, retorna o valor 2 se o dispositivo é equipado com uma tela de alta resolução Retina (2048x1536 pixels), e 1 para telas normais. No Android, é retornado o valor de "densidade métrica" que é usado no dispositivo para converter dimensões em pixels "reais" em dimensões em resolution-independent pixels, conhecidos no Android pela unidade "dp":

  • 0.75 para dispositivos ldpi (resolução baixa, em torno de 120 pontos por polegada)
  • 1 para dispositivos mdpi (resolução média, padrão, aprox. 160 pontos por polegada)
  • 1.5 para dispositivos hdpi (resolução alta, em torno de 240 pontos por polegada)
  • 2 para dispositivos xhdpi (resolução extra alta, em torno de 320 pontos por polegada)

Os programas gerados pelo LiveCode para o Android tomam como padrão a resolução mdpi, em que as medidas reais em pixels são iguais às dimensões em "dp", e durante a execução é automaticamente feito o escalonamento das imagens.

Este escalonamento é o comportamento padrão do Android e do iOS para fazer com que, por exemplo, com que dois tablets com tela de 7 polegadas, mas resoluções muito diferentes, apresentem gráficos e controles mais ou menos do mesmo tamanho. Sem o escalonamento, a tela com resolução maior exibiria as imagens e controles menores, mas também seria possível ao programador aproveitar ao máximo a resolução maior de um ou outro dispositivo.

A propriedade de stack systemPixelScale, que pode apenas ser lida, usa os mesmos valores para informar qual é a resolução padrão do sistema operacional em que o aplicativo está rodando. Para alterar a resolução padrão do aplicativo, configura-se a propriedade de stack pixelScale, que quando o programa é iniciado recebe o valor armazenado em systemPixelScale.

Colocadas as observações sobre resolução de tela, fica mais fácil entender que, nas plataformas móveis, a propriedade screenRect e algumas funções tem seus valores definidos como pixels "lógicos"

Coisas de mobile

editar

Teclado virtual

editar

Quando se clica em um campo que permite entrada de dados pelo usuário, como um field, e não há um teclado físico ligado ao aparelho, é exibido um teclado virtual. Nas aplicações em LiveCode, o surgimento do teclado gera uma mensagem, keyboardActivated, e quando ele é retirado da tela -- seja por ter sido concluída a edição, ou por ter-se clicado em outro ponto da tela -- é gerada a mensagem keyboardDeactivated. A manipulação destas mensagens é utilizada principalmente para que os widgets da tela sejam reposicionados de forma a não ficarem encobertos pelo teclado virtual.

Câmera

editar

Vibração

editar

Agenda de contatos

editar

Envio de mensagens por SMS

editar

Sensores de movimentos

editar

Notificações

editar

Inatividade e bloqueio de tela

editar

Arquivos

editar

Galeria (seletor de arquivos de mídia)

editar

Diálogos de seleção de arquivos e diretórios

editar

Onde e como salvar arquivos

editar

Internet

editar

E-mail

editar

Sistema

editar

Idiomas

editar