1. アプリケーション・ビルダー・ユーザーズ・ガイド
  2. ページ・デザイナでのページの編集
  3. ページ・デザイナの使用

7.3 ページ・デザイナの使用

ページ・デザイナを使用して、アプリケーション・ページを表示および編集します。

ヒント:

キーボード・ショートカットのリストを表示するには、[Alt]+[Shift]+[F1]を押します。または、ページの上部にある「ヘルプ」メニューをクリックして、「ショートカット」を選択します。

関連項目:

親トピック: ページ・デザイナでのページの編集

7.3.1 ページ・デザイナでのページの表示

ページ・デザイナでページを表示するには、アプリケーションを選択してからページを選択します。

ページ・デザイナでページを表示するには:

  1. 「ワークスペース」ホームページにナビゲートします。
  2. 「アプリケーション・ビルダー」アイコンをクリックします。
  3. アプリケーションを選択します。
  4. ページを選択します。

    デフォルト・ビューであるページ・デザイナが表示されます。

    ページを実行してプレビューします。アプリケーション・ページを実行すると、エンド・ユーザーに表示されるとおりにレンダリングされたバージョンが表示されます。

関連項目:

ページ・デザイナからのページの実行

親トピック: ページ・デザイナの使用

7.3.2 ページの検索

「ページ・セレクタ」を使用して、カレント・アプリケーション内のページを検索します。

pd_toolbar.pngの説明が続きます
図pd_toolbar.pngの説明

「ページ・セレクタ」は、ページ・デザイナ・ツールバーの最初のコントロールで、カレント・ページ番号を表示します。

アプリケーション内のページを検索するには:

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

    「ページ・ファインダ」が表示されます。

  3. ウィンドウ上部のタブをクリックして、ビューを変更します。

    • すべてのページ - カレント・アプリケーションのすべてのページが表示されます。

    • 最近編集された - 最近編集されたページが表示されます。

  4. 「検索」フィールドに検索文字列を入力し、[Enter]を押すか、または「実行」をクリックします。

    ページ番号、ページ名、ユーザー・インタフェースまたはグループ名を検索します。検索では、大文字と小文字は区別されず、正規表現がサポートされています。

関連項目:

親トピック: ページ・デザイナの使用

7.3.3 ペイン間のタブのドラッグ・アンド・ドロップ

「ページ・デザイナ」ペイン内にタブをドラッグ・アンド・ドロップします。

デフォルトでは、ページ・デザイナには、1つ以上のタブを含む3つのペインが表示されます。ペイン内またはペイン間でタブをドラッグ・アンド・ドロップするには、ペインのヘッダー(またはアイコン)を選択してドラッグし、新しい位置にそれをドロップします。デフォルト表示に戻すには、ページ・デザイナ・ツールバーの「ユーティリティ」をクリックし、「レイアウト」→「レイアウトのリセット」を選択します。

ページ・デザイナ内でタブをドラッグ・アンド・ドロップするには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. タブ・ヘッダー(またはアイコン)を選択してドラッグし、新しい位置にそれをドロップします。

    次の例では、左ペイン内で、「ページ共有コンポーネント」タブが選択されて移動しています。

    drag_drop_tabs.pngの説明が続きます
    図drag_drop_tabs.pngの説明
  3. デフォルト表示に戻すには:
    1. ページ・デザイナ・ツールバーで、「ユーティリティ」をクリックします。
    2. 「レイアウト」→「レイアウトのリセット」を選択します。

親トピック: ページ・デザイナの使用

7.3.4 3ペイン・モードと2ペイン・モードの切替え

ページ・デザイナ・ツールバーの「ユーティリティ」メニューの「レイアウト」オプションを使用して、ペイン・モードを切り替えます。

「3ペイン・モード」(デフォルト)では、左ペイン、中央ペインおよび右ペインが表示されます。「2ペイン・モード」では、中央ペインと右ペインのみが表示されます。「2ペイン・モード」にアクセスする標準的なユースケースは、「レンダリング」ツリーとプロパティ・エディタのみを表示する必要がある場合です。デフォルト表示に戻すには、ページ・デザイナ・ツールバーの「ユーティリティ」をクリックし、「レイアウト」→「レイアウトのリセット」を選択します。

ページ・エディタのペインの非表示と表示を切り替えるには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. ページ・モードを選択するには:
    1. ページ・デザイナ・ツールバーで、「ユーティリティ」をクリックして「レイアウト」をクリックします。
      pg_layout_menu.pngの説明が続きます
      図pg_layout_menu.pngの説明

      「レイアウト」メニューには、「2ペイン・モード」、「3ペイン・モード」および「レイアウトのリセット」の3つのオプションがあります。

    2. 「レイアウト」から次のいずれかを選択します。

      • 2ペイン・モード - 中央ペインと右ペインのみを表示します。

      • 「3ペイン・モード」(デフォルト) - 左ペイン、中央ペインおよび右ペインが表示されます。

  3. デフォルト表示に戻すには:
    1. ページ・デザイナ・ツールバーで、「ユーティリティ」をクリックします。
    2. 「レイアウト」→「レイアウトのリセット」を選択します。

親トピック: ページ・デザイナの使用

7.3.5 プロパティ・エディタへのアクセス

ページ・デザイナの右ペインに表示されるプロパティ・エディタには、現在選択しているコンポーネントのすべての属性が表示されます。

プロパティ・エディタにアクセスするには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. 左ペインまたは「レイアウト」タブのいずれかで、編集するコンポーネントやコントロールを選択します。コントロールまたはコンポーネントにカーソルをあわせると、それについて説明するツールチップが表示されます。

    ヒント:

    コンポーネントを選択したら、[Alt]+[6]を押してプロパティ・エディタに直接移動します。詳細は、『Oracle APEXアクセシビリティ・ガイド』を参照してください

    プロパティ・エディタには、選択したコンポーネントまたはコントロールの属性が表示されます。左ペインまたは「レイアウト」タブで異なるコンポーネントを選択すると、プロパティ・エディタが自動的に更新され、選択したコンポーネントが反映されます。複数のコンポーネントを選択すると、プロパティ・エディタには共通の属性のみが表示されます。共通の属性を更新すると、選択したすべてのコンポーネントのその属性が更新されます。

    ヒント:

    属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

関連項目:

ページ・デザイナの右ペイン(プロパティ・エディタ)

親トピック: ページ・デザイナの使用

7.3.6 ドラッグ・アンド・ドロップによるリージョン、アイテムまたはボタンの追加

ギャラリからドラッグ・アンド・ドロップして、リージョン、ページ・アイテムおよびボタンを追加します。

各アプリケーション・ページは、リージョン、ページ・アイテムおよびボタンで構成されます。これらのコンポーネントは、「コンポーネント」という包括的なコンテナの下にあるページ位置またはリージョン位置に追加できます。

リージョン、アイテムまたはボタンを追加するには、「ギャラリ」からドラッグ・アンド・ドロップします。

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. 必要に応じて、中央ペインの「レイアウト」タブを選択します。
  3. 中央ペインの下部にある「ギャラリ」で、作成するコンポーネントまたはコントロールを見つけます。

    ギャラリに、ページに追加できるすべてのコントロールまたはコンポーネントが一覧表示されます。カーソルをコントロールまたはコンポーネントにあわせると、説明するツールチップが表示されます。

    ヒント:

    ギャラリからコンポーネントをドラッグ・アンド・ドロップする以外に、ギャラリでコンポーネントを右クリックしてコンテキスト・メニューを表示することもできます。「追加先」を選択して、コンポーネントを追加する位置を選択します。

  4. 作成するコンポーネント上でマウスをクリックしたまま、「レイアウト」タブ内の目的の位置にドラッグします。

    適切な位置にマウスが配置されると、「レイアウト」タブが暗い黄色の四角形として表示されます。マウスを離して、コンポーネントをドロップします。コンポーネントは、コンポーネント・タイプによって決定される適切なドロップ位置にのみドロップできます。

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

    ヒント:

    属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

  7. 「保存」または「ページの保存と実行」をクリックします。

親トピック: ページ・デザイナの使用

7.3.7 ギャラリ・コンテキスト・メニューを使用したコンポーネントの追加について

ギャラリでコンポーネントを右クリックしてコンテキスト・メニューを表示し、ページにコンポーネントを追加します。

ギャラリからコンポーネントをドラッグ・アンド・ドロップする以外に、ギャラリでコンポーネントを右クリックしてコンテキスト・メニューを表示することもできます。各コンテキスト・メニューには、コンポーネントを追加できる実際の位置を示す「追加先」オプションがあります。この例では、開発者は、コンテンツ本体リージョンの前に新しいレポートを追加しています。

pd_context_menu.pngの説明が続きます
図pd_context_menu.pngの説明

関連項目:

ドラッグ・アンド・ドロップによるリージョン、アイテムまたはボタンの追加

親トピック: ページ・デザイナの使用

7.3.8 「レンダリング」タブからのリージョン、アイテムまたはボタンの追加

既存のコンポーネントまたはコンテナを右クリックし、コンテキスト・メニューを表示して、「レンダリング」タブからコンポーネントまたはコンテナを追加します。

「レンダリング」タブで新しいコンポーネントまたはコンテナを作成するには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
  2. 左ペインで、「レンダリング」タブを選択します。
  3. 適切なリージョン、アイテムまたはリージョン・ボタンを見つけて選択します。
  4. 既存のコンポーネントまたはコンテナを右クリックして、該当するコンポーネント・タイプのコンテキスト・メニューを表示します。
  5. コマンド(「リージョンの作成」、「サブリージョンの作成」、「ページ・アイテムの作成」、「ボタンの作成」など)を選択します。使用可能なオプションは、選択するノードによって異なります。
  6. プロパティ・エディタで該当する属性を編集します。

    属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

    ヒント:

    レガシー・コンポーネントを追加するには、プロパティ・エディタの「タイプ」属性から「レガシーの表示...」を選択します。レガシー・コンポーネントがリストに追加されます。レガシー・アプリケーション・コンポーネントは引き続きOracleでサポートされますが、使用することはお薦めしません。
  7. 「保存」または「ページの保存と実行」をクリックします。

関連項目:

親トピック: ページ・デザイナの使用

7.3.9 リージョン、アイテムまたはボタンのコピー

コンテキスト・メニューを使用するか、または[Ctrl]を押してマウスでドラッグ・アンド・ドロップすることにより、リージョン、アイテムおよびボタンをコピーします。

各アプリケーション・ページは、リージョン、ページ・アイテムおよびボタンで構成されます。これらのコンポーネントは、「コンポーネント」という包括的なコンテナの下にあるページ位置またはリージョン位置に追加できます。開発者は、コンテキスト・メニューを使用するか、または[Ctrl]を押してマウスでドラッグ・アンド・ドロップすることにより、リージョン、アイテムおよびボタンをコピーできます。

コンテキスト・メニューを使用したリージョン、アイテムまたはボタンのコピー

コンテキスト・メニューを使用してリージョン、アイテムまたはボタンをコピーするには:

  1. ページ・デザイナでページを表示します。

  2. 中央ペインで、「レイアウト」タブを選択します。

  3. 適切なリージョン、アイテムまたはリージョン・ボタンを見つけて選択します。

  4. 右クリックしてコンテキスト・メニューを表示します。

  5. コンテキスト・メニューから「コピー先」を選択し、次に、場所を選択します。

  6. コンポーネント属性を編集します。

ドラッグ・アンド・ドロップによるリージョン、アイテムまたはボタンのコピー

ドラッグ・アンド・ドロップによってリージョン、アイテムまたはボタンをコピーするには:

  1. ページ・デザイナでページを表示します。

  2. 左ペインで、「レンダリング」タブを選択します。

  3. 適切なリージョン、アイテムまたはリージョン・ボタンを見つけて選択します。

  4. [Ctrl]を押してから、マウスを使用してコンポーネントを新しい位置にドラッグ・アンド・ドロップします。

    コンポーネントのコピーが新しい位置に表示されます。

  5. コンポーネント属性を編集します。

別のページへのリージョン、アイテムまたはボタンのコピー

別のページにリージョン、アイテムまたはボタンをコピーするには:

  1. ページ・デザイナでページを表示します。

  2. 左ペインで、「レンダリング」タブを選択します。

  3. 適切なリージョン、アイテムまたはリージョン・ボタンを見つけて選択します。

  4. コンポーネントを右クリックして、「他のページにコピー」を選択します。

    適切なウィザードが表示されます。

  5. 画面に表示されるステップに従います。

親トピック: ページ・デザイナの使用

7.3.10 レンダリング前ブランチ、計算およびプロセスの作成

ページのレンダリング前に実行するブランチ、計算およびプロセスを作成します。

ページのレンダリング前に実行するブランチ、計算およびプロセスを作成するには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. 左ペインで、「レンダリング」タブを選択します。
  3. 「レンダリング」タブの上部にある「レンダリング前」ノードを展開します。
  4. プロセス・ポイントを決定します。「ヘッダーの前」、「ヘッダーの後」または「リージョンの前」を右クリックして、該当するプロセス・ポイントのコンテキスト・メニューを表示します。
  5. 「ブランチの作成」、「計算の作成」または「プロセスの作成」から、適切なオプションを選択します。
  6. プロパティ・エディタで該当する属性を編集します。

    ヒント:

    属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

  7. 「保存」または「ページの保存と実行」をクリックします。

ヒント:

デフォルトの表示を変更してコンポーネント・タイプごとにコンポーネントをグループ化している場合は、「プロセス」タブにナビゲートしてレンダリング前コンポーネントを保守する必要があります。

関連項目:

計算、検証およびプロセスの管理

親トピック: ページ・デザイナの使用

7.3.11 ページ送信ブランチ、検証、計算およびプロセスの作成

「プロセス」タブで、ページ送信ブランチ、検証、計算およびプロセスを作成します。

ページの送信時に実行するブランチ、検証、計算およびプロセスを作成するには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. 左ペインで、「プロセス」タブを選択します。
  3. プロセス・ツリー内で、必要に応じて「送信後」、「検証中」、「プロセス」または「プロセスの後」にナビゲートします。
  4. 識別子または既存のコンポーネントを右クリックして、そのプロセス・ポイントのコンテキスト・メニューを表示します。
  5. 「ブランチの作成」、「検証の作成」、「計算の作成」または「プロセスの作成」を選択します。
  6. プロパティ・エディタで該当する属性を編集します。

    ヒント:

    属性のヘルプを表示するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックします。

  7. 「保存」または「ページの保存と実行」をクリックします。

ヒント:

コンテキスト・メニューを使用して、コンポーネントを複製および削除したり、その他のページにコピーすることができます。

関連項目:

計算、検証およびプロセスの管理

親トピック: ページ・デザイナの使用