treeについて

treeコンポーネントはツリー構造のデータを表示するように設計されています。ユーザーが複雑な階層構造のオブジェクト・セットに素早く目を通し、ツリー内でハイライト表示することで、レコードの詳細情報にアクセスできるようにすることが目的です。オブジェクトは、開いているか閉じている状態の親ノード、子ノード、リーフ・ノードによって視覚的に表示されます。

Root Shop node.  Books and Hardware subnodes.

ツリー・データ

ツリー・データはtreeコンポーネントにノード属性と一緒に設定されます。ツリー内の各ノードは、キーと値のペアを含むdataObjectです。各dataObjectには、任意の数のキーと値のペアを格納できます。各ノードで予想されるキーと値のペアの説明は次のとおりです。

treeコンポーネントの属性

ツリーに設定できる属性は次のとおりです。

UIX XMLで作成したツリーの例


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キーで返される値は、子を表示するかどうかを決定します。したがって、「店」の子は表示されますが、「子」の子は表示されません。このサンプル・コードでは、ブラウザに次のツリーが生成されます。

Root node Shop. Books and Hardware under Shop.

デフォルトでは、expandableは「no」に設定されています。つまり、ノードがリーフであればこのキー値のペアを除外できます。リーフ以外の項目でexpandableを設定しなかった場合、または値として「no」指定した場合は、プラス・アイコン(+)またはマイナス・アイコン(-)は表示されません。

ノードを選択されている状態として指定する(つまり青の背景色に白の文字でハイライト表示する)には、次の図とコードSnippetで示されているように、selectedキーをtrueに設定します。

Root Shop node is selected


...
<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に設定すればフォルダ・アイコンの交換も可能です。

Tree nodes with icons


...
<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>
...    

名前付きの子nodeStamp

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ピクセルです。

Tree nodes with checkboxes and icons

Javaでのツリー・データ

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.