データバインディング

Datasetオブジェクトのデータをコンポーネントと紐づけてテキストを表示したり、コンポーネントのプロパティ値を設定することができます。また、コンポーネントで編集した値はDatasetオブジェクトのデータとして反映されます。Datasetのデータをコンポーネントに紐づける行為をデータバインディングといいます。GridコンポーネントのようにDatasetオブジェクトのすべてのデータと紐づけたり、Editコンポーネントのように選択したRowに該当するのカラムデータのみ紐づけることができます。

データバインディングの設定

フォームデザイン画面にて、生成済のDatasetオブジェクトをコンポーネントの上にドラッグ&ドロップしたり、選択したコンポーネントに対してプロパティリストよりバインディング関連のプロパティを設定することでバインドすることができます。

Datasetオブジェクトをコンポーネントの上にドラッグ&ドロップすると、コンポーネントの種類によってformatsプロパティが設定されたり、Bind InnerDatasetやBind Item Editor機能が呼び出されます。各設定画面にて、紐づけるプロパティとカラム情報を指定することができます。

Bind Global Dataset

formatsプロパティ値の設定

Grid、ListViewコンポーネントのように、binddataset、formatsプロパティを持っているコンポーネントはDatasetオブジェクトをドラッグ&ドロップしたり、プロパティリストよりbinddatasetプロパティを設定する際に、Datasetオブジェクトのデータによってformatsプロパティ値が自動的に設定されます。

formatsプロパティ値はGrid Contents EditorもしくはListView Contents Editorで変更することができます。

Bind InnerDataset

リストボックスやコンボのようにリスト形式でデータを表示できるコンポーネントにDatasetをバインドする場合、datasetのカラムを指定できるBind InnerDataset機能が呼び出されます。

Inner Bind Dataset
プロパティ	説明
codecolumn	コンポーネントのvalueとして使用されるカラムを指定
datacolumn	コンポーネントのtextとして表示されるカラムを指定

コンポーネントによって設定できるカラムは異なる場合があります。詳細については下記の表をご参照ください。

Inner Bind Dataset
コンポーネント	カラムと紐づけるプロパティ
Combo、ListBox、Radio	codecolumn、datacolumn
Calendar	backgroundcolumn、bordercolumn、datecolumn、textcolorcolumn
Menu、PopupMenu、 TrayPopupMenu	captioncolumn、checkboxcolumn、enablecolumn、hotkeycolumn、iconcolumn、idcolumn、levelcolumn、userdatacolumn

TrayPopupMenuは、Bind InnerDatasetウィンドウを使用せずに、Tray設定画面でinnerdatasetを設定し、各カラムと紐づけるプロパティを設定します。

Bind Item Editor

Datasetオブジェクトをドラッグ&ドロップした際に、innerdatasetプロパティを持っているコンポーネントの場合はBind InnerDatasetとBindItemのどちらかを選択することができます。innerdatasetプロパティがを持っていないコンポーネントの場合はBind Item Editorが表示されます。

Bind Item Editor

Bind Item Editor
	設定項目	説明
1	Bind ID	ユーザー分類ID
2	Object	DatasetがバインドされるコンポーネントのID
3	Property	Datasetがバインドされるコンポーネントのプロパティ
4	Dataset	コンポーネントにバインドするDataset
5	Column ID	コンポーネントにバインドするDatasetのカラムID

DatasetがFormやコンポーネントにバインドされた場合、図のようにProject Explorerのアイテムに表示され、簡単に確認することができます。

Datasetオブジェクトがinnerdatasetプロパティを持つコンポーネントのinnerdatasetプロパティ値として設定（バインディング）されている場合には、Project Explorerで該当のコンポーネントのアイコン表示に変化はありません。バインディング状態のアイコン表示はBind Item Editorで設定した場合にのみ該当します。

Bind Mark

Bind Dataset Editor

Desgin画面でFormオブジェクトもしくはコンポーネントを選択した状態でコンテキストメニューから「Bind Dataset」項目を選択することで、1つ以上のDatasetオブジェクトとのバインディング設定を行えます。

Bind Item Editor
	設定項目	説明
1	Target Component	コンポーネントを選択した状態でBind Dataset機能を実行した場合は選択したコンポーネントが表示されます。他のコンポーネントを選択したり、「Create Component」を選択することで新たなコンポーネントを生成することができます。
2	Dataset	利用できるDatasetオブジェクトの一覧が表示されます。 Form内のDatasetオブジェクトとGlobal Datasetとして生成したDatasetオブジェクトが表示されます。
3	Bind Type	Target Componentによって選択できるBind Typeが活性化します。
4	Property	Bind Typeによって設定できるプロパティの一覧が表示されます。現在選択しているDatasetオブジェクトとバインディングされた場合は黒色でカラムIDが表示され、選択していないDatasetオブジェクトとバインディングされた場合は赤色でカラムIDが表示されます。

Bind Itemの追加および編集

Create Component & Bind Item Editor

Bind Item Editorと同じように、コンポーネントにDatasetをバインドする場合に使用します。相違点は、Bind Item Editorの場合、あらかじめ生成されたコンポーネントにバインドしますが、Create Component＆Bind Item Editorは、コンポーネントの生成と同時にバインドできるようにする機能を提供します。

Ctrlキーを押した状態でDatasetオブジェクトをForm領域にドラッグ＆ドロップすると、編集ウィンドウが表示されます。

Bind Item Listは、Bind Item Editorで追加した値です。該当リストから直接編集することはできず、情報のみを表示します。

Bind Stateアイコンの表示および編集

フォーム上でマウスの右クリック＞[State View]より[Bind]項目を選択すると、バインドされているコンポーネントを確認できるBind State状態になります。

バインドされているコンポーネントの右下にはDatasetのアイコンが表示され、そのアイコンをクリックするとBind Item Editorが表示されます。

プロパティリストでの編集

コンポーネントを選択し、Properties Windowで「Bindable」アイコンをクリックすると、各プロパティ別にBindアイテムを追加したり編集することができます。

データバインド情報の確認

Invisible Objectsウィンドウ

開発時に使用する画面に表示されないオブジェクトは、個別に管理することができる Invisible Objects領域が提供されます。該当ウィンドウは、ドッキングウィンドウ型で提供します。

Invisible Objectウィンドウが表示されない場合、メニュー[Design]の項目の中から[Show Invisible Object Area]を選択すると、Invisible Objectウィンドウを開くことができます。

Invisible Objectウィンドウのコンテキストメニューを呼び出すと、Iconの表示方法を変更することができます。

Invisible Objectペインでは、項目数が多い場合に指定した文字列の一致する名前に絞り込むフィルター機能を提供します。入力した文字列とidが一致する部分があるオブジェクトをドロップダウンリストで表示します。一覧はidプロパティ値をアルファベット順で並び替えて表示します。

一覧からオブジェクトを選択すると、該当のオブジェクトが選択された状態になります。

区切り文字（スペース、カンマ、セミコロン）により複数のフィルタリング項目を指定することができます。

Binding Components Listウィンドウ

Invisible Objectsウィンドウで選択したDatasetオブジェクトとバインドされたコンポーネントのリストを表示します。リストに表示されたコンポーネントの項目の上にマウスカーソルを重ねると、バインディング情報が表示されます。コンポーネント項目をダブルクリックするか、コンテキストメニューから「Edit」を選択すると、Bind Dataset Editor画面が表示されます。

コンテンツエディター

Grid Contents Editor

Gridコンポーネントは、プロパティリストで表示される項目以外にグリッドを構成するそれぞれのセル単位別に多くのプロパティを持っています。Grid Contents Editorは、GridのContentsプロパティを編集することのできるエディタです。

デザインウィンドウで Gridコンポーネントをダブルクリックして Grid Contents Editorを呼び出すことができます。

Grid Contents Editorは、基本編集ウィンドウ、プロパティウィンドウ、デザインソースで構成されています。基本編集ウィンドウでは、ポップアップメニューやシュートカットキーとを使ってセルを追加/削除したり、プロパティを編集することができます。基本編集ウィンドウの最上段にはカラムインデックスが表示され、下にはHead、Body、Summaryに区分されて表示されます。プロパティウィンドウには、セル区分、該当セルのプロパティリスト、それぞれのプロパティ値が表示されます。

基本編集ウィンドウ

Grid Contents Editor[Formats]

Grid Contents Editor上部のツールバーまたはマウス右クリックして表示されるメニューから必要な機能を選択することができます。

Bind Item Editor
	設定項目	説明
1	Format	Formatを追加/削除することができます。
2	Add Column	Columnを追加します。基本的な機能はBody Columnの追加であり、選択に応じてLeft、Right Columnを追加することができます。
3	Add Head Row	Head Rowを追加します。
4	Add Body Row	Body Rowを追加します。
5	Add Summary Row	Summary Rowを追加します。
6	Add	選択されたRowやColumn項目を最終項目として追加します。 Cellを選択した場合には、Columns、Rowsのいずれかを選択します。
7	Insert	選択されたRowやColumn項目を前の項目として追加します。 Cellを選択した場合には、Columns、Rowsのいずれかを選択します。
8	Delete	選択されたRowやColumn項目を削除します。 Cellを選択した場合には、Columns、Rowsのいずれかを選択します。
9	Merge Cells	2つ以上のセルを選択した場合、セルを結合します。基本的な機能は、選択したセルを一つにまとめ、選択に応じて個々のセルのプロパティは保持した状態で結合する機能を使用することができます。
10	Split Cell	結合されたセルを結合解除にします。
11	Same Width	選択されたColumnの幅を調整します。最後に選択されたColumn基準に調整するか、直接値を指定することができます。
12	Same Height	選択されたRowの高さを調整します。最後に選択されたRow基準に調整するか、直接値を指定することができます。
13	プロパティウィンドウ	選択した項目のプロパティウィンドウ Head、Body、Summary Rowのセルの選択時に、コンテキストメニューでユーザープロパティを追加したり削除することができます。

HeadまたはBody領域のRowが多い場合、エディタの左側にあるタイトル領域をダブルクリックすると、該当領域のみ表示されたり、領域全体が表示されるように選択することができます。

Format

同じデータをレイアウトごとに異なる表示形式にする場合や、利用者の権限に応じてデータの一部を隠す必要がある場合などに、1つのGridで複数のFormatを使用してデータを処理することができます。

新しいFormatを追加したり、既存のFormatをコピーした後、一部の項目を変更することができます。GridでFormatを適用するときは、formatid プロパティ値を指定して目的のFormatを選択します。

Design Source

Design Sourceウィンドウでは、編集された内容がXML形式で表示され、必要な項目を直接変更することができます。

Grid Contents Editor[Design Source]

ListView Contents Editor

ListViewコンポーネントはプロパティウィンドウに表示されるプロパティのほかListViewを構成する各Band、Cell単位ごとに追加プロパティを持っています。ListView Contents Editorは、ListViewの追加プロパティを編集することができる機能を提供します。

デザインウィンドウでListViewコンポーネントをダブルクリックすると、ListView Contents Editorを呼び出すことができます。

ListView Contents Editorは基本編集ウィンドウ、Bandの編集ウィンドウ、プロパティウィンドウ、およびDesign Sourceで構成されています。基本編集ウィンドウでは、コンテキストメニューとショートカットを使用してBody、Detail Bandを追加／削除するか、プロパティを編集することができます。基本編集ウィンドウの左側にはBody、Detailで区分されて表示されます。プロパティウィンドウには、Bandやセルのプロパティ値が表示されます。

基本編集ウィンドウ

Grid Contents Editor[Formats]

ListView Contents Editorの上部のツールバーもしくは右クリックして表示されるメニューから、必要な機能を選択することができます。

Bind Item Editor
	設定項目	説明
1	Format	Formatを追加／削除することができます。
2	ツールバー	Body、Detail Bandを追加／削除するか、Bandの編集ウィンドウに切り替えます。コンテキストメニューからも選択できます。 Append Body(Detail): Body(Detail) Bandを追加します。既に追加された場合には、無効になります。 Delete Body(Detail): Body(Detail) Bandを削除します。 Edit Body(Detail): Body(Detail) Bandの編集ウィンドウに切り替えます。Band領域内の各セルを編集することができます。
3	プロパティウィンドウ	選択されたBody(Detail) Bandのプロパティを表示して編集することができます。

Bandの編集ウィンドウ

基本編集ウィンドウにて、[Edit Body]もしくは[Edit Detail]メニュー選択時、Bandの編集モードに切り替えます。

Bind Item Editor
	設定項目	説明
1	ツールバー（セル）	セルを選択するか、編集領域の位置を変更することができ、新しいセルを追加することができます。 Select：1つ以上のセルを選択することができます。 Move：画面が描画されるキャンバス領域の位置を移動します。 Cell：新しいセルを追加します。 Exit Editor：基本編集モードに切り替えます。
2	ツールバー（Align）	配置されたセルの位置を並べ替えるか、サイズを合わせることができます。 Align 項目の説明を参考してください。
3	編集ウィンドウ	コンポーネントをForm編集ウィンドウに配置するように、キャンバス上にセルを配置して、位置とサイズを指定することができます。 Form編集の際に使用するPositionプロパティ、トラッカー、Fit to Content、PositionBase、ガイド機能を使用することができます。 Formデザイン\|Position、ガイド項目の説明を参考してください。
4	プロパティウィンドウ	選択したセルのプロパティを表示して編集することができます。コンテキストメニューでユーザープロパティを追加したり削除することができます。

Format

同じデータをレイアウトごとに異なる表示形式にする場合や、利用者の権限に応じてデータの一部を隠す必要がある場合などに、1つのListViewで複数のFormatを使用してデータを処理することができます。

新たなFormatを追加するか、既存のFormatをコピーした後、いくつかの項目を変更することができます。ListViewでFormatを適用する場合は、formatid プロパティ値を指定して目的のFormatを選択します。

Design Source

Design Sourceウィンドウでは、編集された内容がXML形式で表示されて、必要な項目を直接変更することができます。

Grid Contents Editor[Design Source]

Json Contents Editor

DataObjectオブジェクトのようにcontentsプロパティ値が「true」であり、且つMetainfoでObjectInfoタグのcontentsformatの設定値が「json」であるオブジェクトの関連プロパティを選択した際に編集することができます。

Bind Item Editor
	設定項目	説明
1	URL	URL入力後、「Get」ボタンをクリックすると、該当JSONリソースを表示します。
2	Json Contents	JSONリソースを編集します。 type設定値によって下位アイテムを追加することができます。
3	表示モード	Contentsタブを選択すると、ツリーの形でデータを表示します。 Sourceタブを選択すると、コードの形でデータを表示します。

Sourceタブでコードを変更する際にエラーが発生した場合、エラー発生位置を表示します。

Data Path Editor

Datasetオブジェクトで、binddataobjectプロパティ値としてDataObjectオブジェクトを選択し、プロパティウィンドウでdataobjectpathプロパティを選択すると、編集できます。

Bind Item Editor
	設定項目	説明
1	Target Source	binddataobjectプロパティ値で選択したDataObjectを表示します。 DataObjectオブジェクトがcontentsプロパティ値を持つ場合は当該contentsを表示し、そうでない場合にはURL項目の値を入力してデータを取得することができます。
2	DataObject Path	Dataobject Root Pathを設定します。 Json Contents 結果から項目を選択して指定できます。 Path 設定後、「Refresh」ボタンをクリックすると、「Filtered Contents」タブにフィルターした結果値を表示します。
3	Json Contents	「Contents」タブを選択すると、データをツリー形式で表示します。「Filtered Contents」タブを選択すると、ツリー形式でフィルターしたデータを表示します。
4	Columns	Json Contentsデータから項目を選択し、カラムのdatapath値に設定します。

XML Contents Editor

基本的なXMLコードを追加することができるコンテンツエディタです。Pluginコンポーネントのようにcontentsプロパティ値が「true」であり、且つMetainfoでObjectInfoタグのcontentsformatの設定値が「xml」であるオブジェクトの関連プロパティを選択した際に編集することができます。

Basic Contents Editor

指定した形式に従ってXMLコードを生成できるコンテンツエディタです。オブジェクトのcontentsプロパティ値が「true」であり、且つMetainfoでContentsInfoタグのcontentsformatの設定値が「ObjectItem」であるオブジェクトの関連プロパティを選択した際に編集することができます。

オブジェクトで定義したtypename、maxoccurs、minoccursの設定値によって追加できるアイテムの種類や個数が決まります。

Bind Item Editor
	設定項目	説明
1	Object Tree	maxoccurs、minoccursの設定値によって下位アイテムを追加することができます。
2	Properties Window	選択したアイテムで設定できるプロパティが表示され、編集することができます。 typenameで設定したクラスに該当するプロパティを表示します。
3	表示モード	Contentsタブを選択した場合、ツリービュー形式でデータを表示します。 Sourceタブを選択した場合、コード形式でデータを表示します。

イベントの作成

イベントを編集するコンポーネントを選択した後にProperties Windowのイベント編集モードを選択してコンポーネントのイベントを作成することができます。イベントはユーザーが直接、入力して作成することもできますが、Propertiesの該当イベントをダブルクリックして自動的にイベントを生成することもできます。

Create Event Function

フォームに配置されたコンポーネントをダブルクリックすると、該当コンポーネントの特定イベントが自動的に生成されます。onclickイベントを持っている場合には、onclickイベントが生成され、その以外の場合には、指定されたイベントが生成されます。

コンポーネントを選択してイベント関数を生成する場合には、下記のようなルールに基づいて生成します。

コンポーネント選択条件	イベント関数名の生成ルール
一つのコンポーネントを選択	[コンポーネントID]_[イベント名]
二つ以上の同じ種類のコンポーネントを選択	[コンポーネントTYPE]_[イベント名]
二つ以上の異なる種類のコンポーネントを選択	Common_[イベント名]

たとえば、Buttonコンポーネント2つを選択してデザイン画面上でマウスをダブルクリックするか、[プロパティ]ウィンドウでイベントを選択してマウスをダブルクリックすると、下記のようにイベント関数名が生成されます。