treeコンポーネントはツリー構造のデータを表示するように設計されています。ユーザーが複雑な階層構造のオブジェクト・セットに素早く目を通し、ツリー内でハイライト表示することで、レコードの詳細情報にアクセスできるようにすることが目的です。オブジェクトは、開いているか閉じている状態の親ノード、子ノード、リーフ・ノードによって視覚的に表示されます。
ツリー・データはtreeコンポーネントにノード属性と一緒に設定されます。ツリー内の各ノードは、キーと値のペアを含むdataObjectです。各dataObjectには、任意の数のキーと値のペアを格納できます。各ノードで予想されるキーと値のペアの説明は次のとおりです。
ツリーに設定できる属性は次のとおりです。
nodes
: データの階層ツリーを指定します。このdataObjectListは、すべてのルート、つまり最上位ノードに相当します。この属性はデータ・バインドする必要があります。
formSubmitted
: 開く/閉じるリンクでフォーム送信が使用されるかどうかを決定するブール値を指定します。
formName
: 送信先のフォーム名を指定します。
proxy
: ツリー・ノードと、展開状態、選択状態および子ノードとの間にあるプロキシを指定します。この属性はデータ・バインドする必要があります。プロキシを持たないツリーは対話型ではありません。プロキシは、開いているときと閉じているときのイベントのリンク先を設定してツリー・ノードの開閉の状態を追跡し、状況によってはクライアントとサーバーでのツリーの選択状態をレンダリング・ベースで追跡します。プロキシのタイプはoracle.cabo.ui.data.tree.TreeDataProxyである必要があります。このプロキシのインスタンスについては、oracle.cabo.ui.data.tree.ClientStateTreeProxyを参照してください。
unvalidated
: ツリー・プロキシによって生成されるフォーム送信より前に検証するかどうかを決定するブール値を指定します。デフォルトでは、検証は実行されません。この属性は、ツリーをformSubmittedモードで使用している場合にのみ使用可能です。
id
: クライアント対クライアントまたはクライアント対サーバーのイベントでページ全体のツリーIDを識別します。データ・コントロール・パレットを使用してツリーを作成した場合、この属性は自動的に設定されます。
This tree example uses inline data.
<page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:data="http://xmlns.oracle.com/uix/ui"
expressionLanguage="el" >
<content>
<dataScope>
<contents>
<form name="myForm" >
<contents>
<tree nodes="${data:data().Nodes.nodes}" />
</contents>
</form>
</contents>
<provider>
<data name="data:Nodes">
<inline>
<nodes text="店"
destination="http://www.oracle.com"
expandable="expanded">
<nodes text="本"
destination="http://www.oracle.com"
expandable="collapsed">
<nodes text="セール"
destination="http://www.oracle.com"
expandable="collapsed">
<nodes text="文庫"
expandable="no"
destination="http://www.oracle.com" />
</nodes>
<nodes text="フィクション"
destination="http://www.oracle.com"
expandable="no"/>
<nodes text="ノンフィクション"
destination="http://www.oracle.com"
expandable="no"/>
</nodes>
<nodes text="ハードウェア"
expandable="collapsed">
<nodes text="デスクトップ"
destination="http://www.oracle.com"
expandable="no"/>
<nodes text="ノートブック"
destination="http://www.oracle.com"/>
</nodes>
</nodes>
</inline>
</data>
</provider>
</dataScope>
</content>
</page>
textキーで返される値は、ノードのテキストとして表示されます。上の例ではdestinationキーの値が設定されているため、「店」ノードと「本」ノードはリンクです。expandableキーで返される値は、子を表示するかどうかを決定します。したがって、「店」の子は表示されますが、「子」の子は表示されません。このサンプル・コードでは、ブラウザに次のツリーが生成されます。
デフォルトでは、expandableは「no」に設定されています。つまり、ノードがリーフであればこのキー値のペアを除外できます。リーフ以外の項目でexpandableを設定しなかった場合、または値として「no」指定した場合は、プラス・アイコン(+)またはマイナス・アイコン(-)は表示されません。
ノードを選択されている状態として指定する(つまり青の背景色に白の文字でハイライト表示する)には、次の図とコードSnippetで示されているように、selectedキーをtrueに設定します。
...
<nodes text="店"
destination="http://www.oracle.com"
expandable="expanded"
selected="true">
<nodes text="本"
destination="http://www.oracle.com"
expandable="expanded">
<nodes text="セール"
destination="http://www.oracle.com"
expandable="expanded"
selected="true">
<nodes text="文庫"
destination="http://www.oracle.com" />
</nodes>
...
</nodes>
...
</nodes>
...
デフォルトでは、子を持つノードはフォルダ・アイコンでレンダリングされます。リーフにはアイコンを追加することができますが、iconキーの値を別のイメージのURIに設定すればフォルダ・アイコンの交換も可能です。
...
<nodes text="店"
destination="http://www.oracle.com"
expandable="expanded"
icon="/docs/devguide/images/data_trees/info.gif">
<nodes text="本"
destination="http://www.oracle.com"
expandable="expanded"
icon="/docs/devguide/images/data_trees/info.gif">
<nodes text="セール"
destination="http://www.oracle.com"
expandable="expanded"
icon="/docs/devguide/images/data_trees/info.gif">
<nodes text="文庫"
destination="http://www.oracle.com" />
</nodes>
...
</nodes>
...
</nodes>
...
treeコンポーネントでは、名前付きの子nodeStamp
がサポートされています。各ツリー・ノードに対してレンダリングを1回行うノードを指定する際にはこれを使用します。このため各ノードは同じように見えますが、データ・バインディングを介して異なるデータを指定できます。次の例ではnodeStampが使用されています。dataObjectに任意のキーと値のペアを追加して、データ・バインディングを使用してこれらの値を抽出できる点に注意してください。
Example in UIX XML:
<page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:data="http://xmlns.oracle.com/uix/ui"
expressionLanguage="el" >
<content>
<dataScope>
<contents>
<!-- UIX Components -->
<form name="myForm" >
<contents>
<tree nodes="${data:data().Nodes.nodes}">
<nodeStamp>
<flowLayout>
<contents>
<checkBox rendered="${uix.current.rendered}"
disabled="${uix.current.disabled}"
checked="${uix.current.checked}"/>
<styledText text="${uix.current.text}" />
</contents>
</flowLayout>
</nodeStamp>
</tree>
</contents>
</form>
</contents>
<!-- Data -->
<provider>
<data name="data:Nodes">
<inline>
<nodes text="店"
destination="http://www.oracle.com"
expandable="expanded"
rendered="false"
icon="/docs/devguide/images/data_trees/info.gif">
<nodes text="本"
destination="http://www.oracle.com"
expandable="expanded"
rendered="false"
icon="/docs/devguide/images/data_trees/info.gif">
<nodes text="セール"
destination="http://www.oracle.com"
expandable="expanded"
rendered="false"
icon="/docs/devguide/images/data_trees/info.gif">
<nodes text="文庫"
destination="http://www.oracle.com"
disabled="true" />
</nodes>
<nodes text="フィクション"
destination="http://www.oracle.com"
checked="true"/>
<nodes text="ノンフィクション"
destination="http://www.oracle.com"/>
</nodes>
<nodes text="ハードウェア"
expandable="expanded"
rendered="false"
icon="/docs/devguide/images/data_trees/info.gif">
<nodes text="デスクトップ"
destination="http://www.oracle.com"/>
<nodes text="ノートブック"
destination="http://www.oracle.com"/>
</nodes>
</nodes>
</inline>
</data>
</provider>
</dataScope>
</content>
</page>
ノードの高さは任意ではないので注意してください。現状では、ノードの高さは約45ピクセルです。
Javaでツリー・データを作成するには、oracle.cabo.ui.data.DataObjectを拡張するクラスを記述し、前述の「ツリー・データ」の項にリストしてあるキーを認識します。UIXではこのクラスの簡単な実装例としてoracle.cabo.ui.data.tree.SimpleTreeDataを提供しています。これにより単一のツリー・ノードが実装されます。次のメソッドでは単一のツリー・ノードが作成されます。
Example:
/**
* @param text the text label of the tree node
* @param expandable one of UIConstants.EXPANDABLE_NO,
* UIConstants.EXPANDABLE_EXPANDED, UIConstants.EXPANDABLE_COLLAPSED.
* @param isSelected true if this node is initially selected.
*/
private static SimpleTreeData createNode(String text, String expandable
boolean isSelected)
{
SimpleTreeData data = new SimpleTreeData();
data.setText(text);
data.setDestination( "http://www.oracle.com");
data.setExpandable(expandable);
data.setSelected(isSelected);
return data;
}
ツリーを作成するには、各ノードを自分以外のノードの子として追加する必要があります。たとえば次のようにします。
Example:
public static DataObject getTreeData(RenderingContext context,
String namespace, String name)
{
SimpleTreeData shop = createNode("店", UIConstants.EXPANDABLE_EXPANDED,
true);
SimpleTreeData books = createNode("本", UIConstants.EXPANDABLE_EXPANDED,
false);
SimpleTreeData sale = createNode("セール", UIConstants.EXPANDABLE_EXPANDED,
true);
SimpleTreeData pbacks = createNode("文庫", UIConstants.EXPANDABLE_NO,
false);
sale.addChild(pbacks);
books.addChild(sale);
SimpleTreeData fic = createNode("フィクション", UIConstants.EXPANDABLE_NO,
false);
books.addChild(fic);
SimpleTreeData nonfic = createNode("ノンフィクション", UIConstants.EXPANDABLE_NO,
false);
books.addChild(nonfic);
shop.addChild(books);
SimpleTreeData hw = createNode("ハードウェア", UIConstants.EXPANDABLE_EXPANDED,
false);
SimpleTreeData desktops = createNode("デスクトップ", UIConstants.EXPANDABLE_NO,
false);
hw.addChild(desktops);
SimpleTreeData nbks = createNode("ノートブック", UIConstants.EXPANDABLE_NO,
false);
hw.addChild(nbks);
shop.addChild(hw);
return shop;
}
UIX XMLでは、上のメソッドで生成したツリー・データにノード属性をデータ・バインドするには次のようにします。
...
<dataScope>
<contents>
...
<!-- Since our data provider returns the root of the tree,
we do not need the 'nodes' parameter in front of
the 'demo:Nodes' -->
<tree data:nodes="@data:Nodes" ../>
...
</contents>
<provider>
<data name="data:Nodes">
<method class="MyDemoClass" method="getTreeData"/>
</data>
</provider>
</dataScope>
...
詳細は、simpleTreeDataクラスのJavaDocを参照してください。
treeProxyについて
treeとフレームについて
hGridとその名前付きの子について
browseMenuについて
Copyright © 1997, 2004, Oracle. All rights reserved.