4D Objekte mit HTML Objekten verbinden

4D - Documentation   Français   English   German   English   4D Programmiersprache, Befehle nach Themen   4D Programmiersprache, Befehle alphabetisch   4D Programmiersprache, Konstanten nach Themen   Back   Previous   Next

Version 2003 (Geändert)


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

"Server-side image mapping" verwalten

Javascript einbetten

Hinweis: Dynamische Werte senden und empfangen lässt sich über konvertierte 4D Formulare automatisch ausführen. Weitere Informationen dazu finden Sie im Abschnitt Kontextueller Modus.

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, die nicht auf 32 000 Zeichen begrenzt sind. 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: Im nicht kontextuellen Modus können Sie 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 <!--#4DVAR VarName--> 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 <!--#4DVAR VarName--> nicht im Feld Wert von HTML Objekten. In diesem Fall müssen Sie den Ausdruck in HTML Code schreiben.

Über das Tag <!--#4DVAR--> 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 <!--#4DVAR VarName--> können Sie 4D Daten in der HTML Seite an beliebiger Stelle einsetzen. Schreiben Sie zum Beispiel:

<P>Welcome to <!--#4DVAR vtSiteName-->!</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:

Beachten Sie im gezeigten HTML Quellcode das ausgeblendete Eingabeobjekt mit Namen vs4D. Sein Wert wird in den Textwert <!--#4DVAR VarName--> gesetzt. Da die Projektmethode, die die HTML Datei sendet, zuvor die 4D Prozessvariable vs4D definiert hat, ersetzt 4D den Wert des HTML Objeks durch "4D4D", den Wert der 4D Variablen.

Die eingebundene JavaScript Funktion Is4DWebServer testet den Wert des HTML Objekts vs4D. Hier ist der Trick: Wird die HTML Seite von 4D bedient, ändert sich der Wert des Objekts in "4D4D". Wird die HTML Seite dagegen von einer anderen Anwendung an den Browser gesendet (z.B., 4D WebSTAR auf Macintosh), behält das Objekt den Wert, so wie er in der Seite "[vs4D]" festgelegt wurde. Bingo! Testen Sie nun mit JavaScript innerhalb der Seite im Web Browser den Wert dieses Objekts, können Sie feststellen, ob die Seite von 4D bereitgestellt wird oder nicht.

Dieses erste Beispiel zeigt Ihnen, wie Sie "intelligente" HTML Seiten einrichten können: Sie bieten weitere Features, wenn sie von 4D bedient werden, bleiben dabei jedoch kompatibel mit anderen Web Servern.

Wichtig: Sie binden nur Prozessvariablen ein. Jedes Element eines Objekts <SELECT...SELECT> kann auf getrennte Variablen Bezug nehmen (z.B., das erste Element auf V1, das zweite auf V2, usw.).

Die Einbindung von 4D in Richtung Web Browser arbeitet mit jeder Einbindungsmethode (SEND HTML FILE, SEND HTML BLOB, statischer Text, Textvariable oder BLOB in einem 4D Formular).

Vom Server gesendete Seiten durchlaufen (parsen)

Im kontextuellen Modus durchläuft 4D den HTML Quellcode immer vor Senden einer HTML Seite (HTML Dokument oder übersetztes 4D Formular) auf der Suche nach Objekten mit Referenz auf 4D Variablen.

Im nicht kontextuellen Modus durchläuft der HTML Quellcode aus Gründen der Optimierung nicht den HTML Quellcode, wenn HTML Seiten über einfache URL mit den Endungen .HTML oder .HTM aufgerufen werden. 4D bietet natürlich Mechanismen, die das Parsen von Seiten erzwingen, soweit erforderlich. Weitere Informationen dazu finden Sie im Abschnitt 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.

Es gibt zwei Möglichkeiten, HTML Code in 4D Variablen einzufügen:

Sie lassen die 4D Variable mit ASCII Code 1 als erstes Zeichen starten (z.B., vtHTML:=Char(1)+"...HTML code...") und fügen Sie über das Tag <!--#4DVAR VarName--> in die HTML Seite ein.

Sie fügen die 4D Variable (z.B., vtHTML:="...HTML code...") über das Tag <!--#4DVAR VarName--> direkt in die HTML Seite ein.

Sie können eine Variable vom Typ Text oder BLOB verwenden. Das BLOB sollte im Modus "Text ohne Länge" 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, kopiert 4D die Werte der HTML Objekte zurück in die 4D Prozessvariablen.

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.

Warnung: Das Rückkopieren der Werte in die 4D Prozessvariablen ist nur mit HTML Seiten möglich, die mit SEND HTML FILE oder SEND HTML BLOB gesendet wurden. Ist HTML in ein 4D Formular eingebunden, beschränkt sich das Rückkopieren der Werte auf die aktuellen 4D Objekte im Formular.

Betrachten Sie folgenden Quellcode für die HTML Seite:

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: vsbEinwählen, vsbRegistrierung und vsbInformation.

Klicken Sie auf Einwählen, wird die Übertragung des Formulars erst von der JavaScript Funktion LogOn bearbeitet. Ist kein Name angegeben, 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 Name mit vtNav_App beginnt.

Der ursprüngliche Wert des Objekts vtUserName ist <!--#vtUserName-->.

Prüfen wir die 4D Methode WWW Willkommen, die diese HTML Seite über den Befehl SEND HTML FILE sendet. Diese Methode wird von der Datenbankmethode On Web Connection aufgerufen.

      ` Projektmethode WWW Willkommen
      ` WWW Willkommen -> Boolean
      ` WWW Willkommen -> Ja = Kann eine Arbeitssitzung starten

   C_BOOLEAN($0)
   $0:=False

      ` Verdeckte Objekte INPUT HTML, die Browser Information zurückgeben
   C_TEXT(vtNav_appName;vtNav_appVersion;vtNav_appCodeName;vtNav_userAgent)
   vtNav_appName:=""
   vtNav_appVersion:=""
   vtNav_appCodeName:=""
   vtNav_userAgent:=""

      ` Textobjekt INPUT HTML, wo der Benutzername eingegeben wird
   C_TEXT(vtUserName)
   vtUserName:=""

      ` Werte der Schaltflächen für die HTML Übertragung
   C_STRING(31;vsbEinwählen;vsbRegistrierung;vsbInformation)

   Repeat 
         ` Vergessen Sie nicht, die Werte der Schaltflächen für die Übertragung neu zu setzen! 
      vsbEinwählen:=""
      vsbRegistrierung:=""
      vsbInformation:=""
         ` Sende die Web Seite
      SEND HTML FILE("Willkommen.HTM")
         ` Teste die Werte der Schaltflächen für die Übertragung, um zu wissen, 
         ` welcher angeklickt wurde
      Case of 

            ` Die Schaltfläche vsbEinwählen wurde angeklickt
         : (vsbEinwählen # "")
            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 Information
                  ` in eine Tabelle der Datenbank
            Else 
               CONFIRM("Dieser Benutzername ist unbekannt, wollen Sie ihn registrieren?")
               $0:=(OK=1)
               If ($0)
                  $0:=WWW Register
                     ` Mit der Methode WWW Register können Sie einen neuen 
                     ` Web Benutzer registrieren
               End if 
            End if 

            ` Die Schaltfläche Registrierung wurde angeklickt  
         : (vsbRegistrierung # "")
            $0:=WWW Register
 
               ` Die Schaltfläche Information wurde angeklickt
         : (vsbInformation # "")
            DIALOG([User Interface];"WWW Information")
      End case 
   Until (Not(<>vbWebServicesOn) | $0)

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 vsbEinwählen, vsbRegistrierung 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.

Ein interessanter Punkt in diesem Beispiel ist folgendes: Sie können die über den Browser erhaltene Information in einer 4D Tabelle speichern und so wieder die Features vom Web und der Datenbank kombinieren. Dazu dient die Projektmethode WWW POST EVENT (nicht gelistet). Diese Methode "sendet nicht ein Ereignis", sondern sichert die Information der Web Sitzung in den hier gezeigten Tabellen:

Nach dem Sichern in einer Tabelle können Sie die Information mit anderen Projektmethoden an den Web Benutzer zurücksenden. Über den Befehl QUERY finden Sie die entsprechende Information, über DISPLAY SELECTION zeigen Sie die Datensätze [WWW Log] an. Für den registrierten Benutzer im Web könnte der Bildschirm folgendermaßen aussehen:

Die oben gezeigten Funktionalitäten zum Verbinden, kombiniert mit all den Informationen, die Sie über HTML Dialoge oder 4D Formulare an die Benutzer geben oder von ihnen sammeln, können Sie die Verwaltung der Web Site Ihrer Datenbank auf interessante Art erweitern.

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, über den Sie Name und Wert jeder Variablen erhalten, die in einem übertragenen Web Formular (z.B. an den Web Server gesendet) enthalten ist.

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

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 auf folgende Weise:


   If (($bImageMap_X#-1)&(bImageMap_Y#-1))
      ` Führe etwas mit diesen Koordinaten aus
   End if

JavaScript Einbindung (kontextueller Modus)


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 können. Sie können die Übertragung des Formulars in die Ebene FORM Marker auch auslösen, akzeptieren oder verweigern.

Im kontextuellen Modus haben Sie beim Einbinden von HTML in ein 4D Formular keine Kontrolle über den HEAD Bereich oder die FORM Deklaration. Die Reichweite der Skripte ist von daher anders. Sie können zum Beispiel auf das HTML Formular nicht über seinen Namen zugreifen. Vergleichen Sie andererseits die JavaScript Funktion Is4DWebServer des vorigen Beispiels mit Folgendem:

Beide Funktionen führen dasselbe aus. Das zweite Beispiel greift jedoch über das Element forms[0] auf das HTML Objekt document zu. Von daher wird die Operation ausgeführt, auch wenn Sie nicht den Namen wissen, den 4D für die übersetzte HTML Seite (Formular) vergeben bzw. nicht vergeben hat.

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

Referenz

4D HTML Tags, SEND HTML BLOB, SEND HTML FILE, URLs und Form Actions.


4D - Documentation   Français   English   German   English   4D Programmiersprache, Befehle nach Themen   4D Programmiersprache, Befehle alphabetisch   4D Programmiersprache, Konstanten nach Themen   Back   Previous   Next