ヘッダーをスキップ

Oracle WebCenter Framework WebCenterアプリケーションの構築 - ステップ・バイ・ステップ
10g（10.1.3.2.0）
E05617-02
目次
目次		 索引
索引

戻る 次へ

7 ページの構築とコンポーネントの追加

この章では、ポートレット、ADF Facesコンポーネントおよびページ上のこれらのアイテム間のインタラクティビティで構成されている新しいページ（図7-1を参照）をアプリケーション用に構築する方法について説明します。

図7-1    1つに連結されたポートレットおよびADFコンポーネントで構成されている「My Acme」ページ


画像の説明

注意

このページ上に要素を作成するには、第2章「ポートレットの構築」で説明した手順に従ってプロデューサを登録し、第4章「コンテンツ・リポジトリの設定」の説明に従ってコンテンツ・リポジトリを設定しておく必要があります。  

この章の内容は次のとおりです。

手順1: 「MyAcme」ページの作成

コンポーネントを追加するページの構築を始めます。この項では、ページを作成し、サンプル・ファイルに用意されているテンプレートを適用します。

  1. アプリケーション・ナビゲータで、必要に応じて、「UserInterface」プロジェクトの「Webコンテンツ」フォルダを開きます。

  2. 「app」フォルダを右クリックし、「新規」を選択します。

  3. 新規ギャラリで、「Web Tier」ノードを開きます。

  4. 「JSF」を選択します。

  5. 「項目」リストで、「JSF JSP」を選択します。

  6. 「OK」をクリックして「JSF JSPの作成」ダイアログ・ボックスを表示します。

  7. ウィザードの「ようこそ」ページが表示されたら、「次へ」をクリックして「JSPファイル」ページを表示します。

  8. 「ファイル名」フィールドに、SRMyAcmeと入力します。

  9. 「JSPドキュメント(*.jspx)」を選択します（図7-2を参照）。

    図7-2    JSF JSPの作成


    画像の説明

  10. 「次へ」をクリックして「コンポーネント・バインディング」ページを表示します。

  11. 「コンポーネント・バインディング」ページで、「新規マネージドBeanでのUIコンポーネントの自動公開」オプションを選択します（図7-3を参照）。

    図7-3    JSF JSPの作成のコンポーネント・バインディング


    画像の説明

  12. 「次へ」をクリックして「タグ・ライブラリ」ページを表示します。

  13. 「フィルタ方法」を「プロジェクト・テクノロジ」にし、「使用可能なライブラリ」から「選択済のライブラリ」にすべてのライブラリを移動します（図7-4を参照）。

    図7-4    JSF JSPの作成のタグ・ライブラリのリスト


    画像の説明

  14. 「終了」をクリックしてページを作成します。

  15. 「WEB-INF」→「template」の順にフォルダを開きます。

  16. 「SRDemoTemplate.jspx」を右クリックし、「開く」を選択します。

  17. SRDemoTemplate.jspxファイルのソース・コードを選択してコピーし、新しいSRMyAcme.jspxページの既存のコードを置き換えます。

  18. SRMyAcme.jspxページのソースで次の行を探します。

    <af:panelPage title="#{res['_PAGE_NAME_.pageTitle']}">

    この行を次の行で置き換えます。

    <af:panelPage title="#{res['SRMyAcmePage.pageTitle']}">
  19. ファイルを保存します。

  20. UIResources.propertiesファイルを開きます。このファイルは、「UserInterface」→「アプリケーション・ソース」→「oracle.srdemo.view」→「resources」の下にあります。

  21. ファイルの最後に、次の新規エントリを追加します。

    # ==============================================================================
# Resource Bundle Strings for new WebCenter version of SRDemo
# ==============================================================================
 
# WC_SRMyAcmePage
SRMyAcmePage.pageTitle=My Acme
  22. ファイルを保存します。

手順2: OmniPortletプロデューサの登録

この章の後の手順で、「My Acme」ページに対してService Request Historyポートレットを作成します。OmniPortletを使用してこのポートレットを構築しますが、そのためには、まず、OmniPortletプロデューサを登録する必要があります。また、第2章「ポートレットの構築」で作成したPDK-Javaポートレット（SRStatus）をページに追加しますが、第2章の手順に従った場合はすでにSRStatusポートレットはデプロイおよび登録されています。

注意

プロデューサの登録の詳細は、『Oracle WebCenter Framework開発者ガイド』の第3章「ページへの移入」を参照してください。 

OmniPortletプロデューサを登録するには、次のようにします。

  1. アプリケーション・ナビゲータで、「UserInterface」を右クリックし、ポップアップ・メニューから「新規」を選択します。

  2. 新規ギャラリの「カテゴリ」で、「Web Tier」ノードを開き、「Portlets」を選択します。

  3. 「項目」で、「Oracle PDK-Javaプロデューサ登録」を選択し、「OK」をクリックします。

  4. 「Oracle PDKポートレット・プロデューサの登録」ウィザードのステップ1/3で、名前にOmniPortlet Producerと入力し、「次へ」をクリックします。

  5. 「URLエンドポイント」フィールドに、例7-1のようなOmniPortletプロデューサのURLを入力します。

    例7-1    OmniPortletプロデューサのURLエンドポイントのサンプル

    http://localhost:6688/portalTools/omniPortlet/providers/omniPortlet
  6. 「次へ」をクリックします。

  7. 作業環境に応じて残りのオプションを入力し、「終了」をクリックします。

手順3: カスタマイズ・コンポーネントの追加

ポートレットおよびコンテンツをSRMyAcme.jspxページに組み込むには、特定のカスタマイズ可能レイアウト・コンポーネントを追加して、これらのポートレットおよびコンテンツをユーザーに表示する方法を定義できるようにする必要があります。

SRMyAcme.jspxページの「構造」ペインには、af:panelPageコンポーネントが表示されます（図7-5を参照）。

図7-5    PanelPageコンポーネント


画像の説明

次のコンポーネントを、このPanelPageコンポーネント内に追加します。

  1. PanelCustomizableコンポーネント

    PanelCustomizableコンポーネントをPanelPageコンポーネント内に追加して、子コンポーネントを表示/非表示にできるようにします。

    そのためには、「カスタマイズ可能コンポーネント・コア」ライブラリから「PanelCustomizable」を選択し、「構造」ペインのaf:panelPageコンポーネントの上にドラッグします。Layoutをhorizontalに設定します。図7-6は、「構造」ペインでのcust:panelCustomizableコンポーネントの位置を示しています。

    図7-6    PanelCustomizableコンポーネント


    画像の説明

  2. ShowDetailFrameコンポーネント

    ShowDetailFrameコンポーネントをPanelCustomizableコンポーネント内に追加して、コンテンツの表示レベルのカスタマイズができるようにします。たとえば、コンテンツの表示を移動、最小化または最大化するオプションを提供します。

    そのためには、「カスタマイズ可能コンポーネント・コア」ライブラリから「ShowDetailFrame」を選択し、「構造」ペインのcust:panelCustomizableコンポーネントの上にドラッグします。TextをMy Service Requestsに設定します。
    図7-7は、「構造」ペインでのcust:showDetailFrameを示しています。

    図7-7    ShowDetailFrameコンポーネント


    画像の説明

  3. SelectOneChoiceコンポーネント

    SelectOneChoiceコンポーネントをこのShowDetailFrameコンポーネント内に追加して、表示する必要があるサービス・リクエストのステータスを選択できるようにします。

    そのためには、「ADF Faces Core」ライブラリから「SelectOneChoice」を選択し、「構造」ペインのcust:showDetailFrameコンポーネントの上にドラッグします。表示された「SelectOneChoiceの挿入」ダイアログ・ボックスで、該当するタブをクリックし、いくつかの属性の値を次のように設定します。

    • Label: Status

    • Value: Open

    • AutoSubmit: true

    • Binding: #{backing_app_SRMyAcme.statusPicker}

    • Id: statusPicker

    図7-8は、「構造」ペインでのaf:selectOneChoiceコンポーネントを示しています。

    図7-8    SelectOneChoiceコンポーネント


    画像の説明

  4. SelectItemコンポーネント

    3つのSelectItemコンポーネントをSelectOneChoiceコンポーネント内に追加して、SelectOneChoiceコンポーネントの下にオプションとして表示されるコンポーネントを組み込みます。

    SelectItemコンポーネントを追加するには、「ADF Faces Core」ライブラリから「SelectItem」を選択し、「構造」ペインのaf:selectOneChoiceコンポーネントの上にドラッグします。

    新しいコンポーネントごとに、いくつかの属性の値を次のように設定します。

    1つ目のSelectItemコンポーネント:

    • Label: Open

    • Value: Open

    • Binding: #{backing_app_SRMyAcme.selectItem1}

    • Id: selectItem1

    2つ目のSelectItemコンポーネント:

    • Label: Pending

    • Value: Pending

    • Binding: #{backing_app_SRMyAcme.selectItem2}

    • Id: selectItem2

    3つ目のSelectItemコンポーネント:

    • Label: Closed

    • Value: Closed

    • Binding: #{backing_app_SRMyAcme.selectItem3}

    • Id: selectItem3

    図7-9は、「構造」ペインでのSelectItemコンポーネントを示しています。

    図7-9    SelectItemコンポーネント


    画像の説明

  5. PanelHorizontalコンポーネント

    PanelHorizontalコンポーネントをPanelPageコンポーネント内に追加して、子要素を水平に配置します。

    そのためには、「ADF Faces Core」コンポーネント・ライブラリから「PanelHorizontal」を選択し、「構造」ペインのaf:panelPageコンポーネントの上にドラッグします。「構造」ペインのcust:panelCustomizableコンポーネントの下に位置するようにします（図7-10を参照）。

    図7-10    PanelHorizontalコンポーネント


    画像の説明

  6. ObjectSpacerコンポーネント

    ObjectSpacerコンポーネント（高さを30、幅を10に設定）をPanelHorizontalコンポーネントの下に追加して、レイアウト内のコンポーネント間に固定幅のスペースを挿入します。

    そのためには、「ADF Faces Core」コンポーネント・ライブラリから「ObjectSpacer」を選択し、「構造」ペインのaf:panelPageコンポーネントの上にドラッグします。「構造」ペインのaf:panelHorizontalコンポーネントの下に位置するようにします（図7-11を参照）。次の属性を設定します。

    • Height: 30

    • Width: 10

      図7-11    ObjectSpacerコンポーネント


      画像の説明

  7. ShowOneTabコンポーネント

    ShowOneTabをPanelPageコンポーネント内に追加して、ShowDetailItemコンポーネントによって定義される一連のアイテムを組み込みます。

    そのためには、「ADF Faces Core」コンポーネント・ライブラリから「ShowOneTab」を選択し、「構造」ペインのaf:panelPageコンポーネントの上にドラッグします。「構造」ペインのaf:objectSpacerコンポーネントの下に位置するようにします。次に、ShowOneTabを選択し、Positionプロパティをaboveに設定します。

  8. ShowDetailItemコンポーネント

    4つのShowDetailItemコンポーネントをShowOneTabコンポーネント内に追加して、ShowOneTabコンポーネント内にタブとして表示されるコンポーネントを組み込みます。

    これらのShowDetailItemコンポーネントのTextプロパティを、SR Information、Product Information、Schedule On-Site Service、My Current Contractsにそれぞれ設定します。後で、4つのコンポーネントをこれらのShowDetailItemコンポーネント内に追加します。

    ShowDetailItemを追加するには、「ADF Faces Core」コンポーネント・ライブラリから「ShowDetailItem」を選択し、「構造」ペインのaf:showOneTabコンポーネントの上にドラッグします。図7-12は、「構造」ペインでの4つのaf:showDetailItem子コンポーネントがあるaf:showOneTabコンポーネントを示しています。

    図7-12    ShowOneTabコンポーネント


    画像の説明

  9. PanelHorizontalコンポーネント

    PanelHorizontalコンポーネントを、SR InformationというShowDetailItemコンポーネント内に追加して、子要素を水平に配置します。

    そのためには、「ADF Faces Core」コンポーネント・ライブラリから「PanelHorizontal」を選択し、「構造」ペインのcust:showDetailItem component - SR Informationコンポーネントの上にドラッグします。

    後で、OmniPortletおよびOracle Java PDKポートレットをこのコンポーネント内に追加し、サービス・リクエストの履歴およびステータスをそれぞれ表示できるようにします。

  10. この項の前述の手順を実行して、PanelCustomizableコンポーネントを、Product InformationというShowDetailItemコンポーネント内に追加します。Layoutをhorizontalに設定します。図7-13は、「構造」ペインでの新しいcust:panelCustomizableコンポーネントを示しています。

    図7-13    ShowDetailItemコンポーネント群


    画像の説明

図7-14に、これらのコンポーネントがSRMyAcme.jspxの「構造」ペインにどのように表示されるかを示します。

図7-14    SRMyAcme.jspxページ内のレイアウト・コンポーネントを表示する「構造」ペイン


画像の説明

この章の次の手順では、これらのカスタマイズ・コンポーネント内にポートレットおよびコンテンツを追加する方法について説明します。

手順4: ADF表へのSelectOneChoiceの連結

特定のステータスであるサービス・リクエストのリストを表示するには、TopLinkおよびEJBセッションBeanに基づいたADF読取り専用表を追加する必要があります。ユーザーがこの表のサービス・リクエスト番号をクリックすると、そのサービス・リクエストの履歴およびステータスがページ下部のポートレットに表示されます。

サービス・リクエストを表示するADF表を追加するには、次の手順を実行します。

  1. データ・コントロール・パレットで、findServiceRequestByStatusを探して抽出します。

    ヒント

    データ・コントロール・パレットが表示されない場合は、「表示」メニューから「データ・コントロール・パレット」を選択します。 

  2. 「構造」ペインで、ServiceRequestを（前の項で追加した）showDetailFrameコンポーネントの上にドラッグします。

  3. ポップアップ・メニューから、「ADF読取り専用表」を選択します。アクション・バインディング・エディタが表示されます。クライアント・ライブラリが追加されていることに関する注意が表示された場合は、「OK」をクリックします。

  4. statusParamパラメータの「値」フィールドに、${"Open"}と入力します。

    これで、サービス・リクエストのステータスはOpenとハードコーディングされます。後で、動的な値を指定します。

  5. 「OK」をクリックします。

    「表の列の編集」ダイアログ・ボックスが表示されます。

  6. 再配置および削除して、次のように列を配置します。

    • svrId

    • status

    • problemDescription

    • assignedDate

    • requestDate

  7. 「ソートの有効化」を選択します。

  8. 「OK」をクリックします。

  9. 「SRMyAcme.jspx」を右クリックし、「実行」を選択します。

    すべてのオープン・サービス・リクエストが表に表示されます。

  10. 表示される行数を減らすには、ページ定義に移動して太字で示す変更を行います。

    例7-2    表示される行数に関するページ定義の編集

    <methodIterator id="findServiceRequestByStatusIter"
                    Binds="findServiceRequestByStatus.result"
                    DataControl="SRPublicFacade" RangeSize="4"
                    BeanClass="oracle.srdemo.model.entities.ServiceRequest"/>
  11. ページを再実行して、変更を確認します。

手順5: JavaServer Facesドロップダウン・コンポーネントの追加

前の項で、ステータスをOpenとハードコーディングしました。その結果、オープン・サービス・リクエストのリストの表示しかできません。今度は、ハードコーディングされたこの値ではなく、エンド・ユーザーがサービス・リクエストのステータスをリストから選択できるようにするコンポーネントを追加します。この項では、ステータスの選択に使用できるリストを追加し、選択されたステータスであるサービス・リクエストをすべて表示する方法を示します。そのためには、次の手順を実行します。

  1. アプリケーション・ナビゲータで、「アプリケーション・ソース」フォルダを開きます。

  2. 「oracle.srdemo.view」→「pageDefs」の順に開き、「app_SRMyAcmePageDef.xml」を選択します。

  3. 「構造」ペインで、「bindings」ノードを開きます。

  4. 「findServiceRequestByStatus」ノードを開きます。

  5. 「statusParam」をダブルクリックして「NamedDataのプロパティ」ダイアログ・ボックスを表示します。

  6. 「NDValue」フィールドで、既存の値を次の値で置き換えます。

    ${(backing_app_SRMyAcme.statusPicker.value == null) ? "Open" : 
backing_app_SRMyAcme.statusPicker.value}
  7. 常にstatusPickerの最新の選択が表に反映されるようにするには、表のpartialTriggerプロパティをstatusPickerに設定します。そのためには、ページ上の表コンポーネントを選択します。

    リストから、「statusPicker」を選択します。

  8. プロパティ・インスペクタで、表のPartial Triggerプロパティを探します。

  9. 「編集」ボタンをクリックしてPartial Triggerウィンドウを表示します。

  10. 「新規」をクリックし、リストから「statusPicker」を選択します。

  11. ページを実行して、変更を確認します。

  12. リストからステータスを選択し、表が変化する様子を確認します。

手順6: Service Request Historyポートレットの追加

この項の手順では、OmniPortletを使用して、サービス・リクエストの履歴を表示するポートレットを作成する方法を示します。OmniPortletを使用して、サービス・リクエストの履歴を表示するポートレットを作成するには、次の手順を実行します。

  1. 「手順2: OmniPortletプロデューサの登録」の説明に従って、必ずOmniPortletプロデューサを登録しておきます。

  2. コンポーネント・パレットから、「OmniPortlet Producer」を選択し、「OmniPortlet」を選択します。このコンポーネントを「構造」ペインの「panelHorizontal」コンポーネント（「SR Information」タブ上にある）の上にドラッグします。

  3. ページを実行して、ブラウザに表示します。

  4. ブラウザで、OmniPortletの「定義」をクリックして定義を変更します。

    1. 「タイプ」ページで、「SQL」を選択し、「次へ」をクリックします。

    2. 「ソース」タブで、例7-3に示すような問合せを入力します。

      例7-3    Service Request Historyポートレット用のSQL文

      select svr_id, to_char(svh_date, 'Dy, Mon DD, YYYY') created_on, notes, svh_type, 
users.first_name || ' ' || users.last_name createdby
from service_histories, users
where svr_id = substr ('##Param1##', 1, 3)
and users.user_id = service_histories.created_by
order by line_no
    3. 接続を編集し、データベースへの接続を定義します。

    4. Param1のデフォルト値として104を指定し、「表示」タブが表示されるまで「次へ」をクリックします。

    5. 「表示」タブで、次の変更を行います。

      • タイトル: Service Request History

      • ヘッダー・テキスト: Request ID: ##Param1##

      • レイアウト・スタイル: 表

    6. 「レイアウト」タブで、「表スタイル」を「代替」に設定し、表7-1に示すように「列のレイアウト」を指定します。

      表7-1    Service Request History OmniPortlet用のレイアウト設定 
      列ラベル  列  表示内容 

      ID 

      SVR_ID 

      Hidden 

      Comments 

      NOTES 

      Text 

      Created by 

      CREATEDBY 

      Text 

      Created on 

      CREATED_ON 

      Text 

      Comment type 

      SVH_TYPE 

      Text 
  5. 「終了」をクリックします。

    注意

    OmniPortletの詳細は、『Oracle WebCenter Framework開発者ガイド』の第13章「OmniPortletを使用したポートレットの作成」および『Oracle WebCenter Frameworkチュートリアル』のOmniPortletを構築するための手順を参照してください。 

手順7: Service Request Statusポートレットの追加

第2章「ポートレットの構築」で、サービス・リクエストIDを指定すると、特定のサービス・リクエストの現行ステータスが表示されるポートレットを作成しました。この項では、そのポートレットを「MyAcme」ページに追加します。

Service Request Statusポートレットをページに追加するには、次のようにします。

  1. 第2章「ポートレットの構築」の説明に従って、必ずPDK-Javaプロデューサを登録しておきます。

    ヒント

    第2章「ポートレットの構築」で登録したプロデューサはSRStatusProducerです。このプロデューサは、http://host:port/SRStatusPortlet/providersにあります。 

  2. コンポーネント・パレットで、リストから「SRStatusProducer」を選択します。

  3. Service Request Status Portletを、「panelHorizontal」コンポーネントのすでに追加したService Request History Portletの直下にドラッグします。

  4. Service Request Statusポートレットでは、サービス・リクエストIDを格納したパラメータを受け取ることを想定しています。作成中のページでは、ポートレットに、選択されたサービス・リクエストのステータスをページ上部の表に表示させます。サービス・リクエストIDをポートレットに引き渡す手順は、「手順8: ポートレットへの表の連結」を参照してください。

手順8: ポートレットへの表の連結

コンポーネントおよびポートレットをすべてページに追加したので、1つに連結してページ上にインタラクティビティを作成します。この項では、顧客または技術者（あるいはその両方）がページ上の表から選択した各サービス・リクエストのステータスおよび履歴を表示できるように、ページを設定します。また、部分ページ・リフレッシュを使用してコンポーネントを1つに連結し、ページ全体をリフレッシュしなくてもエンド・ユーザーがその情報を表示できるようにします。

この手順では、次の連結を実行します。

表へのOmniPortletの連結

OmniPortletは、これまでの手順で行ったカスタマイズに基づいてサービス・リクエストの履歴を表示できますが、ここでは、ユーザーが表で行った選択に基づいてポートレットに履歴を表示させます。OmniPortletは、表から情報を受け取り、その情報を使用して特定のサービス・リクエストの履歴を表示できます。

  1. 「手順4: ADF表へのSelectOneChoiceの連結」で作成した表で、commandLinkを表のproblemDescription列に追加します。

    コンポーネント・パレットで、「ADF Faces Core」の下の「commandLink」を選択し、「構造」ペインの3つ目のaf列内のoutputTextの上にドラッグします。

  2. このoutputTextを削除します。

  3. commandLinkのプロパティを次のように設定します。

    • Text: #{row.problemDescription}

    • Id: commandLink1

    • Action: #{backing_app_SRMyAcme.commandLink1_action}

  4. 例7-4に示すコードをcommandLink1_action()メソッドとして入力します。このメソッドは、「アプリケーション・ソース」→「oracle.srdemo.view」→「backing.app.SRMyAcme.java」の下にあるbacking.app.SRMyServiceRequests.javaクラス内にあります。

    例7-4    commandLink_action ()メソッド

    public String commandLink1_action() {        
        FacesContext context = FacesContext.getCurrentInstance();
        context.getExternalContext().getSessionMap().put("serviceID", 
(Integer)outputText1.getValue());
        return "setCurrentRowWithKey";
    }

    注意

    outputText1が未登録の場合（Oracle JDeveloperにより下線表示されます）は、表のsvrId outputText列にoutputText1というIDがあることを確認します。次に、バインディングがid="outputText1" binding="#{backing_app_SRMyAcme.outputText1と定義されていることを確認します。 

  5. 「import」セクションを開き、次の行をJavaクラスの先頭に追加します。

    import javax.faces.context.FacesContext;
  6. 「構造」ペインで、ページ定義に移動し、「executables」→「variables」の順に移動して「OmniPortlet1_1_Param1」をクリックします。

  7. プロパティ・インスペクタで、DefaultValueプロパティを次の値に設定します。 

    ${sessionScope.serviceID}
  8. サービスIDを受け取るためのOmniPortlet用のページ・パラメータを作成します。ページ定義の先頭には、次のタグがあります。

    <parameters/>

    このタグを次のコードで置き換え、serviceIDというページ・パラメータを設定します。

    <parameters>
<parameter id="pageParam" value="${sessionScope.serviceID}"/>
</parameters>
  9. ページを実行してポートレット・ワイヤリングをテストします。

  10. 表のProblem列のハイパーリンクをクリックして、テストします。ポートレットは、リンクをクリックするたびに更新されます。

Service Request表へのService Request StatusポートレットとService Request Historyポートレットの連結

Service Request StatusポートレットとService Request Historyポートレットではいずれも、サービス・リクエストIDをパラメータとして受け取ることを想定しています。そして、そのIDで識別される特定のサービス・リクエストのステータスまたは履歴を表示します。サービス・リクエストIDが、ページ上部の表で選択されたサービス・リクエストのIDになるように設定します。

Service RequestポートレットをService Request表に連結するには、次のようにします。

  1. ページ定義に移動し、「構造」ペインで「executables」→「variables」の順に開き、「OmniPortlet1_1_Param1」をクリックします。

  2. プロパティ・インスペクタで、DefaultValueプロパティを${sessionScope.serviceID}に設定します。

  3. 「構造」ペインで、変数ServiceRequestStatusPortlet1_1_ServiceReqIDを探して選択します。

    ヒント

    この変数は、「executables」→「variables」→「ServiceRequestStatusPortlet1_1_ServiceReqID」の順にノードを開くと見つかります。 

  4. プロパティ・インスペクタで、DefaultValueプロパティを${sessionScope.serviceID}に設定します。

  5. ページを保存し、実行してブラウザに表示します。これで、表のサービス・リクエストをクリックしてポートレットをテストできます。それに応じて、Service Request HistoryポートレットとService Request Statusポートレットは更新されます。

手順9: Product Detailsポートレットの追加

この項の手順では、JSR 168ポートレットをページ上に表示する方法を示します。ここでは、
第2章「ポートレットの構築」で作成したProduct Detailsポートレットを追加します。「Product Information」タブのpanelCustomizableコンポーネント内に、次のとおり追加します。

  1. 第2章「ポートレットの構築」の説明に従って、必ずPDK-Javaプロデューサを登録しておきます。

    ヒント

    第2章「ポートレットの構築」で登録したプロデューサはProductDetailsPortletです。このプロデューサは、http://host:port/ProductDetailsPortlet/portlets/wsrp1?WSDLにあります。 

  2. コンポーネント・パレットで、リストから「ProductDetailPortlet」を選択します。

  3. 「Product Details Portlet」をpanelHorizontalコンポーネントの上にドラッグします。

  4. ページを保存し、実行してブラウザに表示して「Product Information」タブ上のポートレットをテストします。

手順10: フォルダの内容の表示

この項の手順では、フォルダの内容をページ上に表示する方法を示します。「Product Information」タブのpanelCustomizableコンポーネント内に、次のとおり追加します。

  1. データ・コントロール・パレットで、「SRContentRepository」を開きます。このデータ・コントロールは、第4章「コンテンツ・リポジトリの設定」で作成しています。

    ヒント

    データ・コントロール・パレットが表示されない場合は、「表示」メニューから「データ・コントロール・パレット」を選択します。 

  2. 「getItems(String, String)」を開きます。

  3. panelBoxをpanelCustomizableに追加します。

  4. 「Return」ノードをpanelBoxにドラッグします。

  5. メニューから「ツリー」、続いて「ADFツリー」を選択します。

    アクション・バインディング・エディタが表示されます。

  6. pathパラメータの「値」フィールドに、/manualsと入力します。

  7. typeパラメータの「値」フィールドは空のままにしておきます。

  8. 「OK」をクリックします。

    ツリー・バインディング・エディタが表示されます。

  9. ツリー・バインディング・エディタで、右上のリストから「Name」、「URI」および「Primary Type」を選択します。

  10. 「ブランチ・ルール・アクセッサ」リストで、「Items」を選択します。

  11. 「新しい規則を追加」をクリックします。

  12. 「OK」をクリックします。

  13. 「OK」をクリックします。

  14. ページ・ソースに、次のようなコードが表示されます。

    <af:panelBox>
<af:tree value="#{bindings.getItems1.treeModel}" var="node">
<f:facet name="nodeStamp">
<af:outputText value="#{node}"/>
</f:facet>
</af:tree>
</af:panelBox>
  15. コンポーネント・パレットから、「ADF Faces Core」を選択します。

  16. 「Switcher」コンポーネントを<f:facet>タグの中にドラッグします。

  17. facetName属性を#{node.currentRow.dataProvider.primaryType}に設定します。

  18. nt:fileというファセットを1つと、nt:folderというファセットを1つ作成します。そのためには、「Switcher」を右クリックし、「af:switcherの中に挿入」→「JSF Core」→「ファセット」の順に選択します。

  19. nt:folderには、生成された出力テキストを使用します。

    注意

    出力テキストが自動的に生成されない場合は、value属性を設定するのではなく、出力テキストをファセット内に追加する必要があります。 

  20. nt:fileについて、goLinkおよびobjectImageを作成します。

  21. switcherのコードは、例7-5のようになります。

    例7-5    switcherのコード

    <af:switcher facetName="#{node.primaryType}">
<f:facet name="nt:file">
<h:panelGroup>
<af:objectImage source="/images/file.gif"/>
<af:goLink text="#{node.name}" destination="#{node.URI}" targetFrame="_blank"/>
</h:panelGroup>
</f:facet>
<f:facet name="nt:folder">
<af:outputText value="#{node.name}"/>
</f:facet>
</af:switcher>
  22. index.htmlを実行します。

  23. 「Product Information」タブをクリックします。

  24. 表のリンクの1つをクリックします。

  25. 製品カテゴリの1つを開いて、様々なモデルを表示します。

  26. モデルの1つを開いて、そのモデルのマニュアルのリストを表示します。

  27. マニュアルを1つ選択して表示します。

手順11: Schedule On-Site Servicesポートレットの追加

Schedule On-Site Servicesポートレットを使用すると、アプリケーションでサービス・リクエストを作成した後、製品についてオンサイト・サービスをスケジュールできます。リクエストのサービスIDを指定し、適当な日時または自分で選んだ技術者を選択して、技術者が指定の場所に来て、問題に対処するようにスケジュールできます。

この項の内容は次のとおりです。

Webクリッピング・プロデューサの登録

Webクリッピング・プロデューサを登録するには、次のようにします。

  1. アプリケーション・ナビゲータで、プロデューサを作成する「SRDemoSample_Starter」を右クリックし、ポップアップ・メニューから「新規」を選択します。

  2. 新規ギャラリの「カテゴリ」で、「Web Tier」ノードを開き、「Portlets」を選択します。

  3. 新規ギャラリの「項目」で、「Oracle PDK-Javaプロデューサ登録」を選択します。

  4. 「OK」をクリックします。

  5. 「ようこそ」ページで、「次へ」をクリックします。

    必要に応じて、「次へ」をクリックする前に「次回にこのページを表示しない」を選択し、このウィザードの次回以降の使用時に「ようこそ」ページが表示されないようにします。「ようこそ」ページは、ウィザードの前回使用時にスキップするオプションが選択されると、表示されません。

  6. 「名前」フィールドに、Webクリッピング・プロデューサの名前としてWebClipping Producerと入力します。

    この名前は、アプリケーション内で一意である必要があります。文字、数字およびアンダースコアのみを使用してください。

  7. 「次へ」をクリックします。

  8. 「URLエンドポイント」フィールドに、例7-6に示すようなWebクリッピング・プロデューサのURLを入力します。

    例7-6    Webクリッピング・プロデューサのURLエンドポイントのサンプル

    http://localhost:6688/portalTools/webClipping/providers/webClipping
  9. 「終了」をクリックし、PDK-Javaポートレット・プロデューサの登録を完了します。

Webクリッピング・ポートレットの追加

オンサイトWebクリッピング・サービスを追加するには、次の手順を実行します。

  1. SRMyAcme.jspxファイルをまだ開いていない場合は、アプリケーション・ナビゲータで「SRMyAcme.jspx」ファイルを右クリックし、ポップアップ・メニューから「開く」を選択します。

  2. コンポーネント・パレットから、「WebClipping Producer」を選択します。

  3. 「WebClippingPortlet」を選択し、「構造」ペインの「Schedule On-Site Service」という「showDetailItem」コンポーネントの上にドラッグします。

  4. 変更内容を保存します。

  5. 「SRMyAcme.jspx」ファイルを右クリックし、ポップアップ・メニューから「実行」を選択します。

    埋込みOC4Jサーバーが起動し、デフォルトのブラウザが起動してWebクリッピング・ポートレットが表示されます。結果のページで、WebCenterアプリケーションで公開するWebページを選択します。次に、Webクリッピング・スタジオを使用して、組み込むためのWebページのセクションを選択します。

Webクリッピング・ポートレットに表示するWebページの選択

この項では、ACME Technician Assignment System外部アプリケーションからの情報をWebクリッピング・ポートレットに表示する方法を示します。この外部アプリケーションは、OC4Jインスタンスにデプロイされ、SRDemoアプリケーションの一部として使用できます。この外部アプリケーションを使用して、製品に対するオンサイト・サービスをリクエストできます。

この項の手順を実行する前に、ページに対して適切な権限を付与する必要があります。権限の付与の手順は、「手順13: 「My Acme」ページへのセキュリティの適用」を参照してください。

ACME Technician Assignment SystemアプリケーションをWebクリッピング・ポートレットに表示するには、次の手順を実行します。

  1. Webクリッピング・ポートレットのヘッダーにある「アクション」アイコンをクリックし、「カスタマイズ」を選択してすべてのユーザーが使用できるWebページを選択します。

    「Webクリッピングの検索」ページが表示されます。

  2. 「URLロケーション」フィールドに、次のURLを入力します。

    http://host:port/ExternalApp/preConfirmation.jsp?date=Tue,%2010:00am&technician=Peter

    SRDemoアプリケーションをダウンロードしたシステムのホスト名およびポート番号を指定します。

  3. 「開始」をクリックします。

    指定したページがWebクリッピング・スタジオに表示されます（図7-15を参照）。

    図7-15    スタンドアロン・アプリケーションがクリップされているWebクリッピング・ポートレット


    画像の説明

  4. コメントとしてNext Available Timeと指定し、「次へ」をクリックします。

  5. Webクリッピング・スタジオのバナーにある「選択」をクリックします。Webクリッピング・スタジオに、クリッピングのプロパティが表示された「Webクリッピングの検索」ページが表示されます。

  6. 「Webクリッピングの検索」ページ（図7-16）で、次のように指定します。

  7. 「入力のパラメータ化」セクションでは、次の値を指定します。

    • パラメータ: ServiceID

    • パーソナライズ可能: Param1

    • 表示名: ServiceID

    • デフォルト値: 104

  8. 「OK」をクリックし、選択したWebクリッピングをページ上のWebクリッピング・ポートレットに表示します。

    図7-17に、Webクリッピング・ポートに追加されたコンテンツを示します。

    図7-17    クリップされたコンテンツが表示されているWebクリッピング・ポートレット


    画像の説明

    このポートレットを使用して、ユーザーは製品に対するオンサイト・サービスをスケジュールできます。

手順12: ユーザーに基づいた最新契約の追加

この項の手順では、ページに最新契約コンポーネントを追加する方法を示します。

  1. panelBoxを「My Current Contracts」タブに追加します。

  2. データ・コントロール・パレットで、「SRContentRepository」を開きます。

    ヒント

    データ・コントロール・パレットが表示されない場合は、「表示」メニューから「データ・コントロール・パレット」を選択します。 

  3. 「getItems(String, String)」を開きます。

  4. 「Return」ノードをpanelBoxにドラッグします。

  5. メニューから「表」、続いて「ADF読取り専用表」を選択します。

    「表の列の編集」ダイアログ・ボックスが表示されます。

  6. name以外の列をすべて削除します。

  7. 「OK」をクリックします。

  8. ページ定義ファイル（app_SRMyAcmePageDef.xml）のexecutablesの下で、IDがgetItemsterのmethodIteratorタグを複製し、例7-7に示すようにコードを変更します。

    例7-7    app_SRMyAcmePageDef.xmlファイルの最初に変更されたコード

    <methodIterator id="getContractsIter" Binds="getContracts.result"
DataControl="SRContentRepository" 
RangeSize="10" BeanClass="SRContentRepository.getItems_return"/>
  9. Bindingsの下で、IDがgetItemsの<methodAction>を複製し、例7-8に示すようにコードを変更します。

    例7-8    app_SRMyAcmePageDef.xmlファイルの2番目に変更されたコード

    <methodAction id="getContracts" InstanceName="SRContentRepository"
 DataControl="SRContentRepository" MethodName="getItems" RequiresUpdateModel="true"
 Action="999" ReturnName="SRContentRepository.methodResults.SRContentRepository_
 getContracts_result">
  <NamedData NDName="path" NDValue="/contracts/${userInfo.userName}"
 NDType="java.lang.String"/>
    <NamedData NDName="type" NDType="java.lang.String"/>
</methodAction>
  10. <table id="getItems2"... を探し、<table id="getItems2" IterBinding="getContractsIter">に変更します。

  11. ページのソースを表示します。

  12. 表を探し、inputText要素を見つけます。

  13. コンポーネント・パレットから、「ADF Core」を選択します。

  14. GoLinkコンポーネントを、ページ上の表セル内のnameのoutputTextの横にドラッグします。

  15. 式#{row.name}をoutputTextからGoLinkのtext属性にコピーします。

  16. destination属性をGoLinkに追加し、値を #{row.URI}とします。

  17. targetFrame属性を追加し、値を_blankとします。

  18. このoutputText要素を削除します。

  19. 次のようにして、アクセス権限を設定します。

    1. ページ定義を開きます。

    2. 「構造」ペインで、「bindings」の下の「getItems2」を右クリックします。

    3. ポップアップ・メニューから、「認可の編集」を選択します。

    4. ダイアログ・ボックスで、SRContentRepository.getItems.nameおよびリストのその他すべての値について、anyoneのボックスを選択します。

  20. index.htmlを実行します。

手順13: 「My Acme」ページへのセキュリティの適用

ページの認可ポリシーは、ページ定義ファイルに対して定義されます。認可エディタは、ローカル・システムのJAZNファイルからエンタープライズ・ロールを読み取るのに使用します。このエディタを使用すると、特定のリソース（ページ、メソッド、イテレータ、属性など）に対して設定できるアクションを定義できます。このエディタは、ポリシー・ストアに権限を書き込み、様々なロールに対してきめ細やかなJAAS権限の宣言定義を可能にします。また、疑似ロールanybodyに権限を付与するパブリック・ページの定義にも使用されます。

次の手順を実行して、SRMyAcme.jpsxページに対する権限を設定します。

  1. SRMyAcme.jpsxページを右クリックし、「ページ定義に移動」を選択します。

  2. 構造ウィンドウで、ページ定義を右クリックし、「認可の編集」を選択します。認可エディタが表示されます。

  3. View権限をanyoneに、Customize権限をmanagerに、Personalize権限をtechnicianにそれぞれ付与します（図7-18を参照）。

    図7-18    「MyAcme」ページに対して権限を設定するための認可エディタ


    画像の説明

手順14: コンポーネントへのセキュリティの適用

SRMyAcme.jspxページでは、技術者と管理者のみが「On-Site Service」タブおよびProduct Detailsポートレットを表示できるようにします。この項では、適切な権限を持つユーザーがページにアクセスしているときにのみレンダリングされるように、これらのコンポーネントを設定する方法について説明します。

「On-Site Service」タブおよびProduct Detailsポートレットにセキュリティを適用するには、次の手順を実行します。

  1. 「SRMyAcme.jspx」ページを開きます。

  2. Product Detailsポートレットを選択します。

  3. プロパティ・インスペクタで、Renderedプロパティを次の値に設定します。

    #{authNLink.authenticated && 
bindings.permissionInfo['app_SRMyAcmePageDef'].allowsPersonalize}
  4. 今度は「SRMyAcme.jspx」ページの「On-Site Service」タブを選択します。

  5. このタブのプロパティ・インスペクタで、Renderedプロパティを次の値に設定します。

    #{authNLink.authenticated && 
bindings.permissionInfo['app_SRMyAcmePageDef'].allowsPersonalize}

まとめ

この章では、各種コンポーネントをページに追加し、タブおよびサブタブに編成する方法について学びました。また、ページおよび各コンポーネントにセキュリティを適用する方法についても学びました。

戻る 次へ
Oracle
Copyright © 2007 Oracle Corporation.
All Rights Reserved.
目次
目次		 索引
索引