プライマリ・コンテンツに移動

Oracle® Application Expressアプリケーション・ビルダー・ユーザーズ・ガイド リリース5.1 E83810-03 |
| 目次 | 索引

前 | 次 |

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

ページ・デザイナ・ウィンドウには、左ペイン、中央ペイン、右ペインの3つのペインがあります。

左ペインには、「レンダリング」、「動的アクション」、「プロセス」および「ページ共有コンポーネント」の4つのタブが表示されます。中央ペインには、「レイアウト」、「コンポーネント・ビュー」、「メッセージ」、「ページ検索」、「ヘルプ」の4つのタブがあり、下部に「ギャラリ」ペインがあります。右ペインには、プロパティ・エディタが表示されます。選択したコンポーネントの属性を編集するには、プロパティ・エディタを使用します。

ヒント:

この情報に関するオンライン・サマリーを表示できます。ページ・デザイナでページを表示し、ページの上部にある「ヘルプ」メニューをクリックして、「ページ・デザイナのスタート・ガイド」を選択します。

トピック:

- ページ・デザイナ・ツールバー
- ページ・デザイナの左ペイン
- ページ・デザイナの中央ペイン
- ページ・デザイナの右ペイン(プロパティ・エディタ)
- コード・エディタ

関連項目:

ページ・デザイナの使用

## 7.2.1 ページ・デザイナ・ツールバー

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

ページ上部に表示されるページ・デザイナ・ツールバーには、ボタンとメニュー・オプションの両方が含まれています。アクティブなボタンおよびメニューの上にカーソルを置くと、ツールチップが表示されます。

ヒント:

ページ・デザイナの使用方法に関するオンライン・サマリーを表示できます。ページ・デザイナでページを表示し、ページの上部にある「ヘルプ」メニューをクリックして、「ページ・デザイナのスタート・ガイド」を選択します。

ページ・デザイナ・ツールバーのボタンおよびメニュー・オプションは次のとおりです。

ページ・セレクタ

「ページ・セレクタ」には、カレント・ページが表示されます。下矢印(「ページ・ファインダ」というラベルが付いています)をクリックして、ページを検索します。または、フィールドにページ番号を入力して、「実行」をクリックします。前または次のページにナビゲートするには、「次のページにナビゲート」(上矢印)および「前のページにナビゲート」(下矢印)をクリックします。

関連項目:

ページの検索

ページがロック解除されましたおよびページがロックされました

ページのロック・ステータスを示します。「ページがロック解除されました」は、カレント・ページがロック解除され、編集可能であることを示します。「ページがロックされました」は、ページが編集不可であることを示します。南京錠アイコンの外観は、ロック・ステータスに応じて変わります。

- ロック解除された透明の南京錠: ページがロック解除されていることを示します。

- ロックされた緑の南京錠: 自分がページをロックしていることを示します。

- ロックされた赤の南京錠: 別のユーザーがページをロックしていることを示します。ロック所有者を表示したり、ロック・コメントを更新するには、赤の南京錠をクリックします。

関連項目:

ページのロックおよびロック解除

「元に戻す」および「やり直し」

ページ・データを変更するアクションに適用されます。「元に戻す」では、ページ・デザイナ内で行った前回の更新が元に戻されます。「やり直し」では、「元に戻す」を使用して元に戻した最後の更新が再適用されます。

作成

グラフィカルなプラス記号(+)で示されます。「作成」メニュー・オプションは、次のとおりです。

- ページ。ページの作成ウィザードにアクセスします。データベース・アプリケーションへのページの追加についてを参照してください。

- コピーとしてのページ。ページのコピー・ウィザードにアクセスします。ページ・デザイナでのデータベース・アプリケーション・ページのコピーを参照してください。

- ページ・コンポーネント。ページ・デザイナでページ・コンポーネントを作成する方法のサマリーを提供します。

- フォーム・リージョン。フォーム・リージョンの作成ウィザードにアクセスします。ページ・デザイナでのフォーム・リージョンの作成を参照してください。

- ブレッドクラム・リージョンブレッドクラムの作成ウィザードにアクセスします。ブレッドクラムの作成およびページ・デザイナでのブレッドクラム・リージョンの作成を参照してください。

- 共有コンポーネント。アプリケーション・コンポーネントの作成ウィザードにアクセスします。共有コンポーネントは、アプリケーション内のすべてのページに表示または適用される共通の要素です。共有コンポーネントの管理を参照してください。

- ページ・グループ。ページ・グループ・ページにリンクします。ページ・グループを使用してページを整理します。ページ・グループの作成を参照してください。

- 開発者のコメント。「開発者のコメント」ダイアログにアクセスします。開発者はアプリケーション、ページ、またはページ・グループにコメントを追加できます。開発者コメントの追加を参照してください。

- チーム開発。サブメニューの「機能」、「To Do」および「バグ」を表示します。機能の追跡、To Doの追跡およびバグの管理を参照してください。

ユーティリティ

レンチのグラフィックで示されます。「ユーティリティ」メニュー・オプションは次のとおりです。

- ページの削除。カレント・ページを削除します。ページ・デザイナでのページの削除を参照してください。

- アドバイザ。Oracle Application Express Advisor (Advisor)にアクセスします。Advisorを使用して、Oracle Application Expressアプリケーションの整合性と品質を確認します。 アプリケーション整合性のチェックのためのアドバイザの実行を参照してください。

- キャッシュ。キャッシュ・ページにリンクします。キャッシュを有効にすることは、パフォーマンスを向上させるための効果的な方法です。ページ・デザイナでのリージョン・キャッシュの使用およびコンポーネント・ビューでのリージョン・キャッシュの使用を参照してください。

- 属性ディクショナリ。属性ディクショナリにアクセスします。属性ディクショナリの使用を参照してください。

- 履歴。カレント・ページへの変更のレポートを表示します。

- エクスポート。カレント・ページをエクスポートします。アプリケーションおよびアプリケーション・コンポーネントのエクスポートを参照してください。

- クロス・ページ・ユーティリティ。クロス・ページ・ユーティリティにアクセスします。「クロス・ページ・ユーティリティへのアクセス」を参照してください。

- アプリケーション・ユーティリティ。アプリケーション・ユーティリティにアクセスします。アプリケーション・ユーティリティの使用を参照してください。

- ページ・グループ。ページ・グループ・ページにリンクします。ページ・グループを使用してページを整理します。ページ・グループの作成を参照してください。

- アプリケーションのアップグレード。既存のアプリケーションをアップグレードします。アプリケーションのアップグレードの実行を参照してください。

設定

ページ・デザイナに表示されるペインの数を制御します。3ペイン・モードと2ペイン・モードの切替えを参照してください。

チーム開発

2人の人のグラフィカルな輪郭で示されます。「チーム開発」メニュー・オプションは次のとおりです。

- 「機能」。「機能の作成」にリンクします。機能の追跡を参照してください。

- To Do - 「To Doの作成」にリンクします。To Doの追跡を参照してください。

- バグ - 「バグの作成」にリンクします。バグの管理を参照してください。

- フィードバック・エントリ - フィードバック・レポートにリンクします。フィードバックの管理を参照してください。

ヒント:

この機能がワークスペースに対して有効化されている場合にのみ、「チーム開発」が表示されます。『Oracle Application Express管理ガイド』のチーム開発の管理に関する項を参照してください。

開発者のコメント

「開発者コメント、バグまたはTo Doの作成」ダイアログが表示されます。開発者コメントの追加を参照してください。

共有コンポーネント

共有コンポーネント・ページにリンクします。共有コンポーネントは、アプリケーション内のすべてのページに表示または適用できます。共有コンポーネントの管理を参照してください。

「保存」および「ページの保存と実行」

カレント・ページを保存するには、「保存」をクリックします。カレント・ページを保存した後で実行するには、「ページの保存と実行」をクリックします。「ページ・デザイナからのページの実行」を参照してください。

## 7.2.2 ページ・デザイナの左ペイン

ページ・デザイナの左ペインには、「レンダリング」、「動的アクション」、「プロセス」および「ページ共有コンポーネント」の4つのタブが表示されます。各タブには、カレント・ページに作成された、対応するコンポーネント・タイプとコンポーネントのリストが表示されます。

図GUID-4B65ECA5-1126-4302-BBC0-45E3D3134124-default.pngの説明

左ペインの主な機能は次のとおりです。

- コンテキスト・メニュー。コンポーネントまたはコントロールを右クリックすると、コンテキスト・メニューが表示されます。

- プロパティ・エディタへの迅速なアクセス。1つのコンポーネントまたは複数のコンポーネントを選択すると、右ペインのプロパティ・エディタに対応する属性が表示されます。

- ドラッグ・アンド・ドロップ。コンポーネントをツリー内で上下にドラッグし、選択したコンポーネントの位置または順序を変更します。

- ツールチップ。コンポーネントまたはコントロールの上にマウスをあわせると、リージョン・タイプ、アイテム・タイプなどの基本情報のツールチップが表示されます。

「レンダリング」タブ

「レンダリング」タブには、リージョン、ページ・アイテム、ページ・ボタン、ページ・コンポーネントおよびアプリケーション・ロジックが表示されます。「レンダリング」タブでは、コンポーネントはOracle Application Expressでの処理方法に基づいてグループ化され、順序付けされます。

次のアイコンをクリックして、表示を変更できます。

- 処理順序別にグループ化

- コンポーネント・タイプ別にグループ化

- 「レンダリング」メニュー: 「下をすべて展開」または「下をすべて縮小」

図GUID-D998529D-49DB-44A6-88EF-C67A0E046AA8-default.pngの説明

「動的アクション」タブ

「動的アクション」タブには、カレント・ページに対して定義された動的アクションが表示されます。動的アクションを作成することによって、JavaScriptを必要としないで複雑なクライアント側の動作を宣言的に定義できます。

図GUID-067C9055-B05E-43D1-8695-1D57D873831E-default.pngの説明

関連項目:

動的アクションの管理

「プロセス」タブ

「プロセス」タブには、このページに対して定義されたアプリケーション・ロジックが表示され、コンポーネントがOracle Application Expressでの処理方法に基づいてグループ化され、順序付けされます。

図GUID-F650ABD5-C709-4D58-A3A5-BC83A3CE8E43-default.pngの説明

次のアイコンをクリックして、表示を変更できます。

- 処理順序別にグループ化

- コンポーネント・タイプ別にグループ化

- 「プロセス」メニュー: 「計算の作成」、「下をすべて展開」または「下をすべて縮小」

関連項目:

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

「ページ共有コンポーネント」タブ

「ページ共有コンポーネント」タブには、このページに関連付けられている共有コンポーネントが表示されます。

図GUID-3FE567B8-36DB-45E7-B82A-45F19B6BEFC9-default.pngの説明

関連項目:

「共有コンポーネントの管理」

## 7.2.3 ページ・デザイナの中央ペイン

ページ・デザイナの中央ペインには、「レイアウト」、「ギャラリ」、「コンポーネント・ビュー」、「ページ検索」、「ヘルプ」の5つのタブがあります。次の各トピックで、ページの編集時にこれらのタブを使用する方法について詳しく説明します。

トピック:

- 「レイアウト」タブ
- ギャラリ
- 「コンポーネント・ビュー」タブ
- 「メッセージ」タブ
- 「ページ検索」タブ
- 「ヘルプ」タブ

### 7.2.3.1 「レイアウト」タブ

ページ・デザイナの中央ペインに表示される「レイアウト」タブは、ページでのコンポーネントの配置状態を視覚的に表示します。「レイアウト」タブにはコンテキスト・メニューがあります。コンポーネントを選択して右クリックすることで、コンポーネントを削除、移動、またはページ上の他のリージョンや新しいリージョンにコピーできます。また、コンポーネントをクリックして新しい位置にドラッグするだけで、既存のリージョン、アイテムおよびボタンを他のコンポーネントに対して相対的に移動することもできます。たとえば、アイテムを相互に並べて配置するには、2つ目のアイテムを1つ目のアイテムの末尾にドラッグし、目的の場所にカーソルを合わせたときに表示される濃い黄色のボックス内にドロップします。新しいコンポーネントを既存のページに追加するには、「ギャラリ」からコンポーネントを「レイアウト」タブ内の目的の位置までドラッグするだけです。

各ペインのサイズを調整するには、縦横のスプリッタを選択してドラッグします。各ペインを展開または縮小するには、各スプリッタの中央にある「閉じる」というラベルの小さい三角形をクリックします。また、「開く」ボタンをクリックして「レイアウト」タブを拡大し、その後、「リストア」をクリックして前のサイズに戻すこともできます。

図GUID-6DBE7B89-098C-4482-99F1-7037437217A5-default.pngの説明

ヒント:

非表示のアイテムは「レイアウト」タブに表示されませんが、「レンダリング」ツリーには表示されます。

「レイアウト」タブの主な機能は次のとおりです。

- コンテキスト・メニュー。コンポーネントまたはコントロールを右クリックすると、コンテキスト・メニューが表示されます。

- プロパティ・エディタへの迅速なアクセス。1つのコンポーネントまたは複数のコンポーネントを選択すると、右ペインのプロパティ・エディタに対応する属性が表示されます。

- ドラッグ・アンド・ドロップ。ドラッグ・アンド・ドロップにより、リージョン、アイテムおよびボタンの移動、コピーおよび順序変更を行います。「ギャラリ」からリージョン、アイテムおよびボタンをドラッグしてページ上の目的の位置にドロップすることによって、新しく追加することもできます。

- ツールチップ。コンポーネントまたはコントロールの上にマウスをあわせると、リージョン・タイプ、アイテム・タイプなどの基本情報のツールチップが表示されます。

ヒント:

アイテムを既存のアイテムと同じ行にドラッグするなど、コンポーネントを新しい位置にドラッグする場合は、コンポーネントを目的の位置にドラッグした後、グリッドが変更されて新しいドロップ位置が表示されるまで待つ必要があります。ドラッグ・アンド・ドロップによるリージョン、アイテムまたはボタンの追加を参照してください。

「レイアウト」メニュー

「レイアウト」メニューは、ペインの右側に表示されます。このメニューを使用すると、表示する情報のタイプおよび量のカスタマイズ、選択したコンポーネントの削除、移動およびコピーを実行できます。特定のリージョンが「レイアウト」タブ全体に表示されるようにするには、リージョンを選択して、「レイアウト」メニューから「ここから表示」を選択します。選択したリージョンが「レイアウト」タブ全体に表示されます。ビューをリストアするには、「ページから表示」を選択します。

図GUID-42175FA8-609D-4B4B-A795-523331434616-default.pngの説明

関連項目:

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

### 7.2.3.2 ギャラリ

ページ・デザイナの中央ペインの下部に表示される「ギャラリ」ペインには、「リージョン」、「アイテム」および「ボタン」の3つのタブがあります。コントロールまたはコンポーネントにカーソルをあわせると、それについて説明するツールチップが表示されます。ペインのサイズを調整するには、縦横のスプリッタをドラッグします。「ギャラリ」ペインを縮小またはリストアするには、各スプリッタの中央にある小さい三角形をクリックします。

図GUID-A387BDE3-5D15-438A-ABD8-EFC290641069-default.pngの説明

「ギャラリ」からコントロールまたはコンポーネントを選択して「レイアウト」タブにドラッグ・アンド・ドロップすることによって、新しいコントロールおよびコンポーネントをページに追加できます。または、「ギャラリ」でコントロールまたはコンポーネントを選択して右クリックし、コンテキスト・メニューを表示することもできます。

関連項目:

ドラッグ・アンド・ドロップによるリージョン、アイテムまたはボタンの追加およびギャラリ・コンテキスト・メニューを使用したコンポーネントの追加について

「ギャラリ」メニュー

「ギャラリ」メニューは、「ギャラリ」ペインの右側に表示されます。デフォルトでは、「ギャラリ」にはサポートされているコントロールおよびコンポーネントのみが表示されます。サポートされないコントロールおよびコンポーネント(レガシー・アプリケーション・コンポーネントなど)を表示するには、「ギャラリ」メニューで「サポートされないコンポーネントの表示」を有効化します。レガシー・コントロールおよびレガシー・コンポーネントを表示するには、「ギャラリ」メニューで「レガシー・コンポーネントの表示」を有効化します。

注意:

アプリケーション・レガシー・コンポーネントの管理

### 7.2.3.3 「コンポーネント・ビュー」タブ

アプリケーション・ビルダーのレガシー・コンポーネント・ビュー・ウィンドウと同様、「コンポーネント・ビュー」タブでは、ユーザー・インタフェース要素とアプリケーション・ロジックがコンポーネント・タイプ別にグループ化されています。ページ・デザイナの中央ペインに表示される「コンポーネント・ビュー」タブは、次のセクションで構成されています。

- ページ・レンダリング.ページ・レンダリングとは、データベースからページを生成するプロセスです。「ページ・レンダリング」セクションを使用して、ページ属性、リージョン、ボタン、アイテム、ページ・レンダリングの計算、およびページ・プロセスを含むページのレンダリングに影響するコントロールを変更できます。

- ページ・プロセス.ページ・プロセスは、ページを送信するプロセスです。通常、ページは、ユーザーがボタンをクリックすると送信されます。「ページ・プロセス」セクションを使用して、計算、検証、プロセス、ブランチなどのアプリケーション・ロジックを指定します。通常、Application Expressエンジンは、ページに表示される順序でこのロジックを実行します。

- 共有コンポーネント.「共有コンポーネント」セクションには、アプリケーション内の1つ以上のページで使用できる共通のコンポーネントが表示されます。

「コンポーネント・ビュー」タブのサイズを調整するには、ウィンドウ・スプリッタを使用します。また、左上隅にある「開く」ボタンをクリックしてウィンドウを最大化し、その後、「リストア」をクリックして前のサイズに戻すこともできます。

コンポーネントを編集する場合は、コンポーネント名をクリックすると、右ペインのプロパティ・エディタで対応する属性がハイライトされます。「レイアウト」タブとは異なり、「コンポーネント・ビュー」タブでは、ページを視覚的に表示したり、ページ・コンポーネントをドラッグ・アンド・ドロップできません。ページ上のコンポーネントの位置をプレビューするには、「レイアウト」をクリックするか、またはページを実行します。

新しいコントロール、コンポーネントまたはプロセスを追加するには、セクション名の右側の「作成」アイコンをクリックします。

関連項目:

「コンポーネント・ビュー」タブからのリージョン、アイテムまたはボタンの追加およびレガシー・コンポーネント・ビューでのページの管理

### 7.2.3.4 「メッセージ」タブ

「メッセージ」タブは、ページ・デザイナの中央ペインに表示されます。ページ・デザイナでコンポーネントを作成したり属性を編集する際、「メッセージ」タブに、対処が必要なエラーおよび警告が表示されます。「メッセージ」タブに、対処する必要があるメッセージの数を示した赤または黄色のバッジが表示されます。メッセージをクリックすると、プロパティ・エディタ内で、エラーまたは警告に関連付けられた対応する属性にフォーカスが移動します。ヘルプを表示するには、「ヘルプ」タブをクリックし、右ペインにあるプロパティ・エディタで属性を選択します。

図GUID-CA075B5C-BA6F-4B15-8711-D6C75D066329-default.pngの説明

「メッセージ」タブには、次の2つのタイプのメッセージが表示されます。

- エラー - エラー・メッセージは赤で表示されます。エラー・メッセージを選択すると、プロパティ・エディタに関連する属性が赤で表示されます。ページを保存する前にエラーに対処する必要があります。

- 警告 - 警告メッセージは黄色で表示されます。警告メッセージを選択すると、プロパティ・エディタで、関連する属性が黄色で表示されます。警告メッセージには対処しないでページを保存できます。

ヒント:

エラーまたは警告のあるコンポーネントは、左ペインと「レイアウト」タブの両方に、Xアイコンとともに赤で表示されるか、三角形のアイコンとともに黄色で表示されます。

関連項目:

ドラッグ・アンド・ドロップによるリージョン、アイテムまたはボタンの追加およびギャラリ・コンテキスト・メニューを使用したコンポーネントの追加について

### 7.2.3.5 「ページ検索」タブ

「ページ検索」タブは、中央ペインの「メッセージ」の右側に表示されます。「ページ検索」を使用して、リージョン、アイテム・ボタン、動的アクション、列などのすべてのページ・メタデータを検索します。ページを検索するには、指定のフィールドに検索文字列を入力します。大文字と小文字を区別するには、「大/小文字の区別」を選択します。正規表現を検索するには、「正規表現」を選択します。

図GUID-B2EDD113-A846-4814-975F-5FF0B1BAC66E-default.pngの説明

### 7.2.3.6 「ヘルプ」タブ

ページ・デザイナには、すべてのページ・エディタ属性のヘルプが含まれています。ヘルプを表示するには、属性を選択して「ヘルプ」タブをクリックします。「ヘルプ」ペインをアクティブ化すると、別の属性を選択するたびに表示されるコンテンツが変わります。この例では、「Customers」リージョンの「SQL問合せ」が選択されており、中央ペインには「SQL問合せ」属性の「ヘルプ」が表示されています。この図の詳細は、周辺の説明を参照してください。

図GUID-BF437E1F-43E9-43A7-A3C4-C52E31A27CB9-default.pngの説明

関連項目:

ページ・デザイナでのヘルプの表示

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

プロパティ・エディタ

ページ・デザイナの右ペインには、プロパティ・エディタが表示されます。プロパティ・エディタには、現在のコンポーネントについてすべての属性が表示されます。「コンポーネント・ビュー」タブをクリックすると、「メッセージ」タブまたは「ページ検索」タブについてもプロパティ・エディタの選択が変更されます。複数のコンポーネントを選択すると、プロパティ・エディタには共通の属性のみが表示されます。共通の属性を更新すると、選択したすべてのコンポーネントのその属性が更新されます。

図GUID-22142F4E-376D-43F3-965A-5DD7F317F98F-default.pngの説明

プロパティ・エディタでは、属性が機能グループに編成されます。次のアイコンを使用して、これらのグループを展開または縮小します。

- 共通の表示 - デフォルト値が変更されていたり、よく編集される属性のみを表示します。

- すべて表示 - すべての属性を表示します(デフォルト)。

- すべて閉じる - グループ・ヘッダーのみが表示されるように機能グループを縮小します。

- すべて開く - すべての属性が表示されるように機能グループを展開します。

- グループに移動 - 選択したグループにナビゲートして、必要に応じて展開します。

グループまたは属性を検索するには、「フィルタ・プロパティ」フィールドにキーワードを入力します。その用語を含むグループと属性が表示されます。

図GUID-77175227-E02E-465F-87DA-11DB671EBDA5-default.pngの説明

関連項目:

ページ・デザイナの使用およびページ・デザイナでのページ属性の管理

## 7.2.5 コード・エディタ

大量のコードが必要な属性(リージョン・ソースなど)に対して、次の操作を実行できます。

- フィールドにテキストを直接入力します。

- 「コード・エディタ」をクリックして、フル機能を備えたコード・エディタにテキストを入力します。

  図GUID-182E4886-BF9B-4D4F-AC93-03267EED4F9C-default.pngの説明

関連項目:

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

コード・エディタは、モーダル・ダイアログとして表示されます。コード・エディタを使用して、大量のコードが必要な属性を編集できます。コード・エディタには、PL/SQL、SQL、HTML、CSSおよびJavaScriptのコンポーネント・プロパティを編集するための強化されたコード・エディタが用意されています。コードのハイライト表示は、特定のプロパティに必要な入力によって決定されます。

図GUID-8D1F1D36-C69F-473C-9B2B-6ADAB7A2F5CC-default.pngの説明

コード・エディタの主な機能は次のとおりです。

- 元に戻す

- やり直し

- 検索

- 置換

- クエリー・ビルダー

- オートコンプリート

- 検証

- 構文のハイライト

- ブロックのインデントおよびインデント解除

- ダイアログのサイズ変更

ヒント:

プレーン・テキスト・エディタに切り替えるには、「設定」メニューから「プレーン・テキスト・エディタの使用」を選択します。