第4章
この章では、ポータルレイアウトを使用してパーソナル、共有、およびコンテナページの外観をコントロールする方法について説明します。この章の節は次のとおりです。
「ポータルレイアウト」は、選択されたポートレットのセットがページに表示される方法を定義するテンプレートです。 exteNd Directorポータルアプリケーションの各パーソナル、共有、およびコンテナページは、ポータルレイアウトを使用して、選択されたポートレットがページに配置される方法を指定します。 exteNd Directorは、ユーザが選択したポートレットをポータルレイアウトから切り離すため、選択したポートレットに影響を与えずにページのレイアウトを簡単に変更できます。
exteNd Directorには、事前定義されたレイアウトが付属しています。 次のレイアウトは、すべてのユーザが使用できます。
次のレイアウトは、レイアウト管理者のみが使用できます。
|
レイアウト |
説明 |
プレビュー |
|---|---|---|
|
My NovellLayout |
サンプルXHTMLレイアウトを作成します。 |
|
独自のレイアウトを作成することもできます。 作成するには、で説明されているように、exteNd Directorのポータルレイアウトとポータルレイアウト定義ウィザードを使用します。
ポータルアプリケーションの各レイアウトは、次のファイルをそれぞれ提供する必要があります。
レイアウト記述子およびレイアウト定義ファイルは、リソースセット内の[portal-layout]ディレクトリに保存されます。
レイアウトの内部識別子は、XML拡張子を除いたその記述子ファイルの名前です。
リソースセット内のファイル場所の詳細については、『exteNd Directorアプリケーションの開発』のリソースおよびJavaクラスのサブディレクトリに関する節を参照してください。
ポータルアプリケーションに使用される各レイアウトは、レイアウト記述子ファイルが必要です。 レイアウト記述子ファイルには、任意の名前を指定できます。 レイアウト記述子ファイルは、次のレイアウト情報を指定します。
|
要素名 |
説明 |
|---|---|
|
portal-layout |
ポータルレイアウトのルートノード |
|
display-name |
ポータルアプリケーションのユーザインタフェースでレイアウトの識別に使用される名前。 |
|
description |
レイアウトの説明。 |
|
preview-image |
レイアウトの外観を示す小さなイメージ。 このイメージのパスは、完全修飾されたURLまたはポータル置換文字列を含むURLです。 |
|
layout-definition-file |
レイアウト定義ファイルのパス。このファイルは実際のレイアウトを含みます。 |
|
layout-definition-format |
レイアウトの形式。レイアウト定義には、次の形式のいずれかを使用できます。 HTMLは、サポートされたレイアウト定義形式ではありません。 |
|
run-role-map |
ポータルページをこのレイアウトで実行できる役割のセット。 run-role-mapを指定しない場合、すべてのユーザがこのレイアウトでポータルページを実行できます。 重要: レイアウトにrun-role-mapを指定した場合、対応するlist-role-mapを指定する必要があります。 |
|
list-role-map |
選択リストからこのレイアウトを表示できる役割のセット。 list-role-mapを指定しない場合、すべてのユーザがこのレイアウトを表示できます。 |
次に、Header Contentというレイアウトのレイアウト記述子ファイルの例を示します。レイアウト記述子ファイルはHeaderContent.xmlです。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE portal-layout PUBLIC "-//SilverStream Software, LLC//DTD Portal Layout 5.0//EN" "portal-layout_5_0.dtd"> <portal-layout> <display-name>Header Content</display-name> <description>Header and content sections</description> <preview-image>$RESOURCE_URL$/portal-layout/images/HeaderContent.gif</preview-image> <layout-definition-file>HeaderContentDef.xml</layout-definition-file> <layout-definition-format>text/xml</layout-definition-format> </portal-layout>
文字列$RESOURCE_URL$は、ポータル置換文字列の例です。置換文字列には、ランタイム、ポータルアプリケーションのコンテキストベース情報を含めることができます。 置換文字列は、ユーザの現在のテーマまたは現在表示されているポータルIDなど、ランタイムにダイナミックに変更する事項を参照するキーワードです。これらのキーワードはランタイムに検出されると、現在のHTTP要求または現在のポータルコンテキストの情報に基づいて、置換されます。
ポータルレイアウトのレイアウト定義ファイは、レイアウト内のセクション、メインページの幅、および各セクションの幅を説明します。 レイアウト定義は、特定のセクションでのポートレットの流れ(左から右または上から下)も指定します。
レイアウト定義には、次の形式のいずれかを使用できます。
HTMLは、サポートされたレイアウト定義形式ではありません。
レイアウト記述子ファイルの<layout-definition-format>要素で使用する形式を指定します。
XMLを使用してレイアウト定義を指定する場合、次の要素を使用してレイアウトを定義する必要があります。
次に、HeaderContentというレイアウトのXMLレイアウト定義ファイルの例を示します。レイアウト定義ファイルはHeaderContentDef.xmlです。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE portal-layout-def PUBLIC "-//SilverStream Software, LLC//DTD Portal Layout Def 4.0//EN" "portal-layout-def_4_0.dtd"> <portal-layout-def> <section-container type="row"> <s3-section flow="vertical" id="1" style="padding-bottom:5px;padding-right:5px;" width="100%"/> </section-container> <section-container type="row"> <s3-section flow="vertical" id="2" style="padding-bottom:5px;" width="100%"/> </section-container> </portal-layout-def>
ポータルレイアウトの各要素がHTMLでどのように変換されているかを見るには、リソースセットのportal-styleフォルダにあるPortalLayout.xslをWebアプリケーションで参照してください。
XHTMLでレイアウト定義を指定すると、XMLよりさらにレイアウトを制御できます。 XHTMLレイアウトは、パーソナル、共有、およびコンテナページで使用できます。たとえば、XHTMLを使用して、Webサイトに特定の企業外観をブランディングします。 コンテナぺージでブランディングを定義すると、このコンテナページ内に表示される各パーソナルページはそのブランディングを持ちます。
XHTMLフォーマットを使用すると、マークアップは正しく作成されます。ドキュメントが正しく作成されていることを確認するには、次のガイドラインに従います。
ユーザが選択したポートレットを配置するためのスペースを予約するには、XHTMLドキュメント全体に<s3-section>タグを配置することが必要です。 XHTMLレイアウトは、範囲指定パスを使用して、ポータルリソースを直接指定できます。 たとえば、次の範囲指定パスは、リソースセットのイメージにアクセスする方法を示します。
<img src="${Portal/Uri/Context/resource/ portal-layout/images/mynovell_logo.jpg}"/>
XHMTLレイアウトには、ポータルコンテナページとして使用されている場合、HTML、HEAD、およびBODYタグだけを含めることができます。
次に、MyNovellというレイアウトのXHTMLレイアウト定義ファイルの例を示します。 (ポータルコンテナページです。) レイアウト定義ファイルはMyNovell.htmlです。
<html>
<head>
<title>MyNovell.com</title>
<s3-component id="ThemeTester" mode="link-only"/>
<script language="JavaScript" type="text/JavaScript">
onLoadFct = [];
function compareOnLoadPriority(a, b) {
if (a != undefined && b != undefined) {
if ( a.priority < b.priority ) return -1
if ( a.priority > b.priority ) return 1
}
return 0
}
function runOnLoad() {
var lg = onLoadFct.length;
if (lg > 0) {
if (lg > 1) onLoadFct.sort(compareOnLoadPriority);
var i = 0;
while(i < lg) {
if (onLoadFct[i] != undefined) {
(eval(onLoadFct[i].fct))();
}
i++;
}
}
}
function setOnLoad(priority,fct) {
var pos = onLoadFct.length;
onLoadFct[onLoadFct.length] = {}
onLoadFct[pos].priority = priority;
onLoadFct[pos].fct = fct;
}
</script>
</head>
<body margintop="0" bgcolor="#336699" marginleft="0" onLoad="runOnLoad()">
<table border="0" width="100%" bgcolor="#336699">
<tr>
<td>
<table border="0" width="100%">
<tr>
<td width="300"><img src="${Portal/Uri/Context/resource/portal-layout/images/mynovell_logo.jpg}"/></td>
<td width="65"><a href="../../portlet/Personalize"><img border="0" src="${Portal/Uri/Context/resource/portal-layout/images/mynovell_personalize.gif}"/></a></td>
<td width="65"><a href=""><img border="0" src="${Portal/Uri/Context/resource/portal-layout/images/mynovell_myportal.gif}"/></a></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<s3-component id="PhoneList" instance="page_phome"/>
<table border="0" height="500" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td rowspan="3" width="165">
<table width="100%" height="95%" border="0">
<tr>
<td valign="top">
<!-- Here is section 1 where portal components will go at runtime -->
<s3-section id="1" style="padding-bottom:5px;"/>
</td>
</tr>
</table>
</td>
<td width="65" valign="bottom" style="background:url(${Portal/Uri/Context/resource/portal-layout/images/mynovell_topleft.gif}) no-repeat top left;"></td>
<td height="42" style="background:url(${Portal/Uri/Context/resource/portal-layout/images/mynovell_top.gif}) top left;"></td>
<td width="61" height="42" valign="bottom" style="background:url(${Portal/Uri/Context/resource/portal-layout/images/mynovell_topright.gif}) no-repeat top right;"></td>
</tr>
<tr>
<td style="background:url(${Portal/Uri/Context/resource/portal-layout/images/mynovell_left.gif}) repeat-y top left;"></td>
<td bgcolor="white" valign="top">
<!-- Here is section 2 where portal components will go at runtime -->
<s3-section id="2"/>
</td>
<td style="background:url(${Portal/Uri/Context/resource/portal-layout/images/mynovell_right.gif}) repeat-y top right;"></td>
</tr>
<tr>
<td width="65" height="66" valign="top" style="background:url(${Portal/Uri/Context/resource/portal-layout/images/mynovell_bottomleft.gif}) no-repeat top left;"></td>
<td style="background:url(${Portal/Uri/Context/resource/portal-layout/images/mynovell_bottom.gif}) repeat-x bottom left;"></td>
<td width="61" height="66" valign="top" style="background:url(${Portal/Uri/Context/resource/portal-layout/images/mynovell_bottomright.gif}) no-repeat top right;"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
exteNd DirectorAPIは、レイアウトを操作する2つのインタフェースを提供します。
EbiLayoutManagerは、EbiLayoutInfoオブジェクトにアクセスするメソッドを提供します。EbiLayoutInfoは、表示名および説明を含め、レイアウトに関するさまざまな種類の情報を取得するメソッドを提供します。 EbiLayoutInfoインタフェースは、レイアウトのプレビューおよびサムネイルイメージのURIへのアクセスも提供します。
EbiLayoutManagerオブジェクトにアクセスするには、PortalサブシステムのEboFactoryクラスのgetLayoutManager()メソッドを使用する必要があります。
Copyright © 2004 Novell, Inc. All rights reserved. Copyright © 1997, 1998, 1999, 2000, 2001, 2002, 2003 SilverStream Software, LLC. All rights reserved. more ...