ツリー表示コンポーネントリファレンス

ツリー表示コンポーネントの仕様と、ツリー記述ボキャブラリの概要や要素・属性を解説します。

1. 概要

ツリー表示コンポーネントは、xfyユーザーエージェント上でデータの階層構造を表現するコンポーネントです。この文書では、ツリー表示コンポーネントの仕様と、ツリー記述ボキャブラリの要素や属性、イベント、コマンドを解説します。

2. ツリー表示コンポーネント

ツリー表示コンポーネントは、データの階層構造をツリー形式で表現するxfyコンポーネントです。xfyユーザーエージェントで階層構造を持つデータを表示・編集するために使用します。ツリー表示コンポーネントは、表示・編集のために必要な基本的な機能だけを提供します。

2.1. コンポーネントの表示

ツリー表示コンポーネントは、画面上で次のように表示されます。

ツリー表示コンポーネント
ツリー表示コンポーネント

ツリー表示コンポーネントは次の表示部品で構成されています。

ノード
ツリーを構成する各要素を表します。ノードはアイコンとラベルから構成されます。
アイコン
要素の種類や状態を表現するために使用できるアイコンです。ノードの表示領域内の左側に表示されます。アイコンが指定されていない場合や、アイコンが正しく指定されていない場合は、アイコンは表示されません。
表示されるアイコンの大きさは、アイコン画像の実際の大きさにかかわらず、縦横ともに16pxです。
ラベル
要素の名前やIDなど、要素を区別するための文字列です。文字列が指定されていないときは、"???"と表示されます。ノードの表示領域内の右側に表示されます。アイコンが表示されていない場合は、アイコンの表示領域を詰めて左側から表示されます。
ラベルの文字色や背景色はノードごとに設定できます。また、表示されているラベルの文字列をインライン編集できるように、ツリーごとに設定できます。
展開アイコン
ノードに子ノードがあるときに、そのノード以下のサブツリーの表示・非表示を切り替えるアイコンです。子ノードがない場合、展開アイコンは表示されません。展開アイコンは、ツリー表示コンポーネントで用意しているものが使用されます。サブツリーが表示されていないときは、クリックするとサブツリーを表示するアイコン サブツリー表示アイコン が表示されます。サブツリーが表示されているときは、クリックするとサブツリーを非表示にするアイコン サブツリー非表示アイコン が表示されます。
ツリー内の最上位のノードは、展開アイコンを表示するかしないかを設定できます。それ以外のノードでは、設定できません。
ノードを結ぶ線
親子ノードや兄弟ノードを結ぶ直線です。直線は、アイコンが表示される位置の中央を始点または終点として、水平・垂直方向に引かれます。ノードを結ぶ線は、ツリーごとに表示するかしないかを設定できます。

ツリー表示コンポーネントの初期状態では、通常はサブツリーは表示されません。初期状態でサブツリーを表示するかしないかは、個別に設定できます。

ツリー表示コンポーネントで選択されているノードは、ラベルの背景がxfyユーザーエージェントで設定されている選択背景色で表示されます。

3. キー・マウス操作

ツリー表示コンポーネントのキーやマウスの操作に対する動作を説明します。

3.1. キー操作

キー 割り付けられている動作
現在選択されているノードの1つ上に表示されているノードを選択します。選択されるのは、直前の兄弟ノードか、親ノードです。
ラベルのインライン編集中だった場合は、何もしません。
現在選択されているノードの1つ下に表示されているノードを選択します。選択されるのは、直後の兄弟ノードか、直後にある親ノードの兄弟ノードです。
ラベルのインライン編集中だった場合は、何もしません。
現在選択されているノードに子ノードがある場合
サブツリーが表示されているときは、↓キーと同じ動作をします。サブツリーが表示されていないときは、サブツリーを表示します。
現在選択されているノードに子ノードがない場合
↓キーと同じ動作をします。
ラベルのインライン編集中だった場合は、キャレットを1文字右へ移動します。
現在選択されているノードが最上位ノードの場合
何もしません。
現在選択されているノードに子ノードがある場合
サブツリーが表示されているときは、サブツリーを非表示にします。サブツリーが表示されていないときは、親ノードを選択します。
現在選択されているノードに子ノードがない場合
親ノードを選択します。
ラベルのインライン編集中だった場合は、キャレットを1文字左へ移動します。
Enter ラベルのインライン編集中だった場合は、 tree:exited-editingイベントを発行してインライン編集を終了します。編集結果を反映する場合は、ツリー表示コンポーネントの利用者がイベントを受け取って、適切に処理する必要があります。
インライン編集中でない場合は、何もしません。
Esc ラベルのインライン編集中だった場合は、 tree:exited-editingイベントを発行してインライン編集を終了します。編集結果を反映する場合は、ツリー表示コンポーネントの利用者がイベントを受け取って、適切に処理する必要があります。
インライン編集中でない場合は、何もしません。
F2 ツリーの設定でラベルのインライン編集を許可しているときは、 tree:entering-editingイベントを発行します。イベントを処理した場合は、その処理を実行します。処理しなかった場合は、選択されているノードのラベルのインライン編集を開始します。
インライン編集を許可していないときは、何もしません。

3.2. マウス操作

マウス操作 割り付けられている動作
ノードの表示領域をクリック クリックしたノードを選択します。
ノードの表示領域をダブルクリック サブツリーの表示/非表示を切り替えます。
選択されているノードをクリック ツリーの設定でラベルのインライン編集を許可しているときは、 tree:entering-editingイベントを発行します。イベントを処理した場合は、その処理を実行します。処理しなかった場合は、インライン編集を開始します。
インライン編集を許可していないときは、何もしません。
サブツリー表示アイコン をクリック サブツリーを表示します。
サブツリー非表示アイコン をクリック サブツリーを非表示にします。
インライン編集中のラベル以外の領域をクリック tree:exited-editingイベントを発行してインライン編集を終了します。編集結果を反映する場合は、ツリー表示コンポーネントの利用者がイベントを受け取って、適切に処理する必要があります。

3.3. ラベルのインライン編集

ラベル文字列をインライン編集しているときは、通常の1行テキスト入力コントロールと同様の操作で入力できます。入力できる文字の制限は、ツリー表示コンポーネントの利用者が適切に処理する必要があります。

4. ツリー記述ボキャブラリ

ツリー記述ボキャブラリの概要を説明します。

4.1. 用途・役割

xfyユーザーエージェント上でツリー表示コンポーネントを使用するためのボキャブラリです。

4.2. 名前空間URI参照

ツリー記述ボキャブラリの名前空間URI参照はhttp://xmlns.xfy.com/treeです。以下の説明で、ツリー記述ボキャブラリの要素を記述するときは、tree:という名前空間接頭辞を使用します。

このほか、以下の説明中に出現するボキャブラリと、そのボキャブラリに使用している名前空間接頭辞は次のとおりです。

4.3. ツリー記述ボキャブラリに属する要素・属性・イベント

ツリー記述ボキャブラリに属する要素・属性・イベントを解説します。

4.3.1. ツリー記述

ツリー記述ボキャブラリで、ツリー表示コンポーネントを使用するときに使用する要素・属性は以下の通りです。

tree:tree 要素

ツリー表示コンポーネントで表示するツリー全体を表す要素です。

属性:
width

ツリー表示コンポーネントの幅を設定する属性です。ピクセル単位かパーセント単位の正の数値で記述します。

省略された場合、値は設定されていないものとみなされます。幅はツリーの状態によって変化します。

height

ツリー表示コンポーネントの高さを設定する属性です。ピクセル単位かパーセント単位の正の数値で記述します。

省略された場合、値は設定されていないものとみなされます。高さはツリーの状態によって変化します。

default-expanded-icon

子ノードを持つノードでサブツリーが表示されているときに表示するアイコンの、デフォルトのアイコンを設定する属性です。URI参照で記述します。

Javaがサポートしている形式のアイコンファイルを使用できます。また、アイコン画像の実際の大きさにかかわらず、縦横ともに16ピクセルで表示されます。

省略された場合、アイコンは設定されていないものと見なされます。

default-collapsed-icon

子ノードを持つノードでサブツリーが表示されていないときに表示するアイコンの、デフォルトのアイコンを設定する属性です。URI参照で記述します。

Javaがサポートしている形式のアイコンファイルを使用できます。また、アイコン画像の実際の大きさにかかわらず、縦横ともに16ピクセルで表示されます。

省略された場合、アイコンは設定されていないものと見なされます。

default-leaf-icon

子ノードを持たないノードに表示するアイコンの、デフォルトのアイコンを設定する属性です。URI参照で記述します。

Javaがサポートしている形式のアイコンファイルを使用できます。また、アイコン画像の実際の大きさにかかわらず、縦横ともに16ピクセルで表示されます。

省略された場合、アイコンは設定されていないものと見なされます。

show-line

各ノードを結ぶ線を表示するかしないかを設定する属性です。真偽値で記述します。trueを指定すると、ノードを結ぶ線が表示されます。falseを指定すると、ノードを結ぶ線は表示されません。

省略された場合、trueが設定されたものと見なされます。

expand-enabled

サブツリーを表示するかしないかを切り替える展開アイコンを、最上位のノードに表示するかしないかを設定する属性です。真偽値で記述します。trueを指定すると、展開アイコンが表示されます。falseを指定すると、展開アイコンは表示されません。

省略された場合、trueが設定されたものと見なされます。

font-size

ノードのラベルを表示するときに使用するフォントのサイズを設定する属性です。ポイント値で記述します。

省略された場合、12ポイントで描画されます。

readonly

ノードのラベルをその場で編集する、インライン編集機能を無効にするかしないかを設定する属性です。真偽値で記述します。trueを指定すると、インライン編集を無効にします。falseを指定すると、インライン編集を有効にします。

省略された場合、trueが設定されたものと見なされます。

内容:

tree:tree要素内には以下の要素を記述します。

  • tree:node要素
    必要に応じて、任意の数だけ記述できます。省略可能です。

tree:node 要素

ツリーを構成するノードを表現するために使用する要素です。

属性:
label

ノードのラベルを設定する属性です。任意の文字列で記述します。

省略された場合、"???"と表示されます。

expanded-icon

子ノードを持つノードでサブツリーが表示されているときに表示するアイコンを設定する属性です。URI参照で記述します。

Javaがサポートしている形式のアイコンファイルを使用できます。また、アイコン画像の実際の大きさにかかわらず、縦横ともに16ピクセルで表示されます。

省略された場合、値は設定されていないものと見なされます。この場合、デフォルトのアイコンが設定されていれば、そのアイコンが表示されます。設定されていなければ、アイコンは表示されません。

collapsed-icon

子ノードを持つノードでサブツリーが表示されていないときに表示するアイコンを設定する属性です。URI参照で記述します。

Javaがサポートしている形式のアイコンファイルを使用できます。また、アイコン画像の実際の大きさにかかわらず、縦横ともに16ピクセルで表示されます。

省略された場合、値は設定されていないものと見なされます。この場合、デフォルトのアイコンが設定されていれば、そのアイコンが表示されます。設定されていなければ、アイコンは表示されません。

leaf-icon

子ノードを持たないノードに表示するアイコンを設定する属性です。URI参照で記述します。

Javaがサポートしている形式のアイコンファイルを使用できます。また、アイコン画像の実際の大きさにかかわらず、縦横ともに16ピクセルで表示されます。

省略された場合、値は設定されていないものと見なされます。この場合、デフォルトのアイコンが設定されていれば、そのアイコンが表示されます。設定されていなければ、アイコンは表示されません。

color

ラベルの文字色を設定する属性です。次の形式で指定します。

  • CSSで使用されるキーワード色
  • 16進数(#rrggbbまたは#rgb

省略された場合、値は設定されていないものと見なされ、xfyユーザーエージェントで設定されている標準の文字色が使用されます。

background-color

ラベルが描画される領域の背景色を設定する属性です。次の形式で指定します。

  • CSSで使用されるキーワード色
  • 16進数(#rrggbbまたは#rgb

省略された場合、値は設定されていないものと見なされ、背景には何も描画されません。

font-weight

ラベルの文字の太さを設定する属性です。CSSのfont-weightプロパティに指定する値のうち、次の値を使用できます。

  • 100から900までの100間隔の数値。
  • normal
  • bold

省略された場合、normalが設定されたものと見なされます。

内容:

tree:node要素内には以下の要素を記述します。

  • tree:node要素
    必要に応じて、任意の数だけ記述できます。省略可能です。
    このノードの子ノードと見なされます。

4.3.2. イベント

ツリー記述ボキャブラリで定義されているイベント要素は、以下のとおりです。 なお、XVCDを記述するときに、イベント要素を使用することはありません。イベント要素はプラットフォームによって記述されます。

tree:selected イベント

ノードがユーザーに選択されたときに、選択されたノードへ発行されるイベント要素です。

属性:

属性はありません。

内容:

tree:selected要素は、空要素です。

tree:expanding イベント

ノードのサブツリーが表示されるときに、表示されるノードへ発行されるイベント要素です。このイベントが処理された場合、ツリーのデフォルトの動作は実行されません。

属性:

属性はありません。

内容:

tree:expanding要素は、空要素です。

tree:collapsing イベント

ノードのサブツリーが非表示にされるときに、非表示にされるノードへ発行されるイベント要素です。このイベントが処理された場合、ツリーのデフォルトの動作は実行されません。

属性:

属性はありません。

内容:

tree:collapsing要素は、空要素です。

tree:entering-editing イベント

ノードのラベルをインライン編集するモードへ移行するときに、編集対象のノードへ発行されるイベント要素です。このイベントが処理された場合、ツリーのデフォルトの動作は実行されません。

属性:
trigger (必須)

インライン編集するモードへ移行するきっかけとなったユーザー操作が設定される属性です。文字列で記述されます。次の値で設定されます。

F2
F2キーが押されてインライン編集モードへ移行するときに設定されます。
clicked
ノードのラベルがクリックされてインライン編集モードへ移行するときに設定されます。
内容:

tree:entering-editing要素は空要素です。

tree:exited-editing イベント

ノードのラベルをインライン編集するモードを終了した後に、編集対象だったノードへ発行されるイベント要素です。インライン編集の結果を反映する場合は、このイベントを受け取って適切に処理する必要があります。

属性:
trigger (必須)

インライン編集するモードを終了するきっかけとなったユーザー操作が設定される属性です。文字列で記述されます。次の値で設定されます。

ENTER
Enterキーが押されてインライン編集モードを終了したときに設定されます。
ESCAPE
Escキーが押されてインライン編集モードを終了したときに設定されます。
focus-lost
入力フォーカスを失ったためにインライン編集モードを終了したときに設定されます。
new-label (必須)

インライン編集で確定された値が設定される属性です。文字列で記述されます。

内容:

tree:exited-editing要素は、空要素です。

4.3.3. コマンド

tree:collapse コマンド

指定したノードに子ノードがあるときに、ノードのサブツリーを非表示にするコマンドです。サブツリーが非表示の場合は、何もしません。

一連の処理中にこのコマンドを複数回呼び出す場合は、 instruction:callコマンドインストラクションではなく、 instruction:postコマンドインストラクションを使用する必要があります。一連の処理中で1回だけ呼び出す場合は、instruction:callコマンドインストラクションを使用できます。

パラメータ:
node-set select

サブツリーを非表示にするノードを指定します。

tree:expand コマンド

指定したノードに子ノードがあるときに、ノードのサブツリーを表示するコマンドです。サブツリーが表示されている場合は、何もしません。

一連の処理中にこのコマンドを複数回呼び出す場合は、 instruction:callコマンドインストラクションではなく、 instruction:postコマンドインストラクションを使用する必要があります。一連の処理中で1回だけ呼び出す場合は、instruction:callコマンドインストラクションを使用できます。

パラメータ:
node-set select

サブツリーを表示するノードを指定します。

tree:enter-editing コマンド

ノードのラベルをインライン編集するモードに移行するコマンドです。

パラメータ:
node-set select

インライン編集するノードを指定します。

string text

インライン編集を開始するときに、編集画面に設定する初期文字列を指定します。

省略された場合、ノードのラベルが初期文字列として設定されます。

number maxlength

入力できる文字列の最大の長さを指定します。正の整数値で記述します。

省略された場合、入力できる文字列の長さに制限はありません。