RichFaces3 ShowCaseのData Scrollerをデータテーブルで使用します。
【手順】
１．「RichFaces3プロジェクトの作成方法」の手順で、「RichFaces3Sample039-DataTableDatascroller」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
２．「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>RichFaces3Sample039-DataTableDatascroller</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.richfaces3sample039」というパッケージを作成。
５．「Javaクラスファイルの作成方法」の手順で、「DataTableBean.java」というクラスファイルを作成。
６．「DataTableBean.java」を以下の様に入力。
package com.example.richfaces3sample039;
import java.util.ArrayList;
import java.util.List;
public class DataTableBean {
private List<Person> personList;
public DataTableBean() {
this.personList = new ArrayList<Person>();
for (int i = 0; i < 123; i++) {
Person person = new Person();
person.setName("名前" + i);
person.setAge(i);
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.richfaces3sample039;
public class Person {
private String name;
private int age;
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;
}
}
１０．「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>dataTableBean</managed-bean-name>
<managed-bean-class>com.example.richfaces3sample039.DataTableBean</managed-bean-class>
<managed-bean-scope>request</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:dataTable id="personList" rows="10" var="person" value="#{dataTableBean.personList}">
<rich:column>
<h:outputText value="#{person.name}" />
</rich:column>
<rich:column>
<h:outputText value="#{person.age}" />
</rich:column>
<f:facet name="footer">
<rich:datascroller for="personList" />
</f:facet>
</rich:dataTable>
</h:form>
</body>
</html>
１５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１６．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/RichFaces3Sample039-DataTableDatascroller/faces/index.xhtml
１９．以下の様に表示されれば成功です。
DataTableDatascroller-01.jpg)
２０．以下の様なHTMLが出力されました。
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<link class="component" href="/RichFaces3Sample039-DataTableDatascroller/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__;jsessionid=A1644DD8A7DCE8CA6241195E90123533" rel="stylesheet" type="text/css" />
<link class="component" href="/RichFaces3Sample039-DataTableDatascroller/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__;jsessionid=A1644DD8A7DCE8CA6241195E90123533" media="rich-extended-skinning" rel="stylesheet" type="text/css" />
<link class="component" href="/RichFaces3Sample039-DataTableDatascroller/faces/a4j/s/3_3_3.Finalcss/table.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__;jsessionid=A1644DD8A7DCE8CA6241195E90123533" rel="stylesheet" type="text/css" />
<script src="/RichFaces3Sample039-DataTableDatascroller/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript" type="text/javascript">
</script>
<script src="/RichFaces3Sample039-DataTableDatascroller/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript" type="text/javascript">
</script>
<script src="/RichFaces3Sample039-DataTableDatascroller/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/datascroller.js" type="text/javascript">
</script>
<link class="component" href="/RichFaces3Sample039-DataTableDatascroller/faces/a4j/s/3_3_3.Finalcss/datascroller.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__;jsessionid=A1644DD8A7DCE8CA6241195E90123533" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script>
<script src="/RichFaces3Sample039-DataTableDatascroller/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js" type="text/javascript">
</script>
</head>
<body>
<form id="j_id1" name="j_id1" method="post" action="/RichFaces3Sample039-DataTableDatascroller/faces/index.xhtml;jsessionid=A1644DD8A7DCE8CA6241195E90123533" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_id1" value="j_id1" />
<table class="rich-table " id="j_id1:personList" border="0" cellpadding="0" cellspacing="0">
<colgroup span="2">
</colgroup>
<tfoot>
<tr class="rich-table-footer ">
<td class="rich-table-footercell " colspan="2" scope="colgroup">
<div class="rich-datascr " id="j_id1:personList:j_id6" style=" " align="center">
<table border="0" cellpadding="0" cellspacing="1" class="rich-dtascroller-table " id="j_id1:personList:j_id6_table" style="text-align:center">
<tbody>
<tr>
<td class="rich-datascr-button-dsbld rich-datascr-button">
««
</td>
<td class="rich-datascr-button-dsbld rich-datascr-button">
«
</td>
<td class="rich-datascr-button-dsbld rich-datascr-button">
</td>
<td class="rich-datascr-act ">
1
</td>
<td class="rich-datascr-inact " onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': '2'});">
2
</td>
<td class="rich-datascr-inact " onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': '3'});">
3
</td>
<td class="rich-datascr-inact " onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': '4'});">
4
</td>
<td class="rich-datascr-inact " onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': '5'});">
5
</td>
<td class="rich-datascr-inact " onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': '6'});">
6
</td>
<td class="rich-datascr-inact " onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': '7'});">
7
</td>
<td class="rich-datascr-inact " onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': '8'});">
8
</td>
<td class="rich-datascr-inact " onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': '9'});">
9
</td>
<td class="rich-datascr-inact " onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': '10'});">
10
</td>
<td class=" rich-datascr-button" onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': 'next'});">
</td>
<td class=" rich-datascr-button" onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': 'fastforward'});">
»
</td>
<td class=" rich-datascr-button" onclick="Event.fire(this, 'rich:datascroller:onscroll', {'page': 'last'});">
»»
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
new Richfaces.Datascroller('j_id1:personList:j_id6', function(event){A4J.AJAX.Submit('j_id1',event,{'ignoreDupResponses':true,'implicitEventsQueue':'j_id1:personList:j_id6','similarityGroupingId':'j_id1:personList:j_id6','parameters':{'ajaxSingle':'j_id1:personList:j_id6','j_id1:personList:j_id6':event.memo.page} ,'actionUrl':'/RichFaces3Sample039\x2DDataTableDatascroller/faces/index.xhtml;jsessionid=A1644DD8A7DCE8CA6241195E90123533'} ); return false;});
</script>
</div>
</td>
</tr>
</tfoot>
<tbody id="j_id1:personList:tb">
<tr class="rich-table-row rich-table-firstrow ">
<td class="rich-table-cell " id="j_id1:personList:0:j_id2">
名前0
</td>
<td class="rich-table-cell " id="j_id1:personList:0:j_id4">
0
</td>
</tr>
<tr class="rich-table-row ">
<td class="rich-table-cell " id="j_id1:personList:1:j_id2">
名前1
</td>
<td class="rich-table-cell " id="j_id1:personList:1:j_id4">
1
</td>
</tr>
<tr class="rich-table-row ">
<td class="rich-table-cell " id="j_id1:personList:2:j_id2">
名前2
</td>
<td class="rich-table-cell " id="j_id1:personList:2:j_id4">
2
</td>
</tr>
<tr class="rich-table-row ">
<td class="rich-table-cell " id="j_id1:personList:3:j_id2">
名前3
</td>
<td class="rich-table-cell " id="j_id1:personList:3:j_id4">
3
</td>
</tr>
<tr class="rich-table-row ">
<td class="rich-table-cell " id="j_id1:personList:4:j_id2">
名前4
</td>
<td class="rich-table-cell " id="j_id1:personList:4:j_id4">
4
</td>
</tr>
<tr class="rich-table-row ">
<td class="rich-table-cell " id="j_id1:personList:5:j_id2">
名前5
</td>
<td class="rich-table-cell " id="j_id1:personList:5:j_id4">
5
</td>
</tr>
<tr class="rich-table-row ">
<td class="rich-table-cell " id="j_id1:personList:6:j_id2">
名前6
</td>
<td class="rich-table-cell " id="j_id1:personList:6:j_id4">
6
</td>
</tr>
<tr class="rich-table-row ">
<td class="rich-table-cell " id="j_id1:personList:7:j_id2">
名前7
</td>
<td class="rich-table-cell " id="j_id1:personList:7:j_id4">
7
</td>
</tr>
<tr class="rich-table-row ">
<td class="rich-table-cell " id="j_id1:personList:8:j_id2">
名前8
</td>
<td class="rich-table-cell " id="j_id1:personList:8:j_id4">
8
</td>
</tr>
<tr class="rich-table-row ">
<td class="rich-table-cell " id="j_id1:personList:9:j_id2">
名前9
</td>
<td class="rich-table-cell " id="j_id1:personList:9:j_id4">
9
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1" autocomplete="off" />
</form>
</body>
</html>
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。