Selamat datang kembali di blogs UNYDeveloperNetwork. Pada tutorial kali ini, Saya akan memberikan tutorial merancang dan membuat notifikasi dengan menggunakna JFrame (Netbeans).
Apakah itu notifikasi? Merujuk pada definisi notifikasi pada Google Developer Training, notifikasi adalah pesan yang ditampilkan aplikasi kepada pengguna di luar UI Normal Aplikasi. Kemudian apa sajakan komponen – komponen UI yang mesti ada di dalam sebuah notifikasi…? Secara umum, komponen – komponen UI yang mesti ada dalam sebuah notifikasi adalah sebagai berikut.
- Icon Aplikasi (opsional). Tidak wajib ada, jika ada lebih bagus. Jika ada, akan memudahkan user mengetahui ada notifikasi dari sebuah apps. Jika tidak ada pun tidak apa – apa.
- Nama Aplikasi (wajib). Nama aplikasi harus jelas dan terang supaya user yang memperoleh notifikasi tidak menganggap notifikasi yang diterimanya adalah spam
- Konten Notifikasi (wajib). Konten notifikasi dalam hal ini dibagi menjadi dua, ada yang publik dan ada yang privat. Konten notifikasi dapat menampilkan potongan dari sebuah konten utuh jika bersifat publik dan tidak menyangkut dengan masalah privasi user. Namun, apabila konten yang dinotifikasikan adalah hal yang bersifat privat, maka tidak boleh menampilkan sedikitpun potongan dari sebuah konten utuhnya.
- Waktu Notifikasi (opsional). Sebuah notifikasi dapat menampilkan waktu yang menunjukkan kapan notifikasi itu muncul sehingga memudahkan user mengetahui kapan sebuah notifikasi masuk.
- Tombol untuk menutup / menyembunyikan notifikasi (wajib). Sebuah notifikasi wajib menampilkan sebuah tombol yang dapat dipergunakan oleh user untuk menutup atau menyembunyikan notifikasi yang muncul di layar monitor.
Selanjutnya, setelah kita membahas komponen – komponen UI yang mesti ada di sebuah notifikasi, sekarang kita akan membahas poin – pon UX yang harus ada dalam sebuah notifikasi. Apa sajakah itu?
- Kemunculan notifikasi harus berdasarkan pada pilihan user. Apabila user tidak menginginkan sebuah notifikasi, maka notifikasi tidak akan muncul. Begitu juga sebaliknya
- Notifikasi biasa harus tertutup / tersembunyi secara otomatis dalam waktu antara 3 sampai 4 detik tanpa ada aksi yang melibatkan user.
- Notifikasi yang bersifat sangat penting (misal notifikasi tsunami, gempa, dll) tidak boleh tertutup / tersembunyi secara otomatis dan harus melibatkan aksi user untuk menutup / menyembunyikannya.
- Notifikasi yang memiliki konten sama tidak boleh muncul secara berulang – ulang.
Baik, Saya sudah menjelaskan tentang desain UI dan UX tentang notifikasi. Sekarang saatnya kita akan merancang dan membuat notifikasi dengan menggunakan Java. Namun, sebelum berpanjang lebar, pada tutorial ini Saya tidak akan menjelaskan mulai dari proses pembuatan project dan layouting. Jika Anda membutuhkan tutorial untuk proses pembuatan project Aplikasi Java, dan layouting JFrame, Anda dapat membaca tutorialnya di sini. Langsung saja, kita mulai tutorial ini dari Layout Aplikasi
Layout Aplikasi
Untuk layout Aplikasi, buatlah 3 layout JFrame yakni: (1) MainActivity; (2) Notifikasi; (3) SecondActivity; Berikut adalah Layout dan Propertiesnya.
1. MainActivity
Properties:
| No | Komponen | Property |
| 1 | Class Name | MainActivity.java |
| 2 | JFrame | – ExitOnClose – resizable (false) – Type: normal – Size: 278, 84 |
| 3 | JChecbox | – Variable Name: notificationEnabler – Text: Enable Notification |
| 4 | JButton | – Variable Name: btnTestNotification – Text: Test Notification |
2. NotificationActivity
Properties:
| No | Komponen | Property |
| 1 | Class Name | NotificationActivity.java |
| 2 | JFrame | – Do Nothing – AlwaysOnTop (true) – undecorated (true) – resizable (false) – size: 370, 99 |
| 3 | JPanel1 | – background: 51, 51, 51 – Border: LineBorder; Color: 204, 204, 204, Thickness: 1 – Size: 370, 99 |
| 4 | JLabel1 | Sebagai Icon – size: 48, 48 – icon: 48, 48 – Horizontal Fixed gap: default, default |
| 5 | JLabel2 | Sebagai Judul App Pada Notification – size: 120, 19 – Text: My Notification App – Font: Dialog, 14 Plain – ForegroundColor: System Palette, Control – Horizontal Fixed Gap: default large |
| 6 | JLabel3 | Sebagai Konten Notifikasi – Size: 83, 15 – Text: Contoh Notifikasi – Font: Dialog, 11 Plain – Foreground Color: System Palette, Control – Horizontal Fixed Gap: default small |
| 7 | JButton | – Variable Name: btnOpenNotification – Font: Dialog, 11 Plain – Text: Buka Notifikasi |
| 8 | JLabel | Sebagai tombol close – Variable Name: btnClose – Size: 14, 32 – Text: <html>×</html> – Foreground Color: System Palette, Control – Cursor: HAND_CURSOR – Tooltip: Tutup Notifikasi |
3. SecondActivity
Properties:
| No | Komponen | Property |
| 1 | Class Name | SecondActivity.java |
| 2 | JFrame | – Dispose – resizable (false) – Type: normal – Size: 400, 300 |
| 3 | JLabel | – size: 161, 19 – Text: Ini adalah Second Activity – Font: Dialog, 14 Plain – Horizontal Fixed Gap: default |
Logic Code
Setelah membuat layout selesai, kita beralih ke logic code. Pada bagian ini kita akan memberikan nyawa pada program kita dengan menambahkan beberapa kode ke dalamnya. Saya mohon sekali lagi, jika Anda beginner untuk JFrame, silakan baca artikel ini terlebih dahulu.
1. MainActivity
Pertama, kita buat variable dengan tipe data integer terlebih dahulu untuk menghandle konfigurasi “perizinan” notifikasi.
private int displayNotification = 0;Setelahnya kita isikan blok kode berikut pada actionPerformed btnTestNotification untuk memunculkan notifikasi apabila “diizinkan”.
if(displayNotification == 1){
new NotificationActivity().setVisible(true);
}Diteruskan dengan mengisikan blok kode berikut untuk mengubah konfigurasi izin notifikasi pada actionPerformed notificationEnabler.
if(notificationEnabler.isSelected()){
displayNotification = 1;
}
else{
displayNotification = 0;
}Terakhir, jangan lupa set Look & Feel menjadi “Windows”
2. NotificationActivity
Pada NotificationActivity, ada banyak hal yang harus kita kerjakan. Pertama, kita harus membuat satu method untuk memposisikan Notification pada layar.
private void initLevel0(){
Dimension scrSize = Toolkit.getDefaultToolkit().getScreenSize();// size of the screen
Insets toolHeight = Toolkit.getDefaultToolkit().getScreenInsets(this.getGraphicsConfiguration());// height of the task bar
this.setLocation(scrSize.width - this.getWidth() - 20, scrSize.height - toolHeight.bottom - this.getHeight() - 20);
}Kita perhatikan dari baris pertama.
Dimension scrSize = Toolkit.getDefaultToolkit().getScreenSize();// size of the screenFungsi tersebut digunakan untuk mengukur dimensi layar komputer kita.
Insets toolHeight = Toolkit.getDefaultToolkit().getScreenInsets(this.getGraphicsConfiguration());// height of the task barSelanjutnya, fungsi di atas berfungsi untuk mengukur tinggi taskbar.
this.setLocation(scrSize.width - this.getWidth() - 20, scrSize.height - toolHeight.bottom - this.getHeight() - 20);Terakhir, adalah fungsi untuk meletakkan frame Notification. Dapat kita perhatikan, posisi X, dan Y saya kurangi sebesar 20 point supaya frame notifikasi tidak terlalu menempel dengan sisi kanan layar dan sisi atas taskbar.
Selanjutnya, kita buat method untuk menghandle timing notification sehingga dapat hilang (ter-dispose) dengan sendirinya.
private void initLevel1(){
new Thread(){
@Override
public void run() {
try {
Thread.sleep(4000); // time after which pop up will be disappeared.
dispose();
} catch (InterruptedException e) {
e.printStackTrace();
}
};
}.start();
}Dapat kita perhatikan dari method di atas, Saya membuat thread baru yang Saya fungsikan sebagai timer selama 4 detik untuk men-dispose notification.
Setelah kedua method selesai dibuat, pangill kedua method pada constructor NoticationActivity.
public NotificationActivity() {
initComponents();
initLevel0();
initLevel1();
}Selanjutnya, kita isikan blok kode berikut pada btnCloseMouseClicked.
dispose();Fungsinya adalah untuk mendispose notification ketika tombol (‘x’) diklik.
Terakhir, kita isikan blok kode berikut pada btnOpenNotificationActionPerformed.
new SecondActivity().setVisible(true);
dispose();Fungsi di atas berfungsi untuk memanggil SecondActivity dan mendispose notification
3. SecondActivity
Untuk SecondActivity tidak ada kode khusus yang dimasukkan.
Run!
Setelah semua selesai, dan dipastikan tidak ada error. Saatnya kita run untuk melihat hasilnya.
Dapat kita lihat dari video, ketika Enable Notifications tidak aktif, maka notifikasi tidak dapat ditampilkan. Namun sebaliknya, ketika Enable notifications aktif, maka notifikasi akan tampil. Ketika notifikasi tampil, kita dapat membiarkannya hingga notifikasi tersebut hilang sendiri, kita bisa mengklik tombol “Buka Notifikasi” yang akan menampilkan second Activity dan mendisposes Notifikasi, kita bahkan juga bisa mengklik tombol (‘x’) untuk menutup notifikasi.
Demikian artikel tutorial kali java ini. Semoga bermanfaat untuk kita semua. Anda dapat mengunduh project ini melalui link yang tersemat di bagian akhir artikel ini. Apabila Anda memiliki pertanyaan, jangan sungkan meninggalkannya di kolom komentar. Jika Anda ingin mencuplik artikel ini, jangan lupa juga sertakan URL nya.