4D Doc Center : 4D Objekte mit HTML Objekten verbinden

4D v12.4

4D Objekte mit HTML Objekten verbinden

Dieser Abschnitt beschreibt die Funktionalitäten des 4D Web Servers, um Informationen über das Web auszutauschen, z.B. um Werte dynamisch zu senden und zu empfangen. Er ist in folgende Abschnitte gegliedert:

Dynamische Werte senden, die in 4D Variablen gespeichert sind
Dynamische Werte über Web Formulare empfangen
Projektmethode COMPILER_WEB einsetzen
Javascript einbetten

Dynamische Werte senden

Sie können in Ihre HTML Seiten Referenzen auf 4D Variablen einfügen und diese Referenzen mit jeder Art von HTML Objekt verbinden. Werden die Web Seiten an den Browser gesendet, ersetzt 4D diese Referenzen durch die aktuellen Werte der Variablen. Die empfangenen Seiten sind demzufolge eine Kombination aus statischen Elementen und Werten auf 4D. Es handelt sich um eine halbdynamische Seite.

Hinweise:

Sie arbeiten mit Prozessvariablen.
Da HTML textorientiert ist, arbeiten Sie normalerweise mit Textvariablen. Sie können aber auch Variablen vom Typ BLOB verwenden. Dazu erstellen Sie das BLOB im Modus Text ohne Länge.

1- Über eine 4D Variable können Sie den Wert des HTML Objekts initialisieren.

2- Der Wert eines HTML Objekts kann nach der Rückübertragung eines Web-Formulars in einer 4D Variablen zurückgegeben werden. Dafür erstellen Sie im Quellcode der HTML Seite ein HTML Objekt, das denselben Namen wie die 4D Prozessvariable hat, die Sie einbinden wollen. Weitere Informationen dazu finden Sie im nachfolgenden Abschnitt “Dynamische Werte empfangen”.

Hinweis: Sie können keine Referenz auf eine 4D Variable vom Typ Bild machen.

Da ein HTML Objekt mit dem Wert einer 4D Variablen initialisiert werden kann, können Sie per Programmierung Standardwerte für HTML Objekte festlegen. Sie setzen dazu  in das Feld Wert des HTML Objekts ein. VarName ist der Name der 4D Prozessvariablen, die im Web Verbindungsprozess definiert wurde. Der Name wird zwischen die Standardmarkierung für HTML Kommentare gesetzt .

Hinweis: Einige HTML Editoren akzeptieren  nicht im Feld Wert von HTML Objekten. In diesem Fall müssen Sie den Ausdruck in HTML Code schreiben.

Über das Tag  können Sie in die gesendete Seite 4D Ausdrücke, wie Felder, Elemente von Arrays, etc. einfügen. Ein Tag mit dieser Art Daten funktioniert genauso wie das Tag mit Variablen. Weitere Informationen dazu finden Sie im Abschnitt 4D HTML Tags.

Mit der Syntax  können Sie 4D Daten in der HTML Seite an beliebiger Stelle einsetzen. Schreiben Sie zum Beispiel:

<P>Welcome to !</P>

wird der Wert der 4D Variablen vtSiteName in die HTML Seite eingefügt.

Hier ein Beispiel:

  ` Folgender Teil aus einem 4D Code weist "4D4D" der Prozessvariablen vs4D

 vs4D:="4D4D"zu

  ` Dann wird die HTML Seite "AnyPage.HTM" gesendet

 SEND HTML FILE("AnyPage.HTM")

Der Quellcode der HTML Seite AnyPage.HTM lautet:

<HTML></p><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>

Vom Server gesendete Seiten durchlaufen (parsen)

Aus Gründen der Optimierung wird das Durchlaufen des HTML Quellcode nicht vom 4D Web Server ausgeführt, wenn HTML Seiten über einfache URLs mit den Endungen .HTML oder .HTM aufgerufen werden. 4D bietet Mechanismen, die das Parsen von Seiten erzwingen, soweit erforderlich. Weitere Informationen dazu finden Sie im Abschnitt 4D HTML Tags.

HTML Code in 4D Variablen einfügen

Sie können HTML Code in 4D Variablen einfügen. Wenn die statische HTML Seite im Web Browser angezeigt wird, wird der Wert der Variablen durch den HTML Code ersetzt und vom Browser interpretiert.

Sie können das spezielle Tag 4DHTML verwenden, um HTML Code über 4D Variablen oder Ausdrücke einzufügen:

Wir verwenden z.B. folgende 4D Variable:

vtHTML:="<b>"+[Client]name+"</b>"

Sie können den HTML Code mit folgendem Kommentar in die HTML Seite einfügen:

<!--#4DHTML vtHTML-->

Sie können eine Variable vom Typ Text oder BLOB verwenden. Das BLOB sollte im Modus "Text without length" generiert sein.

Weitere Informationen dazu finden Sie im Abschnitt 4D HTML Tags.

Dynamische Werte empfangen

Beim Senden einer HTML Seite mit dem Befehl SEND HTML FILE oder SEND HTML BLOB, können Sie 4D Variablen auch mit HTML Objekten vom “Web Browser in Richtung 4D” verbinden. Das Einbinden arbeitet in beiden Richtungen: Sobald die HTML Seite übertragen ist, kann 4D die Werte der HTML Objekte in die 4D Prozessvariablen zurückkopieren. Diese Variablen müssen im Hinblick auf die Kompilierung der Datenbank in der Methode COMPILER_WEB deklariert werden (siehe Absatz unten).

Sie können auch Werte aus Web Formularen wiederfinden, die an 4D gesendet wurden, ohne vorher die darin enthaltenen Felder zu kennen. Dazu verwenden Sie den Befehl GET WEB FORM VARIABLES.

Betrachten wir folgenden Quellcode für die HTML Seite:

<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<p>}
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>

Sendet 4D die Seite zu einem Web Browser, sieht sie so aus:

Die wichtigsten Features dieser Seite sind:

Sie enthält drei Schaltflächen für die Übertragung: vsbLogOn, vsbRegister und vsbInformation.
Klicken Sie auf Einwählen, wird die Übertragung des Formulars erst von der JavaScript Funktion LogOn bearbeitet. Ist kein Name eingegeben, wird das Formular gar nicht in 4D übertragen. JavaScript zeigt eine Meldung an.
Das Formular hat sowohl eine POST 4D Methode als auch ein Übertragungsskript (GetBrowserInformation), das die Eigenschaften des Navigators in die vier verdeckten Objekte kopiert, deren Namen mit vtNav_App beginnen.
Der ursprüngliche Wert des Objekts vtUserName ist .

Prüfen wir die 4D Methode WWW_STD_FORM_POST, die diese HTML Seite über den Befehl SEND HTML FILE sendet. Diese Methode wird von der QR SET DESTINATION aufgerufen.

 </p><p> // Wert der Variablen wiederfinden

 ARRAY TEXT($arrNames;0)

 ARRAY TEXT($arrValues;0)

 GET WEB FORM VARIABLES($arrNames;$arrValues)

 

  //Teste die Werte der Schaltflächen Submit, um herauszufinden, ob eine davon angeklickt wurde.

 Case of

 

  // Die Schaltfläche Log On wurde angeklickt

    :(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)

  // Die Methode WWW POST EVENT sichert die Information in einer Tabelle der Datenbank

       Else

 

          $0:=WWW Register

  // Die Methode WWW Register lässt einen neuen Web Benutzer sich registrieren

       End if

 

  // Die Schaltfläche Register wurde angeklickt

    :(vsbRegister#"")

       $0:=WWW Register

 

  // Die Schaltfläche Information wurde angeklickt

    :(vsbInformation#"")

       SEND HTML FILE("userinfos.html")

 End case

Die Features dieser Methode sind:

Die 4D Variablen vtNav_appName, vtNav_appVersion, vtNav_appCodeName und vtNav_userAgent (verbunden mit den gleichnamigen HTML Objekten) erhalten über das JavaScript GetBrowserInformation die den HTML Objekten zugewiesenen Werte zurück. Die Methode initialisiert – einfach und direkt – die Variablen als Strings, und erhält dann nach Übertragen der Web Seite die Werte zurück.
Die 4D Variablen vsbLogOn, vsbRegister und vsbInformation sind mit den drei Schaltflächen für die Übertragung verbunden. Beachten Sie, dass diese Variablen, jedes Mal wenn die Seite zum Browser gesendet wird, neu gesetzt werden. Wird die Übertragung über eine dieser Schaltflächen ausgeführt, gibt der Browser den Wert der angeklickten Schaltfläche an 4D zurück. Die 4D Variablen werden jedes Mal neu gesetzt, so dass die Variable, die nicht länger ein leerer String ist, mitteilt, welche Schaltfläche angeklickt wurde. Die beiden anderen Variablen sind leere Strings; aber nicht, weil der Browser leere Strings zurückgibt, sondern weil der Browser nichts über sie “gesagt hat”. Folglich lässt 4D die Variablen unverändert. Deshalb ist es notwendig, die Variablen zum leeren String neu zu setzen, immer wenn die Seite zum Browser gesendet wird. Auf diese Weise lässt sich bei mehreren Schaltflächen für die Übertragung unterscheiden, welche Schaltfläche auf der Web Seite angeklickt wurde. Beachten Sie, dass 4D Schaltflächen in einem 4D Formular numerische Variablen sind. In HTML sind dagegen alle Objekte Textobjekte.

Beim Verbinden einer 4D Variablen mit einem Objekt <SELECT...SELECT> verbinden Sie auch eine Textvariable. Wollen Sie in 4D prüfen, welches Element einer DropDown Liste ausgewählt wurde, überprüfen Sie den numerischen Wert des 4D Array. In HTML ist das der Wert des ausgewählten Eintrags, der in der mit dem HTLM Objekt verbundenen 4D Variablen zurückgegeben wird.

Egal welches Objekt Sie mit einer 4D Variablen verbinden, der zurückgegebene Wert ist vom Typ Text. Sie verbinden also Prozessvariablen vom Typ Text oder String.

Projektmethode COMPILER_WEB

Empfängt der 4D Web Server ein "posted" Formular, ruft er – sofern vorhanden – automatisch die Projektmethode COMPILER_WEB auf. Diese Methode muss alle Direktiven zum Typisieren bzw. Initialisieren von Variablen enthalten. Das sind die Variablen mit denselben Namen wie die Feldnamen im Formular. Der Compiler verwendet sie beim Kompilieren der Datenbank. Die Projektmethode COMPILER_WEB ist gängig für alle Web Formulare. Sie ist nicht standardmäßig vorhanden. Sie müssen sie explizit erstellen.

Hinweis: Sie können auch den Befehl GET WEB FORM VARIABLES verwenden, der den Wert jeder Variablen in einer übertragenen HTML Seite erhält.

Web Services: Die Projektmethode COMPILER_WEB wird – sofern vorhanden – für jede akzeptierte SOAP Anfrage aufgerufen. Über diese Methode müssen Sie alle 4D Variablen deklarieren, die mit eingehenden SOAP Argumenten verknüpft sind. Bei Verwendung von Prozessvariablen in Methoden mit Web Services müssen diese vor Aufrufen der Methode deklariert werden. Weitere Informationen dazu finden Sie in der Beschreibung zum Befehl SOAP DECLARATION.

HTML Objekte mit 4D Variablen verbinden - Image Mapping

In einem über den Befehl SEND HTML FILE oder SEND HTML BLOB gesendetes HTML Dokument können Sie 4D Variablen mit HTML Objekten vom Typ Image Map verbinden (INPUT TYPE="image") und so Information wiederfinden. Sie können zum Beispiel ein HTML Objekt vom Typ Image Map mit Namen bImageMap erstellen. Immer wenn Sie dann im Browser auf das Bild klicken, wird die Übertragung mit der Klick-Position an den 4D Web Server zurückgesandt. Für die Koordinaten des Klicks (in Bezug auf die obere linke Ecke des Bildes) müssen Sie lediglich die 4D Prozessvariablen bImageMap und die Variablen bImageMap_X sowie bImageMap_Y (vom Typ Lange Ganzzahl) einbinden. Diese geben die horizontale und vertikale Koordinate des Klicks in Textform zurück. Diese Variablen sollten in der Projektmethode COMPILER_WEB deklariert sein (siehe oben).

In der HTML Seite schreiben Sie zum Beispiel:

<P><INPUT TYPE="image"SRC="MyImage.GIF"NAME="bImageMap"BORDER=0></P>

Die 4D Methode, die die HTML Seite sendet, enthält:

SEND HTML FILE("ThisPage.HTM")

In der Projektmethode COMPILER_WEB schreiben Sie:

 C_LONGINT(bImageMap_X;bImageMap_Y)

 bImageMap_X:=-1 ` Variable initialisieren

 bImageMap_Y:=-1 ` Variable initialisieren

Sie finden dann in der 4D Methode POST Aktion bzw. der aktuellen Methode, nachdem die Methode POST Aktion einen Aufruf von SEND HMTL FILE("") ausgelöst hat, die Koordinaten des Klicks in den Variablen bImageMap_X and bImageMap_Y:

 If(($bImageMap_X#-1)&(bImageMap_Y#-1))

  ` Führe etwas mit diesen Koordinaten aus

 End if

JavaScript Einbindung

4D unterstützt JavaScript Quellcode, sowie JavaScript.js Dateien, die in HTML Dokumente eingebunden sind (z.B., <SCRIPT SRC="...").

Mit dem Befehl SEND HTML FILE oder SEND HTML BLOB senden Sie eine Seite, die Sie im HTML Quelleditor vorbereitet haben oder per 4D Programmierung erstellt und als Dokument auf der Festplatte gesichert haben. In beiden Fällen können Sie die Seite komplett steuern. Sie können im HEAD Bereich des Dokuments Skripte von JavaScript sowie Skripte mit dem FORM Marker verwenden. Im vorigen Beispiel bezieht sich das Skript auf das Formular "frm", da Sie das Formular benennen konnten. Sie können die Übertragung des Formulars in die Ebene FORM Marker auch auslösen, akzeptieren oder verweigern.

Hinweis: 4D unterstützt die Übertragung von Java applets.