Telas e Símbolos

As seções a seguir descrevem como criar a interface de usuário da aplicação:

n        Seleção e Criação de Telas

n        Criação de Layouts

n        O ambiente Desenhar (Draw)

n        Ferramentas de desenho

n        Dinâmicas e Animações

n        Controles da interface do usuário

n        Gerenciando Imagens e Símbolos

n        Objetos runtime Display

Seleção e Criação de Telas

No Action.NET a janela principal da tela do aplicativo é definida por um objeto denominado Layout. Um Layout define o tamanho da janela do aplicativo e o arranjo básico de componentes de visualização (Telas e partes de Telas) na aplicação em tempo real. Veja Criação de Layouts

Telas (Displays) são componentes da aplicação que servem como interface entre o usuário e o processo monitorado. Cada Tela pode ser formada por várias partes ou telas estáticas ou dinâmicas. Uma tela pode conter vários elementos de visualização e comando, incluindo controles, áreas de Tela de dados, áreas estáticas e outros objetos. Estes componentes ou telas podem ser estáticos, ou seja, eles sempre são exibidos, como uma barra de menu, barra de ferramentas ou barra de status. Os componentes também podem ser trocados dinamicamente, dependendo do que o usuário clica ou seleciona.

Para selecionar Telas:

1.      Vá para Edit> Displays> Displays.

2.      Selecione a opção de visualização Cardview ou TableView na parte superior direita do DataGrid com a lista de Telas.

3.      Veja a lista de Telas disponíveis aparecer no DataGrid.

Coluna Descrição Name Somente leitura. Configurado ao definir a Tela no ambiente Draw. Mode Somente leitura. Configurado ao definir a Tela no ambiente Draw. Preview Somente leitura. Mostra uma miniatura da tela. AllowSelection Selecione para permitir que os usuários possam selecionar a Tela através do seletor de páginas (PageSelector). EditSecurity Escolha quais tipos de usuários têm acesso para editar esta Tela. RunSecurity Escolha quais tipos de usuários têm acesso a esta Tela em tempo de execução. Description Digite uma descrição para esta Tela.

 

 

Operações em Telas

Para editar uma Tela, selecione-a no DataGrid na aba Display e pressione o botão DRAW.

      

Quando você está no ambiente DRAW, você também pode editar telas selecionando-as na combo-box na barra de ferramentas. que aparece para a execução de operações com as Telas.

 

n        A caixa (combo-box) a esquerda mostra o nome da Tela atualmente carregada na área de trabalho. Abrindo esta caixa (clique na seta) aparece a lista com todas as telas existentes no projeto. Escolhendo-se uma na lista , esta será carregada na área de Desenho e passará ser a tela corrente para edição.

n        O ícone em formato de disquete serve para solicitar salvamento das alterações;

n        O ícone com o disquete e a figura abrindo a ficha serve para solicitar salvar a tela com outro nome (salvar como).

n        O ícone com o sinal + deve ser utilizado para criar uma nova tela, vazia, e fechar, salvando-a a tela até então carregada. Após as alterações na nova tela aparece janela solicitando o nome a ser dado para a nova tela.

n        O símbolo com o Monitor de vídeo permite mostrar uma visão prévia da tela, isto é mostrar como ficará a tela em tempo real.

n        O ultimo ícone serve para fechar a tela corrente sem salvar as ultimas alterações

Criando uma nova tela

Para criar uma nova Tela

1.      Vá para Draw> Drawing .

2.      Clique em  cuja ação é Fechar a Tela atual e Criar uma nova.

n        Se você não encontrar este botão na barra de ferramentas, faça a sua janela mais larga.

n        Será exibida a janela para criar uma nova tela.

3.      Digite ou selecione as informações, conforme necessário.

Coluna Descrição Display Name Digite um nome para a tela. Description Digite uma descrição para a tela. iPad/iPhone iOS Target Nota: Se você planeja usar essa Tela para usuários do iPad e do iPhone, não se esqueça de selecionar essa opção ao criar o display. Você não pode mudá-la mais tarde. l      Selecione para ser possível usar essa Tela com iPads e iPhones. Ao selecionar esta opção, as configurações de Tela em outras partes da área Draw mostram apenas as opções que se aplicam ao Windows e iPads / iPhones. l      Selecione o modo de Tela padrão para usuários de iPad e iPhone: l        Paisagem l        Retrato

 

4.      Clique OK, para fechar a janela de criação da tela.

AVISO: Se a tela é para uso com um iPad ou iPhone, você deve selecionar a opção de iPad / iPhone iOS Target quando você criar o display. Você não pode alterar esta definição mais tarde.

Definindo propriedades para a tela

 

No lado esquerdo da janela principal aparece uma área para o detalhamento dos atributos da tela, com duas partes: Appearance e DisplaySettings.

Os parâmetros de Aparência definem o estilo do “pincel” usado ao desenhar objetos na tela, incluindo as cores. Clicando na opção Fill (preencher) você poderá definir Cores, gradientes ou objetos para o preenchimento de uma figura gráfica.

Os parâmetros em DisplaySettings definem, os atributos da tela. As telas podem ser configuradas como PopUps, Diálogos, ou Telas normais. As dimensões da tela ao ser criada seguem o que está definido em Info>Settings.

Como qualquer objeto gráfico, as Telas podem ter cores e padrões diferentes, bordas, títulos e muito mais.

Uma característica especial é que você pode especificar uma transição de animação para usar quando trocar de uma tela para outra de forma semelhante ao que se usa nas apresentações do PowerPoint.

Se você tiver selecionado a opção de tela para iPad / iPhone iOS, quando criou a exibição, nem todos os DisplaySettings estarão disponíveis.

 

 

 

Para a definição de propriedades das telas:

1.      Digite ou selecione as informações, conforme necessário, para a definição dos DisplaySettings.

Coluna Descrição Mode Selecione o tipo de Tela que você deseja criar: l      Page - É o modo default. Ao abrir uma tela do modo Page causa o fechamento automático da última página no layout atual e exibe na mesma área a ultima da lista da página em Displays> Layouts. Apenas telas em modo Page são exibidas no layout. l      Popup - Uma pop-up é aberta na frente de todas as outros telas. Quando você abre uma nova página, por padrão, todas as pop-ups exibidas são fechadas. Controles em outras telas ficam disponíveis durante o aparecimento de pop-ups. l      Dialog - Uma Tela diálogo é aberta como uma caixa de diálogo modal, que desativa os controles em todas as outras telas abertas até fechar a caixa de diálogo. Clicando OK executa o método OnOK no CodeBehind da Tela (display). Background Selecione a cor de fundo da tela. Width Introduza a largura da tela, em unidades do WPF (numero de pixels independentes de monitor). Certifique-se de levar em conta o tamanho do layout.. Ao ser criada recebe a largura definida em Info>Settings. Height Introduza a largura da tela, em unidades do WPF (numero de pixels independentes de monitor). Certifique-se de levar em conta o tamanho do layout. Ao ser criada recebe a altura definida em Info>Settings. Border Selecione o tipo de borda da tela. CloseButton Selecione se deve exibir o botão Fechar da tela. Disponível apenas para Popups e diálogos. Animation Selecione o tipo de animação (Nenhum, fade,slide, scroll) a ser usada ao mostrar esta tela.. Show on PageSelector Object Marque a opção para incluir esta Tela no Seletor de Telas que permite aos usuários acessar diretamente uma Tela na aplicação, sem necessidade de incluir botões de navegação nas telas. iPad/iPhone iOS target Somente leitura. Mostra se você selecionou a opção tela para ser usada em iPad / iPhone iOS quando criou a Tela. Placement Selecione onde, dentro do Layout, que você deseja colocar esta tela. Disponível apenas para Popups e diálogos. Target Selecione se o “Placement” definido é em relação à posição do mouse ou em relação à janela inteira. Disponível apenas para Popups e diálogos. DialogButtons Selecione os botões de controle que você quer na caixa de diálogo. Disponível apenas para diálogos. Title Digite um título que vai aparecer na parte superior da tela. Title Background Selecione uma cor para o fundo do título. Stays Open on Page Change Deixe a janela pop-up aberta quando o usuário clica em algo que abre uma tela diferente. Disponível apenas Stays Open After Losing Focus Deixe a janela pop-up aberta quando o usuário clica em uma outra. Tela. Disponível apenas para Popups. Left Digite, a distancia entre a margem esquerda do Layout e a posição em que o lado esquerdo da tela deve aparecer, em unidades WPF (pixels independente de monitor). Disponível somente para Layouts Canvas. Top Digite, a distancia entre o topo do Layout e a posição em que o topo da tela deve aparecer, em unidades WPF (pixels independente de monitor). Disponível somente para Layouts Canvas.

2.      Use as ferramentas de desenho, nas barras vertical à esquerda e horizontal inferior para criar, e posicionar objetos de visualização na Tela

n        Selecione um dos botões na barra de ferramentas vertical. Coloque o cursor na área de exibição, em seguida, clique e segure o botão esquerdo do mouse enquanto arrasta o cursor em na área da Tela recém crida.

n        Para ver um menu de opções, clique com o botão direito do mouse sobre o objeto desenhado. O menu de contexto fornece ações que são específicas para o objeto selecionado.

n        Para selecionar vários objetos, pressione Shift + clique com o botão esquerdo do mouse em cada objeto.

AVISO - Ao selecionar vários objetos, o último objeto selecionado é o "mestre": as propriedades dele são as mostradas no painel à esquerda. Se você, em seguida, alinhar os objetos, o alinhamento é baseado no mestre. Se você alterar outras propriedades, as propriedades são alteradas para todos os objetos selecionados.

n        A barra de ferramentas horizontal (na parte inferior da aba Drawing) contém botões para agrupar, combinar, alinhar e bloquear os objetos selecionados.

n        Para mais informações sobre as ferramentas de desenho, consulte Ferramentas de desenho.

3.      Clique em Save Display.

4.      Continue na seção Criação de Layouts.

Criação de Layouts

Um layout define o tamanho da janela do aplicativo e o arranjo básico de componentes de visualização na aplicação de tempo real. Certifique-se de planejar como você deseja utilizar as Telas. Por exemplo, considere se você quer uma barra de menu, barra de ferramentas ou outros elementos para exibir sempre no topo da janela da aplicação.

Muitas vezes você pode precisar de um único layout para enquadrar qualquer das telas com toda a informação na aplicação. Usa-se aba Layouts no ambiente de Displays para a definição de layouts.

NOTA - A última Tela listada na aba Layout é a única que é substituída quando você troca de Tela. Por exemplo, os novos projetos incluem um layout padrão chamado Startup. Veja na figura que há outras duas telas, ou componentes, neste Layout: AN_Header (uma barra de ferramentas) e AN_Footer (um rodapé). A tela AN_MainPage que está listada na última linha do DataGrid é a área que, por default, será trocada quando você solicita para a aplicação Abrir outra tela.

Na figura, os botões acima do DataGrid à esquerda na barra servem, respectivamente, para:

l          Adicionar nova linha e descrever posição da tela

l          Retirar a linha selecionada

l          Subir a linha selecionada

l          Descer a linha selecionada

Para criar um novo layout:

1.      Vá para Edit> Displays> Layouts .

2.      Clique o botão New. Será mostrada a janela para a criação de Layouts.

3.      Digite ou selecione as informações, conforme necessário.

 

Coluna Descrição Layout name Entre com um Nome para o layout Layout Selecione o tipo de Layout sendo criado: l      DockPanel - Selecione este tipo para posicionar telas em relação ao layout e a outras telas. l      Canvas - Selecione para posicionar telas em uma posição absoluta, introduzindo a posição em unidades WPF (pixels independentes do monitor). Description Digite uma descrição desse layout.

4.      Clique em OK. A janela de criação de Layouts será fechada

5.      No canto superior direito da aba Layouts, digite ou selecione as informações, conforme necessário:

Coluna Descrição Width Digite a altura, em unidades WPF (pixels independentes do monitor), do layout. Esta é a altura da tela da aplicação em tempo de execução. Height Digite a largura, em unidades WPF (pixels independentes do monitor), do layout. Esta é a largura do pedido de execução Background Selecione uma cor para fundo deste layout.

6.      Clique em Adicionar linha para adicionar uma nova linha para posicionar uma Tela.

n        As Telas que você adiciona são as primeiras telas que o layout utilizará.

7.      Digite ou selecione as informações, conforme necessário.

Coluna Descrição Page Selecione uma Tela que você deseja incluir no layout. Somente Telas tipo Page podem ser utilizadas para posicionamento em Layouts. Docking Selecione a margem da área principal de visualização da aplicação, para ser o local de fixação (docagem) para esta Tela: l      Left (esquerda), Top (topo), Right (direita), Bottom (inferior) HorizontalAlign Selecione o alinhamento horizontal desta tela no Layout: l      Left (esquerda), Center (centro), Right (direita) VerticalAlign Selecione o alinhamento vertical desta tela no Layout: l      Top (topo), Center (centro), Bottom (inferior)

O exemplo de Layout StartUp

O Layout Startup, mostrado no DataGrid acima, vem no projeto Default do Action.NET. A seguir informações sobre cada uma destas áreas:

Trata-se de um esquema definindo uma tela de cabeçalho outra de rodapé e a tela principal na parte central do monitor, para que sejam mostradas como uma única tela pode ser definido por um Layout conforme apresentado abaixo no layout Startup:

n        AN_Header: é o cabeçalho da tela ajustado no topo à esquerda. Como a dimensão do layout é 1024 x 768, para o cabeçalho ocupar toda a parte horizontal superior do layout deverá ter comprimento (width) de 1024. No caso desta aplicação, sua dimensão é 1024 x 60.

 

n        AN_Footer: é o rodapé da tela, ajustado na parte inferior da tela à esquerda. De forma similar ao cabeçalho, deverá ter comprimento de 1024 para ocupar toda a parte inferior da tela. No caso desta aplicação sua dimensão é 1024 x 45.

 

n        AN_MainPage: será o miolo do layout com as diversas telas de processo que serão utilizadas. Nesta aplicação, considerando que o cabeçalho tem altura (Height) de 60 pontos e o rodapé 45, as telas de miolo deverão ter dimensão vertical de 768 – 60 – 45 = 663. Assim, todas as telas inseridas no miolo deste layout deverão ter a dimensão de 1024 x 663.

NOTA - Quando em um projeto existe mais de um layout, antes de se abrir uma tela deve-se abrir seu layout e a tela sempre será colocada no último nível do layout (no caso acima nível 2). A título de exemplo, abaixo é mostrado um script abrindo um layout e uma tela:

   @Layout.AN_NoFilterReports.Open();

   @Display.AN_HistoricEventsSummary.Open();

Configurações da área de Visualização

 As configurações da área de visualização controlam como o aplicativo deve exibir as telas nos monitores dos computadores clientes, isto é que utilizam os módulos de visualização do Action.NET.

Para esta configuração há botões e controles na parte superior do ambiente Display, mostrados na figura abaixo.

Estas configurações são diferentes para clientes normais MS-Windows daquelas necessárias para clientes utilizando o iOS dos tablets e iPhones da Apple. As próximas seções detalham estas configurações.

Clientes MS-Windows (“Desktop”)

Para definir as configurações do cliente de desktop:

1.      Vá para Edit>Displays>Displays .

2.      Clique em Clients para configurar desktops que usam Windows. Aparece a janela para configuração.

 

3.      Digite ou selecione as informações, conforme necessário e clique em OK 

Coluna Descrição Maximize When Open Selecione para maximizar a janela do cliente de forma a se ajustar ao monitor. Stretch Escolha como o layout deve se estender no monitor cliente quando usando o aplicativo: l      None - Layout não deve se redimensionar: Deve ser mostrado o tamanho exato que foi configurado para o layout. Neste caso recomenda-se selecionar a opção de incluir a barra de rolagem. l      Fill ( Preencher) - O layout será redimensionado para preencher completamente o espaço disponível no monitor do cliente., sem levar em conta a proporção do layout original. l      Uniforme - O layout será redimensionado proporcionalmente ao tamanho do monitor do cliente, mantendo a proporção do layout. original. l      UniformToFill - O layout redimensionado tanto para manter a proporção como também para preencher completamente o espaço disponível no monitor do cliente. Isto pode resultar em cortar algumas partes da disposição. Scrollbar Selecione para visualização da barra de rolagem na janela do cliente. Title Digite um título para a janela do cliente. MinimizeBox Selecione para exibir o botão padrão de minimizar. MaximizeBox Selecione para exibir o botão padrão de maximização. CloseBox Selecione para exibir o botão padrão de fechar ResizeBox Selecione para exibir o puxador padrão de redimensionamento (canto inferior direito) Menus Selecione quais menus devem ser mostrados l      File l      Tools l      Security Mouse Cursor Visible Selecione para o ponteiro do mouse ser visível.   OnScreen Keyboard Selecione para exibir um teclado numérico na tela. Disable Web Comments Selecione para proibir usuários do aplicativo de enviar comandos para o PLC When Mouse Is Over Command Areas Selecione o que mostrar: • Mostrar bordas do objeto • Alterar o Cursor - Selecione o tipo de cursor. Verify Tag Quality on Client Displays l      On undefined quality show - (Quando a qualidade for indefinida) Selecionar a opção e o caractere que deve ser mostrado quando a qualidade dos dados vindos de campo for indefinida. l      On OPC Bad quality show - Selecionar a opção e o caractere que deve ser mostrado quando o servidor OPC indica que a qualidade dos dados é ruim. Share Logged User at Same Computer Os usuários podem executar múltiplas instâncias do aplicativo no mesmo computador. O usuário pode precisar logar como um usuário diferente de vez em quando. Selecione essa opção para alterar automaticamente o usuário conectado em todas as instâncias em execução do aplicativo no mesmo computador.

4.      Digite o número de monitores que o visualizador Cliente vai usar.

5.      Selecione o monitor e o Layout a ser mostrado quando o aplicativo é iniciado. 

Cliente iOS

Se necessário, faça também as configurações da visualização para os Cliente iOS.

Para configura a área de trabalho para Clientes iOS:

1.      Pressione o botão iOS Device. Aparece a janela para configuração para iOS client.

 

2.      Digite ou selecione as informações, conforme necessário e clique em OK .

Coluna Descrição Disable Commands Selecione para proibir usuários do aplicativo de enviar comandos para o campo iPad Initial Page Selecione a Tela que os usuários do iPad devem ver quando iniciar a aplicação no iPad. iPhone Initial Page Selecione a Tela que os usuários do iPhone devem ver quando iniciar a aplicação no iPhone. Stretch Fill Selecione para redimensionar o aplicativo de modo a preencher a tela do dispositivo.

O ambiente Desenhar (Draw)

O ambiente de trabalho Desenhar (Draw) disponibiliza todas as ferramentas para a construção de telas gráficas para a aplicação.

   Para entrar neste ambiente clique o ícone de Desenhar.

No Action.NET o ambiente Desenhar possui três abas:

Design (Desenho) onde são mostradas e podem ser editadas as telas. Na aba de Desenho, existem uma barra de ferramentas vertical no lado esquerdo da área de trabalho e uma barra horizontal na parte de baixo da mesma área, orientadas a tarefas sobre os objetos dentro de uma tela.

CodeBehind para a escrita de Scripts relacionados à tela. Nesta aba há um Editor de Código fonte e já aparecem os textos dos protótipos dos procedimentos que são ativados por eventos básicos sobre telas. Se necessário estes textos devem ser preenchidos com códigos para modificar o procedimento padrão da tela.

Symbols com a biblioteca de símbolos gráficos disponíveis no projeto. Neste grid pode-se editar atributos de símbolos. Para criar um símbolo, usar o botão direito do mouse sobre um objeto em uma tela.

Code Behind - Scripts de Telas

Use a aba CodeBehind para definir um conjunto de funções relacionadas com a Tela. Você pode escrever código tanto em VB.Net como em CSharp. Você também pode alternar entre os dois. Se você alterar a seleção da linguagem, o sistema converterá automaticamente o código existente para o correspondente na linguagem selecionada.

Se você precisar de referências a outras partes de código também criados por você, use Run > Build > References para estabelecer estas referências.

As funções colocadas no CodeBehind podem ser executadas ao abrir ou fechar uma tela, ou quando a tela já está aberta, dependendo de como você configura o código. Você pode usar CodeBehind para definir métodos de tratamento dos cliques do mouse sobre a tela ou de entrada de comandos para serem executados em telas específicas.

Para Telas do tipo diálogo, use o método pré definido DialogOnOK, que é chamado quando o botão OK, também pré definido na caixa de diálogo, é pressionado. Se este método retornar True, o diálogo é fechado, se retornar False, o diálogo continua aberto. Este método é comumente usado para garantir a validação de dados na caixa de diálogo (que deve então solicitar ao usuário para corrigir entradas incorretas antes de fechar o diálogo).

O código por trás das telas tem os seguintes métodos pré-definidos:

n        DisplayOpening () - Executado quando a tela está abrindo.

n        DisplayIsOpen () - Chamado em intervalos regulares de tempo enquanto a tela está aberta.

n        DisplayClosing () - Executado quando a tela está se fechando.

n        DialogOnOK () - Chamado quando o botão OK de uma tela de diálogo é pressionado: - Retornando 1 permite o diálogo ser Fechado pelo sistema. Retornando 0 impede o diálogo de ser fechado.

Você pode adicionar suas próprias variáveis e métodos dot NET neste texto de código.

NOTA - Como as Telas nos Clientes são projetadas para funcionar em ambientes distribuídos e web, recomendamos evitar o uso de funções que não permitam a execução em “confiança parcial”, ou que se referem a caminhos de arquivos físicos.

Ferramentas de desenho

A aba Drawing tem os seguintes barras de ferramentas e controles para criar, formatar e configurar as Telas:

n        Barra Vertical - No lado esquerdo da aba Drawing. Use estes botões para desenhar formas, adicionar botões, e criar janelas especiais. Para detalhes sobre estes botões, ver Tabela 1 .

n        Barra Horizontal - Na parte inferior da aba Drawing. Use estes botões para agrupar, combinar, alinhar e fixar os objetos selecionados. Para mais informações, ver Tabela 2.

n        Aparência, Dynamics, DisplaySettings e outras configurações - No painel a esquerda da aba, abaixo dos botões do menu principal. Estas configurações variam de acordo com as características e funcionalidades do tipo de objeto selecionado.

Drawing - Barra de ferramentas vertical

A tabela 1 a seguir apresenta os ícones da barra de ferramentas Vertical do espaço Drawing e as suas funcionalidades.

Tabela 1: Barra de Ferramentas Vertical Botão Descrição Selection Tool l      Clique em um objeto para selecioná-lo. l      CTRL + clique para selecionar vários objetos (e grupos de objetos), um de cada vez. Mantenha pressionada a tecla CTRL enquanto clica em cada objeto. l      Shift + clique para alternar objeto selecionado entre mais de um objeto selecionado. l      Clique em uma área aberta da tela, em seguida, selecione um grupo de elementos, destacando os elementos enquanto arrastando o mouse e mantendo pressionado o botão esquerdo do mouse. l      Clique duas vezes em um objeto para abrir a janela de configuração Dynamics, que permite definições para propriedades de objetos dinâmicos. Direct Selection Tool   l      Use esta ferramenta para selecionar um objeto dentro de um grupo (e modificar suas propriedades). Clique no objeto para selecioná-lo. l      Você também pode adicionar, remover e modificar os pontos em um polígono com a Direct Selection Tool: l        Para mover o ponto, selecione-o clicando no ponto e segurando o botão esquerdo do mouse pressionado. Arraste o ponto para sua nova posição. l        Clique duas vezes em um ponto para adicionar um novo ponto adjacente ao ponto selecionado. l        Para excluir um ponto selecionado pressione o botão direito. Hand Tool   Use a ferramenta Mão para modificar a janela de visualização clicando no fundo da Tela e mantendo pressionado o botão esquerdo do mouse em seguida, mudar a tela para a posição desejada. Geometric objects tools Use o Botão direito do mouse para encerrar o uso de cada ferramenta.. Para adicionar, alterar e remover os pontos depois de criar um polígono ou polilinha, use a ferramenta de seleção direta. Rectangle Cria um objeto retângulo. Ellipse Cria um objeto elipse. Polygon Cria um objeto polígono. Polyline Cria um objeto polilinha. Button Cria um objeto botão. Text Output Cria um objeto de saída de texto. Text Box Cria um objeto de entrada/saída de texto. Para vincular o objeto de texto de I / O com uma tag, clique duas vezes no objeto de texto de I / O. Na janela de configuração dinâmica selecionar TextIo dinâmico. CheckBox Cria um objeto do tipo “check box”. Clicando com o botão direito do mouse tem-se acesso a criação dos seguintes outros objetos:  Cria um objeto radio button Cria um objeto combo box. Cria um objeto list box. Cria um objeto senha. Cria um objeto “Pega data” Cria um objeto date/time text box. Cria um objeto rótulo. Cria um objeto controle deslizante. Depois de selecionar o objeto deste menu, ele se torna o objeto default para este botão na barra vertical.  Insert Symbol Clicando este botão mostra a Biblioteca de Símbolos que inclui tanto os símbolos pre definidos como os definidos pelo usuário. Symbol Factory Abre o aplicativo Symbol Factory para obtenção de símbolos prontos, vetoriais, em grande variedade. Image Resource Abre a janela de biblioteca de imagens (recursos), para se obter delas imagens para uso na tela. Web Browser Cria um objeto Web Browser. Clicando com o botão direito do mouse tem-se acesso a criação dos seguintes outros objetos:  Cria um objeto Page Selector, onde os usuários podem ir para escolher diretamente para uma outra Tela na aplicação.  Cria um objeto Report Viewer .  Cria um objeto n XPS Viewer. Cria um objeto janela filha (Child Window).  Cria um componente WPF externo. - Neste caso aparece uma janela para a escolha do objeto a ser criado, dentre os controles WPF cadastrados no projeto. Veja em Configurando componentes WPF. Nota: Depois de selecionar o objeto deste menu, ele se torna o objeto default para este botão na barra vertical. Alarm Window Cria um objeto Janela de Alarme. Posicione a janela de alarme na tela e faça um duplo clique sobre ela para configurar seus parâmetros. Para mais informação veja em Configurando uma Janela de Alarmes. Trend Window Cria um objeto Janela de Tendência. Posicione a janela de tendência na tela e faça um duplo clique sobre ela para configurar seus parâmetros. Para mais informação veja em Configurando a Janela de Tendência (Legacy). DataGrid Window Cria um objeto janela DataGrid. Posicione a janela DataGrid na tela faça um duplo clique sobre ela para configurar seus parâmetros. Para mais informação veja em Configurando uma Janela DataGrid.

Drawing - Barra de ferramentas Horizontal

A tabela 2 a seguir apresenta os ícones da barra de ferramentas Horizontal do espaço Drawing e as suas funcionalidades.

Tabela 2: Barra de Ferramentas Horizontal Botão Descrição   Definição de Grade   Zoom da tela   Agrupar   Desagrupar   União de desenhos   Intercecção de desenhos   Exclusão - Exclui partes não comuns   Ou exclusivo - Fica somente com partes não comuns   Alinhar a esquerda   Alinhar horizontalmente no centro   Alinhar a direita   Alinhar topos   Alinhar verticalmente no centro   Alinhar bases   Mover para a frente   Mover para trás   Modificar largura   Modificar altura   Espaçar igualmente na horizontal   Espaçar igualmente na vertical   Girar Horizontalmente   Girar Verticalmente   Impedir mudança de posição   Liberar movimentação   Liberar movimentação de todos objetos impedidos.   Mostrar todos os objetos   Esconder objetos selecionados

Propriedades dos Controles

Na área DRAW, no lado esquerdo é mostrado o painel de configuração de propriedades de telas e de controles de visualização. As seções seguintes mostram detalhes sobre estas configurações.

n        Veja em UId e Texto, a configuração do texto e Identificador.

n        Para configurar a dinâmica, consulte Dinâmicas e Animações

n        Para configurar controles veja em Controles da interface do usuário.

n        Veja em Aparência e Transformação, sobre Aparência.

n        Veja em Alteração de vários controles, para operações de troca de tags.

UId e Texto

Quando se cria um objeto ou um símbolo novo na tela, ele recebe um número que o identifica univocamente: O <Uid>. Este Uid pode ser rebatizado por um String qualquer, o que tem muita utilidade quando se necessita, por exemplo, escrever código de Script (CodeBehind) envolvendo o controle.

Como exemplo, apresenta-se um Botão usado na janela de Login. Este objeto teve o seu numero alterado para cmdSair, para facilitar seu entendimento dentro do código, conforme se pode ver na figura a seguir:

 

Text é a área onde se pode especificar uma legenda ou titulo para um controle que permita esta funcionalidade. Pode se especificar a Fonte, o tamanho e a cor do texto, além do texto propriamente.

A opção Localizable  deve ser marcada em caso de se estar utilizando dicionários de linguagens no projeto, e se desejar que este texto seja alterado de acordo com o dicionário.

Dinâmicas e Animações

 A área de configuração Dynamics permite que você configure as mudanças em tempo real na aparência de um objeto, sua posição, seu tamanho, suas cores, o valor mostrado pleo objeto, a ação que o objeto deve apresentar quando um usuário o clica, e outras coisas. Esse comportamento dinâmico é configurado através da criação de elos entre as propriedades do objeto e as propriedades das Tags ou outras propriedades em tempo de execução do projeto.

Em alguns sistemas, a denominação animação é usada para se referir a essas mudanças dinâmicas em tempo de execução. No Action.NET usa-se o termo Dynamics para distingui-las claramente dos recursos de animação fornecidos pelo WPF. As animações WPF também se referem a alterações nas propriedades gráficas dos objetos executando nos monitores, mas usando temporizadores e outros status de objetos para dirigir a animação, e não os valores da base de dados em tempo real.

Quando você clicar duas vezes em um objeto, ou pressionar o botão Dynamics, ou selecioná-lo no menu de contexto do botão direito, é apresentada uma lista das dinâmicas que podem ser aplicadas no objeto selecionado.

A Tabela 3 lista as dinâmicas disponíveis.

Tabela 3: Dinâmicas e Animações Configuração Descrição Action Executa ações e comandos acionados pela interface do usuário. Shine Altera a aparência objeto dinamicamente. TextIO Dinâmica de Entrada e saída de textos HyperLink Abre um hiperlink. Security Define as permissões do objeto para executar ações, em tempo de execução FillColor Muda dinamicamente a cor de preenchimento do objeto LineColor Muda dinamicamente a cor da linha do objeto TextColor Muda dinamicamente a cor de texto do objeto Bargraph Dinâmica de barra gráfica Visibility Altera dinamicamente a visibilidade e opacidade objeto. MoveDrag Move dinamicamente o objeto. Scale Muda dinamicamente o tamanho do objeto. Rotate Gira o objeto dinamicamente. Skew Distorce o objeto dinamicamente. TextOutput Cria a dinâmica de saída de texto.

Action Dynamic

Tabela 4: Configuração da dinâmica Action Configuração Descrição Action Executa a ação desencadeada pela interface do usuário. Event Escolha um dos eventos do mouse. Mais do que um evento pode ser selecionado para cada ação. Por exemplo: Uma ação para o evento MouseLeftButtonDown e outra ação para MouseLeftButtonUp. Action Selecione uma ação para o evento determinado: l        Nenhum - Nenhuma ação. l        SetValue - Define o valor do objeto. l        Object - O objeto que vai receber o valor. l        Valor - O valor que será passado para o objeto. l        ToggleValue - Alterna o valor do objeto. Se o valor atual do objecto é zero, o valor vai para 1. Se o valor atual do objecto é diferente de zero, o valor vai para 0. l        Object - O objeto que será alternado. l        OpenDisplay - Abre um display. l        Display- O nome da Tela que será aberta. l        CloseDisplay-Fecha um display. l         Display-O nome da Tela que será fechada. l        OpenLayout - Abre um layout. l        Layout - O nome do layout que será aberto. l        RunScript - Executa um script que deve ser colocado na aba Display> CodeBehind. Execute uma das seguintes ações: l        Digite o nome do novo método e clique Novo . l        Escolha um dos métodos existentes no comboBox. l        RunExpressions - Executa a expressão dada. l        Expressão - Digite a expressão. Por exemplo: Tag.a + 1, ou Tag.a + Tag.b ou Math.cos (Tag.angle) * Math.PI. l        Resultado (opcional) - Digite o tag ou a propriedade que irá receber o valor da expressão.

Exemplos de Run Expresssions:

l      Somar dois valores e passar o resultado para outra tag.

Expressão-Tag.quantity1 + Tag.quantity2.

Resultado-Tag.totalQuantity.

l      Incrementar um tag.

Expressão-tagCounter + 1.

Resultado-tagCounter.

l      Incrementar um tag (0 - 10).

Expressão- If (tagCounter <10, tagCounter + 1,0).

Resultado:-tagCounter.

 

Para mais informações, consulte Configurando Expressões.

Dinâmica de Brilho (Shine Dynamic)

Tabela 5: Configuração da dinamica de Brilho Configuração Descrição Shine Altera a aparência do objeto dinamicamente. IsMouseOver Digite um tag que receberá o OverValue ou o NotOverValue. OverValue O valor de IsMouseOver quando o mouse está sobre o objeto. NotOverValue O valor de IsMouseOver quando o mouse não está sobre o objeto. Mouse Over Appearance A aparência do objeto quando o mouse está sobre ele. l        Opacidade - A opacidade do objeto (0 = transparente, 1 = opaco). l        Scale - O tamanho do objeto (0.5 = metade, 1 = o mesmo tamanho, 1,5 = um ano e meio, 2 = dobro do tamanho). l        OuterGlow - Define a cor do OuterGlow, deve-se marcar a seleção para ativar ou desativar este efeito. l        TextColor - Define a cor do texto, deve-se marcar a seleção para ativar ou desativar este efeito. Mouse Not Over Appearance A aparência do objeto quando o mouse não está sobre ele: l        Opacidade - O opacidade do objeto(0 = transparente, 1 = opaco). l        Scale - O tamanho do objeto (0.5 = metade, 1 = o mesmo tamanho, 1,5 = um ano e meio, 2 = dobro do tamanho). Is Selected Appearance A aparência do objeto quando o mesmo está selecionado: l        IsSelected - Define se o objeto está selecionado l        Opacidade - O opacidade do objeto(0 = transparente, 1 = opaco). l        Scale - O tamanho do objeto (0.5 = metade, 1 = o mesmo tamanho, 1,5 = um ano e meio, 2 = dobro do tamanho). Scale Reference Centro Esquerda Para cima Para direita Para baixo

Dinâmica Text I/O

Tabela 6: Configuração da dinâmica Text I/O Configuração Descrição TextIO Dinamica de entrada e saida de texto. Se o texto é um valor de Tag ou uma propriedade, ele deve estar entre colchetes. Por exemplo: {Tag.analogInt1}. Binding Mode Associar um objeto com uma tag: l      TwoWay - Permite entrada e saída. l      InputOnly - Somente permite entrada de tetxo (o valor do tag atual não é mostrado, mas novos valores podem ser inseridos). l      OutputOnly - Somente saída de texto é permitida. Object or Expression Objeto (entrada) ou Expression (somente saida) que está conectada com a caixa de texto. DesignModeCaption O valor mostrado no modo de engenharia: l      • ShowObjectNames - O conteúdo do campo de texto é mostrado exatamente como ele é. l      • ShowPlaceHolders - São mostrados carcteres # # # , o número de caracteres é definida pelo campo MaxLength. Input Range Define o intervalo numérico para o valor inserido. MaxLength Define o número máximo de caracteres.

Dinamica de Hyperlink

Tabela 7: Configuração da dinâmica de Hyperlink Configuração Descrição HyperLink Abre um hyperlink. HyperLinkType Selecione o tipo de hyperlink: l      http l      ftp l      file l      mailto l      telnet Url Configurar o URL para abrir om hiperlink

 

 

Dinâmica de Security (Segurança)

Tabela 8: Configuração da Dinâmica Security Configuração Descrição Security Defina as permissões do objeto em tempo de execução: Disable Digite um Tag, uma propriedade, ou uma expressão que retorna um valor. Considerando o valor resultante: l      Zero - objeto será habilitado. l      Maior que zero - o objeto será desativado. Para mais informações, consulte Configurando Expressões. Verify Permissions Quando selecionado, apenas os grupos de permissões escolhidos, podem acessar o objeto. Confirm Message Mostra um diálogo de confirmação antes de tomar alguma ação: l      textBox - Digite a mensagem que irá aparecer na caixa de diálogo. l      checkBox - Ativa ou desativa a Confirmar Mensagem.

Dinâmica Fill, Line e Text Color

Tabela 9: Dinâmica Fill, Line e Cor de Texto Configuração Descrição FillColor Muda a cor de preenchimento do objeto dinamicamente. Expression O valor usado para a dinâmica FillColor. Change Color l      UsingLimits - A cor resultante é determinada quando o valor for igual ou superior a um dos limites. l      AbsoluteValue - A cor será o valor da expressão. O valor deve ser um nome válido de cor ou numero hexadecimal para cores. Por exemplo: "White" ou "# FFFFFFFF" Exemplo Limites: 1 - Red  10 - Blue  Quando o valor é 0, o objeto terá sua própria cor (a dinâmica de preenchimento cor não vai fazer nada) Quando o valor é de 1 a 9, o objeto terá a cor vermelha. Quando o valor é superior a 10, o objecto terá a cor azul.   LineColor Muda a cor da linha objeto dinamicamente:. Expression O valor usado para a dinâmica LineColor. Change Color l      UsingLimits - A cor resultante é determinada quando o valor for igual ou superior a um dos limites. l      AbsoluteValue - A cor será o valor da expressão. O valor deve ser um nome válido de cor ou numero hexadecimal para cores. Por exemplo: "White" ou "# FFFFFFFF" Exemplo Limites: 1 - Red  10 - Blue  Quando o valor é 0, o objeto terá sua própria cor (a dinamica de LineColor não vai fazer nada) Quando o valor é de 1 a 9, o objeto terá a cor vermelha. Quando o valor é superior a 10, o objecto terá a cor azul. TextColor Muda a cor do texto objeto dinamicamente:. Expression o valor usado para a dinâmica TextColor. Change Color l      UsingLimits - A cor resultante é determinada quando o valor for igual ou superior a um dos limites. l      AbsoluteValue - A cor será o valor da expressão. O valor deve ser um nome válido de cor ou numero hexadecimal para cores. Por exemplo: "White" ou "# FFFFFFFF" Exemplo Limites: 1 - Red  10 - Blue  Quando o valor é 0, o objeto terá sua própria cor (a dinamica de TextColor não vai fazer nada) Quando o valor é de 1 a 9, o objeto terá a cor vermelha. Quando o valor é superior a 10, o objecto terá a cor azul.

Dinâmica Bargraph

Tabela 10: Configuração da Dinâmica Bargraph Configuração Descrição Bargraph Dinâmica de gráfico de barras Expression o valor usado para a dinâmica de gráfico de barras. Value Range Os valores mínimos e máximos que correspondem ao percentual de preenchimento máximo e mínimo. Fill (%) O percentual mínimo e máximo de preenchimento. da barra gráfica Bar Color A cor do gráfico de barras. Orientation A orientação do gráfico de barras: para cima centro horizontal para baixo para a direita centro vertical para a esquerda

Dinâmica Visibility

Tabela 11: Configuração da Dinâmica Visibility Configuração Descrição Visibility Altera dinamicamente a visibilidade e opacidade do objeto Visible Digite um tag, uma propriedade, ou uma expressão que retorne um valor. Considerando-se o valor resultante: l      Zero - Objeto será visível. l      Maior que zero - Objeto serão ocultado. Para mais informações, consulte Configurando Expressões. Tooltip Um texto que será exibido como uma dica de ferramenta Opacity Opacidade l      ObjectValue - O valor usado para definir a opacidade. l      Range - Os valores mínimos e máximos que correspondem ao máximo e mínimo. de opacidade. l      Opacidade - A mínima e máxima opacidade (0 - invisível, 0,5 - um pouco transparente, 1 - opaco).

Dinâmica MoveDrag

Tabela 12: Configuração da Dinâmica MoveDrag Configuração Descrição MoveDrag Movimenta dinamicamente o objeto BindingMode l       TwoWay - Entrada e saída causam movimentação l      InputOnly - Apenas entrada causa movimento. O objeto não se move quando o valor do objeto muda. l      OutputOnly - Apenas saída causa movimento. O objeto não se move com interação do usuário. Horizontal Move l      Expressão com a referência para movimento horizontal l      Range - Os valores mínimos e máximos que correspondem à posições horizontais mínima e máxima. l      Posição - As posições horizontais mínima e máxima Vertical Move l      Expressão com a referência para movimento vertical l      Range - Os valores mínimos e máximos que correspondem à posições verticais mínima e máxima. l      Posição - As posições verticais mínima e máxima

Dinâmica Scale

Tabela 13: Configuração da Dinâmica Scale Setting Descrição Scale Muda o tamanho do objeto dinamicamente. Width Scale l      Expressão - o valor usado para a escala de largura. l      Range - Os valores mínimos e máximos que correspondem aos percentuais minimo e máximo da largura de escala l      Escala (%) - O percentual mínimo e máximo de largura de escala. Height Scale l      Expressão - o valor usado para a escala de altura l      Range - Os valores mínimos e máximos que correspondem aos percentuais minimo e máximo da altura de escala l      Escala (%) - O percentual mínimo e máximo de altura de escala. Scale Reference: Centro Esquerda Para cima Direita Para baixo

Dinâmica Rotate

Tabela 14: Configuração da Dinâmica Rotate Configuração Descrição Rotate Gira o objeto dinamicamente. Expression o valor utilizado para a rotação. Value Range Os valores mínimos e máximos que correspondem ao ângulo máximo e mínimo de rotação. Por exemplo: de 0 a 100 Angle O ângulo mínimo e máximo de rotação. Por exemplo: 0-360 Center Reference Centro Esquerda Para cima Direita Para baixo

Dinâmica Skew

Tabela 15: Configuração da Dinâmica Skew Configuração Descrição Skew Distorce o objeto dinamicamente. X-axis Skew l      ObjectValue - o valor usado para a inclinação do eixo-X. l      Range - Os valores máximo e mínimo que corresponde ao ângulos de desvio máximo e mínimo do eixo X. Por exemplo: de 0 a 100. l      Skew (º) - O mínimo e o máximo ângulo de desvio do eixo X. Por exemplo: de 0 a 180 º. Y axis skew l      ObjectValue - o valor usado para a inclinação do eixo-Y. l      Range - Os valores máximo e mínimo que corresponde ao ângulos de desvio máximo e mínimo do eixo Y. Por exemplo: de 0 a 100. l      Skew (º) - O mínimo e o máximo ângulo de desvio do eixo Y. Por exemplo: de 0 a 180 º. Skew Reference Centro Esquerda Para cima Direita Para baixo

Dinâmica TextOutput

Tabela 16: Configuração da Dinâmica TextOuput Configuração Descrição TextOutput Dinâmica de saída de texto. Expression Indica o texto que será mostrado no objeto. Localizable Indica se o texto deve ser traduzido quando o dicionário muda. DesignModeCaption O valor mostrado no modo de design: l      ShowObjectNames-O conteúdo do campo de texto é mostrado exatamente como ele é. l      ShowPlaceHolders - São mostrados os caracteres # # #, o número de caracteres é definido pelo campo MaxLength Define o número máximo de caracteres.

Controles da interface do usuário

n        Para escolher componentes externos WPF (alguns já disponíveis no produto) veja Configurando componentes WPF.

n        Para configurar uma janela de alarme, consulte Configurando uma Janela de Alarmes

n        Para configurar uma janela de tendência da versão an-2012.1, consulte Configurando a Janela de Tendência (Legacy).

n        Para configurar uma janela de tendência utilizada a partir da versão an-2014.2, consulte Configurando a Janela de Tendência .

n        Para configurar um DataGridWindow, consulte Configurando uma Janela DataGrid.

Configurando componentes WPF

Na barra de ferramentas vertical em Edit>Draw, uma das opções é a escolha de Componentes WPF, que podem ser instalados para o uso na confecção de telas.

Quando se escolhe o ícone com a pasta , abre-se uma janela mostrando todos os componentes, que já são distribuídos com o Action.NET. Para criar uma instancia sobre a tela atualmente sendo editada, basta clicar (selecionar) o componente desejado e fechar a janela clicando o botão Ok. 

A figura mostra esta janela de seleção de componentes WPF.

As seções seguintes apresentam instruções para a configuração de alguns componentes WPF, já distribuídos.

n        Para configurar um painel circular, veja Configurando um painel circular

n        Para configurar um gráfico de pizza, Configurando um Gráfico de Pizza

n        Para configurar um gráfico de barras, consulte Configurando um Gráfico de Barras (BarChart).

Configurando um painel circular

Dê um duplo clique em um objeto painel circular na tela para configurá-lo. a Tabela 17 descreve a configuração do painel Circular.

Tabela 17: Configuração de Painel Circular Campo Descrição Control Name Define um nome para o controle, desta forma ele poderá ser acessado no script CodeBehind. Ver Code Behind - Scripts de Telas. Columns Para cada valor que você deseja incluir, selecione uma seção e configure as definições, à direita da lista , que estão descritas a seguir. O painel exibe uma seção para cada coluna. Image Escolha em Resources uma imagem para exibir. Preview Somente leitura. Exibição de imagem selecionada.

Configurando um Gráfico de Pizza

Dê um duplo clique em um objeto PieChart na tela para configurá-lo. A Tabela 18 descreve a configuração de gráfico de pizza.

Tabela 18: Configuração de gráfico de Pizza Campo Descrição Control Name Define um nome para o controle, então ele pode ser acessado no script CodeBehind. Ver Code Behind - Scripts de Telas. ChartType Selecione o tipo de gráfico. Data Items Para cada valor que você deseja incluir, selecione uma seção e configure as definições, ao lado direito da lista, que estão descritas a seguir.. O gráfico mostra uma seção para cada item de dados.. FieldName Digite um nome para o item de dados. LinkedValue Digite um nome de tag como fonte de dados para o item de dados. Brush Clique para selecionar a cor para o item de dados.

Configurando um Gráfico de Barras (BarChart)

Dê um duplo clique em um objeto BarChart na tela para configurá-lo. A Tabela 19 descreve a configuração de gráfico de barras.

Tabela 19: Configuração de Gráfico de Barras Campo Descrição Control Name Defina um nome para o controle, para que ele possa ser acessado no script CodeBehind. Ver Code Behind - Scripts de Telas Type Selecione o tipo de gráfico. Data Source Entre o nome do Dataset Table ou query para usar para o gráfico. Grid Lines Clique para selecionar a cor das linhas de grade. Window Clique para selecionar a cor para o fundo da janela com o gráfico. Labels Clique para selecionar a cor para os rótulos. Show Horizontal Labels 45° Selecione para mostrar os rótulos do eixo horizontal em angulo de 45°. Show value over bar Selecione para exibir o valor da barra acima da barra. Data Items Para cada coluna, existente na fonte de dados, que você deseja incluir, marque uma barra e configure as definições ao lado direito da lista, que estão descritas a seguir. O gráfico exibe uma barra para cada linha de definição. FieldValue Nome da coluna no banco de dados. Min. Digite uma tag para definir o valor mínimo. Max. Digite uma tag para definir o valor máximo Brush Clique para selecionar a cor para o item de dados.

Configurando uma Janela de Alarmes

Dê um duplo clique em um objeto Janela de Alarme em uma tela para configurá-lo. A Tabela 20 descreve a configuração da janela de alarme.

Tabela 20: Configuração da Janela de Alarmes Campo Descrição Control Name Defina um nome para o controle, para que ele possa ser acessado no script do CodeBehind. Ver Code Behind - Scripts de Telas.. MaxLines O número máximo de linhas exibidos na janela. List Selecione o tipo de alarmes que serão exibidos na janela: l      OnlineAlarms - Exibe apenas os alarmes ativos. Os Alarmes são exibidos somente enquanto o item de alarme está no estado de alarme. l      AlarmHistory - Exibe somente alarmes passados. l      Events - Mostra apenas os SystemEvents ( Edit> Alarms> Groups ). l      AlarmHistory + Events - Exibe alarmes passados e SystemEvents Merge Hi and HiHi Lines Combinar alarmes configurados como Hi e HiHi em uma única linha.   History Interval/To Introduza as datas de início e fim do intervalo para o qual os alarmes devem ser incluídos. Show Column Titles Selecione para exibir os títulos das colunas.   Ack by Page Digite um nome de tag, que quando disparado, reconhece os alarmes na janela de alarmes. Show Group Control, Label Digite o texto a ser exibido acima dos títulos das colunas. AllowSort Selecione para permitir que usuários classifiquem os dados por coluna. Allow Column Reorder Selecione para permitir que os usuários alterem a ordem das colunas.   Filter Digite uma consulta SQL para limitar os alarmes exibidos. Refresh Digite um nome de tag que irá desencadear uma atualização dos dados de alarme. Display Millisecond Selecione para incluir milissegundos na hora do alarme. Ack Selected Line Configure definições para reconhecer um alarme. Columns Para cada coluna na lista de colunas , selecione a coluna e configure as definições ao lado direito da lista, que estão descritas a seguir Visible Selecione esta opção para a coluna ser exibida na janela de alarme. Allow Filter Selecione a opção para que os usuários possam filtrar nesta coluna Show in Column Chooser Selecione para incluir a coluna no seletor de colunas, o que permite aos usuários selecionar, em tempo de execução as colunas a serem mostradas Title Digite o texto para o título da coluna. Width Digite a largura da coluna inicial, em unidades do WPF (pixels independentes de monitor). Sort Escolha como ordenar inicialmente por esta coluna.

Configurando a Janela de Tendência (Legacy)

Dê um duplo clique em um objeto Janela de Tendência na tela para configurá-lo. A Tabela 21 descreve a configuração da janela de tendência.

 

AVISO - Este controle foi substituído pelo apresentado no próximo item. Não recomendados sua utilização em novos projetos.

Tabela 21: Configuração da Janela Tendência (Legacy) Campo Descrição Control Name Defina um nome para o controle, para que ele possa ser acessado no script do CodeBehind. Ver Code Behind - Scripts de Telas.. 0(online) 1(history) 0 - o controle mostra os dados em tempo real (on-line.) 1 - o controle mostra os dados do histórico. Por exemplo: Tag.onLineHist. OnlineTrigger A taxa de atualização do controle de tendência online. Por exemplo, 00:00:01 ou {Tag.trendTimeSpan}. HistoryDateTime O ponto inicial para o controle histórico tendência. Por exemplo, {Tag.initialTrendHistory}. Max Samples Define o número máximo de amostras que serão coletadas do banco de dados. Window Define a cor de fundo do controle de tendência. Labels Definir a cor dos rótulos do controle de tendência Cursor Enable Ativar (marcado) ou desativar (desmarcado) a exibição do cursor vertical. CursorPosition (%) Indica a posição do cursor, onde 0 significa posição inicial e 100 significa posição final. Por exemplo: Tag.cursorPos. Cursor Output Indica o valor do eixo X para a posição atual do cursor. Por exemplo, Tag.cursorOut. Cursor Color Define a cor do cursor. Pens Legend Define a posição do quadro de legenda das penas no controlo de tendência. Y Axis   Range Define os valores mínimo e máximo para o eixo Y. Labels Define a quantidade de linhas de grade horizontais. Format O formato dos valores do eixo Y. Para os formatos numéricos válidos, consulte Formatos de Tags. Por exemplo, N1 (número com uma casa decimal). X Axis   Interval Define o intervalo de tempo do eixo-X. Labels Define a quantidade de linhas de grade verticais Format O formato do eixo X é definido por dois campos: formato da primeira linha e formato de segunda linha. Isto é especialmente útil para definir etiquetas para marcas que requerem duas linhas de informação. Para formatos válidos de data e hora consulte Formatos de Tags. Por exemplo, t (tempo) para o formato da primeira linha, d (data abreviada) para o formato da segunda linha. Pens   Visible Mostra (1) ou oculta (0) a pena selecionada. Ex 1 ou {showPen1}. Tag Define a Tag que irá fornecer o valor para a pena Min Minimo valor da escala linear para o valor da tag, de acordo com o intervalo do eixo Y. Max Máximo valor da escala linear para o valor da tag, de acordo com o intervalo do eixo X. Pen Escolhe o modelo, a cor, e a espessura da linha da caneta. Mark Define o formato da marca para cada ponto da linha de tendência. CursorValue Definir a tag que vai receber o valor real do eixo Y, de acordo com a posição do cursor. Por exemplo: Tag.pen1CursorValue. FieldName Define o nome da pena.

Usando a escala no eixo Y

Considerando-se:

Eixo Y Min = 0;

Eixo Y Max = 100;

O controle de tendência permite que muitas penas sejam exibidas juntas. Quando suas penas não tem a mesma escala, você pode usar as dicas abaixo para ajustar seus dados no mesmo gráfico, para melhor visualização:

n        Se uma pena tem uma escala mais baixa, de 0 a 1, por exemplo, você pode definir a propriedade Max da pena em 1, assim quando o valor real do Tag for 1, o valor 100 será exibido no gráfico. (escala 100/1).

n        Se uma pena tem uma escala maior, de 0 a 1000, por exemplo, você pode definir a propriedade Max da pena para 1000, assim quando o valor real do Tag for 1000, o valor 100 será exibido no gráfico. (Escala 1/10).

Configurando a Janela de Tendência

NOTA - As informações deste item se referem a um novo objeto Tendencia Gráfica disponibilizado a partir da versão an-2014.2.

Este objeto tendência gráfica é escolhido com o simbolo ;

Dê um duplo clique em um objeto Janela de Tendência na tela para configurá-lo. A Tabela 22 descreve a configuração da janela de tendência.

Tabela 22: Configuração da Janela Tendência Campo Descrição Control Name Defina um nome para o controle, para que ele possa ser acessado no script do CodeBehind. Ver Code Behind - Scripts de Telas.. Bind to Tag Escolha no botão uma propriedade de um objeto para que a configuração deste objeto tendência seja salva nesta propriedade.. Bind Pens to tag Escolha no botão uma propriedade de um objeto na qual os valores das penas serão salvos. Orientation Pode-se escolher a orientação do gráfico: Horizontal; Vertical de cima para baixo ou Vertical de baixo para cima. Window Define a cor de fundo do controle de tendência. Labels Definir a cor dos rótulos do controle de tendência Grid Lines Definir a cor das linhas de grade do gráfico Grid Lines Stroke Define o formato das linhas de grade, cheia, tracejada, etc. e sua espessura. Cursor Settings Pressione o botão “Settings” para definir até dois cursores para o gráfico. Um primário e um secundário. Para cada um deles pode ser definido: se Habilitado ou não, a cor e forma da linha, uma legenda (Tooltip), e se devem ou não ser mostrados junto com o cursor os valores atuais das grandezas em x e y. Mouse Actions Marque esta opção se desejar receber notificações de acordo com as ações do mouse. Marker tooltips Marque esta opção se deseja que seam mostradas tooltips nas marcas de pontos. Y Axis   Y scale for each pen Marque esta opção se desejar atribuir escalas própria para cada pena. Neste caso o “Range” será definido na tabela de penas aabixo. Y Range Define os valores mínimo e máximo para o eixo Y. Labels Define a quantidade de linhas de grade horizontais. Format O formato dos valores do eixo Y. Para os formatos numéricos válidos, consulte Formatos de Tags. Por exemplo, N1 (número com uma casa decimal). Stack Y scales Marque esta opção para que as escalas apareçam verticalmente uma sobre a outra. Se não marcar as escalas apareceram lado a lado. Merge similar Y scales Marque para que se as escalas forem similares somente mostrar uma delas. Legend Define a posição do quadro de legenda das penas no controle de tendência.     X Axis   Duration Define o intervalo de tempo do eixo-X. Escolha esta opção se o eixo X é de tempo XY Chart Escolha esta opção se o eixo X não é de tempo. Neste caso defina os valores mínimo e máximo para o eixo X. Labels Define a quantidade de linhas de grade verticais Format O formato do eixo X é definido por dois campos: formato da primeira linha e formato de segunda linha. Isto é especialmente útil para definir etiquetas para marcas que requerem duas linhas de informação. Para formatos válidos de data e hora consulte Formatos de Tags. Por exemplo, t (tempo) para o formato da primeira linha, d (data abreviada) para o formato da segunda linha. Navigation controls Marque esta opção se deseja que apareça, abaixo do eixo X ícones para o controle de navegação do gráfico: Aumentar (Zoom in), diminuir( Zoom out) , deslocar para a esquerda, deslocar para a direita, resetar valores e ocupar toda a tela. Pens  Os botões permitem, adicionar nova pena, excluir uma pena e ainda alterar a ordem das linhas com definição de penas. Para cada linha os dados a seguir devem ser definidos. TagName Define a Tag que irá fornecer o valor para a pena PenSettings Clicando na célula aparece janela para definições de cor e formato da linha, se preenchimento abaixo da linha, e símbolos sobre os pontos. MinValue Minimo valor da escala linear para o valor da tag, de acordo com o intervalo do eixo Y. MaxValue Máximo valor da escala linear para o valor da tag, de acordo com o intervalo do eixo X. Pen Label Rótulo com o titulo para a pena. Auto Marcando esta célula, o range será automático, de acordo com os valores apresentados.

Usando a escala no eixo Y

Considerando-se:

Eixo Y Min = 0;

Eixo Y Max = 100;

O controle de tendência permite que muitas penas sejam exibidas juntas. Quando suas penas não tem a mesma escala, você pode usar as dicas abaixo para ajustar seus dados no mesmo gráfico, para melhor visualização:

n        Se uma pena tem uma escala mais baixa, de 0 a 1, por exemplo, você pode definir a propriedade Max da pena em 1, assim quando o valor real do Tag for 1, o valor 100 será exibido no gráfico. (escala 100/1).

n        Se uma pena tem uma escala maior, de 0 a 1000, por exemplo, você pode definir a propriedade Max da pena para 1000, assim quando o valor real do Tag for 1000, o valor 100 será exibido no gráfico. (Escala 1/10).

Configurando uma Janela DataGrid

Dê um duplo clique em um objeto janela DataGrid sobre uma tela para configurá-lo. A Tabela 23 descreve a configuração da janela DataGrid. Campos críticos que você deve configurar são mostrados com um *.

   

Tabela 23: Configuração de uma janela DataGrid Campo Descrição Control Name Defina um nome para o controle, para que ele possa ser acessado no script do CodeBehind. Ver Code Behind - Scripts de Telas. Data Source Entre o nome do Dataset Table ou query para usar na janela SelectedValues Digite um tag ou matriz de tags para receber o conteúdo da linha selecionada. SelectedIndex Digite um tag para receber o número da linha atualmente selecionada. A numeração de linhas começa com 0. LinesCount Selecione um tag para receber o número de linhas na janela. Theme Selecione o tema para a janela. BindindMode Escolha o modo de ligação entre dados e tabela que deva ser utilizado. Veja em http://msdn.microsoft.com/en-us/library/system.windows.data.bindingmode.aspx. AllowInsert Selecione para que os usuários possam adicionar linhas. Show Group Control, Label Digite o texto a ser exibido nos títulos das colunas.   Show Column Titles Selecione para exibir os títulos das colunas. AllowSort Selecione para permitir que usuários classifiquem os dados por coluna. Auto Create Column l      Selecione para que o sistema automaticamente inclua na janela todas as colunas da tabela fonte. Se selecionado, você não tem que configurar todas as colunas com as opções abaixo.. Para personalizar colunas específicas, adicione a coluna na lista de colunas e defina as configurações do lado direito, descritas abaixo. l      Desmarque esta opção para configurar manualmente cada coluna que você deseja incluir na lista usando as configurações do lado direito, descritas abaixo. Filter Digite uma consulta SQL para limitar os dados exibidos. Refresh Digite um nome de Tag que irá disparar uma atualização dos dados. Columns Para personalizar colunas específicas, adicione a coluna na lista de colunas e defina as configurações do lado direito, descritas abaixo. Visible Selecione para que a coluna seja exibida na janela do DataGrid Editable Selecione para permitir que os usuários edite a coluna. Show in Column Chooser Selecione para incluir a coluna no seletor de colunas, o que permite aos usuários selecionar as colunas a serem mostradas. FieldName Digite um nome para a coluna. FieldType Selecione o tipo de dados da coluna. Title Digite um texto para o cabeçalho da coluna. Width Digite a largura da coluna inicial, em unidades do WPF (pixels independentes de monitor). Sort Escolha como ordenar inicialmente a coluna.

Aparência e Transformação

Estas definições podem ser feitas para controles sobre uma tela. Definem a aparência de um controle e uma maneira de girar ou de distorcer.

Appearance

Fill - Ao clicar no quadrinho, aparece uma janela de   escolha do pincel para preenchimento do controle, que inclui, cores, gradientes e textura. Se preferir usar uma imagem para o preenchimento, nesta janela há um botão Image que permite a escolha de imagens e sua configuração.

Line - Aparece a mesma janela, acima descrita, para a escolha da linha de contorno do controle.

Stroke - Clicando na figura, aparece uma janela para escolha do “Stroke”, isto é formato da linha, po cheia, pontilhada, tracejada, etc.

Opacity - Determina a opacidade do fundo do controle, numero fracionário entre 0 e 1. 0 é transparente e 1 é opaco.

Transform

A seta define rotação do controle. Escolha o angulo de rotação na régua abaixo.

 

O ícone define distorção do controle. Escolha ângulos de distorção nos eixos X e Y do plano da tela

 

Alteração de vários controles

A funcionalidade de Replace é oferecida quando se seleciona vários controles em uma Tela.

Se você deseja fazer a alteração de um conjunto de tags ou textos existentes em uma tela, Selecione todos eles e utilize a funcionalidade Replace, conforme mostrado nas duas figuras abaixo.

1.      A figura abaixo mostra seleção de diversos objetos:

2.      Ao pressionar a opção Tags, são mostrados os tags usados nestes controles. Se alterarmos os tags da direita, eles serão sobrepostos na tela pelos seus correspondentes da esquerda.

n        No caso de textos, todos os Strings usados nos objetos selecionados serão apresentados em forma semelhante à apresentada acima, para serem alterados.

Gerenciando Imagens e Símbolos

O Action.NET dispõe de poderosos recursos para melhorar a produtividade na criação de interfaces gráficas nas aplicações. As ferramentas de desenho permitem que você gerencie facilmente símbolos, arquivos de imagem, importação de objetos a partir de uma galeria de 5.000 objetos, além de criação dos seus próprios símbolos, com propriedades dinâmicas e mapeamento entre símbolos e templates para sua representação padrão na interface gráfica.

Existem três principais repositórios de componentes reutilizáveis, as imagens, a biblioteca Symbol Factory, e a galeria de Símbolos Locais. Detalhando melhor cada uma destas fontes, a seguir.

Imagens: Usado para inserir um arquivo de imagem externa do seu computador para a configuração do projeto, como um ícone, papel de parede, objeto ou imagem de fundo. Pode-se gerenciar as imagens importadas em Edit>Display>Resources. Depois que a imagem é importada, você não precisa mais do arquivo original, pois ela é incorporada ao arquivo do projeto. As imagens podem ser utilizadas para qualquer objeto de desenho, até como "cor" ou para os atributos da dinâmica colorfill.

Symbol Factory: Esta é uma extensa biblioteca de figuras, com mais de 5000 símbolos, todos criados usando a técnica de gráfico vetorial, que você pode usar para criar suas telas ou usar como modelos para criar os seus próprios símbolos personalizados. Estes objetos podem ser aplicado de modo estático, como uma imagem ou ícone, ou pode ser adicionado à dinâmicas e guardados na biblioteca de símbolos locais.

Símbolos Locais: Os símbolos locais são os símbolos usados com mais frequência, e incluem os símbolos criados no âmbito de um projeto. Os símbolos nesta biblioteca podem ser mantidos sincronizados com a biblioteca, desse modo, ao alterar um símbolo nesta biblioteca, esta alteração será automaticamente aplicada a todas as telas que utilizam o símbolo. O símbolo local também pode ter propriedades dinâmicas que podem ser facilmente mapeadas para Tags em telas; Estes símbolos podem também ser definidos como sendo a representação gráfica padrão de Tags.

Nesta seção são descritas estas possibilidades e a maneira de usá-las:

n        Recursos de imagens

n        Gerenciando Símbolos Locais

n        A biblioteca Symbol Factory

n        Ligação automática entre tags e símbolos

n        Organizando a Biblioteca de símbolos

Recursos de imagens

Você deve importar todas as imagens que você deseja usar em suas telas ou relatórios através da aba Recursos no ambiente Displays. Isso cria um repositório de imagens para a aplicação.

Se você precisar atualizar uma imagem com uma nova versão, você pode substituí-la, e ele vai ser atualizada em todos os locais da aplicação em que estiver sendo utilizada. Certifique-se de manter o mesmo nome do recurso, quando fizer troca de imagens.

Você pode usar qualquer arquivo de imagem para preencher ou pintar um objeto ao criar telas em Draw> Drawing .

Você pode importar os seguintes tipos de arquivo:

n        . bmp

n        . gif

n        . ico

n        . jpg

n        . png

n        . tiff

n        . wdp

Para gerenciar recursos:

1.      Vá para Edit> Displays> Resources.

2.      Clique Import Images.

3.      Navegue nos diretórios até onde estão as imagens que você deseja importar.

4.      Selecione os arquivos de imagem e clique em Open.

5.      Em cada linha, digite ou selecione as informações, conforme necessário.

Coluna Descrição Name Edite o nome padrão para um nome descritivo. Description Digite uma descrição desta imagem.

Para adicionar uma imagem à um Display (tela):

1.      Vá para o ambiente de Desenho (Draw) e clique no ícone Insert Image Resource.

2.      Uma nova janela será aberta. Clique no botão Import File.

3.      A nova imagem se tornará o preenchimento de um novo retângulo. Clique em Fill do objeto retângulo para alterar configurações da imagem. A imagem também será incluída na biblioteca de imagens da mesma forma que o explicado no item anterior.

4.      Pode-se mudar de Stretch  to None, Fill ou UniformTofill.  Pode-se também visualizar todos os objetos que estão no projeto e altera entre eles usando o botão Select Resource  ou apenas clicando na imagem na barra de ferramentas superior.

Dica:  Tipicamente deveria ser utilizado UNIFORM ou FILL para o esticamento de imagens. A imagem (utilizando o Appearance menu da esquerda) pode ser aplicada a qualquer objeto de forma gráfica colocado nas telas.

Gerenciando Símbolos Locais

A biblioteca de símbolos vem com uma série de imagens gráficas que você pode usar. Você também pode criar símbolos para adicionar à biblioteca local do projeto. Os símbolos podem ser apenas um gráfico estático ou um gráfico incluindo e a configuração de uma dinâmica, e até a ligação a Tags.

Para visualizar símbolos:

1.      Siga uma das seguintes opções:

n        Para ver apenas os símbolos utilizados neste projeto, vá para Draw > Symbols.

n        Para ver todos os símbolos disponíveis, vá para Draw > Drawing e clique em Open Symbol Library.

2.      Para salvar um símbolo como um arquivo de imagem, selecione a linha e clique em Save to Image.

Criando novos símbolos

Pode-se usar as ferramentas de desenho e os comandos COMBINE na barra de ferramentas horizontal para desenhar os seus próprios símbolos.

Também se pode trazer símbolos da Symbol Factory e clicar no comando Desagrupar na barra de ferramentas horizontal, a fim de editar os componentes dos símbolos importados. Pode-se também usar o cursor Seleção direta para editar elementos internos sem a necessidade de desagrupar.

Para salvar o novo símbolo para a biblioteca de Símbolos Locais, basta selecionar o objeto ou objetos que desejar sejam partes do símbolo, em seguida, clicar com o botão direito e selecione Make New Symbol.

Para adicionar um símbolo na biblioteca:

1.      Vá para Draw > Drawing.

2.      Desenhe o objeto que você deseja tornar-se um símbolo.

3.      Selecione todo o objeto e clique com o botão direito.

4.      Selecione Make New Symbol.

5.      Digite o nome do símbolo e da pasta (subdivisão da biblioteca) em que quer que o símbolo seja guardado.

6.      A partir daí, pode-se pressionar o ícone da barra vertical no DRAW, para pegar símbolos, e usá-los em qualquer outra tela.

Os componentes na biblioteca de Símbolos Locais podem ter embutidos propriedades de dinâmicas e uma maneira fácil de mapeá-los para Tags em tempo de execução na aplicação.

Se você tiver propriedades e dinâmicas para tags sendo usados nesse símbolo, o sistema criará automaticamente os parâmetros de rótulo do Símbolo. Depois de fazer o novo símbolo, dê um duplo clique nele para verificar os seus parâmetros de configuração.

NOTA - Para editar um símbolo que já está na biblioteca de Símbolos Locais, insira um símbolo em uma tela, clique com o botão direito do mouse sobre o símbolo, e selecione Edit Symbol, o que vai alterar a ferramenta de desenho, desabilitando os outros elementos da tela, de forma que possa alterar o símbolo sem causar mudanças em outros elementos. Quando terminar a edição, clique com o botão direito em qualquer posição para selecionar menu onde pode-se escolher salvar na biblioteca, salvar apenas nesta tela ou cancelar esta edição.

Os objetos de "símbolos locais" são compostos por alguns símbolos padrão do arquivo SymbolLibrary.tproj, adicionado com a instalação do produto, e os símbolos que você criou para seu projeto específico. Se você alterar, excluir ou inserir um símbolo na SymbolLibrary.Tproj, será acessível a todos os projetos que forem editados neste computador. Os símbolos que você está usando em seu projeto são salvos dentro do arquivo de projeto, portanto, completamente independente de qualquer arquivo externo.

Inserindo símbolos em uma tela

Para inserir um Símbolo Local em uma tela:

1.      Vá para o ambiente DRAW, clique com o botão direito do mouse em qualquer lugar da tela e selecione Insert Symbol; alternativamente pode-se clicar no ícone Insert Symbol na barra de ferramentas vertical.

2.      Aparece uma janela com todos os símbolos disponíveis no projeto. No lado esquerdo da janela uma lista com os Folders (agrupamentos de símbolos). No lado direito são mostrados os símbolos pertencentes ao Folder selecionado.

 

3.      Depois de selecionar o Folder e o símbolo, clique no símbolo e, em seguida, clique na tela para posicionar o símbolo, você também pode arrastar e soltar os símbolos para a tela. Se você clicar duas vezes em um símbolo, será fechada a janela da biblioteca, permitindo que você insira o objeto selecionado.

4.      Dê um clique duplo sobre o símbolo para ver suas propriedades de tempo de execução e o mapa de tags utilizados por ele. Cada tag utilizado tem um Label,  que poderá ser utilizado nos scripts (code behind) para referenciar o tag correspondente. Veja a janela da Configuração do Símbolo na figura a baixo. Em Value está o tag a ser usado.

DICA - Alguns símbolos não têm parâmetros personalizados, neste caso, o duplo clique irá mostrar a janela de Dynamics.

Parâmetros do Símbolo

Quando você insere um símbolo a partir da biblioteca de Símbolos Locais, este pode conter alguns parâmetros, como no exemplo da seccionadora acima. Neste caso os parâmetros são LevelValue, MaxScale e MinScale. Para alterar as Tags ligadas a esses parâmetros, basta editar os novos nomes de tag na caixa de diálogo.

Editando e modificando símbolos

Clique com o botão direito do mouse sobre o símbolo VerticalTank e selecione Editar Símbolo. Agora você entra no modo de edição, você pode ver todos os objetos que fazem parte do Tanque Vertical.

 

Clique agora no retângulo preto para ver suas propriedades de Dinâmicas.

 

Observe-se que foi utilizada a sintaxe #<PropertyName>:TagName.

Esta sintaxe vai criar parâmetros de rótulos expostos, o que torna mais fácil para mapear os Labels ligados aos Tags ao usar o símbolo. Nestes exemplos, o símbolo tem a rótulos "Nível", "MinScale" e "MaxScale". Quando se insere esse símbolo, é possível de definir valores para esses parâmetros. Após o caractere ":", você tem o valor  default para o rótulo.padrão.

Exemplo: "#LevelValue: Client.SimulationAnalog", estará criando uma propriedade chamada "LevelValue", que tem "Client.SimulationAnalog" como o valor padrão.

Você pode usar qualquer nome para o parâmetro Label.

Dica: Ao criar símbolos, é útil mapear inicialmente as propriedades para client.SimulationDigital, Client.SimulationAnalog ou Client.SimulationDouble, que são variáveis ​​com valores mudando a cada segundo que permitem mostar o resultado de suas propriedades dinâmicas. Você pode usar as variáveis ​​internas Client.DigitalValue, Client.NumericValue e Client.TextValue, quando você quer apenas quer colocar um valor de espaço reservado, sem simulação embutido.

A fim de salvar o símbolo, clique com o botão direito do mouse sobre o símbolo ou na tela e pressione Salvar para biblioteca de símbolos, ou clique no ícone Salvar na barra de ferramentas superior. Dê um clique duplo sobre o símbolo para verificar a suas propriedades.

A biblioteca Symbol Factory

Os símbolos da biblioteca Symbol Factory são gráficos vetoriais eficientes e muito bem desenhados.  Se você precisa de um objeto como uma bomba, válvula ou da maioria de figuras que precisar utilizar em seus aplicativos, basta abrir esta biblioteca, e navegar para o elemento  gráfico desejado, ou procurar por nomes de objetos.

A diferença entre os símbolos da Symbol Factory e os Símbolos Locais é que os primeiros, depois de incluídos em uma tela, passam a fazer parte da mesma não tendo mais qualquer conexão com a biblioteca. No caso dos Símbolos Locais estes podem manter uma ligação ativa com a biblioteca e também podem ter propriedades dinâmicas.

Para inclui um símbolo da Symbol Factory em uma tela:

1.      Vá para o ambiente DRAW, em seguida, clique no ícone da Symbol Factory na barra de ferramentas vertical.

2.      Depois de clicar neste ícone será aberto o aplicativo Symbol Factory;

3.      Para inserir um símbolo, basta escolher uma categoria e após o símbolo. Clique, então, duas vezes no símbolo e clique em qualquer lugar na tela.

Adicionando animação de cores para elementos da Symbol Factory

Se você deseja inserir animação por mudança de cor, sem mudar nada no símbolo, você pode copiar o símbolo e sobrepor uma imagem transparente em cima da imagem do simbolo.

Por exemplo, a seguir são mostradas duas bombas. Pode-se criar uma animação simples que mostra quando a bomba está ON ou OFF.

Para inserir animação ON OFF siga estes passos:

1.      Primeiro faça uma cópia do objeto, selecione o símbolo e clique em Ctrl + D para duplicá-lo (pode-se também selecionar o símbolo, mantendo pressionada a tecla CTRL e arrastando o objeto, ou ainda você pode copiar / colar).

2.      Em seguida, selecione a segunda bomba e clique no botão União na barra de ferramentas horizontal.

3.      Com esta nova bomba, localize a propriedade OPACITY no painel esquerdo, selecione uma opacidade 0,2-0,5, de acordo com o efeito visual desejado, e selecione a cor do pincel inicial (vermelho ou verde, por exemplo).

4.      Clique duas vezes na segunda bomba e altere a configuração da dinâmica FillColor.

DICA - Utilize o Client.SimulationDigital para simular um controlador de mudança entre 0 e 1. Se você quiser controlar o valor você mesmo, use Client.DigitalValue ou Client.NumericValue

5.      Selecione as duas bombas e clique no botão Align Horizontal Center e botão Align Vertical Center.

6.       Se a bomba com as mudanças de opacidade ficar atrás da outra bomba, clique no botão Mover para a Frente para trazê-lo para a frente.

 

7.      Agora você pode clicar no botão Exibir visualização  na parte superior da barra de ferramentas para ver a animação da nova bomba.

Ligação automática entre tags e símbolos

Pode-se configurar um símbolo para que seja a representação padrão de um tipo de Tag.  Desta forma, toda vez que você colar um Tag no ambiente Draw, um símbolo será criado automaticamente na tela correspondendo ao Tag inserido.

Mapeamento entre símbolos e tipos nativos

Os tags do tipo Digital, Integer, Double, Decimal, Texto, DateTime e TimeSpan tem uma visualização padrão que é o nome do tag e uma caixa de texto de entrada / saída. Se você selecionar várias linhas em Edit> Tags> Objects (clique em uma linha, pressione Shift e clique em outra linha para marcar um intervalo), e clicar com o botão direito para copiar essas linhas para a área de transferência e colar em uma tela, o sistema criará automaticamente um objeto para cada um desses tags copiados.

Se você deseja alterar as propriedades dos objetos criados, por exemplo, mudar a dinâmica de textIO "TwoWay" para "OutputOnly", selecione todos os objetos de caixa de texto (clicando com o mouse sobre a tela; mantendo-o pressionado, arraste- para selecionar a área com os objetos), e clique duas vezes em qualquer objeto selecionado para abrir o diálogo de edição de Dynamics, que neste caso mostrará no titulo que há “Multiplos objetos selecionados”.

Dica: Você também pode copiar as linhas de Editar> Tags> Objetos para Excel, adicionar as colunas Left e Top na tabela do Excel, em seguida, copiar e colar essa tabela, incluindo o cabeçalho da coluna, de volta para a tela; Neste caso, o sistema posicionará os objetos encontrados utilizando as coordenadas vindas da tabela.

NOTA - Se você criar um símbolo com os parâmetros de uma Dynamic, e salva-lo com o nome de "Integer", este simbolo vai se tornar  o padrão de visualização para as tags do tipo "Integer". O mesmo se aplica a qualquer outro tipo de tag.

Mapeando um Símbolo para um Tipo (Template)

Da mesma forma que se pode definir símbolos para os Tipos default nativos do Action.NET, também se pode definir um símbolo para ser o padrão de visualização de um tipo definido pelo usuário, isto é de um Template. Um objeto que tenha como tipo este template, será representado na tela por este simbolo.

Para fazer o mapeamento de um símbolo e um template:

1.      Vá para Edit> Tags> Templates para criar um novo modelo. Na figura a seguir foi criado um template com o nome Demo.

 

2.      De volta ao ambiente Draw  insira alguns objetos que você deseja para fazer parte de um simbolo. No exemplo, são usados um TextBlock e TextBox com os parâmetros #Tag (Tag.Demo.Integer1) em suas propriedades dinâmicas

 

 

3.      Agora selecione o TextBox e o TextBlock, e com o botão direito do mouse escolha no menu Make New Symbol;  Preencha os campos Name e Folder com o nome do template  "Demo". Os parênteses () na expressão do TextBox e TextBlock, defininem o âmbito de aplicação, sobre o que deve ser substituído quando você mapear o símbolo. A sintaxe #Label: quando você cola os Tags, é o marcador de posição que irá mostrar onde nas animações dinâmicas ou expressões o nome de tag deve ser substituído. Label é um nome qualquer para o parâmetro.

4.      Vá para Editar> Tags e copie todas as tags com Tipo: Demo.

5.      Volte para o ambiente DRAW e e cole as tags, na tela.

Ao inserir Tags deste tipo (template), o sistema fará a procura de um objeto Símbolo, com o mesmo nome do template. Se for encontrado na biblioteca de símbolos, esse símbolo é criado e vinculado ao Tag que foi inserindo na tela.

 

NOTA - Se você criar símbolos usando apenas elementos Tag, e não expressões, você não precisa explicitamente usar a sintaxe completa: #Label:(tag.Demo.Integer1) para definir os parâmetros do TextBox. Se você usar apenas a tag nas propriedades dinâmicas de objetos e executar o comando Make Symbol, o sistema irá procurar automaticamente tags no símbolo e criar os parâmetros relacionados. Ao usar uma expressão, ou quando se tem vários tags e templates no mesmo símbolo, é necessário usar explicitamente o caractere # e os parênteses, a fim de definir o escopo de parâmetros personalizáveis ​​do seu símbolo. Quando se quer usar o Tipo(template) como parametro para o simbolo, defina dentro das dinamicas do simbolo, sempre #Label:(tag.ObjetoDoTipo).<propriedade>. Assim os parentesis delimitam a parte que será substituída.

 

Mapeando Tags e Símbolos utilizando Categorias

Quando se deseja mapear um símbolo com um grupo de tags, mas não se quer fazer que este símbolo mapeie todos os  Tags com o mesmo tipo,  pode ser usada a coluna Categoria, na definição do Tag, para conectar-se os símbolos que devem ser usados ​​como o padrão de visualização para um grupo de Tags. Isto é, somente serão considerados correspondentes os Símbolos com mesmo nome dos tipos dos Tags, cujos objetos possuam as mesmas categorias.

Parta utilizar esta funcionalidade, siga o exemplo:

1.      Vá para Run> Dictionaries> Categories e crie novas categorias.

 

2.      Volte para o ambiente DRAW e inserira um símbolo.

3.      Neste ambiente escolha a ficha Symbols e na coluna categoria clique e selecione a categoria desejada para cada símbolo.

DICA - Se a coluna Categoria não estiver visível, clique com o botão direito em qualquer nome de coluna e clicando com o botão direito do mouse, selecione as colunas que você quer ver.

 

4.      Vá para Edit>Tags para definir as categorias apropriadas para cada grupo de tags.

5.      Selecione todos os Tags, e faça a cópia, vá para o DRAW e cole na tela. Veja que somente os Tags que possuem a mesma categoria que foi definida para o símbolo terão seus correspondentes simbolos criados, apesar de todos terem o mesmo tipo.

Organizando a Biblioteca de símbolos

Usando as ferramentas de desenvolvimento gráfico pode-se criar novos símbolos para utilizar em projetos. A biblioteca já vem com um conjunto de símbolos tais como Chaves, Tanques, Medidores e Bombas, Botões, Gauges, Sliders e outros. Estes novos objetos são agrupamentos de objetos existentes com todas as dinâmicas associadas. Abaixo, a título de exemplo, é mostrado o objeto Fan representando uma eólica. Este objeto é desagrupado e após reagrupado adicionando-se ao existente um tacômetro e um valor indicando a velocidade em RPM. Observar que na dinâmica da hélice, está selecionado rodá-la quando um valor for maior que 1 (ligado).

Os símbolos são objetos complexos criados usando as ferramentas de edição de telas do Action.NET. Assim, por exemplo, um objeto disjuntor deve ser uma figura com todas as propriedades e métodos associados a um disjuntor em uma tela de um unifilar.

Cada símbolo deve ter um nome que o identifica, uma categoria que o agrupa entre seus semelhantes e uma descrição que auxilia no seu uso por técnicos que deverão configurar as telas do SCADA.

No caso de uma empresa integradora que trabalhe com diversas concessionárias de energia, uma possibilidade de organização é agrupar todos os objetos (disjuntores, seccionadores, medidas analógicas, etc.) associados à cultura da concessionária a uma categoria, como o exemplo CEB_SIMBOLOS (Concessionária de distribuição de Brasília).

Um objeto disjuntor terá, por exemplo, as seguintes dinâmicas:

1.      Quando o mouse passa sobre ele, ele aumentará de tamanho;

2.      Ele será um quadrado com quatro cores distintas em função de estar: Bloqueado (0), Aberto (1), Fechado (2) e Indefinido (3);

3.      Um duplo clique sobre ele deverá abrir uma janela de comando que permitirá ligá-lo, desligá-lo, impedi-lo ou desativá-lo.

Criando um Símbolo (Disjuntor)

 

Por exemplo para criar um símbolo para o objeto Disjuntor:

1.      Sobre a aplicação Default, é criado um objeto retângulo, no formato de um disjuntor. Um duplo clique sobre este objeto abre a janela de dinâmicas para configuração.

2.      Selecionamos a dinâmica

3.      Action e atribuímos as seguintes ações:

   Tag.AN_AnalogInt_SELECTED.Link = #DISJ:(tag.AN_DEFAULT_AnalogInt).GetName()

  

n        A primeira ação será jogar o link (reference) da variável associada ao Label #DISJ na variável à esquerda: AN_AnalogInt_SELECTED. Na construção do símbolo usamos uma variável Dummy (AN_DEFAULT_AnalogInt ) que durante o projeto das telas deverá ser substituída pala variável que descreve o estado do disjuntor.

n        Display.AN_Command.Open(): A segunda ação será chamar a janela AN_Command que deverá ter como parâmetro de entrada a variável globalTag.AN_AnalogInt_SELECTED , já que na primeira linha da dinâmica ponteiro desta variável aponta para a variável dummy que representa o estado do disjuntor.

n        Abaixo é apresentada a dinâmica ação completa:

4.      A segunda dinâmica será a FillColor e usaremos o valor da variável associada (tag.AN_DEFAULT_AnalogInt).Value para atribuir as cores (0) Branco, (1) Verde, (2) Vermelho e (3) Amarelo.

5.      A última dinâmica associada a este objeto retângulo será Shine que fará que o objeto aumente em 20% (1,2) quando o mouse passar sobre ele.

6.      Outra ação implementada será colocar um “X” sobre o objeto caso não exista comunicação com o campo. Para isso, cria-se uma figura “X” ( Duas retas agrupadas) e define-se que ele será invisível quando a qualidade tag for diferente de 192 (qualidade ok).

7.      Finalmente, coloca-se um objeto sobre o outro, agrupa-se, e cria-se o símbolo disjuntor.

Janela de Comando do Disjuntor

A janela de comando do disjuntor é apresentada abaixo. Ela manipula a variável global: AN_AnalogInt_SELECTED e possui os cabeçalhos localizáveis:

n        Tag: apresenta o nome da variável associada ao disjuntor:

Tag.AN_AnalogInt_SELECTED.GetName()

n        Estado: apresenta o estado na variável associada ao disjuntor:

Tag.AN_AnalogInt_SELECTED.ValueAsString

n        Comando: Indica se o comando está ou não impedido (no caso apenas a check-box)

n        Sinalização: também check-box de estados;

Além destes parâmetros de “labels” existem três botões, onde a cada botão está associada uma dinâmica:

n        Desligar: Tag.AN_AnalogInt_SELECTED.Value = 1

n        Ligar: Tag.AN_AnalogInt_SELECTED.Value = 1

n        Sair: Ação CloseDisplay.

 

Criando um Unifilar com os Símbolos Disjuntores

Na figura a seguir, foi criado um unifilar com uma barra e seis símbolos DISJ. Para cada símbolo, como pode ser observado na figura, substituiu-se a variável Tag.AN.DEFAULT.AnalogInt por uma variável associada a um disjuntor.

O comando ligar / desligar muda o valor do Tag (1=desligar / 2=Ligar) e sua figura associada.

Da mesma forma como se criou este objeto disjuntor, pode-se criar todos os objetos associados à cultura do cliente.

 

Operações Usuais na Criação de novos Símbolos

É comum ao se gerar novos itens na biblioteca de Símbolos (Symbols):

1.      Associar Labels a variáveis do tipo dummy:

#LAB1:(Tag.AN_AnalogInt_Selected)

2.      Usar Tags tipo reference para apontar para as variáveis dummy como em:

       [Tag.AN_AnalogInt_Selected.Link =#LAB1:(Tag.AN.Default.AnalogInt).GetName()]

3.      Fazer todas as operações com a variável reference, após fazer seu apontamento

Para criar uma variável dummy que assumirá o papel de uma variável de uma rotina associada a um símbolo, por exemplo: Disjuntor, crie uma variável dummy do mesmo tipo da variável que contém o estado do disjuntor e crie uma variável do tipo reference.

Por exemplo, se temos um disjuntor que é um AnalogInt, criamos uma variável dummy do mesmo tipo como, por exemplo, Tag.AN.Default.AnalogInt e criamos uma variável global do tipo reference como, por exemplo, tag.AN_AnalogInt_Selected.

Depois de apontar a variável tipo Reference para o disjuntor: [Tag.AN_AnalogInt_Selected.Link =#LAB1:(Tag. AN.Default.AnalogInt).GetName()],

os seguintes atributos poderão ser usados:

n        Estado do disjuntor: (Tag.AN_AnalogInt_Selected).value (0=bloqueado, 1=aberto, 2=fechado, 3=Indefinido);

n        Qualidade da leitura do estado do disjuntor: (Tag.AN_AnalogInt_Selected).quality

n        Descrição do disjuntor: (Tag.AN_AnalogInt_Selected).description

n        Disjuntor Inibido (alarme desabilitado): (Tag.AN_AnalogInt_Selected).AlarmDisable = 1

n        Disjuntor Simulado: (Tag.AN_AnalogInt_Selected).locked = 1

n        Disjuntor alterou o valor: (Tag.AN_AnalogInt_Selected).changed

n        Estado do disjuntor em texto: (Tag.AN_AnalogInt_Selected).ValueAsString – Neste caso deve existir um dicionário associado;

n        String com Tag do disjuntor: (Tag.AN_AnalogInt_Selected).GetName()

Objetos runtime Display

O espaço de nomes Display lista todas as Telas com suas propriedades e métodos de abrir e fechar.

O namespace Layout lista todos os layouts com suas propriedades e métodos de abrir e fechar.

O namespace Client tem as propriedades do ambiente em cada computador cliente ou dispositivo móvel conectado.

Veja http://www.spinengenharia.com.br/help/an-2014/runtime/index.html para a referência de programação completa em objetos de tempo de execução.