Jsf-display-datatable

提供：Dev Guides
移動先:案内、検索

JSF-DataTableの表示

h：dataTableタグは、表形式でデータを表示するために使用されます。

JSFタグ

<h:dataTable value = "#{userData.employees}" var = "employee"
   styleClass = "employeeTable"
   headerClass = "employeeTableHeader"
   rowClasses = "employeeTableOddRow,employeeTableEvenRow">

   <h:column>
      <f:facet name = "header">Name</f:facet>
      #{employee.name}
   </h:column>

   <h:column>
      <f:facet name = "header">Department</f:facet>
      #{employee.department}
   </h:column>

   <h:column>
      <f:facet name = "header">Age</f:facet>
      #{employee.age}
   </h:column>

   <h:column>
      <f:facet name = "header">Salary</f:facet>
      #{employee.salary}
   </h:column>
</h:dataTable>

レンダリングされた出力

<table class = "employeeTable">
   <thead>
      <tr>
         <th class = "employeeTableHeader" scope = "col">Name</th>
         <th class = "employeeTableHeader" scope = "col">Department</th>
         <th class = "employeeTableHeader" scope = "col">Age</th>
         <th class = "employeeTableHeader" scope = "col">Salary</th>
      </tr>
   </thead>

   <tbody>
   <tr class = "employeeTableOddRow">
      <td>John</td>
      <td>Marketing</td>
      <td>30</td>
      <td>2000.0</td>
   </tr>

   <tr class = "employeeTableEvenRow">
      <td>Robert</td>
      <td>Marketing</td>
      <td>35</td>
      <td>3000.0</td>
   </tr>
</table>

タグ属性

S.No Attribute & Description
1

id

コンポーネントの識別子

2

rendered

ブール値。 falseはレンダリングを抑制します

3

dir

テキストの方向。 有効な値は ltr （左から右）および rtl （右から左）です。

4

styleClass

カスケードスタイルシート（CSS）クラス名

5

value

コンポーネントの値、通常は値バインディング

6

bgcolor

テーブルの背景色

7

border

テーブルの境界線の幅

8

cellpadding

テーブルセルの周りのパディング

9

cellspacing

テーブルセル間の間隔

10

columnClasses

列のCSSクラスのカンマ区切りリスト

11

first

表に示されている最初の行のインデックス

12

footerClass

テーブルフッターのCSSクラス

13

frame

テーブルを囲むフレームの側面の仕様を描画する必要があります。有効な値：none、above、below、hsides、vsides、lhs、rhs、box、border

14

headerClass

テーブルヘッダーのCSSクラス

15

rowClasses

行のCSSクラスのカンマ区切りリスト

16

rules

セル間に描画される線の仕様。有効な値：グループ、行、列、すべて

17

summary

音声などの非視覚的フィードバックに使用されるテーブルの目的と構造の概要

18

var

値の現在のアイテムを表すデータテーブルによって作成された変数の名前

19

title

アクセシビリティのために使用される、要素を説明するタイトル。 視覚的なブラウザは通常、タイトルの価値に関するツールチップを作成します

20

width

要素の幅

21

onblur

要素がフォーカスを失います

22

onchange

要素の価値の変化

23

onclick

マウスボタンが要素上でクリックされた

24

ondblclick

マウスボタンが要素上でダブルクリックされます

25

onfocus

要素がフォーカスを受け取る

26

onkeydown

キーが押された

27

onkeypress

キーが押され、その後解放されます

28

onkeyup

キーが解放されます

29

onmousedown

マウスボタンが要素上で押されています

30

onmousemove

マウスが要素の上を移動する

31

onmouseout

マウスは要素の領域を離れます

32

onmouseover

マウスが要素の上に移動する

33

onmouseup

マウスボタンが離された

応用例

上記のタグをテストするテストJSFアプリケーションを作成しましょう。

Step Description
1 Create a project with a name helloworld under a package com.finddevguides.test as explained in the JSF - h:outputStylesheet sub-chapter of JSF - Basic Tags chapter.
2 Modify styles.css as explained below.
3 Create Employee.java under package com.finddevguides.test as explained below.
4 Create UserData.java as a managed bean under package com.finddevguides.test as explained below.
5 Modify home.xhtml as explained below. Keep the rest of the files unchanged.
6 Compile and run the application to make sure the business logic is working as per the requirements.
7 Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
8 Launch your web application using appropriate URL as explained below in the last step.

styles.css

.employeeTable {
   border-collapse:collapse;
   border:1px solid #000000;
}

.employeeTableHeader {
   text-align:center;
   background:none repeat scroll 0 0 #B5B5B5;
   border-bottom:1px solid #000000;
   padding:2px;
}

.employeeTableOddRow {
   text-align:center;
   background:none repeat scroll 0 0 #FFFFFFF;
}

.employeeTableEvenRow {
   text-align:center;
   background:none repeat scroll 0 0 #D3D3D3;
}

Employee.java

package com.finddevguides.test;

public class Employee {
   private String name;
   private String department;
   private int age;
   private double salary;
   private boolean canEdit;

   public Employee (String name,String department,int age,double salary) {
      this.name = name;
      this.department = department;
      this.age = age;
      this.salary = salary;
      canEdit = false;
   }

   public String getName() {
      return name;
   }

   public void setName(String name) {
      this.name = name;
   }

   public String getDepartment() {
      return department;
   }

   public void setDepartment(String department) {
      this.department = department;
   }

   public int getAge() {
      return age;
   }

   public void setAge(int age) {
      this.age = age;
   }

   public double getSalary() {
      return salary;
   }

   public void setSalary(double salary) {
      this.salary = salary;
   }

   public boolean isCanEdit() {
      return canEdit;
   }

   public void setCanEdit(boolean canEdit) {
      this.canEdit = canEdit;
   }
}

UserData.java

package com.finddevguides.test;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Arrays;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   private String name;
   private String dept;
   private int age;
   private double salary;
   private static final ArrayList<Employee> employees
      = new ArrayList<Employee>(Arrays.asList(
      new Employee("John", "Marketing", 30,2000.00),
      new Employee("Robert", "Marketing", 35,3000.00),
      new Employee("Mark", "Sales", 25,2500.00),
      new Employee("Chris", "Marketing", 33,2500.00),
      new Employee("Peter", "Customer Care", 20,1500.00)
   ));


   public ArrayList<Employee> getEmployees() {
      return employees;
   }

   public String addEmployee() {
      Employee employee = new Employee(name,dept,age,salary);
      employees.add(employee);
      return null;
   }

   public String deleteEmployee(Employee employee) {
      employees.remove(employee);
      return null;
   }

   public String editEmployee(Employee employee) {
      employee.setCanEdit(true);
      return null;
   }

   public String saveEmployees() {

     //set "canEdit" of all employees to false

      for (Employee employee : employees) {
         employee.setCanEdit(false);
      }
      return null;
   }

   public String getName() {
      return name;
   }

   public void setName(String name) {
      this.name = name;
   }

   public String getDepartment() {
      return department;
   }

   public void setDepartment(String department) {
      this.department = department;
   }

   public int getAge() {
      return age;
   }

   public void setAge(int age) {
      this.age = age;
   }

   public double getSalary() {
      return salary;
   }

   public void setSalary(double salary) {
      this.salary = salary;
   }
}

home.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core">

   <h:head>
      <title>JSF tutorial</title>
      <h:outputStylesheet library = "css" name = "styles.css" />
   </h:head>

   <h:body>
      <h2>DataTable Example</h2>

      <h:form>
         <h:dataTable value = "#{userData.employees}" var = "employee"
            styleClass = "employeeTable"
            headerClass = "employeeTableHeader"
            rowClasses = "employeeTableOddRow,employeeTableEvenRow">

            <h:column>
               <f:facet name = "header">Name</f:facet>
               #{employee.name}
            </h:column>

            <h:column>
               <f:facet name = "header">Department</f:facet>
               #{employee.department}
            </h:column>

            <h:column>
               <f:facet name = "header">Age</f:facet>
               #{employee.age}
            </h:column>

            <h:column>
               <f:facet name = "header">Salary</f:facet>
               #{employee.salary}
            </h:column>
         </h:dataTable>
      </h:form>

   </h:body>
</html>

すべての変更を完了したら、JSF-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。 すべてがアプリケーションで問題ない場合、次の結果が生成されます。

JSF表示データテーブル

「https://www.finddevguides.com/index.php?title=Jsf-display-datatable&oldid=20336」から取得
Powered by MediaWiki