10g（10.1.3.2.0）
E05043-01
 目次 |
 索引 |
| Oracle WebCenter Framework チュートリアル 10g（10.1.3.2.0） E05043-01 |
|
このレッスンでは、前のレッスンで作成したページを拡張します。具体的には、カスタマイズ可能なコンポーネントをページに追加し、コンポーネントのルック・アンド・フィールに影響を与える様々な方法を試してみます。その過程で、ページをテストして、ページの開発が予測どおりに進んでいることを確認します。
図4-1に、このレッスンを終えた時点での、ページ上のコンポーネントのレイアウトを示します。
次の手順を実行することによって、ページをカスタマイズします。
まずは、Oracle WebCenter Frameworkで提供されるいくつかのメリットについて説明します。
Oracle WebCenter Frameworkの主要な機能の1つは、サイト管理者が他の人のページをカスタマイズできる「実行時での設計時」という概念です。カスタマイズは、カスタマイズ可能なコンポーネント（具体的にはPanelCustomizableおよびShowDetailFrame）を使用して行います。（ページのカスタマイズは、前の章でポートレット・アクションを使用して行ったポートレットのカスタマイズとは異なります。）
この2つのコンポーネントを使用すると、コンテンツの特定の部分を非表示にしたり、ページの別の位置に移動したりするためのオプションをユーザーに与えることができます。これから、その方法を示します。
このグループには次の2つの項目があります。
これから、これらの概念が実際にどのように作用するかを示します。
ページの構造が、構造ウィンドウに表示されることがわかります（図4-3）。
「h:form」タグの上にドロップします。 「構造」ビューで作業すると、コンポーネントをはるかに正確に配置できますが、コンポーネントを直接ビジュアル・エディタにドラッグ・アンド・ドロップすることもできます。
「cust:panelCustomizable」タグの上にドロップします。 「cust:showDetailFrame」は、「cust:panelCustomizable」の子になります
（図4-4を参照）。
ビジュアル・エディタ（図4-5）で、グレーのボックス内に「showDetailFrame1」が表示されます。グレーのボックスはcust:panelCustomizableを表すため、この中にshowDetailFrameを適切にドロップしたことがわかります。丸で囲まれた領域は、ユーザーがshowDetailFrameのコンテンツのカスタマイズに使用するコントロールを表します。
今度は、簡単なイメージのフォームのコンテンツを追加します。
すると、一般的に使用されるADFコンポーネントのリストが表示されます。
「cust:showDetailFrame」の上にドロップします。 ObjectImageの挿入ウィンドウが開きます。
webcentertutorialcontent.zipを解凍したディレクトリを見つけます（「サンプル・チュートリアル・ファイルのダウンロード」を参照）。たとえば、C:¥TutorialContentなどです。
「camera.gif」を選択し、「OK」をクリックします。 ドキュメント・ルートの下にイメージを配置するかどうか尋ねるダイアログが開きます。「はい」を選択すると、イメージのコピーが、アプリケーション・デプロイメント・アーカイブの作成時に自動的に含められる場所に保存されます。
イメージcamera.gifが、showDetailFrameコンポーネント内に表示されます（図4-6を参照）。
今度は、別のイメージを追加して、ユーザーがページ上でイメージを移動する方法を学びます。
「cust:panelCustomizable」の上にドロップします。
「cust:showDetailFrame」の上にドロップします。
hula.gifを見つけ（「サンプル・チュートリアル・ファイルのダウンロード」を参照）、「OK」をクリックします。 ドキュメント・ルートの下にイメージを配置するかどうか尋ねるダイアログが開きます。
ビジュアル・エディタでの「設計」タブは、図4-7のように表示されます。
各イメージにはshowDetailFrameヘッダーにそれぞれアクションが関連付けられているため、互いに無関係に動作できます。
今度は、ページを実行し、どのようなカスタマイズが可能かを確認します。
この手順では、ページを実行し、ユーザーが行えるカスタマイズをテストします。
コンパイラ・エラーがなければ、ページが別のブラウザ・ウィンドウ内に開きます（図4-8を参照）。
2つのアクション（「移動」および「最大化」）が表示されます（図4-9を参照）。
これらのアクションは、showDetailFrameによって自動的に提供されます。showDetailFrame内にドロップしたコンポーネントはいずれも、その親であるpanelCustomizableのコンテキストで移動または最大化できます。
showDetailFrameが拡大されてpanelCustomizableいっぱいに表示されることを確認します（図4-10を参照）。2つ目のイメージは非表示になります。MyJavaPortletはこのアクションに影響されないことに注意してください。これは、ポートレットがこのpanelCustomizableの一部ではないためです。
図4-11に、最初の図形（カメラ）に対して「移動」、「下へ」を使用した後のブラウザを示します。フラの図形は、カメラの図形の上に配置されています。
次の手順では、MyJavaPortletを「cust:panelCustomizable」に移動し、プロパティ・インスペクタを使用してページ上の様々なコンポーネントの動作を試してみます。
「cust:panelCustomizable」にドロップします（図4-12）。
ポートレットは、自動的にオブジェクト・リストの一番下に移動します。また、「設計」ビューでも同様になります。ポートレットは、2つ目のイメージの下に表示されます。
最初にshowDetailFrameを挿入せずにポートレットを直接「cust:panelCustomizable」にドロップしたことに注意してください。これは、ポートレットには、ポートレット・クロムによって提供されるカスタマイズ機能（ページ上でポートレットの最大化/最小化や位置変更を行う機能）が自動的に備わっているためです。
今度は、ポートレットおよびイメージに別の位置決めを選択します。これらを垂直に表示せずに、水平に表示します。
「cust:panelCustomizable」を選択します。
プロパティ・インスペクタは、JDeveloper画面の右部分です（図4-13）。
ビジュアル・エディタで、ポートレットとイメージが上下にではなく横に並んで表示されることがわかります（図4-15を参照）。
今度は、コンテンツを表示または非表示にする機能を有効にします。
これによって、メニューの一部としてアクション・アイコンが表示されるためのヘッダー領域が、レイアウトの一番上に表示されます。（独自のアプリケーションでヘッダーを表示しない場合は、DisplayHeaderをfalseのままにしておくことができます。）次の手順を実行する間は、panelCustomizable領域の上にカーソルを合せると、コンポーネントのメニュー・アクションが表示されます。
IsSeededInteractionAvailable属性を設定すると、コンポーネントによってサポートされるメニュー・アクションを表示することが可能になります。この場合、ユーザーは、レイアウト内に表示されるコンテンツを表示または非表示にすることができます。
今度は、プロパティ・インスペクタを使用してMyJavaPortletの名前を変更する方法を学びます。
プロパティ・インスペクタを介して変更を行った後、実行時にポートレット名を再度カスタマイズまたはパーソナライズすることはできません。この動作はこのチュートリアルの目的上は問題ありませんが、将来的に独自のアプリケーションを開発する際には留意しておく必要があります。
Sample Portletを入力します（図4-17を参照）。これによって、ポートレット・ヘッダーに表示される名前が変更されます。
これから、再度ページを実行して、これらの変更がページにどのような影響を及ぼすかを確認します。
カスタマイズをテストするには、ページを実行し、ページが予測どおりに表示されることを確認します。
あるいは、埋込みOC4Jサーバーのログ・ウィンドウで、赤い四角形の「終了」アイコンをクリックします。
コンパイラ・エラーがなければ、ページが新しいブラウザ・ウィンドウ内に開きます（図4-18）。
手順3で行った他のページ・カスタマイズもすべて反映されています。
ページを実行した人には、これらのページ・カスタマイズが表示されます。
将来、1つのページ上に複数のpanelCustomizableコンポーネントを使用し、それぞれで、1つのshowDetailFrameコンポーネント内に複数のポートレットまたはオブジェクトを含めることができます。各レイアウトにそれぞれの「移動」、「最大化」および「表示/非表示」機能があるため、ページに複数のレイアウトを配置すると、コンポーネントおよびポートレットのブロックを個別のエンティティとして扱うことができます。詳細は、『Oracle WebCenter Framework開発者ガイド』を参照してください。
Oracle WebCenter Frameworkでは、アプリケーションのスタイル（つまり、ルック・アンド・フィール）を制御する方法が2つあります。
次の各手順では、この両方の方法を使用して、MyPage.jspxのルック・アンド・フィールを変更します。
この手順では、（Oracleという名前の）デフォルトのADF Facesスキンを使用して、スタイル関連のプロパティを操作します。
「cust:showDetailFrame」エントリの1つを選択します。このコンポーネントを使用して、スタイル・プロパティ値を指定する方法を示します。
デフォルトのADF Facesスキンには、light、mediumおよびdarkの3つの設定があります。このコンポーネントには濃い背景色を選択します。
コンパイラ・エラーがなければ、ページが新しいブラウザ・ウィンドウ内に開きます（図4-21）。showDetailFrameの背景の装飾が変更されたことに注意してください。
今度は、新しいスキンを作成し、デフォルトのADF Facesスキンで定義されているスタイルをオーバーライドします。
この手順では、新しいスキンを作成してアプリケーションに登録し、カスタム・スタイルをMyPage上のコンポーネントに適用する方法を学びます。
mystyle.cssを入力します（図4-22を参照）。
新しいスタイルシートが、アプリケーション・ナビゲータの「ViewController」、「Webコンテンツ」、「css」の下に表示されます。また、エディタにも表示されます。デフォルトのスタイル・セレクタBODY、H1、H2およびH3に注意してください。
以降の手順で、新しいスキンをアプリケーションに登録します。これには、adf-faces-skins.xmlという名前のファイルを作成し、スキンのID、場所、.cssなどを示すタグの短いリストをこのファイルに移入します。
adf-faces-skins.xmlを作成します。
adf-faces-skins.xmlを入力します（図4-23を参照）。
エディタに空のXMLファイルが表示されます。このファイルは、アプリケーション・ナビゲータで「WEB-INF」の下に表示されています。
adf-faces-skins.xmlに追加して、新しいスキンを指定します（また、新しいスタイルシートmystyle.cssをポイントします）。
<?xml version="1.0" encoding="ISO-8859-1"?> <skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin"> <skin> <id>mystyle</id> <family>mystyle</family> <render-kit-id>oracle.adf.desktop</render-kit-id> <style-sheet-name>css/mystyle.css</style-sheet-name> </skin> </skins>
ファイルは、図4-24のように表示されます。
adf-faces-skins.xmlを保存します。
次の手順では、adf-faces-config.xml内に<skin-family>タグを設定することにより、この新しいスキンを使用するようにアプリケーションを構成します。
adf-faces-config.xml内の<skin-family>タグを編集します。
「adf-faces-config.xml」を開きます。
oracle（デフォルトのスキン）を新しいスキンのファミリ名に置き換えます。mystyleを入力します（図4-25を参照）。
これで、新しいスキンがアプリケーションに登録されました。今度は、MyPage上のshowDetailFrameコンポーネントに適用するスタイルシートにいくつかのスタイル・セレクタを追加します。
mystyle.cssに追加します。
af|showDetailFrame::header-light { color:Purple; } af|showDetailFrame::header-medium { color:Purple; } af|showDetailFrame::header-dark { color:White; }
このコードは、showDetailFrameコンポーネントのヘッダーおよびポートレットのヘッダーに表示されるテキストの色を指定するものです。ここでは、header-lightおよびheader-mediumにpurpleのテキストを選択し、header-darkにwhiteのテキストを選択しました。適宜、別のカラー・スキームを選択してください。
af|showDetailFrame::content-light, af|showDetailFrame::content-medium, af|showDetailFrame::content-dark { color: Black; background-color: Silver; border-left:1px black solid; border-right:1px black solid; border-bottom:1px black solid; }
このコードは、showDetailFrameコンポーネントおよびポートレット本体のコンテンツについて、背景を銀色、テキストを黒色、境界線を黒色に変更するものです。適宜、別のカラー・スキームを選択してください。
showDetailFrameコンポーネントおよびpanelCustomizableコンポーネントのスタイル・セレクタの完全なリストは、『Oracle WebCenter Framework開発者ガイド』を参照してください。
WhiteからPurpleに変更します。BODYタグは次のようになります。
BODY { background-color: Purple; color: black; font-family: Arial, Helvetica, sans-serif; }
コンパイラ・エラーがなければ、ページが新しいブラウザ・ウィンドウ内に開きます。
ここで、新しいルック・アンド・フィールを調べてみます。ここに示したスタイルを使用した場合、ページは図4-26のように表示されます。showDetailFramesで、紫色と白色のヘッダー・テキスト、黒色のコンテンツ・テキスト、および銀色の背景が表示されていることに注意してください。また、ページの背景も紫色になります。
このレッスンでは、アプリケーションのルック・アンド・フィールを操作する方法を試してみました。詳細は、『Oracle WebCenter Framework開発者ガイド』を参照してください。
先に進む前に、デフォルトのOracleスキンに戻します。
次のレッスンでは、ユーザーへの掲示板のような機能を提供するリッチ・テキスト・ポートレットを追加する方法を学びます。
|
 Copyright © 2007 Oracle Corporation. All Rights Reserved. |
|
