プライマリ・コンテンツに移動
Oracle® Application Expressアプリケーション・ビルダー・ユーザーズ・ガイド
リリース5.1
E83810-03
目次へ移動
目次
索引へ移動
索引

前
次

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

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

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

ヒント:

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

トピック:

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

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

ヒント:

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

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

ページ・セレクタ

ページ・セレクタ

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

関連項目:

ページの検索

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

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

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

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

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

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

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

「元に戻す」、「やり直し」

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

作成

作成

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

ユーティリティ

ユーティリティ

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

設定

設定

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

チーム開発

チーム開発

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

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

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

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

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

ヒント:

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

開発者のコメント

開発者のコメント

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

共有コンポーネント

共有コンポーネント

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

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

「保存」、「ページの保存と実行」

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

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

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

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

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

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

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

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

「レンダリング」タブ

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

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

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

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

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

GUID-D998529D-49DB-44A6-88EF-C67A0E046AA8-default.pngの説明が続きます
図GUID-D998529D-49DB-44A6-88EF-C67A0E046AA8-default.pngの説明

「動的アクション」タブ

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

GUID-067C9055-B05E-43D1-8695-1D57D873831E-default.pngの説明が続きます
図GUID-067C9055-B05E-43D1-8695-1D57D873831E-default.pngの説明

「プロセス」タブ

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

GUID-F650ABD5-C709-4D58-A3A5-BC83A3CE8E43-default.pngの説明が続きます
図GUID-F650ABD5-C709-4D58-A3A5-BC83A3CE8E43-default.pngの説明

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

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

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

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

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

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

GUID-3FE567B8-36DB-45E7-B82A-45F19B6BEFC9-default.pngの説明が続きます
図GUID-3FE567B8-36DB-45E7-B82A-45F19B6BEFC9-default.pngの説明

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

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

トピック:

7.2.3.1 「レイアウト」タブ

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

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

ヒント:

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

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

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

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

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

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

ヒント:

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

「レイアウト」メニュー

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

7.2.3.2 ギャラリ

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

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

「ギャラリ」メニュー

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

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

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

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

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

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

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

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

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

7.2.3.4 「メッセージ」タブ

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

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

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

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

ヒント:

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

7.2.3.5 「ページ検索」タブ

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

7.2.3.6 「ヘルプ」タブ

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

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

プロパティ・エディタ

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

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

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

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

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

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

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

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

7.2.5 コード・エディタ

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

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

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

  • 元に戻す

  • やり直し

  • 検索

  • 置換

  • クエリー・ビルダー

  • オートコンプリート

  • 検証

  • 構文のハイライト

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

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

ヒント:

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