Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
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
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.

Image Removed

Habilitando / Desabilitando Tema

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

Image Removed

  

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 em tempo de execução, as páginas e objetos manterão suas cores configuradas padrão.

Os componentes individuais também sempre tem uma caixa de seleção Ativar / Desativar nas configurações do painel esquerdo. Esta ação é para o controle de ativação para este item somente.

.

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

  • Configurar 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.

In this section you will find everything you need to understand and use the Color Themes feature. From where you need to choose colors to where to find ready-made theme settings or how to create a new theme,

Themes

Themes feature

The Themes function allows you to customize the look of your screen to better suit your design. It is available to customers .Net and HTML5.

In Run-Dictionaries-Themes, you will find predefined theme palettes that are incorporated into the project templates except for the blank project.

You can also create your own theme by selecting colors for each column.

The colors and themes displayed in the image below are integrated into new projects. The DashBoard, HighPerformance, and Standard display elements are grouped in the ItemName column.

Image Added

Enabling/Disabling Theme

To turn the themes function on or off on a screen, navigate to the Draw Editor and click the check box located at the bottom of the panel on the left.

Image Added

  

When a theme is disabled for an entire page, the theme for each object on the screen is also disabled. The color will be incorporated into the colors shown in the image above.When you change the theme at run time, pages and objects keep their default colors set.

Individual components also always have an Enable/Off check box in the left pane settings. This action is for activation control for this item only.

.

How to define a theme

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

  • Start a theme in a project

  • Change a theme at run time

  • Set up a palette for an element on a page (rectangle, button, block of text, etc.)

  • Predefined theme and colors

  • Element-specific properties (advanced settings)

Start a theme in a project

In Edit-Displays-Displays and .Net Client Settings, you'll find a text box Initial Theme. In this field, you can enter the name of any theme that you want to activate for project startup. See in Creating Screens.

Change a theme at run time

Run-time theme selection can be done by using the syntax below in script codes, expression fields, or object configuration.

To set the project to the default setting, without a custom theme, you need to set the Client.Theme to an empty string (Client.Theme = "") or create an empty theme table and assign it to the theme property.

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

Configurar 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

Set up a palette for an element on a page

To set a theme for an element on the display, (rectangle, button, text block, etc.), you need to open the appearance configuration window located in the left pane toolbar, under Run-Dictionaries-Themes.

Na parte superior da janela de configuração de cores, 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 Removed

Temas 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 ou funções importantes que possuem cores predefinidasAt the top of the color configuration window, you will find a field called Theme color. To select the desired color, you can enter the item name or click the button and navigate the available ones.

Most of the time, this theme color setting window will be available for all elements that may have their colors changed.

Image Added

Predefined themes and colors

When a new project is created, it already contains several inline themes and colors. You can create a new theme with new colors, or you can change the color of the preconfigured theme.

Some important elements or functions that have predefined colors:

  • DefaultColor

  • DisplayBackground

  • HeaderBackground

  • TextForeGround

  • Todos All HighPerformance State (todos eles começam com HP, ex: all of them start with HP, e.g. HPOnStroke, HPOffStroke, HPDisableStroke)

  • Páginas de Dashboard (todas elas começam com Painel, ex: Pages of Dashboard (all of them start with Dashboard, e.g. DashboardTitleBackground, DashboardItem ...)

Você pode usar todas as cores em You can use all the colors in Run-Dictionaries-Themes para criar a paleta de cores que desejar. veja também em Funcionalidade Temas acima nesta página.

Propriedades Avançadas

Em to create the color palette you want. see also in Themes feature above on this page.

Advanced Properties

In 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 and in advanced settings, you can customize component properties. When you click the advanced button on the theme tab, the advanced dialog box opens based on the theme you selected in the combo box. It is important to note that these properties will only be valid for the specific theme displayed in the Configuration Window (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 EllipseBy opening advanced settings, you can easily access components such as text source, radio box marker, combo box marker, or components that are not color or are not exposed in the drawing tool configuration.

In the example above, customization is valid for TRadioButtons and all Ellipse. You can overwrite the basic color setting by opening Advanced Settings and typing the property name and value you want. To filter by specific elements, you must use the Uid property to select a specific element.

To make sure that the configuration you enter is valid, always click the Check (2). A pop-up message will appear with a success/error message.

The button Export Properties (3) will export all properties that are available, to the selected object, to the clipboard. The user can see properties by pasting them into a text editor application (for example: Notepad). Below you can find some of the properties exported to the Ellipse object.

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 paginaOn this page:

Table of Contents
maxLevel2