--- title: "Feedback visual em aplicações móveis" date: "2019-04-04" categories: - "app-development" - "mobile" - "mobile-development" - "mobiletogether" - "tools" tags: - "cross-platform-mobile-development" - "mobile-development" - "mobile-development-tools" - "mobiletogether" - "visual-feedback" description: Explore como implementar feedback visual em aplicações móveis utilizando o MobileTogether, melhorando a interação do utilizador através de respostas dinâmicas dos botões e sinais visuais. --- Status: #blog Tags: #cross-platform-mobile-development #mobile-development #mobile-development-tools #mobiletogether #visual-feedback Categories: [mobile-development](/blog/pt/category/mobile-development.md) # Feedback visual em aplicações móveis O feedback visual em aplicações móveis proporciona uma experiência de utilizador mais agradável, e as aplicações móveis que são divertidas de usar são lançadas com mais frequência do que as aplicações estáticas e pouco interessantes. O MobileTogether, [a plataforma de desenvolvimento rápido de aplicações móveis (RMAD)](https://www.altova.com/pt/mobiletogether) da Altova, integra todas as ferramentas necessárias para desenvolver aplicações móveis compatíveis com diferentes plataformas, com funcionalidades de feedback visual apelativas. A paleta de controlos de arrastar e soltar no MobileTogether Designer inclui um botão que altera automaticamente a sua aparência quando é clicado. Também pode definir condições que adicionam ou modificam texto, imagens ou outras funcionalidades de qualquer botão durante a execução da aplicação. Além disso, muitos outros elementos de controlo também podem ser definidos para funcionarem como botões, onde uma ou mais ações são executadas quando o elemento é clicado. Já escrevemos anteriormente sobre.. [Utilizar imagens de ícones como botões de ferramenta](https://www.altova.com/blog/images-as-tool-buttons-in-mobile-apps/) em aplicações móveis, para criar um menu de ferramentas elegante e sofisticado. Neste artigo, vamos adicionar interatividade às imagens das nossas ferramentas, de forma a fornecer um feedback visual apelativo a cada clique. ![](/blog/images/wai_700x335_2.jpg) A captura de ecrã abaixo mostra uma página da aplicação "Onde Estou", que criámos para demonstrar o uso de imagens como botões. [![Imagens utilizadas como botões numa aplicação móvel.](/blog/images/tool-images.png)](tool-images.png) Cada imagem azul na parte inferior do ecrã é um botão que fornece informações adicionais sobre a localização, seja através da recuperação de dados através de uma API, seja abrindo uma página Web externa. Um clique curto em qualquer botão executa a ação correspondente, enquanto um clique longo abre uma janela de mensagem sobre o botão [![Exemplo de feedback visual em aplicações móveis: toque prolongado numa imagem](/blog/images/image-long-click-515x1030.png)](image-long-click.png) No canto inferior esquerdo da captura de ecrã, o botão de meteorologia está colorido para indicar que foi clicado. Num clique rápido, a imagem é colorida brevemente antes de a ação ser executada. Um simples clique no botão de meteorologia envia uma solicitação à API OpenWeather e abre uma subpágina que exibe os dados meteorológicos em formatos gráficos e textuais: [![Informação meteorológica exibida após clicar na imagem](/blog/images/weather-subpage.jpg)](weather-subpage.jpg) ### **Definir o feedback visual em aplicações móveis** O feedback visual para um clique do utilizador numa imagem é implementado através de uma breve alteração da cor de fundo por detrás do botão da imagem. As imagens na nossa aplicação estão organizadas em tabelas, como se pode ver nesta vista parcial do MobileTogether Designer: [![Layout de imagens em tabelas, como visto no programa MobileTogether Designer](/blog/images/buttton-layout.png)](buttton-layout.png) Cada célula da tabela possui um conjunto de propriedades que podem ser definidas individualmente, incluindo a cor de fundo da célula. Cada imagem também tem uma definição específica das ações que são executadas quando a imagem é clicada. [![Definição da cor de fundo das células de uma tabela para implementar feedback visual em aplicações móveis](/blog/images/table-cell-background.png)](table-cell-background.png) Podemos registar um número de índice no elemento chamado "userButton" quando a imagem da previsão do tempo é clicada. Em seguida, podemos alterar a cor de fundo da célula com base no conteúdo do elemento "userButton", conforme definido na expressão XQuery na propriedade "Cor de Fundo". Aqui está a lista de ações para a ferramenta de previsão meteorológica: [![Ações executadas ao clicar numa imagem para implementar um feedback visual em aplicações móveis](/blog/images/image-click-actions.png)](image-click-actions.png) Primeiramente, o valor do elemento chamado "userButton" é atualizado. Em seguida, são executadas as ações que efetivamente alteram a aparência da imagem. Como estas ações serão necessárias sempre que uma imagem for clicada, elas são armazenadas num grupo de ações específico chamado "Botão Flash". O MobileTogether executa automaticamente a ação "Atualizar Interface" uma vez, no final de qualquer sequência de ações. Para implementar um feedback visual, queremos executar a ação "Atualizar Interface" no início da sequência, a fim de alterar a cor de fundo, fazer uma pequena pausa, redefinir o valor do botão do utilizador e, em seguida, executar novamente a ação "Atualizar Interface" para limpar a cor de fundo. A função `sleep()` do XQuery define a duração da pausa em milissegundos. Após o piscar do botão, a execução continua com o grupo de ações "Obter Previsão do Tempo". Este grupo de ações gera uma consulta para uma API de previsão do tempo, a fim de obter a previsão para os próximos 5 dias, para qualquer latitude e longitude, e, em seguida, abre a subpágina de previsão do tempo mostrada acima. Também queremos obter um feedback visual ao clicar e manter pressionado qualquer imagem. O MobileTogether permite-nos definir ações distintas para um clique prolongado, como se pode ver aqui: [![Ações executadas após um toque prolongado, para fornecer feedback visual em aplicações móveis](/blog/images/long-click-actions.png)](long-click-actions.png) O resultado do toque prolongado é mostrado na segunda captura de ecrã acima, onde a janela de mensagens descreve a função do botão "Obter Informações Meteorológicas". Para o toque prolongado, precisamos apenas de uma ação "Atualizar Ecrã" para alterar a cor de fundo, e não precisamos da função "pausa()" para uma pausa dedicada. Uma ação "Atualizar Ecrã" é executada automaticamente quando o utilizador fecha a janela da mensagem, de forma que o fundo da imagem será restaurado. ### **Feedback visual em aplicações móveis onde as tabelas têm linhas repetidas** Não podemos utilizar a mesma técnica de indexação para identificar os ícones das ferramentas em páginas onde apresentamos listas baseadas em dados recebidos através de consultas à API. Por exemplo, a captura de ecrã abaixo mostra os resultados da pesquisa por hotéis e motéis próximos de uma determinada localização: [![Uma tabela com linhas repetidas numa aplicação móvel](/blog/images/search-results-515x1030.png)](search-results.png) Páginas semelhantes são apresentadas para alertas de trânsito e eventos culturais nas proximidades, e queremos fornecer feedback visual para as imagens das ferramentas em cada entrada, como se pode ver aqui, ao clicar prolongadamente numa imagem de um telefone: [![Toque longo numa imagem numa linha repetida](/blog/images/search-results-click-515x1030.png)](search-results-click.png) Cada conjunto de resultados para estas páginas é definido como uma tabela com linhas repetidas e capacidade de rolagem, onde apresentamos informações obtidas através de consultas à API: [![Uma tabela com linhas repetidas, como as criadas no programa MobileTogether Designer](/blog/images/repeating-rows.png)](repeating-rows.png) O MobileTogether inclui uma função de extensão XQuery chamada mt-rowgroup-index() que oferece uma solução eficaz para identificar as imagens em cada linha. Podemos combinar esta função com um valor para identificar a coluna dentro da tabela, permitindo manipular individualmente qualquer imagem. A imagem do telefone destacada acima tem a seguinte definição de cor de fundo: [![Definição da cor de fundo de uma célula numa linha repetida.](/blog/images/rowgroup-background-definition.png)](rowgroup-background-definition.png) As primeiras ações que são executadas quando o utilizador clica na imagem do telefone para qualquer atualização de resultados são: atualizar o valor do elemento "userButton" e executar o grupo de ações "Button Flash" Adicionámos 300 ao índice do grupo de linhas para indicar a terceira coluna de imagens na linha. A nossa consulta à API de pesquisa solicita um máximo de 50 resultados, pelo que, dependendo do número da linha do resultado selecionado, o valor do elemento "userButton" para esta imagem pode variar entre 301 e 350. O feedback visual é aplicado apenas a esta imagem específica, conforme determinado pela função mt-rowgroup-index() na definição da cor de fundo da célula da tabela. O MobileTogether inclui diversas outras [funções de extensão](https://www.altova.com/pt/mobiletogether/features) que podem ser utilizadas em expressões XPath/XQuery, poupando os desenvolvedores da necessidade de criar funções personalizadas para expandir as bibliotecas padrão do XPath, XQuery e XSLT, para tarefas comuns em aplicações móveis. ### Saiba mais e experimente por si próprio Se estiver pronto para começar a adicionar feedback visual em aplicações móveis, basta descarregar o [MobileTogether Designer](https://www.altova.com/pt/mobiletogether/download), que é gratuito. E não se esqueça de consultar a página [MobileTogether Demos](https://www.altova.com/pt/mobiletogether/demos), que contém links para vídeos, tutoriais e mais aplicações de demonstração. Pode analisar a aplicação descrita neste artigo descarregando uma cópia no [repositório](https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I) do GitHub.