5 レイアウトの開発

この章では、ページ・レイアウトを作成または変更して、WebCenter Portalに共有アセットまたはポータル固有のアセットとして公開する方法について説明します。

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

5.1 レイアウトの開発について

新しいページの作成時に、そのページのページ・スタイルを選択します。あらゆるページ・スタイルにはデフォルト・レイアウトがあり、新しいページに継承されます。WebCenter Portalには、組込みレイアウトがいくつか用意されており、「共有アセット」ページまたは「アセット」ページで選択できます。

ページのレイアウト(ページ・スタイル)を変更する場合は、どのページにも新しい既存のレイアウトを選択できますが、カスタム・レイアウトを作成して共有アセットまたはポータル固有のアセットとして公開することもできます。そのようにするには、WebCenter Portalで組込みレイアウトのコピーを作成して編集するか、JDeveloperでWebCenter Portalアセット・アプリケーションを作成し、組込みレイアウトをコピーして貼り付けて変更します。

この章では、WebCenter Portalアセット・アプリケーションでページ・レイアウトを作成または変更して、WebCenter Portalに共有アセットまたはポータル固有のアセットとして公開する方法について説明します。WebCenter Portalでのレイアウトの変更の詳細は、『Oracle WebCenter Portalでのポータルの構築』の「レイアウトの使用」を参照してください。

5.2 レイアウトの作成

この項では、ページ・レイアウト用のWebCenter Portalアセット・アプリケーションの作成方法と、それと一緒に作成されるアーティファクトについて説明します。

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

5.2.1 レイアウトの作成方法

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

注意:

Oracleは、イメージやアイコンなどのアセット関連のアーティファクトをコンテンツ・サーバーに保管し、アセット・アーティファクト専用のフォルダ構造をコンテンツ・サーバー上で作成することをお薦めします。これにより、必要な場合にコンテンツを容易に特定し、移動できます。

カスタム・レイアウトを作成するには:

「アセット・タイプ」で「レイアウト」を指定して、アセット用にアセット・アプリケーションを作成します。
WebCenter Portalアセット・アプリケーションの作成の詳細は、「WebCenter Portalアセット・アプリケーションの作成」を参照してください。レイアウト用にアセット・アプリケーションを作成する際に作成されるアーティファクトの詳細は、「レイアウトのアーティファクトに関する必知事項」を参照してください。
アプリケーション・ナビゲータで、新規作成したレイアウトのCSSファイルおよびJSPXファイルを右クリックし、「開く」を選択します。既存のWebCenter Portalレイアウトを起点として使用している場合は、JDeveloperでソースを対応するファイルにコピーして貼り付けます(既存のアセットを起点として使用する方法の詳細は、『Oracle WebCenter Portalでのポータルの構築』のアセットのコピーに関する項を参照)。
続いて「レイアウトの編集」の説明に従ってレイアウトを追加または変更します。

5.2.2 レイアウトのアーティファクトに関する必知事項

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

CSSファイル(Layout1.cssなど)
JSFファイル(Layout1.jspxなど)

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

図5-1 レイアウト・アセット・アプリケーションのアーティファクト

「図5-1 レイアウト・アセット・アプリケーションのアーティファクト」の説明

次の各例は、WebCenter Portalの「共有アセット」ページから組込みレイアウト「3列」用のJSPXファイルと、対応するCSSファイルを示しています。

3列レイアウトのJSPXファイルの例

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
   <jsp:directive.page contentType="text/html;charset=UTF-8"/>
   <af:componentDef var="attrs" componentVar="comp">
      <af:xmlContent>
         <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
            <display-name>ThreeColumnFlow</display-name>
            <facet>
               <facet-name>area1</facet-name>
            </facet>
            <facet>
               <facet-name>area2</facet-name>
            </facet>
            <facet>
               <facet-name>area3</facet-name>
            </facet>
         </component>
      </af:xmlContent>
      <af:group id="threeColumnFlow">
         <af:resource type="css" source="${pageDocBean.layoutCssPath}"/>
         <div xmlns="http://www.w3.org/1999/xhtml" class="area1">
            <af:facetRef facetName="area1"/>
         </div>
         <div xmlns="http://www.w3.org/1999/xhtml" class="area2">
            <af:facetRef facetName="area2"/>
         </div>
         <div xmlns="http://www.w3.org/1999/xhtml" class="area3">
            <af:facetRef facetName="area3"/>
         </div>
      </af:group>
   </af:componentDef>
</jsp:root>

3列レイアウトのCSSファイルの例

/* one column */
.area1 {
}
 
.area2 {
}
 
.area3 {
}
 
 
/* two column with area3 under area2 */
@media only screen and (min-width : 481px) { 
  .area1 {
    position:absolute;
    left: 0px;        
    width:50%;
  }
  .area2 {
    position:relative;
    left:50%;         
    width:50%;
  }
  .area3 { 
    position: relative;
    left: 50%;        
    width:50%;
  }
}
 
/* three column */
@media only screen and (min-width: 769px) {
  .area1 {
    position: static;
    left: auto;
    float:left;
    width:33%;
  }
 
  .area2 {
    position: static;
    left: auto;
    float:left;
    width:34%;
  }
 
  .area3 {
    position: static;
    left: auto;
    float:left;
    width:33%;
  }
}

5.3 レイアウトの編集

「レイアウトの作成」の説明に従ってレイアウト用のアセット・アプリケーションを作成したら、続いてCSSファイルおよびJSPXファイルを変更します。

注意:

レイアウトを編集するには:

アプリケーション・ナビゲータで、レイアウトのCSSファイルおよびJSPXファイルを右クリックし、「開く」を選択します。
既存のWebCenter Portalレイアウト(つまり、アセット・アプリケーションの作成時にデフォルトで作成されたもの以外のレイアウト)を起点として使用している場合は、JDeveloperでCSSファイルおよびJSPXファイルのソースを対応するファイルにコピーして貼り付けます(『Oracle WebCenter Portalでのポータルの構築』のアセットのコピーに関する項を参照)。
レイアウトのソース・コードで、適宜変更します。
CSSファイルおよびJSPXファイルを保存します。
「レイアウトの公開」に示すように、レイアウトを公開してテストします。

5.4 レイアウトの公開

WebCenter Portalアセット・アプリケーションを作成し、レイアウトに必要な変更を加えたら、次の工程はレイアウトを公開してWebCenter Portalでテストします。レイアウトをWebCenter Portalに共有アセットまたはポータル固有のアセットとして公開する方法の詳細は、「WebCenter Portalアセットの公開」を参照してください。