4DオブジェクトをHTMLオブジェクトにバインドする

4D - Documentation   French   English   German   Spanish   日本語   4D v11 SQLコマンドテーマリスト   4D v11 SQLインデックス   4D v11 SQL定数テーマリスト   戻る   前   次

version 2003 (Modified)


この節では4D Webサーバにおいて、ダイナミックな値を送受信するなどの情報交換を行うための方法を説明します。以下のポイントが関連します:

・4D変数に格納された値を送信する。

・Webフォームのダイナミック値を受信する

COMPILER_WEB プロジェクトメソッドの利用

・サーバサイドイメージマップの管理

・JavaScriptの有効化

Note: ダイナミックな値の送受信は、コンテキストモードでは変換された4Dフォームで自動で行われます。この点に関する詳細はコンテキストモードの利用の節を参照してください。

ダイナミックな値の送信


4D変数への参照をHTMLページに挿入できます。この参照をHTMLオブジェクトにバインドできます。Webページがブラウザに送信されるとき、4Dはこれらの参照を変数の現在の値で置き換えます。ブラウザが受け取るページは、スタティックな要素と、4D由来の値の組み合わせとなります。このタイプのページをセミダイナミックと呼びます。

Notes:

・プロセス変数が使用できます。

・HTMLはワープロ志向の言語なので、通常テキスト変数を使用します。しかしBLOB変数を使用することもできます。テキストを長さ情報なしのBLOBにします。

まず、HTMLオブジェクトは4D変数の値を使用して初期化された値を持ちます。

2番目に、Webフォームがサーバに送信されると、HTMLオブジェクトの値が4D変数に戻されます。これを行うには、フォームのHTMLソースで、4Dのプロセス変数と同じ名前を持つHTMLオブジェクトを作成します。この点は後ほど“ダイナミックな値の受信”で説明します。

Note: 非コンテキストモードでは、4Dピクチャ変数への参照を作成することはできません。

HTMLオブジェクトの値を4D変数で初期化できるので、HTMLオブジェクトのvalue フィールドに <!--#4DVAR VarName--> を記述することによって、プログラムでデフォルト値を提供できます。VarName は、カレントのWebプロセスで定義された4Dプロセス変数名です。この名前はHTML標準のコメント記法に囲まれています。

Note: HTMLエディタによっては <!--#4DVAR VarName--> をHTMLオブジェクトの value フィールドに許可しないかもしれません。この場合、HTMLコードに直接入力する必要があります。

<!--#4DVAR --> タグを使用すればページに4D式 (フィールドや配列要素) を挿入することもできます。 このタイプのデータに対するこのタグの動作は、変数のそれと同じです。詳細は4D HTMLタグを参照してください。

実際、シンタックス <!--#4DVAR VarName--> は、HTMLページのどこにでも、4Dデータを挿入することを可能にします。例えば以下のように記述すると:

<P>Welcome to <!--#4DVAR vtSiteName-->!</P>

4D変数vtSiteNameの値がHTMLページに挿入されます。

例題:

      ` 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")

AnyPage.HTM のソースは以下のようなものです:

このHTMLソース中で、hidden input オブジェクトのname属性値が vs4Dであることに注目してください。このオブジェクトのvalue属性値はテキスト値 "<!--#4DVAR vs4D-->"となっています。このページを送信するプロジェクトメソッドで事前に4Dプロセス変数vs4Dを定義しているので、4DはHTMLオブジェクトの値を4D変数の値である"4D4D"に置き換えます。

挿入されたJavaScript関数Is4DWebServervs4D HTMLオブジェクトの値をテストします。ここにトリックがあります。HTMLページが4Dにより提供されたものであるなら、オブジェクトの値は "4D4D"に変更されています。しかしHTMLページが他のアプリケーションで提供されていれば、 (例えばApacheなど)、オブジェクトの値はページに定義された"[vs4D]"のままです。JavaScriptを使用して、オブジェクトの値をテストし、ブラウザサイドのページから、ページが4Dから送信されたかどうかを検出できます。

最初の例題はどのようにして、他のWebサーバとの互換性を保ちながら、4Dから送信される際に “インテリジェント” なHTMLページを作成するかを示す例題です。

重要: プロセス変数のみがバインドできます。さらに現在のバージョンの4DではHTML SELECTオブジェクトに4D配列をバインドすることはできません。他方、SELECTオブジェクトのそれぞれの要素は異なる4D変数を参照できます。

4DからWebブラウザ方向へのバインドはカプセル化された方法で動作します (SEND HTML FILE, SEND HTML BLOB, コンテキストモード, 4Dフォームのスタティックテキスト、テキストまたはBLOB変数)。

サーバから送信されるページの解析

・コンテキストモードでは、HTMLページ (HTMLドキュメントや変換された4Dフォーム) を送信する前に、4Dは常にHTMLソースコードを解析し、4D変数を参照するオブジェクトを検索します。

・非コンテキストモードでは、最適化のために、 “.HTML” や “.HTM”などの拡張子の単純なURLを使用してHTMLページが呼び出される場合、4D WebサーバはHTMLソースコードを解析しません。もちろん、4D必要な時にページの解析を行わせるためのメカニズムを提供しています (4D HTMLタグの節参照)。

4D変数にHTMLコードを挿入

4D変数にHTMLコードを挿入できます。HTMLスタティックページがWebブラウザに表示されるとき、変数の値はHTMLコードに置き換えられ、ブラウザに解釈されます。

HTMLコードを4D変数に挿入するには、2つの方法があります:

・4D変数値の1文字目をコード1で開始し (例 vtHTML:=Char(1)+"...HTML code...") 、これを <!--#4DVAR vtHTML--> タグを使用してHTMLページに追加する。

・4D変数 (例 vtHTML:="...HTML code...") を直接、<!--#4DHTMLVAR vtHTML--> タグを使用してHTMLページに追加する。

テキストまたはBLOB変数を使用できます (BLOBは長さなしのテキストモードで作成されていなければなりません)。

詳細は“4D HTMLタグ”の節を参照してください。

ダイナミックな値の受信


SEND HTML FILESEND HTML BLOBを使用してHTMLページを送信するとき、4D変数をHTMLオブジェクトに、“Webブラウザから4D”の方向でバインドできます。バインドは両方向で動作します。HTMLフォームが送信されると、4DはHTMLオブジェクトの値を4Dのプロセス変数にコピーします。これらの変数は COMPILER_WEB メソッドで定義されていなければなりません (後述)。

Webフォームから4Dに送信された値を、事前にどのようなフィールドが定義されているか知らなくても、GET WEB FORM VARIABLES コマンドを使用してフォーム値を取得できます。詳細はこのコマンドの説明を参照してください。

警告: 4Dプロセス変数に値を取得することは、SEND HTML FILESEND HTML BLOBで送信されたHTMLページでのみ可能です。コンテキストモードで、4Dフォームにカプセル化されたHTMLでは、値の取得はフォーム上の実際の4Dオブジェクトに制限されます。

以下のHTMLソースコードがあるとき:

4DがWebブラウザにページを送信すると、以下のように表示されます:

このページの主な機能は:

・3つの送信ボタン: vsbLogOn, vsbRegister, vsbInformation.

・Log Onをクリックすると、フォームの送信はまずJavaScript関数 LogOn で処理されます。名前が入力されていなければフォームは4Dに送信されず、JavaScriptが警告を表示します。

・フォームはPOST 4Dメソッドと、navigatorのプロパティを名前がvtNav_Appから始まるhiddenオブジェクトにコピーする送信スクリプト (GetBrowserInformation) を持っています。

・オブジェクトvtUserName の最初の値は <!--#4DVAR vtUserName--> です。

SEND HTML FILE コマンドを使用してこのHTMLページを送信する4Dメソッド WWW Welcome を見てみましょう。このメソッドはOn Web Connection データベースメソッドから呼ばれます。

      ` WWW Welcome Project Method
      ` WWW Welcome -> ブール
      ` WWW Welcome -> Yes = Can start a session

   C_BOOLEAN($0)
   $0:=False

      ` ブラウザ情報を返すHidden INPUT HTML オブジェクト
   C_TEXT(vtNav_appName;vtNav_appVersion;vtNav_appCodeName;vtNav_userAgent)
   vtNav_appName:=""
   vtNav_appVersion:=""
   vtNav_appCodeName:=""
   vtNav_userAgent:=""

      ` ユーザ名が入力されるText INPUT HTML オブジェクト
   C_TEXT(vtUserName)
   vtUserName:=""

      ` HTML 送信ボタン値
   C_STRING(31;vsbLogOn;vsbRegister;vsbInformation)

   Repeat 
         ` 送信ボタン値のリセットを忘れないように!  
      vsbLogOn:=""
      vsbRegister:=""
      vsbInformation:=""
         ` Webページを送信
      SEND HTML FILE("Welcome.HTM")
         ` 送信ボタンの値をチェックし、どのボタンが押されたかを知る
      Case of 

            `  Log Onボタンがクリックされた
         : (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 )
                  ` WWW POST EVENT はデータベースーブルに情報を保存する
            Else 
               CONFIRM("This User Name is unknown, would you like to register?")
               $0:=(OK=1)
               If ($0)
                  $0:=WWW Register
                     ` WWW Register メソッドは新規Webユーザを登録する
               End if 
            End if 

            ` Register ボタンがクリックされた
         : (vsbRegister # "")
            $0:=WWW Register
 
               `  Information ボタンがクリックされた
         : (vsbInformation?#?"")
            DIALOG([User Interface];"WWW Information")
      End case 
   Until (Not(<>vbWebServicesOn) | $0)

このメソッドの機能は:

・4D変数 vtNav_appName, vtNav_appVersion, vtNav_appCodeName, vtNav_userAgent (同じ名前を持つHTMLオブジェクトにバインドされている) は GetBrowserInformation JavaScript スクリプトを使用してHTMLオブジェクトに割り当てられた値を取得します。単純かつ直接に、メソッドは変数を文字列として初期化し、Webページがサブミットされたのちに値を取得します。

・4D変数 vsbLogOn, vsbRegister, vsbInformation は3つの送信ボタンにバインドされています。これらの変数はページがブラウザに送信されるたびに初期化されることに留意してください。これらのボタンの一つがクリックされてサブミットが行われると、ブラウザは4Dにクリックされたボタンの値を返します。4D変数は毎回リセットされるので、値が空の文字列でないボタンがクリックされたものであることがわかります。他の二つの変数値は空の文字列です。これはブラウザが空の文字列を返したからではなく、ブラウザがこれらの変数について何も返していないからです。そのため4Dはこれらの変数を変更しません。これが、ページをブラウザに送信するたびに変数値を空の文字列に初期化しなければならない理由です。

このようにして、Webページ上に複数の送信ボタンがあるときでも、どのボタンがクリックされたかを知ることができます。4Dフォーム上のボタンは数値タイプですが、HTMLではすべてのオブジェクトがテキストオブジェクトであることに留意してください。

4D変数をSELECTオブジェクトにバインドするときも、テキスト変数をバインドします。4Dの場合、ドロップダウンのどの要素が選択されたかをテストするには、4D配列の数値をテストします。HTMLでは、HTMLオブジェクトにバインドされた4D変数に返された値が、選択された項目の値です。

4D変数をどのオブジェクトにバインドするかにかかわらず、返される値はテキストであり、文字型またはテキスト型の4Dプロセス変数をバインドします。

この例題の興味深い点は、ブラウザに関する情報を取得した後、これらの値を4Dテーブルに格納していることです。ここでもWebとデータベースの能力を組み合わせています。WWW POST EVENT プロジェクトメソッドがこれを行っています。このメソッドはWebセッション情報を以下のテーブルに格納します:

テーブルに情報を保存したら、他のプロジェクトメソッドを使用してWebユーザに情報を送り返すことができます。これを行うにはQUERYを使用して正しい情報を検索し、DISPLAY SELECTION[WWW Log]レコードを表示します。以下の図はWebサイトの登録ユーザに提供されるログ情報です:

この例題でお見せしたバインド機能を使用して、HTMLダイアログや4Dフォームに情報を埋め込み、または情報を収集して、データベースのWebサイトにとても興味深い管理上の可能性を追加できます。

COMPILER_WEB プロジェクトメソッド


ポストされたフォームを4D Webサーバが受け取る際、COMPILER_WEBプロジェクトメソッドがあれば、自動で呼び出されます。このメソッドには変数の型宣言と変数の初期化コードを記述します。変数名はHTMLフォームのフィールド名と同じものです。データベースをコンパイルする際には、このメソッドが使用されます。

COMPILER_WEB はすべてのWebフォームで共通です。デフォルトでCOMPILER_WEBメソッドは存在しません。明示的に作成する必要があります。

Note: GET WEB FORM VARIABLES コマンドを使用して、サブミットされたHTMLページに含まれる値を取得することもできます。

Web サービス: COMPILER_WEB は、存在すれば、SOAPリクエストが受け入れられるごとに実行されます。このメソッドを使用して、Webサービスとして公開されたすべてのメソッドで、受信するSOAP引数に割り当てられたすべての4D引数を宣言しなければなりません。実際、Webサービスメソッドで引数の受け取りにプロセス変数を使用する場合、メソッドが呼び出される前にそれらが宣言されていなければなりません。この点に関する詳細はSOAP DECLARATION コマンドの説明を参照してください。

HTMLオブジェクトを4D変数にバインドする - イメージマップ


コンテキストモードの利用で見るように、4DフォームをWebページとして使用する際は、スタティックピクチャの上に重ねられた非表示ボタンにより、4Dはサーバサイドイメージマップを提供します。

SEND HTML FILESEND HTML BLOBを使用してHTMLドキュメントを送信するとき、4D変数をイメージマップHTMLオブジェクト (INPUT TYPE="IMAGE") にバインドして、情報を取得できます。例えばbImageMapという名前のイメージマップHTMLオブジェクトを作成することができます。ブラウザ側でイメージをクリックするたびに、クリックされた位置が4D Webサーバにサブミットされます。クリック座標を取得するには (イメージの左上端からの相対座標) 、4Dプロセス変数 bImageMap_XbImageMap_Y (倍長整数) を読み出すだけです。これらの変数はCOMPILER_WEBプロジェクトメソッドで宣言されていなければなりません (前段落参照)。

・HTMLページには以下のように記述します:

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

・HTMLページを送信するメソッドには以下のコードが記述されています:

   SEND HTML FILE("ThisPage.HTM")

・COMPILER_WEB プロジェクトメソッドには以下のコードが記述されています:

   C_LONGINT(bImageMap_X;bImageMap_Y)
   bImageMap_X:=-1    `Initializing the variable
   bImageMap_Y:=-1    `Initializing the variable

・POSTアクション4Dメソッドあるいはカレントメソッドで、POSTアクションメソッドがSEND HMTL FILE("") を呼び出した後に、bImageMap_XbImageMap_Y 変数に格納されたクリック座標を取得します:

   If (($bImageMap_X#-1)&($bImageMap_Y#-1))
      ` 座標に基づい何かを行う
   End if

JavaScript のカプセル化

4DはJavaScriptソースコードとJavaScript .js ファイル (例 <SCRIPT SRC="...")とをHTMLドキュメントに埋め込むことをサポートしています。

標準モードでSEND HTML FILESEND HTML BLOBを使用すると、HTMLソースエディタで編集したHTML

ソースや4Dからディスクに保存したHTMLを送信します。両方のケースで、ページをフルコントロールできます。ドキュメントのHEAD部にJavaScriptスクリプトを挿入したり、FORMマークアップでスクリプトを使用したりできます。先の例題で、フォームに名前を付け、スクリプトからそのフォームを参照しました。またフォームのマークアップレベルでサブミットを受け入れたり拒否したりできます。

コンテキストモードにおいて、4DフォームにHTMLをカプセル化すると、HEAD部やFORM宣言を使用してコントロールすることはできません。このスクリプトのスコープは異なります。例えばHTMLフォームに名前を使用してアクセスすることはできません。しかし先の例題のIs4DWebServer JavaScript関数とこの関数を比べてみてください:

両関数は同じことをしています。後者はHTMLのdocumentオブジェクトのformsプロパティを使用して、forms[0]経由でオブジェクトにアクセスしています。結果として、4Dがフォームに名前を与えようと与えなかろうと、その名前を知らなくても処理が行われます。

Note: 4DはJava applets transportをサポートしています。

参照

4D HTMLタグ, SEND HTML BLOB, SEND HTML FILE, URLとフォームアクション.


4D - Documentation   French   English   German   Spanish   日本語   4D v11 SQLコマンドテーマリスト   4D v11 SQLインデックス   4D v11 SQL定数テーマリスト   戻る   前   次