Apache MyFaces のテーブル・サンプルプログラム

Apache MyFaces とは，JSF の機能を実装したプログラムの一種です．Apache MyFaces に特有の 拡張機能もあります． JSF は便利ですし，Apache MyFaces の拡張機能も魅力的です．

このページでは， Apache MyFaces が持つ拡張機能のうち テーブルについて，プログラムの見本や，説明する．

準備事項

前準備

JDK (Java Development Kit) のインストール

Windows での OpenJDK のインストール: 別ページ »で説明
Ubuntu での Open JDK のインストール: 別ページ »で説明

Eclipse のインストール

Windows での Eclipseのインストール，日本語化，基本操作: 別ページ »で説明
Ubuntu での Eclipseのインストール，日本語化，基本操作: 別ページ »で説明

その他

Eclipse の Web, XML, and Java EE Development に関するプラグインのインストールが終わっていること
「Tomcat インストール」の Web ページの記述に従って，Tomcat のインストールが終わっていること．
「Eclipse 内部の tomcat サーバ」を使えるようにするために，「Eclipse を使用しての Java サーブレット・プログラムの開発」の Web ページに記載の「新規サーバの定義」を行っておくこと．

事前の準備

「JavaServer Faces サンプルプログラム」の Web ページの記述に従って，下記の作業を終えていること．

Eclipse での動的 Web プロジェクトの作成
Apache MyFaces バージョン 2.0 に関するファイル群 jsf-blank のインポート

Eclipse での操作手順

http://www.irian.at/myfacesexamples/home.jsf （現存しない）に記載されていたテーブル（Data Table）(Sortable) を使うプログラムの見本と操作手順を説明する．

http://www.irian.at/myfacesexamples/home.jsf
「Sortable」をクリック
SimpleSortableCarList.java, SimpleCar.java をダウンロード
SortableList.java をダウンロード
Eclipse のパッケージ・エクスプローラ等を使い，新しいパッケージ org.apache.myfaces.examples.listexample を作成
1. （もし，プロジェクト・エクスプローラが開いていなければ）プロジェクト・エクスプローラを開く
  「ウインドウ」→「ビューの表示」→「プロジェクト・エクスプローラ」と操作する．
  Java パッケージの作成，クラスの作成などの作業は，プロジェクト・エクスプローラで行う．
2. Java パッケージを新規作成すべきプロジェクトの選択
  プロジェクト・エクスプローラに，プロジェクト一覧が表示されているはずです． Java パッケージを新規作成したいプロジェクト名 MYFACES を右クリックして，「新規」→「パッケージ」と操作する．
3. Java パッケージ名の設定
  「Java パッケージ (Java package)」の名前として，Java パッケージ名 org.apache.myfaces.examples.listexampleを記入する．
  その後，「終了」をクリック．
4. Java パッケージの確認
  プロジェクト・エクスプローラにおいて， Java パッケージ org.apache.myfaces.examples.listexample が増えていることを確認する．
パッケージ org.apache.myfaces.examples.listexample に，3 つの新しいクラス SimpleSortableCarList, SimpleCar, SortableList を作成
1. パッケージ org.apache.myfaces.examples.listexampleを右クリックして，「新規」→「クラス」と操作する．
2. 「名前」にSimpleSortableCarList, SimpleCar, SortableList を指定して、新しいクラスを作成することを繰り返す．
ダウンロードした SimpleSortableCarList.java, SimpleCar.java, SortableList.java を，Eclipse でコピーアンドペースト．
プロジェクト MYFACES のパッケージ hoge.hoge.com にインポート

Eclipse で，index.jsp を編集

<%@ page session="false" contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="https://myfaces.apache.org/tomahawk" prefix="t"%>
<html>

<!--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
//-->

<body>

<f:view>

    <h:form>
        <t:dataTable styleClass="standardTable"
                headerClass="standardTable_SortHeader"
                footerClass="standardTable_Footer"
                cellpadding="2"
                cellspacing="2"
                width="100%"
                border="1"
                var="car"
                value="#{list.cars}"
                sortColumn="#{list.sort}"
                sortAscending="#{list.ascending}"
                preserveDataModel="false">

            <f:facet name="header">
                <h:outputText value="(header table)"  />
            </f:facet>
            <f:facet name="footer">
                <h:outputText value="(footer table)"  />
            </f:facet>

            <h:column>
                <f:facet name="header">
                    <t:commandSortHeader columnName="type" arrow="true" id="type">
                        <h:outputText value="type" id="t1" />
                    </t:commandSortHeader>
                </f:facet>
                <h:outputText value="#{car.type}" />
            </h:column>

            <h:column>
                <f:facet name="header">
                    <t:commandSortHeader columnName="color" arrow="true" id="color">
                        <h:outputText value="color" id="c1" />
                    </t:commandSortHeader>
                </f:facet>
                <h:outputText value="#{car.color}" />
            </h:column>

        </t:dataTable>
    </h:form>

</f:view>


</body>

</html>

WebContenr/WEB-INF/lib/faces-config.xml の編集

Tomcat 6.0 用の設定例です．

<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
      http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
   version="2.0">
    <managed-bean>
        <managed-bean-name>list</managed-bean-name>
        <managed-bean-class>org.apache.myfaces.examples.listexample.SimpleSortableCarList</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
</faces-config>

実行結果