Sobre temas de estilo no Jitterbit App Builder
Os temas possuem um botão Visualizar, onde você consegue uma representação visual rápida de como diferentes telas e painéis no App Builder ficarão com o tema selecionado aplicado. Este guia descreve a implementação atual de temas.
Nota
Copie um tema se desejar manter suas alterações durante uma atualização. Se estiver usando um tema para fins de página ou painel, deixe o tema base em branco. Defini-lo como o tema do app carregará o CSS do tema do app duas vezes.
Visão geral
O App Builder permite a personalização de como um app aparece visualmente na camada de UI através do uso de temas de estilo. No App Builder, temas são pares definidos de componentes e tipos de valor que permitem controlar a aparência de áreas definidas da UI. Um componente aqui representa uma área na UI que pode ter suas propriedades alteradas (por exemplo, páginas são componentes). 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, você pode definir a cor de fundo (um tipo de valor) da área Links como roxo.
Vários temas base predefinidos são fornecidos com o App Builder que podem ser facilmente usados por 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 de temas:
- Os 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 bloco em quadros/raias, centralização de bloco em um painel.
- Grupos de campos de painel multi-linha, cabeçalhos e células (permitindo linhas de painel multi-linha maiores).
- Validações (erros, avisos, prompts e exceções apresentados ao usuário).
- Botão voltar.
- Botão carregar mais linhas.
-
Capacidade de ocultar a barra de ferramentas se todos os controles intrínsecos estiverem ocultos, incluindo desabilitar contagem.
- O botão Fechar agora faz parte do painel e pode ser estilizado de forma similar.
- Suporte a visibilidade de 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 de 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 UI aparece em um estado sem tema com estilização mínima. Com o uso de temas, um designer pode melhorar rapidamente a aparência geral de um app.
Interfaces
Criar um tema completamente novo e atribuí-lo a um aplicativo não resultará em nenhuma alteração visível, já 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 UI. Para ver cores personalizadas através da Camada de UI, você precisa configurar os painéis Componentes e Subcomponentes. A Fig 2 mostra o componente Página - Barra de Título com sua Cor de Fundo definida como roxo para a área Links.
Componentes são partes da UI 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 de qual área específica de real estate você selecionou para personalizar. Na página de tema, cada tipo de valor possui informações de texto de ajuda correspondentes que contêm dicas úteis e instruções 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 reservada que você pode especificar são:
{PrimaryColor}{SecondaryColor}{ComplementaryColor}
Ajustando cores
Ao usar nomes reservados, as cores também podem ser ajustadas para claridade ou escuridão e opacidade.
As cores podem ser ajustadas para claridade ou escuridão e opacidade. Essa personalização está disponível para os seguintes termos reservados:
{PrimaryColor}{SecondaryColor}{ComplementaryColor}
Para ajustar a claridade e escuridão da cor, adicione um caractere de barra vertical 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}
Recurso Copiar
Qualquer tema pode ser copiado. Use esse recurso se quiser começar rapidamente com um tema e apenas definir as três cores para Primária, Secundária e Complementar. Há 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 esses sejam tecnicamente editáveis, quando você fizer a atualização, todas as alterações serão perdidas.
Desde o App Builder 4.67, os temas predefinidos Light, Dark, Shapes, Violet, Gradient, Light - Modern e Login Base Theme incluem um tema móvel pré-construído, já definido como o tema móvel desse tema, para que seja aplicado automaticamente em telas pequenas. Esses temas móveis são otimizados para uso móvel pronto para uso, com os seguintes ajustes:
- Alvos de toque amigáveis, com tamanho mínimo de 44x44 pixels.
- Tipografia e alturas de linha dimensionadas para dispositivos móveis.
- Preenchimento e margens compactos.
- Empilhamento de campos de formulário em coluna única.
Esse comportamento automático se aplica apenas a aplicativos que usam um desses temas do sistema diretamente. Um tema personalizado baseado em um tema do sistema não herda seu tema móvel predefinido. Se você usar um tema do sistema diretamente e quiser desativar seu tema móvel predefinido, crie um tema personalizado baseado no tema do sistema e use-o; o tema móvel predefinido não é transferido. Se você já usa um tema personalizado baseado em um tema do sistema e deseja adotar seu tema móvel predefinido, consulte Usar um tema móvel predefinido com um tema base personalizado.
Consulte Como criar um tema móvel para criar um tema móvel personalizado.
Sugestões
Se você especificar uma cor de fundo escura, certifique-se de usar uma cor de fonte legível para todo o texto. Aproveite a propriedade text-shadow incluída na cor da fonte para adicionar contraste extra.
Apêndice
Componentes
| Área de Propriedade | Nome da Interface | Descrição |
|---|---|---|
| Página | Container - Página | O container para as páginas |
| Container - Site | O corpo geral do site, janelas modais, outros pop-ups | |
| Aba - Ativa | Abas ativas em uma página | |
| Aba - Inativa | Abas inativas em uma página | |
| Container de Abas | O container para as abas que aparecem em viewports reduzidos | |
| Página - Barra de Título | Links | Links na barra de página superior |
| Menus suspensos - Container | Os itens do menu suspenso | |
| Menus suspensos - Itens do Menu | O menu suspenso, aberto com itens de menu | |
| Barra de Título - Botão Voltar | O botão voltar que navega para a página anterior | |
| Barra de Título - Container | A barra superior contendo o nome da página, navegação e o botão Mais | |
| Barra de Título - Título da Página | O elemento contido na barra superior apenas para o título da página | |
| Barra de Título - Divisores | Pequenos divisores entre elementos | |
| Página - Gaveta de Ações | Itens da gaveta | Botões da gaveta de ações |
| Menu do Site | O link Início que vai para a página Início do site | |
| Status do Serviço - Offline | O ícone de triângulo usado para indicar que o serviço não está em execução | |
| Status do Serviço - Online | O ícone de triângulo usado para indicar que o serviço está em execução | |
| Status do Serviço - Desconhecido | O ícone de triângulo usado para indicar que o serviço está em estado desconhecido | |
| Pop-up da Página | Botão Fechar | O botão X que fecha os painéis modais |
| Container | Container de página sobreposto | |
| Container - Container de Painel | Painéis que aparecem como sobreposição | |
| Painel | Indicador de Atividade | Círculo animado indicando atividade de rede do painel |
| Painel - Container | Painel contendo o cabeçalho e o conteúdo do painel | |
| Painel - Conteúdo | Container de conteúdo do painel | |
| Painel - Desabilitado | Painéis desabilitados porque têm vinculações incompletas | |
| Painel - Container de Painel | O container externo de cada painel | |
| Painel - Barra de Título | A área acima de um painel, contém o nome do painel | |
| Painel - Barra de Ferramentas | Barra de Ferramentas | Barra de ferramentas contendo botões e controles no nível do painel |
| Painel - Painel de Linha Única | Grupo de Campos - Container | Container de fieldset contendo controles de formulário |
| Grupo de campos - Rótulo | A parte legenda do container fieldset | |
| Grupo de campos - Conteúdo do Painel | O container de conteúdo com um painel de linha única | |
| Campo - Rótulo | O título representando o campo em um formulário | |
| Campo - Valor | O valor do estado de exibição do campo em um formulário | |
| Painel - Quadro e Faixa | Ícone de Link para Página | O ícone que vincula a uma página |
| Bloco - Container | O elemento bloco contido de um tipo de painel em blocos | |
| Bloco - Preenchedor | Um elemento preenchedor usado para garantir que quadros encapsulados se alinhem à esquerda. Oculte isso para centralizar, junto com justify-content: center |
|
| Bloco - Título da Faixa | O cabeçalho acima de faixas ou grupos de blocos | |
| Bloco - Selecionado | O elemento bloco contido de um tipo de painel em blocos, quando ativo | |
| Bloco - Container de Painel de Bloco | Um container extra envolvendo todos os blocos | |
| Painel - Múltiplas Linhas | Campo - Agrupado Em | Valores de célula que são tracejados ao usar agrupar por |
| Cabeçalho - Container | Linha de cabeçalho de coluna em uma grade de dados | |
| Cabeçalho - Grupo de Campos | Colunas agrupadas em uma grade de dados | |
| Cabeçalho - Rótulo do Grupo de Campos | O rótulo acima de cada grupo de campos | |
| Cabeçalho - Rótulo | Cada célula de cabeçalho de coluna em uma grade de dados | |
| Linha - Adicionar | A linha de adição que aparece ao inserir em um painel de múltiplas linhas | |
| Linha - Células | Células em um painel de múltiplas linhas | |
| Linha - Par | Cada linha par em uma grade de dados | |
| Linha - Botão Carregar mais linhas | O botão que aparece quando você pode carregar mais linhas | |
| Linha - Ímpar | Cada linha ímpar em uma grade de dados | |
| Linha - Selecionada | A linha na grade de dados que está selecionada no momento | |
| Linha - Total | A linha total de uma grade de dados | |
| Painel - Gráfico | Cores do Gráfico - Cor 1 | A primeira série em um gráfico |
| Cores do Gráfico - Cor 2 | A segunda série em um gráfico | |
| Cores do Gráfico - Cor 3 | A terceira série em um gráfico | |
| Cores do Gráfico - Cor 4 | A quarta série em um gráfico | |
| Cores do Gráfico - Cor 5 | A quinta série em um gráfico | |
| Cores do Gráfico - Cor 6 | A sexta série em um gráfico | |
| Cores do Gráfico - Cor do Texto | O texto renderizado para várias partes de um gráfico | |
| Diversos - Sinalizadores | Os sinalizadores em um gráfico | |
| Diversos - Selecionado | A cor do gráfico destacada | |
| Painel - Calendário | Container | Os dias em um calendário |
| Evento - Container | A caixa de evento dentro de um calendário | |
| Evento - Selecionado | A caixa de evento destacada dentro de um calendário | |
| Data de Hoje - Container | A caixa inteira da data de hoje | |
| Data de Hoje - Dia | A parte numérica da data de hoje | |
| Data de Hoje - Selecionado | O dia selecionado do mês | |
| Controles | Distintivo | O elemento distintivo que se anexa a outros controles |
| Campos de ícone | Tipos de controle de campo de ícone | |
| Controle de linha | Controles de linha, usados para dividir conteúdo em um painel | |
| Barra de progresso | Elemento de barra de progresso | |
| Botão - Indicador de Atividade | O ícone giratório usado para indicar atividade | |
| Botão - Container | Botões em um painel | |
| Campos - Containers de Campos Adicionais | Conteúdo de campo de formulário adicional, como opções de caixa de listagem. | |
| Campos - Sempre Editável | O efeito de passagem do mouse sobre um campo sempre editável | |
| Campos - Edição Automática | O efeito de passagem do mouse sobre um campo de edição automática | |
| Campos - Estado de Edição | Elementos de formulário na página | |
| Campos - Estado de Edição em uso | Elementos de formulário na página, quando em foco ou de outra forma ativos | |
| Campos - Controle de Formulário | Controle de formulário | |
| Campos - Não Editável | Todos os valores de texto não editáveis provenientes de uma fonte de dados | |
| Campos - Obrigatório | O pequeno elemento de cor que indica que um campo é obrigatório | |
| Campos - Selecionado | Vários itens de dados destacados, como listas ou dias em um painel de data | |
| Links - Chevron | O chevron que aparece após um hiperlink | |
| Links - Container | Links em toda a aplicação | |
| Validações | Confirmação | Prompts de confirmação para eventos como Excluir |
| Erro | Resultados de validação do tipo Erro | |
| Exceção | Exceções do App Builder que aparecem na parte inferior da tela | |
| Informação | Resultados de validação do tipo Informação | |
| Aviso | Resultados de validação do tipo Aviso |
Tipos de valor
| Nome do Tipo de Valor | Descrição da Entrada | Texto de Ajuda |
|---|---|---|
| 1 Gradiente de Fundo | Um degrade de cor de um valor de cor para outro | Value1 e Value2 são usados para as cores Para e De. Value3 é para a cor da borda. |
| 2 Cor de Fundo | Código de cor ou valor nomeado usado para preencher o elemento inteiro | Value1 é usado para a cor de fundo. Pode ser um código HTML ou usar {PrimaryColor} por exemplo para usar a cor do tema. |
| 3 Imagem de Fundo | URL ou valor de imagem em Base64 | Value1 é uma URL ou uma imagem codificada em Base64. Clique com o botão direito em qualquer imagem do App Builder e Copiar URL para usar imagens hospedadas no App Builder. Value2 é usado para esticar a imagem ou repeti-la. Para esticar, insira cover, caso contrário deixe em branco para repetir (lado a lado) a imagem. |
| 4 Cor da Borda | Código de cor ou valor nomeado | Value1 é usado para a cor da borda. |
| 5 Ícone - Glyph | Código Glyphicon, não valor nomeado | Value1 é usado para o código Glyphicon. |
| 6 Cor da fonte | Código de cor ou valor nomeado | Value1 é usado para a cor da fonte. Value2 precisa estar em um formato específico: 0 1px 1px #222. Altere o código de cor para afetar a cor real. |
| 7 Estilos Avançados | Defina valores CSS mais avançados para as propriedades Display, Opacity e Transition |
Value1 oculta elementos definindo o valor como none. Value2 define a margem do elemento, enquanto Value3 define o preenchimento. Opacity é usado para especificar a opacidade ou transparência de um elemento. Os valores esperados são 0.1 - 0.9. Por exemplo: 0.5 |
| 8 Fundo avançado | Todas as opções relacionadas ao fundo | Value1 representa a abreviação de fundo. Com isso, é possível especificar todas as opções de fundo de uma vez. Value2 é a propriedade de tamanho de fundo. |
| 9 Sombra de Caixa | Efeito de sombra em caixas | Value1 representa os valores de sombra da caixa, enquanto Value2 é usado para a cor da sombra. |
| 10 Fonte Avançada | Configuração de vários estilos de fonte, como tipo, tamanho e espessura | Value1 é usado para nomes de fontes. Use uma lista separada por vírgulas. Value2 é o tamanho da fonte. Pode ser qualquer unidade de medida. Value3 é a espessura. É possível inserir um valor ou usar bold ou outras palavras reservadas. |
| 11 Raio da Borda | A curva de uma borda. Use 100% para criar um círculo. |
Value1 é usado para arredondar os cantos de um elemento. |
| 12 Bloco Flex box | Configuração de estilos que afetam os blocos do painel de quadro. | Os valores 1 e 2 controlam o tamanho dos blocos. |
| 13 Texto avançado | Modificações de texto | Value1 define text-decoration, usado para adicionar sublinhado e outras propriedades. Value2 define text-transform, usado para colocar texto em maiúsculas. Value3 define font-style, usado para itálico. |
| 14 Alinhamento | Defina o alinhamento para diferentes elementos em uma área especificada | Value1 especifica o alinhamento vertical de um contêiner inline, por exemplo: middle. Value2 é usado para definir o alinhamento horizontal do texto, por exemplo: center. |
| 15 Fonte | Defina várias informações de estilo de fonte, como tipo de fonte, tamanho e espessura (peso) dos caracteres | Value 1 é usado para especificar o tipo de fonte de um elemento. Use uma lista separada por vírgulas. Por exemplo: Calibri, Arial, sans-serif. Value 2 é usado para definir Tamanho da fonte. As opções de Tamanho da fonte variam de xx-small a xx-large. Por exemplo: small. Value 3 é usado para definir Peso da fonte, ou o quão espesso ou fino os caracteres da fonte aparecem na página. As opções de Peso da fonte variam de normal a bolder. Um Peso da fonte de 400 é o mesmo que normal, 700 é o mesmo que bold. Por exemplo: bold. |
| 16 Espaçamento | Especifique valores de espaçamento para conteúdo que aparece em um contêiner | Value1 define Altura da Linha. A propriedade Altura da Linha especifica a altura de um elemento. Valores negativos não são permitidos. Por exemplo: 1.4em. Value2 é usado para definir Margem. A propriedade Margem é usada para criar espaço ao redor dos elementos. Valores negativos não são permitidos. Os 4 lados de um elemento podem ter Margem definida: top, right, bottom, left. Value 3 é usado para definir Preenchimento. A propriedade Preenchimento é usada para gerar espaço ao redor do conteúdo de um elemento. Os 4 lados de um elemento podem ter Preenchimento definido: top, right, bottom, left. |