RichFaces3 ShowCaseのScrollable DataTableで複数列指定でソートします。
【手順】
１．「RichFaces3プロジェクトの作成方法」の手順で、「RichFaces3Sample049-ScrollableDataTableSortModeMulti」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
２．「WebContent/WEB-INF/web.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>RichFaces3Sample049-ScrollableDataTableSortModeMulti</display-name>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>enable</param-value>
</context-param>
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
</web-app>
３．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
４．「Javaパッケージの作成方法」の手順で、「com.example.richfaces3sample049」というパッケージを作成。
５．「Javaクラスファイルの作成方法」の手順で、「ScrollableDataTableBean.java」というクラスファイルを作成。
６．「ScrollableDataTableBean.java」を以下の様に入力。
package com.example.richfaces3sample049;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
public class ScrollableDataTableBean {
private List<Person> personList;
public ScrollableDataTableBean() {
this.personList = new ArrayList<Person>();
Random random = new Random(System.currentTimeMillis());
for (int i = 0; i < 123; i++) {
Person person = new Person();
person.setName("名前" + i);
person.setAge(i);
person.setGender(random.nextBoolean() ? "男" : "女");
personList.add(person);
}
}
public List<Person> getPersonList() {
return personList;
}
public void setPersonList(List<Person> personList) {
this.personList = personList;
}
}
７．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
８．「Javaクラスファイルの作成方法」の手順で、「Person.java」というクラスファイルを作成。
９．「Person.java」を以下の様に入力。
package com.example.richfaces3sample049;
public class Person {
private String name;
private int age;
private String gender;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}
１０．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１１．「WebContent/WEB-INF/faces-config.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<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_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>scrollableDataTableBean</managed-bean-name>
<managed-bean-class>com.example.richfaces3sample049.ScrollableDataTableBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
</faces-config>
１２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１３．「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
１４．「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
</head>
<body>
<h:form>
<rich:scrollableDataTable
var="person"
value="#{scrollableDataTableBean.personList}"
sortMode="multi">
<rich:column id="name">
<f:facet name="header">
<h:outputText value="名前"/>
</f:facet>
<h:outputText value="#{person.name}" />
</rich:column>
<rich:column id="age">
<f:facet name="header">
<h:outputText value="年齢"/>
</f:facet>
<h:outputText value="#{person.age}" />
</rich:column>
<rich:column id="gender">
<f:facet name="header">
<h:outputText value="性別"/>
</f:facet>
<h:outputText value="#{person.gender}" />
</rich:column>
</rich:scrollableDataTable>
</h:form>
</body>
</html>
１５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１６．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/RichFaces3Sample049-ScrollableDataTableSortModeMulti/faces/index.xhtml
１９．以下の様に表示されれば成功です。
RichFaces3Sample049-ScrollableDataTableSortModeMulti-01.jpg)
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。