それでは、デモアプリケーションで紹介されている、各コンポーネントについて説明しよう。ICEfacesの提供するコンポーネント(以下、ICEfacesコンポーネントと呼ぶ)は、大きく分けて、次の2種類が存在する。
- JSF標準のコンポーネントをICEfaces用に拡張したコンポーネント
- JSF標準では用意されていないICEfacesオリジナルのコンポーネント
1は、JSFに標準で用意されているHTMLコンポーネントを、ICEfacesで利用できるよう拡張したカスタムコンポーネントである。単純なHTMLページをレンダリングするだけでなく、たとえば次に紹介するようなpartialSubmit属性を指定することで、ページ遷移とは非同期のリクエストの送信もサポートされている。また、effect属性などを用いることで、script.aculo.us(スクリプタキュラス)のエフェクトと同様の機能を実現することもできる。
2は、ICEfacesにて定義されているカスタムコンポーネントである。たとえば先ほど紹介した、データをツリー上に表示する機能や、タブによるページの切り替え機能を提供する。また、オートコンプリート機能やテーブルのページ分割機能など、Ajaxアプリケーションではおなじみの機能を提供する。
表1に、ICEfacesコンポーネントの一覧を、デモアプリケーション「コンポーネントショーケース」に紹介されている順に示す。
表1 ICEfacesコンポーネント一覧
| 「コンポーネントショーケース」の表示 | タグ | コンポーネントの説明 |
|---|---|---|
| Component Styling | ice:outputStyle |
スタイルコンポーネントは、Internet Explorer、Safariブラウザのスタイルシートを追加する。ICEfacesには、標準でXP、Royaleの2種類のテーマが用意されている。たとえばXPを用いたい場合には、ヘッダ中に |
Text Entry | ice:inputText ice:inputTextarea ice:inputSecret |
JSFが標準で提供している入力コンポーネントの拡張。ICEfacesにおいて拡張された共通属性については、本文を参考のこと |
| Selection | ice:selectBooleanCheckbox ice:selectManyCheckbox ice:selectManyListbox ice:selectManyMenu ice:selectOneListbox ice:selectOneMenu ice:selectOneRadio |
JSFが標準で提供している選択コンポーネントの拡張。ICEfacesにおいて拡張された共通属性については、本文を参考のこと |
| Buttons & Links | ice:commandButton ice:commandLink ice:outputLink |
JSFが標準で提供しているコマンドコンポーネント、出力コンポーネントの拡張。ICEfacesにおいて拡張された共通属性については、本文を参考のこと |
| Autocomplete | ice:selectInputText | オートコンプリートコンポーネントは、オートコンプリートによる入力補助を実現する。Managed Beanに、補完されるリストの検索ロジックを記述し、valueChangeListener属性にバインドすればよい。入力候補の一覧としては、単純なStringのリストをf:selectItemsタグで列挙することも可能であるし、任意の型のリストをice:panelGridタグでレイアウトすることも可能である |
| Drag & Drop | ice:panelGroup | グループパネルコンポーネントは、 ドラッグ&ドロップを実現する。ice:panelGroupタグのdraggable属性を"true"にすることで、コンテンツをドラッグできるように(draggables)することが可能である。また、dropTarget属性を"true"にすることで、ドラッグしたオブジェクトをドロップする領域(drop targets)にもできる。デモのショッピングカートでは、Managed Beanに商品をドロップした場合のロジックを記述し、dragListener属性にバインドしている。その他、ドラッグ時やドロップ時のスタイルなども指定可能である。なお、ドラッグ&ドロップの機能はscript.aculo.usを用いている |
| Calendar | ice:selectInputDate | カレンダーコンポーネントは、日付を選択可能なカレンダー(もちろん年や月を切り替えることも可能)を実現する。renderAsPopup属性を指定することで、テキストボックスへの入力を補完する、ポップアップ型のカレンダーにもなる |
| Tree | ice:tree ice:treeNode |
ツリーコンポーネントでは、データを、動的に展開、折りたたみが可能なツリー上に配置する。このコンポーネントを用いるには、Managed Bean中で、TreeModel(たとえばjavax.swing.tree.DefaultTreeModelクラス)を定義し、ice:treeタグのvalue属性にバインドする必要がある。またノードとしては、ice:treeタグ中にice:treeNodeタグを記述し、f:facetタグでアイコンとコンテンツを定義する。サーバ側ではノードとして、javax.swing.tree.DefaultMutableTreeNodeクラスを用いる必要があるが、ICEfacesにおいては、このクラスを容易に利用できるようラップしたIceUserObjectクラスが用意されている。開発者はこのIceUserObjectを継承して、ノードとして用いるクラスを作成すればよい |
| Menu Bar | ice:menuBar ice:menuItem ice:menuItemSeparator |
メニューバーコンポーネントは、GUIのアプリケーションではおなじみのメニューバーを実現する。ice:menuBarタグのorientation属性により、横型(デフォルト)のメニューか、縦型のメニューかを指定可能である。子要素として、ice:menuItemタグ、ice:menuItemSeparatorタグを利用する。ice:menuItemタグのaction属性、actionListener属性により、項目が選択された時の動作を指定可能である |
| Effects | --- | JSFが標準で提供しているコンポーネントを拡張した、ICEfacesコンポーネントには、エフェクトを加えることが可能である。エフェクトはscript.aculo.usを用いており、com.icesoft.faces.context.effects.Effectクラスのサブクラスを用いることで実現可能である。Managed Bean中のEffect型のフィールドに、新たなEffectオブジェクトを設定することで、さまざまな効果を発火させることが可能である。クライアント側で発火させたい場合には、onmouseovereffectなどの属性を用いてもよい |
| Connection Status | ice:outputConnectionStatus | コネクションステータスコンポーネントは、ブラウザとサーバのコネクションの状態を表示する。アクティブ(レスポンスを待っている状態)、インアクティブ、警告、切断の4種類の状態が存在する |
| Table | ice:dataTable ice:column |
テーブルコンポーネントは、UIDataコンポーネント、データモデル(DataModelクラス)、リストをテーブル形式に表示する。f:facetタグによりヘッダ、フッタを作成する。ice:columnタグのrendered属性により、カラムをレンダリングするかどうかを指定可能である |
| Columns | ice:columns | カラムズコンポーネントは、テーブル中に動的に追加、削除可能なカラムを作成する。ice:dataTableタグ中で用いる。var属性、value属性が使え、value属性にManaged BeanのDataModel型のフィールドをバインドする。スタイルについてはice:columnタグと同様で、ice:dataTableタグのheaderClass属性とcolumnClasses属性が、作成されたカラムにも適用される |
| Sortable Header | ice:commandSortHeader | ソートヘッダコンポーネントを用いると、ヘッダをクリックすることで、テーブルの行の並び順を変更できる。ice:dataTableタグ、ice:columnタグ、f:facetタグ中で用いる。Managed Bean中にソート処理を記述し、ice:dataTableのsortColumn属性にバインドさせる。sortAscending属性には昇順、降順のフラグを指定する | Data Paging | ice:dataPaginator | データページングコンポーネントは、多くのデータを持つテーブルを、適当な行数でページ分割して表示する。ice:dataTableタグとあわせて用いる。ice:dataPaginatorタグのfor属性で、ページングしたいテーブルを指定する。ice:dataPaginatorタグ中にf:facetタグを用いることで、ページ切り替えのボタン(次ページへ、最後のページへなど)を指定することもできる |
| Expandable Table | ice:dataTable ice:column |
ice:dataTableタグ、ice:columnタグを用いて、展開、折りたたみ可能なテーブルを構築している | Table Row Selection | ice:rowSelector | 行選択コンポーネントは、テーブルコンポーネントで行の選択を可能にする。ice:columnタグ中に、ice:rowSelectorタグを記載する。multiple属性を"true"にすれば、複数行を選択可能となる(デフォルトは"false"で、1行のみ選択可能)。行がクリックされた際の処理は、selectionListener属性に指定する。行の選択時(selectedClass属性)、マウスカーソルの通過時(mouseOverClass属性)に、スタイルを変更することも可能である |
| Progress Bar | ice:outputProgress | プログレスバーコンポーネントは、タスクの進行度合いを表示するためのプログレスバーを実現する。決定(Determinate)モードと未定(Indeterminate)モードが存在する。決定モードは、0%から100%まで、タスク進行の割合が徐々に増加していくモードである。未定モードは、処理時間が予測できないなど、タスクの進行の割合を表せない場合に用いる。タスクの実行中に、単純にアニメーションが表示され、インジケータ同様となる |
| File Upload | ice:inputFile | ファイルアップロードコンポーネントは、ファイルのアップロードを実現する。HTMLとしては、<input type="file" />をレンダリングするため、form要素中で用いる。actionListener、progressListenerの2種類のリスナが利用可能である。progressListenerは、ユーザにファイルアップロードの進行度合いを通知したい場合に、オプションとして用いる |
| Charts | ice:outputChart | チャートコンポーネントは、円グラフ、棒グラフ、折れ線グラフなどを描画する。オープンソースのグラフ描画ユーティリティであるJChartsを用いている |
| Dynamic Chart | ice:outputChart | 描画されたグラフは動的に変更することも可能である。Managed Bean中のフィールドを、グラフ中のデータ(data属性)、ラベル(labels属性)、グラフの色(colors属性)にバインドすればよい |
| Combining Charts | ice:outputChart | 複数のグラフを統合したグラフを作成することも可能である。チャートコンポーネントは、JchartsのAPIを直接用い、さまざまな種類のグラフを作れるように作成されている。デモでは、AxisChartクラスを直接用いて、複数のデータをプロットするカスタムチャートを作成している |
| Layout Panels | 以下に紹介するレイアウトパネルコンポーネントは、他のコンポーネントをレイアウトすることができるパネル(さまざまなコンポーネントのコンテナ)を提供する | |
| Border Panel | ice:panelBorder | ボーダー(区切り)パネルは、north、south、east、west、centerの5つの領域に区切られたパネルを提供する。各々の領域をレンダリングするかどうかは、ice:panelBorderタグのrender属性(renderNorth、renderSouth、renderCenter、renderWest、renderEast)にて指定する |
| Collapsible Panel | ice:panelCollapsible | 折りたたみパネルは、開閉可能なパネルを提供する。このパネルは、ヘッダ部とコンテンツ部から構成されており、ヘッダ部をクリックすることにより、コンテンツ部を展開したり、折りたたんだりすることが可能である。開閉の状態は、expanded属性が保持している |
| Popup Panel | ice:panelBorder | ボーダー(区切り)パネルは、north、south、east、west、centerの5つの領域に区切られたパネルを提供する。各々の領域をレンダリングするかどうかは、ice:panelBorderタグのrender属性(renderNorth、renderSouth、renderCenter、renderWest、renderEast)にて指定する |
| Positioned Panel | ice:panelPositioned | 並び替えパネルは、ドラッグすることで、位置を変えることができるパネルを提供する。ice:panelPositionedタグのvalue属性には、Managed Beanのリスト型のフィールドをバインドする。listener属性に順序が変更された場合の処理を指定しておくことで、ドラッグによる変更をサーバ側に反映させることが可能である |
| Series Panel | ice:panelSeries | シリーズ(行)パネルは、動的に生成、削除可能な一連のパネルを提供する。テーブルコンポーネントにて、行をレンダリングする場合と同じような感覚で用いることが可能である。テーブルより柔軟な点は、ice:panelGridタグにより、複数の型の組み合わせを、1つの行のように扱える点である |
| Stacking Panel | ice:panelStack | スタッキング(積み重ね)パネルでは、複数のパネルグループを保持して(積み重ねて)おき、そのうちの1つの(一番上の)パネルのみを表示する。selectPanel属性で指定したパネルのみが表示され、他のパネルは表示されない |
| Tab Set Panel | ice:panelTabSet ice:panelTab |
タブセットパネルは、タブの機能を提供する。タブをまとめるタブセットパネル(ice:panelTabSetタグ)中に、複数のタブパネル(ice:panelTabタグ)を含める |
