Persiapkan Database
Saya akan menggunakan Mysql sebagai DBMS nya. Untuk sample data saya menggunakan Employees Sample Database (employees_db-full-1.0.6.tar.bz2) yang dapat anda unduh di sini:
Extract file yang sudah di unduh pada website di atas dan anda akan memukan file "employees.sql", lakukan import ke mysql dengan menjalankan perintah di bawah:
mysql -u root -t < employees.sql
Mulai
Buat aplikasi dengan JDeveloper -> Pilih Fusion Web Application
Di dalam aplikasi yang sudah di buat tambahkan komponen-komponen ADF BC, dengan memilih Business Components from Table
Saya menggunakan tabel "employees" sebagai contoh:
Klik finish, maka akan terbentuk Application Module dan EmployeesView view object yang me-representasikan tabel "employees" pada database.
Seperti yang sudah saya jelaskan di atas, ada beberapa cara untuk membuat form pencarian di ADF. Berikut saya jelaskan caranya satu persatu:
1. ADF Query Component
ADF Query Component adalah sebuah component yang di sediakan oleh ADF untuk membuat form pencarian.Misal, kita akan mebuat form pencarian sehingga pengguna dapat melakukan pencarian berdasarkan nama karyawan. Pertama-tama buat View Criteria pada EmployeesView VO, pada contoh saya menamakannya EmployeesByNameViewCriteria.
Buat halaman baru "index.jspx":
Pada panel "Data Controls" -> Ekspan "EmployeesView" -> Ekspan "Named Criteria" -> Drag "EmployeesByNameViewCriteria" ke halaman yang sudah anda buat sebelumnya -> Query -> Pilih "ADF Query Panel with Tabel"
Pada window selanjutnya anda dapat memilih atribut-atribut yang akan di tampilkan pada tabel yang akan di generate oleh jdeveloper.
Agar tampak lebih bagus, kita dapat merentangkan tabel agar mengisi seluruh layar browser secara horizontal dengan menambahkan PanelCollection. Klik kanan pada tabel, pilih "Surround with" dan pilih "PanelCollection" dan klik OK.
Karena kita sudah menambahkan PanelCollection pada tabel, kita harus merubah ResultComponentId pada Query Panel. Pilih query panel pada Structure Window dan set property dengan menggunakan "Edit" dan pilih tabel yang sudah berada dalam PanelCollection.
Hasil nya saat di jalankan:
2. Programmatic Searching
Dengan menggunakan cara ini kita akan melakukan pencarian secara manual melalui backing bean. Metode ini lebih flexible karena anda dapat melakukan pemrosesan input data terlebih dahulu sebelum melakukan pencarian. Sebagai contoh kita akan form pencarian untuk mencari data berdasarkan nama awal dan jenis kelamin.Buat halaman baru "index2.jspx", pastikan anda men-centang "Automatically expose UI components in a new managed bean".
Buat View Object untuk menampung masukan pencarian:
Klik kanan pada model -> New View Object
Masukkan nama, sebagai contoh saya namakan InputView.
Pilih "Read-only access through SQL query"
Klik next, masukkan query sebagai berikut:
select '' Nama, '' JenisKelamin from dual
- Updatable : Always
- Type : VARCHAR2(20) utk Nama - VARCHAR2(1) utk JenisKelamin
Tambahkan instance dari VO ini ke Application Module. Klik finish.
Karena kita akan melakukan query secara manual maka kita akan menambahkan where clause pada EmployeesView view object:
WHERE employeesemployees.first_name LIKE ?
AND employeesemployees.gender LIKE ?
Jika anda menggunakan Oracle DB maka anda dapat menggunakan syntax yang sedikit berbeda:
WHERE employeesemployees.first_name LIKE :1
AND employeesemployees.gender LIKE :2
Drag view object "InputView" yang sudah di buat sebelumnya ke halaman index2.jspx -> Pilih Form -> ADF Form, Maka akan terbentuk form dengan dua input field yang akan menampung kriteria pencarian.
Drag view object "EmployeesView", letakkan di bawah form -> Pilih Table -> ADF Read-only Table, maka akan terbentuk tabel yang akan menampung hasil pencarian.
Tambahkan juga tombol untuk men-trigger pencarian.
Tambahkan kode berikut pada backing bean yang terkait dengan halaman "index2.jspx" yaitu view.backing.Index2.java:
public String mulaiPencarian() {
// kriteria pencarian dari form input
String nama = (String)getAttributeBinding("Nama").getInputValue();
String jk = (String)getAttributeBinding("JenisKelamin").getInputValue();
String arg1 = makeOptional(nama);
String arg2 = makeOptional(jk);
// set query parameter
DCIteratorBinding iterator = getIterator(t1);
ViewObject vo = iterator.getViewObject();
vo.setWhereClauseParam(0, arg1);
vo.setWhereClauseParam(1, arg2);
vo.executeQuery();
return null;
}
private AttributeBinding getAttributeBinding(String bindingName) {
BindingContainer bindings = BindingContext.getCurrent().getCurrentBindingsEntry();
return (AttributeBinding)bindings.get(bindingName);
}
private DCIteratorBinding getIterator(UIComponent comp) {
if (comp instanceof UIXTable) {
CollectionModel model = (CollectionModel)((UIXTable)comp).getValue();
JUCtrlHierBinding treeBinding = (JUCtrlHierBinding)model.getWrappedData();
return treeBinding.getDCIteratorBinding();
}
throw new IllegalArgumentException("Komponen bukan UIXTable");
}
private String makeOptional(String val) {
return "%" + (val == null ? "" : val) + "%";
}
Untuk mendapatkan input value pada form kita menggunakan getAttributeBinding dengan memberikan parameter berupa nama binding dari masing-masing input field yang dapat di lihat di PageDef:
Kemudian di lakukan pencarian dengan melakukan setting parameter pada view object dari tabel.
vo.setWhereClauseParam(0, arg1);
vo.setWhereClauseParam(1, arg2);
Akan terjadi error saat AppModule di inisialisasi karena Viewobject mempunyai parameter yang harus di set. Untuk mencegah error ini, override method prepareSession(SessionData) pada AppModule impl, dan tambahkan kode berikut:
getEmployeesView1().setWhereClauseParams(new Object[]{"%", "%"});
Langkah terakhir adalah set peroperty action pada tombol "Cari" ke method mulaiPencarian()
Untuk teknik-teknik pembuatan form pencarian selanjutnya akan saya bahas di kesempatan yang lain.
Demikian, semoga bermanfaat !
No comments:
Post a Comment