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.

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

.

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.

@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.

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.

* 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