13.4 ツリーの管理

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

13.4.1 ツリーについて

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

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

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

ヒント:

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

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

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

ヒント:

ツリーの例を表示するには、サンプル・アプリケーション「サンプル・ツリー」をインストールします。詳細は、「ギャラリからのアプリケーションのインストール」を参照してください。

13.4.2 ページの作成ウィザードを使用したツリーの作成

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

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

新しいページでツリーを作成するには:

  1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
  2. アプリケーションを選択します。
  3. 「ページの作成」をクリックします。

    「ページの作成」が表示され、「コンポーネント」「機能」および「レガシー・ページ」の3つのタブがあります。

  4. 「コンポーネント」で、「ツリー」を選択します。
  5. ページ定義:
    1. ページ番号: ページ番号はアプリケーション内のページを識別する整数値です。
    2. 名前 - このページのテキスト名を指定します。

      ヒント:

      このテキストは、レポート・タイトルにも使用されます。ページの作成後は、ページ・デザイナでタイトルを変更できます。

    3. ページ・モード: ページ・モード(「標準」または「モーダル」)を指定します。

      詳細は、フィールドレベル・ヘルプを参照してください。

  6. データ・ソース: ページのデータ・ソースを選択します。
    1. 表/ビューの所有者: ページを作成している表の所有者を選択します。
    2. 表/ビューの名前: ページの基になる表またはビューを選択します。手動で入力する場合は、表名の大/小文字が区別されることに注意してください。
  7. ナビゲーション: リージョンを展開して、ナビゲーションを有効または無効にします。いずれかのフラグが有効である場合は、追加の属性が表示されます。属性についてさらに学習するには、フィールドレベル・ヘルプを参照してください。
    1. ブレッドクラム: このページのブレッドクラム・エントリを作成できるようにします。デフォルトでは、ページ名がブラッドグラム・エントリ名として使用されます。
    2. ナビゲーション: このページのナビゲーション・メニュー・エントリを作成できるようにします。デフォルトでは、ページ名がブラッドグラム・エントリ名として使用されます。
    3. 「次」をクリックします。
  8. ツリー属性:

    ツリーは問合せに基づき、階層形式で表現できるデータを戻します。開始with .. connect by句を使用して、ツリーの階層問合せを生成します。このページを使用して、IDおよび親IDとして使用する列を指定し、ノードに表示するテキストを指定します。「開始」列は、階層問合せのルートの指定に使用し、その値は、既存のアイテム、静的値または単一の値を返すSQL問合せに基づきます。

    1. ID: IDとして使用する列を選択します。たとえば、EMP表のEMPNO列を選択します。
    2. 親ID: 親IDとして使用する列を選択します。たとえば、EMP表のMGR列を選択します。
    3. ノード・テキスト: ツリー・ノードに表示するテキストを選択します。たとえば、EMP表のENAME列を選択します。
    4. 開始: 階層ツリー問合せのルートを指定するために使用する列を選択します。たとえば、EMP表のMGR列を選択します。
    5. ツリーを開始: 問合せの開始方法を選択します。オプションは次のとおりです。
      • 既存のアイテムに基づく: 既存のアプリケーション・アイテムまたはページ・アイテムを選択します。

      • SQL問合せに基づく: 単一行または単一列を返すSQL問合せを入力します。

      • 静的値に基づく: 静的値を入力します。

      • 値はNULL

    6. 「次」をクリックします。
    7. ボタンを含む: 含めるボタンを選択します。
  9. 「ページの作成」をクリックします。
  10. ページを表示するには、「ページの保存と実行」をクリックします。
    レンダリングされたページが表示されます。

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

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

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

ページ・デザイナでツリーを作成するには:

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

    ヒント:

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

  4. ページ・デザイナでは、次に行う処理が示されます。エラーがある場合は、ページ開発者ツールバーに「メッセージの表示」アイコンが表示されます。
    1. ページ・デザイナ・ツールバーの「メッセージの表示」アイコンをクリックします。
      「メッセージ」ダイアログに、対処する必要があるエラーが表示されます。
    2. エラーを選択すると、プロパティ・エディタの関連する属性がハイライトされます。
  5. リージョン属性を編集します。
    1. プロパティ・エディタで、「リージョン」タブを選択します(まだ選択されていない場合)。

      属性についてさらに学習するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

    2. 指定タイトル - リージョン・タイトルを入力します。リージョン・タイトルは、リージョン・テンプレートに定義されている場合にのみ表示されます。
    3. 「ソース」で、次のようにします
      • 位置: データの位置を選択します。

      • タイプ: データの問合せ方法を選択します。

      • 表名: 大/小文字を区別した表またはビューの名前を入力します。名前を入力するか、リストから選択します。

      選択に応じて、追加の属性が表示される場合があります。

    4. Layoutで、次のようにします
      • 順序 - このアイテムの表示順序を入力します。順序および他のレイアウト設定によって、リージョン内の他のアイテムに対して相対的に、このアイテムの表示位置が決定されます。

      • 親リージョン - このリージョンが属する親リージョンを選択します。親リージョンが選択されている場合、このリージョンは完全に親リージョン内にレンダリングされます。

      • 位置 - このリージョンの表示に使用されるテンプレートの位置を選択します。使用可能な選択肢は、ページのユーザー・インタフェースに対して現在のテーマ内に定義されている適切なテンプレートの位置から導出されます。

    5. 外観テンプレート - テンプレートを指定します。リージョン・テンプレートを選択して、このリージョンの外観とレイアウトを定義します。
  6. ツリー属性を編集します。
    1. 「レンダリング」タブで、リージョンを選択し、「属性」タブをクリックします。

      ツリー属性がプロパティ・エディタに表示されます。

      属性についてさらに学習するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

    2. 「設定」で、次のようにします。
      • ノード・ラベル列: ノード・ラベルの値を含むデータ・ソース列を選択します。値にはマークアップを含めることはできません。

      • ノード値列: ノード値の値を含むデータ・ソース列を選択します。この値は表示されませんが、JavaScriptを使用してアクセスできるツリー・アダプタ・ノードIDプロパティに追加されます。

      • 階層: APEXがデータからツリー階層を計算するかどうか、またはデータにすべての階層情報がすでに含まれているかどうかを示します。ユーザー・インタフェースは、選択によって変わります。

        • SQLを使用して計算:

          • ノードID列: ノードのIDを含むデータ・ソース列を選択します。これは、階層がAPEXによって計算されている場合に必須です。通常、主キー列がここで選択されます。

          • 親キー列: ノードの親キーの値を含むデータ・ソース列を選択します。APEXが階層を計算するときに必要です。

        • 計算されない:

          • ノード・ステータス列: ノード・ステータスの値を含むデータ・ソース列を選択します。「階層」属性を「計算されない」に設定した場合に必須です。この列には、リーフ・ノードの場合は0、子を持つノードの場合は1を指定する必要があります。

          • 階層レベル列: ノードの階層レベルの値を含むデータ・ソース列を選択します。「階層」属性を「計算されない」に設定した場合に必須です。

      • ツールチップ - ツールチップを表示するかどうか、およびツールチップのソースを選択します。

      • リンク: ノードがクリックされたときに実行されるリンクを指定します。

      • リンク列: ノードがクリックされたときに実行されるリンクの値を含むデータ・ソース列を選択します。

      • アイコンCSSクラス列: ノードに適用されるアイコンCSSクラスの値を含むデータ・ソース列を選択します。

  7. 「保存」をクリックします。

13.4.4 ツリー属性の編集

ツリーの動作を制御するには、リージョン属性およびレポート属性を編集します。

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

ツリー属性にアクセスするには:

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

    プロパティ・エディタの右ペインに属性が表示されます。属性は、グループに編成されます。

    属性についてさらに学習するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

  3. リージョン属性の編集:
    1. プロパティ・エディタ(右ペイン)で、「リージョン」タブを選択します。
    2. 必要に応じて属性を編集します。
  4. ツリー属性を編集します
    1. プロパティ・エディタ(右ペイン)で、「属性」タブを選択します。
    2. 必要に応じて属性を編集します。
  5. 「保存」をクリックします。