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:
- 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
- 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
- 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
- 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
- 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:
- Clicar com o botão direito do mouse na Tela e selecionar a opção Inserir – XControl.
Figura 8
- 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
- Insira um novo XControl chamado
Velocimetro.
- Desenhe o velocímetro utilizando um objeto Arco de Elipse e um objeto Texto.
- Insira um objeto Retângulo para ser o ponteiro e um objeto SetPoint para digitar o valor da velocidade.
- Na aba Propriedades do XControl, crie uma propriedade chamada Velocidade do tipo Double.
Figura 11
- Na aba Design, crie uma Associação Bidirecional entre o SetPoint e a propriedade Velocidade.
Figura 12
- Selecione o objeto Retângulo e insira uma Animação por Rotação.
Figura 13
- Configure o ponto fixo e a sombra da Animação para que desenho do movimento represente o caminho desejado.
Figura 14
- Crie uma Associação Simples entre a Animação e a propriedade Velocidade.
Figura 15
- Salve e registre a Biblioteca.
Utilizando um XControl
Siga esses passos para utilizar o XControl:
- Na
TelaInicial
, insira dois objetos Velocimetro. - Execute a aplicação e altere o valor da velocidade de cada Velocímetro através do seu respectivo SetPoint.
Figura 16
- No objeto Dados do Servidor de Dados, crie um Tag Demo chamado
Velocidade1
do tipo RampUpDown.
Figura 17
- Na
TelaInicial
, crie uma Associação Simples entre a propriedade Velocidade doVelocimetro1
e o Tag DemoVelocidade1
.
Figura 18
- Execute a aplicação.
Exercícios
Garrafa
- Crie um XControl chamado
Garrafa
. - 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
- 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 comoCor
. - No objeto Retângulo, faça as associações para animar o nível (VerticalPercentFill) e a cor (ForegroundColor) com as suas respectivas propriedades.
- Salve e registre a Biblioteca.
- Insira três objetos Garrafa na tela, altere as propriedades criadas (Nivel e Cor) e verifique se cada garrafa obedece às configurações.
- Crie três Tags Demo (por exemplo,
garrafa1
,garrafa2
egarrafa3
) do tipo Aleatório (random) variando de 0 a 100. - Associe o nível das Garrafas aos Tags criados.
- Execute a aplicação e teste as funcionalidades.
Controlador
- Crie um XControl chamado
Controlador
. - 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
- Na aba Propriedades, crie duas propriedades do tipo Integer chamadas SetPoint e Variavel.
- Associe o Display à propriedade Variavel e o SetPoint à propriedade SetPoint.
- 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.
- Salve e registre a Biblioteca.
- Insira três Controladores na tela. Altere as propriedades criadas (Variavel e SetPoint) e verifique se cada Controlador obedece as suas configurações.
- Crie três Tags Demo (por exemplo,
controlador1
,controlador2
econtrolador3
) do tipo Aleatório (random) variando de 0 a 200. - Associe a propriedade Variavel do Controlador a cada Tag criado.
- Execute a aplicação e teste as funcionalidades.
Bomba
- Crie um XControl chamado
Bomba
. - Na aba Design, desenhe um motor.
- Na aba Propriedades, crie uma propriedade chamada Ligado do tipo Booleana.
- Associe a cor da Bomba à propriedade Ligado.
- 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.
- Salve e registre a Biblioteca.
- Insira duas Bombas na Tela. Altere a propriedade Ligado e verifique se cada Bomba altera sua cor.
- 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:
-
Acesse o menu Arquivo, selecione o item Novo Projeto e clique em Próximo.
-
Na opção Tipo de Aplicação, selecione o item Biblioteca de componentes do E3.
Figura 1: Assistente de Aplicações
-
Determine o nome da sua Biblioteca, a pasta onde ela deve ser salva, e clique em Avançar.
-
Determine as especificações referentes ao Domínio.
-
Clique em Concluir.
Exercícios
-
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). -
Crie um arquivo de Bibliotecas chamado
BibliotecasE3
e salve-o no mesmo diretório do projeto criado na etapa anterior.
Artigos Relacionados
- Usando Bibliotecas no Elipse E3: Introdução.
- Usando Bibliotecas no Elipse E3: Lição 1.
- Usando Bibliotecas no Elipse E3: Lição 3.
- Usando Bibliotecas no Elipse E3: Lição 4.
- Usando Bibliotecas no Elipse E3: Lição 5.
- Usando Bibliotecas no Elipse E3: Lição 6.
- Usando Bibliotecas no Elipse E3: Lição 7.
- Usando Bibliotecas no Elipse E3: Lição 8.