Aplicando estilo e layout

Com o SAP Build Apps, você não só pode criar rapidamente interfaces de usuário funcionais, mas também criar aplicativos que pareçam atraentes, sejam fáceis de usar e permitam que componentes individuais sejam visualmente adaptados às necessidades do usuário e da empresa. Os temas desempenham um papel importante aqui e são usados para determinar o design e o manuseio de um aplicativo. Muitas propriedades de estilo estão prontamente disponíveis no menu para alterar a aparência do aplicativo.

A vantagem dos temas é que eles trazem diferentes estilos, cores ou fontes com diferentes coleções, por um lado, para garantir que o design sempre pareça consistente. Por outro lado, isso tem a vantagem de que os desenvolvedores podem economizar tempo e se concentrar mais no desenvolvimento graças ao ajuste rápido e configuração com temas.

Para trabalhar no design e modificar a aparência do seu app, você pode usar o editor de temas. Você pode acessar o editor de temas na parte superior do cartão de registro. Lá você pode encontrar diferentes paletas de cores e selecionar uma já disponível ou criar uma que atenda às suas necessidades ou, por exemplo, o design corporativo de sua empresa.

O SAP Build Apps se beneficia de cores inteligentes. Eles podem ser usados para otimizar a experiência do usuário. Após a configuração da cor de conteúdo inteligente, os componentes se ajustam automaticamente à cor de fundo, por exemplo, se forem modificados de um fundo claro para um fundo escuro.

Utilizando a variável de tema, o design também pode ser separado das cores, que depois adaptam todos os elementos do app como a configuração selecionada. Por exemplo, você pode definir a configuração para tamanho do texto, borda, sombra, espaçamento e fonte com as opções indicadas. Você também pode definir facilmente novas variáveis de tema. A grande vantagem é que você também pode tornar todas as variáveis dinâmicas aqui usando a opção de vinculação.

Se você quiser usar os temas padrão, existem dois grupos de temas (tema universal e tema SAP Fiori) atualmente disponíveis, com várias possibilidades de design para adaptar o design dos apps às suas necessidades.

Ao usar componentes, deve ser feita uma distinção entre o mesmo como um elemento de IU com suas características e como ele é suprido em relação ao estilo. O estilo e a aparência de um componente não afetam as funções desse componente. No entanto, é importante orientar a usabilidade desejada do app e o comportamento de utilização.

No exemplo de um componente de botão, ele pode conter uma descrição e ações de acionamento com o toque de um botão, mas o mesmo botão pode diferir em cor, forma e tamanho. O design então se refere separadamente à intenção em uma determinada situação. Isso pode ser, por exemplo, que um botão seja exibido em vermelho ou verde, dependendo do status em um processamento de pedidos. Isso é para mostrar se todas as informações estão disponíveis e se o botão pode ser selecionado. Ou, outra possibilidade é o tamanho, para indicar se é um botão principal importante para continuar uma ação ou um pequeno botão para um ajuste intermediário.

Dependendo do tipo do componente, existem diferentes configurações de estilo que vêm com ele. Mas o foco está nas classes de estilo. Por padrão, já existem sempre totalmente definidos, que você pode selecionar diretamente, como Primário, Secundário, Terciário, Perigo e Sucesso e, por isso, já têm um estilo adequado para muitos casos de utilização.

Uma classe de estilo define valores para todas as propriedades de estilo do componente, portanto, mudar para uma classe de estilo diferente mudará completamente a aparência do componente.

Você também pode processar classes de estilo e criar suas próprias. Isso oferece a vantagem de que você pode ajustá-lo ainda mais precisamente com a possibilidade de definir muitas outras configurações de estilo, se agora você quer que o componente seja arredondado nos cantos, tenha uma sombra ou o tipo de fonte seja ajustado. Há inúmeras possibilidades. Há uma grande vantagem para cada cenário que ainda mais dinâmica pode ser introduzida por meio de uma ligação.

Além dos componentes, uma página em si também pode ser alterada na guia Estilo. Assim, você pode tornar o fundo mais atraente, ajustando a cor de fundo do aplicativo ou definindo o preenchimento. Mas também existem opções avançadas, como desativar a rolagem de uma página.

No entanto, em vez de colorir o plano de fundo, você também pode selecionar uma imagem de plano de fundo para a página que pode escolher, por exemplo, nos ativos ou na ligação. Aqui, o recipiente é então usado, cujo layout em si ainda pode ser alterado em relação às margens, a fim de evitar opcionalmente uma fronteira.

Você pode usar a guia Layout para configurar o layout de componentes e o layout da página ou componente selecionado. O layout da página pode ser alcançado selecionando um espaço em uma área livre. Isso torna possível alterar o alinhamento de todos os componentes nesta página ao mesmo tempo, que são então alinhados à esquerda, centro ou direita.

Outras categorias importantes na guia Layout são a configuração dos componentes em termos de largura e altura, bem como a posição. Você também pode manipular seu conteúdo lá com o índice Z que permite uma melhor experiência do usuário. Z-index é uma propriedade que permite controlar a ordem dos elementos em sua página. Ele funciona atribuindo a cada elemento um valor numérico (o índice z) e, em seguida, usando esse número para determinar qual elemento será exibido na frente ou atrás de outro elemento. Quanto maior o índice z, mais próximo um elemento é exibido ao visualizador.

Quando um componente é selecionado, opções adicionais são exibidas na guia Layout. Essas opções são influenciadas pelo conceito de Espaço entre componentes. Em vez de usar margens, o conceito de lacuna de componentes é introduzido. O gap do componente determina o espaçamento entre os componentes, atuando essencialmente como o "gap" entre eles. Essa abordagem aprimora significativamente o fluxo de trabalho intuitivo para espaçamento de componentes, preservando a capacidade de personalizar todos os aspectos conforme necessário. Além disso, a lacuna de componentes se comporta consistentemente se o layout é vertical ou horizontal. Essa abordagem unificada garante uma experiência perfeita no gerenciamento do espaçamento de componentes.