RichFaces3 ShowCaseのa4j:repeatを実行します。
【手順】
１．「RichFaces3プロジェクトの作成方法」の手順で、「RichFaces3Sample061-Repeat」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
２．「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>RichFaces3Sample061-Repeat</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.richfaces3sample061」というパッケージを作成。
５．「Javaクラスファイルの作成方法」の手順で、「RepeatBean.java」というクラスファイルを作成。
６．「RepeatBean.java」を以下の様に入力。
package com.example.richfaces3sample061;
import java.util.ArrayList;
import java.util.List;
public class RepeatBean {
private List<Person> personList;
public RepeatBean() {
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);
}
}
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.richfaces3sample061;
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>repeatBean</managed-bean-name>
<managed-bean-class>com.example.richfaces3sample061.RepeatBean</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>
<table border="1">
<a4j:repeat var="person" value="#{repeatBean.personList}">
<tr>
<rich:column>
<h:outputText value="#{person.name}" />
</rich:column>
<rich:column>
<h:outputText value="#{person.age}" />
</rich:column>
<a4j:repeat var="column" value="#{person.attributeList}">
<rich:column>
<h:outputText value="#{column}" />
</rich:column>
</a4j:repeat>
</tr>
</a4j:repeat>
</table>
</h:form>
</body>
</html>
１５．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１６．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１７．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１８．ブラウザで以下のURLにアクセスします。
http://localhost:8080/RichFaces3Sample061-Repeat/faces/index.xhtml
１９．以下の様に表示されれば成功です。
Repeat-01.png)
２０．以下の様なHTMLが出力されました。
<html xmlns="http://www.w3c.org/1999/xhtml"> <head> <link class="component" href="/RichFaces3Sample061-Repeat/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="/RichFaces3Sample061-Repeat/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 type="text/javascript"> window.RICH_FACES_EXTENDED_SKINNING_ON=true; </script> <script src="/RichFaces3Sample061-Repeat/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="/RichFaces3Sample061-Repeat/faces/index.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_id1" value="j_id1" /> <table border="1"> <tr> <td class="rich-table-cell " id="j_id1:j_id3:0:j_id5"> 名前0 </td> <td class="rich-table-cell " id="j_id1:j_id3:0:j_id7"> 0 </td> <td class="rich-table-cell " id="j_id1:j_id3:0:j_id9:0:j_id10"> 属性1-0 </td> <td class="rich-table-cell " id="j_id1:j_id3:0:j_id9:1:j_id10"> 属性2-0 </td> </tr> <tr> <td class="rich-table-cell " id="j_id1:j_id3:1:j_id5"> 名前1 </td> <td class="rich-table-cell " id="j_id1:j_id3:1:j_id7"> 1 </td> <td class="rich-table-cell " id="j_id1:j_id3:1:j_id9:0:j_id10"> 属性1-1 </td> <td class="rich-table-cell " id="j_id1:j_id3:1:j_id9:1:j_id10"> 属性2-1 </td> </tr> <tr> <td class="rich-table-cell " id="j_id1:j_id3:2:j_id5"> 名前2 </td> <td class="rich-table-cell " id="j_id1:j_id3:2:j_id7"> 2 </td> <td class="rich-table-cell " id="j_id1:j_id3:2:j_id9:0:j_id10"> 属性1-2 </td> <td class="rich-table-cell " id="j_id1:j_id3:2:j_id9:1:j_id10"> 属性2-2 </td> </tr> <tr> <td class="rich-table-cell " id="j_id1:j_id3:3:j_id5"> 名前3 </td> <td class="rich-table-cell " id="j_id1:j_id3:3:j_id7"> 3 </td> <td class="rich-table-cell " id="j_id1:j_id3:3:j_id9:0:j_id10"> 属性1-3 </td> <td class="rich-table-cell " id="j_id1:j_id3:3:j_id9:1:j_id10"> 属性2-3 </td> </tr> <tr> <td class="rich-table-cell " id="j_id1:j_id3:4:j_id5"> 名前4 </td> <td class="rich-table-cell " id="j_id1:j_id3:4:j_id7"> 4 </td> <td class="rich-table-cell " id="j_id1:j_id3:4:j_id9:0:j_id10"> 属性1-4 </td> <td class="rich-table-cell " id="j_id1:j_id3:4:j_id9:1:j_id10"> 属性2-4 </td> </tr> <tr> <td class="rich-table-cell " id="j_id1:j_id3:5:j_id5"> 名前5 </td> <td class="rich-table-cell " id="j_id1:j_id3:5:j_id7"> 5 </td> <td class="rich-table-cell " id="j_id1:j_id3:5:j_id9:0:j_id10"> 属性1-5 </td> <td class="rich-table-cell " id="j_id1:j_id3:5:j_id9:1:j_id10"> 属性2-5 </td> </tr> <tr> <td class="rich-table-cell " id="j_id1:j_id3:6:j_id5"> 名前6 </td> <td class="rich-table-cell " id="j_id1:j_id3:6:j_id7"> 6 </td> <td class="rich-table-cell " id="j_id1:j_id3:6:j_id9:0:j_id10"> 属性1-6 </td> <td class="rich-table-cell " id="j_id1:j_id3:6:j_id9:1:j_id10"> 属性2-6 </td> </tr> <tr> <td class="rich-table-cell " id="j_id1:j_id3:7:j_id5"> 名前7 </td> <td class="rich-table-cell " id="j_id1:j_id3:7:j_id7"> 7 </td> <td class="rich-table-cell " id="j_id1:j_id3:7:j_id9:0:j_id10"> 属性1-7 </td> <td class="rich-table-cell " id="j_id1:j_id3:7:j_id9:1:j_id10"> 属性2-7 </td> </tr> <tr> <td class="rich-table-cell " id="j_id1:j_id3:8:j_id5"> 名前8 </td> <td class="rich-table-cell " id="j_id1:j_id3:8:j_id7"> 8 </td> <td class="rich-table-cell " id="j_id1:j_id3:8:j_id9:0:j_id10"> 属性1-8 </td> <td class="rich-table-cell " id="j_id1:j_id3:8:j_id9:1:j_id10"> 属性2-8 </td> </tr> <tr> <td class="rich-table-cell " id="j_id1:j_id3:9:j_id5"> 名前9 </td> <td class="rich-table-cell " id="j_id1:j_id3:9:j_id7"> 9 </td> <td class="rich-table-cell " id="j_id1:j_id3:9:j_id9:0:j_id10"> 属性1-9 </td> <td class="rich-table-cell " id="j_id1:j_id3:9:j_id9:1:j_id10"> 属性2-9 </td> </tr> </table> <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id6" autocomplete="off" /> </form> </body> </html>
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。