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

4D v12.4

Binding 4D objects with HTML objects

This section describes the means made available by the 4D Web server for exchanging information via the Web, i.e. for dynamically sending and receiving values. The following points will be dealt with:

Sending dynamic values stored in 4D variables
Receiving dynamic values via Web forms
Using the COMPILER_WEB project method
Embedding JavaScript

Sending dynamic values

References to 4D variables can be inserted in your HTML pages. You can bind these references with any type of HTML object. When the Web pages are sent to the browser, 4D will replace these references with the current values of the variables. The pages received are therefore a combination of static elements and values coming from 4D. This type of page is called semi-dynamic.

Notes:

You work with process variables.
As HTML is a word processing oriented language, you will usually work with Text variables. However, you can also use BLOB variables. You just need to generate the BLOB in Text without length mode.

First, an HTML object can have its value initialized using the value of a 4D variable.

Second, after a Web form is submitted back, the value of an HTML object can be returned into a 4D variable. To do so, within the HTML source of the form, you create an HTML object whose name is the same as the name of the 4D process variable you want to bind. That point is studied further in the paragraph “Receiving dynamic values” in this document.

Note: It is not possible to make a reference to 4D picture variables.

Since an HTML object value can be initialized with the value of a 4D variable, you can programmatically provide default values to HTML objects by including  in the value field of the HTML object, where VarName is the name of the 4D process variable as defined in the current Web process. This is the name that you surround with the standard HTML notation for comments .

Note: Some HTML editors may not accept  in the value field of HTML objects. In this case, you will have to type it in the HTML code.

The  tag also allows the insertion of 4D expressions in the pages sent (fields, array elements, etc.). The operation of this tag with this type of data is identical to that with variables. For more information, refer to the 4D HTML Tags section.

In fact, the syntax  allows you to insert 4D data anywhere in the HTML page. For example, if you write:

<P>Welcome to !</P>

The value of the 4D variable vtSiteName will be inserted in the HTML page.

Here is an example:

  ` The following piece of 4D code assigns "4D4D" to the process variable vs4D

 vs4D:="4D4D"

  ` Then it send the HTML page "AnyPage.HTM"

 SEND HTML FILE("AnyPage.HTM")

The source of the HTML page AnyPage.HTM is listed here:

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

Parsing of pages sent by the server

For the purpose of optimization, the parsing of the HTML source code is not carried out by the 4D Web server when HTML pages are called using simple URLs that are suffixed with “.HTML” or “.HTM”. Of course, 4D offers mechanisms that allow you to "force" the parsing of pages when necessary (refer to the 4D HTML Tags section).

Inserting HTML Code into 4D Variables

You can insert HTML code into 4D variables. When the HTML static page is displayed on the Web browser, the value of the variable is replaced by the HTML code and will be interpeted by the browser.

To insert HTML code using 4D variables or expressions, you can use the special 4DHTML tag.

Given, for instance, the following 4D variable:

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

You can insert the HTML code into the HTML page using the following comment:

<!--#4DHTML vtHTML-->

You can use a Text or BLOB type variable (generated in Text without length mode).

For more information, refer to section 4D HTML Tags.

Receiving dynamic values

When you send an HTML page using SEND HTML FILE or SEND HTML BLOB, you can also bind 4D variables with HTML objects in the “Web Browser toward 4D” direction. The binding works both ways: once the HTML form is submitted, 4D can copy back the values of the HTML objects into the 4D process variables. With a view to database compilation, these variables must be declared in the COMPILER_WEB method (see paragraph below).

It is also possible to retrieve values from the Web forms sent to 4D without prior knowledge of the fields that they contain, using the GET WEB FORM VARIABLES command. For more information, refer to the description of this command.

Consider the following HTML page source code:

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

When 4D sends the page to a Web Browser, it looks like this:

The main features of this page are:

It includes three Submit buttons: vsbLogOn, vsbRegister and vsbInformation.
When you click Log On, the submission of the form is first processed by the JavaScript function LogOn. If no name is entered, the form is not even submitted to 4D, and a JavaScript alert is displayed.
The form has a POST 4D Method as well as a Submit script (GetBrowserInformation) that copies the Navigator properties to the four hidden objects whose names starts with vtNav_App.
The initial value of the object vtUserName is .

Let’s examine the 4D method WWW_STD_FORM_POST that is called when the user clicks on one of the buttons on the HTML form.

 <p> // Retrieval of value of variables

 ARRAY TEXT($arrNames;0)

 ARRAY TEXT($arrValues;0)

 GET WEB FORM VARIABLES($arrNames;$arrValues)

 

  //Test the values of the Submit buttons to detect if one of them has been clicked

 Case of

 

  // The Log On button was clicked

    :(vsbLogOn#"")

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

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

       If($0)

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

  // The WWW POST EVENT method saves the information in a database table

       Else

 

          $0:=WWW Register

  // The WWW Register method lets a new Web user register

       End if

 

  // The Register button was clicked

    :(vsbRegister#"")

       $0:=WWW Register

 

  // The Information button was clicked

    :(vsbInformation#"")

       SEND HTML FILE("userinfos.html")

 End case

The features of this method are:

The 4D variables vtNav_appName, vtNav_appVersion, vtNav_appCodeName, and vtNav_userAgent (bound to the HTML objects having the same names) are retrieved using the GET WEB FORM VARIABLES command from HTML objects created by the GetBrowserInformation JavaScript script.

The 4D variables vsbLogOn, vsbRegister and vsbInformation are bound to the three Submit buttons. Note that these variables are reset each time the page is sent to the browser. When the submit is performed by one of these buttons, the browser returns the value of the clicked button to 4D. The 4D variables are reset each time, so the variable that is no longer equal to the empty string tells you which button was clicked. The two other variables are empty strings, not because the browser returned empty strings, but because the browser “said” nothing about them; consequently, 4D left the variables unchanged. That is why it is necessary to reset those variables to the empty string each time the page is sent to the browser. This is the way to distinguish which Submit button was clicked when several Submit buttons exist on the Web page. Note that 4D buttons in a 4D form are numeric variables. However, with HTML, all objects are text objects.

If you bind a 4D variable with a SELECT object, you also bind a text variable. In 4D, to test which element of a drop-down list was chosen, you test the numeric value of the 4D array. With HTML, this is the value of the selected item that is returned in the 4D variable bound to the HTML object.

No matter which object you bind with a 4D variable, the returned value is of type Text, so you bind String or Text 4D process variables.

COMPILER_WEB Project Method

When the 4D Web server receives a posted form, it automatically calls the project method called COMPILER_WEB (if it exists). This method must contain all the typing and/or variable initialization directives, which are the variables whose names are the same as the field names in the form. It will be used by the compiler when compiling the database.
The COMPILER_WEB method is common to all the Web forms. By default, the COMPILER_WEB method does not exist. You must explicitly create it.

Note: You can also use the GET WEB FORM VARIABLES command, which gets the value for all the variables included in a submitted HTML page.

Web Services: The COMPILER_WEB project method is called, if it exists, for each SOAP request accepted. You must use this method to declare all the 4D variables associated with incoming SOAP arguments, for all methods published as Web Services. In fact, the use of process variables in Web Services methods requires that they be declared before the method is called. For more information on this point, refer to the description of the SOAP DECLARATION command.

Binding HTML Objects with 4D Variables - Image Mapping

If you send an HTML document using SEND HTML FILE or SEND HTML BLOB, you can bind 4D variables with Image Map HTML objects (INPUT TYPE="IMAGE") to retrieve information. For example, you can create an Image Map HTML object named bImageMap (you can actually use any name). Each time you click on the image on the browser side, a submit with the click position is sent back to the 4D Web Server. To retrieve the coordinates of the click (expressed relative to the top left corner of the image), you just need to read the value the 4D process variables bImageMap_X and bImageMap_Y (of type Longint) which contain the horizontal and vertical coordinates of the click. These variables should be declared in the COMPILER_WEB project method (see previous paragraph).

In the HTML page, you write something like:

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

The 4D method that sends the HTML page contains:

SEND HTML FILE("ThisPage.HTM")

In the COMPILER_WEB project method, you write:

 C_LONGINT(bImageMap_X;bImageMap_Y)

 bImageMap_X:=-1 `Initializing the variable

 bImageMap_Y:=-1 `Initializing the variable

Then, in the POST action 4D method or in the current method, after the POST action method issued a SEND HMTL FILE("") call, you retrieve the coordinates of the click in the bImageMap_X and bImageMap_Y variables:

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

  ` Do something accordingly to the coordinates

 End if

JavaScript Encapsulation

4D supports JavaScript source code embedded into HTML documents, and also JavaScript .js files embedded in HTML documents (for example <SCRIPT SRC="...").

Using SEND HTML FILE or SEND HTML BLOB, you send a page that you have prepared in an HTML source editor or built programmatically using 4D and saved as a document on disk. In both cases, you have full control of the page. You can insert JavaScript scripts in the HEAD section of the document as well as use scripts with the FORM markup. In the previous example, the script refers to the form "frm" because you were able to name the form. You can also trigger, accept, or reject the submission of the form at the FORM markup level.

Note: 4D supports Java applets transport.