É possível criar um tema para fornecer uma definição de estilo comum para um conjunto de visualizações de coach.
Sobre Esta Tarefa
A criação de um tema consiste em designar valores para um conjunto de variáveis de tema. Por padrão, um novo aplicativo de processo usa o Tema do BPM, pois ele contém um conjunto completo das variáveis que são utilizadas pelos controles no kit de ferramentas Coaches Responsivos. Se desejar criar seu próprio tema e usar qualquer um desses controles responsivos em seu aplicativo
de processo, use o Tema do BPM como seu ponto de início. Em seguida, é possível ampliar seu tema, incluindo variáveis customizadas e modificando as variáveis do BPM. As variáveis do BPM começam com um prefixo
bpm.
Procedimento
- Na biblioteca, clique no sinal de mais na categoria Interface com o Usuário e, em seguida, selecione Tema.
- Na janela Novo Tema, digite o nome do novo tema.
- Selecione se deseja copiar um tema existente do projeto atual ou kit de ferramentas dependente ou importar um tema.
Importante: Se você estiver importando um tema e utilizando controles responsivos, assegure-se de que ele contenha todas as variáveis do BPM, bem como os comentários e metadados. Se o tema não contiver essas variáveis e você utilizar controles do BPM, ocorrerá um erro quando o sistema gerar a CSS para o aplicativo de processo. Por isso, baseie seu tema no Tema do BPM ou em outro tema que você saiba que tem todas as variáveis do BPM. As variáveis do BPM começam com bpm e são reservadas.
Após você clicar em Concluir, o editor abrirá o novo tema.
- No editor de tema, designe valores para as variáveis de tema. O valor pode ser um valor específico, uma fórmula, outra variável ou uma combinação desses tipos. Por exemplo, @bpm-neutral: #586464 define o valor para uma cor específica, enquanto @bpm-link-color: @bpm-color-primary; define o valor com o valor de outra variável.
- Na página Design, altere o valor de uma ou mais variáveis. Muitas variáveis possuem uma amostra na qual é possível clicar e, em seguida, escolher um valor a partir de um selecionador. Os controles de exemplo são atualizados parar mostrar os novos valores. Ao passar o mouse sobre um controle, é possível ver as variáveis específicas que o afetam e seus valores atuais.
- Na página Origem, designe um valor para cada variável de tema a ser alterada. Caso haja visualizações de coach customizadas às quais você deseja incluir estilos dinâmicos, inclua variáveis para esses estilos. As variáveis estão no formato Less:
@variableName: value;
Se quiser exibir uma variável de tema customizado na página
Design, inclua metadados conforme o exemplo a seguir:
//|EM|{"group":"PREVIEW_GROUP_BASE_SETTINGS","order":"010020","type":"color"}|DE|
@bpm-neutral-darker: #2d3737; //|EEM|
O grupo é o nome da categoria que contém a variável. No exemplo,
PREVIEW_GROUP_BASE_Settings é uma chave para um valor em um recurso de localização (Configurações Base), mas pode ser uma sequência ordinária.
A página Design e a página Origem reagem às mudanças feitas na outra página. Por exemplo, a variável a seguir é incluída na página Origem
//|EM|{"group":"My Group","type":"color"}|DE|
@my-color: #0d1122; //|EEM|
Ao acessar a página Design, você verá uma categoria Meu Grupo que contém uma variável
my-color.
- Clique em Salvar ou
Concluir edição.
Resultados
Pode levar algum tempo para gerar o código CSS com base nos
valores atualizados na definição de tema. Por isso, pode haver um atraso até que o
Process Designer utilize os novos valores na definição de tema para a exibição de coaches e de visualizações de coach que usam esse tema. No tempo de execução, o código CSS já é gerado, para que não ocorram atrasos.