1
2
著作権
本書の著作権は著者に帰属します。著者の許諾なく転載、配布は禁止します。
3
はじめに
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
・その他必要ライブラリは文中に記載
4
【免責事項】
本書のサンプルコード等は今後の PrimeFaces、ブラウザー、OSおよび関連するソフトウェ
アのバージョンアップや不具合によって正常に動作しなくなる可能性は否定できません。
また、本書の内容を業務等に応用したとき万一不具合が生じた場合でも著者および出版社、
販売者は一切責任を負いません。
2016年 5月 川崎 克巳
5
目次
1. PrimeFacesとは .......................................................................................................... 10
1.1. 特徴 ....................................................................................................................... 11
1.2. 入手とセットアップ .............................................................................................. 12
1.3. PrimeFacesとその他の JSF実装製品 ................................................................ 15
2. テキスト系 .................................................................................................................... 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
3. ラジオボタン系 ............................................................................................................ 66
3.1. SelectOneRadio .................................................................................................... 66
3.2. radioButton .......................................................................................................... 69
4. チェックボックス系 ..................................................................................................... 71
4.1. SelectBooleanCheckbox ....................................................................................... 71
4.2. SelectManyCheckbox .......................................................................................... 76
4.3. SelectCheckboxMenu .......................................................................................... 78
5. リストとプルダウンメニュー系 ................................................................................... 82
5.1. SelectOneListbox ................................................................................................. 82
5.2. MultiSelectListbox............................................................................................... 88
5.3. SelectOneMenu .................................................................................................... 93
5.4. SelectManyMenu ................................................................................................. 97
6. カレンダー系 ..............................................................................................................100
6.1. Calendar .............................................................................................................100
6.2. Schedule .............................................................................................................108
7. スピナー系 .................................................................................................................. 115
7.1. Spinner ............................................................................................................... 116
6
8. スライダー系 .............................................................................................................. 118
8.1. Slider .................................................................................................................. 118
8.2. Rating .................................................................................................................121
9. 色系.............................................................................................................................122
9.1. ColorPicker .........................................................................................................122
10. スイッチ系 ..............................................................................................................126
10.1. inoutSwitch ....................................................................................................126
11. ボタン系 ..................................................................................................................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
7
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
8
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
9
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
10
1. PrimeFaces とは
ここでは主に PrimeFacesの入手、インストール方法について説明します。また、PrimeFa
cesは JavaServer Facesを実装した製品ですが、これ以外にも類似の製品が出ていますの
でその特徴比較にも触れていきます。
11
1.1. 特徴
PrimeFacesはさまざまな拡張機能を含んだ JSFのオープンソースのライブラリです。つぎ
のようなすぐれた特徴をもっています。
・リッチなコンポーネント(HtmlEditor, Dialog, AutoComplete, Charts ほか)
・Ajaxが組み込まれている
• ライブラリは jarファイルひとつにコンパクトにまとめられている。
• Atmosphereフレームワークによる Push機能
• モバイルアプリケーション構築のための Mobile UI kit
• Skinningフレームワークを使った多彩なデザイン・テーマ
12
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ではトラブルに陥ったことは
ありません。絶対におすすめです。
13
図 237 jarファイル追加
以上でセッティングは終わりです。PrimeFacesはこの jarファイルを1つ入れれば OKな
のです。ただし次の表に挙げたように、いくつかの少数のタグでは別のライブラリに依存
しているものもありますので、その解説セクションで必要なライブラリも説明しますので
ご安心ください。この表で一番最初の行にある MyFacesか Mojarraが必須であるというこ
とについては、NetBeansをインストールするとその JSF機能として Mojjaraが入っていま
すので特に配慮する必要はありません。
☆表1 依存ライブラリ
PrimeFacesタグや機能 必要なライブラリ バージョン
JSF runtime Apache MyFaces または
Oracle Mojarra
2.0, 2.1 or 2.2
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に次のような方法で
記述することもできます。これらは一般の人は気にしなくていいでしょう。
☆表2 web.xmlでの記述
Name デフォルト 説明
THEME aristo アプリケーションのテーマ
14
mobile.THEME null モバイル用のテーマ
PUSH_SERVER_URL null PrimeFaces Pushのためのカスタ
ムサーバーURL
SUBMIT full Ajaxの送信モード
DIR ltr 方向(文字の流れ)
RESET_VALUES FALSE Trueの場合には ajaxでアップデー
トされた入力値はリセットされる
SECRET primefaces 暗号化のシークレットキー.
CLIENT_SIDE_VALIDATION 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
にする
15
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のプロジェクトの1つで、JSF1.1時代から最新の JSF2.2まで継続して開発してい
るものです。開発スピードが速く、情報も充実しています。無料。
・PrimeFaces
図 jsf052
http://primefaces.org/index
トルコの PrimeTek Informatics 社が 2008年から開発、提供しているオープンソースの JS
F を拡張したコンポーネントスイートです。つまり JSF と同じような使い勝手で、より便
利でデザインのよいユーザーインターフェースを提供しています。RichFaces や ICEfaces
16
も同様ですがその中でもこれが一番人気があるようです。本書でもこれを紹介します。
・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のコンポーネントを独自に種類分けしましたので、順番に見てい
きましょう。
17
2. テキスト系
このグループはテキスト入力や表示、さらにエディターまで備えています。
inputText:テキスト入力
Watermark:テキスト入力欄にうすくヒントを表示
AutoComplete:テキスト入力のオートコンプリート
Keyboard:テキスト入力の際に補助としてキーボード表示
InputMask:電話番号や日付を入力しやすいようにフォーマットを付加
Password:パスワード入力。暗号化強度をビジュアル表示
InputTextarea:テキストエリア入力で自動サイズ調整、文字数カウンター付加
18
Inplace:表示中の文字列クリックでテキスト入力欄を表示
Editor:テキストエディター
OutputLabel:フォームの各入力要素にラベル付け
ResetInput:フォームリセット時の入力値クリア
Spotlight:警告メッセージなどをハイライト表示
71
4. チェックボックス系
SelectBooleanCheckbox:1個のチェックボックス
SelectManyCheckbox:複数のチェックボックス
SelectCheckboxMenu:初期状態ではプルダウンメニュー形式で表示
82
5. リストとプルダウンメニュー系
SelectOneListbox:選択肢をリストで表示するして1つだけ選べるようにするもの
MultiSelectListbox:選択肢が階層状に構成
SelectOneMenu:1つを選ぶプルダウンメニュー
SelectManyMenu:複数の選択肢を選択できるプルダウンメニュー
100
6. カレンダー系
Calendar:日にちを入力
Schedule:スケジュール表
115
7. スピナー系
Spinner:入力欄の右に上下の三角マークアイコンが出る
118
8. スライダー系
Slider:横や縦型のスライドバー
Rting:星マークなどをつけててレーティングする
119
8.1. Slider
p:slider タグは横や縦のスライドバーを使って数値を入力するものです。このサンプル
は 4種類のスライダーを表示しています。
最初の Basicというラベルの例は、次のように inputText と一緒に使われます。inputT
ext 欄に数字が表示されるのですが、それに対する入力方法が slider だということです。
inputText で数字が見えないとスライドバーだけでは正確な入力数字の認識が困難です。
これは Basic的な使い方以外でも同様です。
2番目の例は step プロパティを使って増減ステップ幅を指定するものです。<p:slider
...step="10" />というように使います。
3番目の例はスライダーが縦に配置されるものです。プロパティ type="vertical"とし
ます。horizontalがデフォルトです。
4番目の例は diplay プロパティを指定することにより範囲を入力するものです。最小
値と最大値の入力値を受け取る要素は h:inputHidden 要素を2つ使っています。<p:slide
r for="range1,range2" display="range"...>というように for でそれらの inputHidden
要素の id を2つ指定します。diplay プロパティは値をどこに表示するかという表示先の
ものを示します。
このほかプロパティとして最小値と最大値を設定する minValue、maxValueがあります。
★slider.html
・・・
<h:form>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<!--基本形 Basic-->
<p:outputLabel for="basic" value="Basic:" />
<p:inputText id="basic" value="#{rangeBean.number1}" />
<p:slider for="basic" />
</h:panelGrid>
<!--Step-->
<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">
<!--Vertical-->
<p:outputLabel for="vertical" value="Vertical:" />
<p:inputText id="vertical" value="#{rangeBean.number3}" />
120
<p:slider for="vertical" type="vertical" />
</h:panelGrid>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<!--範囲 Between-->
<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 実行結果
121
8.2. Rating
p:rating タグはレーティングを入力するものです。たとえば amazon などでユーザーが
本の評価をするときに使います。
次の例は2つのレーティング入力を表示しています。
最初の例は Basicなもので、<p:rating value... />と valueプロパティで入力値を受
け取るマネージドビーンを指定します。表示されている星の一番左にある通行止め標識の
ようなものはレーティングをクリアするアイコンです。
2番目の例は 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 実行結果
122
9. 色系
ColorPicker:色をピックアップして入力
126
10. スイッチ系
inputSwitch:ONか OFFか2つの値を入力する
129
11. ボタン系
commandButton:フォームの送信ボタン
button:汎用的なボタン
selectBooleanButton:ON か OFF かの2つの値を入力
selectOneButton:複数のボタンを表示して、1つだけ押せる
selectManyButton:複数のボタンを表示して、複数を押せる
142
12. リンク系
commandLink:フォームのコマンドボタンのリンク版
link:リンク作成
146
13. リスト系
dataList:リストを作る
orderList:順番を変えられるリスト
picklist:左側に表示されるリストの中から複数のものをピックアップ
160
14. 画像系
graphicImage:画像を表示
imageSwitch:スライドショーやマニュアルでの複数の画像切替
Galleria:スライドショーやマニュアルでの複数の画像切替(サムネール付き)
161
PhotoCam:カメラ画像を取り込む
ImageCompare:2つの画像を比較のために並べて表示
ImageCropper:画像の一部を切り取る
162
197
15. 特殊な表示系
Clock:ページ上に時計を表示する
Diagram:点などの要素と線で構成されるダイヤグラム
205
16. テーブル系
テーブル系は多機能な表を簡単に作るタグです。
DataTable:表を作る
DataTable:ページ切替可能なテーブル
DataTable:ソート可能なテーブル
DataTable:複数列でソート可能なテーブル
(画面は上記同様です)
DataTable:フィルター可能なテーブル
206
DataTable:行選択が可能なテーブル
DataTable:行が複数選択可能なテーブル
DataTable:列をグルーピング可能なテーブル
DataTable:小計つきテーブル
DataTable:クリックで詳細表示可能なテーブル
207
DataTable:編集可能なテーブル
DataTable:左右にスクロール可能なテーブル
DataTable:条件によって色をつけるテーブル
208
Collector:テーブルにデータを追加
DataExporter:テーブルを Excelにエクスポートする
209
16.1. 基本 DataTable
DataTable タグは表を作るものです。表の中身のデータはいつも固定されていもの、つ
まり静的なものであれば PrimeFacesを使わなくとも HTMLの tableタグで十分なわけです。
PrimeFaces のこのタグはプログラム的に作成されるデータを使ってダイナミックに表を
作成するときにとても便利です。たとえばデータベースを検索した結果などを使う場合で
す。
DataTable には豊富な機能がありますので、シンプルなスタイルからちょっと複雑なも
のまで順番に説明していきます。
サンプル用にテーブルに表示するデータを作るためのビーンを用意します。株価の例を
取り上げます。10社くらいで、会社名、始値、終値を列にもつテーブルです。
図 386 実行結果のイメージ
1つの株価を扱うマネージドビーン Stockは次のとおりです。会社名 company、始値 st
art、終値 endをプロパティに持ち、それらのコンストラクタとアクセスメソッドを用意し
ます。特別なものはありません。
★Stock.java
・・・
package com.myapp;
public class Stock {
String company;
int start,end;
210
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;
211
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 社ごとのデ
212
ータには 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>
213
</h:body>
・・・
★
264
17. チャート系
チャート系はグラフを表示する機能です。円グラフ、折れ線グラフなどどれもとてもよい
デザインのグラフが簡単に描けます。この機能は JavaScript でグラフを描く jqPlotライ
ブラリを使用しているということです。
chart:円グラフ(type=”pie”)
chart:ドーナッツグラフ(type=”donut”)
chart:縦棒グラフ(type=”bar”)
265
chart:横棒グラフ(type=”bar”)
chart:折れ線グラフ(type=”line”)
chart:バブルチャート(type=”bubble”)
chart:OHLCチャート(type=”ohlc”)
266
chart:メーターゲージ(type=”metergauge”)
chart:複合グラフ
290
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;
}
}
★
291
★chartBubble1.xhtml
・・・
<h:body>
<p:chart type="bubble" model="#{chartDataBeanBubble1.bubbleModel}" style="heig
ht:600px;width:600px"/>
</h:body>
・・・
★
図 423 実行結果
今度は立体的なバブルを作ります。次のナメージドビーンのコード中にある3つの命令
文を追加するだけです。setBubbleAlpha()メソッドは透明度を指定するもので 0から 1ま
で、小さいほうが透明度が高いものとなります。
292
★ChartDataBeanBubble2.java
・・・
public ChartDataBeanBubble2() {
・・・
bubbleModel.setShadow(false);
bubbleModel.setBubbleGradients(true);
bubbleModel.setBubbleAlpha(0.9);
}
・・・
★
図 424 実行結果
307
18. メッセージ系
さまざまなメッセージを表示する方法です。
Confirm:確認用のメッセージ
message:入力情報のバリデーションエラーなどを表示
messages:messageと同様で複数メッセージ
notificationBar:ブラウザーの上からまたは下から出るメッセージ用バー
progressBar:進捗度の表示
308
326
19. パネル(コンテナ)系
layout、layoutUnit:レイアウト作成
accordionPanel、tab
carousel:左右にスライドできるコンテナ
contentFlow:左右にスムーズに流れる
dashboard:パネルをタイル状に並べる
327
dataGrid:グリッド状に表示
dataScroller:データをスクロールして自動表示
fieldset:画像や文字列をグルーピングして扱う
328
lightBox:小さい画像群を表示、クリックで拡大
overlayPanel:ほかのコンテンツに重ねて表示
Panel:様々なコンポーネントの入れもの
panelGrid:グリッド状にコンテンツ表示
329
panelMenu:メニューを作る
ribbon、ribbonGroup:コンポーネントをタブ状に並べたメニュー
scrollPanel:スクロール可能なパネル
tabMenu:メニューをタブ状に並べる
330
tabView:コンテンツをタブ状に表示
tagCloud:複数のアイテムを強調度を変えてランダム表示
394
20. ナビゲーション系
メニューなどユーザーのアクションやナビゲーションをコントロールするタイプのものを
解説します。
menu、submenu、menuitem:メニューを作る
menuButton:メニューボタン
menubar:ページの上部にメニューバー
megamenu:たくさんのメニューを作る
slideMenu:
395
tiererdMenu:層状に重なったメニュー
ring:リング状に回転するメニュー
toolbar:ツールバーを作る
tree、treeNode:コンテンツをツリー状に表示
396
treeTable:ツリーを表形式にしたもの
wizard:決まった手順で情報入力や情報表示を行うためのパネル
breadCrumb:ページの階層を表示する
contextMenu:右クリックのメニュー
397
435
21. Mac 風デザイン
MacOS風の洗練されたコンポーネントを紹介します。
Doc:画面の下に Mac の Doc 風メニューを表示
Stack:メニューをしまっておくことができる
growl:メッセージを一時的に表示
445
22. その他
poll:一定周期でサーバーにリクエスト送信
idleMonitor:ユーザーのアイドル状態を検知
mindMap:インタラクティブなマインドマップ作製
remoteCommand:マネージドビーンの指定されたメソッドを実行する
draggable:ユーザーが自由にドラッグできるパネル
drop:アイテムをドロップできる
resizable:コンポーネントをサイズ変更可
446
fileUpload:ファイルアップロード
filedownload:ファイルダウンロード
printer:指定のコンポーネントだけでも印刷できる
effect:特殊効果をかける
feedReader:RSS フィードを読む
447
gmap:Google Map を使う
captcha:ロボットアクセスを排除した認証