Sobre temas de estilo no Jitterbit App Builder

Temas possuem uma função de Pré-visualização, onde é possível obter uma representação visual rápida de como diferentes telas e Painéis no App Builder aparecerão com o Tema selecionado aplicado. Este guia descreve a implementação atual dos Temas.

Visão Geral

O App Builder permite a personalização de como um aplicativo aparece visualmente na Camada de Aplicação por meio do uso de Temas de Estilo. No App Builder, os Temas são definições de pares de Componentes e Tipos de Valor que permitem controlar a aparência de áreas definidas da interface e experiência do usuário da Camada de Aplicação. Um Componente aqui representa uma área na interface da Camada de Aplicação que pode ter suas propriedades alteradas, por exemplo, Página é um Componente. Tipos de Valor representam as propriedades específicas que podem ser alteradas ou definidas, por exemplo, Cor de fundo é um Tipo de Valor.

Por exemplo: Defina a Cor de fundo [Tipo de valor] dos Links [Interface] para ser roxa.

Vários Temas Base pré-definidos são fornecidos com o App Builder, que podem ser facilmente utilizados pelo seu aplicativo como estão, ou aproveitados como um Tema Base que você pode personalizar ainda mais. Além disso, as seguintes opções estão disponíveis através dos Temas:

• Tipos de configuração de Tema estão disponíveis para configurar Alinhamento, Espaçamento e Transições CSS
• As seguintes novas áreas de Páginas do App Builder estão expostas para serem personalizadas via Temas:
  • Áreas de Gráficos, Mapas e Calendários
  • Margem de Tile em Painéis/Filas, centralização de Tile em um Painel
  • Grupos de Campos de Painel de várias linhas, cabeçalhos e células (permitindo linhas MRP maiores)
  • Validações (Erros, avisos, prompts e exceções apresentadas ao usuário)
  • Botão de voltar
  • Botão de carregar mais linhas
• Capacidade de Ocultar a Barra de Ferramentas se todos os controles intrínsecos estiverem ocultos, incluindo desativar contagem
• O botão de fechar ('x') agora faz parte do Painel e pode ser estilizado de forma semelhante
• Suporte à visibilidade do painel que oculta o Painel, mas reserva o espaço (valor de "3")
• Agora é possível ocultar Cabeçalhos de Painel ou ajustar seu tamanho via Formatos
• Fontes em nível de site podem ser carregadas remotamente

Estado sem tema

Sem nenhuma informação de Tema definida e aplicada, o App Builder no nível da Camada de Aplicação aparece em um estado sem tema, com estilização mínima. Com o uso de Temas, um designer pode rapidamente melhorar a aparência geral de um aplicativo.

Interfaces

Criar um Tema completamente novo e atribuí-lo a uma aplicação não resultará em nenhuma mudança visível, uma vez que o novo Tema não possui Implementações. As cores escolhidas em um nível de Tema não se aplicam automaticamente a nenhuma parte da Interface do Usuário da Camada de Aplicação. Para ver cores personalizadas através da Camada de Aplicação, é necessário configurar as Configurações de Componentes. A Fig 2 tem a Cor de Fundo do Componente - Barra de Título definida como roxa para a Área de Links.

Os componentes são partes da IU que podem receber implementações de estilo.

Tipos de valor

Com um Componente especificado, você pode selecionar um Tipo de Valor para aplicar uma propriedade. Tipos de Valor podem se referir a cores de fonte, cores de fundo, imagens, alinhamento, informações de gradiente, informações de tamanho, etc., dependendo da área específica de Imóvel que você selecionou para personalizar. Na página do tema, cada Tipo de Valor possui informações de Ajuda correspondentes que contêm dicas e instruções úteis sobre quais informações específicas fornecer.

Referenciando cores por sintaxe reservada

Ao especificar cores na área de Temas do App Builder (cor da borda, cor de fundo, etc.), você pode referenciar o nome de uma das três cores definidas no nível do Tema. Isso permite uma personalização mais rápida ao usar o recurso Copiar.

Os termos de sintaxe reservados que você pode especificar são:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

Ajustando cores

Ao usar nomes reservados, as cores também podem ser ajustadas para brilho ou escuridão e opacidade.

As cores podem ser ajustadas para brilho ou escuridão e opacidade. Essa personalização está disponível para os seguintes termos reservados:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

Para ajustar o brilho e a escuridão da cor, adicione um caractere pipe junto com um valor decimal numérico (valor positivo para aumentar ou valor negativo para escurecer a cor). Os valores esperados são -.9 - .9.

Sintaxe: {PrimaryColor|.25} ou {PrimaryColor|-.25}

Para ajustar a opacidade da cor, adicione o caractere til junto com um valor decimal numérico. Os valores esperados são .1 - .9.

Sintaxe: {PrimaryColor~.25}

Botão de copiar

Qualquer tema pode ser copiado. Use esse recurso se você quiser começar rapidamente com um tema e apenas definir as três cores para Primária, Secundária e Complementar. Existem muitos temas predefinidos disponíveis que podem ser selecionados e usados como estão ou personalizados ainda mais para começar rapidamente.

Temas predefinidos do App Builder

O App Builder vem com vários temas predefinidos. Embora tecnicamente sejam editáveis, ao atualizar, quaisquer alterações serão perdidas.

Sugestões

Se você especificar uma cor de fundo escura, certifique-se de usar uma cor de fonte que seja legível para todo o texto. Aproveite a propriedade text-shadow incluída na cor da fonte para adicionar contraste extra.

Apêndice

Componentes

Tipos de valor