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.

form2

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

list1maka 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&amp;amp;amp;amp;amp;amp;amp;amp;lt;Category&amp;amp;amp;amp;amp;amp;amp;amp;gt;();

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

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

bindprop1

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:

bindtxtnama

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&amp;amp;amp;amp;amp;amp;lt;Category&amp;amp;amp;amp;amp;amp;gt; 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.

binddelete1

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

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;@Action
public void deleteCategory() {
if(!isNew){
int[] selected = categoryTable.getSelectedRows();
List&amp;amp;amp;amp;amp;amp;lt;Category&amp;amp;amp;amp;amp;amp;gt; toRemove = new ArrayList&amp;amp;amp;amp;amp;amp;lt;Category&amp;amp;amp;amp;amp;amp;gt;(selected.length);
for (int x = 0; x &amp;amp;amp;amp;amp;amp;lt; 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;
}
&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;

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.

bindsave1

Kemudian ubahlah method saveCategory seperti berikut ini

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;@Action
public void saveCategory() {
Integer selectedRow = categoryTable.getSelectedRow();
if (selectedRow &amp;amp;amp;amp;amp;amp;gt;= 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);
}
}
}
}
&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;

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

bindinsert1

Kemudian ubahlah method insertCategory menjadi seperti berikut

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;@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();
}
&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;

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

bindrefresh1

Selanjutnya ubahlah method refreshCategory menjadi sebagai berikut

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

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

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

addmenu

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

menuaction

Ubahlah method showProductsDialog menjadi sebagai berikut

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;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);
}
&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;

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

7 Responses to Pengenalan Swing Framework dan Beans Binding bag.2

  1. karsanto says:

    Wow…. Mantab postingannya.
    Jadi semakin semangat nih belajar…

    Anyway, klo pake framework seperti ini berarti konsepnya pasti kita harus install aplikasi di client yah?
    Kemarin abis di tegur karena buat prototype pake konsep desktop application, ga praktis katanya. Nah sekarang lagi cari cara supaya yang tak kerjain tak mubajir…hihihi..

    Anyway, postingannya superb…. Nyesel baru liat hari ini.

    Salam Sukses.

  2. amir says:

    mas, passwordnya apa

  3. DUmb says:

    Hi….mantap mas,,,,,tapi tempatku terjadi exception nullpointer ya mas, hik…hik….. ini yang nullpointernya :
    categoryList = ObservableCollections.observableList(ProductRecordApp.getService().getCategories());

    Apa nya yang salah ya mas…..

  4. Hendro Steven says:

    coba cek lagi method getCategories()nya mungkin tidak menghasilkan apa-apa atau null

  5. Vyor says:

    Kak, “Jam Terbang” tambah tinggi yaw ????

    Macam burung saja … huahahahahah …….. :)) sip …sip

  6. MrBlack says:

    Thanks Banget Om, Membantu Banget

  7. MrBlack says:

    Kapan Buat yang Produknya ????
    Jadi Gak Sabar

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: