15.6 ツリーの作成

この項では、アプリケーション・ビルダーでツリー・コンポーネントを作成する方法について説明します。

ツリーについて
レガシーjsTreeのサポートについて
新しいページでのツリーの作成
ページ・デザイナでのツリーの管理
コンポーネント・ビューでのツリーの管理

ヒント:

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

15.6.1 ツリーについて

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

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

ヒント:

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

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

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

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

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

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

「ワークスペース」ホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
アプリケーションを選択します。
「ページの作成」をクリックします。
「ページの作成」で、次のステップを実行します。
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ツリー・リージョンは、「デスクトップ」ユーザー・インタフェースを使用したページで作成できます。

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

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

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

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

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

ページ・デザイナで適切なページにナビゲートします。「ページ・デザイナでのページの表示」を参照してください。

ページ・デザイナが表示されます
ギャラリからツリー・リージョンを選択し、グリッド・レイアウトの適切な場所にドラッグします。

ヒント:
ツリー・リージョンを右クリックし、「追加先」を選択して適切な場所を選択することもできます。

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

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

リージョン属性を編集します。

ヒント:

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

指定 - リージョンのタイトルを入力します。

ソース - ツリーの基礎となる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#go-small.png'で置き換えます。

レイアウト - 「順序」、「親リージョン」および「位置」を指定します。
外観 - テンプレートを指定します。

「レンダリング」ツリーでリージョンの「属性」を選択します。

プロパティ・エディタに、ツリーの属性が表示されます。
プロパティ・エディタですべての属性を表示します。「プロパティ・エディタ・メニュー」から「すべて表示」を選択します。
ツリー属性を編集します。
1. ツリー実装 - ツリーの実装方法を「APEXツリー」または「jsTree(レガシー)」から選択します。
2. ツリー・テンプレート - 使用可能なjsTreeテンプレート・オプションから、ツリーに適用するテンプレートを選択します。このオプションはjsTreeリージョンにのみ適用可能です。
3. 次のものでノード・リンクをアクティブ化 - ツリーでノード・リンクをアクティブ化するために必要なアクションを選択します。
4. 選択したノードのページ・アイテム - 選択したノード値を保持するページまたはアプリケーション・アイテムを選択します。
5. ツールチップ - ツールチップを表示するかどうか、およびツールチップのソースを選択します。
6. 静的ツリーID - ツリーの一意の識別子を入力します。
7. アイコン・タイプ - CSSクラスを使用して、すべてのノードで使用されるアイコン・タイプを指定します。このオプションはAPEXツリー・リージョンにのみ適用可能です。
「保存」をクリックします。

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

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

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

ページ・デザイナで適切なページにナビゲートします。「ページ・デザイナでのページの表示」を参照してください。

ページ・デザイナが表示されます。
「レンダリング」ツリーまたはグリッド・レイアウトでリージョンを選択します。

プロパティ・エディタに、ツリー・リージョンの属性が表示されます。
プロパティ・エディタですべての属性を表示します。「プロパティ・エディタ・メニュー」から「すべて表示」を選択します。
リージョン属性を編集します。

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

15.6.5 コンポーネント・ビューでのツリーの管理

この項では、コンポーネント・ビューでツリーを管理する方法について説明します。

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

15.6.5.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. 「次へ」をクリックします。
選択した内容を確認し、「リージョンの作成」をクリックします。

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

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

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

対象となる属性を編集します。

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