|
|
この章では、ポータル フレームワークを使用して、Workshop for WebLogic で開発するポータルの外観と動作全体を開発する方法について説明します。ブラウザにポータルを表示できるようになり、目的の結果を得るには基底のフレームワークのどの部分を変更する必要があるかを理解できるようになります。また、ルック アンド フィール エディタについても説明します。ルック アンド フィール エディタを使用すると、ポータルで使用するテキスト スタイルを対話形式で変更できます。
ルック アンド フィール ファイルによって、ポータル ページの要素の配置と動作からポートレット タイトルバーに使用されるカラーに至るまで、ポータル アプリケーションの外観が決まります。
ポータルの表示フレームワークを使用して、開発者はポータル管理者が個々のポータル デスクトップに適用できる新しいルック アンド フィール ファイルを変更および作成できます。訪問者ツールが有効になっている場合、エンド ユーザは別のルック アンド フィールにアクセスして独自ポータル インスタンスの外観を変更することができます。
WebLogic Portal には、Workshop for WebLogic でポータルにユーザ インタフェースを作成する際に使用する堅牢なサンプルとテンプレートが含まれます。
他のポータル リソース (J2EE ライブラリなど) と同様、フレームワークを変更する前に、Web プロジェクトにフレームワーク リソースをコピーする必要があります。 しかし多くの場合、ポータル用にユーザ インタフェースをカスタマイズするには、フレームワーク リソースのセット全体を変更するのではなく、参照用に単一ファイルを変更したり、新しいファイルを作成したりする必用があります。
プロジェクトに変更するリソースのみを残しておくことがベスト プラクティスです。これにより、WebLogic Portal の新しいバージョンに容易にアップグレードできるようになります。アップグレードすると、J2EE ライブリ モジュールからルック アンド フィール ファイルに事前定義されたポータル リソースはすべて上書されます。
表 6-1 に、ルック アンド フィール フレームワークに含まれる主な要素を示します。
ルック アンド フィール ファイル (.laf) は、ポータルのスタイルと動作を決定する .portal XML ファイル全体に挿入される XML ブロックです。ルック アンド フィール ファイルは、特定のスキンとスケルトンを参照します。スキンは、画像セット、JavaScript 関数、および CSS ファイルを提供します。スケルトン ファイルには、ポータル XML コンポーネントを最終的な HTML 出力に変換する JSP が含まれます。
スキンとスケルトンでは、CSS 値および JavaScript アクションの変数を設定できるスキンまたはスケルトン クロモソーム ファイルを利用できます。「ジーンとクロモソームの操作」を参照してください。
ポータル デスクトップの別のルック アンド フィールを選択したときは、場合によってはポータルの表示に使用するスキンとスケルトン (およびその他のサポート ファイル) を変更します。
ポータル デスクトップにルック アンド フィールを割り当てるには、デスクトップ プロパティを定義します。訪問者ツールを有効化して、訪問者が選択に使う別のルック アンド フィールを提供することで、ポータル訪問者にルック アンド フィールを選択させることもできます。
訪問者ツールの詳細については、「訪問者ツールのコンフィグレーション」を参照してください。
| 注意 : | GroupSpace アプリケーションでのデフォルトのルック アンド フィールの変更方法、または新しいルック アンド フィールの作成方法については、『GroupSpace ガイド』を参照してください。 |
Workshop for WebLogic でデスクトップに既存のルック アンド フィール (*.laf) を割り当てます。こうすると、ポータルのルック アンド フィールの開発やカスタマイズをする際に、変更を表示できるので便利です。
Workshop for WebLogic を使用してデスクトップにルック アンド フィールを割り当てるには、以下の手順に従います。
.portal ファイルをダブルクリックしてエディタで開きます。
WebLogic Portal には、アプリケーションで使用できるデフォルトのルック アンド フィール ファイルが用意されています。多くの場合、独自のルック アンド フィールを開発するよりも、これらの既存のルック アンド フィールのいずれかをニーズに合わせてカスタマイズする方が簡単です。たとえば、関連付けられた CSS ファイルを編集したり、ジーンとクロモソームを使用してカラー変数や JavaScript 変数を作成したりすることで、ルック アンド フィールをカスタマイズできます。ジーンの詳細については、「ジーンとクロモソームの操作」を参照してください。
| ヒント : | カスタマイズするルック アンド フィールを選択する場合、「bighorn」という名前で始まるスキンかスケルトンのみを使用してください。その他のテンプレートは、WebLogic Portal の従来のバージョンで使用できますが、ジーンやクロモソームなどの新しいルック アンド フィール機能はサポートしていません。 |
既存の定義済みのルック アンド フィールを使用すると、ポータルを適切に表示するために必要なルック アンド フィール ファイルを常に確保できます。表 6-2 に、開始点として使用できるルック アンド フィールを示します。
| 注意 : | bighorn-xhtml スケルトンでは、ポータル コンテンツの XHTML 準拠は強制されません。このスケルトンを使用する、ポータルの非準拠ポートレットは、表示エラーの原因となります。たとえば、GroupSpace ポータル アプリケーションは XHTML 準拠ではありません。 |
この節では、既存のルック アンド フィールをカスタマイズする方法について説明します。ここで推奨する方法のいずれかを単独で使用することも、複数の方法を組み合わせて使用することもできます。
新しいルック アンド フィールを作成する場合は、「新しいルック アンド フィールの作成」を参照してください。
定義済みのスキン ファイルとスケルトン ファイルのさまざまな組み合わせに基づいたカスタム ルック アンド フィール ファイルを作成できます。たとえば、XHTML スケルトンが必要であり、スキン ファイルのジーンも使用したい場合、これらのファイルを組み合わせて新しいルック アンド フィール ファイルを作成できます。
定義済みのスキン ファイルとスケルトン ファイルに基づいた新しいルック アンド フィール ファイルを作成するには、以下の手順に従います。
skin.xml ファイルを選択します。 | 注意 : | スキンを選択するには、skin.xml ファイルを選択する必要があります。スケルトンを選択するには、単にスケルトン ディレクトリを選択する必要があります。 |
*.laf ファイルと同じディレクトリに、このルック アンド フィールを表す 100 x 75 ピクセルの .gif を作成します。この gif ファイルは、*.laf ファイルと同じ名前にする必要があります。
たとえば、telecom.laf というルック アンド フィール ファイルを表す場合は、telecom.gif という gif ファイルを作成します。エンド ユーザが独自にカスタマイズしたポータル デスクトップのビューのルック アンド フィールを選択するときに、この画像が訪問者ツールに表示されます。
選択したスキンおよびスケルトンのオーバーライドを作成する場合は、/skins/<your_skin> および /skeletons/<your_skeleton> の各ディレクトリに、スキンおよびスケルトンのディレクトリとファイルを手動で作成する必要があります。この場合、フルセットのスキンまたはスケルトン ファイルを作成する必要はありません。選択した基本スキンまたはスケルトン内のファイルをオーバーライドするスキンまたはスケルトン ファイルだけを作成する必要があります。
たとえば、新しいルック アンド フィールに「bighorn」スキンを使用し、bighorn/images/titlebar-button-edit.gif ファイルだけを作成した場合、このグラフィックは bighorn スキンのグラフィックをオーバーライドします。その他のすべての bighorn スキンのリソースがルック アンド フィールに使用されます。
タイトルバー ボタンの並べ替えとウィンドウ アイコンの変更には、ルック アンド フィール ファイルを使用します。WebLogic Portal にある bighorn ルック アンド フィール ファイルには、コード リスト 6-1 に示すデフォルトのタイトルバー順が含まれています。ルック アンド フィール ファイルで XML を編集してタイトルバーのボタンを並べ替えることができます。
<netuix:titlebarButtonOrder>
<netuix:otherButtons/>
<netuix:namedButton name="float"/>
<netuix:namedButton name="edit"/>
<netuix:namedButton name="help"/>
<netuix:namedButton name="minimized"/>
<netuix:namedButton name="maximized"/>
<netuix:namedButton name="delete"/>
</netuix:titlebarButtonOrder>
CSS ファイルは、HTML 表示、および色、枠のスタイル、画像などを定義するために、skin.xml ファイルによって使用されます。
CSS ファイルを変更することにより、ルック アンド フィール ファイルのさまざまな要素を変更できます。各 skin.xml ファイルでは、複数の CSS ファイルを使用して、スキンのさまざまな要素を定義します。さらに、カスタム CSS ファイルを作成して既存の CSS ファイルをオーバーライドしたり、新しい属性を追加したりできます。
WebLogic Portal にある各 skin.xml ファイルには、カスタマイズ用の custom.css ファイルへの参照が含まれています。この CSS ファイルは、使用する skin.xml ファイルに加える CSS の変更のプレースホルダとなります。
通常は、カスタムの CSS スタイルを追加します。この最も簡単な方法は、skin.xml ファイルに含まれる custom.css ファイルにカスタマイズを追加することです。
次の例は、bighorn ルック アンド フィール ファイルの各スキン ディレクトリにある custom.css ファイルの使用方法を示しています。この custom.css は、bighorn の skin.xml ファイルですでに参照されています。
| ヒント : | これと同様の手順を使用して、特定のルック アンド フィール リソースを変更できます。たとえば、skin.xml ファイルで参照する画像を変更する場合、プロジェクトに画像をコピーし、画像を変更した後に同じ名前で保存できます。この方法を使用すると、ルック アンド フィール ファイルとそのリソース全体を変更せずに、部分的なカスタマイズを行なうことができます。 |
custom.css ファイルを使用して bighorn の skin.xml をカスタマイズするには、以下の手順に従います。
yourWebProject/framework/skins/bighorn/css/custom.css. に移動します。custom.css ファイルを右クリックし [プロジェクトにコピー] を選択します。/yourWebProject/framework/skins/bighorn/css/custom.css に移動します。custom.css ファイルを右クリックし、エディタを選択して開いてください。.wlp-bighorn-window
{
border-color: red;
}
ジーンを使うと、ルック アンド フィール ファイルの操作において、柔軟性、制御、および保守の容易性を高めることができます。ジーンは、CSS カラー プロパティなどの、ルック アンド フィールの特定の特性を定義します。これは、ルック アンド フィール リソースで変数として参照できます。
たとえば、ルック アンド フィールに wlp.portlet.border.color という名前のジーンが定義されている場合、文字による色の定義ではなく、このジーンの名前を CSS ファイルで使用できます。このジーンの色の値が #ff0000 と定義されている場合、このジーンの変数を使用する CSS はこの色の値を取得します。ジーンの定義で色の値を変更するだけで、このジーンを使用するすべての CSS ファイルが自動的に更新されます。
クロモソームとは、1 つまたは複数のジーンを含むファイルです。名前が同じで値が異なるジーンを含む複数のクロモソームファイルを作成できます。ルック アンド フィール ファイル内の異なるクロモソームを参照するだけで、コア ルック アンド フィール リソース ファイルを変更せずに、完全に異なるルック アンド フィールをシミュレートできます。
また、JavaScript 関数でジーンを使用することもできます。
ジーンの使用は任意ですが、ルック アンド フィールに以下の利点を提供します。
重要 : ジーンを使用するには、「スキンの操作」の説明に従って、CSS エントリおよび JavaScript エントリが参照されるのではなく、HTML 内にインライン化されるように、skin.xml でそれらのエントリをコンフィグレーションする必要があります。
.chromosome ファイルで、次のように「bodyColor」というジーンを定義し、値として「赤」を割り当てることができます。
<gene name="bodyColor">
<value>#FF0000</value>
</gene>
CSS ファイルで、次のように bodyColor を変数として使用できます。
body
border:1px solid ${bodyColor};
};
ページをブラウザで表示すると、インライン化されたスタイルの定義は次のようになります。
body
border:1px solid #FF0000;
};
このジーンを CSS ファイルで使用する場合、各 CSS ファイルで値を手動で変更するのではなく、ジーンの値そのものだけを変更して、すべてのコンフィグレーション済み CSS ファイルに変更が反映されるようにする必要があります。
ジーンを使用する各スキンとテーマには、独自のユニークなクロモソーム ファイルが必要です。クロモソームが複製であってもユニークである必要があります。クロモソーム ファイルは、skin.xml および skeleton.xml と同じディレクトリに格納されます。
default.chromosome ファイルは、特定の skin.xml ファイルのジーンのセット全体を格納するためのものです。default.chromosome ファイルを使用して、すべてのジーンを 1 か所で維持することができます。特定のジーンをオーバーライドする場合、追加の .chromosome ファイルを提供できます。ルック アンド フィール フレームワークは、.laf ファイルで指定したクロモソームでジーンを検出できないと、default.chromosome ファイルでジーンを探します。
| 注意 : | CSS プロパティ値にジーンの 1 対 1 表現を使用することがベスト プラクティスです。 |
| 注意 : | ジーンの値には、他のジーンの参照を含めることができます。 |
skin.xml または *.theme ファイルで CSS または JavaScript ファイルを参照し、それらが最終的な HTML 出力でインラインになるようにします。default.chromosome をコピーして、新しいファイル名 (holiday.chromosome など) を付けます。オーバーライドするファイルのジーンを除くすべてを削除して、それらのジーンに異なる値を設定します。新しい .chromosome ファイルを、使用するスキンまたはスケルトン ディレクトリにコピーします。<netuix:lookAndFeel> 要素に追加して、ルック アンド フィールで使用する .chromosome を追加し、指定します。<netuix:lookAndFeel
skinChromosome="holiday"
skeletonChromosome="holiday"
ルック アンド フィール フレームワークは、参照するジーンがクロモソームで定義されているかどうかチェックしません。フレームワークはジーンを検出できないと、HTML 出力にジーンの変数を出力します。
ルック アンド フィール エディタの HTML プレビューには、ジーン変数によって表される CSS 値は表示されません。ジーンを使用するすべての CSS ルールは、HTML プレビューから削除されます。ジーンを使用するポータルのルック アンド フィールをプレビューするには、.portal ファイルを右クリックし、[サーバーで実行] を選択します。
ポータルのスケルトン要素 (プレースホルダ、レイアウトなど) またはスキン要素 (色、境界線、ボタンなど) を大幅に再設計する場合、WebLogic Portal に用意されたスキン テンプレートとスケルトン テンプレートに基づいて新しいルック アンド フィール ファイルを作成できます。
| ヒント : | WebLogic Portal では、bighorn-template ルック アンド フィールを使用して新しいルック アンド フィール ファイルを作成することをお勧めします。これはジーンをサポートし、WebLogic Portal の最新バージョンの機能を活用するすべてのルック アンド フィール ファイルを一通り提供します。 |
特定のスキンとスケルトンに関連するすべてのリソースをコピーし、必要に応じてその大部分、またはすべてを変更できます。CSS ファイルやジーンでは扱えない大幅な変更が必要な場合は、このオプションを使用します。
| 警告 : | 新しいルック アンド フィール ファイルを作成する場合は、「bighorn」という名前の付いたスキンかスケルトンを使用します。他のテンプレートは、WebLogic Portal の従来のバージョンのため利用でき、ジーンとクロモソームなどのようなルック アンド フィールの機能をサポートしません。 |
付属のテンプレートに基づいて新しいルック アンド フィールを作成するには、次の手順に従います。
skin.xml ファイルを選択します。 *.laf ファイルと同じディレクトリに、このルック アンド フィールを表す 100 x 75 ピクセルの .gif を作成します。エンド ユーザが独自にカスタマイズしたポータル デスクトップのビューのルック アンド フィールを選択するときに、この画像が訪問者ツールに表示されます。画像は *.laf ファイルと同じ名前にし、拡張子を *.gif にする必要があります。
たとえば、telecom.laf というルック アンド フィール ファイルを表す場合は、telecom.gif という gif ファイルを作成します。エンド ユーザが独自にカスタマイズしたポータル デスクトップのビューのルック アンド フィールを選択するときに、この画像が訪問者ツールに表示されます。
以下の節では、新しいルック アンド フィールの操作に関するガイダンスを示します。
| 注意 : | ルック アンド フィール エディタの使用方法については、「ルック アンド フィール エディタ」を参照してください。 |
スキンは、画像、カスケーディング スタイル シート (CSS) と JavaScript ファイルの組み合わせで、これによってポータル コンポーネントを直接変更することなく、ポータルのルック アンド フィールを変更できます。画像およびスタイルに対する参照は、ポータル定義にハードコードするのではなくスキン内で行います。
スキンは、スケルトンと組み合わせられて、ポータル デスクトップのルック アンド フィールを構成します。
各スキンには、スキン リソースを格納する独自の /images、/css、および /js (JavaScript) の各サブディレクトリがあります。ルック アンド フィールの画像、CSS ファイル、および JavaScript ファイルを作成し、これらのディレクトリに格納します。また、スキンのルート ディレクトリ以外の共通の場所に、グローバル ルック アンド フィール リソースを格納することもできます。スキンは、スキンのルート ディレクトリに格納された skin.xml ファイルに基づいて、使用するリソースを認識します。skin.xml は、ルック アンド フィールで使用される画像、CSS、および JavaScript ファイルの検出用のパスをスキンに通知します。
skin.xml ファイルをコンフィグレーションするときは、次のガイドラインに従ってください。
<skin>
<images>
<search-path>
<path-element>images</path-element>
<path-element>../default/images</path-element>
</search-path>
</images>
</skin>
このブロックは、スキンの画像サブディレクトリを調べ、そのディレクトリで見つからないファイルについては、デフォルト スキンの画像ディレクトリを探すようにスキンに指示します。
<html>
<scripts>
<script src="my.js" type="text/javascript" />
<search-path>
<path-element>js</path-element>
<path-element>../default/js</path-element>
</search-path>
</scripts>
</html>
JavaScript 関数を HTML 出力にインライン化する場合は (ジーンを使用する場合など)、以下のエントリ タイプを使用します。
<html>
<scripts>
<script content-uri="my.js" type="text/javascript" />
</scripts>
</html>
<html>
<scripts>
<script type="text/javascript">
alert("Hello World!");
</script>
</scripts>
</html>
skin.xml で CSS ファイルを参照する必要があります。CSS ファイルを参照する場合、以下のエントリ タイプを使用します。<html>
<links>
<search-path>
<path-element>../bighorn/css</path-element>
</search-path>
<link href="general.css" rel="stylesheet" type="text/css"/>
<link href="menu.css" rel="stylesheet" type="text/css"/>
</links>
</html>
<html>
<styles>
<style content-uri="my.css" type="text/css" />
<search-path>
<path-element>css</path-element>
<path-element>../bighorn/css</path-element>
</search-path>
</styles>
</html>
<html>
<styles>
<style type="text/css">
.bea-portal-body
{
margin: 0px;
padding: 0px;
background-color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
</style>
<search-path>
<path-element>css</path-element>
<path-element>../bighorn/css</path-element>
</search-path>
</styles>
</html>
structure.xml ファイルを作成すると、以下を指定できます。.theme ファイルを作成している場合、テーマとして使用するそのルック アンド フィール ファイルへのパスも設定できます。
以下に structure.xml ファイルのサンプルを示します。
<?xml version="1.0" encoding="UTF-8"?>
<structure xmlns="http://www.bea.com/servers/portal/framework/laf/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/servers/portal/framework/laf/1.0.0 laf-structure-1_0_0.xsd">
<specializations>
<localizations>
<localization locale="ja"/>
</localizations>
<classifications path="classifications">
<classification name="nokia"/>
<classification name="mozilla"/>
</classifications>
</specializations>
<themes>
<theme name="red_theme" path="../../redtheme"/>
<theme name="holiday" path="holiday"/>
</themes>
</structure>
structure.xml ファイルを作成します。このファイルを使用すると、テーマおよび分類のルック アンド フィール ファイルの場所を柔軟に指定できるようになり、ルック アンド フィールのローカライゼーションもサポートされます。| 注意 : | スケルトンでは、ルック アンド フィール リソースの名前 (CSS スタイル名、JavaScript 関数、画像名など) がハード コーディングされます。リソース名をデフォルトの名前から変更した場合は、スケルトン JSP 全体にわたってそれらの名前を変更する必要があります。 |
定義済みの各ルック アンド フィールには、Microsoft Internet Explorer で使用するリソース (別の skin.xml など) が含まれた特殊ディレクトリが用意されています。Internet Explorer に関する考慮事項には、メニューなどの特定の JavaScript が含まれます。
独自のルック アンド フィールを作成したり、スキンを大幅に変更したりした場合、Internet Explorer 用のブラウザ固有の追加機能が必要になる場合があります。ベスト プラクティスとして、MSIE 分類の既存の skin.xml を使用して、これらの追加機能を含めます。
また、新しいスキン リソースを追加する場合、ルック アンド フィールの skin.xml と MSIE ディレクトリ内の skin.xml の両方に追加する必要があります。たとえば、新しい CSS ファイルを追加した場合、図 6-3 に示すように、/markup/skins/ ディレクトリ内の skin.xml ファイルと、/markup/skins/msie/ ディレクトリ内の skin.xml ファイルの両方に、その新しい CSS ファイルへのリンクを追加する必要があります。
| 注意 : | MSIE 特殊ディレクトリでは、クライアント分類を利用してさまざまなリソースを追跡します。クライアント分類の詳細については、「複数デバイス タイプのポータルの作成」を参照してください。 |
ポートレットのタイトル バーで使用するアイコンのグラフィックは、skin /images ディレクトリに格納します。ポートレットの異なる状態とモード (最小化、最大化、ヘルプ、編集) でこれらのグラフィックのうちどれを使用するか指定するために、これらのグラフィックの名前を、ポータル Web プロジェクトの WEB-INF/netuix-config.xml ファイルで宣言します。ポートレットのタイトル バー アイコンで使用するグラフィックの名前を変更する場合は、ファイル名と netuix-config.xml にあるそれらのグラフィックの対応するエントリを変更します。
skeleton.xml は、ポータル コンポーネント (ブック、ページ、ポートレットなど) の物理的な境界を提供します。1 つのポータル Web プロジェクトに複数のスケルトンを設定できます。デスクトップ用のルック アンド フィールを選択すると、特定のスキンとスケルトンが使用されます。
デスクトップからポートレットのタイトルバーに至るまで、ポータル コンポーネントの各タイプには、そのコンポーネントを表示するスケルトン ファイルと呼ばれる JSP ファイルが関連付けられます。スケルトン ファイルには、単純なものと複雑なものがあります。たとえば、各デスクトップは、ポータルに適切な DOCTYPE 情報を決定して表示する desktop.jsp というスケルトン ファイルを使用します。これに対して、ポートレット タイトルバーは、より複雑な titlebar.jsp というスケルトン ファイルを使用し、ボタン グラフィックの参照を提供します。
WebLogic Portal は、提供しているルック アンド フィール ファイルで一連のスケルトンを提供しています。この節では、独自のカスタム ルック アンド フィール ファイル用の独自のスケルトンを開発する方法について説明します。たとえば、特定のモバイル機器で適切な表示を行う必要がある場合など、独自のスケルトンを作成する必要があります。
各ポータル コンポーネントには、<web_project>/framework/skeletons ディレクトリに 1 つまたは複数の対応するスケルトン JSP ファイルがあります。たとえば、ポートレットのタイトルバーには、そのタイトルバーを表示する、対応するスケルトン JSP ファイルがあります。ポータル デスクトップが表示されると、各ポータル コンポーネントのスケルトン JSP は (関連するクラスと共に) ロジックを実行し、作成される HTML を HTML ファイルの階層の適切な位置に挿入します。
また、スケルトンは、WebLogic Portal API を使用して特定のタイプの情報を取得します。たとえば、選択したコンポーネントのプロパティ ビューで開発者が入力したプレゼンテーション コンテキストやスタイル オーバーライドなどの情報です。
簡単に言うと、スケルトン JSP は、API 呼び出し、JSP タグ、および HTML 断片を組み合わせることで、最終的に HTML でポータル デスクトップを表示します。コード リスト 6-3 に、適切なスケルトン JSP の例を示します。
<!-- このブック スケルトン ファイルは、ブックの HTML <DIV> 要素を表示します。この <DIV> 要素には、メニューとブック コンテンツが含まれます。ブック コンテンツは、別の HTML <DIV> 要素に含まれます。-->
<jsp:root version="2.0"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:skeleton="http://www.bea.com/servers/portal/tags/netuix/skeleton">
<jsp:directive.page session="false" />
<jsp:directive.page isELIgnored="false" />
<skeleton:context type="bookpc">
<skeleton:control name="div" presentationContext="${bookpc}"
presentationClass="wlp-bighorn-book" presentationId="${bookpc.label}">
<skeleton:child presentationContext="${bookpc.menuPresentationContext}"/>
<skeleton:control name="div" content="true" presentationContext="${bookpc}" presentationClass="wlp-bighorn-book-content">
<skeleton:children/>
</skeleton:control>
</skeleton:control>
</skeleton:context>
</jsp:root>
作成した各スケルトンには、スケルトンのルート ディレクトリに格納された独自の skeleton.xml ファイルが必要です。
独自のスケルトンを開発する場合は、次のガイドラインに従ってください。
skeleton.xml ファイルでそれらの CSS ファイル/スタイルおよび JavaScript ファイル/関数を参照する (skin.xml ファイルでそれらを参照するのと同じ方法)。skeleton.xml では、確実に適切な表示を行うために、コンテンツのタイプまたはドキュメントのタイプも制御できる。次に例を示します。<skeleton>
<render-format>
<preset>HTML_4_01_TRANSITIONAL</preset>
</render-format>
</skeleton>
<preset> 要素で使用できる値は、XHTML_1_0_STRICT、HTML_1_0_TRANSITIONAL、HTML_4_01_STRICT、HTML_4_01_TRANSITIONAL、HTML_4_01_STRICT_NO_SYSTEM_ID、HTML_4_01_TRANSITIONAL_NO_SYSTEM_ID、HTML_3_2、および NONE。
<content-type-overrides>
<override classification="nokia" content-type="application/xhtml+xml" />
</content-type-overrides>
ここで、classification は WEB-INF/client-classifications.xml で定義されたデバイス タイプの名前です。content-type では値「text/html」も使用できます。
structure.xml ファイルを作成する。このファイルを使用して、さまざまなタイプのデバイス (分類) 用のスケルトン テーマ、スケルトン リソース、およびローカライズされたスケルトンのサブディレクトリのスケルトン テーマ、スケルトン リソースを参照できます。
テーマは、ブック、ページ、またはポートレットのルック アンド フィールをオーバーライドする方法を提供します。これにより、これらのコンポーネントの表示および動作を、その他のポータル デスクトップとは異なるものにすることができます。たとえば、ポートレットにテーマを設定して、ポートレットの境界線をギザギザの付いた線で表示したり、ポートレットのタイトルバーを赤に変えたり、別のポートレット タイトルバー ボタン画像を表示したりできます。
スキンとスケルトン ファイルの一方または両方でテーマを使用できます。上記の例では、スケルトンのテーマがギザギザの付いたポートレットの境界線を制御し、スキンのテーマに変更した CSS とタイトルバーのイメージを含めます。
また、WebLogic Portal のマルチチャネル フレームワークと組み合わせて使用する、モバイル機器などの特定のデバイス用のルック アンド フィールをテーマを使用して開発できます。
テーマは、標準のスキンおよびスケルトンと同じタイプのリソースで構成されます。通常、テーマは、ルック アンド フィール全体をオーバーライドするために必要なファイルだけを提供しますが、ルック アンド フィールをテーマとして使用することもできます。また、テーマをルック アンド フィールとして使用することもできます。
.theme ファイルは単純な XML ファイルで、テーマの名前を提供し、またドロップダウン メニューにそのテーマ名を表示し、開発者、ポータル管理者、またはエンド ユーザが選択できるようにする。*.gif ファイルや *.css ファイルなどのサポート ファイルが含まれます。図 6-4 の例は、「default」スキンのサブディレクトリとして「alert」テーマがあり、この「alert」テーマに独自のルック アンド フィール リソースが含まれていることを示しています。ブック、ページ、またはポートレットの alert テーマを選択すると、ポータル フレームワークは、ルック アンド フィールの /skin ディレクトリまたは /skeleton ディレクトリにある structure.xml ファイルを調べてテーマの場所を確認します。structure.xml ファイルが存在しない場合、フレームワークは、どのルック アンド フィールを使用している場合でも、/alert のスキン サブディレクトリとスケルトン サブディレクトリを検索します。ファイルが見つかった場合は、/alert サブディレクトリのファイルが優先されるか、親ルック アンド フィールで使用されるファイルに加えて、これらのファイルが使用されます。
たとえば、alert テーマが titlebar.jsp スケルトン ファイルを提供している場合、ポータル フレームワークは、親スケルトンの titlebar.jsp ファイルではなく、このスケルトン ファイルを使用します。
図 6-4 に、テーマに含まれるリソース タイプを示します。
Internet Explorer を使用する場合、テーマを使用したスキンの変更に関連する追加タスクがあります。詳細については、「Microsoft Internet Explorer に関する考慮事項」を参照してください。
framework/markup/theme ディレクトリに移動し、既存のテーマをファイル システムにコピーします。.theme ファイルと同じディレクトリに、このテーマを表す 100 x 75 ピクセルの .gif を作成します。この gif ファイルは、.theme ファイルと同じ名前にする必要があります。
たとえば、telecom.theme という .theme ファイルを表す場合は、telecom.gif という gif ファイルを作成します。エンド ユーザが独自にカスタマイズしたポータル デスクトップのビューのテーマを選択するときに、この画像が訪問者ツールに表示されます。
structure.xml ファイルを必ず作成します。
テーマを完全なルック アンド フィールとして使用する場合は、テーマ ディレクトリに structure.xml を作成することもできます。
ルック アンド フィールの /skin ディレクトリおよび /skeleton ディレクトリの structure.xml ファイルを使用しない場合は、これらのスキンとスケルトンのサブディレクトリとしてテーマを格納します。
| 注意 : | ユニークなリソースを作成する場合は、親スキン、親スケルトン、テーマ スキン、テーマ スケルトンのいずれかで、それらのリソースを参照する必要があります。 |
テーマの作成後、選択したブック、ページ、またはポートレットのプロパティ ビューでそのテーマを選択できます。
以前の WebLogic Portal リリースで作成したルック アンド フィールを使用するには、ポータル Web プロジェクト (適切なディレクトリ) にインポートします。
WebLogic Portal 8.1 のルック アンド フィール ファイルがあり、ジーンを使用する場合は、ルック アンド フィール ファイルをアップグレードする必要があります。以前のルック アンド フィールをアップグレードするには、Workshop for WebLogic で、ポータル Web プロジェクトから .laf ファイルを開きます。ファイルを開くと、skin.xml ファイルと skeleton.xml ファイルを作成するよう求めるメッセージが表示されます。これらの新しいファイルを作成したら、WebLogic Portal の新しいルック アンド フィール機能をいつでも使用できるようになります。
| 注意 : | WebLogic Portal 8.1 では、skin.properties ファイルにもテーマの設定を含めることができました。WebLogic Portal 9.2 以降では、テーマは独自の skin.xml ファイルを使用するスタンドアロンのルック アンド フィールです。WebLogic 8.1 の skin.properties ファイルに再利用するテーマの詳細が含まれている場合は、これらのテーマ設定をテーマの skin.xml ファイルに手動で追加する必要があります。 |
ルック アンド フィールのトラブルシューティングを行う場合、またはルック アンド フィールを微調整する場合は、以下のガイダンスに従ってください。
ルック アンド フィール エディタを使用すると、ポータルのテキスト要素で使用されるテキスト スタイルを対話形式で変更できます。技術的には、このエディタは、ポータルの skin.xml ファイルで参照されているカスケーディング スタイル シート (CSS) ファイルを変更します。たとえば、ルック アンド フィール エディタを使用して、ポータルの見出しのサイズ、リスト要素の色、テーブル セルの周囲のパディングなどを変更できます。
また、ルック アンド フィール エディタを使用して、ポータルのルック アンド フィール ファイル (.laf ファイル) のプロパティ (参照するスキン ファイルやスケルトン ファイルなど) を変更できます。
ルック アンド フィール エディタでは、ポータルのルック アンド フィールを変更し、結果をすぐに確認できます。ルック アンド フィール エディタを使用すると、ポータルで使用するテキスト スタイルを対話形式で編集できます。ルック アンド フィール エディタを使用して、ポータルのテキストを選択し、フォント サイズ、色、パディングなどのテキストの特性を変更できます。加えた変更は、エディタの表示領域にすぐに反映されます。
ポータルのスキンは、ポータルの全体的なルック アンド フィールを定義する際に役立ちます。ポータルの skin.xml ファイルは、スキンで使用する 1 つまたは複数の CSS ファイルを指定します。ポータルの HTML テキストでは、これらの CSS ファイルを参照し、CSS スタイル定義を使用できます。特定のテキスト スタイルのフォント サイズを変更すると、ルック アンド フィール エディタによって、CSS ファイル内のスタイルの定義が変更されます。変更は、エディタの表示領域に表示される HTML にすぐに反映されます。
次の図に、ルック アンド フィール エディタの各部分を示します。この節では、これらの各部分について詳しく説明します。
ナビゲータ パネルには、ポータル プロジェクトのファイル構造が表示されます。このパネルを使用して、編集するポータルのルック アンド フィール ファイルを探して選択します。
ルック アンド フィール (.laf) ファイルには、ポータルのルック アンド フィールを定義するスキンとスケルトンへの参照が含まれます。ルック アンド フィール エディタを使用するには、ナビゲータ ビューで、編集するポータルの .laf ファイルを探す必要があります。ファイルを見つけたら、ファイル名をダブルクリックしてルック アンド フィール エディタを開きます。ポータルの .laf ファイルは、ポータル Web プロジェクトの framework/markup/lookandfeel フォルダにあります。たとえば、図 6-6 では、ナビゲータ ビューで mycustom.laf ファイルが選択されています。
[スタイル階層] タブには、選択したスタイルの CSS カスケードが表示されます。カスケードは CSS スタイルの階層であり、HTML ドキュメント構造によって定義されます。カスケードの表示が役立つのは、継承されたスタイル プロパティを見つけて適切に処理することができるためです。図 6-7 では、portlet-section-header スタイルが選択されています。この階層では、wlp-bighorn-window-content スタイルが wlp-bighorn-window の下にあります。
これは、wlp-window-content が wlp-bighorn-window だけでなく、場合によっては、さらに上位の階層にある他のすべてのスタイル クラスからプロパティを継承できるということです。継承の詳細については、「CSS 継承」を参照してください。スタイル階層ビューでスタイルを選択すると、そのスタイル定義と継承されたスタイル プロパティが次の節で説明する [スタイルの説明] ウィンドウに表示されます。
[スタイルの説明] パネルでは、選択したスタイルのプロパティと継承されたスタイル プロパティを一目で確認できます。図 6-8 に示す [スタイル情報] セクションは、スタイルが定義されている CSS ファイルから直接取得されます。また、[継承されたスタイル] リストは、ルック アンド フィール エディタで現在開いている HTML テキストのドキュメント構造から直接構築されます。[継承されたスタイル] リストには、ドキュメント階層の上位にあるスタイルから継承されたスタイル プロパティとその値が示されます。たとえば、wlp-bighorn-window-content は、wlp-bighorn-book-content スタイルから background color プロパティを継承していることがわかります。
![[継承されたスタイル] を表示するウィンドウ](wwimages/ss_style_window.gif)
[継承されたスタイル] リストの値を理解するには、HTML と CSS の基本知識が役立ちます。
| ヒント : | この節では、CSS 継承についてごく簡単に説明します。CSS に関する書籍と Web サイトは多数あります。この重要な主題の詳細については、それらを参照してください。 |
HTML ドキュメントは階層状に構成されています。これは、HTML ドキュメントの各要素には、1 つまたは複数の子要素、1 つの親要素、および複数の祖先要素が存在する可能性があることを意味します。CSS の主な特徴は、HTML ドキュメント階層の下位に向かってスタイルが「継承」されることです。たとえば、図 6-9 は、単純な HTML ドキュメント階層を示しています。
このドキュメントのすべてのテキストの色を青にする場合は、body タグに青を定義します。CSS 継承によって、body より下位のすべての要素 (具体的には li と h1) も青になります。一方、リスト要素以外のすべて要素を青にするには、ul タグに別の色、たとえば赤を定義します。これで、すべての li 要素は、親である ul から赤という色を継承します。同時に、h1 タグは青になります (h1 タグは、引き続き body から色を継承します)。
ルック アンド フィール エディタは、選択したスタイルが継承しているすべてのスタイルを表示します。したがって、スタイルのフォント サイズを変更する場合、そのスタイルにフォント サイズが定義されていなくても、フォント サイズの継承元のスタイルを一目で確認できます。その後、次の節で説明するように、簡単にプロパティを変更できます。
| ヒント : | この便利な機能がないと、特定のスタイルがどのスタイルを継承しているかを判断するのは困難です。一般的には、階層の CSS ファイルを開いて内容を確認し、特定のスタイル プロパティがどこで定義またはオーバーライドされているかを調べる必要があります。 |
前の節で説明したように、選択したテキストに関連付けられた CSS スタイル クラスで、変更対象のプロパティが定義されていない場合があります。たとえば、ルック アンド フィール エディタで見出しを選択したときに、フォント サイズがその見出しのスタイルのプロパティではない可能性があります。この場合、変更対象のプロパティは継承されたプロパティであると考えられます。
ルック アンド フィール エディタでは、特定のスタイルの継承されたプロパティを表示し、編集できます。たとえば、テキストのフォント サイズを変更するとします。編集するスタイルを選択 (たとえば、表示領域でテキストをクリック) した後、font-size はそのテキストの CSS スタイルのプロパティではないことがわかりました。[継承されたスタイル] リストを見ると、font-size は、カスケードの上位にあるスタイルに定義されていることがわかりました。
この時点で、現在定義されている場所 (カスケードの上位の場所) の font-size プロパティを編集するか、変更するテキストのスタイルにこのプロパティを直接追加するかを決める必要があります。カスケードの上位にあるプロパティを変更した場合、このプロパティを継承している他のテキストのプロパティが間違って変更される可能性があります。状況に応じて、どちらにするかを決定します。選択したスタイルで直接変更した場合、継承されたスタイルはオーバーライドされ、そのスタイルで新しいプロパティ値が使用されます (再びオーバーライドされない限り、階層の下位のスタイルでも同じ値が使用されます)。
| ヒント : | 継承されたスタイルにプロパティを追加するか、既存のプロパティを変更するには、[継承されたスタイル] リストのスタイル名をダブルクリックします。次に、CSS スタイル ウィザードを使用して、変更を行います。 |
HTML ドキュメントは階層状に構成されています。これは、HTML ドキュメントの各要素には、1 つまたは複数の子要素、1 つの親要素、および複数の祖先要素が存在する可能性があることを意味します。CSS の中心機能は、HTML ドキュメント階層の下位方向に向かってスタイルが継承されることです。たとえば、次のツリー図は、簡単な HTML ドキュメント階層を表しています。
このドキュメントのすべてのテキストの色を青にする場合は、body タグに青を定義します。CSS 継承によって、body より下位のすべての要素 (具体的には li と h1) も青になります。一方、リスト要素以外のすべて要素を青にするには、ul タグに別の色、たとえば赤を定義します。これで、すべての li 要素は、親である ul から赤という色を継承します。同時に、h1 タグは青になります (h1 タグは、body から引き続き色を継承します)。
ルック アンド フィール エディタは、選択したスタイルが継承しているすべてのスタイルを表示します。したがって、スタイルのフォント サイズを変更する場合、そのスタイルにフォント サイズが定義されていなくても、フォント サイズの継承元のスタイルを一目で確認できます。その後、次の節で説明するように、簡単にプロパティを変更できます。
表示領域には、編集対象の CSS スタイルを使用する HTML が表示されます。ルック アンド フィール エディタを起動すると、テキスト要素の代表的なサンプルを示すデフォルトの HTML ページが表示されます。
| 注意 : | ルック アンド フィール エディタを起動するには、ルック アンド フィール (.laf) ファイルを開きます。表示領域に示される HTML ファイルは、.laf ファイルがスキンで参照しているものと同じ CSS ファイルを参照している必要があります。デフォルトの HTML ページをエディタにロードした場合、この接続は自動的に確立されます。しかし、ポータルからエディタに HTML をロードした場合は、ポータルがエディタと同じ .laf ファイルを参照していることを確認する必要があります。 |
アウトライン ビューには、ポータルの skin.xml ファイルで参照されているファイルが表示されます。このパネルでは、次のプロパティを編集できます。
図 6-10 に、[ドキュメント構造] パネルの一部を示します。この図では、css/portlet.css ファイルが展開され、その中に定義されているスタイルが表示されています。スタイルをダブルクリックして、プロパティを追加または変更できます。.css ファイル、スタイル名、またはスタイル プロパティをクリックして、プロパティ ビューに値を表示し、編集することもできます。
このパネルでは、CSS スタイルにアクセスするだけでなく、図 6-11 に示すように、ポータルに関連付けられたルック アンド フィール ファイルのプロパティにアクセスし、編集することもできます。新しいスキン ファイルおよびスケルトン ファイルの選択も含め、これらのプロパティはすべて変更できます。ルック アンド フィール ファイル ノードは、ドキュメント構造の最上位にあります。
プロパティ ビューでは、選択した CSS スタイルまたはルック アンド フィール ファイルの値を対話形式で変更できます。プロパティ ビューにプロパティを表示するには、次のいずれかの操作を行います。
Javadoc に記載された次のパッケージを使用すると、ルック アンド フィールに対して多数のプログラム操作を実行できます。
シェルは、ポータルのヘッダ領域とフッタ領域を定義します。シェルにポートレット、JSP、および HTML ファイルを組み込んで、ヘッダまたはフッタに表示するコンテンツを定義できます。
| ヒント : | ヘッダやフッタにポートレットを配置するには、レイアウトを各ヘッダとフッタに関連付ける必要があります。 |
新しいシェルを作成するか、既存のシェルを変更することができます。
| 注意 : | 以前のバージョンで作成したシェルには、シェル エディタを使用した変更はできません。前に作成したシェルを変更するには、XML エディタを引き続き使用する必要があります。 |
| 注意 : | GroupSpace がポータル Web プロジェクトで有効な場合は、communityFiles/shell/communityHeaderFooter.shell もコピーできます。 |
シェルのプロパティ、およびヘッダとフッタのプロパティを変更できます。非常に一般的なシェル変更の 1 つは、ヘッダやフッタにレイアウトを追加することです。ヘッダやフッタにレイアウトを追加する場合、ヘッダまたはフッタの中にそれぞれポートレットを配置できます。
ポータル デスクトップで使用されたシェルを変更するには、ポータルに対してシェル プロパティをアップグレードする必要があります。ポータル プロパティの更新の詳細については、「ポータル プロパティの編集」を参照してください。
ポータル デスクトップでシェルを変更した場合、または新しく割り当てた場合は、シェルを再ロードして変更が保存されたことを確認する必要があります。
レイアウトは、ポータル ページおよびヘッダとフッタで使用され、ページ内のポートレットやブックの配置場所を指定する構造を提供します。レイアウトは、HTML テーブルまたは CSS ベースの方法を使用して実装できます。
WebLogic Portal には、ポータルで使用できる定義済みのレイアウト セットが用意されています。ポータル エディタでページを選択すると、プロパティ ビューで、選択したページに対してこれらのレイアウトを使用できます。ページ プロパティの詳細については、「ページ プロパティ」を参照してください。
WebLogic Portal に用意された定義済みレイアウトに加え、カスタム レイアウトを作成することもできます。レイアウトには、以下のファイルが含まれます。
図 6-12 に示すように、WebLogic Portal には、独自のレイアウトの作成に使用できるボーダー レイアウト、フロー レイアウト、グリッド レイアウトの 3 種類の標準レイアウトが用意されています。
各タイプのレイアウトを作成するには、ニーズに合わせて .layout ファイルをコンフィグレーションします。たとえば、上 (N)、左 (W)、および右 (E) 領域だけを使用するボーダー レイアウトを作成できます。
各タイプの標準レイアウトには、HTML として表示するための、対応するスケルトン JSP ファイル borderlayout.jsp、flowlayout.jsp、および gridlayout.jsp があります。
標準レイアウトが提供している内容以上のレイアウトを作成する場合は、カスタム レイアウトを作成する必要があります。「カスタム レイアウトの作成」を参照してください。
.layout ファイルと対応する .html.txt ファイルをコピーします。.layout はそのまま残します。.html.txt ファイルの名前を、拡張子 .html.txt を残して新しいレイアウトと同じ名前に変更します。.html.txt ファイルで、必要なレイアウト配置を示す HTML のテーブル構造を作成します。.layout ファイルで、作成するレイアウトのタイプに応じて、<netuix:markup> タグ内に、<netuix:gridLayout>、<netuix:flowLayout>、または <netuix:borderLayout> の開始タグと終了タグを挿入します (既存の <netuix:*Layout> の開始タグと終了タグを置き換えます)。<netuix:*Layout> 開始タグ内に以下の属性を追加 (または変更) します。
たとえば、fourcolumn.layout のコピーを変更してボーダー レイアウトを作成する場合は、columns 属性を layoutStrategy 属性に置き換え、値を変更します。
<netuix:*Layout> タグ内に、レイアウトに配置する各プレースホルダを表す、<netuix:placeholder> 開始タグと </netuix:placeholder> 終了タグを追加します。
ボーダー レイアウトを作成する場合、使用できるプレースホルダは 5 つまでです。
<netuix:placeholder> タグに、次の属性を追加します。
title - プレースホルダのタイトルを入力します。layoutStrategy 属性を title に設定したボーダー レイアウトを使用する場合は、タイトルに「north」、「south」、「east」、「west」、または「center」と入力して、ボーダー レイアウト内のプレースホルダの配置を決定します。
description - プレースホルダの説明を入力します。
flow - オプションです。ブックおよびポートレットをレイアウトに追加したときに、自動的に水平または垂直に配置されるように制御する場合は、「true」と入力します。
usingFlow - オプションです。flow 属性を true に設定する場合は、この属性値に「vertical」または「horizontal」と入力します。この値は、ブックおよびポートレットをプレースホルダ内で縦 (垂直) に配置するか、または横 (水平) に配置するかを決定します。
width - オプションです。プレースホルダの幅を設定します。
markupType - 必須です。「Placeholder」と入力します。
markupName - 必須です。プレースホルダの ID として使用されます。各プレースホルダには、レイアウト全体においてユニークな markupName が必要です。
order に設定した場合、<netuix:placeholder> の開始タグと終了タグの間に、コンテンツとして 「North」、「South」、「East」、「West」、または「Center」と入力して、レイアウトでの各プレースホルダの位置を決定します。たとえば、<netuix:placeholder>North</netuix:placeholder> は、プレースホルダを上プレースホルダに指定します。.layout ファイルと同じディレクトリに、同じ名前で拡張子を *.gif に変えた 100x75 ピクセルの .gif を作成します。この画像は、エンド ユーザがポータル デスクトップの独自にカスタマイズしたビューに対してレイアウトを選択したときに、訪問者ツールで表示されます。
これで、ポータル エディタでページを選択し、プロパティ ビューでレイアウトを選択することで、ポータルでレイアウトを使用できます。
WebLogic Portal の標準レイアウトにニーズに合うものがない場合は、カスタム レイアウトを作成できます。カスタム レイアウトを作成する場合、次の 3 つのものを作成する必要があります。
カスタム レイアウトのレイアウト ファイルは、標準レイアウトの作成に使用するファイルと同じタイプです。レイアウト ファイルは、.layout 拡張子を付けた XML ファイルです。このファイルは、/WEB-INF 以外の Web アプリケーション ディレクトリ内の任意の場所に配置できます。
.layout ファイルは、手動で作成する必要があります (テキスト エディタまたは XML エディタを使用)。初めて作成する場合は、ポータル Web プロジェクトの /framework/markup/layout ディレクトリにある共有 J2EE ライブラリの既存のレイアウトをコピーすることをお勧めします。
次の例では、左側にカラムを 1 つ配置し、右側に行を 1 つ配置して、その下に 2 つのカラムを配置したカスタム レイアウトを使用します。
このレイアウトは、図 6-13 のようになります。
ベスト プラクティスとして、カスタム レイアウトとそのサポート ファイルを別のディレクトリに格納します。この例は、カスタム レイアウトが /webContent/custom/layout/ に格納されていると想定しています。
| 注意 : | 新しい *.layout ファイルを作成する最も簡単な方法は、別のレイアウトからコピーすることです。 |
コード リスト 6-4 に示すように、この例のレイアウト ファイルは example.layout という名前です。
gridLayout、borderLayout、または flowLayout では必要なレイアウトを作成できないため、この例のレイアウトでは、汎用の netuix:layout タグを使用しています。このタグには、「left」、「upper」、「lower_left」、「lower_right」の 4 つのプレースホルダがあります。
| 注意 : | カスタム レイアウトでは、skeletonUri 属性が重要となります。これは、カスタム レイアウトを表示するために、カスタム スケルトン JSP を開発することが多いためです。この属性は、ポータル表示フレームワークに、使用する JSP を指示します。 |
<?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:layout markupType="Layout"
markupName="exampleLayout"
title="Example Custom Layout"
description="Example with Left, Upper, Lower Left and Lower Right placeholders"
skeletonUri="/custom/layout/examplelayout.jsp"
htmlLayoutUri="/custom/layout/example.html.txt"
iconUri="/framework/markup/layout/example.gif"
thumbnailUri="/framework/markup/layout/example.gif" type="example">
<netuix:placeholder markupType="Placeholder"
markupName="exampleLayout_left" title="left" usingFlow="false" description="Left Side placeholder" width="30%">
</netuix:placeholder>
<netuix:placeholder markupType="Placeholder"
markupName="exampleLayout_upper" title="upper" usingFlow="true" flow="horizontal" description="Upper placeholder with horizontal flow" width="70%">
</netuix:placeholder>
<netuix:placeholder markupType="Placeholder"
markupName="exampleLayout_lowerLeft" title="lower_left" usingFlow="false" description="Lower Left placeholder (below Upper)" width="35%">
</netuix:placeholder>
<netuix:placeholder markupType="Placeholder"
markupName="exampleLayout_lowerRight" title="lower_right" usingFlow="false" description="Lower Right placeholder (below Upper)" width="35%">
</netuix:placeholder>
</netuix:layout>
</netuix:markup>
</netuix:markupDefinition>
この例では、表示を実行するカスタム スケルトンが必要です (skeletonUri 属性で指定)。この JSP を作成し、レイアウトを使用するルック アンド フィールにコピーする必要があります。レイアウト ファイルと同様に、カスタム レイアウト JSP を作成する最も簡単な方法は、既存の JSP をコピーすることです。
コード リスト 6-5 に、カスタム スケルトン JSP (/framework/markup/layout/examplelayout.jsp) のレイアウトを示します。
<jsp:root
version="2.0"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:skeleton="http://www.bea.com/servers/portal/tags/netuix/skeleton" >
<jsp:directive.page session="false" />
<jsp:directive.page isELIgnored="false" />
<skeleton:context type="layoutpc">
<skeleton:control name="table" presentationContext="${layoutpc}" class="wlp-bighorn-layout"
cellspacing="0" cellpadding="0" width="100%" >
<c:set var="ph" value="${layoutpc.placeholders}"/>
<c:set var="left" value="${ph[0]}"/>
<c:set var="upper" value="${ph[1]}"/>
<c:set var="lowerLeft" value="${ph[2]}"/>
<c:set var="lowerRight" value="${ph[3]}"/>
<tr>
<td rowspan="2" valign="top" width="${left.width}">
<skeleton:child presentationContext="${left}"/>
</td>
<td colspan="2" width="${upper.width}">
<skeleton:child presentationContext="${upper}"/>
</td>
</tr>
<tr>
<td valign="top" width="${lowerLeft.width}">
<skeleton:child presentationContext="${lowerLeft}"/>
</td>
<td valign="top" width="${lowerRight.width}">
<skeleton:child presentationContext="${lowerRight}"/>
</td>
</tr>
</skeleton:control>
</skeleton:context>
</jsp:root>
これで、カスタム レイアウトは完全に機能します。html.txt ファイルをまだ作成していなくても、レイアウトをテストできます。これを行うには、ポータル ファイルを作成し、ページを選択して、プロパティ ビューの [レイアウト] フィールドでカスタム レイアウトを選択します。
| 注意 : | .portal ファイルで.layout ファイルを使用した後に、このファイルを変更した場合、変更したレイアウトを再ロードする必要があります。レイアウトを再ロードするには、プロパティ ビューを使用してレイアウト プロパティを更新します。次に、[再ロード] をクリックします。[再ロード] (レイアウト プロパティのドロップダウン リストの横) をクリックします。 |
.html.txt は、Workshop for WebLogic で使用される HTML 断片です。このファイルにより、レイアウトの外観を視覚的に表現できるため、開発者または管理者はポートレットを適切なプレースホルダに配置できます。
この例では、custom.html.txt ファイルは、/framework/markup/layout/example.html.txt であり、コード リスト 6-6 に示すサンプルのようになります。
<table class="portalLayout" id="thePortalLayout" width="100%" height="100%">
<tr>
<td class="placeholderTD" valign="top" rowspan="2" width="30%">
<placeholder number="0"/>
</td>
<td class="placeholderTD" valign="top" colspan="2" width="70%">
<placeholder number="1"/>
</td>
</tr>
<tr>
<td class="placeholderTD" valign="top" width="35%">
<placeholder number="2"/>
</td>
<td class="placeholderTD" valign="top" width="35%">
<placeholder number="3"/>
</td>
</tr>
</table>
メニューは、ポータル ページで使用するナビゲーション スタイルを決定します。WebLogic Portal は、2 種類のメニューを提供しています。1 つは、単一レベルの 1 行分のタブで、もう 1 つは、複数レベルのネストされたドロップダウン形式のページ ナビゲーションです。
ナビゲーション メニューの動作を、デフォルト メニューで使用できる動作とは異なる動作にする場合は、ルック アンド フィールの /skeletons ディレクトリにある singlelevelmenu.jsp スケルトンまたは multilevelmenu.jsp スケルトンを共有 J2EE ライブラリからファイル システムにコピーし、必要な変更を行います。複数レベル メニューの動作を変更する場合、スキンの /js サブディレクトリにあるスキンの menu.js ファイルも変更することが必要になる場合があります。
ページ タブで画像 (選択したブックのプロパティ ビューの [ロールオーバ画像]、[選択済み画像]、[未選択画像]) を使用するには、その画像へのパスを入力します。このパスは、skin.xml ファイルで指定されたルック アンド フィールの画像検索パスを基準とした相対パスです。
たとえば、skin.xml の画像検索パスが <path-element>images</path-element> であり、メニュー画像がスキンの /images ディレクトリに格納されている場合、プロパティ ビューで画像ファイルの名前を入力します。メニュー画像がポータル Web プロジェクトの /images サブディレクトリに格納されている場合は、../../../../images/my_rollover.gif のようにグラフィックへのパスを入力します。
多くの組織で必要なのは、特別なニーズを持つユーザをサポートするための、業界または政府の標準を満たす Web サイトを提供することです。特定の要件がない場合でも、さまざまなユーザのニーズを満たすようにサイトを設計することが重要です。
WebLogic Portal は、アクセスしやすいポータルおよびアプリケーションの設計、開発、および管理をサポートする柔軟なアーキテクチャを提供しています。たとえば、ユーザ プリファレンス、ブラウザ属性、リクエスト属性に基づいて、特定のユーザ インタフェースを対象にする機能を提供しています。
WebLogic Portal によるユーザ インタフェースの構築の詳細については、「ルック アンド フィールのファイルの操作」を参照してください。
Web サイトを開発する場合、次の一般的なガイドラインを使用して、アクセシビリティを高めることができます。完全なリストについては、使用する実装に関連する、業界または政府の規定を参照してください。
表 6-4 に、政府規制のリソースを示します。
以下のツールを使用して、Web ページのコードを検証できます。これらのツールはコードの修正は行いませんが、HTML 4.0、W3C、Section 508、および一般的なアクセシビリティの問題に関連する事項で、修復が必要なもの、必要ないものをレポートします。
詳細については、W3C の評価および修復ツール ページ (http://www.w3.org/TR/2000/WD-AERT-20000426) を参照してください。
Bobby ツールは、優先レベルおよび Section 508 の問題に従って、W3C アクセシビリティの問題を識別します。Bobby ツールをダウンロードするには、http://bobby.watchfire.com/bobby/html/en/index.jsp を参照してください。
| 注意 : | Bobby の無償版では、一度に 1 ページずつテストできます。 |
Lynx Viewer は、ページのコンテンツが Lynx (テキストのみ対応のブラウザ) でどの程度利用できるか示す HTML ページを生成します。視覚障害のあるユーザにとって、サイトがどの程度有用であるかを示すと共に、古い技術を使用するユーザにとっても適切な指標になります。 http://www.delorie.com/web/lynxview.html を参照してください。
  
|
