4D Doc Center : Binding 4D objects with HTML objects

4D v14.3

Binding 4D objects with HTML objects

Esta seção descreve os meios disponíveis pelo servidor web para intercambiar a informação através da web, ou seja, para enviar e receber dinamicamente valores. Os seguintes pontos são tratados:

Envio de valores dinâmicos armazenados em variáveis 4D
Recepção de valores dinâmicos através de formulários web
Encapsulação de JavaScript

Enviar valores dinâmicos

Pode inserir em suas páginas HTML referências às variáveis 4D. Estas referências podem estar associadas a todo tipo de objeto HTML. Quando as páginas web são enviadas aos navegadores web, 4D substituirá estas referências com os valores atuais das variáveis. As páginas recebidas são portanto uma combinação de elementos estáticos e de valores que provêm de 4D. Este tipo de página se chama página semidinâmica.

Notas:

Deve utilizar as variáveis processo.
Como o HTML é uma linguagem orientada a texto, geralmente trabalhará con variáveis Texto. Entretanto, também pode utilizar variáveis BLOB. Só deve gerar os BLOBs em modo Texto sem comprimento.

Em primeiro lugar, um objeto HTML pode inicializar seu valor utilizando o valor de uma variável 4D.
Depois, quando um formulário web se envia de volta, o valor de um objeto HTML pode ser devolvido em uma variável 4D. Para fazer isso, no código do formulário HTML, crie um objeto HTML cujo nome seja o mesmo que o nome da variável processo 4D a associar. Este ponto se estuda mais a fundo no parágrafo “Recepção de valores dinâmicos”.

Nota: Nota: não é possível fazer referência as variáveis imagens 4D.

Como um valor de objeto HTML pode ser inicializado com o valor de uma variável 4D, por programação pode oferecer valores por padrão a objetos HTML incluindo  : Undefined  no campo valor do objeto HTML, onde NomeVar é o nome da variável processo 4D como está definido no processo web atual. Este é o nome que rodeia com , a notação padrão para os comentários HTML.

Nota: alguns editores HTML não aceitam  no campo valor dos objetos HTML. Neste caso, deverá digitá-lo diretamente no código HTML.

A etiqueta também permite a inserção de expresões 4D nas páginas enviadas (campos, elementos de array, etc.). O funcionamento desta etiqueta com este tipo de dados é idêntico ao das variáveis. Para maior informação, consulte a seção ST FREEZE EXPRESSIONS.

Na verdade, a sintaxe  permite inserir os dados 4D em qualquer parte da página HTML. Por exemplo, se escreve:

<P>Bem-vindo a !</P>

O valor da variável 4D vtNomeSite será inserido na página HTML.

Este é um exemplo:

  ` O código 4D atribui "4D4D" a variável processo vs4D

 vs4D:="4D4D"

  ` Depois envia a página HTML "AnyPage.HTM"

 SEND HTML FILE("AnyPage.HTM")

A fonte da página HTML AnyPage.HTM é a seguinte:

<html>
<head>
    <title>AnyPage</title>
<script language="JavaScript"><!--
function Is4DWebServer(){
return (document.frm.vs4D.value=="4D4D")
}

function HandleButton(){
if(Is4DWebServer()){
alert("You are connected to 4D Web Server!")
} else {
alert("You are NOT connected to 4D Web Server!")
}

//--></script>

</head>
<body>
<form action="/4DACTION/WWW_STD_FORM_POST" method="post" name="frm">

<p><input type="hidden" name="vs4D" value="<!--#4DTEXT vs4D-->"</p>

<p><a href="JavaScript:HandleButton()"><img src="AnyGIF.GIF" border=0 align=bottom></a></p>

<p><input type="submit" name="bOK" value="OK"></p>

</form>
</body>
</html>

Análise de páginas enviadas pelo servidor

Por razões de otimização, a análise do código fonte HTML não é realizada pelo servidor web de 4D quando as páginas HTML são chamadas utilizando URLs simples com sufixos “.HTML” ou “.HTM”. 4D oferece mecanismos que lhe permitem "forçar" a análise de páginas se for necessário (consulte a seção Etiquetas HTML 4D).

Inserir código HTML em Variáveis 4D

Pode inserir código HTML nas variáveis 4D. Quando a página HTML estática for mostrada no navegador web, o valor da variável foi substituída pelo código HTML e será interpretado pelo navegador.

Para inserir o código HTML utilizando variáveis ou expressões 4D, pode utilizar a etiqueta especial 4DHTML.

Dada por exemplo a seguinte variável 4D:

vtHTML:="<b>"+[Cliente]nome+"</b>"

Pode inserir o código HTML na página HTML utilizando o seguinte comentário:

<!--#4DHTML vtHTML-->

Pode utilizar uma variável de tipo Texto ou BLOB (gerada em modo Texto sem comprimento).

Para maior informação, consulte a seção ST FREEZE EXPRESSIONS.

Receber valores dinâmicos

Quando enviar uma página HTML utilizando WEB SEND FILE ou SEND HTML BLOB, também pode associar as variáveis 4D com os objetos HTML no endereço “navegador web a 4D”. A associação funciona de ambas formas: quando tiver o formulário HTML é devolvido, 4D pode copiar os valores dos objetos HTML nas variáveis processo 4D. Visando a compilação do banco, estas variáveis devem ser declaradas no método COMPILER_WEB (ver o parágrafo mais adiante).

utilizando o comando WEB GET VARIABLES ou
utilizando os comandos WEB GET BODY PART e WEB Get body part count.

O comando WEB GET VARIABLES recupera os valores em forma de texto, enquanto os comandos WEB GET BODY PART e WEB Get body part count podem recuperar os arquivos publicados, utilizando BLOBs.

Nota de compatibilidad (4D v13.4): Nas versões anteriores, 4D copiava diretamente os valores das variáveis recebidas sob um formulário web publicado ou um URL GET, nas variáveis processo 4D (em modo compilado, estas variáveis tinham que ter sido declaradas na método COMPILER_WEB). Este funcionamento se elimina a partir de 4D v13.4, se mantém por compatibilidade das bases de dados convertidas, mas pode ser desativada mediante a opção de compatibilidade
Atribuição automática de variáveis na Página Compatibilidade das Propriedades da base (se recomenda desativar esta opção e utilizar os comandos WEB GET VARIABLES ou WEB GET BODY PART em suas bases).

Considere esta página de código HTML:

<html>
<head>
  <title>Welcome</title>
  <script language="JavaScript"><!--
function GetBrowserInformation(formObj){
formObj.vtNav_appName.value = navigator.appName
formObj.vtNav_appVersion.value = navigator.appVersion
formObj.vtNav_appCodeName.value = navigator.appCodeName
formObj.vtNav_userAgent.value = navigator.userAgent
return true
}
function LogOn(formObj){
if(formObj.vtUserName.value!=""){
return true
} else {
alert("Enter your name, then try again.")
return false
}
}
//--></script>
</head>
<body>
<form action="/4DACTION/WWW_STD_FORM_POST" method="post"
 name="frmWelcome"
 onsubmit="return GetBrowserInformation(frmWelcome)">
  <h1>Welcome to Spiders United</h1>
  <p><b>Please enter your name:</b>
  <input name="vtUserName" value="<!--#4DTEXT vtUserName-->" size="30" type="text"></p>
  <p> 
<input name="vsbLogOn" value="Log On" onclick="return LogOn(frmWelcome)" type="submit"> 
<input name="vsbRegister" value="Register" type="submit">
<input name="vsbInformation" value="Information" type="submit"></p>
<p> 
<input name="vtNav_appName" value="" type="hidden"> 
<input name="vtNav_appVersion" value="" type="hidden"> 
<input name="vtNav_appCodeName" value="" type="hidden">
<input name="vtNav_userAgent" value="" type="hidden"></p>
</form>
</body>
</html>

Quando 4D envia a página ao navegador, tem essa aparência:

As principais caraterísticas desta página são:

Inclui três botões Enviar: vsbEntrar, vsbRegistrar e vsbInformação.
Quando clicar em Log On, o envio do formulário primeiro é processado pela função JavaScript LogOn. Se nenhum nome for introduzido, o formulário não é nem ao menos enviado a 4D e se mostra um alerta JavaScript.
O formulário tem um método POST 4D e um script Submit (GetBrowserInformation) que copia as propriedades do navegador em quatro objetos ocultos cujos nomes começam por vtNav_App.
O valor inicial do objeto vtNomeUsuário é .

Examinemos agora o método 4D (chamado WWW_STD_FORM_POST que se chama quando o usuário clicar em um dos botões nos formulários HTML.

 <p> // Recuperação do valor das variáveis

 ARRAY TEXT($arrNames;0)

 ARRAY TEXT($arrValues;0)

 GET WEB FORM VARIABLES($arrNames;$arrValues)</p><p> //Testar os valores dos botões Submit para detectar se um deles tiver recebido um clique

 

 Case of

 

  // O botão Log On foi clicado

    :(vsbLogOn#"")

       QUERY([WWW Users];[WWW Users]User Name=vtUserName)

       $0:=(Records in selection([WWW Users])>0)

       If($0)

          WWW POST EVENT("Log On";WWW Log information)

  // O método WWW POST EVENT guarda a informação em uma tabela do banco

       Else

 

          $0:=WWW Register

  // O método WWW Register permite a um novo usuário web registrar-se

       End if

 

  // O botão  Register foi clicado

    :(vsbRegister#"")

       $0:=WWW Register

 

  // O botão de Informação foi clicado

    :(vsbInformation#"")

       SEND HTML FILE("userinfos.html")

 End case

As caraterísticas deste método são:

Os valores das variáveis 4D vtNav_appName, vtNav_appVersiom, vtNav_appCodeName e vtNav_userAgent (associadas aos objetos HTML do mesmo nome) são recuperados pelo comando WEB GET VARIABLES a partir dos objetos HTML criados pelo script JavaScript GetBrowserInformation.
As variáveis 4D vsbLogOn, vsbRegister e vsbInformation estão associadas aos três botões Submit. Note que estas variáveis são reiniciadas cada vez que a página se envia ao navegador. Quando o envio se realiza por um desses botões, o navegador retorna o valor do botão sobre o qual foi feito clique. Como as variáveis 4D são reinicializadas cada vez, assim a variável que já não for igual a string vazia indica em que botão clicar. As outras duas variáveis são strings vazias, não porque o navegador devolva strings vazias, mas porque o navegador não “disse” nada sobre elas; portanto, 4D deixa as variáveis sem mudanças. Por esta razão é necessário reiniciar estas variáveis todas as vezes que a página for enviada ao navegador.
Esta é a maneira de diferenciar qual botão Submit foi clicado quando existirem vários botões Submit na página web. Note que os botões 4D em um formulário 4D são variáveis numéricas. Entretanto, com HTML, todos os objetos são objetos texto.

Se associar uma variável 4D com um objeto SELECT, também associa uma variável texto. Em 4D, para testar qual elemento de uma lista drop down foi selecionado, você testa o valor numérico do array 4D. Com HTML, este é o valor do elemento selecionado que é devolvido na variável 4D associada ao objeto HTML.

Sem importar qual objeto está associado à variável 4D, o valor devolvido é de tipo Texto, de maneira que deve associar as variáveis 4D processo de tipo Alfa ou Texto.

Método de projeto COMPILER_WEB

Nota de compatibilidade (4D v13.4): a partir de 4D v13.4, o método COMPILER_WEB já não é utilizado pelo servidor web de 4D nas novas bases. Ainda pode ser chamado em bases de dados convertidas quando a opção de compatibilidade Atribuição automática de variáveis na [#title id="3239"/] das Propriedades da base está marcada. No entanto, se recomenda desativar esta opção e o uso dos comandos em [#cmd id="683"/] ou WEB GET BODY PART em suas bases.

Em modo compatibilidade, quando o servidor web 4D recebe um formulário enviado, chama automaticamente o método de projeto chamado COMPILER_WEB (se existir). Este método deve conter todas as diretivas de digitação e/ou inicialização das variáveis. Será utilizado pelo compilador em caso de compilação da base. O método COMPILER_WEB é comum para todos os formulários web. Por padrão, o método COMPILER_WEB não existir. Deve criá-lo explicitamente.

Serviços web: o método de projeto COMPILER_WEB é chamado, se existir, para cada petição SOAP aceitada. Deve utilizar este método para declarar todas as variáveis 4D associadas com os argumentos SOAP entrantes e para todos os métodos publicados como Serviços web. Na verdade, o uso de variáveis processo nos métodos de serviços web necessita que sejam declaradas antes de chamar ao método. Para maior informação sobre este ponto, consulte a descrição do comando SOAP DECLARATION.