1. Oracle WebCenter Portalの開発
  2. WebCenter Portalアセットの使用
  3. ページ・スタイルの開発

6 ページ・スタイルの開発

JDeveloperを使用して、WebCenter Portalで使用するためのページ・スタイルを作成、編集および公開します。

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

ページ・スタイルの開発について

ページ・スタイルは、実行時に作成するページに使用するJSPXページです。ページ・スタイルは、新規作成されたページのレイアウトを記述し、ページでサポートされるコンテンツ・タイプを指示する場合もあります。

ユーザーがページ・スタイルを使用してページを作成する場合、レイアウトと初期コンテンツが、ページ・スタイルから新規作成されたページにコピーされます。ページ・テンプレートとは異なり、ページ・スタイルは参照ベースではありません。つまり、ページ・スタイルを変更しても、そのスタイルを使用しているページでは変更内容が継承されません。

通常、ページ・スタイルには、指定したページの有用性と外観を強化するコンポーネントが含まれます。これらのコンポーネントには、インプレースHTMLテキスト・エディタ、イメージ、レイアウト・ボックス、ハイパーリンクなどが含まれます。コンテンツ・コントリビュータを使用すると、ページにコンテンツをさらに移入できます。図6-1は、ページ・スタイルに基づいたポータル・ページのサンプルを示しています。

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

図6-1の説明が続きます
「図6-1 ページ・スタイルを使用したページのサンプル」の説明

実行時にページを作成するために使用するページ・スタイルは、JDeveloperまたはWebCenter Portalの「共有アセット」ページ(または個々のポータルの「アセット」ページ)から作成できます。実行時に、ユーザーは使用可能なページ・スタイルに基づいてページを作成します。「ページの追加」を選択すると、図6-2に示すように、「スタイルの選択」ダイアログに事前に定義された一連のスタイルが表示されます。ユーザーはスタイルを選択し、そのスタイルに基づいてページを作成します。レイアウトが新規ページにすでに配置されているため、ユーザーはページの様々な領域にコンテンツを追加するだけです。

図6-2 「スタイルの選択」ダイアログ

図6-2の説明が続きます
「図6-2 「スタイルの選択」ダイアログ」の説明

ページ・スタイルの作成のベスト・プラクティス

WebCenter Portalアセットとして公開するページ・スタイルを開発する際には、次の前提条件およびガイドラインが役立ちます。

  • ページ・スタイルがページ・テンプレートに基づいている場合は、ページ・スタイルのJSF (.jspx)ファイルの設計時に、contentファセットまたはページ・テンプレートで定義されているその他のファセットを追加して、ページ・コンテンツが含まれるようにします。

  • ページをカスタマイズ可能にするには、コンテンツ・ファセット内にPage Customizableコンポーネントを追加します。Page Customizableには、子であるpanelCustomizableコンポーネントがデフォルトで含まれているため、ユーザーは実行時にコンテンツをページに追加できます。

  • ページ・スタイルに使用するページ・テンプレートを動的に選択できるようにするには、ページ・スタイルのJSF (.jspx)ファイルで、そのページ・テンプレートの定義がページ・スタイルのページ定義の中に含まれていることを、次のように指定します。 

    <af:pageTemplate value="#{bindings.pageTemplateBinding.templateModel}" id="T">

    その後、次のようにページ・スタイルのページ定義の中でEL値を指定して、ページ・テンプレートの名前をデフォルト・ページ・テンプレート設定から取得できます。

    <page viewId="#{preferenceBean.defaultPageTemplateViewId}" 
id="pageTemplateBinding" Refresh="ifNeeded"/>

    実行時に、適切な権限を持ったユーザーが、実行時管理コンソールで新しいデフォルト・ページ・テンプレートを選択することにより、別のページ・テンプレートに切り替えることができます。詳細は、『Oracle WebCenter Portalの管理』のデフォルト・ページ・テンプレートの選択に関する項を参照してください。

  • 次の例に示すように、使用するページ・テンプレートを制御するマネージドBeanを作成できます。

    例: ページ・テンプレートを制御するためのマネージドBean

    public class siteTemplatesManager {
final private String templateA ="/templateA.jspx";
 final private String templateB ="/templateB.jspx";
 private String currentSiteTemplateViewId;
 
public siteTemplatesManager() {
super();
 currentSiteTemplateViewId =templateA;
 }
public String gettemplateViewId() {
return currentSiteTemplateViewId;
 }
public void settemplateAViewId(ActionEvent ae) {
currentSiteTemplateViewId =templateA;
 }
public void settemplateBViewId(ActionEvent ae) {
currentSiteTemplateViewId =templateB;
 }
}

ページ・スタイルの作成

この項では、新しいページ・スタイル用にWebCenter Portalアセット・アプリケーションを作成する方法について説明します。アセット・アプリケーションが関連するアーティファクトとともに作成されると、続いて「ページ・スタイルの編集」の説明に従ってページ・スタイルのJSPXファイルを変更できます。

この項には次のトピックが含まれます:

ページ・スタイルを作成する方法

この項では、新しいページ・スタイル用にWebCenter Portalアセット・アプリケーションを作成する方法について説明します。アセット・アプリケーションが関連するアーティファクトとともに作成されると、続いて「ページ・スタイルの編集」の説明に従ってページ・スタイルのJSPXファイルを変更できます。

カスタム・ページ・スタイルを作成するには:

  1. 「アセット・タイプ」で「ページ・スタイル」を選択して、アセット用にWebCenter Portalアセット・アプリケーションを作成します。

    WebCenter Portalアセット・アプリケーションの作成の詳細は、「WebCenter Portalアセット・アプリケーションの作成」を参照してください。ページ・スタイル用にアセット・アプリケーションを作成する際に作成されるアーティファクトの詳細は、「ページ・スタイルのアーティファクトに関する必知事項」を参照してください。

  2. アプリケーション・ナビゲータで、新規作成したページ・スタイルのJSPXファイルを右クリックし、「開く」を選択します(図6-3)。

    図6-3 ページ・スタイルのJSPXファイル

    図6-3の説明が続きます
    「図6-3 ページ・スタイルのJSPXファイル」の説明
  3. 続いて「ページ・スタイルの編集」に示すようにページ・スタイルを追加または変更します。

ページ・スタイルのアーティファクトに関する必知事項

ページ・スタイル・アセット・アプリケーションを作成すると、次のアーティファクトとともにデフォルト・ページ・スタイルが生成されます。

  • ページ・スタイルのページ要素が含まれるJSPファイル(PageStyle1.jspxなど)

  • ページ・スタイルの対応するページ定義ファイル(PageStyle1PageDef.xmlなど)

どちらのファイルも図6-4に示すようにナビゲーション・バーに表示されます。

図6-4 ページ・スタイル・アセット・アプリケーションのアーティファクト

図6-4の説明が続きます
「図6-4 ページ・スタイル・アセット・アプリケーションのアーティファクト」の説明

次の各例は、フローして3列を示すように設計された基本ページを作成する、組込みページ・スタイル「3列」のJSPXファイルおよび関連するページ定義ファイルのページ・スタイル・コードを示しています。

「3列」ページ・スタイルのJSPXファイル

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable" xmlns:f="http://java.sun.com/jsf/core" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:trh="http://myfaces.apache.org/trinidad/html">
   <jsp:directive.page deferredSyntaxAllowedAsLiteral="true"/>
   <jsp:directive.page contentType="text/html;charset=utf-8"/>
   <f:view>
      <af:document id="docrt" title="#{pageDocBean.title}">
         <f:facet name="metaContainer">
            <trh:meta content="#{bindings.SEO_KEYWORDS}" name="keywords"/>
         </f:facet>
         <af:form id="f1" usesUpload="true">
            <af:pageTemplate id="T" value="#{bindings.shellTemplateBinding.templateModel}">
               <f:facet name="content">
                  <af:panelGroupLayout id="pgl1" inlineStyle="replace_with_inline_style" layout="scroll" styleClass="replace_with_scheme_name">
                     <af:declarativeComponent id="dclay" viewId="#{pageDocBean.layoutViewId}">
                        <f:facet name="area1">
                           <cust:panelCustomizable id="pcarea1" layout="auto"/>
                        </f:facet>
                        <f:facet name="area2">
                           <cust:panelCustomizable id="pcarea2" layout="auto"/>
                        </f:facet>
                        <f:facet name="area3">
                           <cust:panelCustomizable id="pcarea3" layout="auto"/>
                        </f:facet>
                     </af:declarativeComponent>
                  </af:panelGroupLayout>
               </f:facet>
            </af:pageTemplate>
         </af:form>
      </af:document>
   </f:view>
</jsp:root>

例: 「3列」ページ・スタイルのページ定義ファイル

<?xml version='1.0' encoding='UTF-8'?>
<pageDefinition Package="oracle.webcenter.siteresources.scopedMD.s8bba98ff_4cbb_40b8_beee_296c916a23ed.pageStyle.gsr7ae8ef60_d5b9_4411_becb_11239bf4bb63" id="TemplateThreeColumnPageDef" version="11.1.1.41.30" xmlns="http://xmlns.oracle.com/adfm/uimodel">
   <parameters>
      <parameter id="page_layout" value="gsr22bbc98b_834b_425d_8d48_c136d0956ec8"/>
      <parameter id="page_title" value="Three Column"/>
   </parameters>
   <executables>
      <page Refresh="ifNeeded" id="shellTemplateBinding" viewId="#{WCAppContext.application.siteTemplatesManager.currentSiteTemplateViewId}"/>
   </executables>
   <bindings/>
   <permission permissionClass="oracle.webcenter.page.model.security.CustomPagePermission" target="ps_targetusage" xmlns="http://xmlns.oracle.com/adf/security">
      <privilege-map operation="administer" privilege="manage"/>
      <privilege-map operation="create" privilege="create"/>
      <privilege-map operation="delete" privilege="delete"/>
      <privilege-map operation="edit" privilege="update"/>
      <privilege-map operation="personalize" privilege="personalize"/>
      <privilege-map operation="view" privilege="view"/>
   </permission>
</pageDefinition>

ページ・スタイルの編集

ページ・スタイル用にWebCenter Portalアセット・アプリケーションを作成したら、続いて新規作成したページ・スタイル・ファイルにコンテンツを追加できます。

注意:

WebCenter Portalで既存または組込みのページ・スタイルをコピーし、JDeveloperでそのページ・スタイルのJSPXファイルに貼り付けることをお薦めします。次に、このページ・スタイルを新しいページ・スタイルの起点として使用し、変更が終了したらWebCenter Portalに公開します。WebCenter Portalでのアセットのコピー方法の詳細は、『Oracle WebCenter Portalでのポータルの構築』のアセットのコピーに関する項を参照してください。

ページ・スタイルを編集するには:

  1. アプリケーション・ナビゲータで、ページ・スタイルのJSPXファイルを右クリックし、「開く」を選択します(図6-5)。

    図6-5 ページ・スタイルのJSPXファイル

    図6-5の説明が続きます
    「図6-5 ページ・スタイルのJSPXファイル」の説明
  2. ビジュアル・エディタで、ページを編集するときと同じ方法でページ・スタイルのコンテンツのレイアウトに変更を加えます。
    ページ・スタイルのコンテンツを定義する場合のベスト・プラクティスの詳細は、「ページ・スタイルの作成のベスト・プラクティス」を参照してください。ページ・スタイル・アセット・アプリケーション用に作成されるファイルの詳細は、「ページ・スタイルのアーティファクトに関する必知事項」を参照してください。
  3. 変更を保存します。
  4. 「ページ・スタイルの公開」に示すように、ページ・スタイルを公開してテストします。

ページ・スタイルの公開

WebCenter Portalアセット・アプリケーションを作成し、ページ・スタイルのJSPXファイルを編集したら、次の工程はページ・スタイルを公開してWebCenter Portalでテストします。アセットを共有アセットとしてWebCenter Portalに公開する、またはポータル・アセットとして特定のポータルに公開する方法の詳細は、「WebCenter Portalアセットの公開」を参照してください。