Ajaxフレームワーク UI部品リファレンス
目次 索引 前ページ次ページ
第2章 画面部品> 2.5 ツリー部品

2.5.1 TreeView

TreeViewは、ツリー形式で項目リストを表示させる部品です。各項目の下位要素を展開、または折りたたんで表示させることができます。

■表示例

本書内では、破線枠の範囲をノードと呼びます。また、ノード配下のそれぞれの部分を以下のように呼びます。

スタイルの指定を行わない場合、ラベルは以下のように表示されます。

■記述形式

<div rcf:id="model1" rcf:type="TreeModel" rcf:object="modelData"></div>
<div rcf:type="TreeView" rcf:data="{model1.treeData}"></div>


子要素は指定できません。


■プロパティ

表の項目の意味は、“Text”の“プロパティ”を参照してください。

名前

データ型

説明

省略

省略値

属性指定

更新

部分更新

data

Object

ツリー形式のObjectのルートを指定します。データには、ルート以降の各ノードのデータを記述します。
“dataプロパティと表示データの指定方法”を参照してください。

不可

なし

バインド

可

可

headImage
(注)

Object

ノードの選択/非選択時に表示する見出し画像のURLまたはパスを指定します。
詳細は、“headImageプロパティ”を参照してください。

可

標準で添付する画像

値

不可

不可

tabIndex

Number

Tabキーで移動するフォーカスの順番を指定します。HTMLのtabindex属性と同様に、1以上の整数を指定した場合、数字の小さい順にフォーカスが移動します。
FocusManagerによるフォーカス移動には関係しません。

可

0

値

可

不可

注) headImageプロパティで指定する見出し画像の推奨サイズは、高さ12ピクセル、幅14ピクセルです。

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

headImageプロパティ
以下にheadImageのプロパティを示します。

プロパティ名

データ型

説明
normal String 非選択ノードに表示する見出し画像のURLまたはパスを指定します。空の文字列を指定した場合は、画像は表示されません。省略時は、標準で添付されている画像が表示されます。
selected String 選択ノードに表示する見出し画像のURLまたはパスを指定します。空の文字列を指定した場合は、画像は表示されません。省略時は、標準で添付されている画像が表示されます。

それぞれのURLには、クエリ文字列およびURLリライティングで用いるセションIDを付加することができます。詳細は、“ユーザーズガイド”を参照してください。


プロパティで指定した文字列に対するエスケープ処理は行いません。フォーム画面などからユーザが入力したデータを本プロパティに設定する場合は、アプリケーション側で < > & " ' の5つの文字をエスケープするようにしてください。

dataプロパティと表示データの指定方法
以下のJavaScriptデータで1つのノードを表現し、1つのルートノードから子ノードのデータを入れ子形式で指定します。 
{
  name: "fj",          // ノード名
  label: "Fujitsu",    // ラベル表示文字列
  isExpanded: false,   // 子ノードを展開表示している場合は、true
  headImage: {
    normal: "/img/closeFolder.gif",     //非選択時の見出し画像
    selected: "/img/openFolder.gif"     //選択時の見出し画像
  },
  children: []         // 子ノードのリスト
};

子ノードを持つ場合は、以下のように記述します。

{
  name: "fj",
  label: "Fujitsu",
  isExpanded: true,
  headImage: {
    normal: "/img/closeFolder.gif",
    selected: "/img/openFolder.gif"
  },
  children: [
    {
      name: "jinji",
      label: "人事部",
      headImage: {
        normal: "/img/closeFolder.gif",
        selected: "/img/openFolder.gif"
      }
    }
  ]
};

ノードごとに持つプロパティを説明します。

プロパティ名

データ型

説明

省略

省略値

name

String

ノードの名前を指定します。
ノード位置を示すパスを表現する際に使用します。同一ノードの子ノード間では、nameの値は一意でなければなりません。/を含む文字列、および空の文字列は指定できません。

不可

なし

label

String

ノードのラベルに表示する文字列です。

可

nameの値

unselectable

Boolean

ノード(ラベル)を選択不可にするかどうかを指定します。

  • true: 選択不可
  • false: 選択可能

可

false

isExpanded

Boolean

子ノードを展開して表示するか、折りたたんで表示するかを指定します。

  • true: 展開して表示する
  • false: 折りたたんで表示する

ルート、または子ノードがないノードでは、本パラメタは無視されます。

可

false

headImage

Object

ノードの選択/非選択時に表示する見出し画像のURLまたはパスを指定します。
詳細は、“headImageプロパティ”を参照してください。

可

プロパティで指定する画像

children

Array

子ノードのデータを保持するObjectの配列です。配列の1要素に1つのノードを割り当てます。省略時は、子ノードがない(追加しない)ことを示します。子ノードのデータをあとで追加する場合は、children: []を指定します。

可

子ノードがないことを意味する


dataプロパティの記述例
以下にdataプロパティの記述例を示します。 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:rcf="http://ria.fujitsu.com/rcf">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<script type="text/javascript" src="rcf_config.js"></script>
<script type="text/javascript" src="acf/file/rcf/rcf.js"></script>
<script type="text/javascript">
//<![CDATA[
    var modelData = {
      treeData: {
        name: "root",        // ルートノード名
        children: [
          { // 1つめの子ノード
            name: "fj",  // ノード名
            label: "Fujitsu Group",
            isExpanded: true,
            headImage: { normal: "/img/en.gif" },
            children: [
              { // 孫ノード
                name: "fja", // ノード名
                label: "Fujitsu Australia",
                isExpanded: false,
                headImage: {
                      normal: "/img/blueSquare.gif",
                      selected: "/img/redSquare.gif"
                }
              }
            ]
          },
          { // 2つめの子ノード
            name: "jgov", // ノード名
            label: "Japanese Government",
            isExpanded: false,
            headImage: { normal: "/img/en.gif" }
          }
        ]
      }
    };
//]]>
</script>
<body>
<div rcf:id="model1" rcf:type="TreeModel" rcf:object="modelData"></div>
<div rcf:type="TreeView" rcf:data="{model1.treeData}"></div>
</body>
</html>

このdataプロパティが指定された場合のツリー表示の例は、以下になります。
ルートノードは表示されません。

ノードパスの表現

選択しているノードの位置を示すパス情報は、以下の形式となります。
( / の前後に空白は入りません。)

/   fj  /  fja
↑  ↑      ↑
(1) (2)     (3)
  1. ルート
  2. 第1階層のノードのname
  3. 第2階層のノードのname

パスは、ルートからの絶対パス指定だけが有効です。相対パスは指定できません。

データプロバイダとノードパスを組み合わせることにより、ノードのデータを取得できます。

TreeViewのフォーカス

TreeViewで使用できるフォーカスには、以下の2つがあります。

フォーカス
部品間でフォーカスを移動させる場合に使用します。TabキーおよびShift+Tabキーを用いてフォーカスを移動します。
ラベルフォーカス
TreeView部品内で使用するフォーカスで、↑↓のカーソルを使ってラベル間のフォーカスを移動します。

TreeViewには、以下の方法でフォーカスを当てることができます。フォーカスはTreeView全体に当たり、フォーカスがある状態ではキーボードによる操作が可能になります。

フォーカスがある場合、TreeViewの外枠にフォーカスがあることを示すアウトラインが表示されます。また、フォーカスが当たったとき、TreeView内では、以下の規則に従ってラベルフォーカスが当たり、キーボードによりラベルフォーカスを移動させることができます。

マウス操作

TreeViewにおけるマウス操作について、以下の表に示します。

操作

処理

開閉アイコンでクリック

子ノードが存在する場合に、展開または折りたたみをします。

ラベル、および見出し画像でクリック

クリックしたラベルを選択します。

ラベル、および見出し画像にマウスを移動

マウスの位置するラベルをラベルフォーカスが当たります。


キーボード操作

キーボード操作は、TreeViewにフォーカスが当たっている場合に有効になります。

操作

処理

スペース

ラベルフォーカスが当たっているラベルを選択します。

↑

ラベルのラベルフォーカスを上のラベルに移動します。
先頭のノードにラベルフォーカスがある場合は、移動しません。

↓

ラベルのラベルフォーカスを下のラベルに移動します。
最終のノードにラベルフォーカスがある場合は、移動しません。

→

子ノードが存在する場合に、展開します。

←

子ノードが存在する場合に、折りたたみをします。

Home

先頭のノードのラベルに移動します。

End

画面に表示中の最終のノードのラベルに移動します。


■スタイルプロパティ

本部品全体のスタイルプロパティを以下に示します。

パーツ名

プレフィックス

クラス名

指定可能なスタイル

全体(外枠)

なし

rcf-TreeView
  • サイズ
  • ボーダー (注1)
  • オーバーフロー (注2)

開閉アイコン

icon

rcf-TreeView-icon
  • サイズ (注3)

見出し画像

headImage

rcf-TreeView-headImage
  • サイズ (注3)

ラベル(選択やラベルフォーカスが当たっていないラベル)

label

rcf-TreeView-label
  • カラー
  • フォント (注4)

選択されたラベル
(注5)

selectedLabel

rcf-TreeView-selectedLabel
  • カラー
  • フォント (注4)

ラベルフォーカスが当たっているラベル
(注6)

focusedLabel

rcf-TreeView-focusedLabel
  • カラー
  • フォント (注4)

注1) IE6、IE7では、部品にフォーカスを当てるとボーダーの表示が無効になる場合があります。(例:borderWidthに1pxを指定した場合)

注2) デフォルトではスクロールバーは表示されません。ラベルに長い文字列が指定された場合は、サイズのwidthで指定した横幅を超えて、ラベルが1行に表示されます。

注3) 幅(width)と高さ(height)は、スタイルプロパティで指定してください。CSSで指定した値は無視されます。

注4) IE6では、lineHeightは指定できません。

注5) デフォルトは、背景色は#004E98で、フォント色は#FFFFFF(白)です。

注6) デフォルトは、テキストに下線が表示されます。


詳細は、“スタイルプロパティ”を参照してください。

■イベントリスナ

本部品全体のイベントリスナを以下に示します。

名前

説明

イベントオブジェクト

onDataChange

モデルのデータが変更されると発生します。

TreeDataChangeEvent


名前

説明

イベントオブジェクト

onTreeNodeExpand

ノードが展開されると発生します。

TreeNodeEvent

onTreeNodeCollapse

ノードが折りたたまれると発生します。

onTreeNodeSelect

ノードが選択されると発生します。


名前

説明

イベントオブジェクト

onFocus

TreeView全体がフォーカスされると発生します。(注)

ActionEvent

onBlur

TreeView全体がフォーカスを失うと発生します。

注) ノードのラベルにラベルフォーカスが当たっても、onFocusは発生しません。

部品共通のイベントリスナもあります。詳細は、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

■selectメソッド

メソッド

select(nodePath)

引数

nodePath
[String]

ノードのパス名
例:/travel/Asia

戻り値

なし

例外

以下の場合にエラーとなります。

  • 引数が省略された場合
  • nodePathに空文字列が指定された場合
  • nodePathに存在していないノードのパスが指定された場合
  • nodePathで指定されたノードが選択不可能である場合

説明

指定したパス名のノードを選択します。親ノードのツリー表示が折りたたまれている場合は、展開しません。

■getSelectedNodePathメソッド

メソッド

getSelectedNodePath()

引数

なし

戻り値

選択されたノードのパス(String)
ノードとノードの区切り記号は、/です。TreeViewに選択されたノードがない場合は、空文字列を返します。
例:/travel/Asia

例外

なし

説明

選択されたノードのパスを取得します。

■getFocusedNodePathメソッド

メソッド

getFocusedNodePath()

引数

なし

戻り値

ラベルフォーカスが当たっているノードのパス(String)
ノードとノードの区切り記号は、/です。
例:/travel/Asia

例外

なし

説明

ラベルフォーカスが当たっているノードのパス名を取得します。

■getNodeDataProviderメソッド

メソッド

getNodeDataProvider(nodePath)

引数

nodePath
[String]

ノードのパス名

戻り値

指定したノードのデータにアクセスするためのDataProvider
[ObjectDataProvider]

例外

以下の場合にエラーとなります。

  • 引数が省略された場合
  • nodePathに空文字列が指定された場合
  • nodePathに存在していないノードのパスが指定された場合

説明

指定したノードのデータにアクセスするためのデータプロバイダを取得します。ノードのデータは、dataプロパティ中の指定ノードとその配下を表示するための部分データとなります。

部品共通のJavaScript APIもあります。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

なお、TreeView部品では、部品共通のJavaScript APIのうち、getStyleおよびsetStyleは利用できません。

目次 索引 前ページ次ページ
Copyright 2009 FUJITSU LIMITED