--- title: "Modelos de design para aplicações móveis" date: "2020-07-28" categories: - "app-development" - "mobile-development" - "mobiletogether" - "tools" tags: - "app-design" - "cross-platform-app-development" - "mobile-development-tools" - "mobiletogether" description: A utilização de modelos de design para a criação de aplicações móveis no Altova MobileTogether aumenta a velocidade e a eficiência do desenvolvimento. --- Status: #blog Tags: #app-design #cross-platform-app-development #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/pt/category/mobile-development.md) | [low-code+no-code](/blog/pt/category/low-codeno-code.md) # Modelos de design para aplicações móveis Num artigo anterior, falamos sobre a utilização de [modelos de design de software](/blog/pt/2020/01/software-design-templates-in-mobile-development-projects.md) para aplicações móveis, com o objetivo de facilitar a reutilização de elementos de design e tornar mais fácil a criação de opções eficientes e flexíveis para diferentes requisitos de aplicações. Descrevemos um exemplo de um modelo de controlo concebido para apresentar vários níveis de dados hierárquicos, com base na seleção do utilizador em tempo real. O nosso exemplo foi desenvolvido utilizando o MobileTogether, uma ferramenta de desenvolvimento rápido de aplicações móveis (RMAD) da Altova, para auxiliar os programadores [Desenvolver aplicações multiplataforma](https://www.altova.com/pt/mobiletogether) que proporcionam um desempenho de aplicações dinâmico e sofisticado, proporcionando uma experiência gratificante para os utilizadores finais. Também pode criar modelos de controlo para aplicações móveis multiplataforma, combinando vários elementos de controlo numa unidade maior, como uma subestrutura complexa construída a partir de componentes individuais. Isto cria modelos de design para aplicações móveis que podem ser facilmente integrados em qualquer lugar, acelerando o desenvolvimento e garantindo a consistência. ![](/blog/images/Blog_MT_control_templates_1.jpg) O MobileTogether Designer, a ferramenta da Altova para desenvolvimento móvel multiplataforma que combina ferramentas visuais de layout com funcionalidades de programação, inclui aplicações de exemplo para ilustrar diversas capacidades. A aplicação CompanySales consulta uma base de dados de encomendas para gerar um relatório de vendas em tempo real, destinado a executivos, para uma empresa fictícia. O relatório inclui informações sobre as vendas totais, bem como vendas por produto, região ou por representante de vendas individual, permitindo ao utilizador selecionar as datas do relatório e comparar os resultados com períodos anteriores. Abaixo, apresentamos imagens da página de visão geral que mostra as vendas em tempo real de 15 de fevereiro, e da página "Vendas por Produto", que detalha as vendas por produto para esse dia. [![Várias páginas da aplicação de exemplo MobileTogether, intitulada "CompanySales"](/blog/images/designer-overview.png)](designer-overview.png) Cada página da aplicação inclui funcionalidades de seleção de data, permitindo que os utilizadores naveguem até qualquer data anterior para consultar as vendas históricas. Na janela principal de layout do designer, podemos observar que as funcionalidades de seleção de data são implementadas através da combinação de três botões e um componente de seleção de data [![Controles para seleção de múltiplas datas, combinados para criar um modelo de design para aplicações móveis](/blog/images/super-datepicker-1.png)](super-datepicker-1.png) O componente de seleção de datas exibe a data do relatório e permite ao utilizador selecionar qualquer data no passado. Os botões de seta esquerda e direita permitem navegar um dia para trás ou para a frente, e a ação atribuída ao botão "Hoje" seleciona a data atual. Quando o relatório é configurado para a data atual, os botões "Hoje" e a seta para a direita ficam desativados. ### Modelos de design para aplicações móveis Antes de criar os elementos de controlo apresentados acima, é necessário adicionar um modelo de controlo na janela auxiliar "Páginas". Para adicionar novas páginas e modelos de controlo, clique no botão verde de mais, localizado no canto superior esquerdo [![Adicionar um modelo de controlo à aplicação móvel](/blog/images/pages-helper-window.png)](pages-helper-window.png) Alternativamente, pode criar um modelo de controlo selecionando elementos de controlo existentes em qualquer página e escolhendo uma opção no menu de contexto que aparece ao clicar com o botão direito: [![Converter os elementos de interface existentes num modelo de design para aplicações móveis](/blog/images/template-from-selection.png)](template-from-selection.png) Dentro do seletor de datas aprimorado, as ações realizadas pelos botões "Hoje", pelos botões de seta e pelo próprio controlo do seletor de datas também são definidas no modelo de controlo. As ações para o botão "Hoje" e para o botão de seta esquerdo são apresentadas abaixo: [![Ações disponíveis no botão "Hoje" dentro do modelo de controlo](/blog/images/today-action.png)](today-action.png) [![Ação executada pelo botão de seta esquerda dentro do modelo de controlo](/blog/images/arrow-action.png)](arrow-action.png) Não queremos que o botão "Hoje" esteja ativo quando a data selecionada for a data atual, e também não queremos que o utilizador avance para datas futuras. Podemos definir quando estes botões estão ativados na janela de ajuda "Estilos e Propriedades". Aqui está uma visão parcial das configurações para o botão "Hoje": [![Estilos e propriedades para o botão "Hoje" dentro do modelo de design do seletor de datas avançado ](/blog/images/button-enable.png)](button-enable.png) O botão "Hoje" fica desativado quando a data selecionada no relatório corresponde à data atual. Além disso, definimos cores diferentes para indicar se o botão está ativo (clicável) ou não. As definições de cor são opcionais. Um dos requisitos do aplicativo CompanySales era apresentar as mesmas cores em todos os dispositivos, de forma a simular a uniformidade da identidade corporativa. Se deixar as definições de cor em branco, o MobileTogether utiliza automaticamente cores padrão para cada plataforma: Android, iOS, Windows 10, etc. ### Adicionar um modelo de controlo a uma página O modelo de controlo de seleção de datas aprimorado é utilizado na página do Relatório de Vendas Executivo e em três das quatro subpáginas. Simplesmente arrastámos o controlo de seleção de datas aprimorado da janela de ajuda "Páginas" para cada página onde era necessário. Isto poupa várias etapas, pois o modelo é automaticamente instanciado num Controlo de Espaço Reservado, como se pode ver aqui: [![Modelos de design para aplicações móveis, como os utilizados numa página de apresentação de uma aplicação](/blog/images/placeholder-control-1.png)](placeholder-control-1.png) ### Modificação das ações dos modelos de design para aplicações móveis Temos mais um aspeto a considerar. Quando o utilizador seleciona uma nova data para o relatório, queremos que a aplicação consulte automaticamente a base de dados de vendas para apresentar relatórios e gráficos específicos para cada página. As ações definidas até agora no seletor de datas avançado apenas selecionam uma data. Temos três opções para processar ainda mais qualquer Modelo de Controlo: aplicar apenas as ações definidas no próprio Modelo de Controlo, substituir as ações do Modelo de Controlo por todas as novas ações definidas no espaço reservado, ou combinar as ações do Modelo de Controlo com ações adicionais definidas no espaço reservado. A nossa aplicação "Sales" utiliza a terceira opção. O seletor de datas avançado permite ao utilizador selecionar a data. O elemento "placeholder" em cada página adiciona ações específicas para executar consultas à base de dados e atualizar gráficos, adequadas para essa página. Adicionámos opções de personalização de eventos ao controlo de modelo em cada página, através do menu de contexto que aparece ao clicar com o botão direito [![Modificar as ações dos modelos de design para aplicações móveis](/blog/images/event-overrides.png)](event-overrides.png) Isto abre a caixa de diálogo "Ações". Abaixo, encontra-se o conjunto de ações disponíveis para a página "Vendas por Produto". [![](/blog/images/action-dialog-1.png)](action-dialog-1.png) A primeira ação é um Grupo de Ações especial, denominado "Callback de Evento de Modelo". A inclusão do "Callback de Evento de Modelo" indica que todas as ações definidas no modelo do componente "Enhanced Date Picker" são executadas primeiro, e, em seguida, as ações adicionais definidas no espaço reservado são executadas. O último grupo de ações na imagem acima está expandido para mostrar as ações de "Recarregar" que atualizam o relatório de Vendas por Produto. As duas primeiras ações de "Recarregar" executam consultas à base de dados, e as duas últimas ações de "Recarregar" redesenham os gráficos com base nos resultados das consultas. ### Experimente por si mesmo Pode descarregar o [MobileTogether Designer](https://www.altova.com/pt/mobiletogether/download), que é gratuito, e abrir a aplicação de exemplo "CompanySales" para explorar mais detalhadamente os modelos de design para aplicações móveis nesta ferramenta de demonstração de relatórios de vendas. Ou, [descarregue a aplicação móvel](https://www.altova.com/pt/mobiletogether/download) e execute a aplicação "CompanySales" no seu próprio dispositivo móvel. O suporte para modelos de design em aplicações móveis é apenas uma das muitas funcionalidades do MobileTogether que capacitam os desenvolvedores a criar [aplicações nativas avançadas](https://www.altova.com/pt/mobiletogether/app-development) com uma abordagem de baixo código, que é rápida e fácil.