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

4D v16.3

4D Web サーバーでは、"ポストした"データを復元することができます。"ポストした"データとは、Webフォームを通してユーザーが入力し、ボタンまたはインターフェース要素を使用してPOSTモードまたはGETモードでサーバーへ送信されたデータのことです。

Webサーバーは、ボタンに割り当て可能な、複数の特定のURLを受け入れることができるので、フォームの投稿がサーバー側の処理をトリガーすることができます。これらのURLの詳細は、URLとフォームアクションセクションにまとめてあります。

この章ではフォーム内からサーバーへと返されたデータを復元する際の適用される原理をカバーしています。

ダイナミックな値の受信

4D server がポストされたフォームを受信すると、4Dはそれに含まれるどんなHTMLオブジェクトの値も受け取ることができます。この原理はユーザーが値を入力または修正して、評価ボタンをクリックするという WEB SEND FILE コマンドまたは WEB SEND BLOB コマンドの例題で送信されたWebフォームにおいても使用可能です。この場合、4Dがリクエスト内のHTMLオブジェクトの値を取得する方法は二つあります:

WEB GET VARIABLES コマンドを使用
または、 WEB GET BODY PART コマンドと WEB Get body part countコマンドを使用

WEB GET VARIABLES コマンドは値をテキストとして受け取るのに対し、 WEB GET BODY PART コマンドと WEB Get body part count コマンドはBLOBを使用してポストされたファイルを取得します。

互換性の注意 (4D v13.4): 以前のバージョンでは、 4DはHTTP フォームまたはGET type URLを使用してポストされた変数の値を、4Dプロセス変数へとコピーしていました。(コンパイルモードでは、変数は COMPILER_WEB プロジェクトメソッドにて事前に宣言されていなければなりませんでした)。この機能は4D v13.4以降削除されており、変換されたデータベースにおいては互換性のために維持はされているものの、データベース設定の互換性ページ内のWeb変数に値を自動的に代入するのオプションのチェックを外すことによって無効化することができます(このチェックは外して WEB GET VARIABLES コマンドまたは WEB GET BODY PART コマンドを使用することが推奨されます)。

以下の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="" 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>

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

このページの主な特徴は:

送信のためのボタンが3つ( vsbLogOn, vsbRegister そして vsbInformation)があるということ
Log Onをクリックすると、フォームからの送信はまず初めに JavaScript ファンクションの LogOn によって処理されます。名前が何も入力されていない場合、フォームは4Dに送信すらされず、JavaScript警告が表示されます。
フォームにはPOST 4D メソッドに加えて、Navigator のプロパティをvtNav_App から始まる名前の4つの隠しオブジェクトへとコピーする投稿スクリプト (GetBrowserInformation) を持っています。
また、このページにはvtUserName オブジェクトも含まれます。

ユーザーがHTMLフォーム上のボタンのどれかをクリックした際に呼び出される WWW_STD_FORM_POST という 4D メソッドについて検証します。

  // 変数の値の取得

 ARRAY TEXT($arrNames;0)

 ARRAY TEXT($arrValues;0)

 WEB GET VARIABLES($arrNames;$arrValues)

 C_TEXT($user)

 

 Case of

 

  // Log On ボタンがクリックされる

    :(Find in array($arrNames;"vsbLogOn")#-1)

       $user :=Find in array($arrNames;"vtUserName")

       QUERY([WWW Users];[WWW Users]UserName=$arrValues{$user})

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

       If($0)

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

  // WWW POST EVENT メソッドによって情報がデータベースのテーブルへと保存される

       Else

 

          $0:=WWW Register

  // WWW Register メソッドによって新しいWebユーザーが登録可能

       End if

 

  // Register ボタンがクリックされる

    :(Find in array($arrNames;"vsbRegister")#-1)

       $0:=WWW Register

 

  // Information ボタンがクリックされる

    :(Find in array($arrNames;"vsbInformation")#-1)

       WEB SEND FILE("userinfos.html")

 End case

このメソッドの特徴は:

変数vtNav_appName, vtNav_appVersion, vtNav_appCodeName, そして vtNav_userAgent の値(HTMLオブジェクトと同じ名前を持つことでそれぞれバインドされています)は、WEB GET VARIABLES コマンドを使用することによって GetBrowserInformation JavaScript のスクリプトで作成された HTML オブジェクトから取得することができます。

3つの投稿ボタンにバインドされている変数vsbLogOn, vsbRegister と vsbInformation のうち、クリックされたボタンに対応するもののみが WEB GET VARIABLES コマンドによって取得されます。この3つのうちどれかのボタンによって投稿が行われたとき、ブラウザはクリックされたボタンの値を4Dに返します。これによりどのボタンがクリックされたのが分かります。4Dフォーム側の4Dボタンは数字変数であることに留意して下さい。しかしながら、HTMLでは全てのオブジェクトはテキストオブジェクトです。

SELECT objectを使用した場合、 WEB GET VARIABLES コマンドで返されるのはオブジェクト内でハイライトされている要素の値であり、4Dのように要素の配列内の位置を返すわけではないという事に留意して下さい。

WEB GET VARIABLES コマンドは必ずテキスト型の値を返します。

チャンクドトランスファーエンコーディングのサポート

4D v15 R3以降、ビルトインされている4D Web Serverは、どのWebクライアントからでもチャンクドトランスファーエンコーディングでアップロードされたファイルをサポートするようになりました。チャンクドトランスファーエンコーディングはHTTP/1.1にて定義されているデータ転送方式です。これを使用する事により、最終的なデータサイズを知る事なく、データを複数の"チャンク"(部分)に分けて転送することができます。

注: 4D Web Serverでは、サーバーからWebクライアントへのチャンクドトランスファーエンコーディングもサポートしています(WEB SEND RAW DATAを参照して下さい)。

チャンクドトランスファーのクライアント側の実装についてのより詳細な情報については、RFC7230 またはそれに関連したWikipedia のページを参照して下さい。

COMPILER_WEB プロジェクトメソッド

COMPILER_WEB メソッドが存在していた場合、それはHTTPサーバーが動的なリクエストを受け取り4D エンジンを呼び出した場合に、システムを通して呼び出されます。これは例えば4D Webサーバーがポストされたフォーム、または4DCGI/ アクションを含んだURLを受け取る場合等が該当します。このメソッドはWebでの交換時に使用された型指定または変数初期化指示子を含めることを目的としています。これはデータベースのコンパイル時にコンパイラによって使用されます。COMPILER_WEB メソッドは全てのWebフォームで共通です。デフォルトでは、COMPILER_WEB メソッドは存在しません。明示的に作成する必要があります。

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

参照

4D 変換タグ
 URLとフォームアクション
 WEB GET BODY PART
WEB SEND BLOB
WEB SEND FILE