ヘッダーをスキップ

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

戻る 次へ

9 サイト管理ページの構築

WebCenterアプリケーションの作成はすでに完了しています。この章では、管理者がアプリケーションのルック・アンド・フィールの変更およびログイン・ページのカスタマイズに使用できるサイト管理ページを作成します。このサイト管理ページは、後で「Management」ページのサブタブとして追加されます。

SRDemo ZIPファイルには、myCompany、limerineおよびoriginalの3つのスキンと、対応する必要なイメージ・ファイルが含まれています。この章で作成するサイト管理ページを使用すると、エンド・ユーザーは実行時に3つのスキンから選択してアプリケーションのスキンを変更できます。また、アプリケーションのログイン・ページをカスタマイズすることも可能です。実行時のサイト管理ページは、図9-1のような外観です。

図9-1    実行時のサイト管理ページ


画像の説明

この章の作業を実行するには、第3章「スキンの設定」の手順を実行してアプリケーション用のスキンを設定する必要があります。

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

手順1: サイト管理ページの作成

次の手順では、SRSiteAdmin.jspxページを構築し、アプリケーションのルック・アンド・フィールの変更およびログイン・ページのカスタマイズを管理者ができるようにするコントロールを設定する方法を示します。

注意

このページでは、すでに作成したスキンBeanで使用されるスキンの値を設定します。 

サイト管理ページを作成するには、次の手順を実行します。

  1. アプリケーション・ナビゲータで、必要に応じて、「UserInterface」ノードおよび「Webコンテンツ」ノードを開きます。

  2. 「app」ノードの下の「management」フォルダを右クリックし、「新規」を選択します。

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

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

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

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

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

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

  9. 「JSPドキュメント(*.jspx)」を選択します。

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

  11. 「新規マネージドBeanでのUIコンポーネントの自動公開」を選択し、「名前」フィールドにapp_management_SRSiteAdminと表示されていることを確認します。

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

  13. 次のライブラリが「選択済のライブラリ」に表示されていることを確認します。

    • JSF Core

    • JSF HTML

    • ADF Faces Components

    • ADF Faces HTML

    • ADF Portlet Components

    • Customizable Components Core

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

  15. 「WEB-INF」ノードおよび「template」ノードを開きます。

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

  17. ソース・コードをSRDemoTemplate.jspxページからコピーして新しいSRSiteAdmin.jspxページのソースに貼り付け、新しいページの既存のコードをすべて置き換えます。

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

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

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

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

手順2: ページへのスキン・セレクタの追加

今度は、アプリケーションに対して特定のスキンを選択できるようにする必要があります。そのためには、ラジオ・グループを作成し、管理者が実行時に使用するスキンを選択できるようにします。また、各スキンの外観をプレビューできるようにします。

スキン・セレクタをページに追加するには、次の手順を実行します。

  1. 「構造」ペインで、「f:view」、「af:document」、「af:form」、「af:panelPage」の順にノードを開きます（図9-2を参照）。

    図9-2    開かれた「構造」ペイン


    画像の説明

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

  3. PanelHorizontalコンポーネントを「構造」ペインにドラッグし、Page Content StartとPage Content Endの間に表示されるようにします。

  4. さらに3つのpanelHorizontalコンポーネントを同じように追加し、全部同じレベルにしてpanelPageコンポーネントの子コンポーネントとします。

  5. Messageコンポーネントをコンポーネント・パレットから「構造」ペインにドラッグし、1つ目のpanelHorizontalコンポーネント内に表示されるようにします（図9-3を参照）。

    図9-3    ページの「構造」ペインでのMessageコンポーネント


    画像の説明

  6. プロパティ・インスペクタで、Messageコンポーネントのプロパティを次のように変更します。

    • Message: Select a skin below to change the look and feel for the Service Request Portal

    • InlineStyle/font-size: large

  7. ObjectSpacerコンポーネントをコンポーネント・パレットから「構造」ペインにドラッグし、1つ目と2つ目のpanelHorizontalコンポーネントの間に表示されるようにします。

  8. ShowOneRadioコンポーネントを2つ目のpanelHorizontalコンポーネントにドラッグします。

  9. 3つのshowDetailItemコンポーネントをshowOneRadioコンポーネントの下に追加します（図9-4を参照）。

    図9-4    ページの「構造」ペインでのShowOneRadioコンポーネント


    画像の説明

  10. ObjectImageコンポーネントを1つ目のshowDetailItemコンポーネントにドラッグします。「ObjectImageの挿入」ダイアログ・ボックスが表示されます。

  11. 「ソース」フィールドの横の拡張エディタを表示するボタンをクリックします。

  12. リストから「srdemo_mycompany.gif」を選択し、「OK」をクリックします。

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

  14. 他の2つのshowDetailItemコンポーネントについて直前の4つの手順を繰り返し、次のイメージを追加します。

    • srdemo_limerine.gif

    • srdemo_original.gif

    これらのコンポーネントは、図9-5に示すように「構造」ペインに表示されます。

    図9-5    ラジオ・ボタンのイメージ


    画像の説明

  15. 1つ目のshowDetailItemコンポーネントを選択し、プロパティ・インスペクタで次のプロパティを設定します。

    • Binding: #{backing_SRSiteAdmin.showDetailItem1}

    • DisclosureListener: #{skinBean.processDisclosure}

    • Text: My Company Skin

  16. 2つ目のshowDetailItemコンポーネントを選択し、次のプロパティを設定します。

    • Binding: #{backing_SRSiteAdmin.showDetailItem2}

    • DisclosureListener: #{skinBean.processDisclosure}

    • Text: Limerine Skin

  17. 3つ目のshowDetailItemコンポーネントを選択し、次のプロパティを設定します。

    • Binding: #{backing_SRSiteAdmin.showDetailItem3}

    • DisclosureListener: #{skinBean.processDisclosure}

    • Text: Original SRDemo Skin

  18. CommandButtonコンポーネントを2つ目と3つ目のpanelHorizontalコンポーネントの間にドラッグします（図9-6を参照）。

    図9-6    「Change Skin」コマンド・ボタン


    画像の説明

  19. commandButtonのTextプロパティをChange Skinに設定します。

  20. ObjectSpacerコンポーネントをコンポーネント・パレットから「構造」ペインにドラッグし、1つ目と2つ目のpanelHorizontalコンポーネントの間に表示されるようにします。

  21. ファイルを保存します。この時点で、サイト管理ページは、図9-7のような外観になります。

    図9-7    サイト管理ページ


    画像の説明

手順3: ログイン・ページのカスタマイズの可能化

ここでは、ログイン・ページをカスタマイズして、アプリケーションを再デプロイせずに、実行時に更新できる情報を組み込む方法を示します。この項の手順を実行すると、ログイン後にログイン・ページに戻って、第6章「ログイン・ページの作成」の「手順3: ログイン・ページへのリッチ・テキスト・ポートレットの追加」で追加したリッチ・テキスト・ポートレットをカスタマイズできます。

ログイン・ページをカスタマイズできるようにするには、次の手順を実行します。

  1. サイト管理ページからログイン・ページに移動するためのナビゲーション・ケースを作成します。そのためには、例9-1に示すコードをfaces-config.xmlファイルに追加します。

    例9-1    サイト管理ページからログイン・ページに移動するためのナビゲーション・ルール

    <navigation-rule>
  <from-view-id>/app/management/SRSiteAdmin.jspx</from-view-id>
  <navigation-case>
    <from-outcome>CustomizeLoginPage</from-outcome>
    <to-view-id>/infrastructure/SRLoginADF.jspx</to-view-id>
    <redirect/>
  </navigation-case>
</navigation-rule>
  2. ログイン・ページからサイト管理ページに移動するためのナビゲーション・ケースを作成します。そのためには、例9-2に示すコードをfaces-config.xmlファイルに追加します。

    例9-2    ログイン・ページからサイト管理ページに移動するためのナビゲーション・ルール

    <navigation-rule>
  <from-view-id>/infrastructure/SRLoginADF.jspx</from-view-id>
  <navigation-case>
    <from-outcome>ReturnToSiteAdmin</from-outcome>
    <to-view-id>/app/management/SRSiteAdmin.jspx</to-view-id>
    <redirect/>
  </navigation-case>
</navigation-rule>
  3. ObjectSpacerコンポーネントをcommandButtonと3つ目のpanelHorizontalの間にドラッグします。

  4. OutputFormattedコンポーネントを3つ目のpanelHorizontalにドラッグし、プロパティ・インスペクタで次のプロパティを設定します。

    • Value: #{res['srsiteadmin.editLoginPagePrompt']}

      このELは、リソース・バンドルから適切な文字列を返します。

    • InlineStyle/font-size: large

  5. commandButtonを4つ目のpanelHorizontalコンポーネントにドラッグし、次のプロパティを設定します。

    • Text: Customize Login Page

    • Action: CustomizeLoginPage

    このボタンは、すでに定義したADF Facesナビゲーションを使用して、ユーザーをログイン・ページに移動します。

    注意

    パブリック・ユーザーが認証のためにログイン・ページにアクセスする場合とは異なり、サイト管理ページからこのページにアクセスする場合、ユーザーのIDはすでに定義されています。そのため、ログイン・ページのカスタマイズ時に次のログイン試行をさせないためには、画面のログイン・コンポーネントを非アクティブ化する必要があります。この非アクティブ化は、第6章「ログイン・ページの作成」の「手順1: ログイン・ページの作成」で追加されたバッキングBeanコードで処理されます。 

  6. すべての管理者がログイン・ページをカスタマイズできないようにし、このページに対してカスタマイズ権限を持つユーザーにのみボタンを公開するには、commandButtonのRenderedプロパティを次のように設定する必要があります。

    Render: #{bindings.permissionInfo['SRLoginADFPagePageDef'].allowsCustomize}
  7. ファイルを保存します。

  8. SRLogin.jspxページを開き、commandButtonをページの上にドラッグして次のプロパティを設定します。

    • Text: Return

    • Action: ReturnToSiteAdmin

    このボタンでは、すでに定義したADF Facesナビゲーションを使用して、必要なカスタマイズを実行した後にユーザーをサイト管理ページに戻します。

  9. commandButtonのRenderedプロパティを次のように設定します。

    Render: #{authNLink.authenticated}
  10. ファイルを保存します。

手順4: 「Management」ページのサブタブとしての「Site Administration」ページの追加

最後に、SRSiteAdmin.jspxページを「Management」メイン・ページのサブタブとして追加する必要があります。そのためには、次の手順を実行します。

  1. 「UserInterface」プロジェクトの「WEB-INF」フォルダで、「faces-config.xml」を右クリックし、「開く」を選択します。

  2. 必要に応じて、「ソース」タブをクリックします。

  3. 例9-3に示すマネージドBeanを、既存のコードの「Dashboard」サブタブ用のマネージドBeanの後に追加します。

    例9-3    「Site Administration」サブタブ用のマネージドBean

    <managed-bean>
    <managed-bean-name>subMenuItem_Manage_SiteAdmin</managed-bean-name>
    <managed-bean-class>oracle.srdemo.view.menu.MenuItem</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
    <managed-property>
      <property-name>label</property-name>
      <value>#{resources['srdemo.menu.manage.siteadmin']}</value>
    </managed-property>
    <managed-property>
      <property-name>shown</property-name>
      <value>#{userInfo.manager}</value>
    </managed-property>
    <managed-property>
      <property-name>viewId</property-name>
      <value>/app/management/SRSiteAdmin.jspx</value>
    </managed-property>
    <managed-property>
      <property-name>outcome</property-name>
      <value>SRSiteAdmin</value>
    </managed-property>
<!-- ADF Authorization -->
    <managed-property>
      <property-name>targetPageDef</property-name>
      <value>app_management_SRSiteAdminPageDef</value>
    </managed-property>
<!-- End ADF Authorization -->
</managed-bean>
  4. UIResources.propertiesファイルを開きます。このファイルは、「UserInterface」→「アプリケーション・ソース」→「oracle.srdemo.view」→「resources」の下にあります。

  5. 管理ページ領域を探し、次のコードを挿入します。

    srdemo.menu.manage.siteadmin=Administration
  6. <managed-bean-name>menuItem_Manageを探します。

  7. 例9-4に示すコードをlist-entriesタグに追加します。

    例9-4    list-entriesタグに追加するコード

    <value>#{subMenuItem_Manage_SiteAdmin}</value>
  8. <from-view-id>/app/management/SRManage.jspxを探します。

  9. 例9-5に示すコードをナビゲーション・ルールに追加します。

    例9-5    navigation-caseタグに追加するコード

    <navigation-case>
  <from-outcome>SRSiteAdmin</from-outcome>
  <to-view-id>/app/management/SRSiteAdmin.jspx</to-view-id>
</navigation-case>
  10. 例9-6に示すコードがすでに挿入されていることを確認します。

    例9-6    managed-beanタグに追加するコード

    <managed-bean>
    <managed-bean-name>backing_SRSiteAdmin</managed-bean-name>    
<managed-bean-class>oracle.srdemo.view.backing.app.management.SRSiteAdmin</managed-bean
-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>
  11. ファイルを保存します。

  12. アプリケーション・ナビゲータの「UserInterface」プロジェクトで、「index.jspx」を右クリックし、「実行」を選択します。

別のページ上にサブタブとしてページを追加する方法の詳細は、第8章「ダッシュボード・ページの構築」を参照してください。

手順5: カスタマイズのためのサイト管理ページの使用

ここでは、サイト管理ページを使用してアプリケーションをカスタマイズする方法を示します。このページでは、次のタスクを実行できます。

アプリケーションのスキンの変更

アプリケーションのスキンを変更するには、次の手順を実行します。

  1. パスワードがwelcomeのskingとして、Service Requestポータルにログインします。

  2. 「Management」タブをクリックします。このとき、このページにはサイト管理ページのサブタブが組み込まれています（図9-8を参照）。

    図9-8    Service Requestポータル・ページの「Management」タブ


    画像の説明

  3. 「Site Administration」サブタブをクリックします。このページには、管理者がアプリケーションに使用するスキンを選択できるラジオ・グループがあります（図9-9を参照）。アプリケーションで使用されるデフォルトのスキンは、MyCompany Skinです。

    図9-9    カスタマイズ・オプションがある「Site Administration」タブ


    画像の説明

  4. 「Limerine Skin」を選択します。イメージが更新され、選択したスキンがプレビューされます。

  5. 「Change Skin」をクリックします。ページの外観が変化し、Limerineスキンが使用されます。この変更は、アプリケーション全体に適用されます。

ログイン・ページのカスタマイズ

管理者である場合、ログイン・ページをカスタマイズし、そのページでユーザーに表示されるテキストを編集できます。そのためには、サイト管理ページの「Customize Login Page」ボタンを使用します。

注意

「Customize Login Page」ボタンは、ログイン・ページに対してcustomize権限を持つ認証済ユーザーにのみ表示されます。第6章「ログイン・ページの作成」の「手順4: ログイン・ページ用の認可の編集」の手順を実行したときにcustomize権限をmanagerロールに付与しているため、ログイン・ページをカスタマイズできるのは管理者のみです。

「Customize Login Page」ボタンは、ログイン・ページに対してview権限しか持たないユーザーには表示されません。 

アプリケーションのログイン・ページをカスタマイズするには、次の手順を実行します。

  1. パスワードがwelcomeのskingとして、Service Requestポータルにログインします。

  2. 「Management」タブをクリックします。このとき、このページにはサイト管理ページのサブタブが組み込まれています（図9-8を参照）。

  3. 「Site Administration」サブタブをクリックします。このページには、アプリケーションのスキンを変更するためのオプションとログイン・ページをカスタマイズするためのオプションがあります（図9-9を参照）。

  4. 「Customize Login Page」ボタンをクリックします。

  5. ログイン・ページで、テキスト領域の上にマウスを移動し、表示されているアクション・ボタンをクリックします。表示されたリストから「Customize」を選択します。

  6. 例9-7に示すテキストを、ページ上部のリッチ・テキスト・ポートレットに追加します。

    例9-7    ログイン・ページ上の1つ目のリッチ・テキスト・ポートレット

    Please Log In to the Acme Service Request Application
This demonstration application has a number of predefined user accounts 
which equate to different roles within the company.
For example:
   sking - a manager
   ahunold - a technician
   dfaviet - a user (customer)
All usernames should be in lowercase with a  password of  "welcome"
Note: If you copy and paste the user IDs from here, be sure to remove any trailing 
spaces to ensure that the ID is valid

    リッチ・テキスト・エディタの書式設定機能を使用し、図9-10に示すような表示になるようにこのテキストを書式設定します。

  7. 例9-8に示すテキストを、ページ上の2つ目のリッチ・テキスト・ポートレットに追加します。

    例9-8    ログイン・ページ上の2つ目のリッチ・テキスト・ポートレット

    Acme's computer systems and networks are intended solely for use by authorized
Acme employees and contractors. Use of Acme computer systems and networks is
subject to the company policies, including the Employee Code of Conduct, Internal
Privacy Policy, the Acceptable Use Policy and the Information Protection Policy.
Unauthorized access or use may result in disciplinary action, up to and including
a really, really serious talking to and being sent into the corner! Further
information about Acme security and privacy policies is available at the GIS
Policy Portal.to ensure that the ID is valid

    このテキストのフォント・サイズを小さくし、色をライト・グレーに設定して、図9-10に示すようにテキストが表示されるようにします。

    図9-10    カスタマイズ後のログイン・ページ


    画像の説明

  8. 「Return」をクリックして、サイト管理ページに戻ります。

まとめ

この章では、サイト管理ページを作成し、「Management」ページのサブタブとして追加する方法について学びました。また、サイト管理ページを使用してアプリケーションのルック・アンド・フィールの変更およびログイン・ページのカスタマイズを行う方法についても学びました。

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