データへのHTMLエレメントのバインド
.gif)
|
.gif){kind=small}
|
.gif){kind=small}
|
.gif){kind=small} 前のトピック: ページへのデータソースオブジェクトの追加 .gif){kind=small} 次のトピック: データバインドをサポートするDHTMLオブジェクトモデル | ||
データへのHTMLエレメントのバインド
データソースオブジェクト(DSO)から供給されるデータを表示するには、データソースオブジェクトにHTMLページのエレメントをバインドする。データバインドのためのHTML拡張や対応するデータバインド プロパティを使えば、簡単にバインドできる。このセクションでは、データにエレメントをバインドする方法、データバインドをサポートするエレメント、これらのエレメントの機能について説明する。、エレメントにバインドされているデータの更新のサポートや、データをHTMLやプレーンテキストとして表示するサポートを含む。
バインド可能なHTMLエレメントは、単一値コンシューマと表形式データコンシューマの2つのカテゴリーに分けられる。単一値コンシューマは、データソースオブジェクトによって与えられたカレントレコードの1つのフィールドにバインドする。表形式データコンシューマは、データセット全体にバインドされ、その中のエレメントがテンプレートとして繰り返し使われる。nternet Explorer 4.0では、TABLEエレメントは表形式データコンシューマの実例となる。TABLEエレメントをデータにバインドするプロシージャはデータへのTABLEのバインドで説明する。
データへの単一値エレメントのバインド
データに単一値エレメントをバインドするやり方は、そのエレメントに関係なく同一である。設計時にエレメントにバインドするにはDATASRC属性とDATAFLD属性を使い、実行時にエレメントにバインドするにはドキュメントオブジェクトモデルで対応するオブジェクトによって公開されるdataSrcプロパティとdataFldプロパティを使う。
設計時にデータを単一値エレメントにバインドする
データセット中のフィールドへの完全なバインドを指定するには、データコンシューマ エレメントでDATASRC属性とDATAFLD属性を使う。たとえば、TEXTBOXにデータセットのフィールドを与えるには、次のように記述すれば、データにそのエレメントをバインドできる。
<INPUT TYPE=TEXTBOX DATASRC=#dsoComposers DATAFLD=compsr_last>
この例のDATASRC属性には、ページに埋め込まれたデータソースオブジェクトのIDをハッシュ記号(#)の後に指定する。ハッシュ記号は必ず付けること。DATAFLD属性には、TEXTBOXにバインドするデータソースオブジェクトから与えられたデータのフィールドを指定する。
データへのTABLEのバインド
ABLEエレメントは表形式データコンシューマなので、それに含まれるエレメントはデータソースオブジェクトから与えられたデータセットのどのフィールドにバインドされるかによって変わる。包まれるエレメントはテンプレートの役目を果たし、データセットの各レコードに対して1回ずつ繰り返される。TABLEエレメントにはDATASRC属性を指定する。包まれるエレメントにはDATAFLD属性を指定する。DATASRCはTABLEエレメントから継承される。次に例を示す。
<TABLE DATASRC=#dsoComposer> <TR><TD><SPAN DATAFLD=compsr_first></SPAN></TD></TR> </TABLE>
単一値コンシューマと同様に、表形式データコンシューマでもドキュメントオブジェクトモデルを使うと実行時にバインドできる。このプロシージャについては実行時にテーブルをバインドするで説明する。
データバインドをサポートするエレメント
前のセクションでは、データソースオブジェクトから与えらるたデータと単一値コンシューマや表形式データコンシューマをバインドする方法を説明するために、TEXTBOX、SPAN、TABLEエレメントを使った。この他のHTMLエレメントにもデータをバインドできる。バインドされたデータの更新ができるエレメントもある。データソースオブジェクトで更新をサポートする場合、変更はバックエンドのデータセットで保存される。エレメントによっては、DATAFORMATAS属性を使うことでデフォルトのプレーンテキスト以外に、HTML形式のデータの表示をサポートする。
次の表は、データバインドをサポートする単一値HTMLエレメントを表示している。追加のカラムでは、次のことを表示する。
- エレメントが更新をサポートするかどうか。
- エレメントがそのデータをHTMLとして表示するかどうか。
- データが適用されるプロパティ。
ドロップダウン リストを使うと、エレメントをフィルタできる
バインド可能なエレメント バインド可能な、更新をサポートするエレメント バインド可能な、読み込み専用エレメント バインド可能な、HTML表示をサポートするエレメント
| エレメント | 更新可能 | HTML表示 | バインドされるプロパティ |
読み込み専用エレメント
読み込み専用のバインド可能なHTMLエレメントには、A (アンカー)、BUTTON、DIV、IMG (画像)、FRAME、IFRAME、LABEL、MARQUEE、SPANがある。
このうち、BUTTON、DIV、LABEL、MARQUEE、SPANエレメントではDATAFORMATAS属性属性および、対応するdataFormatAsプロパティを使って、エレメントにバインドされているデータをプレーンテキスト(デフォルト)やHTMLとして表示できる。データソースオブジェクトから継続されたレコード ポインタが移動したり、エレメントで表示されるデータに変更があったときは、その表示は自動的に更新される。以下で、これらの各エレメントについて説明する。
A
アンカー エレメントは、HREF属性にデータソースオブジェクトから与えられたデータを適用する。従って、与えられたデータにはURLでなければならない。バインドされたアンカーの例を次に示す。
<A DATASRC=#dsoLinks DATAFLD=link_href><SPAN DATASRC=#dsoLinks DATAFLD=link_friendly></SPAN></A>
BUTTON
BUTTONエレメントは、ボタンのラベルにデータソースオブジェクトから与えられたデータを表示する。バインドされたBUTTONの例を次に示す。
<BUTTON DATASRC=#dsoLinks DATAFLD=link_friendly></BUTTON>
DIV
DIVエレメントは、テキストのブロックを表示するのに役立つ。バインドされたDIVの例を次に示す。
<DIV DATASRC=#dsoComposer DATAFLD=compsr_biography></DIV>
IMG
IMGエレメントは、データソースオブジェクトから与えられたデータに適用し、SRC属性で画像の配置、ロード、表示を指定する。バインドされたカラムから生の画像データを与えることはできない。
バインドされたIMGタグの例を次に示す。
<SPAN DATASRC=#dsoImages DATAFLD=image></SPAN>
FRAME
FRAMEエレメントは、データソースオブジェクトから与えられたデータをHREF属性に適用する。このため、バインドされた値はURLである。うまくバインドさせるには、バインドされたフレームにデータを与えるデータソースオブジェクトは、FRAMESETを含むHTMLファイルのHEADセクションになければならない。バインドされたFRAMEの例を次に示す。
<HTML> <HEAD> <<!-- Add DSO reference here --> </HEAD> <FRAMESET> <FRAME DATASRC=#dsoFAQ DATAFLD=frame_question ...> <FRAME DATASRC=#dsoFAQ DATAFLD=frame_answer ...> </FRAMESET> </HTML>
[Show Me]ボタンをクリックすると、この動作が確認できる。フレームを使ったFAQの表示を例にしている。3つに分割されたフレームは、1番上が質問を、真ん中が解答を、下がナビゲーションボタンを表示する。上2つのフレームに、テーブルをバインドしている。バインドされるテーブルの最初のカラムには質問ページのURLが、2番目のカラムには解答ページのURLがそれぞれ指定されている。データソースオブジェクトはFRAMESETのある外部ページのHEADに埋め込まれるので、ナビゲーションボタンのページではtopオブジェクトを使うコードのあるページ以外に配置し、そのIDによりデータソースオブジェクトを参照する。topオブジェクトでは、ウィンドウを含む一番外側にオブジェクトのリファレンスを返す。
IFRAME
IFRAMEエレメントは、データソースオブジェクトから与えられたデータをHREF属性に適用する。従って、データはURLである。FRAMEの場合とは逆に、データソースオブジェクトはページのどこでも宣言できる。バインドされたIFRAMEの例を次に示す。
<IFRAME DATASRC=#DSC1 DATAFLD=iframe_url>
LABEL
LABELエレメントを使うと、ページ上の他のバインドされたエレメント対する説明を追加できる。ラベルでは、データソースオブジェクトから与えられたデータにはキャプションとなる。バインドされたLABELの例を次に示す。
<LABEL FOR=somecontrolid DATASRC=#DSC1 DATAFLD=label_col></LABEL>
LABELはFOR属性で指定される他のエレメントに関連するので、繰り返しテーブル中でバインドされたLABELを使うと、予想外の結果が生じる。FOR属性が繰り返しテーブル中の他のエレメントを参照する場合、繰り返しの結果として同じID/NAMEを持つ複数のエレメントが存在するので、LABELタグはそれらのエレメントと関連できなくなる。
MARQUEE
ARQUEEエレメントは、バインドされたデータを、開始／終了タグで囲まれたテキストの内容と置き換えることができる。
バインドされたMARQUEEの例を次に示す。
<MARQUEE DATASRC=#dsoComposer DATAFLD=bio DATAFORMATAS=HTML></MARQUEE>
SPAN
DIVと同様に、SPANは読み込み専用のデータコンシューマである。SPANを使うと、インライン テキストや区切り文字付きのテキストを表示できる。SPANを使ってHTMLテキストを表示する場合、そのテキストにはHTMLブロックエレメントがあってはならない。データソースオブジェクトから与えられたバインドしているカラムのカレントレコードやその値が変化すると、SPANではその変更を反映する。バインドされたSPANの例を次に示す。
<SPAN DATASRC=#dsoComposer DATAFLD=compsr_last></SPAN>
更新をサポートするエレメント
データソースオブジェクトが更新の機能をサポートする場合、APPLET、INPUT (ボタン タイプは除く)、SELECT、TEXTAREA、OBJECTエレメントではバインドされたエレメントでデータの更新をサポートする。これらの個々のエレメントについて、次に示す。
INPUT
INPUTエレメントは、HTML固有のコントロールのセットである。データバインドをサポートする各型については、次のセクションで詳しく説明する。
RADIO
ラジオボタンは、複数の値から1つの値を選択するのに使用できる。また、データベースの列挙されたフィールドの値を選択するのにも使用できる。1つのラジオボタンでは、別々のINPUTを使ってそれらの値を指定する。INPUTのNAME属性は、論理的なグループを決定する。1つの値は、同じNAME属性のすべてのINPUTに対してバインドされる。グループの全メンバーには、対応するDATASRC属性とDATAFLD属性を指定しなくてはならない。
バインドされたラジオボタンの例を次に示す。
<INPUT TYPE=RADIO NAME=cards VALUE=mc DATASRC=#dsoOrders DATAFLD=cardname>MasterCard <INPUT TYPE=RADIO NAME=cards VALUE=amex DATASRC=#dsoOrders DATAFLD=cardname >American Express <INPUT TYPE=RADIO NAME=cards VALUE=visa DATASRC=#dsoOrders DATAFLD=cardname >Visa
CHECKBOX
チェックボックスでは、HTMLフォームを送るときにVALUEの属性を使えるが、IE4/MSHTMLでは単純な論理値の選択項目としてチェックボックスを使用する。チェックボックスは、チェックの有無によりTRUEかFALSEの論理値を生成する。バインディング エージェントは、データセットの値を強制する。次の自動型変換は、バインドされたカラムの型を基にサポートされる。
データソースオブジェクトから与えられる様々なデータ型に対する、バインドされたチェックボックスの値を、以下に示す。
| データ型 | 予期されるTrue値 | 予期されるFalse値 |
| 文字列 | "True" | "1" | <空でない文字列> | "False" | "0" | <空でない文字列> |
| Integer型 | ゼロ以外 | 0 |
| Float型 | ゼロ以外 | 0 |
| Date型 | 無効 | 無効 |
| Currency型 | ゼロ以外 | 0 |
バインドしたチェックボックスの例を次に示す。
<INPUT TYPE=CHECKBOX DATASRC=#dsoSurvey DATAFLD=us_resident> U.S. Resident
TEXT
TEXT型は単にテキストボックスとして使用される。テキストボックスの値は、DATASRC属性とDATAFLD属性を使ってデータソースのフィールドにバインドされる。
バインドされたテキストボックスの例を次に示す。
<INPUT TYPE=TEXT DATASRC=#DSC1 DATAFLD=name>
HIDDEN
HIDDEN型は、ユーザーには表示されないデータをページに格納するために使用される。エレメントはカレントレコードからデータと共に配置されるが、変更はできない。
バインドされた見えないフィールドの例を次に示す。
<INPUT TYPE=HIDDEN DATASRC=#DSC1 DATAFLD=key>
PASSWORD
PASSWORD型は、バインドされたテキストがユーザーには読めない点を除けば、TEXT型と基本的には同じである。データバインド オブジェクトモデルからエレメントの値を直接スクリプトで完全にアクセスできるので、注意してこの入力型を使うこと。
バインドされたパスワードの例を次に示す。
<INPUT TYPE=PASSWORD DATASRC=#DSC1 DATAFLD=password>
SELECT
SELECTエレメントでは、ドロップダウン リスト(コンボ ボックス)やリスト ボックスの機能を提供する。Internet Explorerでは、1つの選択エレメントへのバインドをサポートしている。複数選択のバインドはサポートしない。
SSELECTコントロールの項目はOPTIONタグを使って指定する。ドキュメントオブジェクトモデルでは、SELECTに対するOPTIONタグのコレクションに対応するOPTION配列を定義する。各OPTIONには対応するインデックス、テキスト、値がある。SELECTには、現在選択されているOPTIONのインデックスに対応するselectedIndexプロパティがある。項目が選択されない場合、selectedIndexは-1に設定される。OPTIONのtext属性はOPTIONタグの次のテキストに対応し、SELECTのOPTIONで表示される文字列を表示する。VALUE属性では、HTML形式が表示されるときに返される値を提供する。また、値はデータソースのバインドされたカラムに格納される値でもある。
まず、バインドされたSELECTコントロールのselectedIndexプロパティは、データソースのフィールドの値に対応するOPTION配列のインデックスに設定される。値がOPTION配列のメンバーでない場合、indexプロパティは-1に設定される。SELECTがcomboの場合は、値は表示されない。ユーザーが選択された項目を変更すると、対応するOPTION値(属性)は、データソースのバインドされたフィールド値を更新するのに使用される。validationイベントが他のコントロールと同様に発生する。
バインドされたSELECTの例を次に示す。
<SELECT DATASRC=#DSC1 DATAFLD=cardname> <OPTION VALUE=mc>MasterCard <OPTION VALUE=amex>American Express <OPTION VALUE=visa>Visa </SELECT>
TEXTAREA
TEXTAREAは、INPUT TYPE=textに似ているデータ入力用の複数行のテキストボックスである。データソースオブジェクトが更新機能をサポートする場合、データの更新もサポートされる。
バインドされたTEXTAREAの例を次に示す。
<TEXTAREA DATASRC=#dsoComposer DATAFLD=bio></TEXTAREA>
OBJECT
OBJECTでDATASRC属性とDATAFLD属性が指定されると、Internet Explorer 4.0ではオブジェクトのデフォルトプロパティへのバインドを試す。オブジェクトの型情報で指定されるdefaultbind属性は、デフォルトプロパティを指定する。デフォルトプロパティがこの方法で指定されない場合、Internet Explorer 4.0ではDISPID 0をプロパティとして使用する。
OBJECTタグのデフォルト値をバインドする例を次に示す。
<OBJECT ID=oControl1 WIDTH=100 HEIGHT=100 CLASSID="CLSID:xxxxxxxxx-xxxxx-xxxx-xxxx-xxxxxxxxxxxxx" DATASRC=#DSC1 DATAFLD=controlData> </OBJECT>
この他に、Internet Explorer 4.0では、オブジェクトのPARAMタグを使って、任意のプロパティにバインドできる。DATASRC属性とDATAFLD属性をPARAMタグに適用すれば、データソースオブジェクトから与えられたデータで初期化される。
OBJECTタグの複数のPARAMをバインドする例を次に示す。
<OBJECT ID="oControl1" WIDTH=100 HEIGHT=100 CLASSID="CLSID:xxxxxxxxx-xxxxx-xxxx-xxxx-xxxxxxxxxxxxx"> <PARAM NAME="ForeColor" DATASRC=#DSC1 DATAFLD=forecolor> <PARAM NAME="BackColor" DATASRC=#DSC1 DATAFLD=backcolor> </OBJECT>
バインドでは、PARAMタグと同様に、オブジェクトのデフォルト値を同時に適用できる。
APPLET
Internet Explorer 4.0では、APPLETのPARAMタグへのバインドをサポートする。例えば、アプリケーションのxyzプロパティにバインドを指定する例を次に示す。
<APPLET CODE=somecode> <PARAM NAME="xyz" VALUE="abc" DATASRC="#Ctrl1" DATAFLD="Column1"> <PARAM NAME="Title" VALUE="BoundApplet"> </APPLET>
プロパティ名の決定
PARAMのNAME属性では、プロパティの値を読み書きするJavaメソッドのbasenameを指定する。これは、プロパティの値を読み出すJavaアプレットのメソッド名がget<basename>なので、basenameと呼ばれる。同様に、プロパティの値を設定するメソッドはset<basename>である。この命名規則は、JavaBeans 1.0の仕様と同じである。前のセクションで使用されたアプレットには、メソッド名getxyzとsetxyzがあるべきである。
通知
プロパティ値が変更されても、アプリケーションでは通知を発生しない。カレントレコードが変更されたときだけ、プロパティ変更が検出される。このとき、バインディング エージェントはアプリケーションに問い合わせ、validation後に変更されたデータの値をデータソースに転送する。値がデータソースで直接変更されると、バインディング エージェントはデータソースから通知され、直ちにアプリケーションに値を転送する。イベントモデルについては、データバインドをサポートするDHTMLイベントモデルのセクションを参照すること。
名前空間の混在
前の例のバインドされたPARAMは、最も複雑な仕様である。つまり、NAME属性で指定されるプロパティへのバインドと、対応するVARUE属性を持つ同じNAME属性があるアプリケーションへのパラメータでもあるからである。NAME属性がアプリケーションへのパラメータの名前空間とバインドの名前空間で使われるので、どうしても2つの名前空間が混ざる。このような場合、パラメータを読みとるとき(アプリケーションではgetParameterメソッドを使って読みとる)、アプリケーションでは予期しないPARAMのDATASRC属性とDATAFLD属性を無視する。そして、バインディング エージェントではその属性を認識し、前に説明したgetメソッドとsetメソッドを使ってバインドを試みる。
パラメータの名前空間とプロパティの名前空間が衝突しない場所の最も簡単な例を次に示す。
<APPLET> <PARAM NAME="backcolor" DATASRC="#DSC1" DATAFLD="Color"> </APPLET>
backcolorプロパティはDATASRC属性とDATAFLD属性だけにある。VALUE属性は指定されない。
.gif)
トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.