13.6 ツリーの作成

ツリーは階層情報を明確かつ使いやすい形式で表示します。SQL問合せを使用してツリー・コントロールを作成できます。

ヒント:

Oracle Application Expressリリース5.0では、引き続き既存のjsTreeリージョンを編集できますが、作成はできなくなりました。ツリーについてを参照してください。

トピック:

13.6.1 ツリーについて

アプリケーション・ビルダーには、階層表示を示すツリーを生成するための組込みウィザードが用意されています。Oracle Application Expressリリース5.0では、ツリーで新しいAPEXツリー実装が使用されます。レガシーjsTreeリージョンと同様に、この新しいツリー実装は、オプションのキーボード・ナビゲーションおよびオプションのステート保存の機能を持つ、JavaScriptベースのブラウザに依存しないツリー・コンポーネントです。APEXツリーは、jsTreeと同じ機能を共有しますが、例外として、テンプレート属性は新しいツリーに適用されません。新しい実装では、外観、有用性およびアクセシビリティも向上します。引き続き既存のjsTreeリージョンを編集できますが、作成はできなくなりました。

ツリーは、表またはビューでIDと親ID列を識別することによって階層関係を指定する問合せから作成できます。ツリー問合せでは、START WITH .. CONNECT BY句を利用して、階層問合せを生成します。

ヒント:

APEXツリー・リージョンは、「デスクトップ」ユーザー・インタフェースを使用したページでのみ作成できます。

13.6.2 レガシーjsTreeのサポートについて

以前のリリースのOracle Application Expressでは、jsTreeツリー・リージョンの作成がサポートされていました。既存のツリーはまだサポートされていますが、Oracle Application ExpressではjsTreeツリー・リージョンの作成はサポートされなくなりました。Oracle Application Expressでは、現在、APEXツリーのツリー・リージョンの生成がサポートされています。APEXツリーは、jsTreeに類似したJavaScriptベースのブラウザに依存しないツリー・コンポーネントです。

13.6.3 ページ・デザイナでのツリーの管理

この項では、ページ・デザイナでツリーを管理する方法について説明します。

トピック:

13.6.3.1 新しいページでのツリーの作成

ツリーは問合せに基づき、階層形式で表現できるデータを戻します。ページの作成ウィザードを使用してツリーを作成すると、ウィザードにより、選択したオプションに基づいてこの階層問合せが生成されます。

新しいページでツリーを作成するには、次のステップを実行します。

ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「ページの作成」をクリックします。
「ページの作成」で、次のステップを実行します。
1. ユーザー・インタフェース - 「デスクトップ」を選択します。
2. ページ・タイプの選択 - 「ツリー」を選択します。
3. 「次へ」をクリックします。
「ページ属性」で、次のように指定します。
1. ページ番号: ツリーを作成する必要があるページを指定します。
2. ページ名: 新しいページにツリーを作成する場合、ページ名を入力します。
3. ページ・モード: ページ・モードを選択します。
4. ページ・グループ: このページと関連付けるページ・グループの名前を選択します。このオプションは、アプリケーションにグループが含まれる場合にのみ表示されます。
5. リージョン・テンプレート: ツリー・リージョンのリージョン・テンプレートを選択します。
6. リージョン名: ツリーを含めるリージョンの名前を入力します。
7. ブレッドクラム: ページでブレッドクラム・ナビゲーション・コントロールを使用するかどうか、およびどのブレッドクラム・ナビゲーション・コントロールを使用するかを選択します。「ブレッドクラム」を選択した場合、次のように入力します。
  - エントリ名: ブレッドクラム・エントリの名前を入力します。
  - 親エントリの選択: 親エントリを選択します。
8. 「次へ」をクリックします。
「ナビゲーションのプリファレンス」で、このページに含めるナビゲーションのタイプを指定し、「次へ」をクリックします。ナビゲーション・オプション(ナビゲーション・メニューまたはタブなど)はカレント・アプリケーションのテーマに応じて決まります。
「表/ビューの所有者」および「表/ビューの名前」で次を実行します。
1. 表/ビューの所有者: ツリーの基になる表の所有者を選択します。
2. 表/ビューの名前: マスター・ページに含める列を含む表またはビューを選択します。
3. 「次へ」をクリックします。
「問合せ」で、IDおよび親IDとして使用する列を指定し、ノードに表示するテキストを指定します。
1. ID: IDとして使用する列を選択します。
2. 親ID: 親IDとして使用する列を選択します。
3. ノード・テキスト: ツリー・ノードに表示するテキストを選択します。
4. 開始: 階層ツリー問合せのルートを指定するために使用する列を選択します。
5. ツリーを開始: 問合せの開始方法を選択します。オプションは次のとおりです。
  - 既存のアイテムに基づく: 既存のアプリケーション・アイテムまたはページ・アイテムを選択します。
  - SQL問合せに基づく: 単一行または単一列を返すSQL問合せを入力します。
  - 静的値に基づく: 静的値を入力します。
  - 値: NULLです。
6. 「次へ」をクリックします。
「WHEREおよびORDER BY」で、次のように指定します。
1. WHERE句: オプションのWHERE句を入力します。次に例を示します。
```
ename='JONE'
```
2. ORDER SIBLINGS BY: 列による兄弟の並替えを選択します(ENAMEなど)。デフォルト値は、選択した「ノード・テキスト」列に基づきます。
3. 「次へ」をクリックします。
「ツリー属性」で、次のように指定します。
1. ボタンを含む: 含めるボタンを選択します。
2. 選択したノードのページ・アイテム: 選択したノード値を保持するページまたはアプリケーション・アイテムを選択します。このアイテムを使用して、最後に選択したツリー・ノードの値を保持することで、ツリーの状態を保存できます。選択したノードの値は、ノード・リンク属性またはページ・プロセスを使用して、選択したアイテムに保存できます。ツリーがリロードされると、最後に選択したツリー・ノードがツリーに開きます。
3. ツールチップ: マウスをリーフ・ノードに合わせたときにツールチップを表示します。オプションは次のとおりです。
  - 静的割当て: ツールチップ・テキストとして使用する静的値を指定します。静的テキストで置換文字列を使用して、SQL問合せからの情報をツールチップ・テキストに組み込むことができます。使用可能な置換文字列は次のとおりです。
    
    #VALUE#: 「ID」列の値を参照します。
    
    #TITLE#: 「ノード・テキスト」列の値を参照します。
    
    #LINK#: 「リンク」オプションの値を参照します。
  - データベース列: ツールチップ・テキストとして使用する列を選択します。
4. リンク・オプション:
  - 既存のアプリケーション・アイテム: リーフ・ノード・テキストをリンクにします。このオプションを選択する場合、リンク先のページおよびリーフ・ノード・テキストをリンクする既存アプリケーション・アイテムを指定する必要があります。
    
    このオプションは、「既存のアプリケーション・アイテム」リンク・オプションを選択した場合にのみ表示されます。
  - なし
5. 「次へ」をクリックします。
選択した内容を確認し、「作成」をクリックします。

ヒント:

APEXツリー・リージョンは、「デスクトップ」ユーザー・インタフェースを使用したページで作成できます。

13.6.3.2 ページ・デザイナでのツリーの作成

既存のページでツリーを作成するには、次のステップを実行します。

ページ・デザイナでページを表示します。
1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. ページを選択します。
ページ・デザイナが表示されます。
中央ペインで「レイアウト」タブをクリックします。
ギャラリで、「リージョン」タブをクリックします。次に、「ツリー」を右クリックして「追加先」を選択し、適切な位置を選択します。
ヒント:
ギャラリで「ツリー」リージョンを選択して、「レイアウト」タブの適切な位置までドラッグすることもできます。

ページ・デザイナは、次に必要なアクションを示します。

「メッセージ」タブには、対応する必要のあるメッセージを示す赤または黄色のバッジが表示されます。「メッセージ」タブには、次の2つのタイプのメッセージが表示されます。
- エラー - エラー・メッセージは赤で表示されます。エラー・メッセージを選択すると、プロパティ・エディタに関連する属性が赤で表示されます。ページを保存する前にエラーに対処する必要があります。
- 警告 - 警告メッセージは黄色で表示されます。警告メッセージを選択すると、プロパティ・エディタで、関連する属性が黄色で表示されます。ページを保存する前にエラーに対処する必要があります。警告メッセージには対処しないでページを保存できることに注意してください。
「レンダリング」タブまたは「レイアウト」タブのいずれかで、新規ツリー・リージョンを選択します。
プロパティ・エディタの右ペインに属性が表示されます。

プロパティ・エディタでは、属性が機能グループに編成されます。これらのグループを展開または縮小するには、「共通の表示」、「すべて表示」、「すべて閉じる」および「すべて開く」アイコンをクリックします。

属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
プロパティ・エディタで、次の属性を編集します。
1. 指定、タイトル - リージョン・タイトルを入力します。リージョン・タイトルは、リージョン・テンプレートに定義されている場合にのみ表示されます。
2. ソース、SQL問合せ - ツリーの基礎となるSQL問合せを入力します。問合せは、次の形式にする必要があります。
```
SELECT status, level, name, icon, id, tooltip, link 
FROM ... 
WHERE ... 
START WITH... 
CONNECT BY PRIOR id = pid 

ORDER SIBLINGS BY ...
```
  注意:
  ツリーSQL問合せのSTATUS列は、ツリーに適したJSONデータソースをレンダリングする際にツリー・ロジックによって使用されるため、変更しないでください。
  
  次に例を示します。
```
SELECT case WHEN connect_by_isleaf = 1 THEN 0 WHEN level = 1 THEN 1 ELSE -1 END as status,
       level,
       ename as title,
       'icon-tree-folder' as icon,
       empno as value,
       ename as tooltip,
       NULL as link
FROM emp
START WITH mgr IS NULL
CONNECT BY PRIOR empno = mgr
ORDER SIBLINGS BY ename
```
  注意:
  デフォルトでは、ツリーのイメージを表すCSSクラス'icon-tree-folder'を使用して、新しいAPEXツリーが作成されます。jsTree (レガシー)ツリー実装を作成する場合は、上の例のCSSクラスのかわりにイメージ参照を使用する必要があるため、'icon-tree-folder'を'#IMAGE_PREFIX#menu/go-small.png'で置き換えます。
3. レイアウト - 属性を編集します。
  - 順序 - このアイテムの表示順序を入力します。順序および他のレイアウト設定によって、リージョン内の他のアイテムに対して相対的に、このアイテムの表示位置が決定されます。
  - 親リージョン - このリージョンが属する親リージョンを選択します。親リージョンが選択されている場合、このリージョンは完全に親リージョン内にレンダリングされます。
  - 位置 - このリージョンの表示に使用されるテンプレートの位置を選択します。使用可能な選択肢は、ページのユーザー・インタフェースに対して現在のテーマ内に定義されている適切なテンプレートの位置から導出されます。
4. 外観、テンプレート - テンプレートを指定します。リージョン・テンプレートを選択して、このリージョンの外観とレイアウトを定義します。
  
  詳細は、中央ペインで「ヘルプ」タブをクリックします。
リージョン属性を編集します。
1. 「レンダリング」タブで、リージョンを探し、「属性」をクリックします。
  
  プロパティ・エディタに属性が表示されます。
2. プロパティ・エディタで、リージョン属性を編集します。
  - ツリー実装 - ツリーの実装方法を「APEXツリー」または「jsTree(レガシー)」から選択します。
  - ツリー・テンプレート - 「jsTree(レガシー)」で実装されたツリーに対してのみ表示されます。使用可能なjsTreeテンプレート・オプションから、ツリーに適用するテンプレートを選択します。
  - 次のものでノード・リンクをアクティブ化 - ツリーでノード・リンクをアクティブ化するために必要なアクションを選択します。
  - 選択したノードのページ・アイテム - 選択したノード値を保持するページまたはアプリケーション・アイテムを選択します。
  - ツールチップ - ツールチップを表示するかどうか、およびツールチップのソースを選択します。
  - 静的ツリーID - ツリーの一意の識別子を入力します。
    
    このIDは、ボタンのレガシーJavaScriptコードでツリーを開閉する場合にのみ必要となります。新しいアプリケーションでは、ツリーの操作に動的アクションが使用されます。
  - アイコン・タイプ - CSSクラスを使用して、すべてのノードで使用されるアイコン・タイプを指定します。このオプションはAPEXツリー・リージョンにのみ適用可能です。
「保存」をクリックします。

13.6.3.3 ページ・デザイナでのツリー属性の編集

デフォルトではツリーにフォーカスが置かれておらず、シングルクリック・アクションによってノード・リンクがアクティブ化されます。開発者は、ツリー属性を編集してツリーの動作をカスタマイズできます。

ツリー属性ページにアクセスするには、次のステップを実行します。

ページ・デザイナでページを表示します。
1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
2. アプリケーションを選択します。
3. ページを選択します。
ページ・デザイナが表示されます。
「レンダリング」タブまたは「レイアウト」タブで、ツリーを含むリージョンを選択します。
プロパティ・エディタの右ペインにツリーの属性が表示されます。

プロパティ・エディタでは、属性が機能グループに編成されます。これらのグループを展開または縮小するには、「共通の表示」、「すべて表示」、「すべて閉じる」および「すべて開く」アイコンをクリックします。
グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。
ツリー属性を編集します。
ページが保存されるまで、編集した属性の属性名の左側に青色のマーカーが表示されます。

ヒント:
属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
「保存」をクリックします。

13.6.4 レガシー・コンポーネント・ビューでのツリーの管理

重要:

レガシー・コンポーネント・ビューはデフォルトで無効化されています。レガシー・コンポーネント・ビューを有効化するには、ユーザー・プリファレンスを編集します。ユーザー・プリファレンスの編集を参照してください。

レガシー・コンポーネント・ビューは、アプリケーション・ページを編集するためのレガシー・ユーザー・インタフェースです。開発者はレガシー・コンポーネント・ビューではなくページ・デザイナを使用することをお薦めします。レガシー・コンポーネント・ビューは、ユーザー・インタフェース要素とアプリケーション・ロジックをコンポーネント・タイプ別にグループ化します。ページ・デザイナとは異なり、レガシー・コンポーネント・ビューでは、ページを視覚的に表したり、ページ・コンポーネントをドラッグ・アンド・ドロップすることができません。

ヒント:

ページ・デザイナへの移行で開発者を支援するために、ページ・デザイナには「コンポーネント・ビュー」タブが含まれています。レガシー・コンポーネント・ビューの外観と同様、ページ・デザイナの「コンポーネント・ビュー」タブには、ユーザー・インタフェース要素とアプリケーション・ロジックがコンポーネント・タイプ別に表示されます。ただし、コンポーネントをクリックすると、プロパティ・エディタの右ペインで対応する属性がハイライトされます。「コンポーネント・ビュー」タブを参照してください。

開発者は、コンポーネント・ビューでツリーを作成および編集できます。

注意:

レガシー・コンポーネント・ビューでのページの管理

トピック:

13.6.4.1 コンポーネント・ビューでのツリーの作成

コンポーネント・ビューでツリーを作成するには、次のステップを実行します。

ページに移動します。レガシー・コンポーネント・ビューでのページの表示を参照してください。
「リージョン」で、「作成」アイコンをクリックします。

「リージョンの作成」ウィザードが表示されます。
「ツリー」を選択し、「次へ」をクリックします。
「表示属性」は、次のようにします。
1. タイトル - リージョンのタイトルを入力します。選択するリージョン・テンプレートにリージョン・タイトルが表示されると、このタイトルが表示されます。
2. リージョン・テンプレート: リージョンの外観を制御するテンプレートを選択します。
3. 親リージョン - 新しいリージョンが属する親リージョンを定義します。
4. 表示ポイント: このリージョンの表示ポイントを指定します。ページ・テンプレート位置およびページ・ボディ位置の2種類の表示ポイントが存在します。属性の詳細は、フィールドレベル・ヘルプを参照してください。
5. 順序: このコンポーネントの順序を指定します。これによって評価の順序が決まります。
6. 「次へ」をクリックします。
「表/ビューの所有者」および「表/ビューの名前」で次を実行します。
1. 表/ビューの所有者: ツリーの基になる表の所有者を選択します。
2. 表/ビューの名前: マスター・ページに含める列を含む表またはビューを選択します。
3. 「次へ」をクリックします。
「問合せ」で、IDおよび親IDとして使用する列を指定し、ノードに表示するテキストを指定します。
1. ID: IDとして使用する列を選択します。
2. 親ID: 親IDとして使用する列を選択します。
3. ノード・テキスト: ツリー・ノードに表示するテキストを選択します。
4. 開始: 階層ツリー問合せのルートを指定するために使用する列を選択します。
5. ツリーを開始: 問合せの開始方法を選択します。オプションは次のとおりです。
  - 既存のアイテムに基づく: 既存のアプリケーション・アイテムまたはページ・アイテムを選択します。
  - SQL問合せに基づく: 単一行または単一列を返すSQL問合せを入力します。
  - 静的値に基づく: 静的値を入力します。
  - 値: NULLです。
6. 「次へ」をクリックします。
「WHEREおよびORDER BY」で、次のように指定します。
1. WHERE句: オプションのWHERE句を入力します。
2. ORDER SIBLINGS BY: 兄弟の並替え基準として使用する列を選択します。
3. 「次へ」をクリックします。
「ツリー属性」で、次のように指定します。
1. ボタンを含む: 含めるボタンを選択します。
2. 選択したノードのページ・アイテム: 選択したノード値を保持するために使用できます。アプリケーション・アイテムを選択した場合、このアイテムを使用して、最後に選択したツリー・ノードの値を保持することで、ツリーの状態を保存できます。
3. ツールチップ: マウスをリーフ・ノードに合わせたときにツールチップを表示します。オプションは次のとおりです。
  - 静的割当て: ツールチップ・テキストとして使用する静的値を指定します。静的テキストで置換文字列を使用して、SQL問合せからの情報をツールチップ・テキストに組み込むことができます。使用可能な置換文字列は次のとおりです。
    
    #VALUE#: 「ID」列の値を参照します。
    
    #TITLE#: 「ノード・テキスト」列の値を参照します。
    
    #LINK#: 「リンク」オプションの値を参照します。
  - データベース列: ツールチップ・テキストとして使用する列を選択します。
4. リンク・オプション:
  - 既存のアプリケーション・アイテム: リーフ・ノード・テキストをリンクにします。このオプションを選択する場合、リンク先のページおよびリーフ・ノード・テキストをリンクする既存アプリケーション・アイテムを指定する必要があります。
    
    このオプションは、「既存のアプリケーション・アイテム」リンク・オプションを選択した場合にのみ表示されます。
  - なし
5. 「次へ」をクリックします。
選択した内容を確認し、「リージョンの作成」をクリックします。

13.6.4.2 コンポーネント・ビューでのツリー属性の編集

デフォルトではツリーにフォーカスが置かれておらず、シングルクリック・アクションによってノード・リンクがアクティブ化されます。このセクションでは、開発者がツリー属性を編集してツリーをカスタマイズする方法について説明します。

ツリー属性ページにアクセスするには、次のステップを実行します。

適切なページにナビゲートします。レガシー・コンポーネント・ビューでのページの表示を参照してください。
リージョン属性ページにアクセスします。「リージョン」で、編集するツリー・リージョンの名前の横にある「ツリー」リンクをクリックします。
対象となる属性を編集します。

ヒント:
属性の詳細は、フィールドレベル・ヘルプを参照してください。フィールドレベル・ヘルプの表示を参照してください。
「変更の適用」をクリックします。