Pengenalan Swing Framework dan Beans Binding bag.2

Akhirnya tulisan ini bisa dilanjutin lagi.. sory karena baru ada waktu lowong. Pada tulisan sebelumnya kita sudah sampai pada pembuatan class-class DAO yang dibutuhkan aplikasi. Nah sekarang kita buatkan user interfacenya.

Buatlah sebuah class baru dalam hal ini JDialog Form beri nama ProductDialog dengan package productsrecord, dan desainlah tampilannya seperti gambar berikut.

Perhatikan dalam form(JDialog) kita menggunakan tabpane untuk Daftar Kategori dan Daftar Barang. Pada gambar di atas adalah tampilan tab untuk Daftar Kategori dan Gambar berikut adalah tampilan untuk tab daftar barang.

Berilah nama masing-masing component swing tersebut sesusai keinginan anda. Misalnya tabel untuk Category saya beri nama categoryTable dan tabel untuk product saya beri nama productTable. Demikian juga untuk textfield-textfield yang ada. Kecuali untuk tombol nanti kita beri nama kemudian.

Baik selanjutnya kita akan membuat sebuah class tambahan/pembantu yang berfungsi sebagai perantara antara user interface dengan class-class DAO sebelumnya. Buatlah sebua class dengan nama Service dan simpan dengan package productsrecord. Berikut isi dari class Service tersebut:

public class Service {
private EntityManager em;
private ProductDAO pDao;
private CategoryDAO cDao;
public Service(EntityManager em){
setEm(em);
}
private void setEm(EntityManager em) {
this.em = em;
this.pDao = new ProductDAO(this.em);
this.cDao = new CategoryDAO(this.em);
}
public void refresh(Object ebj){
this.em.getTransaction().begin();
this.em.refresh(ebj);
this.em.getTransaction().commit();
}
public void save(Product product){
this.em.getTransaction().begin();
pDao.save(product);
this.em.getTransaction().commit();
}
public void save(Category cat){
this.em.getTransaction().begin();
cDao.save(cat);
this.em.getTransaction().commit();
}
public void delete(Product product){
this.em.getTransaction().begin();
pDao.delete(product);
this.em.getTransaction().commit();
}
public void delete(Category cat){
this.em.getTransaction().begin();
cDao.delete(cat);
this.em.getTransaction().commit();
}
public Product getProduct(long id){
return pDao.getProduct(id);
}
public Category getCategory(long id){
return cDao.getCategory(id);
}
public List<Product> getProducts(){
return pDao.getProducts();
}
public List<Category> getCategories(){
return cDao.getCategories();
}
}

Selanjutnya bukalah class ProductRecordApp dan tambahkan 2 property berikut ini

public class ProdukApp extends SingleFrameApplication {

private static Service service;
private static EntityManager em;

//..... code yang lain

}

Kemudian masih di class ProductRecordApp, ubahlah method startup menjadi

@Override protected void startup() {
em = Persistence.createEntityManagerFactory("ProductsRecordPU").createEntityManager();
service = new Service(em);
show(new ProdukView(this));
}

Berikutnya buatkan method seter untuk menakses property service tersebut

public static Service getService() {
return service;
}

Ok selanjutnya kita akan melakukan binding data ke form yang sudah kita buat sebelumnya. Buatlah QueryResult seperti gambar dibawah ini

maka akan tercipta list1 pada bagian Other Components. Klik kanan pada list1 dan pilih Properties, maka akan ditampilkan window properties untuk list1. Selanjutnya lakukan langkah-langkah berikut:

Aktifkan centangan pada observable

Pindah ke tab Code, dan ubah Variable Name menjadi categoryList dan Type Parametersnya menjadi <Category>

Masih di tab Code, pada Custome Creation Code tambahkan code berikut

ObservableCollections.observableList(ProductRecordApp.getService().getCategories())

Dan pada Pre-Creation Code tambahkan code berikut

categoryList = new ArrayList<Category>();

Selanjutnya kita akan mem-bind tabel Category ke categoryList yang baru dibuat. Pada form Klik kanan categoryTable dan pilih Bind>elements

Selanjutnya akan ditampilkan Bind Properties Window. Lakukan perubahan sesuai yang ditampilkan pada gambar berikut, kemudian tekan tombol OK

Selanjutnya kita akan melakukan binding juga untuk textfield Nama dan Keterangan pada Category. Klik kanan pada textfield Nama dan pilih Bind>text. Maka akan ditampilkan bind properties window. Lakukan perubahan seperti pada gambar berikut:

Lakukan hal yang sama untuk textfield Keterangan. Yang berbeda hanyalah binding Expressionnya menjadi ${selectedElement.description}

Pindah pada mode Source dan tambahkan method berikut ini

public class ProductDialog extends javax.swing.JDialog {

//code program lainnya

private boolean isNew;
private boolean isNewProduct;
private void updateCategories(){
List<Category> data = ProductsRecordApp.getService().getCategories();
for (Object object : data) {
ProductsRecordApp.getService().refresh(object);
}
categoryList.clear();
categoryList.addAll(data);
}

//code program lainnya

Selanjutnya kembali lagi ke mode Design dan klik kanan pada jButton1 kemudian pilih Set Action.. maka akan ditampilkan Window Set Action dan lakukan perubahan sesuai dengan gambar berikut.

Setelah kita menekan tombol OK maka secara otomatis Netbeans akan menciptakan sebuah action method sesuai dengan nama yang kita berikan. Ubahlah method deleteCategory sesuai kode berikut ini

</p>

<p style="text-align: left;">@Action
public void deleteCategory() {
if(!isNew){
int[] selected = categoryTable.getSelectedRows();
List<Category> toRemove = new ArrayList<Category>(selected.length);
for (int x = 0; x < selected.length; x++) {
Category cat = categoryList.get(categoryTable.convertRowIndexToModel(selected[x]));
toRemove.add(cat);
ProductsRecordApp.getService().delete(cat);
}
categoryList.removeAll(toRemove);
}else{
Category cat = categoryList.get(categoryTable.convertRowIndexToModel(categoryList.size()-1));
categoryList.remove(cat);
ProductsRecordApp.getService().delete(cat);
}
categoryTable.getSelectionModel().clearSelection();
txtCategoryName.setText("");
txtCategoryDesc.setText("");
refreshCategoryButton.setEnabled(true);
insertCategoryButton.setEnabled(true);
isNew = false;
}
<p style="text-align: left;">

Selanjutnya ganti nama masing-masing jButton1 menjadi deleteCategoryButton, dan jButton2 menjadi saveCategoryButton, jButton3 menjadi  insertCategoryButton dan jButton4 menjadi refreshCategoryButton.

Selanjutnya kita tambahkan action untuk saveCategoryButton. Klik kanan pada saveCategoryButton, pilih Set Action dan sesuaikan seperti gambar berikut.

Kemudian ubahlah method saveCategory seperti berikut ini

</p>

<p style="text-align: left;">@Action
public void saveCategory() {
Integer selectedRow = categoryTable.getSelectedRow();
if (selectedRow >= 0) {
Category cat = categoryList.get(selectedRow);
cat.setName(txtCategoryName.getText());
cat.setDescription(txtCategoryDesc.getText());
ProductsRecordApp.getService().save(cat);
updateCategories();
categoryTable.getSelectionModel().clearSelection();
txtCategoryName.setText("");
txtCategoryDesc.setText("");
if(isNew){
if(JOptionPane.showConfirmDialog(this, "Data Tersimpan\nTambah data lagi?","Konfirmation",JOptionPane.YES_NO_OPTION)==0){
insertCategory();
}else{
isNew = false;
refreshCategoryButton.setEnabled(true);
insertCategoryButton.setEnabled(true);
}
}
}
}
<p style="text-align: left;">

Berikutnya kita tambakan Action untuk tombol insertCategoryButton. Klik kanan pada tombol insertCategoryButton, pilih Set Action.. dan ubahlah propertinya seperti pada gambar berikut

Kemudian ubahlah method insertCategory menjadi seperti berikut

</p>

<p style="text-align: left;">@Action
public void insertCategory() {
isNew = true;
Category newCategory = new Category();
newCategory.setName("");
newCategory.setDescription("");
ProductsRecordApp.getService().save(newCategory);
updateCategories();
int selectedRow = categoryList.size()-1;
categoryTable.getSelectionModel().setSelectionInterval(selectedRow, selectedRow);
refreshCategoryButton.setEnabled(false);
insertCategoryButton.setEnabled(false);
txtCategoryName.requestFocus();
}
<p style="text-align: left;">

Dan yang berikutnya kita akan menambahkan Action untuk tombol refreshCategoryButton. Klik kanan pada tombol tersebut, pilih Set Action dan ubahlah sesuai gambar berikut

Selanjutnya ubahlah method refreshCategory menjadi sebagai berikut

</p>

<p style="text-align: left;">@Action
public void refreshCategory() {
updateCategories();
categoryTable.getSelectionModel().clearSelection();
txtCategoryName.setText("");
txtCategoryDesc.setText("");
}
<p style="text-align: left;">

Ok sampai disini kita sudah menyelesaikan semua fungsi untuk Category. Agar bisa dijalankan, kita harus membuat menu pada frame utama yang akan memanggil frame ProductDialog. Bukalah class ProductRecordView. Pada mode design, tambahkan menu untuk File seperti pada gambar berikut

Ubahlah text untuk menu tersebut menjadi Products kemudian klik kanan pada menu Products tersebut dan pilih Set Action.. dan ubahlah sesuai gambar berikut ini

Ubahlah method showProductsDialog menjadi sebagai berikut

</p>

<p style="text-align: left;">private JDialog productDialog;
@Action
public void showProductsDialog() {
if (productDialog == null) {
JFrame mainFrame = ProductsRecordApp.getApplication().getMainFrame();
productDialog = new ProductDialog(mainFrame, false);
productDialog.setLocationRelativeTo(mainFrame);
}
ProductsRecordApp.getApplication().show(productDialog);
}
<p style="text-align: left;">

Ok sekarang aplikasi bisa dicoba untuk dijalankan. Silahkan dicoba untuk tambah, ubah dan hapus Category. Untuk bagian product saya lanjutkan pada tulisan berikutnya.. [to be continue]

NB: Untuk source codenya bisa dichecout dari  https:////hendrosteven.googlecode.com/svn/trunk/ProductRecord