RichFaces3 ShowCaseのScrollable DataTableを使用します。
【手順】
１．「RichFaces3プロジェクトの作成方法」の手順で、「RichFaces3Sample045-ScrollableDataTable」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
２．「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>RichFaces3Sample045-ScrollableDataTable</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.richfaces3sample045」というパッケージを作成。
５．「Javaクラスファイルの作成方法」の手順で、「ScrollableDataTableBean.java」というクラスファイルを作成。
６．「ScrollableDataTableBean.java」を以下の様に入力。
package com.example.richfaces3sample045;
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.richfaces3sample045;
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.richfaces3sample045.ScrollableDataTableBean</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:scrollableDataTable var="person" value="#{scrollableDataTableBean.personList}">
<rich:column>
<h:outputText value="#{person.name}" />
</rich:column>
<rich:column>
<h:outputText value="#{person.age}" />
</rich:column>
<rich:column>
<h:outputText value="#{person.gender}" />
</rich:column>
</rich:scrollableDataTable>
</h:form>
</body>
</html>
１５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１６．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/RichFaces3Sample045-ScrollableDataTable/faces/index.xhtml
１９．以下の様に表示されれば成功です。
RichFaces3Sample045-ScrollableDataTable-01.jpg)
２０．以下の様なHTMLが出力されました。
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<link class="component" href="/RichFaces3Sample045-ScrollableDataTable/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" rel="stylesheet" type="text/css" />
<link class="component" href="/RichFaces3Sample045-ScrollableDataTable/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" media="rich-extended-skinning" rel="stylesheet" type="text/css" />
<script src="/RichFaces3Sample045-ScrollableDataTable/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript" type="text/javascript">
</script>
<script src="/RichFaces3Sample045-ScrollableDataTable/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript" type="text/javascript">
</script>
<script src="/RichFaces3Sample045-ScrollableDataTable/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/common-scrollable-data-table.js" type="text/javascript">
</script>
<script src="/RichFaces3Sample045-ScrollableDataTable/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/controls-scrollable-data-table.js" type="text/javascript">
</script>
<link class="component" href="/RichFaces3Sample045-ScrollableDataTable/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/scrollable-data-table.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.RICH_FACES_EXTENDED_SKINNING_ON=true;
</script>
<script src="/RichFaces3Sample045-ScrollableDataTable/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="/RichFaces3Sample045-ScrollableDataTable/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_id1" value="j_id1" />
<table cellpadding="0" cellspacing="0" class="rich-sdt " id="j_id1:j_id2" style="width: 700px; height: 500px; ">
<tbody>
<tr>
<td id="j_id1_j_id2" style="height: 100%;">
<div id="j_id1:j_id2:c" style="height: 100%; position: relative;">
<div class="rich-sdt-hsplit" id="j_id1:j_id2:cs" style="display: none;">
</div>
<div class="rich-sdt-inlinebox" id="j_id1:j_id2_GridHeaderTemplate" style="display: none; width: 700px;">
<iframe class="rich-sdt-substrate" frameborder="0" id="j_id1:j_id2:hs" scrolling="no" src="javascript:''">
<br />
</iframe>
<div style="display: block; left: 0px; top: 0px; width: 500px;">
<style>
#j_id1_j_id2 .rich-sdt-c-0 {width: 100px;}#j_id1_j_id2 .rich-sdt-c-1 {width: 100px;}#j_id1_j_id2 .rich-sdt-c-2 {width: 100px;}#j_id1_j_id2 .rich-sdt-c-f {width: 0px;}
</style>
<span class="rich-sdt-fb" id="j_id1:j_id2:header:FrozenBox">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<thead>
<tr class="rich-std-header-row ">
</tr>
</thead>
</table>
</span>
<span class="rich-sdt-nb" id="j_id1:j_id2:header:NormalBox">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<thead>
<tr class="rich-std-header-row ">
<th class="rich-sdt-header-cell " columnid="j_id3" id="j_id1:j_id2:hc_0" sortable="true" style="cursor:pointer">
<div class="rich-sdt-header-cell-body rich-sdt-c-0 " id="j_id1:j_id2:hcb_0">
<div align="right" class="rich-sdt-sort-icon" id="j_id1:j_id2:hs_0">
</div>
</div>
<span class="rich-sdt-hsep" column="0" id="j_id1:j_id2:hsep_0" style="left: px;">
</span>
</th>
<th class="rich-sdt-header-cell " columnid="j_id5" id="j_id1:j_id2:hc_1" sortable="true" style="cursor:pointer">
<div class="rich-sdt-header-cell-body rich-sdt-c-1 " id="j_id1:j_id2:hcb_1">
<div align="right" class="rich-sdt-sort-icon" id="j_id1:j_id2:hs_1">
</div>
</div>
<span class="rich-sdt-hsep" column="1" id="j_id1:j_id2:hsep_1" style="left: px;">
</span>
</th>
<th class="rich-sdt-header-cell " columnid="j_id7" id="j_id1:j_id2:hc_2" sortable="true" style="cursor:pointer">
<div class="rich-sdt-header-cell-body rich-sdt-c-2 " id="j_id1:j_id2:hcb_2">
<div align="right" class="rich-sdt-sort-icon" id="j_id1:j_id2:hs_2">
</div>
</div>
<span class="rich-sdt-hsep" column="2" id="j_id1:j_id2:hsep_2" style="left: px;">
</span>
</th>
<th class="rich-sdt-c-f rich-sdt-header-cell">
<div class="rich-sdt-header-cell-body">
</div>
</th>
</tr>
</thead>
</table>
</span>
</div>
</div>
<div class="rich-sdt-inlinebox" id="j_id1:j_id2_GridBodyTemplate" style="overflow: auto; width: 700px; height: 500px;">
<div id="j_id1:j_id2:scb" style="position: absolute; z-index: 0;">
<div id="j_id1:j_id2:sb" style="position: absolute;">
<br />
</div>
</div>
<div id="j_id1:j_id2:bc" style="display: block; width: 500px;">
<span class="rich-sdt-fb" id="j_id1:j_id2:body:FrozenBox">
<table cellpadding="0" cellspacing="0" id="j_id1:j_id2:f" style="border-collapse:collapse;">
<tbody>
</tbody>
</table>
<span class="rich-sdt-ho" id="j_id1:j_id2:fho">
<br />
</span>
</span>
<span class="rich-sdt-nb" id="j_id1:j_id2:body:NormalBox">
<table cellpadding="0" cellspacing="0" id="j_id1:j_id2:n" style="border-collapse:collapse;">
<tbody>
<tr id="j_id1:j_id2:n:0" class="rich-sdt-row ">
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_0_0">
<div class="rich-sdt-column-cell-body rich-sdt-c-0 " id="j_id1:j_id2:bc_0_0">
名前0
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_0_1">
<div class="rich-sdt-column-cell-body rich-sdt-c-1 " id="j_id1:j_id2:bc_0_1">
0
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_0_2">
<div class="rich-sdt-column-cell-body rich-sdt-c-2 " id="j_id1:j_id2:bc_0_2">
女
</div>
</td>
<td class="rich-sdt-c-f rich-sdt-column-cell ">
<div class="rich-sdt-column-cell-body">
</div>
</td>
</tr>
<tr id="j_id1:j_id2:n:1" class="rich-sdt-row ">
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_1_0">
<div class="rich-sdt-column-cell-body rich-sdt-c-0 " id="j_id1:j_id2:bc_1_0">
名前1
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_1_1">
<div class="rich-sdt-column-cell-body rich-sdt-c-1 " id="j_id1:j_id2:bc_1_1">
1
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_1_2">
<div class="rich-sdt-column-cell-body rich-sdt-c-2 " id="j_id1:j_id2:bc_1_2">
女
</div>
</td>
<td class="rich-sdt-c-f rich-sdt-column-cell ">
<div class="rich-sdt-column-cell-body">
</div>
</td>
</tr>
<tr id="j_id1:j_id2:n:2" class="rich-sdt-row ">
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_2_0">
<div class="rich-sdt-column-cell-body rich-sdt-c-0 " id="j_id1:j_id2:bc_2_0">
名前2
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_2_1">
<div class="rich-sdt-column-cell-body rich-sdt-c-1 " id="j_id1:j_id2:bc_2_1">
2
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_2_2">
<div class="rich-sdt-column-cell-body rich-sdt-c-2 " id="j_id1:j_id2:bc_2_2">
男
</div>
</td>
<td class="rich-sdt-c-f rich-sdt-column-cell ">
<div class="rich-sdt-column-cell-body">
</div>
</td>
</tr>
<tr id="j_id1:j_id2:n:3" class="rich-sdt-row ">
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_3_0">
<div class="rich-sdt-column-cell-body rich-sdt-c-0 " id="j_id1:j_id2:bc_3_0">
名前3
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_3_1">
<div class="rich-sdt-column-cell-body rich-sdt-c-1 " id="j_id1:j_id2:bc_3_1">
3
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_3_2">
<div class="rich-sdt-column-cell-body rich-sdt-c-2 " id="j_id1:j_id2:bc_3_2">
男
</div>
</td>
<td class="rich-sdt-c-f rich-sdt-column-cell ">
<div class="rich-sdt-column-cell-body">
</div>
</td>
</tr>
<tr id="j_id1:j_id2:n:4" class="rich-sdt-row ">
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_4_0">
<div class="rich-sdt-column-cell-body rich-sdt-c-0 " id="j_id1:j_id2:bc_4_0">
名前4
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_4_1">
<div class="rich-sdt-column-cell-body rich-sdt-c-1 " id="j_id1:j_id2:bc_4_1">
4
</div>
</td>
<td class="rich-sdt-column-cell " id="j_id1:j_id2:c_4_2">
<div class="rich-sdt-column-cell-body rich-sdt-c-2 " id="j_id1:j_id2:bc_4_2">
女
</div>
</td>
<td class="rich-sdt-c-f rich-sdt-column-cell ">
<div class="rich-sdt-column-cell-body">
</div>
</td>
</tr>
</tbody>
</table>
<span class="rich-sdt-ho" id="j_id1:j_id2:nho">
<br />
</span>
</span>
</div>
</div>
<div class="rich-sdt-inlinebox" id="j_id1:j_id2_GridFooterTemplate" style="display: none; width: 700px;">
<iframe class="rich-sdt-substrate" frameborder="0" id="j_id1:j_id2:fs" scrolling="no" src="javascript:''">
<br />
</iframe>
<div style="display: block; width: width: 500px;">
<span class="rich-sdt-fb" id="j_id1:j_id2:footer:FrozenBox">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tfoot>
<tr class="rich-std-footer-row ">
</tr>
</tfoot>
</table>
</span>
<span class="rich-sdt-nb" id="j_id1:j_id2:footer:NormalBox">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tfoot>
<tr class="rich-std-footer-row ">
<th class="rich-sdt-c-f rich-sdt-footer-cell">
<div class="rich-sdt-footer-cell-body">
</div>
</th>
</tr>
</tfoot>
</table>
</span>
</div>
</div>
<input autocomplete="off" id="j_id1:j_id2_hc" name="j_id1:j_id2_hc" type="hidden" />
<input autocomplete="off" id="j_id1:j_id2_state_input" name="j_id1:j_id2_state_input" type="hidden" />
<input autocomplete="off" id="j_id1:j_id2_options_input" name="j_id1:j_id2_options_input" type="hidden" />
<input autocomplete="off" id="j_id1:j_id2_rows_input" name="_rows_input" type="hidden" value="5" />
<input id="j_id1:j_id2_submit_input" name="j_id1:j_id2_submit_input" onclick="A4J.AJAX.Submit('j_id1',event,{'oncomplete':function(request,event,data){window.Richfaces_ScrollableGrid_j_id1_j_id2.onScrollComplete(request,event,data)},'similarityGroupingId':'j_id1:j_id2','parameters':{'j_id1:j_id2:scroll':'','j_id1:j_id2':'j_id1:j_id2'} } ); return false;" style="display:none" type="button" />
<input type="hidden" name="j_id1:j_id2:si" id="j_id1:j_id2:si" />
<input type="hidden" id="j_id1:j_id2:s" autocomplete="off" name="j_id1:j_id2:s" value="-1" />
</div>
</td>
</tr>
<tr style="display:none;">
<td>
<script id="j_id1:j_id2_grid_create_scripts" type="text/javascript">
//<![CDATA[
window.Richfaces_ScrollableGrid_j_id1_j_id2 = new ClientUI.controls.grid.ScrollableGrid({'hideWhenScrolling':false,'rowsCount':0,'columnsCount':3,'selectionMode':'multi','ids':['j_id5','j_id7','j_id3'] ,'onSortAjaxUpdate':function(event){A4J.AJAX.Submit('j_id1',event,{'oncomplete':function(request,event,data){window.Richfaces_ScrollableGrid_j_id1_j_id2.onSortComplete(request,event,data)},'similarityGroupingId':'j_id1:j_id2','parameters':{'j_id1:j_id2:sortIndex':event.index,'j_id1:j_id2:sortStartRow':event.startRow,'j_id1:j_id2':'j_id1:j_id2','j_id1:j_id2:sortColumn':event.column,'j_id1:j_id2:sortOrder':event.order} } ); return false;},'selectionInput':'j_id1:j_id2:s','selectedClass':'','normalizedId':'j_id1_j_id2','client_id':'j_id1:j_id2','activeClass':''} );
;
// ]]>
</script>
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1" autocomplete="off" />
</form>
</body>
</html>
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。