Background Image in JDesktopPane

Bingung bagaimana caranya menambahkan background image ke dalam JDesktopPane di NetBeans IDE ? Nah kalau bingung, sekarang buatlah sebuah project dahulu di NetBeans IDE kemudian buatlah 1 buah Java Class dengan nama JImageDesktopPane (nama class terserah keinginan masing-masing :) ) kemudian pastekan kode dibawah ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package jdesktoppanebackground;
 
import java.awt.Graphics;
import java.awt.Image;
import javax.swing.JDesktopPane;
 
/**
 *
 * @author Martinus Ady H <mrt.itnewbies@gmail.com>
 */
public class JImageDesktopPane extends JDesktopPane {
 
    private Image image;
 
    public JImageDesktopPane() {
    }
 
    @Override
    protected void paintComponent(Graphics g) {
        try {
            image = new javax.swing.ImageIcon(getClass().getResource("netbeans6ns0.png")).getImage();
 
            if (g != null) {
                g.drawImage(image,
                        (this.getSize().width - image.getWidth(null)) / 2,
                        (this.getSize().height - image.getHeight(null)) / 2,
                        null);
            }
        } catch (NullPointerException npe) {
            System.out.println("Can't find images !!");
        }
    }
}

Baris paling penting diatas terdapat pada baris ke 25, karena pada baris ke 25 kita mencoba mengambil gambar yang ingin kita jadikan sebagai Background Image dan sedangkan method paintComponent(Graphics g) pada baris 23-37 ini kita gunakan jika kita ingin mengubah-ubah tampilan dari JComponent di Java Swing :)

Nah jika sudah selesai, sekarang simpan gambar dibawah ini dengan nama netbeans6ns0.png pada direktori project
netbeans6ns0
Save Image As Gambar Ini


Jika sudah selesai, maka harusnya tampilan pada pallete Project akan nampak seperti dibawah ini :
PalleteProject
Tampilan Pallete Project Setelah Penambahan Image

Sekarang lakukan proses kompilasi dahulu terhadap file yang sudah dibuat, dan jika sudah sekarang tambahkanlah sebuah JFrame dan sebuah JMenuBar hingga tampilan-nya menjadi seperti dibawah ini :
JFrame_with_MenuBar
JFrame dengan JMenuBar

Setelah itu, sekarang mari kita tambahkan class JImageDesktopPane ke dalam JFrame dengan cara DRAG and DROP pada class JImageDesktopPane kedalam JFrame dan atur seperti gambar dibawah ini :
Drag_N_Drop
Lakukan Proses Drag and Drop Kedalam JFrame

Jika sudah, pada JMenuBar klik kanan Menu Edit kemudian tambahkan-lah JMenuItem kemudian beri Action seperti berikut :

79
80
81
82
83
84
85
86
87
88
89
90
    private void jMenuItem1ActionPerformed(java.awt.event.ActionEvent evt) {
        try {
            JInternalFrame iFrame = new JInternalFrame("Internal Frame");
            jImageDesktopPane1.add(iFrame);
            iFrame.setClosable(true);
            iFrame.setVisible(true);
            iFrame.setSelected(true);
            iFrame.setSize(200, 200);
        } catch (PropertyVetoException ex) {
            Logger.getLogger(MainForm.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

Sekarang coba lakukan proses Clean Build kemudian tekan tombol F6 untuk melihat hasilnya, dan jika tidak ada kesalahan maka kita akan melihat tampilan seperti dibawah ini :

JDesktopPane_With_Background
Tampilann Awal

JDesktopPaneAction_With_iFrame
Tampilan Ketika Menambahkan JInternalFrame

Mudah bukan :)

Link-link terkait :
- Java Swing Tutorial
- JDesktopPane API
- JComponent API
- Contoh Project JDesktopPane Background
- Source code Project JDesktopPane Background

  • Share/Bookmark
Print This Post

14 Responses to “Background Image in JDesktopPane”

  1. Black_Claw 16:58:

    WAH HEKER.

    Wah ada om Nicolas Saputra toh wkkwwkw :D aw wa aw awaw, asyik blog ane dikunjungi aktor AADC :P =))

    Om, bukannya HEKER itu yg biasanya naek2x gunung itu, trs camping disana ??? Ane loh ga pernah camping di gunung :P =)) kwkkw

    Masih di jkt om ?? :D

  2. Black_Claw says:

    Bukan, yang biasa naik gunung mah bandot.

    masih.

  3. Finz says:

    nambah lagi ilmunya nih..
    nanya nih mas,
    gimana caranya jTextField yg ada di jFrame terhubung dengan jTextField yg ada jInternalFrame?
    misalkan kita masukkan string yg ada di jTextField yg ada adi jFrame kemudian kita klik jButton maka string tersebut muncul di jInternalFrame

    terima kasih sebelumnya

  4. @Finz : Wah mas, klo menurut saya sih jangan menggabungkan penggunaan JFrame dan JInternalFrame secara bersama-2x :) Hm.. untuk solusinya mungkin bisa pakai JDialog untuk nampilin modal dialog. Nah cara paling gampang ya pakai Getter n Setter mas :)

  5. Nn says:

    waaaaaaa….
    thx banget ni buat mas Martinus Ady buat tutorial nya,,
    saya jadi sangat terbantuu >

  6. enggalicious says:

    itu ukuran gambarnya bisa molor2 sendiri (stretched) gag ??
    btw nice blog, ijin Ctrl+D :)

  7. @engga: Klo ukuran gambar diatas ga bisa *molor* itu fix koq ukuran-nya. Klo yg molor2x blm *ketemu* cara-nya yg pas, tapi hrsnya bisa sih, cuma ga jamin gmn nanti *hasil* image-nya klo emang resolusi image-nya kecil :D

    • riobernas says:

      permisi om martin :D
      @engga: mas lo mo yang bisa
      * default (full size)
      * stretch
      * center
      * tile
      boleh pake component di “tirtamaya-group.com/rio/archives/152″ (promosi dikit :D )
      semoga membantu :D

      good luck ya om om semua ;)

      • @Om Rio: wah langsung ajah di hyperlink om, ane tambahin aja sekalian :D Buat teman-teman yg mau donlod yg panel mode seperti yang om Rio jelasin. Tinggal klik ajah link ini JPanelImage BeanClass Panel Image :)

        • riobernas says:

          ho..ho..ho.. :D
          gimana buat hyperlinknya om :D

          ini mo sy upload code nya he..he..he..
          ntar tolong diperiksa ya om he.he.he.. sapa tau ada yang bisa di tambah2in ato ada yang bisa di perbaiki :D

          • Untuk kode-nya cemplungin ajah om di code.google.com ajah :) Ntar biar bisa dikeroyok rame-2x ama teman-teman yang lain :) Untuk ngebikin link-nya, haduuh.. saya ga bisa pastein kode-nya om :) ) wkakakaak… ntar klo saya tulis hasilnya sama juga ama yang diatas. Dah biar gampang, om tinggal liat aja deh source code-nya. Tinggal select tulisan yang ingin dilihat source code-nya, trs view selection source kalau pakai Firefox :)

            Silahkan dicoba om :)

Leave a Reply