Usando Bibliotecas no Elipse E3: Lição 2.

XControl

O XControl cria uma interface gráfica para o usuário composta de qualquer objeto do E3 que pode ser facilmente multiplicada no projeto. Para inserir um novo XControl na Biblioteca, siga estes passos:

  1. Clique com o botão direito do mouse em XControls, selecione a opção Inserir XControl em e clique no arquivo de Biblioteca.

Figura 1

  1. Altere o nome de XControl1 para o nome que desejar.

Ao inserir um XControl, observe que existem três abas na parte inferior da tela, Design, Propriedades e Scripts:

Figura 2

Na aba Design, é possível desenhar a parte gráfica do objeto e na aba Propriedades, podem ser criadas as propriedades a serem disponibilizadas para os usuários.

Figura 3

As animações da parte gráfica devem estar relacionadas com as propriedades criadas através de associações ou scripts. As propriedades criadas podem ser localizadas com o auxílio do AppBrowser no próprio XControl, e o caminho das associações ou scripts sempre é NomeXControl.NomePropriedade.

Figura 4

Exemplo

  1. Criamos um XControl chamado XControl1 onde desenhamos um motor e um texto, e criamos as propriedades Alarme, Caption e Cor. A cor do texto e sua mensagem devem ser associadas às propriedades Cor e Caption. Para isso, acessamos as propriedades do texto e criamos os respectivos links na aba Associações:

Figura 5

  1. Depois, associamos a propriedade Cor da imagem do motor (OverrideFillMode) à propriedade Alarme para que o motor pisque em vermelho e amarelo quando estiver em alarme:

Figura 6

  1. Após criar um objeto de Biblioteca, deve-se salvá-lo e registrar a Biblioteca. Dessa forma, clicamos com o botão direito no item Bibliotecas de Objetos no Organizer e selecionamos a opção Registrar bibliotecas carregadas.

Figura 7

Para inserir o novo objeto em uma tela, temos duas opções:

  1. Clicar com o botão direito do mouse na Tela e selecionar a opção Inserir – XControl.

Figura 8

  1. Na Galeria de imagens, acessar o grupo Recurso de projetos no fim da lista e arrastar o XControl para a Tela.

Figura 9

Desenvolvimento de XControls

Agora que já temos um projeto, um Domínio e um arquivo de Bibliotecas, vamos exemplificar o uso de Bibliotecas iniciando com o desenvolvimento de XControls.

Velocímetro

Iremos criar um objeto que simula um velocímetro exibindo a velocidade de 0 a 100. Um ponteiro irá se mover indicando a velocidade atual e será possível alterar a velocidade digitando um novo valor em um SetPoint. Para isso, devem-se seguir estes passos:

Figura 10

  1. Insira um novo XControl chamado Velocimetro.
  2. Desenhe o velocímetro utilizando um objeto Arco de Elipse e um objeto Texto.
  3. Insira um objeto Retângulo para ser o ponteiro e um objeto SetPoint para digitar o valor da velocidade.
  4. Na aba Propriedades do XControl, crie uma propriedade chamada Velocidade do tipo Double.

Figura 11

  1. Na aba Design, crie uma Associação Bidirecional entre o SetPoint e a propriedade Velocidade.

 

Figura 12

  1. Selecione o objeto Retângulo e insira uma Animação por Rotação.

Figura 13

  1. Configure o ponto fixo e a sombra da Animação para que desenho do movimento represente o caminho desejado.

Figura 14

  1. Crie uma Associação Simples entre a Animação e a propriedade Velocidade.

Figura 15

  1. Salve e registre a Biblioteca.

Utilizando um XControl

Siga esses passos para utilizar o XControl:

  1. Na TelaInicial, insira dois objetos Velocimetro.
  2. Execute a aplicação e altere o valor da velocidade de cada Velocímetro através do seu respectivo SetPoint.

Figura 16

  1. No objeto Dados do Servidor de Dados, crie um Tag Demo chamado Velocidade1 do tipo RampUpDown.

Figura 17

  1. Na TelaInicial, crie uma Associação Simples entre a propriedade Velocidade do Velocimetro1 e o Tag Demo Velocidade1.

Figura 18

  1. Execute a aplicação.

Exercícios

Garrafa

  1. Crie um XControl chamado Garrafa.
  2. Na aba Design, desenhe uma garrafa (acesse o grupo Containers da Galeria) e insira um retângulo sobre ela para simbolizar o líquido dentro da garrafa.

Figura 19

  1. Na aba Propriedades, crie uma propriedade do tipo Double para receber as informações de nível da garrafa chamada Nivel, e outra do tipo Color para receber a cor do líquido nomeando-a como Cor.
  2. No objeto Retângulo, faça as associações para animar o nível (VerticalPercentFill) e a cor (ForegroundColor) com as suas respectivas propriedades.
  3. Salve e registre a Biblioteca.
  4. Insira três objetos Garrafa na tela, altere as propriedades criadas (Nivel e Cor) e verifique se cada garrafa obedece às configurações.
  5. Crie três Tags Demo (por exemplo, garrafa1, garrafa2 e garrafa3) do tipo Aleatório (random) variando de 0 a 100.
  6. Associe o nível das Garrafas aos Tags criados.
  7. Execute a aplicação e teste as funcionalidades.

Controlador

  1. Crie um XControl chamado Controlador.
  2. Na aba Design, insira um Controlador (grupo Controllers da Galeria). Sobre ele, insira um Display para exibir o valor da variável monitorada, um SetPoint para controlar a variável e um texto para simbolizar que há um alarme no controlador.

Figura 20

  1. Na aba Propriedades, crie duas propriedades do tipo Integer chamadas SetPoint e Variavel.
  2. Associe o Display à propriedade Variavel e o SetPoint à propriedade SetPoint.
  3. Crie uma Associação no texto Alarme para que ele só seja exibido se o valor da propriedade Variavel for maior que o valor da propriedade SetPoint.
  4. Salve e registre a Biblioteca.
  5. Insira três Controladores na tela. Altere as propriedades criadas (Variavel e SetPoint) e verifique se cada Controlador obedece as suas configurações.
  6. Crie três Tags Demo (por exemplo, controlador1, controlador2 e controlador3) do tipo Aleatório (random) variando de 0 a 200.
  7. Associe a propriedade Variavel do Controlador a cada Tag criado.
  8. Execute a aplicação e teste as funcionalidades.

Bomba

  1. Crie um XControl chamado Bomba.
  2. Na aba Design, desenhe um motor.
  3. Na aba Propriedades, crie uma propriedade chamada Ligado do tipo Booleana.
  4. Associe a cor da Bomba à propriedade Ligado.
  5. Ao clicar na Bomba, ela deve alterar o seu estado de ligado ou desligado. Para isso, crie um script no evento Click que inverta a propriedade Ligado.
  6. Salve e registre a Biblioteca.
  7. Insira duas Bombas na Tela. Altere a propriedade Ligado e verifique se cada Bomba altera sua cor.
  8. Execute a aplicação e teste as funcionalidades.

Usando Bibliotecas no Elipse E3: Lição 1.

Criando uma Biblioteca

Para criar uma nova Biblioteca no E3, siga estes procedimentos:

  1. Acesse o menu Arquivo, selecione o item Novo Projeto e clique em Próximo.
  2. Na opção Tipo de Aplicação, selecione o item Biblioteca de componentes do E3.

Figura 1: Assistente de Aplicações

  1. Determine o nome da sua Biblioteca, a pasta onde ela deve ser salva, e clique em Avançar.
  2. Determine as especificações referentes ao Domínio.
  3. Clique em Concluir.

Exercícios

  1. Crie uma aplicação padrão chamada Bibliotecas e um Domínio com o mesmo nome. Selecione Não ao ser questionado sobre a criação de um Driver de Comunicação e Sim para armazenar dados em um banco de dados e criar um Servidor de Alarmes (não é necessário salvar os alarmes no banco de dados).
  2. Crie um arquivo de Bibliotecas chamado BibliotecasE3 e salve-o no mesmo diretório do projeto criado na etapa anterior.

Artigos Relacionados


Anexos:

ProjetoBibliotecas.zip

Este artigo foi útil? Was this post helpful?
Yes1
No0

Deixe seu Comentário

Seu endereço de e-mail não será publicado. Campos marcados com asterisco são obrigatórios *