ヘッダーをスキップ
Oracle® Fusion Middleware Oracle WebCenter Portal開発者用チュートリアル
11g リリース1 (11.1.1.7.0)
B55930-04
  目次へ移動
目次
索引へ移動
索引

前
 
次
 

5 ポータル・アプリケーションのルック・アンド・フィールの変更

前のレッスンで、ポータル・アプリケーションのデフォルト・テンプレートをmyTemplateに変更し、次にハード・ドライブ上のフォルダに格納されているコンテンツを抽出して、デフォルト・スキンをTutorial Skinに変更しました。これらの変更は、JDeveloperでアプリケーションを作成および実行したときに、新規テンプレートおよび新規スキンとしてWebブラウザに表示されました。

このレッスンでは、JDeveloperでデザインタイムにテンプレートおよびスキンのデフォルト設定を変更する手順に進みます。Webブラウザでポータル・アプリケーションを再度起動すると、これらの変更が反映され、プリファレンスが変更された新規のデフォルト設定、および新規のテンプレートおよびスキンが表示されます。これにより、デザインタイムにポータル・アプリケーションのルック・アンド・フィールを変更する方法、およびポータルにスキンを適用する方法を学習します。

基本的に、スキンは、アプリケーション全体に適用できる(Cascading Style Sheet仕様[CSS]に基づく)グローバル・スタイル・シートです。いったん適用すると、スキンで割り当てられたスタイルが各レイアウト・コンポーネントで自動的に使用されます。ただし、実行時またはデプロイ後にスキンを編集することはできません。

スキンの重要性は、アプリケーションの外観を定義し、複数のページ間である程度の一貫性を達成できるため、会社で望ましいとされるルック・アンド・フィールをより効率的に伝えることができる点にあります。

概要

このレッスンの手順は次のとおりです。

このレッスンの手順を始める前に、この時点に到るまでのチュートリアルの手順を実行したことを確認します。

手順1: テンプレートとスキンのデフォルト設定の変更

WebCenterアプリケーション・テンプレートを使用してWebCenter Portalアプリケーションを作成した場合、デフォルトでスキンが含まれています。このチュートリアルでは、提供されたカスタムのスキンを抽出し、デフォルト・スキンのかわりに適用しました。ここでは、プリファレンスのエントリを変更することにより、スキンおよび提供されたテンプレートのデフォルト設定を変更します。

デザインタイムにポータル・アプリケーションのデフォルトのプリファレンスを変更するには、プロジェクトのadf-config.xmlファイルを直接編集します。このタスクを完了する手順を、この項で次のように説明します。

スキンおよびテンプレートのデフォルト設定を変更するには、次のようにします。

  1. adf-config.xmlを開きます。

    JDeveloperでこのファイルを探すには、「アプリケーション・ナビゲータ」の「アプリケーション・リソース」部分を開きます。次に、図5-1に示すように、「ディスクリプタ」フォルダ、「ADF META-INF」フォルダの順に開きます。

    図5-1 JDeveloperでのadf-config.xmlファイルの場所

    図5-1の説明が続きます
    「図5-1 JDeveloperでのadf-config.xmlファイルの場所」の説明

  2. 「ADF META-INF」フォルダで、adf-config.xmlファイルを選択して開きます。図5-2に示すように、ファイルが「概要」タブに表示されます。

    図5-2 コンポーネント構成を示すadf-config.xmlファイル

    図5-2の説明が続きます
    「図5-2 コンポーネント構成を示すadf-config.xmlファイル」の説明

  3. JDeveloperウィンドウで「ソース」ビュー・タブをクリックし、ファイルのXMLソース・コンテンツを表示します。

  4. adf-config.xmlファイルの「検索」フィールドで、preferencesという単語を入力します。XMLスキーマでこのコードに移動します(例5-1)。

    例5-1 デフォルト・ページ・テンプレートを指定するXMLコード

    <portal:preference id="oracle.webcenter.portalapp.pagetemplate.pageTemplate"
                       desc="Default Page Template"
             value="/oracle/webcenter/portalapp/pagetemplates/pageTemplate_globe.jspx"
                       resourceType="Template" display="true"/>
    
  5. 例5-2に示すように、value属性をmyTemplate.jspxに変更し、desc属性を"My Site Template"に変更します。

    例5-2 変更されたXMLテンプレート・コード

           value="/oracle/webcenter/portalapp/pagetemplates/myTemplate.jspx"
                 desc="My Site Template"
    
  6. 例5-3に示すように、preferenceスキーマ内でdesc属性"Default Portal Skin"およびvalue属性"portal"に移動します。"portal"を選択し、"mycustomskin"に変更します。

    例5-3 デフォルト・ポータル・スキンのValue属性

    <portal:preference id="oracle.webcenter.portalapp.skin"
                       desc="Default Portal Skin" value="portal"
    
  7. 例5-4に示すように、adf-config.xmlファイルの「ソース」ビューで、value属性が"mycustomskin"として更新されました。

    例5-4 "mycustomskin"に変更されたポータル・スキンのValue属性

    <portal:preference id="oracle.webcenter.portalapp.skin"
                       desc="Default Portal Skin" value="mycustomskin"
    
  8. 例5-5に示すように、desc属性を"Default Portal Skin"から"Tutorial Skin"に変更します。

    例5-5 Tutorial Skinに変更されたdesc属性

    <portal:preference id="oracle.webcenter.portalapp.skin"
                       desc="Tutorial Skin" value="mycustomskin"
                       resourceType="Skin" display="true"/>
    
  9. adf-config.xmlファイルを保存します。

  10. 「アプリケーション・ナビゲータ」でPortalプロジェクトを右クリックし、「実行」を選択して、JDeveloperでアプリケーションを作成および起動します。

  11. WebブラウザにHomeページが表示されたら、ユーザーweblogic、パスワードweblogic1を使用してログインし、管理者権限を有効にします。

  12. 管理コンソールで「リソース」タブをクリックし、「外観とレイアウト」リストで「スキン」アイテムをクリックします。手順5から8で行った変更の結果、Tutorial Skinを選択すると、アプリケーションで使用できるようになります(図5-3)。


    ヒント:

    管理コンソールを使用すると、実行時にリソース、サービス、セキュリティおよびポータル構成を操作できるようになります。管理コンソールに含まれる「リソース」タブでは、ページ、ページ・テンプレート、ナビゲーション・モデル、リソース・カタログ、スキン、ページ・スタイル、タスク・フローなど、様々なポータル固有の機能を実行時に操作できます。

    リソース・マネージャを使用すると、ポータル管理者が実行時にこれらのリソースを操作できます。リソース・マネージャを使用すると、ポータル・ユーザーもリソースまたはアプリケーション全体を実行環境からダウンロードし、JDeveloperで編集して、デプロイ済アプリケーションにアップロードして戻すことができます。


    図5-3 スキン・リソースとして選択されると使用可能になるTutorial Skin

    図5-3の説明が続きます
    「図5-3 スキン・リソースとして選択されると使用可能になるTutorial Skin」の説明

まだアプリケーションの開発中(未デプロイ)であるため、引き続きOracle JDeveloperで実行時ビューとデザインタイムを切り替えて、ルック・アンド・フィールを変更します。

デザインタイムにおけるデフォルト・テンプレートの変更および別のスキンの適用の詳細は、『Oracle Fusion Middleware Oracle WebCenter Portal開発者ガイド』を参照してください。

手順2: デフォルト・ページ・テンプレートの実行時の変更

次の手順では、デフォルト・ページ・テンプレートを実行時に変更する方法を説明します。このタスクを完了するには、管理者権限を持つユーザーとしてログインし、Webブラウザで「管理」リンクをクリックして、管理コンソールにアクセスします。管理コンソールで、ページ・テンプレートなどのポータル固有の機能を実行時に操作できる「リソース」タブを選択します。

ただし、ページ・テンプレートを変更するために管理コンソールに入力した値は、JDeveloperで次回「実行」を選択すると失われます。


ヒント:

このチュートリアルで行ってきたように、開発環境で統合WebLogic Serverを使用し、JDeveloperでポータル・アプリケーションを実行する場合、リソース・マネージャを使用して実行時にポータルに変更を加えても、再デプロイ時にその変更はデフォルトで破棄されます。たとえば、リソース・マネージャを使用してページへの資格の追加、レイアウトの変更、ナビゲーション・モデルの変更などの変更を行った場合、次回アプリケーションを再デプロイすると、これらの変更は保持されません。



注意:

「手順1: テンプレートとスキンのデフォルト設定の変更」の手順でスキンを変更したように、adf-config.xmlファイルを変更することによってデフォルト・ページ・テンプレートも変更できます。


デフォルト・ページ・テンプレートをGlobeからSwooshyに変更するには、次のようにします。

  1. JDeveloperの「アプリケーション・ナビゲータ」でPortalプロジェクトを右クリックし、「実行」を選択してアプリケーションを実行します。図5-4に示すように、Webブラウザでアプリケーションが開きます。

    図5-4 管理者権限が有効化されたHomeポータル・ページ

    図5-4の説明が続きます
    「図5-4 管理者権限が有効化されたHomeポータル・ページ」の説明

  2. Webブラウザに表示されたデフォルトのHomeポータル・ページで、weblogicおよびパスワードweblogic1としてログインします。

    管理者権限を持つユーザーとしてログインする必要があります。チュートリアルでは、ユーザー"weblogic"に管理者権限が付与されています。

  3. Webページの右上角の「管理」リンクをクリックします。管理コンソールが表示されます(図5-5)。

  4. 図5-5に示すように、「リソース」タブを選択し、「構造」メニューの「ページ・テンプレート」項目に移動します。「伝播」タブは、ステージから本番への伝播用に適切な接続を定義した場合のみ表示されます。

    図5-5 「リソース」タブおよび「ページ・テンプレート」項目が選択された管理コンソール

    図5-5の説明は次にあります。
    「図5-5 「リソース」タブおよび「ページ・テンプレート」項目が選択された管理コンソール」の説明

  5. 「ページ・テンプレート」項目をクリックします。図5-6に示すように、Globe PageTemplateSwooshy PageTemplateの両方が表示され、Globe PageTemplateフィールドが強調表示されています。両方のテンプレートに使用可能とマークが付けられされ、適用できることがわかります。

    図5-6 「ページ・テンプレート」項目で選択されたGlobe PageTemplate

    図5-6の説明が続きます
    「図5-6 「ページ・テンプレート」項目で選択されたGlobe PageTemplate」の説明

  6. 管理コンソールで「構成」タブを選択します。「プリファレンス」メニューで、「デフォルト・ページ・テンプレート」Globe PageTemplateが指定されています(図5-7)。

    図5-7 「プリファレンス」で「デフォルト・ページ・テンプレート」として設定されたGlobeテンプレート

    図5-7の説明が続きます
    「図5-7 「プリファレンス」で「デフォルト・ページ・テンプレート」として設定されたGlobeテンプレート」の説明

  7. 図5-8に示すように、「デフォルト・ページ・テンプレート」を変更し、Swooshy PageTemplateに設定します。

    図5-8 Swooshyページ・テンプレートに変更された「デフォルト・ページ・テンプレート」

    図5-8の説明が続きます
    「図5-8 Swooshyページ・テンプレートに変更された「デフォルト・ページ・テンプレート」」の説明

  8. 「ポータルに戻る」リンクをクリックします。新しいページ・テンプレートがポータルに適用されます。

このレッスンでは、プリファレンスを変更し、ポータル・リソースを更新することにより、JDeveloperでデザインタイムにテンプレートおよびスキンのデフォルト設定を変更する方法を学習しました。変更が反映されると、ポータル・アプリケーションのルック・アンド・フィールが変化します。

また、管理コンソールにアクセスしてプリファレンスを変更することにより、実行時にデフォルト・ページ・テンプレートをGlobeからSwooshyに変更する方法も学習しました。