--- title: "Design de interface de aplicações flexível, com folhas de estilo de vários níveis" date: "2016-12-06" categories: - "applications" - "development" - "mobile" tags: - "app-design" - "app-development" - "app-ui" - "app-ux" - "mobiletogether" description: Descubra como as folhas de estilo multiníveis no MobileTogether melhoram o design da interface de aplicações, permitindo uma personalização dinâmica em diferentes plataformas, mantendo ao mesmo tempo uma aparência nativa. --- Status: #blog Tags: #app-design #app-development #app-ui #app-ux #mobiletogether Categories: [low-code+no-code](/blog/pt/category/low-codeno-code.md) | [mobile-development](/blog/pt/category/mobile-development.md) # Design de interface de aplicações flexível, com folhas de estilo de vários níveis Utilizar uma estrutura de desenvolvimento móvel multiplataforma, como o MobileTogether, é uma excelente opção para [criar aplicações nativas](https://www.altova.com/pt/mobiletogether.html), porque o ambiente de desenvolvimento garante que a interface da aplicação seja exibida corretamente, utilizando a aparência nativa de cada sistema operativo. Basta criar um único design. Isto permite aos desenvolvedores de aplicações criarem aplicações sofisticadas e orientadas a dados para todos os utilizadores de forma muito rápida. Para facilitar este processo, a MobileTogether utiliza uma abordagem RMAD, juntamente com opções flexíveis para o design de uma experiência de utilizador (UX) apelativa. Para ajudar especificamente neste último aspeto, são utilizadas folhas de estilo de vários níveis que permitem personalizar e aplicar estilos – de forma estática ou dinâmica – em vários níveis do design da interface da aplicação, com apenas alguns cliques. ![Visualizar uma aplicação móvel](/blog/images/shutterstock_2341179701.jpg) ## Crie uma interface de utilizador (UI) apelativa Introduzido pela primeira vez em.. [MobileTogether versão 3.0](https://www.altova.com/pt/mobiletogether/new-features.asp), As folhas de estilo de vários níveis permitem que os desenvolvedores de aplicações definam estilos globais que podem ser aplicados a diferentes níveis: projeto, página, tabela e controlo. Isto proporciona um repositório centralizado de estilos que podem ser utilizados em vários níveis ao longo do projeto de desenvolvimento da aplicação. Por que personalizar os estilos? Em primeiro lugar, devo salientar que esta opção é facultativa. O MobileTogether aplica automaticamente os estilos padrão, a aparência dos botões e outros elementos, para cada sistema operativo (iOS, Android, Windows, etc.), permitindo criar uma interface de utilizador (UI) limpa e funcional, sem necessidade de alterações. No entanto, por vezes, é necessário personalizar os estilos para cumprir as diretrizes de estilo corporativas, implementar funcionalidades específicas ou dar um toque de criatividade. As novas folhas de estilo de vários níveis do MobileTogether foram concebidas para tornar este processo mais fácil e rápido. Para começar, abra a caixa de diálogo "Folhas de Estilo" no menu "Projeto". Isso permite criar dois tipos de folhas de estilo: "Projeto" e "Criadas pelo Utilizador". A folha de estilos do projeto é onde você define as personalizações de nível superior. Os estilos que definir aqui serão aplicados automaticamente em todo o projeto. Isto é ideal se pretende fazer alterações generalizadas na aparência de todos os botões, definir o tamanho da fonte para todos os elementos de texto ou controlar as cores de fundo em todo o projeto.   ![Folha de estilos para todo o projeto](/blog/images/app-project-stylesheet.png)   O segundo tipo são as folhas de estilo criadas pelo utilizador, que são nomeadas pelo programador e podem ser aplicadas conforme necessário a páginas, tabelas e elementos de controlo individuais. Em outras palavras, estes estilos não são aplicados a todo o projeto. Na captura de ecrã abaixo, existe uma folha de estilo criada pelo utilizador, que chamei "MyStyles", que define alguns estilos para botões, gráficos e etiquetas. Ao definir estilos no painel direito da caixa de diálogo "Folhas de Estilo", pode selecionar ou introduzir um valor de propriedade estático, ou pode introduzir uma [expressão XPath](https://www.altova.com/pt/xpath-intro.html) que resulta num valor de propriedade. Um exemplo de atribuição dinâmica seria definir um valor de propriedade com base em algum critério, como a largura do ecrã do dispositivo móvel do utilizador final, ou com base nas preferências do utilizador, como permitir que o utilizador ajuste o tamanho da fonte numa página de configurações da sua aplicação, e aplicar esse tamanho da fonte a todos os elementos de texto. Na folha de estilos MyStyles abaixo, utilizei XPath para definir dinamicamente a altura e a largura dos gráficos, de forma a que se adaptem precisamente ao dispositivo utilizado pelo utilizador.   ![Folha de estilos da aplicação criada pelo utilizador](/blog/images/app-stylesheet.png)   Pode definir quantas folhas de estilo criadas pelo utilizador desejar, para fornecer opções de formatação para diferentes elementos. Durante o desenvolvimento da aplicação, aplicar uma folha de estilos criada pelo utilizador a um componente de design é tão simples como selecionar o nome da folha de estilos na janela "Estilos e Propriedades".   ![Selecionar folha de estilos para dispositivos móveis](/blog/images/select-mobile-stylesheet.png) Pode também especificar a seleção da folha de estilos de forma dinâmica, utilizando XPath, por exemplo, para tornar a escolha da folha de estilos dependente do tipo do dispositivo móvel atual. Uma grande vantagem de usar uma expressão XPath para selecionar uma folha de estilos criada pelo utilizador é que a seleção pode ser condicionada a critérios ambientais dinâmicos. Por exemplo, se pretende especificar uma folha de estilos para dispositivos iOS e outra para todos os outros dispositivos, pode usar a seguinte expressão XPath: se ($MT_iOS=verdadeiro()) então 'iOSStyleSheet' caso contrário 'GeneralStyleSheet'. Quando define uma folha de estilos criada pelo utilizador para qualquer página ou elemento, esta substitui os valores correspondentes na folha de estilos do projeto, permitindo que faça ajustes tanto gerais como específicos.   As folhas de estilo de vários níveis permitem poupar uma enorme quantidade de tempo, oferecendo uma flexibilidade incomparável para personalizar a aparência das aplicações em todas as plataformas. Por exemplo, como mencionei na introdução, se precisar que todos os botões das suas aplicações tenham a mesma aparência no iOS, Android e Windows (ou seja, em vez de usar a aparência nativa dos botões), agora pode definir isso uma única vez por projeto (ou em qualquer outro nível, conforme necessário). **Experimente esta funcionalidade criando uma aplicação no MobileTogether Designer, que está disponível gratuitamente. Pode encontrar mais informações e fazer o download aqui: [https://www.altova.com/download/mobiletogether.html](https://www.altova.com/pt/download/mobiletogether.html).**