Gerenciando Imagens e Símbolos

O Action.NETdispõ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 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.

 

Repositórios de Imagens e Símbolos

Existem dois principais repositórios de componentes reutilizáveis, as Imagens, 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.

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.

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:

  • . bmp

  • . gif

  • . ico

  • . jpg

  • . png

  • . tiff

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

Folder

Especifique o Folder onde este recurso vai ficar

ResourceType

Especifique o tipo de recurso

Dimension

Read-only. Mostra a dimensão do arquivo

Size

Read-only. Mostra o tamanho do arquivo com o recurso

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:

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

    • 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 das Imagens 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.


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.

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.

Inserindo animação de cores para figuras e símbolos

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 símbolo.

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.

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

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.

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


Dinamica do TextBox

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

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

  • Volte para o ambiente DRAW 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 colado na tela.

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:

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

  • Volte para o ambiente DRAW e insira um símbolo.

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

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

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

Nesta página: