10MB - JSF

1
著作権
本書の著作権は著者に帰属します。著者の許諾なく転載、配布は禁止します。
2
はじめに
PrimeFaces はヨーロッパのトルコにある PrimeTek Informatics 社が開発したオープンソ
ースのソフトウェアで、Java Server Faces 技術をベースにしたライブラリです。
PrimeFaces は Java Server Faces で Web アプリケーションを開発するときにテキスト入力、
カレンダー入力、ボタンなど各種の便利でカッコいいユーザーインターフェースがタグで
用意されています。最小のプログラミングですぐに使うことができます。
あなたは、たぶん Java Server Faces についてはある程度マスターしていて、よりカッコ
いいページを作りたいと思って PrimeFaces を知り、この本にたどり着いたのではないでし
ょうか。この本はそんなあなたにぴったりです。
本書は PrimeFaces のタグの使い方について、
「こんなところに使いたい」というサンプル
をあげて具体的に解説しています。PrimeFaces のデモサイトにあるサンプルなどを参考に
しましたが、デモサイトや PrimeFaces のマニュアルは解説が少なかったり、書かれている
ことが古かったり、矛盾がありました。本書にあるサンプルは執筆時点において実行でき
ることを著者自身が確認しています。
【想定している読者】
・Java プログラミングについて一般的な知識と経験をもっている
・Java Server Faces について使ったことがある
・統合開発環境 NetBeans または Eclipse などを使用しているまたはしたことがある
本書で使っている開発環境は以下のとおりです。
【動作確認環境】
・OS:
Windows8.1 Pro
・IDE:
NetBeans8.0.2
・JDK:
JDK1.8.0_45 64 ビットバージョン
・PrimeFaces
バージョン 5.2
・サーブレットコンテナ: GlassFish4.1
・ブラウザー:
Google Chrome バージョン 48
・その他必要ライブラリは文中に記載
3
【免責事項】
本書のサンプルコード等は今後の PrimeFaces、ブラウザー、OS および関連するソフトウェ
アのバージョンアップや不具合によって正常に動作しなくなる可能性は否定できません。
また、
本書の内容を業務等に応用したとき万一不具合が生じた場合でも著者および出版社、
販売者は一切責任を負いません。
2016 年 5 月川崎克巳
4
目次
1.
2.
3.
4.
5.
6.
7.
PrimeFaces とは ..........................................................................................................10
1.1.
特徴 ....................................................................................................................... 11
1.2.
入手とセットアップ ..............................................................................................12
1.3.
PrimeFaces とその他の JSF 実装製品 ................................................................15
テキスト系....................................................................................................................17
2.1.
inputText ..............................................................................................................19
2.2.
Watermark ...........................................................................................................21
2.3.
AutoComplete ......................................................................................................23
2.4.
Keyboard ..............................................................................................................31
2.5.
InputMask ............................................................................................................38
2.6.
Password ..............................................................................................................39
2.7.
InputTextarea ......................................................................................................42
2.8.
Inplace ..................................................................................................................47
2.9.
Editor ....................................................................................................................55
2.10.
OutputLabel .....................................................................................................60
2.11.
ResetInput ........................................................................................................62
2.12.
Spotlight ...........................................................................................................63
ラジオボタン系 ............................................................................................................66
3.1.
SelectOneRadio ....................................................................................................66
3.2.
radioButton ..........................................................................................................69
チェックボックス系 .....................................................................................................71
4.1.
SelectBooleanCheckbox.......................................................................................71
4.2.
SelectManyCheckbox ..........................................................................................76
4.3.
SelectCheckboxMenu ..........................................................................................78
リストとプルダウンメニュー系 ...................................................................................82
5.1.
SelectOneListbox .................................................................................................82
5.2.
MultiSelectListbox...............................................................................................88
5.3.
SelectOneMenu ....................................................................................................93
5.4.
SelectManyMenu .................................................................................................97
カレンダー系 ..............................................................................................................100
6.1.
Calendar .............................................................................................................100
6.2.
Schedule .............................................................................................................108
スピナー系.................................................................................................................. 115
7.1.
Spinner ............................................................................................................... 116
5
8.
スライダー系 .............................................................................................................. 118
8.1.
Slider .................................................................................................................. 118
8.2.
Rating .................................................................................................................121
9.
色系.............................................................................................................................122
9.1.
10.
ColorPicker .........................................................................................................122
スイッチ系 ..............................................................................................................126
10.1.
11.
inoutSwitch ....................................................................................................126
ボタン系..................................................................................................................129
11.1.
CommandButton ............................................................................................129
11.2.
Button .............................................................................................................133
11.3.
SelectBooleanButton .....................................................................................136
11.4.
SelectOneButton ............................................................................................137
11.5.
SelectManyButton .........................................................................................138
11.6.
SplitButton .....................................................................................................139
12.
リンク系..................................................................................................................142
12.1.
commandLink.................................................................................................142
12.2.
link ..................................................................................................................145
13.
リスト系..................................................................................................................146
13.1.
DataList ..........................................................................................................146
13.2.
OrderList ........................................................................................................151
13.3.
PickList ...........................................................................................................155
14.
画像系 .....................................................................................................................160
14.1.
GraphicImage .................................................................................................160
14.2.
ImageSwitch ...................................................................................................176
14.3.
Galleria ...........................................................................................................180
14.4.
PhotoCam .......................................................................................................185
14.5.
ImageCompare ...............................................................................................190
14.6.
ImageCropper.................................................................................................192
15.
特殊な表示系 ..........................................................................................................197
15.1.
Clock ...............................................................................................................198
15.2.
Diagram ..........................................................................................................199
16.
テーブル系 ..............................................................................................................205
16.1.
基本 DataTable ...............................................................................................209
16.2.
ページ切替可能な DataTable .........................................................................214
16.3.
ソート可能な DataTable.................................................................................217
16.4.
複数列でソート可能な DataTable ..................................................................220
6
16.5.
フィルター可能な DataTable .........................................................................221
16.6.
行が選択可能な DataTable .............................................................................232
16.7.
行が複数選択可能な DataTable......................................................................235
16.8.
列をグルーピングした DataTable ..................................................................237
16.9.
小計つき DataTable ........................................................................................240
16.10.
クリックで詳細表示できる DataTable...........................................................243
16.11.
編集可能な DataTable ....................................................................................246
16.12.
左右にスクロール可能な DataTable ..............................................................252
16.13.
条件によって色をつける DataTable ..............................................................254
16.14.
Collector ..........................................................................................................256
16.15.
DataExporter..................................................................................................261
17.
チャート系 ..............................................................................................................264
17.1.
PieChart..........................................................................................................267
17.2.
DonutChart ....................................................................................................274
17.3.
BarChart.........................................................................................................277
17.4.
LineChart .......................................................................................................283
17.5.
BubbleChart ...................................................................................................290
17.6.
OhlcChart .......................................................................................................293
17.7.
MeterGaugeChart ..........................................................................................298
17.8.
CombinedChart ..............................................................................................300
17.9.
MultipleAxis ...................................................................................................303
18.
メッセージ系 ..........................................................................................................307
18.1.
ConfirmDialog とメッセージ表示 ..................................................................307
18.2.
Message ..........................................................................................................314
18.3.
messages .........................................................................................................316
18.4.
NotificationBar...............................................................................................320
18.5.
progressBar ....................................................................................................322
19.
パネル（コンテナ）系 ............................................................................................326
19.1.
Layout、layoutUnit .......................................................................................326
19.2.
AccordionPanel、tab .....................................................................................335
19.3.
Carousel ..........................................................................................................339
19.4.
ContentFlow ...................................................................................................345
19.5.
Dashboard ......................................................................................................348
19.6.
DataGrid .........................................................................................................353
19.7.
dataScroller ....................................................................................................358
19.8.
FieldSet ...........................................................................................................362
7
19.9.
LightBox .........................................................................................................364
19.10.
OverlayPanel ..................................................................................................368
19.11.
Panel ...............................................................................................................371
19.12.
PanelGrid .......................................................................................................374
19.13.
PanelMenu .....................................................................................................376
19.14.
Ribbon、RibbonGroup ...................................................................................380
19.15.
ScrollPanel......................................................................................................385
19.16.
TabMenu .........................................................................................................387
19.17.
TabView ..........................................................................................................389
19.18.
TagCloud .........................................................................................................391
20.
ナビゲーション系 ...................................................................................................394
20.1.
Menu、SubMenu、MenuItem ......................................................................398
20.2.
MenuButton ...................................................................................................399
20.3.
MenuBar .........................................................................................................402
20.4.
MegaMenu ......................................................................................................404
20.5.
SlideMenu.......................................................................................................407
20.6.
TieredMenu ....................................................................................................409
20.7.
Ring ................................................................................................................. 411
20.8.
Toolbar ............................................................................................................417
20.9.
Tree、TreeNode..............................................................................................419
20.10.
TreeTable ........................................................................................................422
20.11.
Wizard .............................................................................................................426
20.12.
Breadcrumb ....................................................................................................432
20.13.
ContextMenu ..................................................................................................433
21.
Mac 風デザイン ......................................................................................................435
21.1.
Doc...................................................................................................................436
21.2.
Stack ...............................................................................................................439
21.3.
Growl...............................................................................................................442
22.
その他 .....................................................................................................................445
22.1.
Poll ..................................................................................................................448
22.2.
IdleMonitor .....................................................................................................450
22.3.
Mindmap.........................................................................................................451
22.4.
RemoteCommand ...........................................................................................457
22.5.
Draggable .......................................................................................................458
22.6.
Drop ................................................................................................................460
22.7.
Resizable .........................................................................................................463
8
22.8.
FileUpload ......................................................................................................465
22.9.
FileDownload .................................................................................................470
22.10.
Printer.............................................................................................................474
22.11.
Effect ...............................................................................................................476
22.12.
FeedReader.....................................................................................................478
22.13.
GMap ..............................................................................................................480
22.14.
Media ..............................................................................................................481
22.15.
Captcha ...........................................................................................................482
23.
テーマ .....................................................................................................................484
23.1.
テーマを変える ...............................................................................................485
9
1. PrimeFaces とは
ここでは主に PrimeFaces の入手、インストール方法について説明します。また、PrimeFa
ces は JavaServer Faces を実装した製品ですが、これ以外にも類似の製品が出ていますの
でその特徴比較にも触れていきます。
10
1.1.
特徴
PrimeFaces はさまざまな拡張機能を含んだ JSF のオープンソースのライブラリです。つぎ
のようなすぐれた特徴をもっています。
・リッチなコンポーネント(HtmlEditor, Dialog, AutoComplete, Charts ほか)
・Ajax が組み込まれている
• ライブラリは jar ファイルひとつにコンパクトにまとめられている。
• Atmosphere フレームワークによる Push 機能
• モバイルアプリケーション構築のための Mobile UI kit
• Skinning フレームワークを使った多彩なデザイン・テーマ
11
1.2.
入手とセットアップ
http://www.primefaces.org/downloads にアクセスして Community Downloads からバイナ
リーの jar ファイルをダウンロードします。
図 236 PrimeFaces のダウンロード
得られた jar ファイル、執筆時点では primefaces-5.2.jar を入手しましたので、これを N
etBeans IDE のプロジェクトウィンドウのライブラリで右クリックして[JAR/フォルダー
を追加]を実行して、この jar ファイルをライブラリに追加します。次のようになります。
NetBeans についてご存じない方は https://ja.netbeans.org/に日本語解説がありますの
でご覧ください。開発支援システムとサーバーやデータベースがワンパッケージでインス
トールできて設定もまったくいりません。私も以前は Eclipse を使ってサーバーに Tomcat
や Apache そしてデータベースに MySQL などを個別にインストールしてそれらをつなげる設
定でいくつかトラブルに会ったことがありますが、NetBeans ではトラブルに陥ったことは
ありません。絶対におすすめです。
12
図 237 jar ファイル追加
以上でセッティングは終わりです。PrimeFaces はこの jar ファイルを１つ入れれば OK な
のです。ただし次の表に挙げたように、いくつかの少数のタグでは別のライブラリに依存
しているものもありますので、その解説セクションで必要なライブラリも説明しますので
ご安心ください。この表で一番最初の行にある MyFaces か Mojarra が必須であるというこ
とについては、NetBeans をインストールするとその JSF 機能として Mojjara が入っていま
すので特に配慮する必要はありません。
☆表１依存ライブラリ
PrimeFaces タグや機能
必要なライブラリ
バージョン
JSF runtime
Apache MyFaces または
2.0, 2.1 or 2.2
Oracle Mojarra
DataExporter (PDF)
itext
2.1.7
DataExporter (Excel)
apache poi
3.7
FeedReader
rome
1.0
FileUpload
commons-fileupload
1.3
FileUpload
commons-io
2.2
PrimeFaces Push
atmosphere
2.3
Barcode
barcode4j-light
2.1
QR Code support for Barcode
qrgen
1.4
PrimeFaces は特別な設定は不要ですが、もし必要な場合には web.xml に次のような方法で
記述することもできます。これらは一般の人は気にしなくていいでしょう。
☆表２ web.xml での記述
Name
THEME
デフォルト
aristo
13
説明
アプリケーションのテーマ
mobile.THEME
null
PUSH_SERVER_URL
null
モバイル用のテーマ
PrimeFaces Push のためのカスタ
ムサーバーURL
SUBMIT
full
Ajax の送信モード
DIR
ltr
方向（文字の流れ）
RESET_VALUES
FALSE
True の場合には ajax でアップデー
トされた入力値はリセットされる
SECRET
CLIENT_SIDE_VALIDATION
primefaces
FALSE
暗号化のシークレットキー.
クライアントサイドのバリデーシ
ョン
UPLOADER
auto
アップローダーのモード指定。aut
o、native、commons が指定できる
TRANSFORM_METADATA
FALSE
ビーンのバリデーションメタデー
タを HTML のプロパティに変換する
LEGACY_WIDGET_NAMESPACE
FALSE
ウィジェットに対して PrimeFaces
の名前空間の方法、たとえば PF('w
idgetVar').method()のような形
で、widgetVar.method()を使ってア
クセスできるようにウィンドウの
スコープを可能にする。
FONT_AWESOME
FALSE
Awesome フォントアイコンを Enable
にする
14
1.3.
PrimeFaces とその他の JSF 実装製品
JSF は、Sun Microsystems が最初開発したものですが 2010 年に Oracle に買収されてか
らは Oracle が中心となって推進しています。提案し Java Community Process(JSR-127)で
仕様を策定したものです。JSR とは Java Specification Request のことで標準仕様案とし
て提案されたものを言います。JSR の番号も JSF のバージョンによって変わりますから、
現在の JSF2.2 は JSR-344 で仕様が規定されています。
JSF を実装しているソフトウエア数多くありますが有名で主なものは次のとおりです。
・Mojarra
図 jsf048
https://javaserverfaces.java.net/
現在の JSF 本家 Oracle が実装した無料のオープンソース製品です。Oracle の JavaEE サー
バーの GlassFish に標準で組み込まれています。本書で使っている開発支援システム NetB
eans でも GlassFish を標準として採用していますからここでは必然的に Mojarra を使いま
す。
・MyFaces
図 jsf051
http://myfaces.apache.org/
Apache のプロジェクトの１つで、JSF1.1 時代から最新の JSF2.2 まで継続して開発してい
るものです。開発スピードが速く、情報も充実しています。無料。
・PrimeFaces
図 jsf052
http://primefaces.org/index
トルコの PrimeTek Informatics 社が 2008 年から開発、提供しているオープンソースの JS
F を拡張したコンポーネントスイートです。つまり JSF と同じような使い勝手で、より便
利でデザインのよいユーザーインターフェースを提供しています。RichFaces や ICEfaces
15
も同様ですがその中でもこれが一番人気があるようです。本書でもこれを紹介します。
・RichFaces
図 jsf053
http://richfaces.jboss.org/
JBoss が開発している JSF 用のコンポーネントスイートで Ajax の機能を活用した点に特徴
があります。JBoss（ジェイボス）とは、Java EE アプリケーションサーバや Java による
オープンソースソフトウェア開発コミュニティです。
・ICEfaces
図 jsf054
http://www.icesoft.org/java/home.jsf
カナダのカルガリーにある ICEsoft Technologies, INC.が開発している JSF 用コンポーネ
ントスイートのオープンソース。これも PrimeFaces、RichFaces と同様にデザイン性と機
能性にすぐれたリッチなユーザーインターフェースコンポーネントです。
つぎの章からは PrimeFaces で用意されている各種コンポーネントについて、
サンプルを
作りながらわかりやすく紹介していきます。PrimeFaces のデモプログラム http://www.pr
imefaces.org/showcase/も参考にしていますがほとんど説明がないので初心者が見て理解
するのは難しいと思います。デモページは英語ですから私たち日本人にはややハードルが
あるかもしれません。
本書ではさらに良いサンプルに変えて解説も加えました。著者のダウンロードサイトか
ら本書のサンプルコードを無料でダウンロードできます。
次の章から PrimeFaces のコンポーネントを独自に種類分けしましたので、
順番に見てい
きましょう。
16
2. テキスト系
このグループはテキスト入力や表示、さらにエディターまで備えています。
inputText：テキスト入力
Watermark：テキスト入力欄にうすくヒントを表示
AutoComplete：テキスト入力のオートコンプリート
Keyboard：テキスト入力の際に補助としてキーボード表示
InputMask：電話番号や日付を入力しやすいようにフォーマットを付加
Password：パスワード入力。暗号化強度をビジュアル表示
InputTextarea：テキストエリア入力で自動サイズ調整、文字数カウンター付加
17
Inplace：表示中の文字列クリックでテキスト入力欄を表示
Editor：テキストエディター
OutputLabel：フォームの各入力要素にラベル付け
ResetInput：フォームリセット時の入力値クリア
Spotlight：警告メッセージなどをハイライト表示
18
4. チェックボックス系
SelectBooleanCheckbox：１個のチェックボックス
SelectManyCheckbox：複数のチェックボックス
SelectCheckboxMenu：初期状態ではプルダウンメニュー形式で表示
71
5. リストとプルダウンメニュー系
SelectOneListbox：選択肢をリストで表示するして１つだけ選べるようにするもの
MultiSelectListbox：選択肢が階層状に構成
SelectOneMenu：１つを選ぶプルダウンメニュー
SelectManyMenu：複数の選択肢を選択できるプルダウンメニュー
82
6. カレンダー系
Calendar：日にちを入力
Schedule：スケジュール表
100
7. スピナー系
Spinner：入力欄の右に上下の三角マークアイコンが出る
115
8. スライダー系
Slider：横や縦型のスライドバー
Rting：星マークなどをつけててレーティングする
118
8.1.
Slider
p:slider タグは横や縦のスライドバーを使って数値を入力するものです。このサンプル
は 4 種類のスライダーを表示しています。
最初の Basic というラベルの例は、次のように inputText と一緒に使われます。inputT
ext 欄に数字が表示されるのですが、それに対する入力方法が slider だということです。
inputText で数字が見えないとスライドバーだけでは正確な入力数字の認識が困難です。
これは Basic 的な使い方以外でも同様です。
２番目の例は step プロパティを使って増減ステップ幅を指定するものです。<p:slider
．
．
．step="10" />というように使います。
３番目の例はスライダーが縦に配置されるものです。プロパティ type="vertical"とし
ます。horizontal がデフォルトです。
４番目の例は diplay プロパティを指定することにより範囲を入力するものです。最小
値と最大値の入力値を受け取る要素は h:inputHidden 要素を２つ使っています。<p:slide
r for="range1,range2" display="range"．
．
．>というように for でそれらの inputHidden
要素の id を２つ指定します。diplay プロパティは値をどこに表示するかという表示先の
ものを示します。
このほかプロパティとして最小値と最大値を設定する minValue、
maxValue があります。
★slider.html
・・・
<h:form>
<h:panelGrid columns="1" style="margin-bottom: 10px">

<p:outputLabel for="basic" value="Basic:" />
<p:inputText id="basic" value="#{rangeBean.number1}" />
<p:slider for="basic" />
</h:panelGrid>

<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:outputLabel for="step" value="Step:" />
<p:inputText id="step" value="#{rangeBean.number2}" />
<p:slider for="step" step="10" />
</h:panelGrid>
<h:panelGrid columns="1" style="margin-bottom: 10px">

<p:outputLabel for="vertical" value="Vertical:" />
<p:inputText id="vertical" value="#{rangeBean.number3}" />
119
<p:slider for="vertical" type="vertical" />
</h:panelGrid>
<h:panelGrid columns="1" style="margin-bottom: 10px">

<h:outputText id="range" value="Between #{rangeBean.number4} and #{rangeBean.n
umber5}" />
<p:slider for="range1,range2" display="range" style="width: 400px" range="tru
e" displayTemplate="Between {min} and {max}" />
<h:inputHidden id="range1" value="#{rangeBean.number4}" />
<h:inputHidden id="range2" value="#{rangeBean.number5}" />
</h:panelGrid>
<p:commandButton value="Submit" />
</h:form>
・・・
★
図 321 実行結果
120
8.2.
Rating
p:rating タグはレーティングを入力するものです。たとえば amazon などでユーザーが
本の評価をするときに使います。
次の例は２つのレーティング入力を表示しています。
最初の例は Basic なもので、<p:rating value．．
． />と value プロパティで入力値を受
け取るマネージドビーンを指定します。表示されている星の一番左にある通行止め標識の
ようなものはレーティングをクリアするアイコンです。
２番目の例は stars プロパティで最大の星の数を指定しています。また cancel="false
"としていることからクリアボタンは表示されません。
★rating.xhtml
・・・
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Basic:" />
<p:rating value="#{rangeBean.number1}" />
<h:outputText value="Many Stars:" />
<p:rating value="#{rangeBean.number2}" stars="10" cancel="false"
</h:panelGrid>
<p:commandButton value="Submit" />
</h:form>
・・・
★
図 322 実行結果
121
/>
9. 色系
ColorPicker：色をピックアップして入力
122
10. スイッチ系
inputSwitch：ON か OFF か２つの値を入力する
126
11. ボタン系
commandButton：フォームの送信ボタン
button：汎用的なボタン
selectBooleanButton：ON か OFF かの２つの値を入力
selectOneButton：複数のボタンを表示して、１つだけ押せる
selectManyButton：複数のボタンを表示して、複数を押せる
129
12. リンク系
commandLink：フォームのコマンドボタンのリンク版
link：リンク作成
142
13. リスト系
dataList：リストを作る
orderList：順番を変えられるリスト
picklist：左側に表示されるリストの中から複数のものをピックアップ
146
14. 画像系
graphicImage：画像を表示
imageSwitch：スライドショーやマニュアルでの複数の画像切替
Galleria：スライドショーやマニュアルでの複数の画像切替（サムネール付き）
160
PhotoCam：カメラ画像を取り込む
ImageCompare：２つの画像を比較のために並べて表示
ImageCropper：画像の一部を切り取る
161
162
15. 特殊な表示系
Clock：ページ上に時計を表示する
Diagram：点などの要素と線で構成されるダイヤグラム
197
16. テーブル系
テーブル系は多機能な表を簡単に作るタグです。
DataTable：表を作る
DataTable：ページ切替可能なテーブル
DataTable：ソート可能なテーブル
DataTable：複数列でソート可能なテーブル
（画面は上記同様です）
DataTable：フィルター可能なテーブル
205
DataTable：行選択が可能なテーブル
DataTable：行が複数選択可能なテーブル
DataTable：列をグルーピング可能なテーブル
DataTable：小計つきテーブル
DataTable：クリックで詳細表示可能なテーブル
206
DataTable：編集可能なテーブル
DataTable：左右にスクロール可能なテーブル
DataTable：条件によって色をつけるテーブル
207
Collector：テーブルにデータを追加
DataExporter：テーブルを Excel にエクスポートする
208
16.1. 基本 DataTable
DataTable タグは表を作るものです。表の中身のデータはいつも固定されていもの、つ
まり静的なものであれば PrimeFaces を使わなくとも HTML の table タグで十分なわけです。
PrimeFaces のこのタグはプログラム的に作成されるデータを使ってダイナミックに表を
作成するときにとても便利です。たとえばデータベースを検索した結果などを使う場合で
す。
DataTable には豊富な機能がありますので、シンプルなスタイルからちょっと複雑なも
のまで順番に説明していきます。
サンプル用にテーブルに表示するデータを作るためのビーンを用意します。株価の例を
取り上げます。10 社くらいで、会社名、始値、終値を列にもつテーブルです。
図 386 実行結果のイメージ
１つの株価を扱うマネージドビーン Stock は次のとおりです。会社名 company、始値 st
art、終値 end をプロパティに持ち、それらのコンストラクタとアクセスメソッドを用意し
ます。特別なものはありません。
★Stock.java
・・・
package com.myapp;
public class Stock {
String company;
int start,end;
209
public Stock(String company, int start, int end) {
this.company = company;
this.start = start;
this.end = end;
}
public String getCompany() {
return company;
}
public void setCompany(String company) {
this.company = company;
}
public double getStart() {
return start;
}
public double getEnd() {
return end;
}
}
★
次に表のもとになるデータ用のマネージドビーン StockDataBean を作ります。これはさ
きほどの 1 社ごとのデータである Stock を複数 List に入れたものを保持するマネージドビ
ーンで、まさにこの内容が表になります。
変数 companies にはサンプルのためにあらかじめ会社名をセットしています。
コンストラクタ StockDataBean()では for ループの中で始値 start と終値 end を乱数を
発生させて設定しています。これはサンプルとして毎回同じ数字を表示してもつまらない
ので乱数にしているわけで、特に必須の処理ではありません。実際のビジネスシーンでは
データベースを検索したりほかのシステムから入手する情報でしょう。このようにして逐
次 stocks.add()で List 型に加えていきます。add()の中ではさきほどの Stock クラスを使
っています。
その他のメソッドは List 型 stocks へのアクセスメソッドを用意しているだけです。
★StockDataBean.java
package com.myapp;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
210
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScopedpublic class StockDataBean implements Serializable{
private List<Stock> stocks;
private final String[] companies={"A 商事","B 建設","C 電機","D 化学","E コンピュ
ータ","F 放送","G 電力","H 通信","I 食品","J 出版"};
public StockDataBean() {
int start,end;
int n=10;
stocks = new ArrayList<>();
for(int i=0;i<n;i++){
start=(int)Math.round(Math.random()*1000);
end=(int)Math.round(Math.random()*1000);
stocks.add(new Stock(companies[i],start,end));
}
}
public List<Stock> getStocks() {
return stocks;
}
public void setStocks(List<Stock> stocks) {
this.stocks = stocks;
}
}
★
それでは以上のマネージドビーンを使って PrimeFaces の DataTable タグを使っていきま
す。
このタグを使う場合には h:form タグで挟まないと動作しない場合がありますので注意
してください。
「しない場合」というのはあとで紹介するソーティングを行う場合です。基
本的に form タグは使用したほうがよいです。
head タグ中のスタイルシートは列の幅を設定したり文字揃えをセンタリングするため
に使っています。
メインのタグは p:dataTable タグで value にはデータソースとなる stockDataBean ビー
ンの stocks プロパティを指定します。この中には 10 社の株価情報、つまり Stock オブジ
ェクトが入っているわけです。これらを順次読み込んでテーブルにします。1 社ごとのデ
211
ータには var プロパティの stock という名前でアクセスすることができます。
次の facet タグは表全体のヘッダーを表示するものです。フッターをつけたい場合には
name=”footer”とすればよいのです。
次に column タグが 3 つあってこれらが 3 つの列を作っています。
最初は会社名の列です。
1 つの会社情報はさきほど述べたように var で指定した stock でアクセスできます。これ
は Stock クラスの変数です。会社名を取り出すには EL 式で#{stock.company}とします。同
様に始値、終値も取り出して列として表示しています。
★dataTable1.xhtml
・・・
<h:head>
<title>dataTable1</title>
<style>
.table{width:400px}
.wide{width: 13%}
.narrow{width: 10%;text-align: center}
</style>
</h:head>
<h:body>
<h:form>
<p:dataTable class="table" var="stock" value="#{stockDataBean.stocks}">
<f:facet name="header" >
Stock
</f:facet>
<p:column class="wide" headerText="会社名" >
<h:outputText value="#{stock.company}" />
</p:column>
<p:column class="narrow" headerText="始値（円）" >
<h:outputText value="#{stock.start}" />
</p:column>
<p:column class="narrow" headerText="終値（円）" >
<h:outputText value="#{stock.end}" />
</p:column>
</p:dataTable>
</h:form>
212
</h:body>
・・・
★
213
17. チャート系
チャート系はグラフを表示する機能です。円グラフ、折れ線グラフなどどれもとてもよい
デザインのグラフが簡単に描けます。この機能は JavaScript でグラフを描く jqPlot ライ
ブラリを使用しているということです。
chart：円グラフ（type=”pie”
）
chart：ドーナッツグラフ（type=”donut”
）
chart：縦棒グラフ（type=”bar”
）
264
chart：横棒グラフ（type=”bar”
）
chart：折れ線グラフ（type=”line”
）
chart：バブルチャート（type=”bubble”
）
chart：OHLC チャート（type=”ohlc”
）
265
chart：メーターゲージ（type=”metergauge”
）
chart：複合グラフ
266
17.5. BubbleChart
バブルチャートを作ります。データのモデルは BubbleChartModel クラスです。系列は、
つまりひとつのバブルですが、これは BubbleChartSeries クラスです。このコンストラク
タは BubbleChartSeries（ラベル名、X 軸の値、Y 軸の値、バブルの大きさ）です。
★ChartDataBeanBubble1.java
・・・
@ManagedBean
@RequestScoped
public class ChartDataBeanBubble1 {
private BubbleChartModel bubbleModel;
public ChartDataBeanBubble1() {
bubbleModel = new BubbleChartModel();
bubbleModel.add(new BubbleChartSeries("IE",
40, 5, 55));
bubbleModel.add(new BubbleChartSeries("Safari", 3, 40, 36));
bubbleModel.add(new BubbleChartSeries("FireFox", 7, 15, 40));
bubbleModel.add(new BubbleChartSeries("Chrome", 50, 50, 60));
bubbleModel.setTitle("Bubble Chart");
bubbleModel.getAxis(AxisType.X).setLabel("Window user share");
bubbleModel.getAxis(AxisType.X).setMax(100);
bubbleModel.getAxis(AxisType.Y).setLabel("Mac user share");
bubbleModel.getAxis(AxisType.Y).setMax(100);
}
public BubbleChartModel getBubbleModel() {
return bubbleModel;
}
public void setBubbleModel(BubbleChartModel bubbleModel) {
this.bubbleModel = bubbleModel;
}
}
★
290
★chartBubble1.xhtml
・・・
<h:body>
<p:chart type="bubble" model="#{chartDataBeanBubble1.bubbleModel}" style="heig
ht:600px;width:600px"/>
</h:body>
・・・
★
図 423 実行結果
今度は立体的なバブルを作ります。次のナメージドビーンのコード中にある３つの命令
文を追加するだけです。setBubbleAlpha()メソッドは透明度を指定するもので 0 から 1 ま
で、小さいほうが透明度が高いものとなります。
291
★ChartDataBeanBubble2.java
・・・
public ChartDataBeanBubble2() {
・・・
bubbleModel.setShadow(false);
bubbleModel.setBubbleGradients(true);
bubbleModel.setBubbleAlpha(0.9);
}
・・・
★
図 424 実行結果
292
18. メッセージ系
さまざまなメッセージを表示する方法です。
Confirm：確認用のメッセージ
message：入力情報のバリデーションエラーなどを表示
messages：message と同様で複数メッセージ
notificationBar：ブラウザーの上からまたは下から出るメッセージ用バー
progressBar：進捗度の表示
307
308
19. パネル（コンテナ）系
layout、layoutUnit：レイアウト作成
accordionPanel、tab
carousel：左右にスライドできるコンテナ
contentFlow：左右にスムーズに流れる
dashboard：パネルをタイル状に並べる
326
dataGrid：グリッド状に表示
dataScroller：データをスクロールして自動表示
fieldset：画像や文字列をグルーピングして扱う
327
lightBox：小さい画像群を表示、クリックで拡大
overlayPanel：ほかのコンテンツに重ねて表示
Panel：様々なコンポーネントの入れもの
panelGrid：グリッド状にコンテンツ表示
328
panelMenu：メニューを作る
ribbon、ribbonGroup：コンポーネントをタブ状に並べたメニュー
scrollPanel：スクロール可能なパネル
tabMenu：メニューをタブ状に並べる
329
tabView：コンテンツをタブ状に表示
tagCloud：複数のアイテムを強調度を変えてランダム表示
330
20. ナビゲーション系
メニューなどユーザーのアクションやナビゲーションをコントロールするタイプのものを
解説します。
menu、submenu、menuitem：メニューを作る
menuButton：メニューボタン
menubar：ページの上部にメニューバー
megamenu：たくさんのメニューを作る
slideMenu：
394
tiererdMenu：層状に重なったメニュー
ring：リング状に回転するメニュー
toolbar：ツールバーを作る
tree、treeNode：コンテンツをツリー状に表示
395
treeTable：ツリーを表形式にしたもの
wizard：決まった手順で情報入力や情報表示を行うためのパネル
breadCrumb：ページの階層を表示する
contextMenu：右クリックのメニュー
396
397
21. Mac 風デザイン
MacOS 風の洗練されたコンポーネントを紹介します。
Doc：画面の下に Mac の Doc 風メニューを表示
Stack：メニューをしまっておくことができる
growl：メッセージを一時的に表示
435
22. その他
poll：一定周期でサーバーにリクエスト送信
idleMonitor：ユーザーのアイドル状態を検知
mindMap：インタラクティブなマインドマップ作製
remoteCommand：マネージドビーンの指定されたメソッドを実行する
draggable：ユーザーが自由にドラッグできるパネル
drop：アイテムをドロップできる
resizable：コンポーネントをサイズ変更可
445
fileUpload：ファイルアップロード
filedownload：ファイルダウンロード
printer：指定のコンポーネントだけでも印刷できる
effect：特殊効果をかける
feedReader：RSS フィードを読む
446
gmap：Google Map を使う
captcha：ロボットアクセスを排除した認証
447

Download Report