ツリーの管理

14.4 ツリーの管理

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

ツリーについて
Oracle Application Expressのツリー・コントロールでは、APEXツリーを使用します。
新しいページでのツリーの作成
ページの作成ウィザードを実行して、新しいページにツリーを作成します。
ページ・デザイナでのツリーの作成
ツリー・コントロールは、表またはビューでIDと親ID列を識別することによって階層関係を指定するSQL問合せを使用して作成します。
ツリー属性の編集
開発者は、ツリー属性を編集してツリーの動作をカスタマイズできます。

14.4.1 ツリーについて

Oracle Application Expressのツリー・コントロールでは、APEXツリーを使用します。

アプリケーション・ビルダーには、ツリー階層ナビゲーション・メカニズムを生成するための組込みウィザードが含まれています。ツリーは、問合せの開始に使用する行、および階層の親行と子行の間の関係を指定する単一の階層問合せによって実装されます。ツリーでは、APEXツリー実装が使用されます。これは、JavaScriptベースのブラウザに依存しないツリー・コンポーネントであり、オプションのキーボード・ナビゲーションおよびオプションの状態保存機能が備わっています。

ツリー・コントロールを実装すると、SQL問合せは、表またはビューでIDと親ID列を識別することによって階層関係を指定します。ツリー問合せでは、START WITH .. CONNECT BY句を利用して、階層問合せを生成する必要があります。

ヒント:

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

サポートが終了したjsTreeについて

リリース5.2より前は、Oracle Application Expressでは、jsTreeツリー・リージョンのレンダリングがサポートされていました。Oracle Application Expressでは、jsTreeツリー・リージョンがサポートされなくなりました。Oracle Application Expressでは、現在、APEXツリーのツリー・リージョンの生成がサポートされています。APEXツリーは、JavaScriptベースのブラウザに依存しないツリー・コンポーネントです。jsTreeリージョンは、以前のリリースからのアップグレード時、またはリリース18.1へのインポート時に、APEXツリー・リージョンに自動的にアップグレードされます。

ツリーの例の表示

ツリーの例を表示するには、サンプル・アプリケーションであるサンプル・ツリーをインストールします。

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

ページの作成ウィザードを実行して、新しいページにツリーを作成します。

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

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

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

ヒント:

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

親トピック: ツリーの管理

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

ツリー・コントロールは、表またはビューでIDと親ID列を識別することによって階層関係を指定するSQL問合せを使用して作成します。

指定したツリー問合せでは、START WITH .. CONNECT BY句を利用して、階層問合せを生成する必要があります。

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

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

ギャラリで「ツリー」リージョンを選択して、「レイアウト」タブの適切な位置までドラッグすることもできます。

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

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

プロパティ・エディタの右ペインに属性が表示されます。属性は、グループに編成されます。
グループまたは属性を検索するには、次のステップを実行します。
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。
プロパティ・エディタで、次の属性を編集します。
1. 指定、タイトル - リージョン・タイトルを入力します。リージョン・タイトルは、リージョン・テンプレートに定義されている場合にのみ表示されます。
2. 「ソース」で、次のいずれかを選択します。
  - ローカル・データベース: データはローカル・データベースをソースとします。
  - リモート・データベース: データは、REST対応SQLを使用して接続が定義されるリモート・データベースをソースとします。
  - Webソース: データは、Webソース・モジュールを使用して定義されるRESTful Webサービスをソースとします。
3. レイアウト - 属性を編集します。
  - 順序 - このアイテムの表示順序を入力します。順序および他のレイアウト設定によって、リージョン内の他のアイテムに対して相対的に、このアイテムの表示位置が決定されます。
  - 親リージョン - このリージョンが属する親リージョンを選択します。親リージョンが選択されている場合、このリージョンは完全に親リージョン内にレンダリングされます。
  - 位置 - このリージョンの表示に使用されるテンプレートの位置を選択します。使用可能な選択肢は、ページのユーザー・インタフェースに対して現在のテーマ内に定義されている適切なテンプレートの位置から導出されます。
4. 外観、テンプレート - テンプレートを指定します。リージョン・テンプレートを選択して、このリージョンの外観とレイアウトを定義します。
  
  詳細は、中央ペインで「ヘルプ」タブをクリックします。
リージョン属性を編集します。
1. 「レンダリング」タブで、リージョンを探し、「属性」をクリックします。
  
  プロパティ・エディタに属性が表示されます。
2. プロパティ・エディタで、リージョン属性を編集します。
  - ノード・ラベル列: ノード・ラベルの値を含むデータ・ソース列を選択します。値にはマークアップを含めることはできません。
  - ノード値列: ノード値の値を含むデータ・ソース列を選択します。この値は表示されませんが、JavaScriptを使用してアクセスできるツリー・アダプタ・ノードIDプロパティに追加されます。
  - 階層: Application Expressがデータからツリー階層を計算するかどうか、またはデータにすべての階層情報がすでに含まれているかどうかを示します。
    - SQLを使用して計算:
      
      ノードID列: ノードのIDを含むデータ・ソース列を選択します。これは、階層がApplication Expressによって計算されている場合に必須です。通常、主キー列がここで選択されます。
      
      親キー列: ノードの親キーの値を含むデータ・ソース列を選択します。Application Expressで階層が計算される場合に必須です。
    - 計算されない:
      
      ノード・ステータス列: ノード・ステータスの値を含むデータ・ソース列を選択します。「階層」属性を「計算されない」に設定した場合に必須です。この列には、リーフ・ノードの場合は0、子を持つノードの場合は1を指定する必要があります。
      
      階層レベル列: ノードの階層レベルの値を含むデータ・ソース列を選択します。「階層」属性を「計算されない」に設定した場合に必須です。
  - ツールチップ - ツールチップを表示するかどうか、およびツールチップのソースを選択します。
  - リンク: ノードがクリックされたときに実行されるリンクを指定します。
  - リンク列: ノードがクリックされたときに実行されるリンクの値を含むデータ・ソース列を選択します。
  - アイコンCSSクラス列: ノードに適用されるアイコンCSSクラスの値を含むデータ・ソース列を選択します。
「保存」をクリックします。

親トピック: ツリーの管理

14.4.4 ツリー属性の編集

開発者は、ツリー属性を編集してツリーの動作をカスタマイズできます。

デフォルトではツリーにフォーカスが置かれておらず、シングルクリック・アクションによってノード・リンクがアクティブ化されます。

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

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

プロパティ・エディタの右ペインに属性が表示されます。属性は、グループに編成されます。
グループまたは属性を検索するには、次のステップを実行します。
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。
ツリー属性を編集します。

ページが保存されるまで、編集した属性の属性名の左側に青色のマーカーが表示されます。

ヒント:

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

親トピック: ツリーの管理