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

前
 
次
 

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

この項では、共通のページ・デザイナのUI要素について説明します。


ヒント:

開発者ナビゲーション・ツールは、ほとんどのOracle Application Expressページでヘッダー・リージョンに表示されます。詳細は、「開発者ナビゲーション・ツール」を参照してください。

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

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

ページ・デザイナ・ツールバーは、ページ上部に表示されます。カーソルをアクティブなボタンおよびメニューにあわせると、前の図に示すようにツールチップが表示されます。ページ・デザイナ・ツールバーのボタンおよびメニュー・オプションは次のとおりです。

8.2.2 ツリー・ペイン

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

ツリー・ペインは、左ペインに表示され、リージョン、ページ・アイテム、ボタン、アプリケーション・ロジック(計算、プロセス、検証など)、動的アクション、ブランチおよび共有コンポーネントをノードとしてツリーに表示します。ツリー・ペインには次の4つのタブがあります。

  • レンダリング - リージョン、ページ・アイテム、ページ・ボタン、ページ・コンポーネントおよびアプリケーション・ロジックがノードとしてツリーに表示されます。

  • 動的アクション - このページに対して定義された動的アクションが表示されます。動的アクションを作成することによって、JavaScriptを必要としないで複雑なクライアント側の動作を宣言的に定義できます。「動的アクションの管理」を参照してください。

  • プロセス - このページに対して定義されたアプリケーション・ロジックが表示されます。「計算、検証およびプロセスの管理」を参照してください。

  • ページ共有コンポーネント - このページに関連付けられた共有コンポーネントが表示されます。「共有コンポーネントの管理」を参照してください。

「動的アクション」および「ページ共有コンポーネント」ツリーは、イベントまたはコンポーネント・タイプでグループ化され、順番に並べられます。「レンダリング」および「プロセス」ツリーは、Oracle Application Expressでの処理方法に基づいてグループ化され、並べられます。この編成により、コンポーネントがいつ処理されるか、およびページのレイアウト方法をよりよく理解できます。「レンダリング」および「プロセス」ツリーには、ノードをコンポーネント・タイプでグループ化するオプションがあります。ツリー・コンポーネントの表示方法を制御するには、ツリー・ヘッダー・バーの「処理順序別にグループ化」または「コンポーネント・タイプ別にグループ化」ボタンをクリックします。

ツリー・ペインの主な機能は次のとおりです。

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

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

  • ドラッグ・アンド・ドロップ。ツリー内でドラッグ・アンド・ドロップすることによって、コンポーネントおよびコントロールを並べ替えます。

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

8.2.3 中央ペイン

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

ページ・デザイナの中央ペインには、次の4つのタブが表示されます。

  • グリッド・レイアウト - 「グリッド・レイアウト」には、ページを定義するリージョン、アイテムおよびボタンが視覚的に表されます。「グリッド・レイアウト」を参照してください。ページ下部のギャラリから選択することによって、新しいリージョン、アイテムおよびボタンをページに追加できます。「ギャラリ」を参照してください。

  • メッセージ - 「グリッド・レイアウト」の右に表示されます。ページ・デザイナでコンポーネントを作成したり属性を編集するとき、対処する必要があるエラーおよび警告が「メッセージ」で通知されます。「メッセージ」を参照してください。

  • ページ検索 - 「メッセージ」の右に表示されます。「ページ検索」を使用して、リージョン、アイテム・ボタン、動的アクション、列などのすべてのページ・メタデータを検索します。「ページ検索」を参照してください。

  • ヘルプ - 「ページ検索」の右に表示されます。「ヘルプ」には、プロパティ・エディタ属性のヘルプ・テキストが表示されます。「ヘルプ」を参照してください。

8.2.4 グリッド・レイアウト

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

グリッド・レイアウトは中央ペインに表示され、ページを定義するリージョン、アイテムおよびボタンが視覚的に表されます。ウィンドウ・スプリッタを使用すると、「グリッド・レイアウト」のサイズを変更できます。また、「開く」ボタンをクリックしてグリッド・レイアウトを拡大し、その後「リストア」をクリックして前のサイズに戻すこともできます。

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

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

ドラッグ・アンド・ドロップで、リージョン、アイテムおよびボタンの移動、コピーおよび並べ替えを実行できます。ギャラリからドラッグしてページ上の目的の位置にドロップすることによって、新しいリージョン、アイテムおよびボタンを追加できます。アイテムを既存のアイテムと同じ行にドラッグするなど、コンポーネントを新しい位置にドラッグする場合は、コンポーネントを目的の位置にドラッグした後、グリッドが変更されて新しいドロップ位置が表示されるまで待つ必要があります。

グリッド・レイアウトの主な機能は次のとおりです。

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

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

  • ドラッグ・アンド・ドロップ。新しく作成したり、ドラッグ・アンド・ドロップでリージョン、アイテムおよびボタンを移動、コピーおよび並べ替えることができます。

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


ヒント:

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

8.2.5 ギャラリ

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

ギャラリは「グリッド・レイアウト」ペインの下部に表示され、「リージョン」、「アイテム」および「ボタン」の3つのタブがあります。デフォルトでは、サポートされているコントロールとコンポーネントのみが表示されます。コントロールまたはコンポーネントにカーソルをあわせると、それについて説明するツールチップが表示されます。ギャラリで選択してグリッド・レイアウトにドラッグ・アンド・ドロップすることによって、新しいコントロールおよびコンポーネントをページに追加できます。

8.2.6 メッセージ

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

ページ・デザイナでコンポーネントを作成したり属性を編集するとき、対処する必要があるエラーおよび警告が「メッセージ」で通知されます。「メッセージ」タブに、対処する必要があるメッセージの数を示した赤または黄色のバッジが表示されます。「メッセージ」タブには、次の2つのタイプのメッセージが表示されます。

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

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


ヒント:

エラーまたは警告のあるコンポーネントは、ツリーとグリッド・レイアウトの両方に、Xアイコンとともに赤で表示されるか、三角形のアイコンとともに黄色で表示されます。

8.2.7 ページ検索

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

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

8.2.8 ヘルプ

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

ページ・デザイナには、すべてのページ・エディタ属性のヘルプが含まれています。ヘルプを表示するには、属性を選択して「ヘルプ」タブをクリックします。「ヘルプ」ペインをアクティブ化すると、別の属性を選択するたびに表示されるコンテンツが変わります。

8.2.9 プロパティ・エディタ

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

プロパティ・エディタは、右ペインに表示され、現在のコンポーネントの属性がすべて表示されます。ツリー・ビューまたはグリッド・レイアウトのいずれかで異なるコンポーネントを選択すると、プロパティ・エディタは現在の選択を反映するように自動的に更新されます。属性は、目的を説明する機能グループに編成されます。必須属性は、属性ラベルの左上隅に赤の三角形が表示されます。

ペイン上部にある次のボタンを使用して、表示する情報の量を制御できます。

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

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

  • すべて閉じる - 機能グループ・ヘッダーのみを表示します。

  • すべて開く - 各グループ・ヘッダーの下にすべての属性を表示します。

  • グループに移動 - 選択したグループの最初の属性を選択します。

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

8.2.10 コード・エディタ

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

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

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

  • pd_prop_editor3.pngの説明が続きます
    図pd_prop_editor3.png説明

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

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

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

  • 元に戻す

  • やり直し

  • 検索

  • 置換

  • クエリー・ビルダー

  • オートコンプリート

  • 検証

  • 構文のハイライト処理

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

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


ヒント:

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