25 ページ・スタイルの使用

この章では、WebCenter Portalで作成されたページのページ・スタイルの作成、変更および管理方法について説明します。

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

第25.1項「ページ・スタイルについて」
第25.2項「ポータル・ページへのページ・スタイルの適用」
第25.3項「ページ・スタイルの作成」
第25.4項「ページ・スタイルの編集」
第25.5項「ページ・スタイルの管理」

権限:

共有ページ・スタイルでこの章のタスクを実行するには、アプリケーション・レベルの権限Create, Edit, and Delete Page Stylesが必要です。Application Specialistロールを持つユーザーには、この権限がデフォルトで付与されます。アプリケーション・レベルの権限の詳細は、Oracle WebCenter Portalの管理のアプリケーションのロールと権限の概要に関する項を参照してください。

ポータル・レベルのページ・スタイルでこの章のタスクを実行するには、ポータル・レベルの権限Create, Edit, and Delete Assets (標準権限)またはCreate, Edit, and Delete Page Styles (アドバンスト権限)が必要です。ポータル・レベルの権限の詳細は、第29.1項「ポータルのロールと権限について」を参照してください。

25.1 ページ・スタイルについて

ページ・スタイルは、新しく作成されるページのメイン・コンテンツ領域の初期レイアウトを定義します。また、そのページがサポートするコンテンツのタイプを指定する場合もあります。たとえば、Wikiページ・スタイルでは、インスタントwikiが用意されていて、「空白」ページ・スタイルにはそのスタイルに基づいたページにユーザーが追加できるコンテンツのタイプに対する制限がほとんどありません。

図25-1 ページ・スタイルを使用したページのサンプル

「図25-1 ページ・スタイルを使用したページのサンプル」の説明

ユーザーはページ・エディタでページを作成する際、使用できるページ・スタイルの選択肢を提示されます(図25-2)。

図25-2 新規ページのスタイルの選択

「図25-2 新規ページのスタイルの選択」

注意:

ポータルの作成ウィザードで新規ポータルの初期ページを作成する場合(第2.3項「新規ポータル作成時のページの作成」を参照)、ページのページ・スタイルは選択できません。ポータル用に選択したポータル・テンプレートに「デフォルト・ページ・スタイル」というページ・スタイルが含まれている場合、そのページ・スタイルがこの方法で作成されるすべてのページに使用されます。それ以外の場合は、すぐに使用可能な「空白」ページ・スタイルがページに適用されます(表25-1「すぐに使用可能なページ・スタイル」を参照)。ページを作成した後にページのページ・スタイルを変更することはできません。

初期レイアウトおよびコンテンツは、ページ・スタイルから新規作成ページのメイン・コンテンツ領域にコピーされます。

組込みページ・スタイル

WebCenter Portalでは、すぐに使用可能なページ・スタイルが幅広く用意されています。表25-1では、WebCenter Portalで提供される組込みページ・スタイルをリストして説明しています。

表25-1 すぐに使用可能なページ・スタイル

名前	形状	説明
空白		追加のレイアウト・コンポーネントを含めて、コンテンツを追加できるレイアウト・ボックスが1つ含まれている1列で構成されたページ。
ブログ		Content Serverからのブログ・コントロールを公開する、事前構成されたページ。このページは、ドキュメント・ツールが構成され、ポータルで有効化されている場合に使用できます。詳細は、Oracle WebCenter Portalの使用のブログ・ページ・スタイルの理解に関する項を参照してください。
ホームページ		右側が狭いページ・スタイルに基づく、事前シード済のホーム・ページ。ホームページ・スタイルには、タスク・フローおよびその他のコンテンツが事前に移入されています。
左を狭く		追加のレイアウト・コンポーネントを含めて、コンテンツを追加できるレイアウト・ボックスが2つ含まれている2列で構成されたページ。レイアウト・ボックスは、隣り合って表示されます。狭いレイアウト・ボックスは左側です。
右を狭く		追加のレイアウト・コンポーネントを含めて、コンテンツを追加できるレイアウト・ボックスが2つ含まれている2列で構成されたページ。レイアウト・ボックスは、隣り合って表示されます。狭いレイアウト・ボックスは右側です。
3列		追加のレイアウト・コンポーネントを含めて、コンテンツを追加できるレイアウト・ボックスが3つ含まれている3列で構成されたページ。レイアウト・ボックスは、隣り合って表示されます。狭いレイアウト・ボックスは左側と右側です。
Webページ		URL値を使用できるページ。ポータルで外部Webコンテンツを公開できます。
Wiki		Oracle Content ServerからのWikiコントロールを公開する、事前構成されたページ。このページは、ドキュメント・ツールが構成され、ポータルで有効化されている場合に使用できます。詳細は、Oracle WebCenter Portalの使用のWikiについてに関する項を参照してください。

組込みページ・スタイルはいずれも、直接編集することはできません。ページに別のレイアウトを使用する場合は、既存のページ・スタイルをコピーして、ソース・コードを編集できます。詳細は、第25.3項「ページ・スタイルの作成」を参照してください。

カスタム・ページ・スタイルをダウンロードし、Oracle JDeveloperに取り込んでさらにカスタマイズし、それをWebCenter Portalにアップロードしなおすこともできます。詳細は、第25.4項「ページ・スタイルの編集」を参照してください。組込みページ・スタイルとカスタム・ページ・スタイルの違いは、柔軟性の違いです。カスタム・ページ・スタイルでは多くのアクションを使用できますが、組込みページ・スタイルで使用できるアクションは多くありません。

25.2 ポータル・ページへのページ・スタイルの適用

新しくページを作成する際は、ウィザードの最初のページでそのページにページ・スタイルを適用できます(図25-2)。

25.3 ページ・スタイルの作成

WebCenter Portalでは組込みページ・スタイルをいくつか用意していますが、独自のページ・スタイルが必要となる可能性もあります。カスタム・ページ・スタイルを作成すると、次のことができるようになります。

整形され、制御されたレイアウトの作成

レイアウト・コンポーネントを使用することで、形状が予測できる、固定した信頼性が高いレイアウトを作成できます。

関連項目:
第16章「ページでのレイアウト・コンポーネントの使用」
パラメータのシード

ページ・スタイルにパラメータをシードすると、ページの作成時に、ページを作成するユーザーに値の入力を求めます。

たとえば、組込みの「3列」ページ・スタイルでは次のパラメータを定義し、ユーザーが列の幅を設定できます。
```
<parameters>
   <parameter id="leftWidth" value="${'25%'}"/>
   <parameter id="centerWidth" value="${'50%'}"/>
   <parameter id="rightWidth" value="${'25%'}"/>
</parameters>
```
ユーザーが「3列」ページ・スタイルを使用してページを作成する際、「ページの作成」ウィザードには「設定」ページが表示され、ユーザーはそこで列の幅を設定できます(図25-3)。

図25-3 「ページの作成」ウィザードの「設定」ページ

「図25-3 「ページの作成」ウィザードの「設定」ページ」の説明
スタイル指定の簡素化

ページで背景色などの様々な要素へのCSSスタイルの設定に使用されるパラメータを作成できます。

図25-4 「背景色」パラメータを含む「設定」ページ

「図25-4 「背景色」パラメータを含む「設定」ページ」の説明
共通の領域、ロゴ、イメージまたはリンクの作成

ポータルのすべてのページにロゴやリンクなどの特定の要素を含める場合、それらをページ・スタイルで作成できます。イメージやリンクを保持するタスク・フローをページ・スタイルの上部に追加することにより、そのページ・スタイルから作成されたすべてのページに共通の領域が含まれることになります。この場合にタスク・フローを編集すると、それらすべてのページを一度の手順で更新できます。

関連項目:
第14章「ページでのリソース・カタログ・コンポーネントの使用」

WebCenter Portalでページ・スタイルを直接作成する方法はありません。つまり、このプロセスを開始する「作成」ボタンはありません。新しいページ・スタイルを作成するには、まず既存のページ・スタイルをコピーする必要があります(詳細は、第20.5.4項「アセットのコピー」を参照してください)。

コピーの作成後、そのソース・コードをソース・コード・エディタで編集できます(詳細は、第20.4.2項「アセットのソース・コードの編集」を参照してください)。ただし、柔軟性を高め、編集環境を向上させるために、コピーしたページ・スタイルをダウンロードしてJDeveloperにインポートし、さらに開発できます(詳細は、第20.8項「JDeveloperでのポータル・アセットの使用」を参照してください)。

JDeveloperでのページ・スタイルの使用の詳細は、Oracle WebCenter PortalおよびOracle JDeveloperでのポータルの開発のページ・スタイルの開発に関する項を参照してください。

25.4 ページ・スタイルの編集

既存のページ・スタイルをコピーしてページ・スタイルを作成した後、編集して、外観やコンテンツを必要に応じて変更できます。

注意:

WebCenter Portalでは、「ソースの編集」ダイアログを使用してページ・スタイルのソース・コードを編集できます。しかし、ページ・スタイルをダウンロードして、より多くの編集機能を備えたJDeveloperで編集することをお薦めします。

ページ・スタイルの編集は、かなり複雑な作業です。このため、ページ・スタイルの編集は、経験豊富なWeb開発者が仕上げる必要があります。

ソース編集により、カスタム・ページ・スタイルの基礎となるコードを操作できます。WebCenter Portalでページ・スタイルのソース・コードを操作するシナリオは、いくつかあります。

デフォルト・ページ・スタイルをコピーし、コピーのソース・コードを調整します。
デフォルト・ページ・スタイルをコピーし、そのコピーをダウンロードして、JDeveloperにインポートして拡張し、WebCenter Portalにアップロードしなおしてから、ソース・コードを編集してさらに微調整します。
別のページ・スタイルをコピーし、そのコードを独自のコードに置き換えて、まったく新しいページ・スタイルを作成します。ただし、ハンドコーディングの要件が厳しいため、このシナリオはお薦めしません。

「ソースの編集」ダイアログでは、「ページ」および「ページ定義」という2つのタブにページ・スタイル・ソースが表示されます。「ページ」タブのコードは、ページ・レイアウト、コンテンツおよびスタイルを定義します。「ページ定義」タブのコードは、パラメータ定義とタスク・フローおよびデータ・コントロール・バインディングを保持しています。それぞれは、基礎となるJSPXページおよびページ・スタイルを構成するページ定義ファイルに相当します。

「ソースの編集」ダイアログへのアクセス手順の詳細は、第20.4.2項「アセットのソース・コードの編集」を参照してください。

例25-1は、ページ・スタイルのエンコードを示しています。これは、2つの列の幅が35%と65%の割合でレイアウトされ、フローするように設計されている基本ページを示しています。これは、JDeveloperで作成され、WebCenter Portalにインポートされ、「ソースの編集」ダイアログの「ページ」タブで開かれて少量の変更が行われる、ページ・スタイルの例です。

例25-1 カスタムのページ・スタイルのソース・コード

<?xml version='1.0' encoding='utf-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:pe="http://xmlns.oracle.com/adf/pageeditor"
xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:trh="http://myfaces.apache.org/trinidad/html" version="2.1">
 <jsp:directive.page deferredSyntaxAllowedAsLiteral="true"/>
 <jsp:directive.page contentType="text/html;charset=utf-8"/>
 <f:view>
  <af:document title="#{pageDocBean.title}" id="docrt">
   <af:form usesUpload="true" id="f1">
    <af:pageTemplate value="#{bindings.shellTemplateBinding.templateModel}"
    id="T">
     <f:facet name="content">
      <pe:pageCustomizable id="pcl1">
       <af:panelGroupLayout id="pgl1" layout="scroll"
       styleClass="replace_with_scheme_name"
       inlineStyle="replace_with_inline_style">
        <trh:tableLayout id="tl1" width="100%">
         <trh:rowLayout id="rl1">
          <trh:cellFormat id="cf1" width="35%" valign="top">
           <cust:panelCustomizable id="hm_pnc1" layout="scroll"/>
          </trh:cellFormat>
          <trh:cellFormat id="cf2" width="65%" valign="top">
           <cust:panelCustomizable id="hm_pnc2" layout="scroll"/>
          </trh:cellFormat>
         </trh:rowLayout>
        </trh:tableLayout>
        <trh:tableLayout id="tl2"/>
       </af:panelGroupLayout>
       <f:facet name="editor">
        <pe:pageEditorPanel id="pep1"/>
       </f:facet>
      </pe:pageCustomizable>
     </f:facet>
    </af:pageTemplate>
   </af:form>
  </af:document>
 </f:view>
</jsp:root>

25.5 ページ・スタイルの管理

次のオプションは、「アセット」ページまたは「共有アセット」ページに表示され、ページ・スタイルの管理に使用できます。