OutSystems - CSS / Th

 Olá, Malta!!!!

Vamos falar de CSS????????

O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a aparência visual de uma página web. No contexto do OutSystems, uma plataforma de desenvolvimento de aplicativos web, o CSS desempenha um papel fundamental na criação de interfaces de usuário atraentes e funcionais.

O OutSystems permite a criação de aplicativos web usando o conceito de "arrastar e soltar", o que significa que os desenvolvedores podem criar interfaces de usuário simplesmente arrastando e soltando componentes na tela. No entanto, para personalizar a aparência desses componentes, é necessário usar o CSS.

O CSS permite que os desenvolvedores personalizem a aparência de diferentes elementos de uma página, como fontes, cores, tamanhos e posicionamento. Isso é importante porque uma interface de usuário bem projetada é essencial para uma experiência do usuário positiva.

Além disso, o OutSystems permite a criação de temas personalizados que podem ser aplicados em todo o aplicativo. Isso significa que os desenvolvedores podem criar uma aparência consistente em todas as páginas e componentes do aplicativo, tornando-o mais fácil de usar e mais atraente visualmente.

Em resumo, o CSS desempenha um papel fundamental no desenvolvimento de aplicativos web no OutSystems, permitindo que os desenvolvedores personalizem a aparência de diferentes elementos da interface do usuário e criem temas personalizados para garantir uma aparência consistente em todo o aplicativo.

Um exemplo de onde usar o CSS é no módulo Themes.

O modo tema em OutSystems é importante porque permite a criação de uma aparência visual consistente em todo o aplicativo. Com o uso de temas, os desenvolvedores podem criar um conjunto de estilos CSS que se aplicam a todo o aplicativo, garantindo que a aparência e o comportamento dos elementos da interface do usuário sejam consistentes em todas as páginas.

Além disso, os temas podem ser facilmente alterados e atualizados, permitindo que as mudanças de estilo sejam aplicadas em todo o aplicativo de uma só vez. Isso economiza tempo e esforço em comparação com a necessidade de atualizar individualmente cada página ou componente do aplicativo.

Outra vantagem do modo tema é que ele permite que os desenvolvedores criem temas personalizados para diferentes clientes ou marcas. Isso significa que, com apenas algumas alterações no tema, é possível criar uma aparência visual única para cada cliente, sem precisar modificar a estrutura ou a lógica do aplicativo.

Por fim, o modo tema em OutSystems também oferece recursos avançados, como a criação de temas responsivos que se adaptam automaticamente a diferentes dispositivos e tamanhos de tela, garantindo uma experiência do usuário consistente e de alta qualidade em qualquer dispositivo.

Em resumo, o modo tema em OutSystems é importante porque permite a criação de uma aparência visual consistente em todo o aplicativo, facilita a atualização e personalização do estilo visual e oferece recursos avançados, como a criação de temas responsivos.

Uma dica rápida:

Um tema contém os detalhes para apresentação visual e a alteração de um tema altera a aparência do seu aplicativo. Um módulo tem um tema padrão e todos os fluxos e telas da interface do usuário o herdam.

Você pode:

Defina o tema do módulo padrão , se você tiver vários temas em seu módulo.

Crie um tema em branco sem nenhum estilo , para que os elementos usem apenas o CSS que você criar.

Crie um novo tema com base no tema padrão , se desejar adicionar estilos ao tema existente.

Os Temas OutSystems padrão fazem parte da estrutura OutSystems UI. A OutSystems otimizou os temas internos para desempenho e para funcionar bem com andaimes e modelos de tela.

Definindo o tema padrão do módulo

Se você tiver mais de um tema em seu módulo, poderá alterar o tema padrão do módulo. Siga estas etapas no Service Studio:

Vá para a guia Interface e selecione o nome do módulo na parte superior do painel. As propriedades do módulo são exibidas.

Nas propriedades do módulo, localize a seção Padrões .

Na lista Tema padrão , selecione seu tema.

A estrutura de um OutSystems UI Theme.

Os Temas no framework OutSystems UI seguem uma estrutura baseada nos requisitos de Tela de um aplicativo OutSystems. Cada tema inclui vários blocos e cada bloco consiste em um ou mais espaços reservados.

O diagrama a seguir mostra como um novo tema herda o layout do tema base e como a plataforma usa os blocos e espaços reservados para gerar uma página. O layout principal possui Placeholders cujo conteúdo são Blocos (o placeholder do Header é substituído pelo conteúdo gerado no bloco Header). O CSS também é herdado do Tema base, mas pode ser substituído pelo CSS do aplicativo.