5.2.3 画面テンプレートの種類と設定

ここでは,画面テンプレートの種類と設定方法について説明します。

次の表に画面テンプレートの種類を示します。テンプレートは組み合わせて使用します。

表5-2 画面テンプレートの種類

画面テンプレート名対象詳細
基本テンプレートポータル画面(レイアウトカスタマイズ画面以外)uCosminexus Portal Frameworkで標準実装しているテンプレートです。初期状態は,基本テンプレートが設定されています。
デザインテンプレートポータル画面(レイアウトカスタマイズ画面以外)ポータル全体の画面をグラフィカルなデザインに変更できるテンプレートです。
メニューベースタイトルバーテンプレートタイトルバー画面のタイトルバーをカスタマイズするために提供しているテンプレートです。このテンプレートを使用するためには,デザインテンプレートを設定しておく必要があります。
シンプルカスタマイザテンプレートレイアウトカスタマイズ画面レイアウト編集画面などをカスタマイズするために提供しているテンプレートです。このテンプレートを使用するためには,デザインテンプレートを設定しておく必要があります。
<この項の構成>
(1) 基本テンプレート
(2) デザインテンプレート
(3) メニューベースタイトルバーテンプレート
(4) シンプルカスタマイザテンプレート

(1) 基本テンプレート

uCosminexus Portal Frameworkで標準実装しているテンプレートで,デフォルトとして設定されています。

(a) 基本テンプレートの種類

基本テンプレートには,4種類のテンプレートが用意されています。

(b) 画面構成

基本テンプレート(ナビゲーションテンプレート)使用時の,ポータル画面の構成を次の図に示します。

図5-2 ポータル画面の構成(ナビゲーションテンプレートを使用した場合)

[図データ]

ユーザがログインやパスワード変更をするときには,ページテンプレートを使った画面が表示されます。ログインページの画面構成を次の図に示します。

図5-3 ログインページの画面構成

[図データ]

(2) デザインテンプレート

デザインテンプレートは,ポータル全体の画面をグラフィカルなデザインに変更できるテンプレートです。

(a) デザインテンプレートの種類

デザインテンプレートには,4種類のテンプレートが用意されています。

(b) デザインテンプレートの設定方法

デザインテンプレートは,uCosminexus Portal FrameworkのインストールディレクトリにあるJSPファイルを,プロジェクトホームのディレクトリにコピーして設定します。

デザインテンプレートの設定は,次の手順で行います。

  1. 設定のための準備をします。
    デザインテンプレートを設定するポータルサーバを停止します。
  2. プロジェクトディレクトリを退避します。
    ポータルプロジェクト配下の情報をあらかじめ別のディレクトリに退避させます。
  3. 画面テンプレートをコピーします。
    次のディレクトリ配下の情報をプロジェクトディレクトリに上書きコピーします。
    コピー元ディレクトリ
    {uCosminexus Portal Frameworkインストールディレクトリ}¥templates¥designdivision
    注意
    基本テンプレートおよびデザインテンプレートをすでに使用している環境から移行する際は,設定したテンプレートに対して同じ修正を加えてください。
  4. デザインテンプレートを編集します。
    次のディレクトリにあるファイルの内容を編集して色とスタイルを変更できます。変更できる内容については次のファイル内のコメントを参照してください。
    • {PROJECT_HOME}/WEB-INF/templates/jsp/layouts/html/default.jsp
    • {PROJECT_HOME}/WEB-INF/templates/jsp/layouts/html/SinglePortlet.jsp

(c) 画面構成

デザインテンプレート使用時の,ポータル画面の構成を次の図に示します。

図5-4 デザインテンプレートを使用時の画面構成

[図データ]

(3) メニューベースタイトルバーテンプレート

ポートレットのタイトルバーの部分をカスタマイズするために提供しているテンプレートです。なお,このテンプレートを使用できるWebブラウザは,Internet ExplorerまたはFirefoxです。

メニューベースタイトルバーテンプレートを設定すると,次のJSPファイルが上書きコピーされます。このため,すでに次のJSPファイルを編集して使用している場合は,メニューベースタイトルバーテンプレートに対して,同様の内容を再度編集してください。なお,メニューベースタイトルバーテンプレートを使用するには,デザインテンプレートを設定しておく必要があります。

メニューベースタイトルバーを設定するためのJSPファイル
  • EditScreenControl.jsp
  • FullScreenControl.jsp
  • TitleControl.jsp
  • TitlePortletControl.jsp
  • default.jsp
  • SinglePortlet.jsp

(a) 設定方法

次のディレクトリ配下の情報を,プロジェクトディレクトリに上書きコピーします。

コピー元ディレクトリ

{uCosminexus Portal Frameworkインストールディレクトリ}¥templates¥menubasetitlebar

(b) 画面構成

メニューベースタイトルバーテンプレート使用時の,タイトルバーの構成を次の図に示します。

図5-5 メニューベースタイトルバーテンプレート使用時のタイトルバーの構成

[図データ]

アイコン
アイコンは,ポートレット定義ファイル(jetspeed-config.jcfg)で指定されている画像ファイルを表示します。画像ファイルが指定されていないポートレットでは,アイコンは表示しません。ポートレット定義ファイル(jetspeed-config.jcfg)の指定方法については,「10.2.1 ポートレット定義ファイル(jetspeed-config.jcfg)」を参照してください。
タイトル
タイトル部分には,ポートレット定義ファイル(jetspeed-config.jcfg)の<title>タグに設定されている文字列を表示します。ポートレット定義ファイル(jetspeed-config.jcfg)の指定方法については,「10.2.1 ポートレット定義ファイル(jetspeed-config.jcfg)」を参照してください。
別画面表示ボタン
別画面表示ボタンは,ポートレットを新規ウィンドウに表示するためのボタンです。なお,標準APIポートレットの場合は,新規ウィンドウ表示機能をサポートしていないため,表示されません。
新規ウィンドウ表示機能
新規ウィンドウ表示機能とは,別画面表示ボタンまたはメニューの「新規ウィンドウ」を選択した場合に,ポートレットを新規ウィンドウとして開く機能です。新規ウィンドウ表示機能は,ポートレットごとに設定できます。設定方法については,「10.2.1 ポートレット定義ファイル(jetspeed-config.jcfg)」を参照してください。
メニューボタン
メニューボタンをクリックすると,ドロップダウンリストが表示され,ポートレットの最大化,最小化,編集画面の表示などが行えます。

図5-6 メニューベースタイトルバーのメニューの例

[図データ]
表示されるメニュー項目は,ポートレットの種類およびポートレットの状態によって異なります。ポートレットの種類ごとに,ポートレットの状態と表示されるメニュー項目の関係を次に示します。
標準APIポートレットの場合
標準APIポートレットの場合,ポートレットの状態は表示モードと表示サイズの組み合わせで構成されます。

表5-3 ポートレットの状態と表示されるメニュー項目の関係(標準APIポートレット)

ポートレットの状態表示されるメニュー項目
表示モード表示サイズビューヘルプ編集元に戻す最小化最大化閉じる
ビューモード(コンテンツが表示されている状態)通常表示(1画面上に複数のポートレットを表示している状態)×※1※2×※3※4
最大化表示×※1※2※3××
最小化表示×※1※2×※4
編集モード(編集画面が表示されている状態)通常表示※1××※3※4
最大化表示※1×※3××
最小化表示※1××※4
ヘルプモード(ヘルプ画面が表示されている状態)通常表示×※2×※3※4
最大化表示×※2※3××
最小化表示×※2×※4

(凡例) ○:表示されます。 ×:表示されません。

注※1 ポートレットアプリケーションDD(portlet.xml)のsupportsタグ内で,portlet-modeにHELPが定義されている場合だけ,表示されます。

注※2 ポートレットアプリケーションDD(portlet.xml)のsupportsタグ内で,portlet-modeにEDITが定義されている場合だけ,表示されます。

注※3 ポートレットが強制表示ポートレットの場合は表示されません。

注※4 次の場合には表示されません。

  • ポートレットが強制表示ポートレットの場合
  • ポータル画面にポートレットが一つだけ表示されている場合
  • ウェルカム画面の場合

標準APIポートレット以外のポートレットの場合

表5-4 ポートレットの状態と表示されるメニュー項目の関係(標準APIポートレット以外のポートレット)

ポートレットの状態表示されるメニュー項目
ヘルプ設定最小化元に戻す最大化新規ウィンドウ閉じる
通常表示状態(1画面上に複数のポートレットを表示している状態)※1※2※3×※4※5※6
最大化表示状態※1※2×※7×※5×
編集状態※1××××××
最小化表示状態※1××※4※5※6
新規ウィンドウ表示状態※1××××××

(凡例) ○:表示されます。 ×:表示されません。

注※1 ポートレット定義ファイル(jetspeed-config.jcfg)で,使用言語のヘルプが設定されている場合だけ,表示されます。各言語のヘルプを設定するプロパティは次のとおりです。

hptl.help.url.{言語コード}[-{国コード}[-{バリアント}]]

例えば,使用言語が日本語の場合は,ポートレット定義ファイル(jetspeed-config.jcfg)のhptl.help.url.ja,使用言語が英語の場合は,hptl.help.url.enを設定したときだけ表示されます。なお,使用言語が日本語の場合は,hptl.help.urlを設定している場合も表示されます。

注※2 ポートレット定義ファイル(jetspeed-config.jcfg)のhptl.EditModeで表示を有効にした場合だけ表示されます。

注※3 ポートレット定義ファイル(jetspeed-config.jcfg)のhptl.MinimizeModeで表示を有効にした場合だけ表示されます。

注※4 ポートレット定義ファイル(jetspeed-config.jcfg)のhptl.MaximizeModeで表示を有効(または指定なし)にした場合だけ表示されます。

注※5 ポートレット定義ファイル(jetspeed-config.jcfg)のhptl.NewWindowModeで表示を有効にした場合だけ表示されます。

注※6 ポートレット定義ファイル(jetspeed-config.jcfg)のhptl.CloseModeで表示を有効にした場合だけ表示されます。

注※7 ウェルカム画面の場合,遷移元の画面に戻ります。


(4) シンプルカスタマイザテンプレート

利用者レイアウトカスタマイザ画面をカスタマイズするために提供しているテンプレートです。

シンプルカスタマイザテンプレートを使用することで,画面デザインを直感的にわかりやすくし,表示をグラフィカルなデザインにできます。なお,シンプルカスタマイザテンプレートを使用するには,デザインテンプレートを設定しておく必要があります。

(a) 設定方法

前提条件
シンプルカスタマイザテンプレートを設定するには,デザインテンプレートが設定されていることが前提条件になります。
設定方法
次のディレクトリ配下の情報を,プロジェクトディレクトリに上書きコピーします。
コピー元ディレクトリ
{uCosminexus Portal Frameworkインストールディレクトリ}¥templates¥designcustomizer

(b) 画面構成

シンプルカスタマイザテンプレートを使用時の,レイアウトカスタマイザ画面の構成を次の図に示します。

操作方法については,マニュアル「uCosminexus Portal Framework ユーザーズガイド」を参照してください。

図5-7 レイアウトカスタマイザ画面(シンプルカスタマイザテンプレートを使用)

[図データ]

標準のレイアウトカスタマイザ画面とシンプルカスタマイザ画面の機能差異を次の表に示します。

表5-5 標準レイアウトカスタマイザ画面とシンプルカスタマイザ画面の機能差異

機能標準レイアウトカスタマイザ画面シンプルカスタマイザ画面
レイアウトの複製
(ユーザのタブ追加)
ユーザはタブを追加して,1レイアウト中に複数のタブを作成できる。ユーザはタブを追加して,1レイアウト中に複数のタブを作成できない。
複製したレイアウトの削除
(ユーザ追加のタブ削除)
ユーザは複製したレイアウト(作成したタブ)を削除できる。ユーザは複製したレイアウト(作成したタブ)を削除できない。※1
複製したレイアウトの移動
(ユーザ追加のタブ移動)
ユーザは複製したレイアウト(作成したタブ)を左右に移動できる。ユーザが複製したレイアウト(作成したタブ)を左右に移動できない。
レイアウトの初期化レイアウト単位に初期化できる(消しゴムアイコンを実装している)。レイアウト単位に初期化できない(消しゴムアイコンを実装していない)。
[設定完了]ボタン[設定完了]ボタンをクリックしたあと,[レイアウト編集画面]に戻る。[設定完了]ボタンをクリックしたあと,ホーム画面へ移動する。
動作環境設定動作環境設定が[レイアウト編集画面]内にある。動作環境設定が[動作環境設定画面]※2にある。
列追加,行追加列追加や行追加の操作は,各アンカーをクリックして行う。列追加や行追加の操作は,各ボタンをクリックして行う。
タブの表示テキストベースで表示する。画像を用いたグラフィカルなデザインで表示する。
ポートレットの追加方法[ポートレットの選択]画面※3で,一覧から追加したいポートレットを選択する。[ポートレットの選択]画面※3で,ポートレットグループツリー,またはポートレットの検索機能を使用して,追加したいポートレットを選択する。

注 利用者用レイアウトカスタマイザ画面の操作方法については,マニュアル「uCosminexus Portal Framework ユーザーズガイド」を参照してください。

注※1 タブの削除ボタンがないため,個々のタブを削除できません。「標準に戻す」ボタンで回避できます。

注※2 [動作環境設定画面]は,[レイアウト編集画面]にある[動作環境の設定]ボタンから表示します。

注※3 [ポートレットの選択]画面は,[レイアウト編集画面]にある[ポートレット追加]ボタン,[列追加]アンカー,または[行追加]アンカーから表示します。