RichFaces4 ShowCaseのPickListでカラム形式で表示します。
【手順】
１．「RichFaces4プロジェクトの作成方法」の手順で、「RichFaces4Sample048-PickListObjectColumn」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
２．「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>RichFaces4Sample048-PickListObjectColumn</display-name>
<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.richfaces4sample048」というパッケージを作成。
５．「Javaクラスファイルの作成方法」の手順で、「PickListBean.java」というクラスファイルを作成。
６．「PickListBean.java」を以下の様に入力。
package com.example.richfaces4sample048;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class PickListBean {
private List<Person> personList;
private List<Person> selectedPersonList;
@PostConstruct
public void init() {
this.personList = new ArrayList<Person>();
Person person = new Person();
person.setId("1");
person.setName("あいうえお");
person.setAge(20);
personList.add(person);
person = new Person();
person.setId("2");
person.setName("かきくけこ");
person.setAge(30);
personList.add(person);
person = new Person();
person.setId("3");
person.setName("さしすせそ");
person.setAge(40);
personList.add(person);
person = new Person();
person.setId("4");
person.setName("たちつてと");
person.setAge(50);
personList.add(person);
person = new Person();
person.setId("5");
person.setName("なにぬねの");
person.setAge(60);
personList.add(person);
person = new Person();
}
public List<Person> getPersonList() {
return personList;
}
public void setPersonList(List<Person> personList) {
this.personList = personList;
}
public List<Person> getSelectedPersonList() {
return selectedPersonList;
}
public void setSelectedPersonList(List<Person> selectedPersonList) {
this.selectedPersonList = selectedPersonList;
}
}
７．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
８．「Javaクラスファイルの作成方法」の手順で、「Person.java」というクラスファイルを作成。
９．「Person.java」を以下の様に入力。
package com.example.richfaces4sample048;
public class Person {
private String id;
private String name;
private int age;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
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」でファイルを保存。
１１．「Javaクラスファイルの作成方法」の手順で、「PersonConverter.java」というクラスファイルを作成。
１２．「PersonConverter.java」を以下の様に入力。
package com.example.richfaces4sample048;
import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.ValueExpression;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;
@FacesConverter("PersonConverter")
public class PersonConverter implements Converter {
@Override
public Object getAsObject(FacesContext facesContext, UIComponent component, String s) {
ELContext elContext = facesContext.getELContext();
ExpressionFactory expressionFactory = facesContext.getApplication().getExpressionFactory();
ValueExpression valueExpression = expressionFactory.createValueExpression(elContext, "#{pickListBean}", PickListBean.class);
PickListBean pickListBean = (PickListBean) valueExpression.getValue(elContext);
for (int i = 0; i < pickListBean.getPersonList().size(); i++) {
if (pickListBean.getPersonList().get(i).getName().equals(s)) {
return pickListBean.getPersonList().get(i);
}
}
return null;
}
@Override
public String getAsString(FacesContext facesContext, UIComponent component, Object o) {
if (o == null) return null;
return ((Person) o).getName();
}
}
１３．「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">
<h:head>
</h:head>
<h:body>
<h:form>
<rich:pickList value="#{pickListBean.selectedPersonList}"
var="person"
listWidth="200px"
listHeight="100px"
orderable="true" >
<f:selectItems value="#{pickListBean.personList}" />
<f:converter converterId="PersonConverter" />
<rich:column>
<f:facet name="header">ID</f:facet>
<h:outputText value="#{person.id}" />
</rich:column>
<rich:column>
<f:facet name="header">名前</f:facet>
<h:outputText value="#{person.name}" />
</rich:column>
<rich:column>
<f:facet name="header">年齢</f:facet>
<h:outputText value="#{person.age}" />
</rich:column>
</rich:pickList>
<br /><br />
<a4j:commandButton value="送信" render="out" execute="@form" />
<rich:list id="out" var="person" value="#{pickListBean.selectedPersonList}" >
ID：#{person.id} 名前：#{person.name} 年齢：#{person.age}<br />
</rich:list>
</h:form>
</h:body>
</html>
１６．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１７．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１８．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１９．ブラウザで以下のURLにアクセスします。
http://localhost:8080/RichFaces4Sample048-PickListObjectColumn/faces/index.xhtml
２０．以下の様に表示されれば成功です。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。