Richfaces – Datatable di JSF 2

Sekumpulan data memang lebih enak dilihat kalo ditampilkan menggunakan tabel, kalo dalam Java Desktop dapat digunakan JTable. Tetapi bagaimana jika ingin menampilkan data dalam bentuk table pada web (jsf) ? Salah satu solusinya adalah dengan menggunakan Richfaces Datatable.

Penggunaan Richfaces Datatable cukup sederhana, tidak memerlukan banyak kode program (udah diurus ama richfaces :D). Dari pada ngalor ngidul terus, langsung aja dimulai pembuatan datatable.

Library yang digunakan :

  • JSF 2
  • Richfaces 4.2

Buat dulu project webnya, untuk servernya bisa gunain tomcat atopun glassfish.

Kita buat terlebih dahulu kelas entity dengan nama Test.java


package achmad.entity;

import java.io.Serializable;

/**
*
* @author New
*/
public class Test implements Serializable{
private String nama;
private String alamat;
private String telp;

public String getAlamat() {
return alamat;
}

public void setAlamat(String alamat) {
this.alamat = alamat;
}

public String getNama() {
return nama;
}

public void setNama(String nama) {
this.nama = nama;
}

public String getTelp() {
return telp;
}

public void setTelp(String telp) {
this.telp = telp;
}
}

Langkah selanjutnya kita buat class java yang digunakan sebagai managebean, disini class java yang dibuat adalah TestBean.java


package achmad.bean;

import achmad.entity.Test;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

/**
*
* @author New
*/
@ManagedBean
@RequestScoped
public class TestBean implements Serializable{
private List<Test> list;

private int key;

private boolean show;
private Test test;

private String nama;
private String alamat;
private String telp;

public List<Test> getAllTest(){
list = new ArrayList<Test>();

for(int i=0;i<25;i++){
Test t = new Test();
t.setNama("lutfi "+i);
t.setAlamat("alamat "+i);
t.setTelp("telp "+i);

list.add(t);
}
return list;
}

public Test getTest() {
System.out.println("BACAAAAAAAAAAAAAAAAAAAa");
if(test!=null){
nama = test.getNama();
alamat = test.getAlamat();
telp = test.getTelp();
}
return test;
}

public void setTest(Test test) {
System.out.println("TULISSSSSSSSSSSSSSSS");
if(test!=null){
nama = test.getNama();
alamat = test.getAlamat();
telp = test.getTelp();
}

this.test = test;
}

public String getAlamat() {
return alamat;
}

public void setAlamat(String alamat) {
this.alamat = alamat;
}

public String getNama() {
return nama;
}

public void setNama(String nama) {
this.nama = nama;
}

public String getTelp() {
return telp;
}

public void setTelp(String telp) {
this.telp = telp;
}
}

Dokumen facelet yang dibuat adalah index.xhtml, kodenya seperti ini :


<?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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
>
<h:head>
<title>Data Table</title>
</h:head>
<h:body>
<rich:panel style="width: 500px;margin: 0px auto;">
<h:form prependId="false" id="formTes">
<rich:extendedDataTable value="#{testBean.allTest}" var="test" style="width: 100%;" rows="10" rowKeyVar="key" >
<f:facet name="header">Test Header</f:facet>

<rich:column width="20%">
<f:facet name="header">Nama</f:facet>
#{test.nama}
</rich:column>

<rich:column width="20%">
<f:facet name="header">Alamat</f:facet>
#{test.alamat}
</rich:column>

<rich:column width="30%">
<f:facet name="header">Telp</f:facet>
#{test.telp}
</rich:column>

<rich:column width="10%">
<f:facet name="header">Detail</f:facet>
<a4j:commandLink execute="@this" render="renderPanel" oncomplete="#{rich:component('outputPanel')}.show()">
Detail
<f:setPropertyActionListener value="#{test}" target="#{testBean.test}" />
</a4j:commandLink>
</rich:column>

<f:facet name="footer">
<rich:dataScroller />
</f:facet>
</rich:extendedDataTable>

</h:form>

<h:form prependId="false" id="formPanel">
<rich:popupPanel id="outputPanel" width="290" domElementAttachment="form" >
<f:facet name="header">Detail</f:facet>

<h:panelGrid id="renderPanel" columns="2">
<h:outputText value="Nama" />
<h:inputText id="a" value="#{testBean.nama}" required="true" />
<h:outputText value="Alamat" />
<h:inputText id="b" value="#{testBean.alamat}" required="true" />
<h:outputText value="Telp" />
<h:inputText id="c" value="#{testBean.telp}" required="true" />
</h:panelGrid>
<a href="#" onclick="#{rich:component('outputPanel')}.hide();return false;">Close</a>
</rich:popupPanel>
</h:form>
</rich:panel>
</h:body>
</html>

Setelah kode facelet dibuat, berarti project kita dah selesai.
Buat yang mau download source code, download di http://achmad-project.googlecode.com/files/DataTable-source.7z

, , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: