Monday, April 26, 2010

Membangun aplikasi Java MDI (Multiple Document Interface) dengan NetBeans IDE 6.0


Dalam pemrograman java untuk aplikasi MDI, jendela-jendela internal (child window) juga berada di dalam sebuah jendela utama tunggal (parent window). Menggunakan NetBeans IDE, kita bisa membuat aplikasi MDI dengan memanfaatkan template/wizard ‘MDI application’. Untuk menambah jendela internal (child window) kita pilih template/wizard frame internal (JInternalFrame).

A. Langkah-langkah membangun aplikasi java MDI dengan NetBeans 6

1. Dari menu, pilih menu ‘File’ -> ‘NewProject’. Akan keluar kotak dialog New Project.

2. [Step-1] Choose Project. Di panel ‘Categories’ pilih Java, dan di panel ‘Projects’ pilih ‘Java Application’. Klik ‘Next’.

3. Name & Location. Tentukan nama dan lokasi project. Contoh:
o Project Name: MDIApp
o Project Location: D:\
‘Project Folder’ akan diisi secara otomatis sesuai nama dan lokasi project.
Hilangkan tanda cek pada pilihan ‘Create Main Class’. Klik ‘Finish’.


B. Menambahkan Main Window (Parent Window)

Langkah-langkah menambahkan jendela utama (parent window) pada aplikasi MDI:
1. dari jendela Projects, klik kanan di atas nama project MDIApp. Muncul popup menu, pilih ‘New’ -> ‘MDI Application Sample Form ..’. Akan muncul wizard ‘New MDI Application Sample Form’.

2. Name & Location. Tentukan nama class dan nama package, klik ‘Finish’. Contoh:
o Class Name: FrmMain
o Package: ui

Gb.1. tampilan IDE dengan jendela utama aplikasi MDI

NetBeans IDE akan membuat form JFrame yang berfungsi sebagai parent window dan sudah memuat komponen menu [JMenuBar] serta komponen desktop pane [JDesktopPane]. Desktop pane inilah yang akan menjadi tempat menambahkan jendela internal (child window) untuk aplikasi MDI.

Dari jendela Inspector, klik node frame utama [JFrame]. Di jendela properties, pilih properti ‘title’, isikan judul frame utama. Contoh: ‘MDI Application’.


C. Menambahkan Internal Window (Child Window)

Cara menambahkan jendela internal (child window) pada aplikasi MDI:

1. dari jendela Inspector, buka node JFrame hingga nampak node desktopPane [JDesktopPane]. Klik kanan di atas node desktopPane. Muncul popup menu, pilih ‘Add From Palette’ -> ‘Swing Containers’ -> ‘Internal Frame’.

2. NetBeans IDE akan menambahkan JInternalFrame baru ke dalam JFrame yang menjadi parent window. Klik pada JinternalFrame, atur posisi dan ukurannya sesuai yang diinginkan.


Gb.2. memilih komponen JInternalFrame dari popup menu

3. dari jendela properties, berikan judul JinternalFrame yang baru
- properti ‘title’ : berikan judul misalnya ‘Format Background Color’.

4. Untuk contoh aplikasi, kita tambahkan komponen Swing ke dalam internal frame. Dari jendela Palette, tambahkan sebuah komponen JColorChooser dan sebuah JButton ke dalam internal Frame [JFrame].
Atur ukuran dan posisi JColorChooser beserta JInternalFrame yang menjadi kontainernya, sehingga tampilan aplikasi seperti gambar 13 di bawah.

5. Ganti nama-nama komponen yang ada dengan nama variabel yang lebih mudah diingat, dari jendela inspector atau jendela properties.


D. Menambahkan Event Handler

Sebagai contoh aplikasi MDI, program MDI Application akan kita buat sebagai berikut:
- jika kita klik menu ‘Format’ – ‘Background Color’, internal frame Format BackgroundColor [frmBgColor] akan muncul.
- Pilih warna latar belakang (background) yang diinginkan. Klik tombol ‘Apply’, baru setelah itu warna background frame utama [JFrame] akan berubah sesuai warna yang kita pilih di JcolorChooser.
Gb.3. JInternalFrame dengan komponen JColorChooser

Menambahkan event handler:
1. dari jendela design (GUI Builder), klik kanan pada tombol ‘Apply’ [btnOK]. Dari popup menu yang muncul, pilih ‘Events’ -> ‘Action’ -> method ‘actionPerform’.

2. IDE akan menyediakan method event handler untuk penekanan (klik) pada tombol ‘Apply’. Tambahkan baris-baris program sehingga secara keseluruhan method event handler akan tampak seperti berikut ini.

private void btnOKActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
bgColor=colorChooser.getColor();
desktopPane.setBackground(bgColor);
}

Tambahkan menu baru : ‘Format’ dan sub menunya: ‘Background Color’ ke dalam menu [JMenuBar].
- klik kanan di area menu [JMenuBar], pilih popup menu ‘Add Menu’. IDE akan menambahkan menu baru.
- Edit properti ‘text’ dari menu yang baru menjadi ‘Format’
- Klik menu ‘Help’ kemudian drag ke samping kanan menu ‘Format’
- Klik kanan pada menu ‘Format’, pilih popup menu ‘Add From Palette’ -> ‘Menu Item’
- Edit properti ‘text’ dari sub menu yang baru, menjadi ‘Background Color’
- Simpan semua perubahan dengan ‘File’ -> ‘Save’. Hasil akhir tampilan MDIApp dapat dilihat dengan icon ‘Preview Design’

Menambahkan event handler untuk menu ‘Format’ -> ‘Background Color’:
- klik menu ‘Format’ -> ‘Background Color’
- klik kanan pada sub menu ‘Background Color’, pilih popup menu ‘Events’ -> ‘Action’ -> ‘actionPerform’.
- IDE akan menambahkan method event handler baru pada jendela ‘source’. Method event handler ini akan menangkap event penekanan mouse atau klik pada sub menu ‘Background Color’.
- Tambahkan baris-baris program sehingga secara keseluruhan method event handler akan tampak seperti berikut ini.

private void bgColorMenuActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
frmFormatBgColor.setVisible(true);
frmFormatBgColor.show();
bgColor = desktopPane.getBackground();
colorChooser.setColor(bgColor);
}


- Atur properti properti ‘DefaultCloseOparation’ pd JinternalFrame, pilih ‘HIDE’
- Simpan semua perubahan dengan ‘File’ -> ‘Save’

E. Build & Run
Build dan jalankan aplikasi MDIApp dengan menu ‘Build’ -> ‘Build Main Project’ (F11) dan menu ‘Run’ -> ‘Run Main Project’ (F6).

4 comments: