データバインディング、イベント生成、コンテンツエディタ

データバインディング

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のアイテムに表示され、簡単に確認することができます。

Bind Mark

Bind Itemの追加および編集

Create Component & Bind Item Editor

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

Ctrlキーを押しながらDatasetをForm領域にドラッグ&ドロップするか、マウス右クリックして表示されるメニューから[Create Component & Bind Dataset]項目を選択して、Datasetを選択すると、編集ウィンドウが表示されます。

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

コンテキストメニューの「Create Component & Bind Dataset」によりコンポーネントを生成すると、leftプロパティの初期値が「0」、topプロパティの初期値が「0」で生成されます。

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の表示方法を変更することができます。

Binding Components Listウィンドウ

Invisible Objectsウィンドウで選択したDatasetオブジェクトとバインドされたコンポーネントのリストを表示します。リストに表示されたコンポーネントの項目の上にマウスカーソルを置くと、バインディング情報を表示して、コンポーネント項目をダブルクリックすると、デザイン画面で該当コンポーネントにフォーカスを移動します。

コンテンツエディター

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

基本編集ウィンドウ

Grid Contents Editor[Formats]

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

Bind Item Editor


プロパティ

説明

1

Format

Formatを追加/削除することができます。

2

ツールバー

Body、Detailバンドを追加/削除するか、バンド編集ウィンドウに切り替えます。

コンテキストメニューからも選択できます。


Append Body(Detail): Body(Detail)バンドを追加します。既に追加された場合には、無効になります。

Delete Body(Detail): Body(Detail)バンドを削除します。

Edit Body(Detail): Body(Detail)バンドの編集ウィンドウに切り替えます。バンド領域内の各セルを編集することができます。

3

プロパティ

ウィンドウ

選択されたBody(Detail)バンドのプロパティを表示して編集することができます。

バンド編集ウィンドウ

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

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つを選択してデザイン画面上でマウスをダブルクリックするか、[プロパティ]ウィンドウでイベントを選択してマウスをダブルクリックすると、下記のようにイベント関数名が生成されます。