概要
概要 概要 概要 概要
次の手順を実行することによって、ページをカスタマイズします。
手順1: ユーザーにページのカスタマイズを許可
このグループには次の2つの項目があります。
■ PanelCustomizable: これは、Oracle ADFコンポーネントを含める水平レイアウトま たは垂直レイアウトを提供します。プロパティ・インスペクタでいくつかの属性を設 定することにより、レイアウト内に配置するコンテンツを表示または非表示にするた めのアクションを有効化できます。
■ ShowDetailFrame: これを使用すると、特定のコンポーネントに対して許可されるア
クションを表示できます。Oracle WebCenter Frameworkのこのリリースでは、ユー ザーはコンテンツを移動、最小化または最大化できます。ShowDetailFrameは、クロ ム（ページ上のコンポーネントを囲む境界）として考えることができます。
これから、これらの概念が実際にどのように作用するかを示します。
4. アプリケーション・ナビゲータで、「「「「MyPage.jspx」」」」を選択します。
ページの構造が、構造ウィンドウに表示されることがわかります（図4-3）。
図図
図図4-3 MyPage.jspxの構造の構造の構造の構造
5. コンポーネント・パレットで、「「「「PanelCustomizable」」」」を選択して構造ウィンドウにドラッ グします。これを「h:form」タグの上にドロップします。
「構造」ビューで作業すると、コンポーネントをはるかに正確に配置できますが、コンポー ネントを直接ビジュアル・エディタにドラッグ・アンド・ドロップすることもできます。
ヒントヒント
ヒントヒント: コンポーネントをフォーム内にドロップするときは、h:formを囲 む枠があることを確認してください。
手順1: ユーザーにページのカスタマイズを許可
6. コンポーネント・パレットで、「「「「ShowDetailFrame」」を選択して構造ウィンドウにドラッ」」 グします。これを「cust:panelCustomizable」タグの上にドロップします。
「cust:showDetailFrame」は、「cust:panelCustomizable」の子になります
（図4-4を参照）。
図図
図図4-4 構造ウィンドウ内の階層構造ウィンドウ内の階層構造ウィンドウ内の階層構造ウィンドウ内の階層
ビジュアル・エディタ（図4-5）で、グレーのボックス内に「showDetailFrame1」が表 示されます。グレーのボックスはcust:panelCustomizableを表すため、この中に showDetailFrameを適切にドロップしたことがわかります。丸で囲まれた領域は、ユー ザーがshowDetailFrameのコンテンツのカスタマイズに使用するコントロールを表しま す。
図 図 図
図4-5 MyPage.jspxに追加されたに追加されたに追加されたに追加されたShowDetailFrameコンポーネントコンポーネントコンポーネントコンポーネント
手順1: ユーザーにページのカスタマイズを許可
7. コンポーネント・パレットのドロップダウン・リストで、「「「「ADF Faces Core」」」」を選択しま す。
すると、一般的に使用されるADFコンポーネントのリストが表示されます。
8. アルファベット順リストをスクロールダウンして、「「「「ObjectImage」」」」コンポーネントを見つ けます。
9. 「「ObjectImage」「「 」」」を選択して構造ウィンドウにドラッグします。これを
「cust:showDetailFrame」の上にドロップします。
ObjectImageの挿入ウィンドウが開きます。
10.「「「「...」」」」ボタンを使用して、webcentertutorialcontent.zipを解凍したディレクトリを 見つけます（「サンプル・チュートリアル・ファイルのダウンロード」を参照）。たとえば、
C:¥TutorialContentなどです。
11. イメージ「camera.gif」を選択し、「「「「OK」」」」をクリックします。
ドキュメント・ルートの下にイメージを配置するかどうか尋ねるダイアログが開きます。
「はい」を選択すると、イメージのコピーが、アプリケーション・デプロイメント・アーカ イブの作成時に自動的に含められる場所に保存されます。
12.「はい」「はい」をクリックします。「はい」「はい」
13.「保存」「保存」をクリックしてから「「保存」「保存」 「「「OK」」」」をクリックします。
図 図 図
図4-6 MyPage.jspxへのイメージの追加へのイメージの追加へのイメージの追加へのイメージの追加
イメージcamera.gifが、showDetailFrameコンポーネント内に表示されます（図4-6 を参照）。
今度は、別のイメージを追加して、ユーザーがページ上でイメージを移動する方法を学び ヒント
ヒント ヒント
ヒント: イメージは、ファイル・システム（たとえば、
C:¥TutorialContent¥camera.gifなど）からShowDetailFrameコンポーネン トに直接ドラッグ・アンド・ドロップできます。ObjectImageが自動的に作 成され、イメージがプロジェクトにコピーされます。
手順1: ユーザーにページのカスタマイズを許可
17.「「「「ObjectImage」」」」を構造ウィンドウにドラッグします。これを2つ目の
「cust:showDetailFrame」の上にドロップします。
18.「...」ボタンを使用してhula.gifを見つけ（「サンプル・チュートリアル・ファイルのダ ウンロード」を参照）、「「「「OK」」」をクリックします。」
ドキュメント・ルートの下にイメージを配置するかどうか尋ねるダイアログが開きます。
19.「はい」「はい」を選択します。「はい」「はい」
20.「保存」「保存」をクリックしてから「「保存」「保存」 「「「OK」」」」をクリックします。
ビジュアル・エディタでの「設計」タブは、図4-7のように表示されます。
図図
図図4-7 MyPage.jspx上の上の上の上の2つのイメージおよびつのイメージおよびつのイメージおよびつのイメージおよび1つのポートレットつのポートレットつのポートレットつのポートレット
各イメージにはshowDetailFrameヘッダーにそれぞれアクションが関連付けられている ため、互いに無関係に動作できます。
今度は、ページを実行し、どのようなカスタマイズが可能かを確認します。