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

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

ヒント:

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

• ページ・デザイナでのページの表示
  
• ページの検索
  
• ペイン間のタブのドラッグ・アンド・ドロップ
  
• 3ペイン・モードと2ペイン・モードの切替え
  
• プロパティ・エディタへのアクセス
  
• ドラッグ・アンド・ドロップによるリージョン、アイテムまたはボタンの追加
  
• ギャラリ・コンテキスト・メニューを使用したコンポーネントの追加について
  
• 「レンダリング」タブからのリージョン、アイテムまたはボタンの追加
  
• 「コンポーネント・ビュー」タブからのリージョン、アイテムまたはボタンの追加
  
• リージョン、アイテムまたはボタンのコピー
  
• レンダリング前ブランチ、計算およびプロセスの作成
  
• ページ送信ブランチ、検証、計算およびプロセスの作成
  

関連項目:

ページ・デザイナUI要素の理解およびページ・デザイナでのヘルプの表示

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

ページ・デザイナでページを表示するには、次のステップを実行します。

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

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

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

関連項目:

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

8.3.2 ページの検索

図GUID-5DBB4C97-6920-472D-9662-1A2B5235D5A2-default.pngの説明

「ページ・セレクタ」は、ページ・デザイナ・ツールバーの最初のコントロールで、カレント・ページ番号を表示します。「ページ・セレクタ」を使用して、カレント・アプリケーション内のページを検索します。

アプリケーション内のページを検索するには、次のステップを実行します。

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

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

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

   • 現在のユーザー・インタフェース - 現在のユーザー・インタフェースのページが表示されます。

   • 現在のグループ - カレント・ページがグループに関連付けられている場合、このタブにはカレント・グループに関連付けられたページが表示されます。

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

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

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

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

関連項目:

「ページ・デザイナからのページの実行」および「ページ・グループの作成」

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

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

ページ・デザイナ内でタブをドラッグ・アンド・ドロップするには、次のステップを実行します。

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

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

   
   図GUID-19F90361-8016-4117-8091-54158382E6C5-default.pngの説明
3. デフォルト表示に戻すには、次のステップを実行します。
   1. ページ・デザイナ・ツールバーで、「ユーティリティ」をクリックします。
   2. 「レイアウト」→「レイアウトのリセット」を選択します。

関連項目:

ページ・デザイナUI要素の理解

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

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

ページ・エディタのペインの非表示と表示を切り替えるには、次のステップを実行します。

1. ページ・デザイナでページを表示します。
   1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
   2. アプリケーションを選択します。
   3. ページを選択します。
   ページ・デザイナが表示されます。
2. ページ・モードを選択するには、次のステップを実行します。
   1. ページ・デザイナ・ツールバーで、「ユーティリティ」をクリックして「レイアウト」をクリックします。
      
      図GUID-77887D7C-501E-4D66-89A0-853CDE44E66B-default.pngの説明

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

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

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

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

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

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

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

プロパティ・エディタにアクセスするには、次のステップを実行します。

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

   ヒント:

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

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

   ヒント:

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

関連項目:

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

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

各アプリケーション・ページにはボタンおよびフィールド(アイテムと呼ばれる)を配置でき、これらはリージョンと呼ばれるコンテナにグループ化されます。「ギャラリ」からリージョン、アイテムおよびボタンをドラッグ・アンド・ドロップすることにより、ページに新しく追加できます。

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

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

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

   ヒント:

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

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

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

   追加するコンポーネント・タイプに基づいて、ページ・デザイナが次に必要な操作を示します。「メッセージ」タブに、対処する必要があるメッセージの数を示した赤または黄色のバッジが表示されます。次に、表名を選択する必要があることを示すエラー・メッセージが表示された新しい対話グリッド・リージョンの例を示します。

   
   図GUID-591AEFE7-3E86-484F-8309-656D73CC09AF-default.pngの説明
5. プロパティ・エディタで該当する属性を編集します。

   ヒント:

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

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

関連項目:

• 「「メッセージ」タブ」

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

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

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

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

図GUID-CF685D79-05CB-4E84-A0AA-FC5FFA8F2105-default.pngの説明

関連項目:

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

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

「レンダリング」タブ内で新しいコンポーネントを作成するには、次のステップを実行します。

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

   ヒント:

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

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

関連項目:

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

• リージョンの管理

• ページ・レベル・アイテムの表示

• ボタンの作成

8.3.9 「コンポーネント・ビュー」タブからのリージョン、アイテムまたはボタンの追加

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

「コンポーネント・ビュー」タブから新しいコンポーネントを作成するには、次のステップを実行します。

1. ページ・デザイナでページを表示します。ページ・デザイナでのページの表示を参照してください。

   ページ・デザイナが表示されます。

2. 中央ペインで、「コンポーネント・ビュー」タブを選択します。
3. 適切なコンポーネント・タイプの下で、「作成」アイコンをクリックします。
   ページ・デザイナの左ペインと中央ペインで、新しいコンポーネントが「新規」として識別されます。
4. プロパティ・エディタで該当する属性を編集します。

   ヒント:

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

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

関連項目:

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

• ボタンの管理

• リージョンの管理

• ページ・レベル・アイテムの表示

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

各アプリケーション・ページにはボタンおよびフィールド(アイテムと呼ばれる)を配置でき、これらはリージョンと呼ばれるコンテナにグループ化されます。開発者は、コンテキスト・メニューを使用するか、または[Ctrl]を押してマウスでドラッグ・アンド・ドロップすることにより、リージョン、アイテムおよびボタンをコピーできます。

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

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

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

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

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

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

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

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

ドラッグ・アンド・ドロップによってリージョン、アイテムまたはボタンをコピーするには、次のステップを実行します。

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

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

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

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

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

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

別のページにリージョン、アイテムまたはボタンをコピーするには、次のステップを実行します。

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

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

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

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

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

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

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

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

   ヒント:

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

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

ヒント:

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

関連項目:

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

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

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

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

   ヒント:

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

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

ヒント:

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

関連項目:

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