Conectando uma página HTML a um E3Server com a biblioteca de comunicação E3DataAccess utilizando JavaScript e VBScript.

NOTAS GERAIS:

1. Este artigo se aplica ao Elipse E3, versões 4.5 ou superior.
2. Para maiores detalhes sobre a biblioteca E3DataAccess, recomendamos a leitura dos seguintes artigos: Conectando uma aplicação VBA a um E3Server com a biblioteca de comunicação E3DataAccess e BUG-0013588: Tipos incompatíveis ao chamar métodos GetValue/SetValue do componente E3DataAccess.

Introdução

Neste artigo, são utilizadas as linguagens JavaScript e VBScript para demonstrar o uso da biblioteca E3DataAccess. No exemplo, os scripts foram usados em uma página HTML, e como cliente foi utilizado o browser Internet Explorer versão 11.

Linguagens como o JavaScript não oferecem suporte a passagem de parâmetros por referência, por isso o JavaScript foi utilizado em conjunto com VBScript para utilização de alguns dos métodos da biblioteca E3DataAccess.

A partir da versão 11 do Internet Explorer, o VBScript tem suporte limitado. Para maiores informações, acesse a documentação da Microsoft. Para permitir uso do VBScript, o seguinte trecho foi adicionado à página.

< meta http-equiv="x-ua-compatible" content="IE=10"/ >

Como o JavaScript não suporta a passagem de parâmetros por referência, a classe E3Item foi criada em VBScript para a utilização dos métodos ReadValue e WriteValue. Esta classe contém duas funções: Read(ItemName), que recebe como parâmetro o nome do tag do servidor e então utiliza a função ReadValue para realizar a leitura desse tag; e Write(ItemName, vTimestamp, vQuality, vValue), que recebe como parâmetros o nome do tag do servidor onde serão salvos os demais parâmetros Timestamp, Qualidade e Valor, e escreve esses dados no servidor através  da função WriteValue.

Class E3Item

    Public Value 

    Public Timestamp

    Public Quality

    Public Function Read(ItemName)
         Read = E3DataAccess.ReadValue(ItemName, Timestamp, Quality, Value) 
    End Function

    Public Function Write(ItemName, vTimestamp, vQuality, vValue)
        Write = E3DataAccess.WriteValue(ItemName, vTimestamp, vQuality, vValue) 
        If Write Then
            Timestamp = vTimestamp
            Quality = vQuality 
            Value = vValue 
        End If 
    End Function 
End Class

Métodos da Biblioteca E3DataAccess

1. Método ReadValue

Para realizar a leitura, foi criada a função Read() em JavaScript:

function Read()
{ 
    E3DataAccess.Server = document.E3Config.editServer.value;
    var msg; 
   //Cria instancia
var da = createNewE3Item(); 
   if (da.Read(document.E3Config.editTag.value))
   { 
       document.E3Config.editValue.value = da.Value; 
       msg = document.E3Config.editTag.value + ": " + da.Timestamp + ", " + da.Quality + ", " + da.Value;
   } 
   else
   { 
       msg = "Error in reading value from server: " + E3DataAccess.Server + " for item: " + document.E3Config.editTag.value; } WriteText(msg); 
   }
   WriteText(msg); 
}

Esta função cria uma instância da classe E3Item, envia para a função Read da classe o nome do tag configurado pelo usuário no HTML, e então conecta-se ao E3Server, realizando a leitura dos parâmetros Value, TimeStamp e Quality através do método ReadValue da biblioteca E3DataAccess. Feito isso, os valores estão prontos para serem utilizados no JavaScript e são disponibilizados para o usuário.

2. Método WriteValue

Semelhantemente ao procedimento de leitura, a escrita utiliza a função Write, criada em JavaScript:

function Write() 
{ 
    E3DataAccess.Server = document.E3Config.editServer.value;
    var msg; 
    //Cria instancia
    var da = createNewE3Item();
    //Formata data para salvar
    var date = new Date(); 
    var month = date.getMonth()+ 1; var dateString = month + "/" + date.getDate() + "/" 
                     + date.getFullYear() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); 
    if (da.Write(document.E3Config.editTag.value, dateString, 192,document.E3Config.editValue.value))
    {
        msg = "Writing to server: '" + E3DataAccess.Server + "' for item: '" + document.E3Config.editTag.value + "' succeeded"; 
    }
    else
    { 
         msg = "Error in writing value to server: '" + E3DataAccess.Server + "' for item: '" + document.E3Config.editTag.value + "' = " 
                   + document.E3Config.editValue.value; 
    }
    WriteText(msg); 
}

Esta função também cria uma instância da classe E3Item, passa os parâmetros informados pelo usuário para a função Write da classe, e utiliza o método WriteValue da biblioteca E3DataAccess para realizar escrita no tag, passando assim os parâmetros para o E3Server.

3. Método ExecuteQuery

Também é possível realizar consultas utilizando o método ExecuteQuery da biblioteca E3DataAccess. Para isso, foi criada a função GetQueryValues() em JavaScript:

function GetQueryValues() 
{ 
    E3DataAccess.Server = document.E3Config.editServer.value; 
    var da = createNewE3Query(); 
    if (document.E3Config.editQuery.value != "")
   { 
        da.ProcessQuery(document.E3Config.editQuery.value, "dvTableRended"); 
        document.getElementById("dvTableRended").innerHTML = da.Content; 
    } 
    else
    {
        document.getElementById("dvTableRended").innerHTML = Date() + " - Error empty query."; 
    }
}

Esta função cria uma instância da classe E3Query, criada em VBScript conforme exemplo acima, utilizando a função ProcessQuery. Através desta outra função, ela irá utilizar o método ExecuteQuery da biblioteca para realizar a consulta no E3Server.

Class E3Query
Public ContentPublic Function ProcessQuery(queryName, tablePlacement)
If queryName <> "" Then
Dim vNames, vValues, arrResult
If E3DataAccess.ExecuteQuery(queryName, vNames, vValues, arrResult) Then
Call RenderTable(arrResult, tablePlacement)
Else
Document.getElementById(tablePlacement).innerHTML = Now & " - Error in the query result."
End If
Else
Document.getElementById(tablePlacement).innerHTML = Now & " - Error empty query."
End If
End Function

4. Métodos RegisterCallBack e UnregisterCallBack

Para a utilização destes métodos, foi criada a função RegisterCallback() em JavaScript. Ao contrário das funções anteriormente criadas, esta função não precisa fazer nenhuma chamada a métodos desenvolvidos em VBScript, utilizando diretamente o método RegisterCallBack da biblioteca E3DataAccess via JavaScript.

 function RegisterCallback() 
{ 
    E3DataAccess.Server = document.E3Config.editServer.value;
    if (document.E3Config.editTag.value != "") 
    { 
        var result; 
        result = E3DataAccess.RegisterCallback(document.E3Config.editTag.value); 
       WriteText("Register tag: " + document.E3Config.editTag.value + " result: " + result); 
     } 
     else
     { 
         window.alert("Error! There is no tag item for register. Type one before proceed."); 
     }

Assim como o método RegisterCallback, também foi criada a função UnregisterCallback, em JavaScript, conforme visto abaixo.

 function UnregisterCallback()
{
if (document.E3Config.editTag.value != "")    if (document.E3Config.editTag.value != "")
{
var result;
result = E3DataAccess.UnregisterCallback(document.E3Config.editTag.value);
WriteText("Unregister tag: " + document.E3Config.editTag.value + " result: " + result);
}
else
{
window.alert("Error! There is no tag item for unregister. Type one before proceed.");
}
}

Testando a Aplicação

Para testar a aplicação, primeiramente deve-se executar o domínio com a aplicação E3, abrir a página HTML no Internet Explorer (como Administrador), e permitir acesso do ActiveX.

Feito isso, na página HTML aberta, basta informar o caminho do tag do E3Server que deseja ler/escrever.

Figura 1. Leitura do tag do servidor

Para realizar a consulta, basta inserir (em Session Query) o caminho desta no servidor.

Figura 2. Consulta do servidor.

Finalmente, para utilizar os métodos RegisterCallBack e UnregisterCallBack, basta inserir o caminho do tag no servidor e clicar em Register ou Unregister; assim, sempre que houver um evento com este tag, ele será mostrado na tela.

Figura 3. RegisterCallBack no Tag2 do servidor.

Para maiores detalhes da implementação, a aplicação exemplo E3 e a página HTML utilizada estão em anexo a este artigo.

• Conectando uma aplicação VBA a um E3Server com a biblioteca de comunicação E3DataAccess.
• BUG-0013588: Tipos incompatíveis ao chamar métodos GetValue/SetValue do componente E3DataAccess.

Anexos:

AppE3_HTML.zip