ポータル ユーザ インタフェースのフレームワーク ガイド
|
 |
 |
|
このドキュメントでは、WebLogic Workshop で開発したポータル (図 1 を参照) がポータル フレームワークによってどのように変換され、ポータル デスクトップの訪問者が使用しているブラウザにどのように表示されるか (図 2 を参照) について、詳しく説明します。このドキュメントの目的は、ポータルの開発およびトラブルシューティングに役立つように、ポータル フレームワークについて説明することです。ここで説明するトピックを理解すると、ブラウザにポータルを表示し、目的の結果を得るには基本となるフレームワークのどの部分を変更する必要があるかがわかるようになります。さらに、ルック アンド フィール エディタについても説明します。ルック アンド フィール エディタを使用すると、ポータルで使用するテキスト スタイルを対話形式で変更できます。
このドキュメントのトピックでは、ポータル フレームワークの主要コンポーネントとポータル表示プロセスについて説明します。次のトピックがあります。
WebLogic Workshop でポータルを構築するとき、使用するルック アンド フィールによって、ポータルが最終的にどのように表示されるかが決まります。このトピックでは、ポータル フレームワークで HTML によるルック アンド フィールを表示するために必要な機能を、ルック アンド フィール フレームワークのさまざまな要素を組み合わせてコンフィグレーションする方法について説明します。
ルック アンド フィールは、XML ファイル (拡張子 .laf) で表されます。次の図に示すように、.laf (avitek.laf) ファイルは、ポータル プロジェクトの lookandfeel フォルダに保存されます。さらに、[デスクトップ プロパティ] パネルで .laf ファイル名 (たとえば avitek) を選択できます。
ポータル デスクトップで使用されるルック アンド フィールを選択できるユーザは、WebLogic Workshop を使用してポータルを構築する開発者だけではありません。開発者はルック アンド フィールを作成し、ポータルで使用されるデフォルトのルック アンド フィールを選択しますが、ポータルの管理者と訪問者がデスクトップの最終的なルック アンド フィールを決定できます。以下の図は、ポータルの管理者とユーザがデスクトップで使用されるルック アンド フィールを変更する方法を示しています。
ポータル管理者は、WebLogic Administration Portal でデスクトップを作成した後、[デスクトップ プロパティ] ページでデスクトップのルック アンド フィールを変更できます。次の図を参照してください。
デスクトップに対して訪問者ツールが有効になっている場合、訪問者は [Customize My Portal] リンクをクリックしてデスクトップのルック アンド フィールを変更できます。次の図を参照してください。
次の節では、XML ベースのルック アンド フィール ファイルである .laf ファイルの内容を示し、そのファイルがポータル デスクトップを表示するための基礎としてどのように使用されるかについて説明します。
ルック アンド フィール ファイルは、デスクトップ全体のルック アンド フィールとして使用される特定のスキンとスケルトンを指定します。
ルック アンド フィール ファイルが保存される場所は、<portal_Web_project>/framework/markup/lookandfeel です。BEA 提供の avitek.laf を次に示します。重要な属性を強調しています。
<?xml version="1.0" encoding="UTF-8"?>
<netuix:markupDefinition xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0 markup-netuix-1_0_0.xsd">
<netuix:locale language="en"/>
<netuix:markup>
<netuix:lookAndFeel
definitionLabel="avitek" title="avitek"
description="The avitek look and feel"
skin="avitek" skinPath="/framework/skins/"
skeleton="default" skeletonPath="/framework/skeletons/"
markupType="LookAndFeel" markupName="avitek"/>
</netuix:markup>
</netuix:markupDefinition>
次の表では、ルック アンド フィールの重要な属性について説明します。
WebLogic Workshop プロパティ エディタで選択したデスクトップ用のルック アンド フィールを選択すると、.portal ファイル内の基本となる XML にルック アンド フィールの XML が自動的に追加されます。これについて次の節で詳しく説明します。
Portal Designer を使用して作成した次のサンプル ポータル ファイルは、.laf ファイルから挿入されたルック アンド フィールの XML (太字の部分) を示しています。ポータル ファイルは、WebLogic Administration Portal で複数のデスクトップを作成するために使用できるテンプレートです。ポータル ファイルをテンプレートとして使用すると、テンプレートから作成したすべてのデスクトップのデフォルトのルック アンド フィールは、ポータル ファイルによって決定されます。
<?xml version="1.0" encoding="UTF-8"?>
<portal:root xmlns:html="http://www.w3.org/1999/xhtml-netuix-modified/1.0.0"
xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0"
xmlns:portal="http://www.bea.com/servers/netuix/xsd/portal/support/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/portal/support/1.0.0
portal-support-1_0_0.xsd">
<portal:directive.page contentType="text/html;charset=UTF-8"/>
<netuix:desktop definitionLabel="defaultDesktopLabel" markupName="desktop"
markupType="Desktop" title="New Portal Desktop">
<netuix:lookAndFeel definitionLabel="avitek" description="The avitek look
and feel"
markupName="avitek" markupType="LookAndFeel" skeleton="default"
skeletonPath="/framework/skeletons/" skin="avitek"
skinPath="/framework/skins/" title="avitek"/>
<netuix:shell description="A header with a link and footer is included in this shell."
markupName="headerFooterVisitor" markupType="Shell"
title="Header-Footer Visitor Shell">
<netuix:head/>
<netuix:body>
<netuix:header>
<netuix:jspContent contentUri="/portlets/header/header.jsp"/>
</netuix:header>
[XML for books, pages, and portlets...]
<netuix:footer>
<netuix:jspContent contentUri="/portlets/footer/footer.jsp"/>
</netuix:footer>
プロパティ エディタでデスクトップに対してルック アンド フィール プロパティを設定するときに、ルック アンド フィールの XML が挿入されます。たとえば、次の図では、avitek と呼ばれるルック アンド フィールを選択しています。
.laf ファイルが .portal ファイルに挿入されると、表示プロセスでのこのファイルの役割は終了し、ルック アンド フィールの設定には .portal ファイルが使用されます。
ポータル ファイルのルック アンド フィール属性は、ポータルを HTML で表示するときに使用するスキンとスケルトンをポータルに指示します。前の例に示したポータルでは、次のスキン リソースとスケルトン リソースが使用されます。
|
|
|
ポートレットのタイトルバーで使用されるアイコンは、スキンの /images ディレクトリに格納されています。ポータル フレームワークはポータル Web プロジェクトの WEB-INF/netuix-config.xml ファイルを読み込んで、ポートレットのさまざまな状態とモード (最小化、最大化、ヘルプ、編集など) に応じて、これらのグラフィックのどれを使用するかを決定します。
スキンごとに skin.properties ファイルがあり、このファイルは、表示される HTML の <head> セクションに参照先を挿入するためにポータル フレームワークで使用されます。skin.properties ファイルには、画像ディレクトリ、HTML で使用されるスタイルが格納された CSS ファイル、および HTML で使用される関数が格納された JavaScript ファイルへの参照が含まれています。
注意 : skin.properties と同じディレクトリに、skin_custom.properties というファイルを作成することもできます。skin_custom.properties で指定したエントリも、HTML の <head> 領域に追加されます。この機能により、カスタマイズしたプロパティが製品の更新によって上書きされることがなくなります。
そのため、skin.properties または skin_custom.properties にすべてのスキン リソースへの参照を追加することが重要です。
「ルック アンド フィール ファイル」で説明したように、skin.properties ファイルまたは skin_custom.properties ファイルには、ルック アンド フィール (.laf) ファイルでスケルトン属性が省略されている場合に使用されるスケルトン パス情報も格納できます。
次の表は、アクティブ スキンの skin.properties 内のエントリが HTML の <head> エントリにどのように変換されるかを示す例です。スキンが異なれば、エントリも異なります。
HTML の <head> セクションへの CSS エントリおよび JavaScript エントリの挿入順序を制御できます。CSS エントリには以下を追加します。
数字がエントリの挿入順序を示します。すべての CSS エントリが先に挿入され、その後ですべてのスクリプト エントリが挿入されます。
個々のポータル コンポーネントのスキン要素とスケルトンをオーバーライドして、他のポータル コンポーネントとは異なるルック アンド フィールを設定できます。たとえば、あるポートレットのルック アンド フィールをオーバーライドして、同じページの他のポートレットとは異なる表示ができます。
個々のスキンまたはスケルトンの一部として、「テーマ」と呼ばれるサブスキンとサブスケルトンを作成できます。テーマには、1 つのスキンまたはスケルトンに含まれるすべてのリソースまたは一部のリソースが含まれます。たとえば、単一の CSS ファイルが格納された /css サブディレクトリをスキン テーマに含めることができます。また、ポートレット タイトルバーを表示する単一の JSP をスケルトン テーマに含めることができます。テーマは、ブック、ページ、およびポートレットに対して使用できます。
テーマごとに .theme ファイルが <portal_Web_project>/framework/markup/theme/ に必要です。テーマ ファイルのサンプルを次に示します。
<?xml version="1.0" encoding="UTF-8"?>
<netuix:markupDefinition xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0 markup-netuix-1_0_0.xsd">
<netuix:locale language="en"/>
<netuix:markup>
<netuix:theme
name="alert"
title="Alert Theme" description="A simple alert theme."
markupType="Theme" markupName="alert"/>
</netuix:markup>
</netuix:markupDefinition>
テーマ ファイルには次の 2 つの重要な属性が含まれています。
テーマの XML は、.portal 内の、テーマを適用する対象のブック、ページ、またはポートレットの XML を囲むように挿入されます。
次の図は、WebLogic Workshop と WebLogic Administration Portal でテーマを設定する場所を示しています。
ブック、ページ、またはポートレットに適用するテーマの選択は、デスクトップに対して選択されているルック アンド フィールに依存しません。選択したテーマがルック アンド フィールのスキンとスケルトンに含まれているかどうかに関係なく、すべてのルック アンド フィールにすべてのテーマを選択できます。選択したテーマがスキンまたはスケルトンに含まれていない場合、テーマは無視されます。選択したルック アンド フィールにスキン テーマとスケルトン テーマの両方が存在する場合は、両方が使用されます。
次の図は、テーマ ファイル、スキン テーマ、およびスケルトン テーマのテーマ ディレクトリ構造の例を示しています。
テーマにスキン リソースまたはスケルトン リソースが明示的に含まれていない場合、親のスキン リソースまたはスケルトン リソースが使用されます。たとえば、スケルトン テーマで JSP を 1 つだけ使用してポートレット タイトルバーを表示している場合、ポートレットの残りの部分は親スケルトンの JSP を使用して表示されます。
スケルトンの場合は、親のリソースを利用できるかどうかはスケルトン テーマのディレクトリにある skeleton.properties というファイルによって決まります。このファイルの内容は、次の 1 つのエントリだけです。
「., ..」は、テーマ自体のスケルトン JSP と親スケルトンの JSP への相対パスです。
親スキンでは、スキン テーマへのパス情報が skin.properties に次の形式で含まれている必要があります。
theme.alert.search.path: alert/images, images
テーマ ディレクトリの名前がプロパティの 2 番目のエントリです。テーマ画像へのパスを設定します (alert/images)。テーマ画像が必要な画像の不完全なサブセットである場合に備えて、親スキンの画像ディレクトリ (images) へのパスも設定します。
Portal Designer で選択したコンポーネントに対して、そのコンポーネントの表示に使用する CSS プロパティとスケルトン JSP をオーバーライドできます。Portal Designer でポータル コンポーネントを選択した状態で、プロパティ エディタの [プレゼンテーション プロパティ] にプロパティ オーバーライドを設定します。次の図を参照してください。
ポータル デスクトップを HTML として表示するとき、選択したスケルトン JSP がコンポーネントの表示に使用され、入力したスタイル オーバーライドが .portal ファイルの XML に自動的に挿入されます。
ポータル デスクトップに対して選択したルック アンド フィールは、デスクトップが HTML でどのように表示されるかを決定する基礎として機能します。ルック アンド フィールの XML ファイル (.laf) は、デスクトップの表示に使用するファイル システム上の特定のスキンと特定のスケルトンを指定します。
スキンは、フレームワーク画像 (ポートレット タイトルバーのアイコンなど)、CSS ファイル、および JavaScript などのスクリプト ファイルで構成されます。スケルトンは、XML ベースのポータル コンポーネントを HTML に変換する JSP です。
ルック アンド フィールを選択すると、そのルック アンド フィールの XML が .portal XML ファイルに挿入されます。このファイルは、デスクトップの表示を制御する主要な XML ファイルです (ポートレットの表示には .portlet XML ファイルが使用される)。ルック アンド フィール設定では、HTML の生成に使用されるファイルベースのスキン リソースとスケルトン リソースを指定します。これらのリソースは、表示される HTML でも使用されます。
ルック アンド フィールに使用するスキンには、そのスキンで使用するすべての画像、CSS ファイル、およびスクリプト ファイルへの参照を記述した skin.properties ファイルが含まれます。skin_custom.properties ファイルが含まれる場合もあります。skin.properties および skin_custom.properties のエントリが HTML の <head> エントリに変換されて、HTML で使用されるすべてのフレームワーク画像、CSS スタイル、およびスクリプト関数が認識されます。
ブック、ページ、またはポートレットのルック アンド フィールは、テーマを使用してオーバーライドできます。また、Portal Designer と Portlet Designer のプロパティ エディタを使用して、デスクトップ、ブック、ページ、およびポートレットのタイトルバーとウィンドウを表示するために使用される CSS スタイル、属性、およびスケルトン JSP をオーバーライドできます。
WebLogic Workshop でポータルを構築するとき、選択したシェルによって、ポータル デスクトップのヘッダとフッタのコンテンツが決まります。シェルには、ヘッダとフッタに含めるコンテンツ、パーソナライゼーション、またはその他の動作を含む JSP ファイルまたは HTML ファイルを指定できます。
次の図は、シェルによって制御されるポータル デスクトップの領域を示しています。
左側のナビゲーション領域を含むようにシェルを設定することもできます。例として、WebLogic Workshop サンプル ポータルの左側のナビゲーション領域を参照してください。実際には、ポータルのメイン ページ ブックの外側にあるすべての領域をシェルで制御できます。
シェルは XML ファイル (拡張子 .shell) によって表されます。次の図を参照してください。
ポータル デスクトップで使用されるシェルを決定できるユーザは、WebLogic Workshop を使用してポータルを構築する開発者だけではありません。開発者はシェルを作成し、ポータルで使用されるデフォルトのシェルを選択しますが、ポータル管理者が最終的なデスクトップのシェルを決定します。
ポータル管理者は、WebLogic Administration Portal でデスクトップを作成した後、[デスクトップ プロパティ] ページでデスクトップのシェルを変更できます。
次の節では、シェルの XML ファイルを示し、そのファイルを使用してヘッダとフッタのコンテンツを設定する方法について説明します。
シェルは、デスクトップのヘッダとフッタで使用される JSP ファイルまたは HTML ファイルへのパスを指定します。
シェル ファイルが保存される場所は、<portal_Web_project>/framework/markup/shell/ です。BEA 提供の headerFooterVisitor.shell を次に示します。重要な属性を強調しています。
<?xml version="1.0" encoding="UTF-8"?>
<netuix:markupDefinition xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0 markup-netuix-1_0_0.xsd">
<netuix:locale language="en"/>
<netuix:markup>
<netuix:shell
title="Header-Footer Visitor Shell"
description="A header with a link and footer is included in this shell."
markupType="Shell" markupName="headerFooterVisitor">
<netuix:head/>
<netuix:body>
<netuix:header>
<netuix:jspContent contentUri="/portlets/header/header.jsp"/>
</netuix:header>
<netuix:break/>
<netuix:footer>
<netuix:jspContent contentUri="/portlets/footer/footer.jsp"/>
</netuix:footer>
</netuix:body>
</netuix:shell>
</netuix:markup>
</netuix:markupDefinition>
次の表では、シェルの属性と、各属性を使用してデスクトップのヘッダとフッタにコンテンツを配置する方法について説明します。
シェルの XML は、.portal ファイル内の基本となる XML に自動的に追加されます。
Portal Designer を使用して作成した次のサンプル ポータル ファイルは、.shell ファイルから挿入されたシェルの XML (太字の部分) を示しています。シェルの XML は、プロパティ エディタでデスクトップに対してシェル プロパティを設定したときに挿入されたものです。.shell ファイルが .portal ファイルに挿入されると、表示プロセスでのこのファイルの役割は終了し、ヘッダおよびフッタの内容の設定には .portal ファイルが使用されます。
<?xml version="1.0" encoding="UTF-8"?>
<portal:root xmlns:html="http://www.w3.org/1999/xhtml-netuix-modified/1.0.0"
xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0"
xmlns:portal="http://www.bea.com/servers/netuix/xsd/portal/support/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/portal/support/1.0.0 portal-support-1_0_0.xsd">
<portal:directive.page contentType="text/html;charset=UTF-8"/>
<netuix:desktop definitionLabel="defaultDesktopLabel" markupName="desktop" markupType="Desktop" title="New Portal Desktop">
<netuix:lookAndFeel definitionLabel="avitek" description="The avitek look
and feel"
markupName="avitek" markupType="LookAndFeel" skeleton="default"
skeletonPath="/framework/skeletons/" skin="avitek"
skinPath="/framework/skins/" title="avitek"/>
<netuix:shell description="A header with a link and footer is included in
this shell."
markupName="headerFooterVisitor" markupType="Shell" title="Header-Footer Visitor Shell">
<netuix:head/>
<netuix:body>
<netuix:header>
<netuix:jspContent contentUri="/portlets/header/header.jsp"/>
</netuix:header>
[XML for books, pages, and portlets...]
<netuix:footer>
<netuix:jspContent contentUri="/portlets/footer/footer.jsp"/>
</netuix:footer>
ポータル ファイルは、WebLogic Administration Portal で複数のデスクトップを作成するために使用できるテンプレートです。ポータル ファイルをテンプレートとして使用すると、テンプレートから作成したすべてのデスクトップのデフォルトのシェルは、ポータル ファイルによって決定されます。
ポータル ファイル内のシェル属性は、ポータルを HTML で表示するときに、ポータルのヘッダとフッタで使用するコンテンツをポータルに指示します。前の例に示したポータルでは、次のシェル リソースが使用されます。
headerFooterVisitor.shell サンプル ファイルには、ヘッダとフッタで使用するコンテンツを指定する 2 つのタグが含まれています。次に示すように、1 つは <header> 要素内に、もう 1 つは <footer> 要素内にあります。
<netuix:jspContent contentUri="/portlets/header/header.jsp"/>
<netuix:jspContent contentUri="/portlets/footer/footer.jsp"/>
上の図では、これらのファイルの場所を示しています。ポータルを表示するとき、これらの JSP が HTML に変換され、ポータルのヘッダ領域とフッタ領域に挿入されます。JSP ファイルには、JSP で使用できる任意のコンテンツや機能 (パーソナライゼーションなど) を含めることができます。
このサンプル シェルで参照されている JSP は、header.jsp と footer.jsp である必要はありません。ポータル Web プロジェクトの任意の JSP を使用できます。ただし、ヘッダ領域とフッタ領域の境界を表示するために使用されるスケルトン JSP は、常にスケルトン フレームワークの header.jsp と footer.jsp です。スケルトン JSP は、シェルが参照する JSP とは異なります。次の節で、この違いについて詳しく説明します。
ポータルのメイン ブックを囲む領域のコンテンツはシェルが制御しますが、ヘッダ領域とフッタ領域の境界およびスタイルの表示にどのスケルトン header.jsp およびスケルトン footer.jsp を使用するかは、ルック アンド フィールが決定します。
次の例では、ルック アンド フィールとシェル ヘッダの両方に header.jsp という同じ名前の JSP ファイルを使用していることに注意してください。これらは用途が異なる別々のファイルです。名前が同じなのは偶然です。
ポータル ファイル内の「avitek」というルック アンド フィールでは、/sampleportal/framework/skeletons/default/ にある「default」というスケルトンを使用します。デフォルト スケルトンには、ポータル ファイルの <header> 要素を表示するために使用される header.jsp というファイルが含まれています。
<%@ page import="com.bea.netuix.servlets.controls.application.HeaderPresentationContext" %>
<%@ page session="false"%>
<%@ taglib uri="render.tld" prefix="render" %>
<%
HeaderPresentationContext header = HeaderPresentationContext.getHeaderPresentationContext(request);
%>
<render:beginRender>
<%-- Begin Body Header --%>
<div
<render:writeAttribute name="id" value="<%= header.getPresentationId() %>"/>
<render:writeAttribute name="class" value="<%= header.getPresentationClass() %>" defaultValue="bea-portal-body-header"/>
<render:writeAttribute name="style" value="<%= header.getPresentationStyle() %>"/>
>
</render:beginRender>
[The JSP referenced in the shell <header> element is inserted here at rendering.]
<render:endRender>
</div>
<%-- End Body Header --%>
</render:endRender>
これは単純なスケルトン ファイルであり、表示すると次の HTML が生成されます。
<!-- Begin Body Header -->
<div
class="bea-portal-body-header"
>
</div>
<!-- End Body Header -->
<div> 開始タグは、bea-portal-body-header と呼ばれる CSS クラスを使用した後、終了タグで閉じます。</div> 終了タグは、表示の終わりで <div> セクションを閉じます。シェル ヘッダで参照される JSP は、<div> 開始タグと </div> 終了タグの間に挿入されます。次の例に示すように、これらのタグの間で JSP のコンテンツが表示されます。
<!-- Begin Body Header -->
<div
class="bea-portal-body-header"
>
[The JSP referenced in the shell <header> element is inserted here at rendering.]
</div>
<!-- End Body Header -->
ヘッダ領域の <div> タグに挿入されるシェルの header.jsp は、ヘッダのコンテンツおよびヘッダのコンテンツのスタイルと動作を制御します。ルック アンド フィールによって提供される要素は、<div> タグと bea-portal-body-header スタイル クラスだけです。
トラブルシューティングのために、表示されたポータルを参照し、bea-portal-body-header クラス (avitek スキンの body.css に含まれている) を表示して、どのスタイル要素がどのルック アンド フィールを制御しているかを確認できます。bea-portal-body-header の定義を次に示します。
.bea-portal-body-header, .bea-portal-body-footer
{
margin: 0px;
padding: 1px;
color: #C3C6B1;
}
.bea-portal-body-header
{
font-size: large;
font-weight: bold;
}
ポータル デスクトップに対して選択したシェルは、ポータルのメイン ブックを囲む領域のコンテンツを決定します。シェルの XML ファイル (.shell) には、デスクトップのヘッダとフッタに表示する HTML ファイルまたは JSP ファイルへの参照が含まれます。
ヘッダまたはフッタに使用する HTML ファイルと JSP ファイルには、これらの種類のファイルで使用できる任意のコンテンツまたは機能を含めることができます (JSP ファイルでのパーソナライゼーションなど)。
シェルを選択すると、そのシェルの XML が .portal XML ファイルに挿入されます。このファイルは、デスクトップの表示を制御する主要な XML ファイルです (ポートレットの表示には .portlet XML ファイルが使用される)。
ルック アンド フィールはヘッダとフッタの物理的な境界を決定し、CSS スタイルおよびスケルトン ファイル header.jsp または footer.jsp によって生成されるその他のスキン要素を含むことができます。シェルによってヘッダまたはフッタに挿入される HTML ファイルまたは JSP ファイルは、ヘッダとフッタのコンテンツ、スタイル、スタイル オーバーライド、および動作を制御します。
ポータル デスクトップに対して選択したルック アンド フィールとシェルによって、.portal XML ファイルを最終的な HTML ファイルに変換するために必要な基本情報が表示サービスに提供されます。
このトピックでは、単一のポータル コンポーネントの表示ライフサイクルについて、順を追って説明します。その他すべてのポータル コンポーネントにも同じ表示の原則が適用されます。
最終的にポータル デスクトップをブラウザに表示するポータル表示プロセスには、次に示す 3 つの基本段階があります。
1. XML でのポータルの構築 : ポータル開発プロセスでは、WebLogic Workshop で Portal Designer と Portlet Designer を使用して、.portal ファイルと .portlet ファイルを作成します。どちらのファイルも、種類は XML ファイルです。WebLogic Workshop でポータルとポートレットを構築する場合、XML 要素と属性がバックグラウンドで自動的に構築されます。
この前の「ルック アンド フィールによる表示の決定」と「シェルによるヘッダとフッタのコンテンツの決定」のトピックで、XML 構築プロセスの一部として、ルック アンド フィールとシェルの XML ファイルをポータル XML ファイルに追加することで表示について指示する方法を説明しました。
2. ポータル XML 要素と JSP スケルトン ファイルのマッピング : ポータル フレームワークによって、特定の XML 要素が特定の JSP スケルトン ファイルにマッピングされます。スケルトン ファイルがスケルトンと呼ばれる理由は、ポータル コンポーネントの物理的な境界と構造、つまりスケルトンを表示するために使用されるからです。たとえば、ポートレット XML ファイルのポートレット タイトルバーでは、<netuix:titlebar> と呼ばれる要素が使用されます。ポータル フレームワークは、titlebar.jsp スケルトン ファイルを使用してポートレットのタイトルバーを表示することを認識します。
3. JSP スケルトン ファイルと skin.properties の HTML としての表示 : 各スケルトン JSP ファイルでは、独自の処理を実行し、ポータル コンポーネント用の適切な HTML を生成します。スケルトン JSP ファイルで実行する処理には、WebLogic Workshop プロパティ エディタで設定した (それによってポータル XML ファイルに自動的に追加された) プロパティ値の取得などがあります。選択したルック アンド フィールの skin.properties ファイルおよび skin_custom.properties ファイル (省略可能) が、HTML の <head> 領域の画像パス エントリ、CSS ファイル エントリ、およびスクリプト ファイル エントリに変換されます。
このトピックでは、単一のポータル コンポーネントの表示ライフサイクルを例に、3 つの段階について詳しく説明します。
表示プロセスの詳細を説明する前に、開発環境 (WebLogic Workshop) でのポータルの表示と、管理者およびエンド ユーザの環境 (WebLogic Administration Portal およびブラウザ) でのポータルの表示の違いを理解することが重要です。この 2 つの環境では、3 段階の表示プロセスは多少異なります。次の節で、それぞれの環境の基本原則について説明します。
WebLogic Workshop で作成する .portal ファイルはテンプレートです。このテンプレートの中に、ブック、ページ、およびポートレットを作成し、それぞれのデフォルト値を定義します。この .portal ファイルをブラウザで表示するときは、ポータルは「シングル ファイル モード」で表示されます。これは、ポータルをデータベースからではなく、ファイル システムから表示していることを意味します。つまり、.portal ファイルの XML が解析され、表示されたポータルがブラウザに返されるしくみです。.portal ファイルの作成と使用は開発を目的としていますが、プロダクション環境でも .portal ファイルにアクセスできます。データベースを使用しないため、ユーザ カスタマイズや資格などの機能は利用できません。
作成した .portal ファイルを使用して、プロダクション環境用のデスクトップを作成することができます。
デスクトップは、訪問者がアクセスできるポータルのビューです。ポータルを複数のデスクトップで構成して、デスクトップのコンテナとして使用することができます。デスクトップには、ユーザ専用のポータル ビューを作成するために必要なポートレット、コンテンツ、シェル、レイアウト、およびルック アンド フィール要素をすべて配置できます。
WebLogic Administration Portal で .portal ファイルに基づいてデスクトップを作成する場合は、.portal とそのリソースをデータベースに格納することができます。.portal ファイルに記述されているルック アンド フィールなどの設定は、デスクトップのデフォルトとなります。.portal テンプレートから新しいデスクトップを作成した場合、そのデスクトップはテンプレートから切り離され、.portal ファイルへの変更はデスクトップに反映されなくなります (デスクトップへの変更も .portal ファイルに反映されない)。たとえば、WebLogic Administration Portal でデスクトップのルック アンド フィールを変更した場合は、その変更はデスクトップのみに反映され、元の .portal ファイルには反映されません。ブラウザでデスクトップを表示した場合、そのデスクトップは (データベースから) 「ストリーミング モード」で表示されます。この場合はデータベースが使用されるため、デスクトップのカスタマイズを保存し、委託管理と資格をポータル リソースに設定することができます。
次の表では、ストリーム ポータルとファイルベース ポータルの違いを詳細に比較します。
注意 : ファイル ベースのポータルに資格を設定することはできませんが、その .portal ファイルに基づいてデスクトップを作成し、それらのデスクトップ アーティファクトに資格を設定すると、.portal ファイルは実行時にそれらも取り込みます。.portal ファイルはデータベースに格納されませんが、実行時の資格チェックは行われます。これらの資格は LDAP に格納されます。実行時の資格チェックを行わない場合は、WEB-INF/netuix-config.xml ファイルでオフに設定できます。
この節では、ブックの表示ライフサイクルについて説明します。この説明は、ページやポートレットなどの他のポータル コンポーネントの表示ライフサイクルを理解するために役立ちます。
この節では、.portal XML ファイルへの入力とコンフィグレーションの手順について説明します。
デスクトップのルック アンド フィールを選択すると、選択したルック アンド フィール ファイルによって、すべてのデスクトップ コンポーネントの表示に使用するスキンとスケルトンが決定されます。次の例では、「avitek」ルック アンド フィールを選択しています。このルック アンド フィールは「avitek」スキンと「default」スケルトンを使用します。このルック アンド フィールの XML が、.portal XML ファイルに追加されます。
スキンとスケルトンは、表示プロセスの後半で、デスクトップをブラウザに表示するときにその役割を果たします。その前に、表示プロセスについて説明するブックをポータルに追加します。
この節では、.portal ファイルでデスクトップにブックを追加し、コンフィグレーションします。ブックは、ポータル管理者が WebLogic Administration Portal で追加することもできます。その場合、ブックはデータベースに直接追加されます。
次の図は、デスクトップにブック コントロールをドラッグするところを示しています。
デスクトップにブックを追加すると、ブック タイトルが [New Book] から [My Book] に変わり、ナビゲーション スタイルが [Multi Level Menu] に設定されます。次の図を参照してください。
ナビゲーションは、ブックのサブブックとページへのアクセス方法を制御します。単一レベル メニューでは、サブブックおよびページへのテキスト リンクとタブが表示されます。複数レベル メニューでは、サブブックとページにアクセスするためのドロップダウン メニューが表示されます。ドロップダウン メニューによるナビゲーションを有効にするには、ブック内のページにブックを追加するのではなく、ブック内にブックを追加する必要があります。次の例では、ドロップダウン メニューを表示する複数レベル メニューを設定するには、新しいブック コントロールを [Main Page Book] の [Page 1] の右側にドラッグする必要があります。次の図を参照してください。
My Book のナビゲーション スタイルが設定されると、.portal ファイル内のブックの XML は次のようになります。WebLogic Administration Portal でブックを追加した場合、XML はデータベースに追加されます。この XML がブックの表示で基礎として使用されます。
<netuix:book defaultPage="newPage.1" definitionLabel="my_book_3"
markupName="book" markupType="Book" title="My Book">
<netuix:multiLevelMenu
description="This menu can navigate across may nested books."
markupName="multiLevelMenu" markupType="Menu" title="Multi Level Menu"/>
<!-- この例では、ネストされたページのコンテンツは削除されています -->
</netuix:book>
ブラウザにデスクトップを表示するときは、XML 要素がポータル フレームワークに読み込まれ、スケルトン パスを使用してデスクトップの XML 要素がスケルトン JSP にマッピングされます。以下の例は、ブックの XML のどの要素がスケルトン JSP にマッピングされ、どのスケルトン JSP を使用して要素が表示されているかを示しています。
|
表示の処理が JSP に移り、JSP は、HTML への変換のために必要なタスクを実行します。この例で使用される book.jsp、multilevelmenu.jsp、および submenu.jsp を次に示します。JSP で何を実行しているかを説明するために、コメントを追加しています。
book.jsp は、ブックのメニューおよびブックの子ブックとページを格納するための上位コンテナとして機能します。JSP コード内のコメントは太字で強調されています。
<%@ page import="com.bea.netuix.servlets.controls.page.BookPresentationContext,
com.bea.netuix.servlets.controls.page.MenuPresentationContext"
%>
<%@ page session="false"%>
<%@ taglib uri="render.tld" prefix="render" %>
<render:beginRender>
<%-- <render:beginRender> タグの内側のコンテンツが最初に処理され、
最終的にそのタグの内側にあるものがすべて表示されます。ほとんどの場合、
スケルトンによって、CSS クラスなどの特定の属性を持つ
HTML の <div> 開始タグが生成されます。
次のブロックは、ブックがデスクトップ階層のどの位置に配置されるかを決定します
(トップレベル ブック、またはネストされたブック)。また、
使用する CSS クラスの基本名 (bea-portal-book) も設定し、
基本クラスに異なる末尾を追加して、
ブックのコンテキストごとに異なる CSS クラスを適用します。このブロックでは処理のみが行われ、
HTML の表示は行われません。
--%>
<%
BookPresentationContext book =
BookPresentationContext.getBookPresentationContext(request);
MenuPresentationContext menu = (MenuPresentationContext)
book.getFirstChild("page:menu");
String bookClass = "bea-portal-book";
String useBookClass = bookClass;
if (book.isDesktopBook())
{
bookClass += "-primary";
useBookClass = bookClass;
}
else if (book.isLikePage())
{
useBookClass += "-invisible";
}
String bookContentClass = bookClass + "-content";
%>
<%-- 次のブロックから実際の HTML 表示が始まります。
コメントである「Begin Book」の後ろに、HTML の <div> 開始タグが
続きます。<div> タグの閉じ括弧の前に使用されている JSP タグに
注意してください。これらのタグは div タグにスタイル属性を設定します。
各メソッドは、WebLogic Workshop プロパティ エディタでブックに対して入力した
プレゼンテーション プロパティ オーバーライド値を取得します。
「class」属性のデフォルト値は useBookClass で、
前の処理で「bea-portal-book」が設定されています (コンテキストを取得して
ブックがトップレベルのブックであることがわかった場合、
useBookClass の値は「bea-portal-book-primary」になります)。
オーバーライドがない場合、useBookClass 変数は次の HTML を生成します。
これは、ブックがページのように機能しているためです。
<div
class="bea-portal-book-invisible"
>
スタイル シート クラスはスキンによって提供され、クラスが格納された CSS ファイルは、
スキンの skin.properties ファイル内で参照され、
HTML の <head> 領域に追加されます。
--%>
<%-- Begin Book --%>
<div
<render:writeAttribute name="id" value="<%= book.getPresentationId() %>"/>
<render:writeAttribute name="class" value="<%=
book.getPresentationClass()%>" defaultValue="<%= useBookClass %>"/>
<render:writeAttribute name="style" value="<%= book.getPresentationStyle() %>"/>
>
<%-- 次の JSP タグは、ナビゲーション メニューに表示するページとブックの名前を取得し、
ポータルの XML ファイル (この場合は netuix:multiLevelMenu) で使用されている
ナビゲーション要素に基づいて、
対応するメニュー JSP (multilevelmenu.jsp) を使用して
HTML のこの位置にメニューを表示します。
--%>
<render:renderChild presentationContext="<%= menu %>"/>
<%-- 次のブロックでは、ブックのコンテンツ領域である子ブックとページに対して
HTML の <div> コンテナを用意します。ここでも、JSP タグを使用して、
スタイル シートの「class」属性を設定します。
--%>
<%-- Begin Book Content --%>
<div
<render:writeAttribute name="class" value="<%= book.getContentPresentationClass()%>" defaultValue="<%= bookContentClass %>"/>
<render:writeAttribute name="style" value="<%= book.getContentPresentationStyle() %>"/>
>
</render:beginRender>
<%-- 終了タグ </render:beginRender> は、ポータル フレーワークに対して
ブックの表示を停止するように指示します。ブックの子およびその子が表示された後、
ポータル フレームワークは、次の <render:endRender> タグを使用して
ブックの親 HTML タグを閉じます。
--%>
<render:endRender>
</div>
<%-- End Book Content --%>
</div>
<%-- End Book --%>
</render:endRender>
次に、multilevelmenu.jsp について説明します。この JSP は、ブックの子ブックとページに移動するナビゲーション メニューを表示するために、ブックによって使用されます。
multilevelmenu.jsp は、ブック コンテナの内側に表示され、ブックの複数レベル メニューの境界を示します。この JSP は、submenu.jsp を使用してメニュー リンクの実際の表示も行ないます。コメントは太字で示されています。
<%@ page import="com.bea.netuix.servlets.controls.window.WindowPresentationContext,
com.bea.netuix.servlets.controls.page.BookPresentationContext,
com.bea.netuix.servlets.controls.page.MenuPresentationContext,
java.util.List,
java.util.Iterator,
com.bea.netuix.servlets.controls.page.PagePresentationContext,
com.bea.netuix.servlets.controls.window.WindowCapabilities" %>
<%@ page session="false"%>
<%@ taglib uri="render.tld" prefix="render" %>
<%-- 次のブロックは、ブックがデスクトップ階層のどの位置に配置されるかを決定します
(トップレベル ブック、またはネストされたブック)。また、
使用する CSS クラスの基本名 (bea-portal-book) も設定し、
基本クラスに異なる末尾を追加することで、
異なるメニュー スタイル クラスを定義します。このブロックでは処理のみが行われ、
HTML の表示は行われません。
--%>
<%
BookPresentationContext book =
BookPresentationContext.getBookPresentationContext(request);
MenuPresentationContext menu =
MenuPresentationContext.getMenuPresentationContext(request);
String bookClass = "bea-portal-book";
if (book.isDesktopBook())
{
bookClass += "-primary";
}
final String menuClass = bookClass + "-menu";
final String menuContainerClass = menuClass + "-container";
final String menuItemClass = menuClass + "-item";
final String menuItemActiveClass = menuItemClass + "-active";
final String menuItemLinkClass = menuItemClass + "-link";
final String menuHookClass = menuClass + "-hook";
final String menuButtonsClass = menuItemClass + "-buttons";
List menuChildren = menu.getChildren();
%>
<render:beginRender>
<%-- <render:beginRender> タグの内側のコンテンツが最初に処理され、
最終的に、特定の属性やテーブルが設定された HTML の <div> 開始タグなど、
<render:beginRender> タグの内側にあるものがすべて表示されます。
次のブロックでは、テーブル セルを作成し、前のブロックで定義されたメンバーに基づいて
<td> タグに CSS スタイルを設定します。
--%>
<%-- Begin Multi Level Menu --%>
<div class="bea-portal-ie-table-buffer-div">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="<%= menuContainerClass %>" align="left" nowrap="nowrap">
<%-- 次のブロックでは、テーブル セル内にメニューを構築します。最初に、
順序付けられていないリスト <ul> をセルに追加し、スタイル クラスを設定します。次に、IF 文で
ブックが VIEW モードかどうかをチェックします。true の場合は、
メニューが使用する属性として CSS スタイルが要求に追加されます。
属性が要求に追加された後、スケルトンの submenu.jsp が挿入されます。
この JSP は、次の処理を行います。
* 要求から CSS スタイルを取得する。
* ブックの子ブックとページを取得する。
* 子のリスト項目 <li> を作成し、それらへのリンクを作成する。
ブロックの末尾にある menuHookClass は、表示されるメニューを挿入するために、
スキンの menu.js ファイルで使用されます。生成された <ul> は、
menu.js によって読み込まれ、書き換えられたメニュー構造の記述です。
* CSS スタイルを要求に追加し、submenu.jsp を取り込んで
ネストされたブックのメニューを処理する。
メニューを構築した後、CSS スタイルは要求から削除されます。
--%>
<ul
<render:writeAttribute name="id" value="<%=
menu.getPresentationId() %>"/>
<render:writeAttribute name="class" value="<%=
menu.getPresentationClass() %>" defaultValue="<%=
menuClass %>"/>
<render:writeAttribute name="style" value="<%=
menu.getPresentationStyle() %>"/>
><%
if (book.getWindowMode().equals(WindowCapabilities.VIEW))
{
request.setAttribute(BookPresentationContext.class.getName() + ".root-flag", Boolean.TRUE);
request.setAttribute(BookPresentationContext.class.getName() + ".menu-item", book);
request.setAttribute(BookPresentationContext.class.getName() + ".menu-class", menuClass);
request.setAttribute(BookPresentationContext.class.getName() + ".menu-item-class", menuItemClass);
request.setAttribute(BookPresentationContext.class.getName() + ".menu-item-active-class", menuItemActiveClass);
request.setAttribute(BookPresentationContext.class.getName() + ".menu-item-link-class", menuItemLinkClass);
%><jsp:include page="submenu.jsp"/><%
request.removeAttribute(BookPresentationContext.class.getName() + ".root-flag");
request.removeAttribute(BookPresentationContext.class.getName() + ".menu-item");
request.removeAttribute(BookPresentationContext.class.getName() + ".menu-class");
request.removeAttribute(BookPresentationContext.class.getName() + ".menu-item-class");
request.removeAttribute(BookPresentationContext.class.getName() + ".menu-item-active-class");
request.removeAttribute(BookPresentationContext.class.getName() + ".menu-item-link-class");
}
%></ul>
<div class="<%= menuHookClass %>"></div>
</td>
<%-- 次のブロックでは、メニュー テーブル セルの隣にテーブル セルを追加します
(メニューが存在する場合)。すべてのメニューの子が挿入された後、
<render:endRender> のコンテンツが HTML に挿入され、
メニュー テーブルが閉じます。
--%>
<%
if (menuChildren != null && menuChildren.size() > 0)
{
%>
<td class="<%= menuButtonsClass %>" align="right" nowrap="nowrap">
<%
}
%>
</render:beginRender>
<render:endRender>
<%
if (menuChildren != null && menuChildren.size() > 0)
{
%>
</td>
<%
}
%>
</tr>
</table>
</div>
<%-- End Multi Level Menu --%>
</render:endRender>
submenu.jsp は multilevelmenu.jsp の内部に挿入されます。この JSP は、ブックの子ブックとページを取得し、取得した子へのナビゲーション リンクを構築します。コメントは太字で示されています。
<%@ page import="java.util.Iterator,
java.util.List,
com.bea.netuix.servlets.controls.page.BookPresentationContext,
com.bea.portlet.PageURL,
com.bea.netuix.servlets.controls.page.PagePresentationContext"%>
<%@ page session="false"%>
<%-- 次のブロックでは、multilevelmenu.jsp によって要求に追加された
CSS スタイルを取得します。
--%>
<%
Boolean isRoot
= (Boolean) request.getAttribute(BookPresentationContext.class.getName() + ".root-flag");
BookPresentationContext bookCtx
= (BookPresentationContext)
request.getAttribute(BookPresentationContext.class.getName() +
".menu-item");
String menuClass
= (String) request.getAttribute(BookPresentationContext.class.getName() +
".menu-class");
String menuItemClass
= (String) request.getAttribute(BookPresentationContext.class.getName() +
".menu-item-class");
String menuItemActiveClass
= (String) request.getAttribute(BookPresentationContext.class.getName() +
".menu-item-active-class");
String menuItemLinkClass
= (String) request.getAttribute(BookPresentationContext.class.getName() +
".menu-item-link-class");
%>
<%-- 次のブロックでは、ブックとその子が表示されているかどうかを
チェックします。true の場合は、子のラベルを取得して反復処理し、
ハイパーリンクが設定されたリスト項目 <li> として、
multilevelmenu.jsp によって挿入される順序付けられていないリスト <ul> の内側に挿入します。
ブロックの最後で、ネストされた <ul> を使用してサブメニューをネストしていることに
注意してください。
--%>
<%
if (!bookCtx.isHidden() && bookCtx.isVisible())
{
if (bookCtx instanceof BookPresentationContext)
{
List bookChildren = bookCtx.getPagePresentationContexts();
Iterator it = bookChildren.iterator();
while (it.hasNext())
{
PagePresentationContext childPageCtx = (PagePresentationContext)
it.next();
if (!childPageCtx.isHidden() && childPageCtx.isVisible())
{
%><li class="<%= isRoot.booleanValue() &&
childPageCtx.isActive() ? menuItemActiveClass : menuItemClass
%>"><%
%><a class="<%= menuItemLinkClass %>" href="<%= PageURL.createPageURL(request, response, childPageCtx.getDefinitionLabel()).toString() %>"><%= childPageCtx.getTitle() %></a><%
if (childPageCtx instanceof BookPresentationContext)
{
%><ul class="<%= menuClass %>"><%
request.setAttribute(BookPresentationContext.class.getName()
+ ".root-flag", Boolean.FALSE);
request.setAttribute(BookPresentationContext.class.getName()
+ ".menu-item", childPageCtx);
%><jsp:include page="submenu.jsp"/><%
request.removeAttribute(BookPresentationContext.class.getName() + ".root-flag");
request.removeAttribute(BookPresentationContext.class.getName() + ".menu-item");
%></ul><%
}
%></li><%
}
}
}
}
%>
デスクトップのメニューでは、JavaScript 関数を使用して、ドロップダウン メニューやロールオーバなどの機能を設定します。使用する JavaScript 関数は、スケルトンの body.jsp から呼び出されます。この JSP には次のエントリが格納されています。
<render:writeAttribute name="onload" value="<%= body.getOnloadScript() %>"/>
オンロード値は、スキンの skin.properties ファイルに含まれる次のプロパティから取得されます。
document.body.onload: initSkin()
body.jsp によって記述された HTML を次に示します。
<body
class="bea-portal-body"
onload="initSkin();"
>
JavaScript の initSkin() 関数は、他の JavaScript ファイルに含まれるメニュー表示関数を呼び出す基本関数です。initSkin() 関数は、skin.js ファイルにあります。その他のメニュー関数は、menu.js ファイルと menufx.js ファイルにあります。これらすべての JavaScript ファイルは、スキンの skin.properties ファイルに指定されていて、表示時に HTML の <head> 領域に自動的に追加され、ファイルに含まれる関数が認識されます。
次の節では、最後のプロセスである、スケルトン JSP および skin.properties の HTML への変換について説明します。
前の節では、複数レベル メニューが設定されたブックの HTML への変換に使用するスケルトン JSP について説明しました。その説明では、スケルトン JSP によって生成される HTML の一部を簡単に解説しました。
この節では、ブックに対して生成される最終的な HTML を示し、その HTML が何から挿入されたかを説明します。また、使用されている CSS スタイルの一部について、定義されている場所を示します。
次の表は、デスクトップの HTML 全体を示したものではありません。ルック アンド フィールとサンプル ブックに関連するセクションだけを示しています。
skin.properties と skin_custom.properties - HTML の <head> 領域のスケルトン、スキン、画像、スタイル シート、および JavaScript ファイルへのパスは、スキンの skin.properties ファイルと skin_custom.properties ファイルから挿入されます。元の skin.properties のエントリを確認するには、「ルック アンド フィールによる表示の決定」の「skin.properties ファイル」を参照してください。<head> タグは、シェルに使用する head.jsp ファイルによって挿入されます。<title> は、.portal ファイルのデスクトップ タイトルから挿入されます。
最初の 3 つの <meta> タグは、テストとデバッグ用です。enable.meta.info プロパティを false に設定すると、skin.properties からこれらのタグを削除できます。
<head>
<title>New Portal Desktop</title>
<meta name="bea-portal-meta-skeleton" content="/framework/skeletons/default"/>
<meta name="bea-portal-meta-skin" content="/framework/skins/avitek"/>
<meta name="bea-portal-meta-skin-images" content="/framework/skins/avitek/images"/>
<link href="/sampleportal/framework/skins/avitek/css/body.css" rel="stylesheet"/>
<link href="/sampleportal/framework/skins/avitek/css/button.css" rel="stylesheet"/>
<link href="/sampleportal/framework/skins/avitek/css/window.css" rel="stylesheet"/>
<link href="/sampleportal/framework/skins/avitek/css/plain/window.css" rel="stylesheet"/>
<link href="/sampleportal/framework/skins/avitek/css/portlet.css" rel="stylesheet"/>
<link href="/sampleportal/framework/skins/avitek/css/book.css" rel="stylesheet"/>
<link href="/sampleportal/framework/skins/avitek/css/fix.css" rel="stylesheet"/>
<link href="/sampleportal/framework/skins/avitek/css/layout.css" rel="stylesheet"/>
<link href="/sampleportal/framework/skins/avitek/css/form.css" rel="stylesheet"/>
<script type="text/javascript" src="/sampleportal/framework/skins/avitek/js/menu.js"></script>
<script type="text/javascript" src="/sampleportal/framework/skins/avitek/js/util.js"></script>
<script type="text/javascript" src="/sampleportal/framework/skins/avitek/js/delete.js"></script>
<script type="text/javascript" src="/sampleportal/framework/skins/avitek/js/float.js"></script>
<script type="text/javascript" src="/sampleportal/framework/skins/avitek/js/menufx.js"></script>
<script type="text/javascript" src="/sampleportal/framework/skins/avitek/js/skin.js"></script>
</head>
次のセクションは、各スケルトン JSP によって生成される HTML を示しています。
book.jsp
<div
class="bea-portal-book-invisible"
>
multilevelmenu.jsp
<div class="bea-portal-ie-table-buffer-div">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="bea-portal-book-menu-container" align="left"
nowrap="nowrap">
<ul
class="bea-portal-book-menu"
>
submenu.jsp
<li class="bea-portal-book-menu-item-active"><a class="bea-portal-book-menu-item-link"
href="http://localhost:7001/sampleportal/my.portal?_nfpb=true&_pageLabel=my_page_6">New Page</a></li>
<div
class="bea-portal-book-content"
>
<%-- ブックのコンテンツ (サブブックおよびページ) がここに挿入されます。-->
</div>
</div> </ul>
<div class="bea-portal-book-menu-hook"></div>
</td>
</tr>
</table>
</div>
この例のデスクトップを表示すると、ブラウザの表示は次のようになります。
この図でブックのコンテンツとして表示されている部分は、線で囲んだ部分だけです。このブックは 1 つのページだけで構成されているので、ブックのメニュー項目は 1 つしかありません。[Page 1] タブと [My Book] タブは、親メイン ページ ブックによって表示されているメニュー項目です。そのため、前の HTML ブロックには「My Book」がありません。ブックは、子ブックとページのメニューだけを表示します。
[New Page] にポートレットが含まれている場合は、ポートレットがブラウザに表示されます。ただし、ページとポートレットの表示は、複数の別のスケルトン JSP によって処理されます。1 つの JSP はページ コンテンツのコンテナを指定し、別の JSP はページのレイアウト (ポートレットとサブブックを含むテーブル セル) を表示します。その他に、ポートレットの表示を処理する 2、3 の JSP があります。
この前の表示された HTML コードの例に示したように、スケルトン JSP は多くの CSS スタイルを挿入します。たとえば、multilevelmenu.jsp は、次のエントリを挿入します。
<td class="bea-portal-book-menu-container" ...>
multilevelmenu.jsp によって挿入されたスタイル クラスは、スキンの menu.js ファイルによって書き換えられます。
また、スケルトン JSP によって挿入されるスタイル クラスの一部は、BEA 提供の CSS ファイルには定義されていません。そのようなスタイル クラスをカスタム CSS ファイルに追加して、ポータル デスクトップのスタイルを制御できます。
どのスタイルを変更するかを決めるには、「ルック アンド フィール エディタ」を参照してください。
ルック アンド フィールを変更すると、ルック アンド フィール ファイルによって別のスキンとスケルトンが参照されることになり、表示はそのスキンとスケルトンを使用して行われます。スキンとスケルトンが変わった場合、CSS ファイルとスクリプト コードが完全に変更されることがあります。
ポータル表示プロセスには 3 つの基本段階があります。ポータルを XML で構築する、ポータル XML コンポーネントをスケルトン JSP にマッピングする、スケルトン JSP によってポータル デスクトップを HTML で表示する、という 3 段階です。後半の 2 つの段階はポータル フレームワークによって自動的に処理されます。
ポータル デスクトップを開発モードで表示した場合と、管理者モードまたはエンド ユーザ モードで表示した場合では、表示が異なります。開発モードでは、.portal ファイルをブラウザで表示すると、「シングル ファイル モード」で表示されます。これは、デスクトップをファイル システムから表示していることを意味します。管理者モードまたはエンド ユーザ モードでは、ポータル デスクトップは「ストリーミング モード」で表示されます。これは、デスクトップ コンポーネントをデータベースから表示していることを意味します。WebLogic Administration Portal で、.portal ファイルをデスクトップのテンプレートとして使ってポータル デスクトップを作成すると、ポータル コンポーネントはデータベースに追加され、元の .portal から切り離されます。
ルック アンド フィール エディタを使用すると、ポータルのテキスト要素で使用されるテキスト スタイルを対話形式で変更できます。技術的には、このエディタは、ポータルの skin.properties ファイルで参照されているカスケーディング スタイル シート (CSS) ファイルを変更します。たとえば、ルック アンド フィール エディタを使用して、ポータルの見出しのサイズ、リスト要素の色、テーブル セルの周囲のパディングなどを変更できます。
また、ルック アンド フィール エディタを使用して、ポータルのルック アンド フィール ファイル (.laf ファイル) のプロパティ (参照するスキン ファイルやスケルトン ファイルなど) を変更できます。
このトピックでは、ルック アンド フィール エディタの機能について、オンライン ヘルプの該当するトピックよりも詳細に説明します。このトピックの目的は、このエディタの用途と使用方法について、他のどのドキュメントよりも詳しい情報を提供することです。このトピックは、以下の節で構成されています。
注意 : ルック アンド フィール エディタを有効に使用するには、CSS の基本を理解している必要があります。このドキュメントでは、継承などの CSS の主要な機能についての説明は最小限です。CSS を使用したことがない場合は、この主題を扱っている書籍に目を通すことをお勧めします。CSS だけに絞って解説している書籍や Web サイトは多数あります。
ルック アンド フィール エディタを使用すると、ポータルのルック アンド フィールを簡単に変更でき、結果を直ちに確認できます。ポータルで使用されるテキスト スタイルを対話形式で変更できます。ポータルのテキストを選択し、フォント サイズや色、パディングなどのテキストの特性を変更できます。変更を行うと、エディタの表示領域に変更が直ちに反映されます。
ポータルのスキンは、ポータルの全体的なルック アンド フィールを定義するときに有効です。ポータルの skin.properties ファイルは、スキンで使用する 1 つまたは複数の CSS ファイルを指定します。ポータルの HTML テキストは、指定された CSS ファイルを参照し、CSS ファイルに含まれているスタイル定義を使用します。特定のテキスト スタイルのフォント サイズを変更すると、ルック アンド フィール エディタによって、CSS ファイル内のスタイルの定義が変更されます。変更は、エディタの表示領域に表示される HTML に直ちに反映されます。
次の図は、ルック アンド フィール エディタの各部分を示しています。このトピックでは、これらの各部分について詳しく説明します。
図 16 ルック アンド フィール エディタのコンポーネント
[アプリケーション] パネルには、ポータル プロジェクトのファイル構造が表示されます。このパネルでは、編集するポータルのルック アンド フィール ファイルを探して選択します。
ルック アンド フィール (.laf) ファイルには、ポータルのルック アンド フィールを定義するスキンとスケルトンへの参照が含まれます。ルック アンド フィール エディタを使用するには、[アプリケーション] パネルで、編集するポータルの .laf ファイルを見つける必要があります。ファイルを見つけたら、ファイル名をダブルクリックしてルック アンド フィールエディタを開きます。ポータルの .laf ファイルは、ポータルの lookandfeel フォルダにあります。たとえば、次の図では、[アプリケーション] ウィンドウで avitek.laf ファイルを選択しています。
.laf ファイルの詳細については、「ルック アンド フィール ファイル」を参照してください。
[スタイル階層] パネルには、選択したスタイルの CSS カスケードが表示されます。カスケードは CSS スタイルの階層であり、HTML ドキュメント構造によって定義されます。カスケードを表示すると、継承されたスタイル プロパティを見つけて適切に処理するために役立ちます。次の図では、portlet-section-header を選択しています。portlet-section-header スタイルは、階層の bea-portal-window-content の下にあることに注意してください。
これは、portal-window-content からだけでなく、階層の上位にあるすべてのスタイル クラスから portlet-section-header にプロパティが継承される可能性があることを意味します。継承の詳細については、「CSS 継承について」を参照してください。[スタイル階層] パネルでスタイルを選択すると、そのスタイル定義と継承されたスタイル プロパティが [スタイルの説明] パネルに表示されます。次の節を参照してください。
[スタイルの説明] パネルでは、選択したスタイルのプロパティと継承されたスタイル プロパティを一目で確認できます。次の図に示す [スタイル情報] の部分は、スタイルが定義されている CSS ファイルから直接取得されます。同様に次の図に示す [継承されたスタイル] リストは、ルック アンド フィール エディタで現在開いている HTML テキストのドキュメント構造から直接構築されます。[継承されたスタイル] リストは、ドキュメント階層の上位にあるスタイルから継承されたスタイル プロパティと各プロパティの値を示します。たとえば、portlet-section-header は、bea-portal-body スタイルから font-family プロパティを継承していることがわかります。
[継承されたスタイル] リストの値を理解するには、HTML と CSS の基本知識があると役に立ちます。
ヒント : この節では、CSS 継承についてごく簡単に説明します。CSS に関する書籍と Web サイトは多数あります。この重要な主題の詳細については、それらを参照してください。
HTML ドキュメントは階層状に構成されています。これは、HTML ドキュメントの各要素には、1 つまたは複数の子要素、1 つの親要素、および複数の祖先要素が存在する可能性があることを意味します。CSS の中心機能は、HTML ドキュメント階層の下位方向に向かってスタイルが「継承」されることです。たとえば、次のツリー図は、簡単な HTML ドキュメント階層を表しています。
このドキュメントのすべてのテキストの色を青にする場合は、body タグに青を定義します。CSS 継承によって、body より下位のすべての要素 (具体的には li と h1) も青になります。一方、リスト要素以外のすべて要素を青にするには、ul タグに別の色、たとえば赤を定義します。これで、すべての li 要素は、親である ul から赤という色を継承します。同時に、h1 タグは青になります (h1 タグは body から色を継承します)。
ルック アンド フィール エディタは、選択したスタイルに継承されるすべてのスタイルを表示します。したがって、スタイルのフォント サイズを変更する場合、そのスタイルにフォント サイズが定義されていないときは、フォント サイズがどのスタイルから継承されているかを一目で確認できます。その後、次の節で説明するように、簡単にプロパティを変更できます。
ヒント : この便利な機能がないと、特定のスタイルがどのスタイルを継承しているかを判断するのは困難です。一般的には、階層の CSS ファイルを開いて内容を確認し、特定のスタイル プロパティがどこで定義またはオーバーライドされているかを調べる必要があります。
前の節で説明したように、変更するプロパティが、選択したテキストに関連付けられた CSS スタイル クラスに定義されていない場合があります。たとえば、ルック アンド フィール エディタで見出しを選択した場合、フォント サイズがその見出しのスタイルのプロパティではないことがあります。この場合、変更するプロパティは継承されたプロパティの可能性があります。
ルック アンド フィールエディタでは、特定のスタイルの継承されたプロパティを編集し、編集できます。たとえば、テキストのフォント サイズを変更するとします。編集するスタイルを選択 (たとえば、表示領域でテキストをクリック) した後、font-size はそのテキストの CSS スタイルのプロパティではないことがわかりました。[継承されたスタイル] リストを見ると、font-size は、カスケードの上位にあるスタイルに定義されていることがわかりました。
この時点で、現在定義されている場所 (カスケードの上位の場所) の font-size プロパティを編集するか、変更するテキストのスタイルにこのプロパティを直接追加するかを決める必要があります。カスケードの上位にあるプロパティを変更した場合、このプロパティを継承している他のテキストのプロパティが間違って変更される可能性があります。状況に応じて、どちらにするかを決定します。選択したスタイルで直接変更した場合、継承されたスタイルはオーバーライドされ、そのスタイルで新しいプロパティ値が使用されます (再びオーバーライドされない限り、階層の下位のスタイルでも同じ値が使用されます)。
ヒント : 継承されたスタイルにプロパティを追加するか、既存のプロパティを変更するには、[継承されたスタイル] リストのスタイル名をダブルクリックします。次に、CSS スタイル ウィザードを使用して、変更を行います。
表示領域には、編集対象の CSS スタイルを使用する HTML が表示されます。ルック アンド フィール エディタを起動すると、デフォルトの HTML ページが表示されます。このページは WebLogic Workshop にあらかじめ用意されており、テキスト要素の代表的なサンプルが含まれています。
URL またはパスを指定するか、HTML を直接入力することで、他の HTML をロードできます。表示する HTML を選択するには、[ポータル｜ルック アンド フィール] を使用します。たとえば、ポータルのテキスト スタイルを編集するには、ポータルをブラウザに表示して URL をコピーし、[ポータル｜ルック アンド フィール｜カスタム URL の表示] を選択してエディタにページをロードします。
注意 : ルック アンド フィール エディタは、ルック アンド フィール (.laf) ファイルを開くことで起動します。表示領域に表示される HTML ファイルは、.laf ファイルのスキンで参照しているのと同じ CSS ファイルを参照している必要があります。デフォルトの HTML ページをエディタにロードした場合、この接続は自動的に確立されます。しかし、ポータルからエディタに HTML をロードした場合は、ポータルがエディタと同じ .laf ファイルを参照していることを確認する必要があります。
[ドキュメント構造] ウィンドウには、ポータルの skin.properties ファイルで参照されているファイルが表示されます。このパネルで、次のプロパティを編集できます。
次の図は、[ドキュメント構造] パネルの一部を示しています。この図では、css/portlet.css ファイルが展開され、その中に定義されているスタイルが表示されています。スタイルをダブルクリックして、プロパティを追加または変更できます。.css ファイル、スタイル名、またはスタイル プロパティをクリックし、プロパティ エディタ パネルで値を編集することもできます。
このパネルを使用して CSS スタイルにアクセスするだけでなく、ポータルに関連付けられたルック アンド フィール (.laf) ファイルにアクセスしてそのプロパティを編集できます。すべてのプロパティを変更できます。新しいスキン ファイルとスケルトン ファイルを選択することもできます。ルック アンド フィール ノード (avitek など) がドキュメント構造の最上部にあることに注意してください。
図 22 [ドキュメント構造] ウィンドウに表示されたルック アンド フィール ファイル
注意 : 新しいスキン ファイルを選択すると、Weblogic Workshop で現在開いているドキュメントが自動的に保存されます。そのため、最後に行った操作を元に戻すことはできません。
[プロパティ エディタ] パネルでは、選択した CSS スタイルまたはルック アンド フィール ファイルの値を対話形式で変更できます。プロパティ エディタにプロパティを表示するには、次のいずれかの操作を行います。
図 23 プロパティ エディタでのスタイル プロパティの表示
注意 : 値を表示して編集するには、プロパティ エディタの左側に表示される + アイコンをクリックして、選択した .css ファイルまたはスタイルを展開する必要があります。プロパティを追加または編集するには、スタイルの右側にある 
アイコンをクリックして、CSS スタイル ウィザードを呼び出すこともできます。
ルック アンド フィール エディタは、ポータルのテキスト要素のルック アンド フィールを定義している CSS ベースのスタイルを探して編集するための便利な方法です。さらに、このエディタを使用して、ポータルに関連付けられたルック アンド フィール ファイルのプロパティを変更できます。
|
|
|
