ウィジェットマニュアル [PDF:484KB]

OpenCms ウィジェットマニュアル
株式会社ジークス
（2010 年 10 月 25 日更新）
2
目次
1 ウィジェットとは................................................................................................................5
2 基本系ウィジェット ............................................................................................................6
2-1 StringWidget --- テキストフィールド（一行入力欄） .................................................................. 6
2-2 StringWidgetPlaintext --- タグ禁止テキストフィールド（一行入力欄） .................................... 6
2-3 BooleanWidget --- 単一選択チェックボックス .............................................................................. 6
2-4 MultiCheckboxWidget --- 複数選択チェックボックス .................................................................. 7
2-5 RadioSelectWidget --- ラジオボタン.............................................................................................. 8
2-6 RadioButtonWidget --- ラジオボタン（多項目用） ...................................................................... 8
2-7 SelectorWidget --- プルダウン・リスト ......................................................................................... 9
2-8 MultiSelectWidget --- 複数選択セレクトボックス ........................................................................ 9
2-9 TextareaWidget --- テキストエリア（複数行入力欄） ................................................................ 10
2-10 TextareaWidgetPlaintext --- タグ禁止テキストエリア（複数行入力欄）................................ 10
2-11 DisplayWidget --- テキスト表示のみ.......................................................................................... 10
3 リッチ GUI 系ウィジェット .............................................................................................11
3-1 HtmlWidget --- HTML エディタ................................................................................................... 11
3-2 DateTimeWidget --- カレンダーからの日付入力 ......................................................................... 14
3-3 ColorpickerWidget --- カラーパレットからの色選択................................................................... 16
3-4 CategoryWidget --- 多階層のカテゴリ選択プルダウンリスト..................................................... 16
3-5 ComboWidget --- コンボボックス ................................................................................................ 17
4 リソース選択系ウィジェット............................................................................................18
4-1 VfsFileWidget --- リソース・ツリーからのファイル（フォルダ）選択...................................... 18
4-2 VfsImageWidget --- イメージギャラリーからの画像選択・拡大縮小・クリッピング ............... 19
4-3 XmlContentSelectWidget --- <cms:contentload/>タグ準拠の構造化コンテンツ選択 ................ 20
4-4 ResourceSelectWidget --- 検索条件指定によるファイル（フォルダ）選択................................ 21
4-5 ResourceStatusWidget --- リソースのステータス表示 ............................................................... 22
4-6 NavPosWidget --- NavPos プロパティによる並び順変更 ............................................................ 23
5 キャラリー系ウィジェット ...............................................................................................24
5-1 ImageGalleryWidget --- イメージギャラリーからの画像選択 .................................................... 24
5-2 DownloadGalleryWidget --- ダウンロードギャラリーからのバイナリファイル選択................. 24
5-3 LinkGalleryWidget --- リンクギャラリーからの外部リンク選択 ............................................... 24
5-4 TableGalleryWidget --- テーブルギャラリーからの表組み選択.................................................. 25
5-5 HtmlGalleryWidget --- HTML ギャラリーからの HTML 部品選択............................................ 25
3
6 アカウント系ウィジェット ...............................................................................................26
6-1 UserWidget --- ユーザー選択........................................................................................................ 26
6-2 GroupWidget --- グループ選択 ..................................................................................................... 26
6-3 OrgUnitWidget --- 組織ユニット選択 .......................................................................................... 27
6-4 PrincipalWidget --- 権限選択 ....................................................................................................... 27
7 データベース系ウィジェット............................................................................................28
7-1 DBRadioButtonWidget --- ラジオボタン（データベース連携） ................................................ 28
7-2 DBSelectWidget --- プルダウンリスト（データベース連携） .................................................... 29
7-3 DBMultiCheckboxWidget --- チェックボックス（データベース連携）..................................... 29
7-4 DBMultiSelectWidget --- 複数選択セレクトボックス（データベース連携） ............................ 29
7-5 DBComboWidget --- コンボボックス（データベース連携）....................................................... 30
8 独自ウィジェットの開発 ...................................................................................................31
8-1 ウィジェットの作成方法 ............................................................................................................... 31
8-2 CmsInputWidget のソースコード................................................................................................. 32
4
1 ウィジェットとは
OpenCms でのウィジェットとは、構造化コンテンツの入力フォームの種類の事を指します。
構造化コンテンツでは、ページの入力項目を XML で定義し、自由にカスタマイズできます。
入力項目の一つ一つをウィジェットと呼び、既にいくつかの種類のウィジェットが提供されています。
ウィジェットには、それぞれ名前が定義されており、XML でその名前を指定することで、入力フォー
ムを作成します。
<layouts>
<layout element="タイトル" widget="StringWidget"/>
<layout element="更新日" widget="DateTimeWidget"/>
<layout element="カテゴリ" widget="RadioButtonWidget"
configuration="新着ニュース|製品情報|IR 情報|会社情報|その他"/>
<layout element="メーカー名" widget="StringWidget"/>
<layout element="本文" widget="HtmlWidget"/>
<layout element="画像" widget="ImageGalleryWidget"/>
<layout element="キャプション" widget="StringWidget"/>
<layout element="ダウンロードファイル" widget="DownloadGalleryWidget"/>
</layouts>
5
XML には、各ウィジェットの configuration にパラメータを指定することが出来ます。
どんなパラメータが指定できるかは、各ウィジェットに依存します。
また、ウィジェットは Java のクラスで作成されており、独自のウィジェットクラスを作成すれば、
OpenCms 上で利用する事が出来ます。
2 基本系ウィジェット
2-1 StringWidget --- テキストフィールド（一行入力欄）
テキストフィールド（一行入力欄）を表示します。
2-2 StringWidgetPlaintext --- タグ禁止テキストフィールド（一行入力欄）
テキストフィールド（一行入力欄）を表示します。
StringWidget はタグを入力できますが、StringWidgetPlaintext の場合は、タグを入力すると、保存時
にタグのみ消去されます。
2-3 BooleanWidget --- 単一選択チェックボックス
チェックボックスを一つ表示します。チェックを入れると true という文字列がデータに保存され、チ
ェックが無い場合は false という文字列が保存されます。
configuration に文字列を指定すると、チェックボックスの横にラベルを表示させることが出来ます。
<layout element="BooleanWidget" widget="BooleanWidget"
configuration="オススメアイコンを表示" />
また、サイトごとに違うラベルを指定したい場合は、以下のように、configuration にサイトごとでラ
ベルを指定します。
6
<layout element="BooleanWidget" widget="BooleanWidget"
configuration="$site=/sites/default|お勧めアイコンを表示,/sites/site1|PickUp アイコンを表示,*|
アイコンを表示"/>
サイト別に指定する場合は、"$site="ではじめます。
そして、(サイトパス)|(ラベル)のペアをカンマ区切りで指定します。
想定外のサイトパス用のラベルを指定したい場合は、サイトパスのところを"*"にします。
2-4 MultiCheckboxWidget --- 複数選択チェックボックス
複数選択のチェックボックスを表示します。
実際のデータは、チェックを入れた項目の値が、カンマ区切りで保存されます。
選択項目は configuration に以下のように|区切りで指定します。
初期値としてチェックを入れたい項目には、項目名の後ろに*を付与します。
<layout element="MultiCheckboxWidget" widget="MultiCheckboxWidget"
configuration="PC*|本|車" />
ただ、上記の簡略した形式の場合、表示される選択ラベル名と、保存されるデータが同じ値になります。
よって、保存される時も、"PC,車"のように、ラベルがそのまま文字列として保存されます。
ラベルと値を別にしたい場合は、以下のように指定します。
<layout element="MultiCheckboxWidget" widget="MultiCheckboxWidget"
configuration="value='1' option='PC' default='true'|value='2' option='本'|value='3' option='車' " />
値を value、ラベルを option に指定します。デフォルト値は default に ture を指定します。
この場合、保存される時は、"1,3"のように、値がそのまま文字列として保存されます。
7
2-5 RadioSelectWidget --- ラジオボタン
単一選択のラジオボタンを表示します。
選択項目は configuration に以下のように|区切りで指定します。
初期値としてチェックを入れたい項目には、項目名の後ろに*を付与します。
<layout element="RadioSelectWidget" widget="RadioSelectWidget" configuration="PC|本|車*" />
ただ、上記の簡略した形式の場合、表示される選択ラベル名と、保存されるデータが同じ値になります。
よって、保存される時も、"車"のように、ラベルがそのまま文字列として保存されます。
ラベルと値を別にしたい場合は、以下のように指定します。
<layout element="RadioSelectWidget" widget="RadioSelectWidget"
configuration="value='1' option='PC' default='true'|value='2' option='本'|value='3' option='車' " />
値を value、ラベルを option に指定します。デフォルト値は default に ture を指定します。
この場合、保存される時は、"3"のように、値がそのまま文字列として保存されます。
2-6 RadioButtonWidget --- ラジオボタン（多項目用）
RadioSelectWidget と同様、単一選択のラジオボタンを表示します。
RadioSelectWidget は、縦一列に選択項目が並びますが、RadioButtonWidget は横に並びます。
一行に表示される項目は 6 つまでで、それ以降は次の行に表示されます。
configuration の指定方法は RadioSelectWidget と同様です。
8
2-7 SelectorWidget --- プルダウン・リスト
単一選択のセレクトボックスを表示します。
選択項目は configuration に以下のように|区切りで指定します。
初期値として選択済みにしたい項目には、項目名の後ろに*を付与します。
<layout element="SelectorWidget" widget="SelectorWidget" configuration="PC|本|車*" />
ただ、上記の簡略した形式の場合、表示される選択ラベル名と、保存されるデータが同じ値になります。
よって、保存される時も、"車"のように、ラベルがそのまま文字列として保存されます。
ラベルと値を別にしたい場合は、以下のように指定します。
<layout element="SelectorWidget" widget="SelectorWidget"
configuration="value='1' option='PC' default='true'|value='2' option='本'|value='3' option='車' " />
値を value、ラベルを option に指定します。デフォルト値は default に ture を指定します。
この場合、保存される時は、"3"のように、値がそのまま文字列として保存されます。
2-8 MultiSelectWidget --- 複数選択セレクトボックス
複数選択のセレクトボックスを表示します。
実際のデータは、チェックを入れた項目の値が、カンマ区切りで保存されます。
選択項目は configuration に以下のように|区切りで指定します。
初期値として選択済みにしたい項目には、項目名の後ろに*を付与します。
<layout element="MultiSelectWidget" widget="MultiSelectWidget" configuration="PC*|本|車" />
ただ、上記の簡略した形式の場合、表示される選択ラベル名と、保存されるデータが同じ値になります。
よって、保存される時も、"PC,車"のように、ラベルがそのまま文字列として保存されます。
ラベルと値を別にしたい場合は、以下のように指定します。
9
<layout element="MultiSelectWidget" widget="MultiSelectWidget"
configuration="value='1' option='PC' default='true'|value='2' option='本'|value='3' option='車' " />
値を value、ラベルを option に指定します。デフォルト値は default に ture を指定します。
この場合、保存される時は、"1,3"のように、値がそのまま文字列として保存されます。
2-9 TextareaWidget --- テキストエリア（複数行入力欄）
テキストエリア（複数行入力欄）を表示します。
デフォルトでは、縦 4 行、横 60 の入力欄が表示されますが、configuration で縦の行数を数値で指定す
ることが出来ます。
<layout element="TextareaWidget" widget="TextareaWidget" configuration="10" />
2-10 TextareaWidgetPlaintext --- タグ禁止テキストエリア（複数行入力欄）
テキストエリア（複数行入力欄）を表示します。
TextareaWidge はタグを入力できますが、TextareaWidgetPlaintext の場合は、タグを入力すると、保
存時にタグのみ消去されます。
2-11 DisplayWidget --- テキスト表示のみ
このウィジェットは、入力用のものではなく、説明用テキストを表示する為のものです。
configuration に表示するテキストを指定して下さい。configuration を指定しない場合は、そのエレメ
ントに入力されていた値がそのまま表示されます。
<layout element="DisplayWidget" widget="DisplayWidget"
configuration="※ 入力は公開の 2 日前に完了して下さい。" />
10
3 リッチ GUI 系ウィジェット
3-1 HtmlWidget --- HTML エディタ
HTML エディタを表示します。configuration にはさまざまな値を指定できます。
ボタンの
ボタンの表示・
表示・非表示
デフォルトでは非表示となっているボタンは、ボタン名を指定することで表示させる事が出来ます。
ボタン名を複数指定するときは、カンマ区切りで指定します。
<layout element="HtmlWidget" widget="HtmlWidget" configuration="anchor, editorlink, find,
formatselect, fullpage, image, link, replace, source, spellcheck, style, table, unlink, imagegallery,
downloadgallery, htmlgallery, linkgallery, tablegallery" />
11
undo
元に戻すボタンを表示します。
redo
やり直しボタンを表示します。
find
検索ボタンを表示します。
replace
置き換えボタンを表示します。
selectall
すべて選択ボタンを表示します。
removeformat
フォーマット削除ボタンを表示します。
cut
切り取りボタンを表示します。
copy
コピーボタンを表示します。
paste
貼り付けボタンを表示します。
bold
太字ボタンを表示します。
italic
斜体ボタンを表示します。
underline
下線ボタンを表示します。
strikethrough
打ち消し線ボタンを表示します。
subscript
添え字ボタンを表示します。
superscript
上付き文字ボタンを表示します。
alignleft
左揃えボタンを表示します。
aligncenter
中央揃えボタンを表示します。
alignright
右揃えボタンを表示します。
justify
両端揃えボタンを表示します。
orderedlist
段落番号の追加/削除ボタンを表示します。
unorderedlist
箇条書きの追加/削除ボタンを表示します。
outdent
インデント解除ボタンを表示します。
indent
インデントボタンを表示します。
source
ソース表示ボタンを表示します。
formatselect
フォーマット選択プルダウンリストを表示します。
style
スタイル選択プルダウンリストを表示します。但し、これを指定した場合は、
stylesxml:で選択項目を定義したスタイルシートを指定する必要があります。
例）
configuration="style,
stylesxml:/system/workplace/resources/editors/fckeditor/fckstyles.xml"
editorlink
リンク挿入/編集ボタンを表示します。
link
リンクボタンを表示します。
anchor
アンカー挿入/編集ボタンを表示します。
unlink
リンク削除ボタンを表示します。
imagegallery
イメージギャラリー（画像の挿入や編集）を起動するボタンを表示します。
12
downloadgallery
ダウンロードギャラリー（ファイルの挿入/編集）を起動するボタンを表示します。
linkgallery
リンクギャラリー（外部リンクの挿入や編集）を起動するボタンを表示します。
htmlgallery
HTML ギャラリー（HTML の挿入や編集）を起動するボタンを表示します。
tablegallery
テーブルギャラリー（テーブルの挿入や編集）を起動するボタンを表示します。
table
テーブル挿入/編集ボタンを表示します。
specialchar
特殊文字挿入ボタンを表示します。
print
印刷ボタンを表示します。
spellcheck
スペルチェックボタンを表示します。
fullpage
編集領域最大化ボタンを表示します。
フォルトでは、以下のボタンが既に表示状態になっています。
undo, redo, selectall, removeformat, cut, copy, paste, bold, italic, underline, strikethrough, subscript,
superscript, alignleft, aligncenter, alignright, justify, orderedlist, unorderedlist, outdent, indent,
specialchar, print, fitwindow
逆に、表示状態となっているボタンを非表示にする場合は、hidebuttons:でボタン名を指定します。
hidebuttons:に複数のボタンを指定するときは、セミコロン区切りで指定します。
<layout element="HtmlWidget" widget="HtmlWidget"
configuration="imagegallery, downloadgallery, hidebuttons: specialchar; print; fitwindow " />
13
編集領域の
編集領域のサイズ変更
サイズ変更
編集領域の高さは、デフォルトでは 260px になっています。
これを変更する場合は、height:で高さを指定します。
<layout element="HtmlWidget" widget="HtmlWidget"
configuration="height:400px, imagegallery, downloadgallery" />
編集領域に
編集領域にスタイルシートを
スタイルシートを適用
編集領域にスタイルシートを適用したい場合は、css:で CSS のパスを指定します。
<layout element="HtmlWidget" widget="HtmlWidget"
configuration="css:/common/css/main.css, imagegallery, downloadgallery " />
3-2 DateTimeWidget --- カレンダーからの日付入力
カレンダーからの入力補助機能を持った、テキストフィールドを表示します。
テキストフィールドの右にカレンダーアイコンが表示され、クリックすると、カレンダーが起動します。
保存されるデータは、日付フォーマットに依存した文字列ではなく、UNIX TIME の long 値です。
例えば、"1272201122000"のような数値が文字列として保存されます。
※ 単位はミリ秒なので、通常の UNIX TIME が 1000 倍された値になるので注意して下さい。
configuration には、以下の値を指定することが出来ます。
singleClick
true を指定すると、日付を選択した時点で入力欄に日付がセットされ、カレンダ
ーが閉じます。
false を指定すると、日付を選択した時点で入力欄に日付がセットされますが、
カレンダーは閉じられません。
デフォルトは、false です。
14
weekNumbers
true を指定すると、カレンダーの左端に、その年の 1/1 からの週の数を
表示します。デフォルトは、false です。
mondayFirst
月曜日を週の最初（カレンダーの左端）に表示します。
デフォルトは、true です。
showsTime
true を指定すると、時刻を表示する欄があらわれ、日付だけでなく、時間も入力
できるようになります。デフォルトは、true です。
<layout element="DateTimeWidget" widget="DateTimeWidget"
configuration="singleclick=true|mondayFirst=false|showTime=false" />
このウィジェットの入力値をバリデーションで検証する場合は注意が必要です。
入力された書式をチェックしようとしても、文字列から long 型の数値に変換された後にバリデーショ
ンにわたってきますので、書式チェックは出来ません。
ただ、文字列から long 型の数値に変換する途中でエラーとなった場合は、以前の long 値がわたってき
ますが、最後に半角スペースが付与されているので、全て数字か、最後に半角スペースが付与されてい
るかの違いで、エラーがあったかどうかの判別は付ける事が出来ます。
15
3-3 ColorpickerWidget --- カラーパレットからの色選択
カラーパレットからの入力補助機能を持った、テキストフィールドを表示します。
テキストフィールドの右にカラーアイコンが表示され、クリックすると、カラーパレットが起動します。
保存されるデータは、#000000 などの色情報の文字列です。
（例えば、"1272201122000"のような数値が文字列として保存されます。）
尚、このウィジェットを利用する場合は、データタイプは OpenCmsColor でなくてはなりません。
OpenCmsString でもエラーとなり操作が出来なくなります。
また、#000000 以外のフォーマットのデータが入っているエレメントを、途中で ColorpickerWidget
に変更した場合も、エラーになりますので、事前に#000000 形式のデータに変換しておく必要がありま
す。
3-4 CategoryWidget --- 多階層のカテゴリ選択プルダウンリスト
多階層のカテゴリを選択するプルダウンが表示されます。
プルダウンを選択した時に、さらに子となるカテゴリが存在すれば、その右に子カテゴリのプルダウン
が、次々に現れます。
カテゴリは、/system/categories/の下にフォルダを作成していくことで管理しますが、このプルダウン
で選択したデータは、その選んだカテゴリ・フォルダのパス（例えば、/system/categories/av/audio/）
として保存されます。
16
このウィジェットは、configuration で指定できるパラメータがあります。
category
カテゴリの開始位置を指定します。
例えば、"/av"と指定すると、/system/categories/av/以下のカテゴリから選択可能
になります。
OpenCms は、全サイトでカテゴリ・ツリーを一つしかもてないので、カテゴリを
大きな分類で分けた上で、途中の階層から使用する運用をお勧めします。
property
category にパスを指定する代わりに、プロパティに登録されたパスを使用する場合
は、property にそのプロパティ名を指定します。
category でパスを指定すると、そのリソースタイプでカテゴリの選択範囲が固定と
なりますが、property を使用すると、ページによって可変にする事が出来ます。
onlyleafs
true を指定すると、末端のカテゴリまで選択しなければエラーとなります。
途中のカテゴリまでの選択でも、保存できるようにしたい場合は false を指定しま
す。
これらのパラメータを複数同時に指定する場合は、|で区切って指定します。
<layout element="CategoryWidget" widget="CategoryWidget"
configuration="onlyleafs=true|property=category" />
3-5 ComboWidget --- コンボボックス
単一選択のコンボボックスを表示します。
プルダウンから値を選択することも出来れば、直接文字を入力する事も出来ます。
選択項目は configuration に以下のように|区切りで指定します。
configuration でのデフォルト値は指定できませんので、XSD のデフォルト値の定義を利用して下さい。
<layout element="ComboWidget" widget="ComboWidget" configuration="PC|本|車" />
また、以下のように help を使用して説明テキストを指定することも可能です。
<layout element="ComboWidget" widget="ComboWidget"
configuration=" value='PC' help='PC に興味がある。' |
value='本' help='本に興味がある。' | value='車' help='車に興味がある。' " />
17
4 リソース選択系ウィジェット
これらは、リソース（ファイルやフォルダ）を選択して保存するウィジェットです。
これらのウィジェットを使用するとき、そのエレメント（入力項目）のデータタイプに注意して下さい。
データタイプに OpenCmsString を指定すると、パスの情報だけが保存されます。
そして、OpenCms に存在しないリソースを指定しても、手入力で http://～のように、外部のサーバー
のファイルパスを指定しても、問題なく保存されます。
しかし、OpenCmsVfsFile や OpenCmsVfsImage を指定した場合は、OpenCms 内に存在しないファイ
ルを選択するとエラーとなります。その代わり、これらのデータタイプを指定した場合、リソースのパ
ス情報だけでなく、そのリソースの ID（主キー）も同時に保存しますので、選択したリソースが、別
のフォルダに移動された場合や、リソースの名前が変更された場合でも、ここで選択したリソースのパ
スは自動的に変更され、手で修正する必要がありません。逆に、データタイプが OpenCmsString の場
合は、参照先のリソースを移動またはリネームした場合、リンク切れとなります。
OpenCmsVfsImage の場合は、さらに、画像をサムネイル化した時のサイズや、クリッピングした時の
座標の情報などを保持します。また、データタイプが OpenCmsVfsImage だとしても、画像以外のフ
ァイルを指定してエラーになる事はありません。
4-1 VfsFileWidget --- リソース・ツリーからのファイル（フォルダ）選択
18
リソース・ツリーからの入力補助機能を持った、テキストフィールドを表示します。
テキストフィールドの右に検索アイコンが表示され、クリックすると、リソース・ツリーが起動します。
保存されるデータは、ファイルやフォルダのパスです。
configuration に excludefiles を指定すると、ファイルは表示されず、フォルダのみ選択できるようにな
ります。hidesiteselector を指定すると、上段のサイト選択プルダウンリストが非表示になります。
また、最初に表示されるサイトを startsite で指定できます。
これらのオプションを複数指定するときは、|区切りで指定します。但し、startsite を指定するときは、
必ず先頭に記述して下さい。
<layout element="VfsFileWidget" widget="VfsFileWidget"
configuration="startsite=/sites/default|excludefiles|hidesiteselector" />
4-2 VfsImageWidget --- イメージギャラリーからの画像選択・拡大縮小・クリッピング
画像選択用のウィジェットです。
テキストフィールドの横に、イメージギャラリーを起動するボタンと、プレビューボタンが表示されま
す。このウィジェットは、画像のパスだけでなく、画像を拡大・縮小した時のサイズの情報や、クリッ
ピングした時の座標情報なども保持します。
VfsImageWidget を使用する場合は、データタイプを OpenCmsVfsImage にする必要があります。
configuration には、以下の値を JSON 形式で指定することが出来ます。
startup
ギャラリーを開いた時に、最初に表示させるフォルダを指定します。
例）configuration="{startup: '/demo_en/images/'}"
type
ギャラリーを開いた時に、初期表示されるタブを指定します。
'gallery'を指定するとギャラリー・タブを開いた状態になります。
'category'を指定するとカテゴリ・タブを開いた状態になります。
例）configuration="{type: 'gallery'}"
usedescription
VfsImageWidget 系のウィジェットの場合、true を指定すると入力フォームにフ
ァイル選択フォームだけでなく、デスクリプションの入力欄を表示します。
例）configuration="{usedescription: true}"
useformat
VfsImageWidget 系のウィジェットの場合、true を指定すると入力フォームにフ
ァイル選択フォームだけでなく、フォーマットの入力欄を表示します。このプル
ダウンの選択項目は、次の formatnames パラメータで指定します。
例）configuration="{useformat: true}"
19
formatnames
フォーマット欄の選択項目を定義します。（値）:（選択項目名）のペアを|区切
りで指定していきます。
例）configuration="{formatnames: 'imageleft:左ナビ用画像|imageright:右ナビ
用画像|imagetop:トップ画像'}"
formatvalues
formatnames で定義した選択項目に対応する値を指定します。縦幅と横幅の区
切り文字に、x を使用し、縦横比固定の場合には、縦横どちらかに?を使用して指
定します。
例）configuration="{formatvalues: ['150x?', '250x300', '?x250']}"
I_CmsImageWidgetDynamicConfiguration インターフェースをインプリメント
class
したクラスを指定します。startup、type、formatvalues の値を、動的にセット
したい場合は、独自実装したクラスをここに指定することが出来ます。
scaleparams
デフォルトのスケールパラメータを指定します。
例）configuration="{scaleparams: 'q:70,r:2,c:CCCC00'}"
configuration に複数のパラメータを指定する場合は以下のような書式になります。
configuration="{scaleparams: 'q:70,r:2,c:CCCC00', type: 'gallery', startup: '/demo_en/images/',
usedescription: true, useformat: true, formatnames: 'imageleft:左ナビ用画像|imageright:右ナビ用画
像|imagetop:トップ画像', formatvalues: ['150x?', '250x300', '?x250']}"
4-3 XmlContentSelectWidget --- <cms:contentload/>タグ準拠の構造化コンテンツ選択
構造化コンテンツのリソースをプルダウンから選択するためのウィジェットです。
configuration には、<cms:contentload/>タグと同じ記述で検索条件を指定することが出来ます。
データには選択したリソースのパスが保存されます。
<layout element="XmlContentSelectWidget" widget="XmlContentSelectWidget"
configuration="zx.allInFolder|/demo_en/today/news/news_%(number).html|ttnews|10" />
20
4-4 ResourceSelectWidget --- 検索条件指定によるファイル（フォルダ）選択
リソースのパスを、プルダウンから選択するためのウィジェットです。
configuration には、以下のフォーマットで検索条件を指定することが出来ます。
(対象フォルダのパス)|(リソースタイプ)|(ソート順)|(件数)
<layout element="ResourceSelectWidget" widget="ResourceSelectWidget"
configuration="/demo_en/*|folder, ttnews|date desc|20" />
対象フォルダのパスには、検索対象となるフォルダのパスを指定します。
普通にパスを指定すると、そのフォルダ直下のリソースを検索しますが、パスの最後に*を付けると、
サブフォルダのリソースも再帰的に検索します。
ファイルのパスには、%(opencms.uri) などのマクロが指定できます。
ファイルのパスを指定した場合は、その親フォルダが指定されたものとみなします。
リソースタイプには、検索対象のリソースタイプを指定します。
カンマ区切りで複数指定することも可能です。
ソート順には、以下の文字列を指定することが出来ます。
date
公開日の昇順にソートします。
path
パスの昇順にソートします。大文字・小文字の区別があります。
ignore
パスの昇順にソートします。大文字・小文字の区別はありません。
folder
パスの昇順にソートしますが、フォルダはファイルより上に表示します。大文字・小文
字の区別はありません。
それ以外の文字が指定された場合は、folder が指定されているものとして扱われます。
また、後ろに desc を付与すると、降順に並べる事が出来ます。
件数にはプルダウンに表示する最大リソース数を正の整数で指定します。
0 を指定すると、無制限となり、全件取得して表示します。
21
4-5 ResourceStatusWidget --- リソースのステータス表示
このウィジェットは、入力用のものではなく、編集中のリソースの状態を表示する為のものです。
リソースの状態によって、"変更なし", "変更あり", "新規", "削除"が表示されます。
また、非公開に設定されているリソースの場合、"（非公開）"が付与されます。
非公開でない場合、公開期限が設定されており、期限切れの場合、"（期限切れ）"が付与されます。
非公開でない場合、公開日がまだのリソースは、"（公開待）"が付与されます。
表示されるステータスの表記を変更したい場合は、置換のルールを configuration に記述します。
フォーマットは、(key1)=(value1)&(key2)=(value2)… です。但し、XSD に記述する場合は&という文
字がそのまま使えないので、&にエスケープする必要があります。
<layout element="ResourceStatusWidget" widget="ResourceStatusWidget"
configuration="新規=NEW&新規（期限切れ）=期限切れ NEW" />
また、置換のルールをテキストファイルに記述し、configuration にはそのパスを指定することも出来
ます。この場合、複数の XSD で共通した設定ファイルを持つ事が可能になり、また、サイト単位で別
のファイルを読ませる事も可能になります。
/common/map_status.txt
新規 = NEW
新規（期限切れ） = 期限切れ NEW
<layout element="ResourceStatusWidget" widget="ResourceStatusWidget"
configuration="/common/map_status.txt" />
22
4-6 NavPosWidget --- NavPos プロパティによる並び順変更
リソースのソート順に利用される NavPos プロパティの入力インターフェースを表示するウィジェット
です。
これは、リソースを右クリックして、コンテクストメニューからプロパティを選択した時に表示される
以下のダイアログの、「後に挿入」プルダウンと同じ機能です。
このウィジェットを使用する場合は、このエレメントと NavPos プロパティのマッピングを XSD に記
述して下さい。そうしなければ、ここで変更した値が NavPos プロパティに反映されないので、意味が
ありません。
23
5 キャラリー系ウィジェット
5-1 ImageGalleryWidget --- イメージギャラリーからの画像選択
イメージギャラリーから、画像を選択できるウィジェットです。
クリッピングやリサイズ機能を有効にする場合は、VfsImageWidget を使用して下さい。
configuration には、以下の値を JSON 形式で指定することが出来ます。
startup
ギャラリーを開いた時に、最初に表示させるフォルダを指定します。
例）configuration="{startup: '/demo_en/images/'}"
type
ギャラリーを開いた時に、初期表示されるタブを指定します。
'gallery'を指定するとギャラリー・タブを開いた状態になります。
'category'を指定するとカテゴリ・タブを開いた状態になります。
例）configuration="{type: 'gallery'}"
class
I_CmsGalleryWidgetDynamicConfiguration インターフェースをインプリメン
トしたクラスを指定します。startup、type の値を、動的にセットしたい場合は、
独自実装したクラスをここに指定することが出来ます。
configuration に複数のパラメータを指定する場合は以下のような書式になります。
configuration="{type: 'gallery', startup: '/demo_en/images/'}"
5-2 DownloadGalleryWidget --- ダウンロードギャラリーからのバイナリファイル選択
ダウンロードギャラリーから、バイナリファイルを選択できるウィジェットです。
configuration の指定方法は、ImageGalleryWidget を参照して下さい。
5-3 LinkGalleryWidget --- リンクギャラリーからの外部リンク選択
リンクギャラリーから、外部リンクを選択できるウィジェットです。
configuration の指定方法は、ImageGalleryWidget を参照して下さい。
24
5-4 TableGalleryWidget --- テーブルギャラリーからの表組み選択
テーブルギャラリーから、HTML の表組みを選択できるウィジェットです。
configuration の指定方法は、ImageGalleryWidget を参照して下さい。
5-5 HtmlGalleryWidget --- HTML ギャラリーからの HTML 部品選択
HTML ギャラリーから、HTML の部品を選択できるウィジェットです。
configuration の指定方法は、ImageGalleryWidget を参照して下さい。
25
6 アカウント系ウィジェット
6-1 UserWidget --- ユーザー選択
ユーザー一覧から、ユーザーID を選択できるウィジェットです。
configuration には、group と flags を渡す事が出来ます。
group にグループ名を指定すると、そのグループに所属しているユーザーのみが一覧表示されます。
グループの依存関係によって該当のグループに所属しているユーザーは含まれません。
flags には数値で、以下の値の論理和を指定します。
1
無効となっているユーザー
2
パスワードなどの自己管理権限の無いユーザー
32768
ウェブユーザー（2^15）
<layout element="UserWidget" widget="UserWidget" configuration="flags=2|group=Users" />
6-2 GroupWidget --- グループ選択
グループ一覧から、グループを選択できるウィジェットです。
configuration には、user と flags、oufqn を渡す事が出来ます。
user にユーザーID を指定すると、そのユーザーが所属しているグループのみが一覧表示されます。
oufqn には組織ユニットを指定します。
flags には数値で、以下の値の論理和を指定します。
1
無効となっているグループ
2
プロジェクトマネージャ・グループ
4
プロジェクトユーザー・グループ
1024
仮想グループ（2^10）
1048576
ロール（2^20）
<layout element="GroupWidget" widget="GroupWidget" configuration="user=Admin|flag=2" />
26
6-3 OrgUnitWidget --- 組織ユニット選択
組織ユニット一覧から、組織ユニットを選択できるウィジェットです。
configuration には、role を渡す事が出来ます。
6-4 PrincipalWidget --- 権限選択
組織ユニットを含めた、ユーザーやグループ、その他、アクセス権限の設定で利用される値を一覧から
選択できるウィジェットです。
configuration には、flags を渡す事が出来ます。
27
7 データベース系ウィジェット
これらは、ラジオボタンやチェックボックスなどのウィジェットですが、データベースに SQL を発行
し、取得したデータを、選択項目としてセットする事が出来ます。
7-1 DBRadioButtonWidget --- ラジオボタン（データベース連携）
DB から取得した値を選択項目に使用し、ラジオボタンを表示するウィジェットです。
configuration には、pool name と、SQL を|でつないで記述します。
<layout element="DBRadioButtonWidget" widget="DBRadioButtonWidget"
configuration="default|SELECT USER_ID, USER_NAME FROM CMS_USERS" />
pool name は、データベースの接続情報名で、default を指定すると、OpenCms のテーブルが存在する
データベースへ接続します。別のデータベースへ接続する場合は、そのデータベースへの接続情報を定
義し、その pool name を指定します。別のデータベースへ接続する方法は、
「OpenCms タグリファレ
ンス」の 2-19 query を参照して下さい。
SQL には、1 列目のカラムがラジオボタンの値、2 列目のカラムがラベルとして使用されます。
また、3 つ目のカラムは必須ではありませんが、デフォルト値として使用されます。
ページの新規作成時に、3 つ目のカラムに 1 が入っているボタンが選択状態になります。
また、以下のように、SQL にはマクロを使用する事が可能です。
<layout element="DBRadioButtonWidget" widget="DBRadioButtonWidget"
configuration="default|SELECT
USER_ID,
USER_NAME
FROM
CMS_USERS
WHERE
USER_LASTNAME = '%(currentuser.lastname)'" />
利用可能なマクロは、「OpenCms タグリファレンス」の 27 マクロ変数一覧を参照して下さい。
28
7-2 DBSelectWidget --- プルダウンリスト（データベース連携）
DB から取得した値を選択項目に使用し、プルダウン・リストを表示するウィジェットです。
configuration には、pool name と、SQL を|でつないで記述します。
プルダウンリストとなる以外は、使い方は DBRadioButtonWidget と同じです。
<layout element="DBSelectWidget" widget="DBSelectWidget"
configuration="default|SELECT USER_ID, USER_NAME, 0 FROM CMS_USERS" />
7-3 DBMultiCheckboxWidget --- チェックボックス（データベース連携）
DB から取得した値を選択項目に使用し、チェックボックスを表示するウィジェットです。
configuration には、pool name と、SQL を|でつないで記述します。
プルダウンリストとなる以外は、使い方は DBRadioButtonWidget と同じです。
<layout element="DBMultiCheckboxWidget" widget="DBMultiCheckboxWidget"
configuration="default|SELECT USER_ID, USER_NAME, 1 FROM CMS_USERS" />
7-4 DBMultiSelectWidget --- 複数選択セレクトボックス（データベース連携）
DB から取得した値を選択項目に使用し、複数選択可能セレクトボックスを表示するウィジェットです。
configuration には、pool name と、SQL を|でつないで記述します。
プルダウンリストとなる以外は、使い方は DBRadioButtonWidget と同じです。
<layout element="DBMultiSelectWidget" widget="DBMultiSelectWidget"
configuration="default|SELECT USER_ID, USER_NAME, 1 FROM CMS_USERS" />
29
7-5 DBComboWidget --- コンボボックス（データベース連携）
DB から取得した値を選択項目に使用し、コンボボックスを表示するウィジェットです。
configuration には、pool name と、SQL を|でつないで記述します。
<layout element="DBComboWidget" widget="DBComboWidget"
configuration="default|SELECT USER_NAME, USER_EMAIL FROM CMS_USERS" />
pool name は、データベースの接続情報名で、default を指定すると、OpenCms のテーブルが存在する
データベースへ接続します。別のデータベースへ接続する場合は、そのデータベースへの接続情報を定
義し、その pool name を指定します。別のデータベースへ接続する方法は、
「OpenCms タグリファレ
ンス」の 2-19 query を参照して下さい。
SQL には、1 列目のカラムがプルダウンの選択項目の値、2 列目のカラムが、選択項目の説明用のヘル
プ・テキストして使用されます。2 列目のカラムは必須ではありません。
また、以下のように、SQL にはマクロを使用する事が可能です。
<layout element="DBComboWidget" widget="DBComboWidget"
configuration="default|SELECT USER_NAME, USER_EMAIL FROM CMS_USERS WHERE
USER_LASTNAME = '%(currentuser.lastname)'" />
利用可能なマクロは、「OpenCms タグリファレンス」の 27 マクロ変数一覧を参照して下さい。
30
8 独自ウィジェットの開発
8-1 ウィジェットの作成方法
独自のウィジェットを作成する場合は、抽象クラス org.opencms.widgets.A_CmsWidget を継承したク
ラスを作成します。
HTML エディタ系のウィジェットを作成する場合は、 A_CmsWidget を継承した抽象クラス
org.opencms.widgets.A_CmsHtmlWidget を使用すると便利です。
ギャラリー系のウィジェットを作成する場合は、 A_CmsWidget を継承した抽象クラス
org.opencms.widgets.A_CmsGalleryWidget を使用すると便利です。
作成したクラスは、XSD の widget の部分に、パッケージ名を含めた完全なクラス名を指定すれば使用
できます。
<xsd:annotation>
<xsd:appinfo>
<layouts>
<layout element="Title" widget="org.opencms.widgets.MyWidget" />
</layouts>
</xsd:appinfo>
</xsd:annotation>
※ OpenCms 標準のウィジェットは、opencms-vfs.xml でエイリアス（別名）を定義しているので、
パッケージ名を含めた完全なクラス名を指定する必要はありません。
31
8-2 CmsInputWidget のソースコード
以下は、シンプルなテキストフィールドを表示する、CmsInputWidget のソースコードです。
package org.opencms.widgets;
import org.opencms.file.CmsObject;
import org.opencms.i18n.CmsEncoder;
public class CmsInputWidget extends A_CmsWidget {
public CmsInputWidget() {
this("");
}
public CmsInputWidget(String configuration) {
super(configuration);
}
public String getDialogWidget(CmsObject cms,
I_CmsWidgetDialog widgetDialog, I_CmsWidgetParameter param) {
String id = param.getId();
StringBuffer result = new StringBuffer(16);
result.append("<td class=¥"xmlTd¥">");
result.append("<input class=¥"xmlInput textInput");
if (param.hasError()) {
result.append(" xmlInputError");
}
result.append("¥"");
result.append(" name=¥"");
result.append(id);
result.append("¥" id=¥"");
result.append(id);
32
result.append("¥" value=¥"");
result.append(CmsEncoder.escapeXml(param.getStringValue(cms)));
result.append("¥">");
result.append("</td>");
return result.toString();
}
public I_CmsWidget newInstance() {
return new CmsInputWidget(getConfiguration());
}
}
最低限必要なのは、コンストラクタと、newInstance()、そして、getDialogWidget()メソッドです。
実際の入力フォームの HTML を出力するのは、getDialogWidget()メソッドになります。
param.getId()で、入力項目の一時的な ID が取得できますので、それを<input/>の name と id にセッ
トする必要があります。
入力されたデータは、param.getStringValue(cms)で文字列として取得できます。
ダブルクォーテーションなどをエスケープする必要がありますので、CmsEncoder.escapeXml()を使って
います。
尚、XSD の configuration で指定したパラメータは、getConfiguration()で文字列として取得する事
が出来ます。
※ 既存の Widget のソースをコピーして使用する場合は、newInstance()メソッドの中身も忘れずに書
き換えてください。そうしなければ、コピー元の Widget が実行されてしまいます。
33

Download Report