著作権dream.mods.jp/wp/wp-content/uploads/samplePF.pdfPrimeFacesは特別な設定は不要ですが、もし必要な場合にはweb.xmlに次のような方法で記述することもできます。これらは一般の人は気にしなくていいでしょう。

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ではトラブルに陥ったことは

ありません。絶対におすすめです。

http://www.primefaces.org/downloads

https://ja.netbeans.org/

13

図 237 jarファイル追加

以上でセッティングは終わりです。PrimeFacesはこの jarファイルを１つ入れれば OKな

のです。ただし次の表に挙げたように、いくつかの少数のタグでは別のライブラリに依存

しているものもありますので、その解説セクションで必要なライブラリも説明しますので

ご安心ください。この表で一番最初の行にある MyFacesか Mojarraが必須であるというこ

とについては、NetBeansをインストールするとその JSF機能として Mojjaraが入っていま

すので特に配慮する必要はありません。

☆表１依存ライブラリ

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に次のような方法で

記述することもできます。これらは一般の人は気にしなくていいでしょう。

☆表２ 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のプロジェクトの１つで、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のコンポーネントを独自に種類分けしましたので、順番に見てい

きましょう。

http://www.primefaces.org/showcase/

http://www.primefaces.org/showcase/

17

2. テキスト系

このグループはテキスト入力や表示、さらにエディターまで備えています。

inputText：テキスト入力

Watermark：テキスト入力欄にうすくヒントを表示

AutoComplete：テキスト入力のオートコンプリート

Keyboard：テキスト入力の際に補助としてキーボード表示

InputMask：電話番号や日付を入力しやすいようにフォーマットを付加

Password：パスワード入力。暗号化強度をビジュアル表示

InputTextarea：テキストエリア入力で自動サイズ調整、文字数カウンター付加

18

Inplace：表示中の文字列クリックでテキスト入力欄を表示

Editor：テキストエディター

OutputLabel：フォームの各入力要素にラベル付け

ResetInput：フォームリセット時の入力値クリア

Spotlight：警告メッセージなどをハイライト表示

71

4. チェックボックス系

SelectBooleanCheckbox：１個のチェックボックス

SelectManyCheckbox：複数のチェックボックス

SelectCheckboxMenu：初期状態ではプルダウンメニュー形式で表示

82

5. リストとプルダウンメニュー系

SelectOneListbox：選択肢をリストで表示するして１つだけ選べるようにするもの

MultiSelectListbox：選択肢が階層状に構成

SelectOneMenu：１つを選ぶプルダウンメニュー

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的な使い方以外でも同様です。

２番目の例は 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>




<p:outputLabel for="step" value="Step:" />

<p:inputText id="step" value="#{rangeBean.number2}" />

<p:slider for="step" step="10" />

</h:panelGrid>




<p:outputLabel for="vertical" value="Vertical:" />

<p:inputText id="vertical" value="#{rangeBean.number3}" />

120

<p:slider for="vertical" type="vertical" />

</h:panelGrid>




<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 などでユーザーが

本の評価をするときに使います。

次の例は２つのレーティング入力を表示しています。

最初の例は 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>

・・・

★


122

9. 色系

ColorPicker：色をピックアップして入力

126

10. スイッチ系

inputSwitch：ONか OFFか２つの値を入力する

129

11. ボタン系

commandButton：フォームの送信ボタン

button：汎用的なボタン

selectBooleanButton：ON か OFF かの２つの値を入力

selectOneButton：複数のボタンを表示して、１つだけ押せる

selectManyButton：複数のボタンを表示して、複数を押せる

142

12. リンク系

commandLink：フォームのコマンドボタンのリンク版

link：リンク作成

146

13. リスト系

dataList：リストを作る

orderList：順番を変えられるリスト

picklist：左側に表示されるリストの中から複数のものをピックアップ

160

14. 画像系

graphicImage：画像を表示

imageSwitch：スライドショーやマニュアルでの複数の画像切替

Galleria：スライドショーやマニュアルでの複数の画像切替（サムネール付き）

161

PhotoCam：カメラ画像を取り込む

ImageCompare：２つの画像を比較のために並べて表示

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 実行結果のイメージ

１つの株価を扱うマネージドビーン 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>

・・・

★


今度は立体的なバブルを作ります。次のナメージドビーンのコード中にある３つの命令

文を追加するだけです。setBubbleAlpha()メソッドは透明度を指定するもので 0から 1ま

で、小さいほうが透明度が高いものとなります。

292

★ChartDataBeanBubble2.java

・・・

public ChartDataBeanBubble2() {

・・・

bubbleModel.setShadow(false);

bubbleModel.setBubbleGradients(true);

bubbleModel.setBubbleAlpha(0.9);

}

・・・

★


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：ロボットアクセスを排除した認証

Documents

著作権dream.mods.jp/wp/wp-content/uploads/samplePF.pdfPrimeFacesは特別な設定は不要ですが、もし必要な場合にはweb.xmlに次のような方法で 記述することもできます。これらは一般の人は気にしなくていいでしょう。

著作権dream.mods.jp/wp/wp-content/uploads/samplePF.pdfPrimeFacesは特別な設定は不要ですが、もし必要な場合にはweb.xmlに次のような方法で記述することもできます。これらは一般の人は気にしなくていいでしょう。