| Oracle Fusion Middleware Oracle WebCenter開発者用チュートリアル 11gリリース1（11.1.1） B55930-01 |
|
 戻る |
 次へ |
このレッスンでは、基本的なカスタムWebCenterアプリケーションを作成してから、アプリケーション内にページを作成します。このページには後でサービス、コンテンツおよびポートレットを追加します。ページにはレイアウト・コンポーネントやOracle Composerも追加して、開発者およびユーザーが、実行時にページをカスタマイズできるようにします。レッスンの最後には、Oracle Composerを使用して、実行時におけるページのカスタマイズを試みます。
図3-1は、このレッスンの最後にページがどのように表示されるかを示しています。
簡単なカスタムWebCenterアプリケーションの構築から始めます。WebCenter Frameworkには、すぐに開始するために使用できるテンプレートが用意されています。
カスタムWebCenterアプリケーションを作成するには、次のようにします。
Oracle JDeveloperで、メニューから「ファイル」→「新規」を選択します。
新規ギャラリの「現在のプロジェクト・テクノロジ」タブで、「一般」カテゴリが強調表示されています。「一般」の下の「アプリケーション」をクリックします。
「項目」リストで、スクロール・ダウンして「WebCenterアプリケーション」を選択し、「OK」をクリックします（図3-2）。
「アプリケーション名」タブの「アプリケーション名」フィールドにMyTutorialApplicationと入力します。
「終了」をクリックします。Oracle JDeveloperによって、2つのプロジェクトを含むアプリケーションのベース・ファイルが生成されます。ファイルはアプリケーション・ナビゲータで確認できます（図3-3）。
Model: ここでは、アプリケーションがバックエンド・ロジックを実行する場合に必要となるJavaBeansおよびその他のデータ・コントロールを定義します。
ViewController: ここでは、WebCenterサービスおよびポートレットを消費するJavaServer Faces（JSF）ページを作成します。
アプリケーションをテストするために、いくつか調整を行います。「ViewController」プロジェクトを右クリックし、「プロジェクト・プロパティ」を選択します（図3-4）。
「プロジェクト・プロパティ」ダイアログ・ボックスの左側の列で、「Java EEアプリケーション」を選択します（図3-5）。
ここでは、このチュートリアルを通して使用するアプリケーション・リソースを参照しやすくするために、アプリケーションのコンテキスト・ルートを変更します。「Java EE Webアプリケーション名」フィールドに、次のように入力します。
MyTutorialApplication
「Java EE Webコンテキスト・ルート」フィールドに、同じ値を入力します。
MyTutorialApplication
「プロジェクト・プロパティ」ダイアログ・ボックスは、図3-6のように表示されるはずです。
「OK」をクリックして、変更を確定します。
アプリケーションを保存するには、ツールバーで「すべて保存」アイコンをクリックします。
基本のカスタムWebCenterアプリケーションが作成されたので、ページを作成できます。しかし、ページを作成する前に、イメージ・ファイルをアプリケーションに追加して、それらをページで使用できるようにしましょう。
アプリケーションを作成したので、ページ用のロゴなど、使用するイメージ・ファイルを追加します。追加するイメージ・ファイルを入手する手順を含む第2章「チュートリアルの準備」の手順を実行したことを確認してください。
アプリケーションにイメージ・ファイルを追加するには、次のようにします。
ファイル・システム・ディレクトリ（Windows Explorerなど）で、Oracle JDeveloperをインストールした場所（JDev_Home）に移動して、次のディレクトリを探します。
JDEV_USER_HOME\mywork\MyTutorialApplication\ViewController\public_html
JDEV_USER_HOMEは、JDeveloperでプロジェクトを格納するデフォルトのディレクトリを指し、JDEV_USER_HOME環境変数がどのように設定されているかによって決まります。たとえば、C:\ drive、あるいはD:\Oracle\Middleware\などとなります。このディレクトリがどこに設定されているかを見つけるには、ファイル・システムを調べる必要があります。
アプリケーションを作成したときに、MyTutorialApplicationサブディレクトリが自動的に生成されました。
public_htmlディレクトリで、imagesというディレクトリを作成します。
第2章「チュートリアルの準備」でダウンロードし、解凍したチュートリアル・サンプル・ファイルの場所に移動し、C:\TutorialContent\imagesフォルダの内容を新規のimagesディレクトリにコピーします。
Oracle JDeveloperに戻り、アプリケーション・ナビゲータの「プロジェクト」リストの隣にある「リフレッシュ」アイコンをクリックします。これで、アプリケーション・ナビゲータに「images」フォルダが表示されます（図3-7）。
|
注意: イメージ名は、1.jpg、2.jpgという具合に列挙されます。これらのイメージ名は、第5章「ポートレットの構築とアプリケーションでのポートレットのワイヤリング」でポートレットを作成するときに取得する項目の製品IDと一致します。これらのイメージ・ファイルの名前を変更した場合、文で正しい結果が返ってこない可能性があります。 |
これで、これらのイメージをアプリケーションで使用できるようになりました。
この手順では、自分のアプリケーション向けに簡単なJSFページを作成する方法を学習します。このページには、チュートリアルの後続の手順で構成および追加するサービスやポートレットが含まれることになります。
MyTutorialApplicationのアプリケーション・ナビゲータで、「ViewController」プロジェクトを右クリックしてから、「新規」を選択します。
新規ギャラリの「Web層」の下で、「JSF」を選択します。
「項目」の下で「JSFページ」を選択してから、「OK」をクリックします（図3-8）。
「JSFページの作成」ダイアログ・ボックスの「名前」フィールドにMyPageと入力します。
「XMLドキュメントの作成(*.jspx)」ボックスが選択されていることを確認します。
ページの初期レイアウトを設定しましょう。WebCenter Frameworkには、ページ・レイアウトの作成開始を助けるいくつかのクイック・スタートが組み込まれています。独自のアプリケーションの作成を開始する際にこれらのレイアウトを使用することも、あるいは最初から独自のレイアウトを作成することもできます。このチュートリアルでは、クイック・スタート・レイアウトを使用します。
「初期ページ・レイアウトおよびコンテンツ」の下で「クイック・スタート・レイアウト」を選択し、「参照」をクリックします（図3-9）。
「カテゴリ」の下で、「1列」を選択します。
「タイプ」の下で、2番目のタイプを選択します。
「レイアウト」の下で、2番目のレイアウトを選択します。コンポーネント・ギャラリは、図3-10のように表示されます。
「OK」をクリックしてから、もう一度「OK」をクリックします。
ウィザードが終了し、アプリケーション・ナビゲータに作成したページが表示されます（図3-11）。
アプリケーション・ナビゲータの右側の「設計」ビューに、自分のページが表示されています（ビューの最下部にある「設計」タブが図3-12のように強調表示されているのに注目してください）。
アプリケーション・ナビゲータの下に、ページ用の「構造」ウィンドウがあります。このビューには、ページのすべての要素が階層で表示されます。「構造」タブのすぐ下に、押しピンのアイコンがあります（図3-13）。
このアイコンをクリックすると、「構造」ウィンドウの動作が切り替わります。アイコンが押されていると、「構造」ウィンドウには、Oracle JDeveloperでどこをクリックしようと、現在のビューが表示されます。アイコンが押されていなければ、JDeveloperでどこをクリックするかに応じて、「構造」ウィンドウが更新されます。
このビューではノードを開いて、「クイック・スタート・レイアウト」の使用を選択したことによってページに自動的に追加された様々なコンポーネントを確認できます。たとえば、「f:view」の下にパネル・スプリッタとパネル・スプリッタ・ファセットが表示されています（図3-14）。
|
注意: かわりに、ページの「ソース」ビューに変更することもできます。チュートリアルとしては、「構造」ウィンドウを使用すると新しいコンポーネントを追加した場所が明確にわかります。 |
これでアプリケーションとJSFページを作成したので、ページのレイアウトを調整し、Oracle Composerをページに追加して、ユーザーがページを実行時にカスタマイズできるようにします。
ページの作成時に「クイック・スタート・レイアウト」を選択すると、いくつかの初期レイアウト・コンポーネントが使用可能になり、特にパネル・スプリッタを使用すれば、ページの基本的なフレームワークを設定できます。では、いくつかのレイアウト・コンポーネントをページに追加し、ヘッダー・セクションを構築して、ロゴ・イメージなどのコンテンツの追加を開始できるようにします。
ページにレイアウト・コンポーネントを追加するには、次のようにします。
「構造」ウィンドウで、「af:panelSplitter - vertical」として表示されているパネル・スプリッタを選択します。このコンポーネントのプロパティ・インスペクタが、コンポーネント・パレットの右下に表示されます（図3-15）。プロパティ・インスペクタのコンテンツは、Oracle JDeveloperでフォーカスのある場所に応じて更新されます。「構造」ウィンドウと同様に、プロパティ・インスペクタにある押しピン・アイコンを使用して、現在選択されているコンポーネントに応じてビューを固定できます。
|
注意: コンポーネントのプロパティ・インスペクタを常に表示するには、コンポーネントを右クリックして、ポップアップ・メニューから「プロパティに移動」を選択します。 |
プロパティ・インスペクタの「共通」の下で、「SplitterPosition」プロパティを探し、値を50から85に変更します（図3-16）。JDeveloperの他の場所をクリックすると、プロパティは保存されます。
「構造」ウィンドウで、パネル・スプリッタを開きます。2つのファセットが含まれていることがわかります。次の手順で、ADF Facesコンポーネントを「first」ファセット上にドロップします。
ADF Facesレイアウト・コンポーネントをページに追加し、コンテンツがどのように表示されるかを制御します。
コンポーネント・パレットで、リストから「ADF Faces」を選択します。コンポーネント・パレットが表示されていない場合は、「表示」→「コンポーネント・パレット」を選択すると表示できます。
|
注意: コンポーネント・パレットはコンテキストによって左右されます。つまり、Oracle JDeveloperでの表示の内容に応じて、コンポーネント・パレットのコンテンツが更新されます。このチュートリアルを進めるうちに、コンポーネント・パレットから突然コンポーネントがなくなる場合や、該当のコンポーネントが表示されない場合は、正しいページまたはパネルを選択しているかどうかを確認してください。 |
「レイアウト」の下で、「パネル・ストレッチ・レイアウト」までスクロール・ダウンして選択し（図3-17）、「構造」ウィンドウの「first」ファセット上にドラッグ・アンド・ドロップします。
図3-18は、「構造」ウィンドウのパネル・ストレッチ・レイアウトを示しています。
パネル・ストレッチ・レイアウト・コンポーネントをドロップすると、プロパティ・インスペクタにはこのコンポーネントのプロパティが表示されます（図3-19）。
プロパティ・インスペクタで、図3-20に示すように、次のプロパティを設定します。
StartWidth: 300px
EndWidth: 400px
TopHeight: 0px
Bottomheight: 0px
次に、パネル・ストレッチ・レイアウトの「start」ファセットで、ページのヘッダーにロゴを追加します。「構造」ウィンドウで、追加したばかりのパネル・ストレッチ・レイアウトを開き、様々なファセットを表示して（図3-21）、「start」ファセットを選択します。
「設計」ビューでは、対応するファセットが強調表示されます（図3-22）。これは、ロゴ・イメージを追加する場所です。
追加するロゴは、「手順2: アプリケーションへのイメージ・ファイルの追加」でアプリケーションに追加したイメージ・ファイルです。アプリケーション・ナビゲータで、「ViewController」→「Webコンテンツ」を選択し、「images」フォルダを開きます。
ページの「設計」ビューの「start」ファセットにlogo.pngをドラッグ・アンド・ドロップします。イメージをドロップしたら、ポップアップ・メニューからADF Facesイメージを選択します（図3-23）。
ロゴは、ページ上で図3-24のように表示されます。
イメージは、図3-25のように、「構造」ウィンドウにも表示されます。
ヘッダーのレイアウトを仕上げましょう。「設計」ビューには、「end」ファセットがあります（図3-26）。
コンポーネント・パレットから、「パネル・グループ・レイアウト」のADF Facesコンポーネントをこのファセットにドラッグ・アンド・ドロップします。これは「設計」ビューや、より簡単に「構造」ウィンドウで見ることができます（図3-27）。
「パネル・グループ・レイアウト」が選択されているとき、プロパティ・インスペクタでは、「外観」の下で、「Halign」プロパティを「end」に変更します。こうして、このレイアウト・コンポーネントに追加するコンポーネントの位置合せを変更します。
「Layout」プロパティを「horizontal」に変更します（図3-28）。
このチュートリアルのために、ステータス・インジケータを追加します。このステータス・インジケータによって、実行時のアプリケーションのアクティビティが常にユーザーに通知されます。たとえば、リンクをクリックすると、ステータス・インジケータにより、アプリケーションがそのリンクのターゲットにアクセスしていることが通知されます。
「設計」ビューに「MyPage.jspx」タブが表示されていることを確認します。
コンポーネント・パレットのリストから「ADF Faces」を選択して、ADF Facesコンポーネントを表示します。
「共通コンポーネント」の下で、リストをスクロール・ダウンし、ステータス・インジケータを探して選択します（図3-29）。
ステータス・インジケータを、図3-30のように、「end」ファセットのパネル・グループ・レイアウトにドラッグ・アンド・ドロップします。
実行時にページがどのように表示されるかを調べます。「設計」ビューでページを右クリックして、「実行」を選択します。ロゴとステータス・インジケータを含むページが、図3-31のようにブラウザに表示されます。
JDeveloperに戻ります。
ページの初期ヘッダーを設定したので、実行時にページをカスタマイズできるように、Oracle Composerを追加します。
従来のJavaEEアプリケーションでページを編集する場合（たとえば、コンテンツの追加やセキュリティ定義の編集など）、これらの変更はOracle JDeveloperで行い（アプリケーションの設計時）、更新されたアプリケーションを本番環境に再デプロイする必要がありました。Oracle Composerにより、開発者もアプリケーションのユーザーも、実行時にページを編集し、変更の結果を即座に表示できるようになりました。
Oracle Composerを使用すると、ページでのオブジェクトの移動、コンテンツの表示または非表示、新しいコンテンツのページへの追加といった機能をユーザーに提供できます。ページにOracle Composerを追加します。
ページにOracle Composerを追加するには、次のようにします。
まず、Change Mode Buttonをページに追加します。このボタンにより、アプリケーションの実行時ユーザーは、ページの表示とOracle Composerを使用したページの編集を切り替えられるようになります。
コンポーネント・パレットで、リストから「Oracle Composer」を選択します。
「共通コンポーネント」の下のChange Mode Buttonコンポーネントを、「構造」ウィンドウのパネル・グループ・レイアウトにドラッグ・アンド・ドロップします。このコンポーネントを追加すると、実行時にページの編集モードと表示モードを切り替えられます。図3-32は、コンポーネント・パレットのChange Mode Buttonを示しています。
|
注意: コンポーネント・パレットの表示は、すべてのオプションが見えるように調整できます。調整するには、バー（レイアウト・バーなど）をクリックし、コンポーネント名が表示されるようにバーを上下にドラッグします。 |
必要に応じて、「構造」ウィンドウでボタンをドラッグし、ステータス・インジケータの上に移動できます（図3-33）。
レイアウトに「Page Customizable」コンポーネントを追加します。Oracle Composerコンポーネントである「Page Customizable」は、実行時カスタマイズ機能をページに追加します。
コンポーネント・パレットで、「Oracle Composer」がまだ選択されていることを確認します。
「共通コンポーネント」の下で、「Page Customizable」（図3-34）を「構造」ウィンドウの「second」 ファセット上にドラッグ・アンド・ドロップします（図3-35）。
「構造」ウィンドウで、「Page Customizable」を開き、不要になった「Panel Customizable」を削除します（図3-36）。削除するには、選択して[Del]キーを押します。
今度は、ページに「Layout Customizable」を追加して、このリージョンのレイアウトを作成します。後続の章では、この領域にサービスやポートレットを追加します。コンポーネント・パレットから、「Layout Customizable」を「構造」ウィンドウの「Page Customizable」上にドラッグ・アンド・ドロップします（図3-37）。
図3-37 「Page Customizable」の「Layout Customizable」
「Layout Customizable」が選択されている間に、プロパティ・インスペクタの「共通」の下で、「Type」プロパティを「twoColumnBottom」に設定します（図3-38）。
いくつかのOracle Composerコンポーネントをページに追加したので、ページを実行して、実行時の機能の一部を調べてみましょう。
「設計」ビューで「MyPage」を右クリックして、ポップアップ・メニューから「実行」を選択し、実行時のページを表示します（図3-39）。
次の手順では、実行時のOracle Composerについて学習します。
設計時にJDeveloperでOracle Composerをページに追加すると、ページを実行し、実行時にWebブラウザでページをカスタマイズできます。アプリケーションのユーザーもページを実行時にカスタマイズできるので、開発者はアプリケーションの外観の変更が必要になるたびに、JDeveloperに戻る必要はありません。
この手順では、Oracle Composerが提供するいくつかの機能をテストします。Oracle Composerの使用方法の詳細は、『Oracle Fusion Middleware User's Guide for Oracle WebCenter』を参照してください。
ブラウザにMyPageが表示されている間、ステータス・インジケータの隣に「Edit」ボタンが表示されます。「Edit」をクリックして、編集モードではページがどのように表示されるかを確認します（図3-40）。
編集モードで何ができるかを簡単に見ていきます。
上部の水平方向リージョンで、「コンテンツの追加」をクリックして、ランタイム・カタログを表示します。ここで、「開く」をクリックすれば、実行時に追加できる様々なADF Facesコンポーネントを表示できます（図3-41）。
テキスト・オブジェクトを追加して、どのように表示されるか確認します。カタログで、「テキスト」の隣にある「追加」をクリックしてから、「閉じる」をクリックします。リージョンに図3-42のようにテキスト・ボックスが表示されます。
リージョンの右上隅で、「テキストの編集」をクリックして、リッチ・テキスト・エディタに切り替えます。
カーソルをテキスト・ボックスに置き、サンプル・テキストを入力します。図3-43のように、ツールバーのいろいろな機能（テキストの太字への変更、フォントの変更など）も試すことができます。
終了したら、「編集完了」をクリックします。
ページ全体のレイアウトは、「レイアウトの変更」をクリックし、レイアウト・オプションを選択すれば変更できます （図3-44）。
3列レイアウトなど、レイアウトのオプションを選択してみてください。ページを変更すると、図3-45のように自動的にリフレッシュされます。
各コンポーネント・ボックスの右上隅の鉛筆アイコンをクリックして、ボックスのレイアウトを変更することもできます（図3-46）。
レイアウト・ボックスのコンポーネント・プロパティで、ボックスのレイアウトや背景色などを変更できます。「取消」をクリックして「プロパティ」ペインを終了します。
実行時にはその他にもいくつかのタスクを実行できます。次に例を示します。
コンポーネントをあるリージョンから別のリージョンにドラッグ・アンド・ドロップ。テキスト・ボックス上でマウスを動かし、十字カーソルが見えたらクリックして、テキスト・ボックスをページ上のあるリージョンから別のリージョンにドラッグします。
コンポーネントの削除。ボックスの右上隅で、「X」をクリックして、コンポーネントを削除します。
Oracle JDeveloperに戻ります。
加えた変更（サンプル・テキストなど）は、「設計」ビューには表示されません。開発者またはアプリケーション・ユーザーがOracle Composerで実行時に加えた変更は、別の場所に保存されるため、アプリケーションのソースに影響を与えません。
アプリケーションのビューには実行時に加えた変更による影響はありませんが、実行時のカスタマイズはMetadata Services（MDS）に格納されます。そのため、アプリケーションの開発中に、これらの変更を消去することをお薦めします。
「ビルド」メニューから、「ランタイムMDSカスタマイズの消去」を選択します（図3-47）。確認ダイアログ・ボックスが表示されたら、「はい」をクリックします。
Oracle ComposerおよびOracle Metadata Servicesについては、『Oracle Fusion Middleware Oracle WebCenterのための開発者ガイド』で詳しく学べます。
これでカスタムWebCenterアプリケーションとカスタマイズ可能なJSFページを作成し、実行時のOracle Composerについて簡単に見てきました。次の第4章「アプリケーションへのWebCenter Web 2.0サービスの追加」では、ページへのサービスとコンポーネントの追加を開始します。
