いつも使うときになんだったかな~、と忘れるので、まとめておく。
PLT.C.1 Links (Anchor)
特になし。デフォルトを使うのが良い。
PLT.C.2 Fonts
フォントのスタイル定義は、フォントの種類、サイズ、色、スタイルなどに影響します。
Style | Description |
portlet-font | 通常のフォント属性。普通の文字に適用 |
portlet-font-dim | ちょっと小さい文字。色も薄い。 |
補足:フォントのサイズを変えたければ、styleも使って、相対サイズで指定する。
PLT.C.3 Messages
テキスト同様に、メッセージのスタイル定義で、テキストと同様に、配置、ボーダー背景色など段落の描画に影響します。
Style | Description |
portlet-msg-status | 現在の操作に関するステータス 例、進行状況: 80% |
portlet-msg-info | ヘルプメッセージや追加情報の表示 |
portlet-msg-error | エラーメッセージ |
portlet-msg-alert | 警告メッセージ |
portlet-msg-success | 成功の確認メッセージ 例、作業完了 |
補足:Teeda Extension を利用しているなら、
<span id="allMessages" fatalClass="portlet-msg-error" errorClass="portlet-msg-error" warnClass="portlet-msg-alert" infoClass="portlet-msg-info"></span>
という感じで置けば良い。
PLT.C.4 Sections
セクションのスタイル定義で、table, div, span のようなセクションに関する配置、ボー多ー、背景色などの描画に影響します。
Style | Description |
portlet-section-header | セクションやテーブルのヘッダー |
portlet-section-body | テーブルセルの通常テキスト |
portlet-section-alternate | セルの各行のテキスト。たとえば、テーブルで一行ごとに違うスタイルを適用するときにportlet-section-bodyと共に利用 |
portlet-section-selected | 選択されたセルのテキストに適用 |
portlet-section-subheader | サブヘッダー |
portlet-section-footer | テーブルやセクションのフッター |
portlet-section-text | その他のテーブルのテキスト。ヘルプのテキストなどに適用。 |
PLT.C.5 Forms
フォーム要素の定義
Style | Description |
portlet-form-label | フィールドのラベルじゃない説明ラベルに使うテキスト |
portlet-form-input-field | ユーザー入力フィールドのテキスト |
portlet-form-button | ボタンのテキスト |
portlet-icon-label | アクションアイコンに加えて表示するテキスト |
portlet-dlg-icon-label | 標準アイコンに加えて表示するテキスト。例、OK や Cancel など |
portlet-form-field-label | フィールドのラベル。例えば、名前:[入力フィールド] という感じの「名前:」の部分 |
portlet-form-field | チェックボックスなどの、入力フィールドでないフィールドのテキスト |
補足:JSR 168 のこの部分はわかりにくい。WSRPの方に簡単な図がある。
PLT.C.6 Menus
メニュースタイルの定義で、メニュー構造のテキストや背景の見た目を定義している。
Style | Description |
portlet-menu | 背景色、色、マージンなどの一般メニュー設定 |
portlet-menu-item | 通常の選択されていないメニュー項目 |
portlet-menu-item-selected | 選択されたメニュー項目 |
portlet-menu-item-hover | マウスが上に来たときの、通常の選択されていないメニュー項目 |
portlet-menu-item-hover-selected | マウスが上に来たときの、選択されたメニュー項目 |
portlet-menu-cascade-item | 通常の選択されていない、サブメニューを持つメニュー項目 |
portlet-menu-cascade-item-selected | 選択されている、サブメニューを持つメニュー項目 |
portlet-menu-description | メニューの説明テキスト |
portlet-menu-caption | メニューのキャプション |
以上の感じである。WSRPには、portlet-section-* に加えて、portlet-table-* がある。まぁ、このスタイル定義は、ポータル側で提供しているが、万能ではないので、必要に応じて、コンテンツを表示するときに style 属性などで、指定してください。