RichFaces3 ShowCaseのColumnsを実行します。
【手順】
１．「RichFaces3プロジェクトの作成方法」の手順で、「RichFaces3Sample059-Columns」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
２．「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>RichFaces3Sample059-Columns</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.richfaces3sample059」というパッケージを作成。
５．「Javaクラスファイルの作成方法」の手順で、「DataTableBean.java」というクラスファイルを作成。
６．「DataTableBean.java」を以下の様に入力。
package com.example.richfaces3sample059;
import java.util.ArrayList;
import java.util.List;
public class DataTableBean {
private List<Person> personList;
private List<String> attributeList = new ArrayList<String>();
public DataTableBean() {
this.personList = new ArrayList<Person>();
List<String> attributeList = null;
for (int i = 0; i < 10; i++) {
Person person = new Person();
person.setName("名前" + i);
person.setAge(i);
attributeList = new ArrayList<String>();
attributeList.add("属性1-" + i);
attributeList.add("属性2-" + i);
person.setAttributeList(attributeList);
personList.add(person);
}
this.attributeList.add("属性1");
this.attributeList.add("属性2");
}
public List<Person> getPersonList() {
return personList;
}
public void setPersonList(List<Person> personList) {
this.personList = personList;
}
public List<String> getAttributeList() {
return attributeList;
}
public void setAttributeList(List<String> attributeList) {
this.attributeList = attributeList;
}
}
７．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
８．「Javaクラスファイルの作成方法」の手順で、「Person.java」というクラスファイルを作成。
９．「Person.java」を以下の様に入力。
package com.example.richfaces3sample059;
import java.util.List;
public class Person {
private String name;
private int age;
private List<String> attributeList;
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 List<String> getAttributeList() {
return attributeList;
}
public void setAttributeList(List<String> attributeList) {
this.attributeList = attributeList;
}
}
１０．「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.richfaces3sample059.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 var="person" value="#{dataTableBean.personList}">
<rich:column>
<f:facet name="header">
<h:outputText value="名前" />
</f:facet>
<h:outputText value="#{person.name}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="年齢" />
</f:facet>
<h:outputText value="#{person.age}" />
</rich:column>
<rich:columns var="column" value="#{dataTableBean.attributeList}" index="idx">
<f:facet name="header">
<h:outputText value="#{column}" />
</f:facet>
<h:outputText value="#{person.attributeList[idx]}" />
</rich:columns>
</rich:dataTable>
</h:form>
</body>
</html>
１５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１６．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/RichFaces3Sample059-Columns/faces/index.xhtml
１９．以下の様に表示されれば成功です。
Columns-01.png)
２０．以下の様なHTMLが出力されました。
<html xmlns="http://www.w3c.org/1999/xhtml"> <head> <link class="component" href="/RichFaces3Sample059-Columns/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="/RichFaces3Sample059-Columns/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" /> <link class="component" href="/RichFaces3Sample059-Columns/faces/a4j/s/3_3_3.Finalcss/table.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" rel="stylesheet" type="text/css" /> <script type="text/javascript"> window.RICH_FACES_EXTENDED_SKINNING_ON=true; </script> <script src="/RichFaces3Sample059-Columns/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="/RichFaces3Sample059-Columns/faces/index.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_id1" value="j_id1" /> <table class="rich-table " id="j_id1:j_id2" border="0" cellpadding="0" cellspacing="0"> <colgroup span="4"> </colgroup> <thead class="rich-table-thead"> <tr class="rich-table-subheader "> <th class="rich-table-subheadercell " scope="col" id="j_id1:j_id2:j_id3header"> <div id="j_id1:j_id2:j_id3header:sortDiv"> 名前 </div> </th> <th class="rich-table-subheadercell " scope="col" id="j_id1:j_id2:j_id6header"> <div id="j_id1:j_id2:j_id6header:sortDiv"> 年齢 </div> </th> <th class="rich-table-subheadercell " scope="col" id="j_id1:j_id2:j_id9header"> <div id="j_id1:j_id2:j_id9header:sortDiv"> 属性1 </div> </th> <th class="rich-table-subheadercell " scope="col" id="j_id1:j_id2:j_id12header"> <div id="j_id1:j_id2:j_id12header:sortDiv"> 属性2 </div> </th> </tr> </thead> <tbody id="j_id1:j_id2:tb"> <tr class="rich-table-row rich-table-firstrow "> <td class="rich-table-cell " id="j_id1:j_id2:0:j_id3"> 名前0 </td> <td class="rich-table-cell " id="j_id1:j_id2:0:j_id6"> 0 </td> <td class="rich-table-cell " id="j_id1:j_id2:0:j_id9"> 属性1-0 </td> <td class="rich-table-cell " id="j_id1:j_id2:0:j_id12"> 属性2-0 </td> </tr> <tr class="rich-table-row "> <td class="rich-table-cell " id="j_id1:j_id2:1:j_id3"> 名前1 </td> <td class="rich-table-cell " id="j_id1:j_id2:1:j_id6"> 1 </td> <td class="rich-table-cell " id="j_id1:j_id2:1:j_id9"> 属性1-1 </td> <td class="rich-table-cell " id="j_id1:j_id2:1:j_id12"> 属性2-1 </td> </tr> <tr class="rich-table-row "> <td class="rich-table-cell " id="j_id1:j_id2:2:j_id3"> 名前2 </td> <td class="rich-table-cell " id="j_id1:j_id2:2:j_id6"> 2 </td> <td class="rich-table-cell " id="j_id1:j_id2:2:j_id9"> 属性1-2 </td> <td class="rich-table-cell " id="j_id1:j_id2:2:j_id12"> 属性2-2 </td> </tr> <tr class="rich-table-row "> <td class="rich-table-cell " id="j_id1:j_id2:3:j_id3"> 名前3 </td> <td class="rich-table-cell " id="j_id1:j_id2:3:j_id6"> 3 </td> <td class="rich-table-cell " id="j_id1:j_id2:3:j_id9"> 属性1-3 </td> <td class="rich-table-cell " id="j_id1:j_id2:3:j_id12"> 属性2-3 </td> </tr> <tr class="rich-table-row "> <td class="rich-table-cell " id="j_id1:j_id2:4:j_id3"> 名前4 </td> <td class="rich-table-cell " id="j_id1:j_id2:4:j_id6"> 4 </td> <td class="rich-table-cell " id="j_id1:j_id2:4:j_id9"> 属性1-4 </td> <td class="rich-table-cell " id="j_id1:j_id2:4:j_id12"> 属性2-4 </td> </tr> <tr class="rich-table-row "> <td class="rich-table-cell " id="j_id1:j_id2:5:j_id3"> 名前5 </td> <td class="rich-table-cell " id="j_id1:j_id2:5:j_id6"> 5 </td> <td class="rich-table-cell " id="j_id1:j_id2:5:j_id9"> 属性1-5 </td> <td class="rich-table-cell " id="j_id1:j_id2:5:j_id12"> 属性2-5 </td> </tr> <tr class="rich-table-row "> <td class="rich-table-cell " id="j_id1:j_id2:6:j_id3"> 名前6 </td> <td class="rich-table-cell " id="j_id1:j_id2:6:j_id6"> 6 </td> <td class="rich-table-cell " id="j_id1:j_id2:6:j_id9"> 属性1-6 </td> <td class="rich-table-cell " id="j_id1:j_id2:6:j_id12"> 属性2-6 </td> </tr> <tr class="rich-table-row "> <td class="rich-table-cell " id="j_id1:j_id2:7:j_id3"> 名前7 </td> <td class="rich-table-cell " id="j_id1:j_id2:7:j_id6"> 7 </td> <td class="rich-table-cell " id="j_id1:j_id2:7:j_id9"> 属性1-7 </td> <td class="rich-table-cell " id="j_id1:j_id2:7:j_id12"> 属性2-7 </td> </tr> <tr class="rich-table-row "> <td class="rich-table-cell " id="j_id1:j_id2:8:j_id3"> 名前8 </td> <td class="rich-table-cell " id="j_id1:j_id2:8:j_id6"> 8 </td> <td class="rich-table-cell " id="j_id1:j_id2:8:j_id9"> 属性1-8 </td> <td class="rich-table-cell " id="j_id1:j_id2:8:j_id12"> 属性2-8 </td> </tr> <tr class="rich-table-row "> <td class="rich-table-cell " id="j_id1:j_id2:9:j_id3"> 名前9 </td> <td class="rich-table-cell " id="j_id1:j_id2:9:j_id6"> 9 </td> <td class="rich-table-cell " id="j_id1:j_id2:9:j_id9"> 属性1-9 </td> <td class="rich-table-cell " id="j_id1:j_id2:9:j_id12"> 属性2-9 </td> </tr> </tbody> </table> <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id2" autocomplete="off" /> </form> </body> </html>
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。