Monday, 23 January 2017

Java Browse Image Dan Menampilkannya di JLabel Netbeans

Suatu aplikasi kadang kala memiliki sebuah button yang akan dipergukana user untuk mengambil file tertentu dari directory komputer mereka. Sebagai contoh form konfirmasi pembayaran.

Dalam aplikasi form pembayaran, selain mengisi data-data tertulis, user juga diminta mengirimkan bukti pembayarannya, tentunya dalam bentuk image kita akan mengirimnya.

Ada yang sering orang lupakan, sebelum mengirim, kita harus tau terlebih dahulu image yang diambil sudah benar apa belum, caranya ya melihat preview imagenya.

Singkatnya begini, setelah user berhasil memilih image, image tersebut akan terlihat di form konfirmasi, jelas?

Baca juga : Membuat kalkulator sederhana dengan Java Netbeans

Tutorial kali ini akan membahas tentang bagaimana cara menampilkan image yang diambil dari directory komputer menggunakan Java Netbeans, tepatnya akan menggunakan GUI (bukan koding manual)

Outputnya :

Browse Image

Tampilkan image


Disana terdapat beberapa komponen yang saya gunakan (komponen yang digunakan dalam GUI), antara lain :
  1. Button, untuk browse image
  2. Label, untuk menampilkan image
  3. Content Scroll Pane, untuk menscroll apabila lebar atau panjang image melebihi JFrame. Silakan Baca Disini Panduannya.
Beri nama pada masing-masing komponen dengan cara klik kanan pada komponen, pilih change variable name, kemudian isikan namanya.

Baca juga : Mencari Hasil Perpangkatan dan Akar menggunakan Java Netbeans

Untuk mengganti text pada komponen, klik kanan pada komponen, pilih Edit Text, lalu isikan text pada komponen yang sekiranya akan diganti textnya.


Konfigurasi JFrame



Konfigurasi JFrame disini maksudnya adalah apa-apa yang diperlukan JFrame, misalnya pada contoh program ini, saya ingin JFrame berada ditengah layar saat program dijalankan.

Caranya adalah tambahkan kode this.setLocationRelativeTo(this) tempat dibawah initComponents()

 

Kodingan Pada Button Browse



Kodingan utama hanya terdapat pada button browse saya, adapun langkah-langkah sehingga image bisa tampil antara lain :
  1. Browse image
  2. Pilih image dari directory
  3. Tampilkan image pada JLabel 

Browse Image

Browse image biasanya akan memunculkan popup dialog baru yang berisi directory komputer. Pada NetBeans ada sebuah fungsi yang bernama JFileChooser.

Baca juga : Cara Membuat Kotak Kosong Menggunakan Tanda * Di Java Netbeans

Cara penulisannya :

 JFileChooser chooser = new JFileChooser();  

Kode diatas adalah pendeklarasian JFileChooser. Nanti akan  digunakan untuk menampilkan dialog untuk memilih directory yang berisi image.

Membatasi Extensi File Yang Akan Dicari

Agar pencarian terfocus pada file yang ber extensi Image, seperti JPG, PNG, Bitmap, dll maka harus kita definisikan sendiri menggunakan fungsi FileNameExtensionFilter.

Cara penulisannya :

 FileNameExtensionFilter filter = new FileNameExtensionFilter(  
         "JPG, GIF, and PNG Images", "jpg", "gif", "png");  

Agar ketika dialog JFileChooser muncul, extensinya sudah terfilter, lakukan hal berikit :

 chooser.setFileFilter(filter);  

Kemudian barulah munculkan dialognya

 chooser.showOpenDialog(null);  

Ketika file image diselect/dipilih, agar program tau bahwa image sudah dipilih lakukan hal dibawah ini

 File file = chooser.getSelectedFile();  

Program harus tau kalau file yang diambil itu adalah image, caranya dengan menggunakan ImageIO

 Image image = ImageIO.read(file);  

Karna akan diset ke JLabel, sedangkan JLabel hanya bisa diset dengan model icon, maka dari itu kita rubah dari yang image bisa menjadi icon, tentunya menggunakan fungsi ImageIcon

 ImageIcon imageIcon = new ImageIcon(image.getScaledInstance(300, 500, 300));  

getScaledInstance adalah untuk mendefinisikan lebar, tinggi dan hint si JLabel, agar si image mengikuti lebar dan tinggi si JLabel.

300 adalah lebar JLabel. 500 adalah tinggi JLabel. 300 adalah Hint

Kemudian, setelah diset default lebar dan tinggi JLabel, selanjutnya kita set image ke JLabel, dengan cara dibawah ini :

 labelImage.setIcon(imageIcon);  
 labelImage.setText("");  

labelImage.setText("") maksudnya adalah untuk menset agar label tidak berisi tulisan apa-apa selain gambar. Coba perhatikan image diatas, saya menulis Gambar akan tampil disini. Nah tulisan itu yang mau saya hilangkan. Kode ini bisa ditulis, bisa tidak, tidak perpengaruh pada program.


Full Kode Pada Button Browse



Sebagai perbandingan, berikut saya tampilkan kode lengkap dari button browse image :

Sekian tutorial tentang bagaimana cara menampilkan image yang diambil dari directory menggunakan java netbeans. Semoga bermanfaat.

Silakan download project melalu link dibawah ini :


https://github.com/griajobag/BrowseImageJavaNetbeans

Please post a polite comment and do not post a spam
EmoticonEmoticon