{"id":2336,"date":"2019-03-25T17:39:06","date_gmt":"2019-03-25T20:39:06","guid":{"rendered":"http:\/\/xexeu.elipse.com.br\/pt\/usando-bibliotecas-no-elipse-e3-licao-2\/"},"modified":"2019-05-27T15:27:05","modified_gmt":"2019-05-27T18:27:05","slug":"usando-bibliotecas-no-elipse-e3-licao-2","status":"publish","type":"post","link":"https:\/\/kb.elipse.com.br\/en\/usando-bibliotecas-no-elipse-e3-licao-2\/","title":{"rendered":"Usando Bibliotecas no Elipse E3: Li\u00e7\u00e3o 2."},"content":{"rendered":"

XControl<\/h3>\n
<\/div>\n

O XControl cria uma interface gr\u00e1fica para o usu\u00e1rio composta de qualquer objeto do E3 que pode ser facilmente multiplicada no projeto. Para inserir um novo XControl na Biblioteca, siga estes passos:<\/p>\n

\n
    \n
  1. Clique com o bot\u00e3o direito do mouse em XControls<\/b>, selecione a op\u00e7\u00e3o Inserir XControl em<\/b> e clique no arquivo de Biblioteca.<\/li>\n<\/ol>\n<\/div>\n

    \"\"<\/p>\n

    Figura 1<\/span><\/b><\/p>\n

    \n
      \n
    1. Altere o nome de XControl1<\/code> para o nome que desejar.<\/li>\n<\/ol>\n<\/div>\n

      Ao inserir um XControl, observe que existem tr\u00eas abas na parte inferior da tela, Design<\/b>, Propriedades<\/b> e Scripts<\/b>:<\/p>\n

      \"\"<\/p>\n

      Figura 2<\/span><\/b><\/p>\n

      Na aba Design<\/b>, \u00e9 poss\u00edvel desenhar a parte gr\u00e1fica do objeto e na aba Propriedades<\/b>, podem ser criadas as propriedades a serem disponibilizadas para os usu\u00e1rios.<\/p>\n

      \"\"<\/p>\n

      Figura 3<\/span><\/b><\/p>\n

      As anima\u00e7\u00f5es da parte gr\u00e1fica devem estar relacionadas com as propriedades criadas atrav\u00e9s de associa\u00e7\u00f5es ou scripts. As propriedades criadas podem ser localizadas com o aux\u00edlio do AppBrowser no pr\u00f3prio XControl, e o caminho das associa\u00e7\u00f5es ou scripts sempre \u00e9 NomeXControl.NomePropriedade<\/code>.<\/p>\n

      \"\"<\/p>\n

      Figura 4<\/span><\/b><\/p>\n

      Exemplo<\/h3>\n
      \n
        \n
      1. Criamos um XControl chamado XControl1<\/code> onde desenhamos um motor e um texto, e criamos as propriedades Alarme<\/b>, Caption <\/b>e Cor<\/b>. A cor do texto e sua mensagem devem ser associadas \u00e0s propriedades Cor<\/b> e Caption<\/b>. Para isso, acessamos as propriedades do texto e criamos os respectivos links na aba Associa\u00e7\u00f5es<\/b>:<\/li>\n<\/ol>\n<\/div>\n

        \"\"<\/p>\n

        Figura 5<\/b><\/span><\/p>\n

        \n
          \n
        1. Depois, associamos a propriedade Cor<\/b> da imagem do motor (OverrideFillMode<\/b>) \u00e0 propriedade Alarme<\/b> para que o motor pisque em vermelho e amarelo quando estiver em alarme:<\/li>\n<\/ol>\n<\/div>\n

          \"\"<\/p>\n

          Figura 6<\/b><\/span><\/p>\n

          \n
            \n
          1. Ap\u00f3s criar um objeto de Biblioteca, deve-se salv\u00e1-lo e registrar a Biblioteca. Dessa forma, clicamos com o bot\u00e3o direito no item Bibliotecas de Objetos<\/b> no Organizer e selecionamos a op\u00e7\u00e3o Registrar bibliotecas carregadas<\/b>.<\/li>\n<\/ol>\n<\/div>\n

            \"\"<\/p>\n

            Figura 7<\/span><\/b><\/p>\n

            Para inserir o novo objeto em uma tela, temos duas op\u00e7\u00f5es:<\/p>\n

            \n
              \n
            1. Clicar com o bot\u00e3o direito do mouse na Tela e selecionar a op\u00e7\u00e3o Inserir – XControl<\/b>.<\/li>\n<\/ol>\n<\/div>\n

              \"\"<\/p>\n

              Figura 8<\/b><\/span><\/p>\n

              \n
                \n
              1. Na Galeria de imagens, acessar o grupo Recurso de projetos<\/b> no fim da lista e arrastar o XControl para a Tela.<\/li>\n<\/ol>\n<\/div>\n

                \"\"<\/p>\n

                Figura 9<\/b><\/span><\/p>\n

                Desenvolvimento de XControls<\/h3>\n
                <\/div>\n

                Agora que j\u00e1 temos um projeto, um Dom\u00ednio e um arquivo de Bibliotecas, vamos exemplificar o uso de Bibliotecas iniciando com o desenvolvimento de XControls.<\/p>\n

                Veloc\u00edmetro<\/h4>\n
                <\/div>\n

                Iremos criar um objeto que simula um veloc\u00edmetro exibindo a velocidade de 0 a 100. Um ponteiro ir\u00e1 se mover indicando a velocidade atual e ser\u00e1 poss\u00edvel alterar a velocidade digitando um novo valor em um SetPoint. Para isso, devem-se seguir estes passos:<\/p>\n

                \"\"<\/p>\n

                Figura 10<\/span><\/b><\/p>\n

                \n
                  \n
                1. Insira um novo XControl chamado Velocimetro.<\/code><\/li>\n
                2. Desenhe o veloc\u00edmetro utilizando um objeto Arco de Elipse e um objeto Texto.<\/li>\n
                3. Insira um objeto Ret\u00e2ngulo para ser o ponteiro e um objeto SetPoint para digitar o valor da velocidade.<\/li>\n
                4. Na aba Propriedades <\/b> do XControl, crie uma propriedade chamada Velocidade<\/b> do tipo Double<\/b>.<\/li>\n<\/ol>\n<\/div>\n

                  \"\"<\/p>\n

                  Figura 11<\/b><\/span><\/p>\n

                  \n
                    \n
                  1. Na aba Design<\/b>, crie uma Associa\u00e7\u00e3o Bidirecional entre o SetPoint e a propriedade Velocidade<\/b>.<\/li>\n<\/ol>\n<\/div>\n

                    \"\"<\/b><\/span><\/p>\n

                    \u00a0<\/b><\/span><\/div>\n

                    Figura 12<\/b><\/span><\/p>\n

                    \n
                      \n
                    1. Selecione o objeto Ret\u00e2ngulo e insira uma Anima\u00e7\u00e3o por Rota\u00e7\u00e3o.<\/li>\n<\/ol>\n<\/div>\n

                      \"\"<\/p>\n

                      Figura 13<\/span><\/b><\/p>\n

                      \n
                        \n
                      1. Configure o ponto fixo e a sombra da Anima\u00e7\u00e3o para que desenho do movimento represente o caminho desejado.<\/li>\n<\/ol>\n<\/div>\n

                        \"\"<\/p>\n

                        Figura 14<\/b><\/span><\/p>\n

                        \n
                          \n
                        1. Crie uma Associa\u00e7\u00e3o Simples entre a Anima\u00e7\u00e3o e a propriedade Velocidade<\/b>.<\/li>\n<\/ol>\n<\/div>\n

                          \"\"<\/p>\n

                          Figura 15<\/span><\/b><\/p>\n

                          \n
                            \n
                          1. Salve e registre a Biblioteca.<\/li>\n<\/ol>\n<\/div>\n

                            Utilizando um XControl<\/h4>\n
                            <\/div>\n

                            Siga esses passos para utilizar o XControl:<\/p>\n

                            \n
                              \n
                            1. Na TelaInicial<\/code>, insira dois objetos Velocimetro.<\/li>\n
                            2. Execute a aplica\u00e7\u00e3o e altere o valor da velocidade de cada Veloc\u00edmetro atrav\u00e9s do seu respectivo SetPoint.<\/li>\n<\/ol>\n<\/div>\n

                              \"\"<\/p>\n

                              Figura 16<\/b><\/span><\/p>\n

                              \n
                                \n
                              1. No objeto Dados do Servidor de Dados, crie um Tag Demo chamado Velocidade1<\/code> do tipo RampUpDown<\/b>.<\/li>\n<\/ol>\n<\/div>\n

                                \"\"<\/p>\n

                                Figura 17<\/b><\/span><\/p>\n

                                \n
                                  \n
                                1. Na TelaInicial<\/code>, crie uma Associa\u00e7\u00e3o Simples entre a propriedade Velocidade<\/b> do Velocimetro1<\/code> e o Tag Demo Velocidade1<\/code>.<\/li>\n<\/ol>\n<\/div>\n

                                  \"\"<\/p>\n

                                  Figura 18<\/span><\/b><\/p>\n

                                  \n
                                    \n
                                  1. Execute a aplica\u00e7\u00e3o.<\/li>\n<\/ol>\n<\/div>\n

                                    Exerc\u00edcios<\/h3>\n

                                    Garrafa<\/h4>\n
                                    \n
                                      \n
                                    1. Crie um XControl chamado Garrafa<\/code>.<\/li>\n
                                    2. Na aba Design<\/b>, desenhe uma garrafa (acesse o grupo Containers<\/b> da Galeria) e insira um ret\u00e2ngulo sobre ela para simbolizar o l\u00edquido dentro da garrafa.<\/li>\n<\/ol>\n<\/div>\n

                                      \"\"<\/p>\n

                                      Figura 19<\/span><\/b><\/p>\n

                                      \n
                                        \n
                                      1. Na aba Propriedades<\/b>, crie uma propriedade do tipo Double<\/b> para receber as informa\u00e7\u00f5es de n\u00edvel da garrafa chamada Nivel<\/code>, e outra do tipo Color<\/b> para receber a cor do l\u00edquido nomeando-a como Cor<\/code>.<\/li>\n
                                      2. No objeto Ret\u00e2ngulo, fa\u00e7a as associa\u00e7\u00f5es para animar o n\u00edvel (VerticalPercentFill<\/b>) e a cor (ForegroundColor<\/b>) com as suas respectivas propriedades.<\/li>\n
                                      3. Salve e registre a Biblioteca.<\/li>\n
                                      4. Insira tr\u00eas objetos Garrafa na tela, altere as propriedades criadas (Nivel<\/b> e Cor<\/b>) e verifique se cada garrafa obedece \u00e0s configura\u00e7\u00f5es.<\/li>\n
                                      5. Crie tr\u00eas Tags Demo (por exemplo, garrafa1<\/code>, garrafa2<\/code> e garrafa3<\/code>) do tipo Aleat\u00f3rio<\/b> (random<\/i>) variando de 0 a 100.<\/li>\n
                                      6. Associe o n\u00edvel das Garrafas aos Tags criados.<\/li>\n
                                      7. Execute a aplica\u00e7\u00e3o e teste as funcionalidades.<\/li>\n<\/ol>\n<\/div>\n

                                        Controlador<\/h4>\n
                                        \n
                                          \n
                                        1. Crie um XControl chamado Controlador<\/code>.<\/li>\n
                                        2. Na aba Design<\/b>, insira um Controlador (grupo Controllers<\/b> da Galeria). Sobre ele, insira um Display para exibir o valor da vari\u00e1vel monitorada, um SetPoint para controlar a vari\u00e1vel e um texto para simbolizar que h\u00e1 um alarme no controlador.<\/li>\n<\/ol>\n<\/div>\n

                                          \"\"<\/p>\n

                                          Figura 20<\/b><\/span><\/p>\n

                                          \n
                                            \n
                                          1. Na aba Propriedades<\/b>, crie duas propriedades do tipo Integer<\/b> chamadas SetPoint<\/b> e Variavel<\/b>.<\/li>\n
                                          2. Associe o Display \u00e0 propriedade Variavel<\/b> e o SetPoint \u00e0 propriedade SetPoint<\/b>.<\/li>\n
                                          3. Crie uma Associa\u00e7\u00e3o no texto Alarme para que ele s\u00f3 seja exibido se o valor da propriedade Variavel<\/b> for maior que o valor da propriedade SetPoint<\/b>.<\/li>\n
                                          4. Salve e registre a Biblioteca.<\/li>\n
                                          5. Insira tr\u00eas Controladores na tela. Altere as propriedades criadas (Variavel<\/b> e SetPoint<\/b>) e verifique se cada Controlador obedece as suas configura\u00e7\u00f5es.<\/li>\n
                                          6. Crie tr\u00eas Tags Demo (por exemplo, controlador1<\/code>, controlador2<\/code> e controlador3<\/code>) do tipo Aleat\u00f3rio<\/b> (random<\/i>) variando de 0 a 200.<\/li>\n
                                          7. Associe a propriedade Variavel<\/b> do Controlador a cada Tag criado.<\/li>\n
                                          8. Execute a aplica\u00e7\u00e3o e teste as funcionalidades.<\/li>\n<\/ol>\n<\/div>\n

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

                                              Usando Bibliotecas no Elipse E3: Li\u00e7\u00e3o 1.<\/h2>\n

                                              Criando uma Biblioteca<\/h3>\n
                                              <\/div>\n

                                              Para criar uma nova Biblioteca no E3, siga estes procedimentos:<\/p>\n

                                                \n
                                              1. \n
                                                Acesse o menu\u00a0Arquivo<\/b>, selecione o item\u00a0Novo Projeto<\/b>\u00a0e clique em\u00a0Pr\u00f3ximo<\/b>.<\/div>\n<\/li>\n
                                              2. \n
                                                Na op\u00e7\u00e3o\u00a0Tipo de Aplica\u00e7\u00e3o<\/b>, selecione o item\u00a0Biblioteca de componentes do E3<\/b>.<\/div>\n<\/li>\n<\/ol>\n

                                                \"\"<\/p>\n

                                                Figura 1<\/b>: Assistente de Aplica\u00e7\u00f5es<\/span><\/p>\n

                                                  \n
                                                1. \n
                                                  Determine o nome da sua Biblioteca, a pasta onde ela deve ser salva, e clique em\u00a0Avan\u00e7ar<\/b>.<\/div>\n<\/li>\n
                                                2. \n
                                                  Determine as especifica\u00e7\u00f5es referentes ao Dom\u00ednio.<\/div>\n<\/li>\n
                                                3. \n
                                                  Clique em\u00a0Concluir<\/b>.<\/div>\n<\/li>\n<\/ol>\n

                                                  Exerc\u00edcios<\/h3>\n
                                                  <\/div>\n
                                                    \n
                                                  1. \n
                                                    Crie uma aplica\u00e7\u00e3o padr\u00e3o chamada\u00a0Bibliotecas<\/code>\u00a0e um Dom\u00ednio com o mesmo nome. Selecione\u00a0N\u00e3o<\/b>\u00a0ao ser questionado sobre a cria\u00e7\u00e3o de um Driver de Comunica\u00e7\u00e3o e\u00a0Sim<\/b>\u00a0para armazenar dados em um banco de dados e criar um Servidor de Alarmes (n\u00e3o \u00e9 necess\u00e1rio salvar os alarmes no banco de dados).<\/div>\n<\/li>\n
                                                  2. \n
                                                    Crie um arquivo de Bibliotecas chamado\u00a0BibliotecasE3<\/code>\u00a0e salve-o no mesmo diret\u00f3rio do projeto criado na etapa anterior.<\/div>\n<\/li>\n<\/ol>\n

                                                    Artigos Relacionados<\/h3>\n
                                                    \n