Presentasi latihan pemrograman Java GUI menggunakan SWING
- 1. JAVA GUI BAYU RIMBA PRATAMA, ST, M.KOM
- 2. INTRO Java GUI memiliki 3 package: abstract windows kit (AWT), Swing toolkit dan JavaFX. Kita akan fokus pada Swing. Komponen dari package Swing, memiliki prefix J di depannya (misal JFrame, JWindows, dll).
- 3. WHY SWING? AWT components is heavy weighted thus the execution time of AWT is more than other. It has comparatively less functionality as compared to others. If using AWT, you have to implement a lot of things yourself. Swing is its mature and stable. Swing provides a rich set of components. With Swing, we can create complex and highly customizable interfaces using a variety of layout managers, containers, and components. JavaFX has a modern architecture and supports a wide range of UI components, animations, multimedia features, including hardware acceleration and 3D graphics. This makes it ideal for creating visually- rich and interactive applications.
- 4. JFRAME Every application we build extends the JFrame object, meaning our applications acquire all the characteristics of a frame The Frame is a container object. One feature of a container object is that if its visible property is set to false, all controls will become invisible Frame Properties title Frame windows title font Font name, style, size background Frame background color foreground Color of text or graphic width Width of frame height Height of frame resizable Indicating frame is fixed sized or not visible If false, hide frame (and all its controls)
- 5. JFRAME
- 6. MOVE JFRAME TO THE CENTER OF SCREEN Buat atribut baru dengan tipe class Dimension Hitung posisi X dan posisi Y Gunakan method setLocation()
- 7. LAYOUT MANAGER FlowLayout GridLayout BoxLayout BorderLayout (none)
- 8. EXAMPLE FLOW LAYOUT Tampilan program: Posisi component bersifat dinamis / menyesuaikan dengan ukuran Frame Apabila ukuran Frame diubah (resize), maka letak component akan menyesuaikan (ikut berubah)
- 9. EXAMPLE GRID LAYOUT Tampilan program: Apabila ukuran Frame diubah (resize) maka letak component akan relative tetap (tidak berubah), hanya ukuran nya saja yang bertambah. Grid Layout akan menyimpan widget/component pada cell masing-masing sesuai urutannya
- 10. EXAMPLE BOX LAYOUT Tampilan program: Box Layout dapat menyusun component secara vertical atau horizontal Dalam contoh ini, component disusun secara horizontal (X_AXIS, line code: 14)
- 11. EXAMPLE BORDER LAYOUT Tampilan program: Setiap component ditempatkan sesuai dengan arah mata angin
- 12. EXAMPLE NONE LAYOUT Tampilan program: Apabila layoutManager bernilai null maka setiap component perlu dipetakan ukuran dan posisi absolute-nya menggunakan method setBounds() Karena posisi component bersifat absolute, bila Frame diperbesar maka posisi component akan tetap
- 13. ACTIONLISTENER Bagaimana agar program dapat berinteraksi dengan user? gunakan interface ActionListener Buat project baru dengan nama: SimpleCalc
- 14. ACTIONLISTENER Tambahkan Class baru Beri nama class: SimpleCalculator Beri superclass JFrame dan interface ActionListener
- 15. ACTIONLISTENER Terdapat error pada Class tersebut. Ikuti hints dari netbeans dan pilih Implements all abstract methods Class tersebut akan meng-override method actionPerformed() Copy Paste source code SimpleCalculator.java dari sini: https://pastebin.com/qUE8kdAq
- 16. JAVA GUI DEVELOPMENT USING NETBEANS Buat Project Baru, misal : DemoGui2 Klik kanan pada main package, pilih New > JFrame Form…
- 17. JAVA GUI DEVELOPMENT USING NETBEANS Beri nama class name: LoginForm Klik tombol Finish
- 18. JAVA GUI DEVELOPMENT USING NETBEANS Tampilan design GUI editor
- 19. JAVA GUI DEVELOPMENT USING NETBEANS Klik sub tab Source (1), tambahkan setVisibile(true) pada constructor (2), delete main method (3).
- 20. JAVA GUI DEVELOPMENT USING NETBEANS Pada DemoGui2.java, ubah body main method menjadi seperti berikut, lalu run program.
- 21. JAVA GUI DEVELOPMENT USING NETBEANS Dengan menggunakan Palette, buat tampilan LoginForm seperti pada gambar di bawah ini.
- 22. JAVA GUI DEVELOPMENT USING NETBEANS Pada package yg sama, Buat JFrame Form dan beri nama class : MainForm
- 23. JAVA GUI DEVELOPMENT USING NETBEANS Pada MainForm.java, hapus main method. Lalu tambahkan atribut prevFrame dan setter method nya
- 24. JAVA GUI DEVELOPMENT USING NETBEANS Pada tampilan Design MainForm, tambahkan button Logout. Lalu double Click button tersebut. Anda akan diarahkan pada method yang akan dipanggil bila button tersebut di-klik. Tambahkan line of code seperti pada gambar di kanan
- 25. JAVA GUI DEVELOPMENT USING NETBEANS Pada source code class LoginForm, tambahkan attribute dengan tipe class MainForm seperti pada line of code pada gambar di bawah ini.
- 26. JAVA GUI DEVELOPMENT USING NETBEANS Pada tampilan Design LoginForm, double click button Login. Anda akan diarahkan pada method yang akan dipanggil bila button tersebut di-klik. Tambahkan line of code seperti pada gambar di kanan, lalu Run program
- 27. JAVA GUI DEVELOPMENT USING NETBEANS Ketika Anda klik Logout, username dan password yang sebelumnya sudah diinputkan masih tersimpan pada text field dan password field. Latihan e-Learning: Buat agar ketika user meng-klik Logout, username dan password yang sebelumnya sudah diinputkan menjadi hilang lagi! Buat agar ketika LoginForm selalu muncul pada tengah layar! Buat agar ketika MainForm muncul selalu dalam ukuran maximal screen! Atur minimal size nya di 600 x 600! Hapus tombol Logout pada MainForm. Tambahkan menu bar yang terdiri dari File dan Help. File memiliki sub menu Logout dan Exit. Help memiliki sub menu About. Sub Menu Logout untuk kembali ke LoginForm. Sub Menu Exit utk keluar. Keduanya disertai dengan konfirmasi. Sub Menu About menampilkan creator. Munculkan Nama dan NPM Anda. Cobalah untuk mengganti icon JFrame!
- 28. THANK YOU