Part 7：レイアウトの拡張

Oracle JDeveloperのIDEを操作して、レイアウトを拡張するためにコンポーネントをページおよびページ・テンプレートに追加します。

ページへのパネル・スプリッタの追加：左側にディテール表、右側にグラフを配置して、スプリッタ・パネルを追加します。

ポップアップ・ウィンドウの追加：「 Search 」ボタンを追加して、ポップアップ・ウィンドウを開きます。

実行：アプリケーションを実行します。新しいスプリッタとポップアップ・ウィンドウを試します。

 

ページへのパネル・スプリッタの追加

tell me more iconページへのパネル・スプリッタの追加

ADF Facesは、多くの便利なコンポーネントをサポートし、プラグインの不要なWebブラウザでの豊富なユーザー・エクスペリエンスを実現します。コンポーネントを使用して、アプリケーションを拡張できます。最初に、 panelSplitterコンポーネントを作成します。垂直方向または水平方向を指定できるスプリッタは、画面を2つに分割します。ブラウザのスプリッタ・バーをマウスで移動することで、2つのパネルのサイズを動的に調整できます。パネルのコンテンツは適宜調整されます。   [ 詳細はこちら]





  1. アプリケーション・ナビゲータで、 ViewControllerプロジェクトの「 browseOrders.jsff 」ノードをダブルクリックして、ビジュアル・エディタのファイルを開きます。
  2. Structureウィンドウに browseOrders.jsffのコンポーネント階層が表示されていることを確認します。
  3. コンポーネント・パレットで、 ADF Facesページの Layoutパネルにある「 panel splitter」 Panel Splitterをドラッグし、グラフの下のページにドロップします。

    tell me more iconレイアウト拡張機能

    ADF Facesレイアウト・コンポーネントを素早く参照し、それぞれの説明を確認するには、 Layout パネルを開いて各コンポーネントの上にマウス・ポインタを置きます。  [ 詳細はこちら]



  4. Structureウィンドウで、 af:panelSplitterが jsp:root内の dvt:barGraphの直後にあることを確認します。
  5. ビジュアル・エディタで、グラフをドラッグしてパネル・スプリッタの secondファセットにドロップします。 （追加したグラフを示す Facet secondという名称の長方形の領域が表示されます。）
  6. Structureウィンドウで、「 af:table 」コンポーネントをドラッグし、 firstファセットにドロップします。
  7. Structureウィンドウで「 af:panelSplitter 」コンポーネントを選択します。
  8. プロパティ・インスペクタで、 Commonセクションの SplitterPositionフィールドに 500と入力します。
  9. Styleセクションを開き、「 Box 」タブを選択します。 Widthプロパティの隣にあるドロップダウンリストで「 Percent 」が選択されていることを確認します。 Widthフィールドに 100と入力し、[Enter]を押します。

    tell me more iconIDE内

    panelSplitterを作成してコンポーネントを各パネルに追加すると、ビジュアル・エディタでページの最下部が次のように表示されます。 [ 詳細はこちら]



 

ポップアップ・ウィンドウの追加

tell me more iconポップアップ・ウィンドウの追加

ADF Facesの充実したコンポーネント機能によって、新しいポップアップ・ウィンドウをアプリケーションに追加できます。  [ 詳細はこちら]





  1. ページが前面に表示されていない場合は、エディタ・ウィンドウで「 browseOrders.jsff 」タブをクリックして前面に表示させます。
  2. Structureウィンドウに browseOrders.jsffのコンポーネント階層が表示されていることを確認します。
  3. コンポーネント・パレットの ADF Facesページで、 Common Componentsパネルの「 popup icon」 Popupをドラッグし、Structureウィンドウの jsp:rootにドロップします。 （ビジュアル・エディタでは、ポップアップ・コンポーネントは設計コンテナに表示されます。）
  4. プロパティ・インスペクタの Commonセクションで、 idフィールドに searchPopupと入力します。
  5. コンポーネント・パレットの Layoutパネルで、「 panel window icon」 Panel Windowをドラッグし、追加したポップアップ・コンポーネントにドロップします。
  6. プロパティ・インスペクタの Commonセクションで、 Modalプロパティ・ドロップダウン・リストから「 true 」を選択します。
  7. Structureウィンドウの af:panelGroupLayoutの下にある「 af:panelHeader 」を展開します。 次に、Structureウィンドウの af:popupの下にある af:panelWindowに、「 af:query 」コンポーネントをドラッグします。

    tell me more icon問合せパネルの追加

    Structureウィンドウのコンポーネントを移動して、ページのコンポーネントの再編成および順序の変更をおこないます。 ポップアップを定義してパネル・ウィンドウと問合せウィンドウを追加すると、Structureウィンドウが次のように表示されます。[ 詳細はこちら]



  8. ビジュアル・エディタでは、ポップアップ・コンポーネント以外の任意の場所をクリックすると、メイン・ページの編集に戻ります。
  9. コンポーネント・パレットの Common Componentsで、「 button icon」 Buttonをドラッグし、 New Orderボタンの隣にあるフォームにドロップします。 （追加したボタンを囲む Panel Group Layout - horizontalという名称の長方形の領域が表示されます。
  10. プロパティ・インスペクタの Commonセクションで、 Textプロパティの値を Deleteに変更し、[Enter]を押します。
  11. コンポーネント・パレットで、「 Operations 」パネルを開きます。 「 show popup behavior icon」 ShowPopupBehaviorをドラッグし、新規の Searchボタンの上にドロップします。
  12. プロパティ・インスペクタで、 PopupIdフィールドに searchPopupと入力し、[Enter]を押します。
  13. エディタ・ウィンドウで、「 adfc-config.xml」タブをクリックして、ダイアグラムを前面に表示します。 「 orderMain 」ページ・アイコンを右クリックして、「 R un 」を選択します。

    tell me more iconIDE内

    ポップアップ・ウィンドウを作成して「 Search 」ボタンを追加すると、ビジュアル・エディタでページが次のように表示されます。 [ 詳細はこちら]



 

Copyright © 1997, 2008, Oracle.All rights reserved.