--- title: "Modelos de design de software em projetos de desenvolvimento móvel" date: "2020-01-21" categories: - "app-development" - "mobile" - "tools" tags: - "app-design" - "app-development" - "mobile-development" - "mobiletogether" description: Explore como os modelos de design de software no MobileTogether otimizam o desenvolvimento de aplicações móveis, promovendo a reutilização de designs e simplificando as atualizações, especialmente para elementos de interface de utilizador dinâmicos. --- Status: #blog Tags: #app-design #app-development #mobile-development #mobiletogether Categories: [mobile-development](/blog/pt/category/mobile-development.md) | [low-code+no-code](/blog/pt/category/low-codeno-code.md) # Modelos de design de software em projetos de desenvolvimento móvel Modelos de design de software [otimizar o desenvolvimento de aplicações móveis](https://www.altova.com/pt/mobiletogether) Ao eliminar a implementação de componentes repetitivos, é possível criar um modelo de design que também simplifica as revisões e atualizações, uma vez que uma alteração no modelo pode ser aplicada a todo o projeto. O MobileTogether oferece modelos de design de software para elementos de interface de utilizador em aplicações móveis multiplataforma, facilitando a reutilização de designs e tornando mais fácil a criação de opções eficientes e flexíveis para diversas necessidades de aplicações. Numa aplicação MobileTogether, um modelo de controlo é um componente de design que permite aos programadores definir e agrupar elementos de interface de utilizador de forma a que estes possam ser facilmente reutilizados. Os modelos de controlo suportam parâmetros, e cada modelo pode ser personalizado com base nos valores dos parâmetros em tempo de execução. Vamos analisar um exemplo. ![](/blog/images/MT_control_templates.jpg) O programa MobileTogether Designer inclui vários projetos de exemplo que demonstram os modelos de controlo. Descreveremos a aplicação Cities4-DynamicSelection. A captura de ecrã abaixo mostra uma visão parcial da aplicação a funcionar num telemóvel Android: [![Exemplo de modelos de design de software numa aplicação num telemóvel Android](/blog/images/screenshot-landscape-2-1030x286.png)](screenshot-landscape-2.png) Esta aplicação demonstra um desafio comum ao apresentar dados hierárquicos. Em última análise, o objetivo da aplicação é que o utilizador selecione uma cidade. Para ser mais eficiente, a lista completa de cidades está organizada por continentes, apresentada numa caixa de seleção (combo box), depois filtrada por países no continente selecionado, mostrados num conjunto de botões de opção (radio buttons), e, finalmente, as cidades dentro do país são apresentadas num segundo conjunto de botões de opção. Em orientação horizontal, os botões de rádio são apresentados numa lista horizontal (como mostrado acima), e em orientação vertical, são apresentados verticalmente [![Os modelos de design de software podem ajustar automaticamente a orientação de acordo com o dispositivo móvel](/blog/images/screenshot-portrait-2.png)](screenshot-portrait-2.png) Seria uma aplicação complexa de criar se fosse necessário construir manualmente os botões de opção para cada combinação de seleções do utilizador. Além disso, os nomes dos países e cidades estão contidos num ficheiro XML, e queremos poder atualizar a aplicação simplesmente editando este ficheiro. [![Dados hierárquicos num ficheiro XML para utilização em modelos de design de software ](/blog/images/cities-list.png)](cities-list.png) Ao abrir a aplicação no ambiente de desenvolvimento MobileTogether, podemos visualizar a estrutura da página na janela de design principal. [![Espaços reservados para modelos de design de software na janela de design da aplicação MobileTogether](/blog/images/page-design-1.png)](page-design-1.png) No topo da página, encontra-se o primeiro controlo: a caixa de seleção de continente. Em seguida, encontram-se duas tabelas que contêm controlos de espaço reservado (placeholders). Em tempo de execução, a primeira tabela e o espaço reservado gerarão a lista de países, enquanto a segunda tabela gerará a lista de cidades. O designer MobileTogether inclui uma janela de ajuda que mostra uma estrutura hierárquica de todas as páginas, subpáginas e modelos de controlo em qualquer aplicação. Neste exemplo, cada modelo aceita dois parâmetros que serão passados pelo espaço reservado durante a execução. [![A janela de ajuda do Pages, que mostra os componentes da aplicação no MobileTogether](/blog/images/pages-window-1.png)](pages-window-1.png) Selecionar um dos modelos de controlo exibe os seus componentes no painel de design principal. [![Visão geral de um modelo de controlo no MobileTogether](/blog/images/template-design-view.png)](template-design-view.png) Para a versão vertical, o modelo utiliza uma tabela com linhas dinâmicas, e para a versão horizontal, utiliza uma tabela com colunas dinâmicas. Em ambos os casos, a tabela gerada pelo modelo será inserida dentro de uma única célula da tabela principal definida na página inicial. Isto centraliza verticalmente a caixa de seleção de ordenação em qualquer coluna de botões de opção, independentemente do número de linhas. Um espaço reservado define a posição de um modelo de controlo numa página. A janela de assistência "Estilos e Propriedades" para o espaço reservado identifica qual o modelo de controlo a utilizar e fornece os valores dos parâmetros. O espaço reservado para a lista de países define ambas as propriedades como expressões XQuery: [![Propriedades de um espaço reservado para modelos de design de software](/blog/images/control-template-properties.png)](control-template-properties.png) Mesmo numa visualização parcial da expressão, podemos verificar que o modelo de controlo específico a ser aplicado na página será determinado pela orientação do dispositivo em tempo de execução. Podemos usar o simulador MobileTogether para analisar os modelos de design de software durante a execução e observar os elementos de preenchimento e os modelos de controlo em ação. Nas seguintes capturas de ecrã, estamos a usar um iPhone em orientação horizontal como dispositivo de visualização. Como esta aplicação não possui funcionalidades específicas de um determinado dispositivo ou sistema operativo, o dispositivo de visualização exato é irrelevante. As opções de continente, país e cidade são definidas pelo utilizador, sem valores predefinidos na aplicação. Assim, no início da execução, apenas vemos o cabeçalho da página e uma caixa de seleção vazia para escolher o continente: [![Uma visão da aplicação no simulador MobileTogether](/blog/images/simulation-1.png)](simulation-1.png) A janela "Mensagens" lista as ações processadas à medida que selecionamos um continente, sendo estas ações destacadas em verde abaixo [![Interagir com a aplicação no simulador](/blog/images/simulation-1.5.png)](simulation-1.5.png) [![A janela de mensagens indica que um continente foi selecionado na caixa de seleção](/blog/images/sim-message-1.png)](sim-message-1.png) A janela de simulação agora mostra a lista de países adequada para a Europa, mas não apresenta nomes de cidades [![Países do continente selecionado, gerados em tempo real por modelos de design de software](/blog/images/simulation-2.png)](simulation-2.png) Neste momento, a aplicação está à espera de que o utilizador selecione um país. Em vez de prosseguir, podemos abrir o Editor XQuery dentro do Simulador e avaliar os parâmetros passados pelo primeiro espaço reservado para o Modelo de Controlo. Basta copiar a expressão dos Parâmetros do Modelo a partir da janela "Estilos e Propriedades" e colá-la na janela do XQuery. A expressão resulta num array que contém a lista de países da Europa e o estado de ordenação: [![O avaliador XQuery permite-nos visualizar os parâmetros exatos que são enviados para o modelo de controlo ](/blog/images/sim-evaluate-1.png)](sim-evaluate-1.png) Mas por que é que a aplicação não mostra nenhuma lista de cidades na página simulada? Podemos analisar a expressão de parâmetros que é enviada pelo segundo espaço reservado para as cidades: [![Parâmetros passados para o segundo modelo de controlo ](/blog/images/sim-evaluate-2.png)](sim-evaluate-2.png) A expressão recebeu uma lista vazia de nomes de cidades. Como os botões de rádio referentes às cidades estão contidos numa tabela com colunas dinâmicas, nenhuma coluna foi exibida! O controlo de caixa de seleção para escolher a ordenação não está numa coluna dinâmica, mas também não é exibido. A propriedade de visibilidade da caixa de seleção é definida como "$PERSISTENT/Root/@Country != ''", o que significa que a caixa de seleção e o texto associado não serão visíveis até que o utilizador selecione uma cidade. Em resumo, o exemplo Cities4-DynamicSelection demonstra como vários componentes podem ser combinados em modelos de design de software personalizados e integrados numa aplicação móvel, para criar uma solução elegante que apresenta o resultado correto com base nas escolhas do utilizador em tempo real ou em outras condições externas. A aplicação de demonstração e o ficheiro de dados de origem estão incluídos no MobileTogether Designer, para que possa seguir os passos descritos acima ou até mesmo explorar por si próprio. O MobileTogether Designer é uma ferramenta gratuita que permite.. [Crie rapidamente aplicações móveis compatíveis com diferentes plataformas a partir de um único design.](https://www.altova.com/pt/mobiletogether/app-development#designer) Observar [demonstrações em vídeo](https://www.altova.com/pt/mobiletogether/demos) para ver os tipos de aplicações que os utilizadores do MobileTogether criam todos os dias e.. [descarregue o instalador](https://www.altova.com/pt/mobiletogether/download) Para começar a usar modelos de design de software para si!