Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Tip

Nesta secção você encontra tudo que precisa para entender e utilizar a funcionalidade de Temas de cores. Desde onde é preciso escolher cores até onde encontrar as definições de temas prontos ou como criar um novo tema,

Temas

Funcionalidade Temas

A função Temas permite que você personalize a aparência de sua tela para melhor se adequar ao seu projeto. Está disponível para clientes .Net e HTML5.

Em Run-Dictionaries-Themes, você encontrará paletas de tema predefinidas que são incorporadas aos modelos de projeto, exceto para o projeto em branco.

Você também pode criar seu próprio tema selecionando cores para cada coluna.

As cores e temas exibidos na imagem abaixo são integrados a novos projetos. Os elementos de exibição DashBoard, HighPerformance e Standard são agrupados na coluna ItemName.

Habilitando / Desabilitando Tema

Para ativar ou desativar a função de temas, navegue até o Editor do Draw e clique na caixa de seleção localizada na parte inferior do painel à esquerda.

Image RemovedImage Added

  

Quando um tema é desabilitado para uma página inteira, o tema para cada objeto na tela também é desabilitado. A cor será a incorporada nas cores mostradas na imagem acima.Quando você altera o tema no tempo de execução, as páginas e objetos manterão suas cores configuradas padrão.

Os componentes individuais também terão uma caixa de seleção Ativar / Desativar nas configurações do painel esquerdo

.

How to Set a Theme

There are a couple different ways in which a theme can be applied to an object or project.

  • Startup a Theme in a Project

  • Change a Theme in Runtime

  • Configure a Palette for an Element in a Page (Rectangle, Button, Textblock, etc)

  • Pre-defined Theme and Colors

  • Specific Element Properties (Advanced Settings)


    Como definir um tema

    Existem algumas maneiras diferentes nas quais um tema pode ser aplicado a um objeto ou projeto.

    • Iniciar um tema em um projeto

    • Alterar um tema em tempo de execução

    • Configure uma paleta para um elemento em uma página (retângulo, botão, bloco de texto, etc)

    • Tema e cores predefinidas

    • Propriedades específicas do elemento (configurações avançadas)

    Iniciar um tema em um projeto

    Em Edit-Displays-Displays e em .Net Client Settings, você encontrará uma caixa de texto Initial Theme. Neste campo, você pode inserir o nome de qualquer tema que deseja ativar para a inicialização do projeto. Veja em Criando Telas.

    Alterar um tema em tempo de execução

    A seleção do tema em tempo de execução pode ser feita usando a sintaxe abaixo em códigos de script, campos de expressão ou configuração de objetos.

    Para definir o projeto para a configuração padrão, sem um tema personalizado, você precisa definir o Client.Theme para uma string vazia (Client.Theme = ””) ou criar uma tabela de tema vazia e atribuí-la à propriedade do tema.

    Code Block
    @Client.Theme = "Blue";
    @Client.Theme = "Dark";
    @Client.Theme = "Yellow";
    @Client.Theme = "";


    Configure uma paleta para um elemento em uma página

    Para definir um tema para um elemento no display, (retângulo, botão, bloco de texto, etc), você precisa abrir a janela de configuração de aparência localizada na barra de ferramentas do painel esquerdo, em Run-Dictionaries-Themes.

    Na parte superior da janela de configuração de aparência, você encontrará um campo chamado Cor do tema. Para selecionar a cor desejada, você pode inserir o nome do item ou clicar no botão e navegar pelas disponíveis.

    Na maioria das vezes, esta janela de configuração de cores do tema estará disponível para todos os elementos que podem ter suas cores alteradas.

    Image Modified

    Tema e cores predefinidas

    Quando um novo projeto é criado, ele já contém vários temas e cores embutidos. Você pode criar um novo tema com novas cores ou pode alterar a cor do tema pré-configurado.

    Alguns elementos importantes que possuem cores predefinidas:

    • DefaultColor

    • DisplayBackground

    • HeaderBackground

    • TextForeGround

    • Todos HighPerformance State (todos eles começam com HP, ex: HPOnStroke, HPOffStroke, HPDisableStroke)

    • Páginas de Dashboard (todas elas começam com Painel, ex: DashboardTitleBackground, DashboardItem ...)

    Você pode usar todas as cores na imagem abaixo para criar a paleta de cores que desejar.

    Propriedades Avançadas

    Em Run-Dictionaries-Themes e nas configurações avançadas, você pode personalizar as propriedades do componente. Ao clicar no botão avançado da guia do tema, a caixa de diálogo avançada será aberta com base no tema que você selecionou na caixa de combinação. É importante observar que essas propriedades só serão válidas para o tema específico exibido na Janela de Configuração (1).

    Ao abrir as configurações avançadas, você pode acessar facilmente componentes como fonte de texto, marcador de caixa de rádio, marcador de caixa de combinação ou componentes que não são cores ou não estão expostos na configuração da ferramenta de desenho.

    No exemplo acima, a customização é válida para TRadioButtons e todas as Ellipse. Você pode sobrescrever a configuração básica de cores abrindo as Configurações avançadas e digitando o nome da propriedade e o valor que deseja. Para filtrar por elementos específicos, você deve usar a propriedade Uid para selecionar um elemento específico.

    Para certificar-se de que a configuração inserida é válida, sempre clique no botão Verificar (2). Uma mensagem pop-up aparecerá com uma mensagem de sucesso / erro.

    O botão Exportar Propriedades (3) irá exportar todas as propriedades que estão disponíveis, para o objeto selecionado, para a área de transferência. O usuário pode ver as propriedades colando-as em um aplicativo editor de texto (por exemplo: Bloco de notas). Abaixo você pode encontrar algumas das propriedades exportadas para o objeto Ellipse.

    Code Block
    * Type: System.Windows.Shapes.Ellipse
    - Properties:
    . Effect, System.Windows.Media.Effects.Effect
    . Fill, System.Windows.Media.Brush
    . Focusable, System.Boolean
    . Height, System.Double
    . UseLayoutRounding, System.Boolean
    . VerticalAlignment, System.Windows.VerticalAlignment
    . Visibility, System.Windows.Visibility
    . Width, System.Double

    Panel

    Nesta pagina:

    Table of Contents
    maxLevel2