Membuat JFrame dengan Background Gambar Keren


JFrame adalah salah satu container yang ada dalam swing. Apaan tuh container? Container adalah komponen yang dapat menampung komponen lain di atasnya. Dalam java training kemarin, saya memberikan analogi container itu seperti meja, kita bisa menyimpan beberapa benda di atas meja itu. Nah begitulah container, di atas jframe kita bisa menaruh JLabel, JTextField, JtextArea, JButton, bahkan JPanel (JPanel adalah termasuk container). Ya, kita bisa menaruh container di atas container. Anggap saja kita menaruh taplak di atas meja.

Masuk ke judul dari posting ini, Membuat Background JFrame dengan Gambar Keren. Proses ini saya jelaskan dengan analogi yang mudah antara taplak dan meja. Agar meja terlihat indah, kita dapat menutupinya dengan taplak yang memiliki perhiasan atau gambar yang indah.  Dengan analogi seperti ini, pasti anda tidak akan kesulitan bagaimana proes yang terjadi: Buat sebuah taplak, kemudian hias dengan hiasan yang terbaik, tambahkan gambar-gambar yang sedap di pandang mata, kemudian setelah taplak selesai di buat. Tutuplah meja dengan taplak yang barusan kita buat. Simple kan?

Mudah-mudahan analogi di atas membuat anda semakin mudah memahami apa yang akan dilakukan dalam proyek ini. Oke, berikutnya kita akan belajar, bagaimana mengimplementasikannya di Java (menggunakan IDE Netbeans 6.8):

Menghias Taplak

Taplak yang akan dibuat adalah berasal dari “bahan baku” JPanel. Hiasan yang akan dibuat adalah gambar abstrak yang indah, anda bisa mendownload gambarnya di sini.

  1. Buat project di Netbeans dengan nama Train (atau apa saja/terserah).
  2. Buat 2 package windu.train.images dan windu.train.ui (atau apa saja terserah)
  3. Copy kan file gambar yg akan dijadikan background ke package windu.train.images
  4. Clean and Build
  5. Buat Class baru (beri nama: PanelBackground.java) pada package windu.train.ui (klik kanan-new-Java Class…)
  6. Buat JFrameForm (beri nama: Home.java) pada package windu.train.ui (klik kanan-new-JFrameForm…)
  7. Sampai tahap ini, jendela project anda akan menjadi seperti ini:

    Hierarki Project

  8. Tambahkan kode pada PanelBackground.java, sehingga hasil akhir nya menjadi seperti ini:
    package windu.train.ui;
    
    import java.awt.Graphics;
    import java.awt.Graphics2D;
    import java.awt.Image;
    import javax.swing.ImageIcon;
    import javax.swing.JPanel;
    
    /**
     *
     * @author Windu Purnomo
     */
    public class PanelBackground extends JPanel{
        private Image image;
    
        public PanelBackground() {
            image = new ImageIcon(getClass().getResource("/windu/train/images/background2.jpg")).getImage();
        }
    
        @Override
        protected void paintComponent(Graphics grphcs) {
            super.paintComponent(grphcs);
    
            Graphics2D gd = (Graphics2D) grphcs.create();
            gd.drawImage(image, 0, 0, getWidth(), getHeight(), null);
            gd.dispose();
        }
    }
    
  9. Clean and Build
  10. Sampai tahap ini kita sudah berhasil membuat taplak yang indah.

Memasang Taplak di Atas Meja

Pada proses sebelumnya kita telah berhasil membuat taplak JPanel yang indah. Sabar dulu ya, anda belum bisa melihat taplaknya, tapi yakin deh taplaknya pasti indah (maksa). Dalam tahap berikut ini, kita akan memasang taplak tadi ke atas meja JFrame.

  1. Buka JFrame, Home.java
  2. Klik kanan – set layout – border layout
  3. Masukan PanelBackground.java ke atas Home.java yang sedang terbuka, dengan cara men-drag dari jendela project.
  4. Nah, anda sudah melihatnya sekarang.

Untuk melihatnya, coba tekan shift+F6. Selamat anda berhasil membuat JFrame dengan Background Gambar Keren.

Menambahkan Komponen Lain

Sekarang anda bisa menambahkan komponen lainnya di atas taplak yang anda buat. Anda bisa menambhkan JLabel, JTextField, JCombo, JRadio, atau lainnya, dengan cara klik komponen pada jendela Pallete (di sebelah kanan) kemudian klik lagi di atas JPanel. Selamat berkreasi.

About these ads

About windupurnomo

I'm interested in programming. I am active with several programming such as Java, C #, C, JavaScript, HTML. I'm also develop desktop application (Java Swing), Mobile Application (Android), and Web programming (ASP MVC).
This entry was posted in Java and tagged , , , , , , . Bookmark the permalink.

32 Responses to Membuat JFrame dengan Background Gambar Keren

  1. ozix says:

    terutama saya berterima kasih pada 4JJI yang telah memberiku semangat
    terima kasih mas ya…… ni yang kucari2…. mas selain membuat background dengan Jframe pa ja mas

  2. windupurnomo says:

    Alhamdulillah, jika posting saya ini bermanfaat buat ozik. Selamat membaca dan terus belajar. Dan setelah itu jangan lupa berbagi dengan yang lain :)

  3. ekozul says:

    Yang ini mmg banyak yg ditanya2 ,,, sgt bermanfaat,,
    btw badge/banner IPB segera di pasang ya,,, hehe
    dari http://ipb.ac.id/badge

  4. ,,klo yang di akses jar-nya apakah gambarnya tetep ikut?

  5. Iand John Maal says:

    mas,,,kok ku drag gk bsa ya???????np itu??????
    bsa jelaskn lebih detail lg gk???

    • windupurnomo says:

      @land: saya juga dulu pernah mengalami hal yang sama, ada beberapa cara yang bisa dicoba, silahkan pilih salah satu:
      1. Clean and build projectnya, terus coba drag lagi ke frame
      2. Copy atau tulis ulang PanelBackground.java nya -> clean and build -> drag ke frame
      3. Dalam constructor home, setelah initComponent(); tambahkan, this.add(new PanelBackground());

      Selamat mencoba :D ….

  6. Minez says:

    Mksh Om tutornya….
    lagi pusing2, 3 jam ngerja’n.
    nemu postingan ini cuma 10 menit bisa….

    Mksh banget.

  7. spy says:

    Alhamdulillah banget mas, thanks bwt info nya…tetep share y mas….

  8. astrii says:

    mas, tu kok lampunya nyala / error di yang kodingan:
    private Image image;

    Udah coba bbge cara, ttp ja gk mati2 lampunya -,-

  9. windupurnomo says:

    @astril: (1). Kamu jalaninnya pake netbeans kan? Coba arahkan mouse nya ke “lampu nyala”, terus lihat pesan errornya apa. Harusnya baik2 sj.(2). Coba pastikan lagi semua class yang dibutuhkan sudah diimport.

  10. astri says:

    iya, pake netbeans. Pesannya:
    “cannot find symbol
    Class: image …
    Location: ….”

    Mksudnya yg no (2) tu gmana, mas? Yg sy buat tu keknya udah sama persis dgn isi blog.. 2 package, satunya tuk .java satunya tuk image.jpg, dll
    Maap y, mas. Masih newbie di java. Hhehe

    • windupurnomo says:

      Gpp santai sj, semua orang pasti pernah jadi newbie. :)

      Klo pesan errornya kyk gitu, berarti memang karena class yang diperlukan(Image) blm diimport semua. Coba cek di bagian paling atas, apakah sudah seperti ini (terutama: import java.awt.Image):

      import java.awt.Graphics;
      import java.awt.Graphics2D;
      import java.awt.Image;
      import javax.swing.ImageIcon;
      import javax.swing.JPanel;

  11. day says:

    mas,mo nanya,,
    saya kan menggunakan JCreator,untuk menampilkan background image full screen y gmn yach,setBounds();ditambahin apa yach….
    mohon pencerahanya..

    Terima kasih

  12. yopi says:

    mas gimana caranya ngompail di cmd supaya programnya gag eror?

    • windupurnomo says:

      Klo programnya error, dicompile di mana saja bakalan error.
      Klo developnya pakai Netbeans, saya menyarankan compilenya jg di netbeans, biar lebih mudah. Tapi klo mw compile di CMD/Terminal, pakai ANT. Coba cari cara installnya, mudah kok.

  13. yopi Rahman says:

    mas lo pake netbean gmana cara ngompailnya di cmd??
    makasih.. :)

  14. sobri says:

    mkasi mas atas tutorialx,tpi maaf,koq tdak bsa di drag ya??? berikut pesan errornya:
    java.awt.dnd.InvalidDnDOperationException: Drag and drop in progress
    at sun.awt.dnd.SunDragSourceContextPeer.setDragDropInProgress(SunDragSourceContextPeer.java:298)
    at java.awt.dnd.DragSource.startDrag(DragSource.java:286)
    at java.awt.dnd.DragSource.startDrag(DragSource.java:403)
    at java.awt.dnd.DragGestureEvent.startDrag(DragGestureEvent.java:223)
    at org.openide.explorer.view.ExplorerDragSupport.dragGestureRecognized(ExplorerDragSupport.java:161)
    at org.openide.explorer.view.TreeViewDragSupport.dragGestureRecognized(TreeViewDragSupport.java:91)
    at java.awt.dnd.DragGestureRecognizer.fireDragGestureRecognized(DragGestureRecognizer.java:339)
    at sun.awt.windows.WMouseDragGestureRecognizer.mouseDragged(WMouseDragGestureRecognizer.java:202)
    at java.awt.AWTEventMulticaster.mouseDragged(AWTEventMulticaster.java:303)
    at java.awt.AWTEventMulticaster.mouseDragged(AWTEventMulticaster.java:302)
    at java.awt.AWTEventMulticaster.mouseDragged(AWTEventMulticaster.java:302)
    at java.awt.Component.processMouseMotionEvent(Component.java:6086)
    at javax.swing.JComponent.processMouseMotionEvent(JComponent.java:3278)
    at java.awt.Component.processEvent(Component.java:5807)
    at java.awt.Container.processEvent(Container.java:2058)
    at java.awt.Component.dispatchEventImpl(Component.java:4410)
    at java.awt.Container.dispatchEventImpl(Container.java:2116)
    at java.awt.Component.dispatchEvent(Component.java:4240)
    at java.awt.LightweightDispatcher.retargetMouseEvent(Container.java:4322)
    at java.awt.LightweightDispatcher.processMouseEvent(Container.java:4003)
    at java.awt.LightweightDispatcher.dispatchEvent(Container.java:3916)
    at java.awt.Container.dispatchEventImpl(Container.java:2102)
    at java.awt.Window.dispatchEventImpl(Window.java:2429)
    at java.awt.Component.dispatchEvent(Component.java:4240)
    [catch] at java.awt.EventQueue.dispatchEvent(EventQueue.java:599)
    at org.netbeans.core.TimableEventQueue.dispatchEvent(TimableEventQueue.java:104)
    at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:273)
    at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:183)
    at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:173)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:168)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:160)
    at java.awt.EventDispatchThread.run(EventDispatchThread.java:121)

    mohon bantuannya..

  15. Pingback: Membuat JFrame dengan Background Gambar Keren « SeNa KuRnIaWaN

  16. hany says:

    mas, stlah aq running kq msh gmbarx g mw tmpil ya. tu knp???
    mhon bntuanx

  17. hany says:

    trus wktu aq running kq errorx blg. “Not copying the libraries.
    To run this application from the command line without Ant, try:
    java -jar “D:\Java\tugas\dist\train.jar”
    jar:
    tu knp ya mas???

  18. numnum says:

    klo d jcreator gmn?

  19. mas,, saya udah ikutin caranya.. tapi kok gak nampil ya backgroundnya…
    awalnya saya udah bikin JLabel,JTable, sampe koneksi.. trus mau di tambahin background,, tapi kok malah berubah semua letak component2nya.. trus gak bisa muncul backgroundnya.. itu knp??
    mohon pencerahannya…

  20. vita says:

    kok gak bisa di drag??
    tulisannya “the component cannot be instantied. Please make sure it is a JavaBeans component
    mohon bantuannya ya..

  21. Ervan says:

    image = new ImageIcon(getClass().getResource(“/windu/train/images/background2.jpg”)).getImage();
    sesuaikan nama gambar seperti yang tertulis di source code. Source code diatas nama gambarnya adalah background2.jpg maka beri nama gambar yang di import dengan “background2.jpg”.

    Terimakasih mas, tutorialnya.

  22. fahri says:

    Masih belum bisa gan…..

  23. windi says:

    terima kasih banyak mas, sekali coba langsung sukses…
    sangat membantu sekali..

  24. matt says:

    maaf mas saya mau tanya …. gimana caranya meload data dari database ke JComboBOx ??
    maksih sebelumnya :)

  25. Oslo Adiputra says:

    maap ka saya pemula nih, di program kaka itu main nya yg mana ka, dgn home view nya kan dibuat terus kok gak ada di tampil kaka, hehehe bingung nih ka, makasih ka

  26. gak bisa di drag nih, kenapa ya?
    padahal gada keterangan apa2

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