{"id":3495,"date":"2019-03-25T17:44:34","date_gmt":"2019-03-25T20:44:34","guid":{"rendered":"http:\/\/xexeu.elipse.com.br\/pt\/conectando-uma-pagina-html-a-um-e3server-com-a-biblioteca-de-comunicacao-e3dataaccess-utilizando-javascript-e-vbscript\/"},"modified":"2024-03-28T15:00:52","modified_gmt":"2024-03-28T18:00:52","slug":"conectando-uma-pagina-html-a-um-e3server-com-a-biblioteca-de-comunicacao-e3dataaccess-utilizando-javascript-e-vbscript","status":"publish","type":"post","link":"https:\/\/kb.elipse.com.br\/en\/conectando-uma-pagina-html-a-um-e3server-com-a-biblioteca-de-comunicacao-e3dataaccess-utilizando-javascript-e-vbscript\/","title":{"rendered":"Conectando uma p\u00e1gina HTML a um E3Server com a biblioteca de comunica\u00e7\u00e3o E3DataAccess utilizando JavaScript e VBScript."},"content":{"rendered":"
\n

NOTAS GERAIS:<\/b><\/u><\/p>\n

    \n
  1. Este artigo se aplica ao Elipse E3<\/b>, vers\u00f5es 4.5<\/b> ou superior.<\/li>\n
  2. Para maiores detalhes sobre a biblioteca E3DataAccess, recomendamos a leitura dos seguintes artigos: Conectando uma aplica\u00e7\u00e3o VBA a um E3Server com a biblioteca de comunica\u00e7\u00e3o E3DataAccess<\/a><\/b> e BUG-0013588: Tipos incompat\u00edveis ao chamar m\u00e9todos GetValue\/SetValue do componente E3DataAccess<\/b><\/a>.<\/li>\n<\/ol>\n

    Introdu\u00e7\u00e3<\/u><\/strong>o<\/u><\/strong><\/p>\n

    Neste artigo, s\u00e3o utilizadas as linguagens JavaScript e VBScript para demonstrar o uso da biblioteca E3DataAccess<\/b>. No exemplo, os scripts foram usados em uma p\u00e1gina HTML, e como cliente foi utilizado o browser Internet Explorer vers\u00e3o 11.<\/p>\n

    Linguagens como o JavaScript n\u00e3o oferecem suporte a passagem de par\u00e2metros por refer\u00eancia, por isso o JavaScript foi utilizado em conjunto com VBScript para utiliza\u00e7\u00e3o de alguns dos m\u00e9todos da biblioteca E3DataAccess.<\/p>\n

    A partir da vers\u00e3o 11 do Internet Explorer, o VBScript tem suporte limitado. Para maiores informa\u00e7\u00f5es, acesse a documenta\u00e7\u00e3o da Microsoft<\/a>. Para permitir uso do VBScript, o seguinte trecho foi adicionado \u00e0 p\u00e1gina.
    \n
    \n< meta http-equiv=\"x-ua-compatible\" content=\"IE=10\"\/ >
    \n<\/span><\/p>\n

    Como o JavaScript n\u00e3o suporta a passagem de par\u00e2metros por refer\u00eancia, a classe E3Item <\/i>foi criada em VBScript para a utiliza\u00e7\u00e3o dos m\u00e9todos ReadValue <\/i>e WriteValue<\/i>. Esta classe cont\u00e9m duas fun\u00e7\u00f5es: Read(ItemName)<\/i>, que recebe como par\u00e2metro o nome do tag do servidor e ent\u00e3o utiliza a fun\u00e7\u00e3o ReadValue <\/i>para realizar a leitura desse tag; e Write(ItemName, vTimestamp, vQuality, vValue)<\/i>, que recebe como par\u00e2metros o nome do tag do servidor onde ser\u00e3o salvos os demais par\u00e2metros Timestamp<\/i>, Qualidade <\/i>e Valor<\/i>, e escreve esses dados no servidor atrav\u00e9s\u00a0 da fun\u00e7\u00e3o WriteValue<\/i>.<\/p>\n

    \n
    Class E3Item<\/span>\r\n\r\n\u00a0\u00a0\u00a0 Public Value <\/span>\r\n\r\n\u00a0\u00a0\u00a0 Public Timestamp<\/span>\r\n\r\n\u00a0\u00a0\u00a0 Public Quality<\/span>\r\n\r\n\u00a0\u00a0\u00a0 Public Function Read(ItemName)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Read = E3DataAccess.ReadValue(ItemName, Timestamp, Quality, Value) <\/span>\r\n\u00a0\u00a0\u00a0 End Function<\/span>\r\n\r\n\u00a0\u00a0\u00a0 Public Function Write(ItemName, vTimestamp, vQuality, vValue)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Write = E3DataAccess.WriteValue(ItemName, vTimestamp, vQuality, vValue) <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 If Write Then<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Timestamp = vTimestamp<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Quality = vQuality <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Value = vValue <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 End If <\/span>\r\n\u00a0\u00a0\u00a0 End Function <\/span>\r\nEnd Class<\/span><\/pre>\n<\/div>\n
    M\u00e9todos da Biblioteca E3DataAccess<\/b><\/u><\/p>\n
    1. M\u00e9todo ReadValue<\/i><\/b><\/p>\n
    Para realizar a leitura, foi criada a fun\u00e7\u00e3o Read()<\/i> em JavaScript:<\/p>\n
    function Read()<\/span>\r\n{ <\/span>\r\n\u00a0\u00a0\u00a0 E3DataAccess.Server = document.E3Config.editServer.value;<\/span>\r\n\u00a0\u00a0\u00a0 var msg; <\/span>\r\n\u00a0\u00a0 \/\/Cria instancia\r\nvar da = createNewE3Item(); <\/span>\r\n\u00a0\u00a0 if (da.Read(document.E3Config.editTag.value))<\/span>\r\n\u00a0\u00a0 { <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.E3Config.editValue.value = da.Value; <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 msg = document.E3Config.editTag.value + \": \" + da.Timestamp + \", \" + da.Quality + \", \" + da.Value;<\/span>\r\n\u00a0\u00a0 } <\/span>\r\n\u00a0\u00a0 else<\/span>\r\n\u00a0\u00a0 { <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 msg = \"Error in reading value from server: \" + E3DataAccess.Server + \" for item: \" + document.E3Config.editTag.value; } WriteText(msg); <\/span>\r\n\u00a0\u00a0 }<\/span>\r\n\u00a0\u00a0 WriteText(msg); <\/span>\r\n}<\/span><\/pre>\n
    Esta fun\u00e7\u00e3o cria uma inst\u00e2ncia da classe E3Item<\/i>, envia para a fun\u00e7\u00e3o Read <\/i>da classe o nome do tag configurado pelo usu\u00e1rio no HTML, e ent\u00e3o conecta-se ao E3Server, realizando a leitura dos par\u00e2metros Value<\/i>, TimeStamp <\/i>e Quality <\/i>atrav\u00e9s do m\u00e9todo ReadValue <\/i>da biblioteca E3DataAccess. Feito isso, os valores est\u00e3o prontos para serem utilizados no JavaScript e s\u00e3o disponibilizados para o usu\u00e1rio.<\/p>\n
    2. M\u00e9todo WriteValue<\/i><\/b><\/p>\n
    Semelhantemente ao procedimento de leitura, a escrita utiliza a fun\u00e7\u00e3o Write<\/i>, criada em JavaScript:<\/p>\n
    function Write() <\/span>\r\n{ <\/span>\r\n\u00a0\u00a0\u00a0 E3DataAccess.Server = document.E3Config.editServer.value;<\/span>\r\n\u00a0\u00a0\u00a0 var msg; <\/span>\r\n\u00a0\u00a0\u00a0 \/\/Cria instancia<\/span>\r\n\u00a0\u00a0\u00a0 var da = createNewE3Item();<\/span>\r\n\u00a0\u00a0\u00a0 \/\/Formata data para salvar<\/span>\r\n\u00a0\u00a0\u00a0 var date = new Date(); <\/span>\r\n\u00a0\u00a0\u00a0 var month = date.getMonth()+ 1; var dateString = month + \"\/\" + date.getDate() + \"\/\" <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 + date.getFullYear() + \" \" + date.getHours() + \":\" + date.getMinutes() + \":\" + date.getSeconds(); <\/span>\r\n\u00a0\u00a0\u00a0 if (da.Write(document.E3Config.editTag.value, dateString, 192,document.E3Config.editValue.value))<\/span>\r\n\u00a0\u00a0\u00a0 {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 msg = \"Writing to server: '\" + E3DataAccess.Server + \"' for item: '\" + document.E3Config.editTag.value + \"' succeeded\"; <\/span>\r\n\u00a0\u00a0\u00a0 }<\/span>\r\n\u00a0\u00a0\u00a0 else<\/span>\r\n\u00a0\u00a0\u00a0 { <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 msg = \"Error in writing value to server: '\" + E3DataAccess.Server + \"' for item: '\" + document.E3Config.editTag.value + \"' = \" <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 + document.E3Config.editValue.value; <\/span>\r\n\u00a0\u00a0\u00a0 }<\/span>\r\n\u00a0\u00a0\u00a0 WriteText(msg); <\/span>\r\n}<\/span><\/pre>\n
    Esta fun\u00e7\u00e3o tamb\u00e9m cria uma inst\u00e2ncia da classe E3Item<\/i>, passa os par\u00e2metros informados pelo usu\u00e1rio para a fun\u00e7\u00e3o Write <\/i>da classe, e utiliza o m\u00e9todo WriteValue <\/i>da biblioteca E3DataAccess para realizar escrita no tag, passando assim os par\u00e2metros para o E3Server.<\/p>\n
    3. M\u00e9todo ExecuteQuery<\/i>
    \n<\/b>
    \nTamb\u00e9m \u00e9 poss\u00edvel realizar consultas utilizando o m\u00e9todo ExecuteQuery <\/i>da biblioteca E3DataAccess. Para isso, foi criada a fun\u00e7\u00e3o GetQueryValues()<\/i> em JavaScript:<\/p>\n
    function GetQueryValues() <\/span>\r\n{ <\/span>\r\n\u00a0\u00a0\u00a0 E3DataAccess.Server = document.E3Config.editServer.value; <\/span>\r\n\u00a0\u00a0\u00a0 var da = createNewE3Query(); <\/span>\r\n\u00a0\u00a0\u00a0 if (document.E3Config.editQuery.value != \"\")<\/span>\r\n\u00a0\u00a0 { <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 da.ProcessQuery(document.E3Config.editQuery.value, \"dvTableRended\"); <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"dvTableRended\").innerHTML = da.Content; <\/span>\r\n\u00a0\u00a0\u00a0 } <\/span>\r\n\u00a0\u00a0\u00a0 else<\/span>\r\n\u00a0\u00a0\u00a0 {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"dvTableRended\").innerHTML = Date() + \" - Error empty query.\"; <\/span>\r\n\u00a0\u00a0\u00a0 }<\/span>\r\n}<\/span><\/pre>\n
    Esta fun\u00e7\u00e3o cria uma inst\u00e2ncia da classe E3Query, criada em VBScript conforme exemplo acima, utilizando a fun\u00e7\u00e3o ProcessQuery<\/i>. Atrav\u00e9s desta outra fun\u00e7\u00e3o, ela ir\u00e1 utilizar o m\u00e9todo ExecuteQuery <\/i>da biblioteca para realizar a consulta no E3Server.<\/p>\n
    Class E3Query\r\nPublic Content<\/span><\/span>Public Function ProcessQuery(queryName, tablePlacement)\r\nIf queryName <> \"\" Then\r\nDim vNames, vValues, arrResult\r\nIf E3DataAccess.ExecuteQuery(queryName, vNames, vValues, arrResult) Then\r\nCall RenderTable(arrResult, tablePlacement)\r\nElse\r\nDocument.getElementById(tablePlacement).innerHTML = Now & \" - Error in the query result.\"\r\nEnd If\r\nElse\r\nDocument.getElementById(tablePlacement).innerHTML = Now & \" - Error empty query.\"\r\nEnd If\r\nEnd Function<\/pre>\n

    \n4. M\u00e9todos RegisterCallBack <\/i>e UnregisterCallBack<\/i><\/b><\/p>\n
    Para a utiliza\u00e7\u00e3o destes m\u00e9todos, foi criada a fun\u00e7\u00e3o RegisterCallback()<\/i> em JavaScript. Ao contr\u00e1rio das fun\u00e7\u00f5es anteriormente criadas, esta fun\u00e7\u00e3o n\u00e3o precisa fazer nenhuma chamada a m\u00e9todos desenvolvidos em VBScript, utilizando diretamente o m\u00e9todo RegisterCallBack <\/i>da biblioteca E3DataAccess via JavaScript.<\/p>\n
    \u00a0function RegisterCallback() <\/span>\r\n{ <\/span>\r\n\u00a0\u00a0\u00a0 E3DataAccess.Server = document.E3Config.editServer.value;<\/span>\r\n\u00a0\u00a0\u00a0 if (document.E3Config.editTag.value != \"\") <\/span>\r\n\u00a0\u00a0\u00a0 { <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var result; <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 result = E3DataAccess.RegisterCallback(document.E3Config.editTag.value); <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 WriteText(\"Register tag: \" + document.E3Config.editTag.value + \" result: \" + result); <\/span>\r\n\u00a0\u00a0\u00a0\u00a0 } <\/span>\r\n\u00a0\u00a0\u00a0\u00a0 else<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 { <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 window.alert(\"Error! There is no tag item for register. Type one before proceed.\"); <\/span>\r\n\u00a0\u00a0\u00a0\u00a0 }<\/span><\/pre>\n
    Assim como o m\u00e9todo RegisterCallback<\/i>, tamb\u00e9m foi criada a fun\u00e7\u00e3o UnregisterCallback<\/i>, em JavaScript, conforme visto abaixo.<\/p>\n
    \u00a0function UnregisterCallback()\r\n{\r\nif (document.E3Config.editTag.value != \"\")\u00a0\u00a0\u00a0 if (document.E3Config.editTag.value != \"\")\r\n{\r\nvar result;\r\nresult = E3DataAccess.UnregisterCallback(document.E3Config.editTag.value);\r\nWriteText(\"Unregister tag: \" + document.E3Config.editTag.value + \" result: \" + result);\r\n}\r\nelse\r\n{\r\nwindow.alert(\"Error! There is no tag item for unregister. Type one before proceed.\");\r\n}\r\n}\r\n<\/span><\/pre>\n
    Testando a Aplica\u00e7\u00e3o<\/b><\/u><\/p>\n
    Para testar a aplica\u00e7\u00e3o, primeiramente deve-se executar o dom\u00ednio com a aplica\u00e7\u00e3o E3, abrir a p\u00e1gina HTML no Internet Explorer (como Administrador), e permitir acesso do ActiveX.<\/p>\n
    Feito isso, na p\u00e1gina HTML aberta, basta informar o caminho do tag do E3Server que deseja ler\/escrever.<\/p>\n
    \"\"
    \nFigura 1.<\/b> Leitura do tag do servidor <\/span><\/div>\n
    Para realizar a consulta, basta inserir (em Session Query<\/b>) o caminho desta no servidor.<\/p>\n
    \"\"
    \nFigura 2<\/b>. Consulta do servidor.<\/span><\/div>\n
    Finalmente, para utilizar os m\u00e9todos RegisterCallBack <\/i>e UnregisterCallBack<\/i>, basta inserir o caminho do tag no servidor e clicar em Register <\/b>ou Unregister<\/b>; assim, sempre que houver um evento com este tag, ele ser\u00e1 mostrado na tela.<\/p>\n
    \"\"
    \nFigura 3.<\/b> RegisterCallBack no Tag2 do servidor. <\/span><\/div>\n
    Para maiores detalhes da implementa\u00e7\u00e3o, a aplica\u00e7\u00e3o exemplo E3 e a p\u00e1gina HTML utilizada est\u00e3o em anexo a este artigo.<\/p>\n<\/div>\n
    Artigos Relacionados<\/h3>\n
    \n
    \n