Ir para o conteúdo

Configurando Interfaces Temáticas

No Vinyl, Theme Interface é um termo usado para se referir a uma região definida em uma determinada página do aplicativo que está disponível para personalização por meio de Temas. Usando Temas você pode definir a cor de um painel como cinza ou a fonte como Montserrat.

Normalmente, as regiões da Interface Temática que você deseja atingir já estão definidas e disponíveis na área Temas do Vinyl. No entanto, pode haver casos em que você deseja atingir uma região que não possui um valor definido existente; nesse caso, você pode criar uma Interface de Tema. As interfaces de tema estão disponíveis para criação por meio do IDE > Configurações adicionais > Interfaces de tema.

Após a criação de uma interface de tema, ela estará disponível nas telas padrão onde você normalmente trabalharia na criação e manutenção de informações de tema do aplicativo.

Um exemplo de caso de uso de negócios em que você pode querer criar uma interface de tema personalizada é se você deseja direcionar uma foto que aparece na barra de menu e forçá-la a ser exibida em um tamanho específico. Por exemplo: 100px de altura. Neste artigo, veremos como criar uma interface de tema personalizada.

Nota

Antes de criar uma interface de tema personalizada, certifique-se de verificar se ainda não existe um valor de interface de tema que suporte o que você está tentando atingir.

Para Criar uma Interface de Tema

  1. Navegue até IDE > Configurações Adicionais
  2. Clique em Interfaces Temáticas
  3. Clique em + Interface no painel Interfaces
  4. Selecione o componente Imóveis que esta área terá como alvo. Por exemplo: Barra de título da página
  5. Selecione a região Grupo ou Subtipo do valor Imóvel, onde será direcionado. Por exemplo: Barra de título
  6. Selecione a Coleção à qual deseja que a Interface do Tema pertença. Por exemplo: Vento Norte
  7. Atribua um Nome para esta nova interface de tema. Por exemplo: Logotipo da barra de menu
  8. Insira o valor do Seletor apropriado que a interface do tema requer para direcioná-lo. Por exemplo: vinyl-controls-image-purpose-icon.vinyl-controls-image>img
  9. Clique no ícone marca de seleção para salvar o registro
  10. Depois de salvar o novo registro, você agora poderá ver e usar este valor da Interface do Tema da Coleção onde o salvou, das telas de Vinyl apropriadas onde você trabalha com Temas

themeinterfacesexample2.png

Novo valor de interface de tema personalizado agora disponível no aplicativo