Pertemuan 10 GUI (Graphical User Interface)

Presentasi berjudul: "Pertemuan 10 GUI (Graphical User Interface)"— Transcript presentasi:

1 Pertemuan 10 GUI (Graphical User Interface)
Pemprograman Berorientasi Objek Khairul Anwar Hafizd

2 Introduction to GUI Interface berfungsi sebagai sarana bantu agar user dapat berinteraksi dengan program User dapat berinteraksi dengan program aplikasi modern yang menggunakan komponen grafis seperti window, button, textbox, dan menu. Sulit untuk menulis sebuah aplikasi GUI dari awal. Sebagian besar telah dilakukan dalam satu set kelas yang disebut Swing. GUI (Graphic User Interface ) Interface yang digunakan dalam bentuk grafik

3 Swing dan AWT GUI terdiri dari graphical components, seperti: Windows
Buttons Menus Text fields Komponen Swing didasarkan pada kelas-kelas fundamental dari Application Windowing Toolkit (AWT). AWT juga terdiri dari beberapa komponen lama yang sudah tidak digunakan

4 Events Aplikasi GUI menunjukkan kepada user antarmuka grafis yang mengandung beberapa komponen grafis. User mengontrol aplikasi dengan berinteraksi melalui komponen grafis, seperti: Mengklik pada tombol untuk memilih program opsi. Membuat pilihan dari menu. Memasukkan teks dalam kolom teks. Menyeret scroll bar. Tindakan seperti mengklik sebuah tombol disebut sebagai Event.

5 Event-driven Programming
Ketika memberikan action pada komponen GUI, maka kita telah membuat event. Pada event-driven programming, program akan merespon event tersebut. Urutan kejadian ditentukan oleh user, bukan program. Pada console programming, user akan merespon apa yang terdapat pada prompt. Urutan kejadian ditentukan oleh program.

6 Responding to Events User berinteraksi dengan aplikasi GUI dan menyebabkan Event. Aplikasi merespond berdasarkan urutan permintaan yang datang. Setiap kali pengguna berinteraksi dengan komponen, event dikirim ke aplikasi. Berbagai aktivitas dikirim ke berbagai bagian aplikasi.

7 Three Parts of a GUI Program
Program GUI memiliki tiga bagian: Graphical Components : membentuk antar muka pengguna dalam bentuk grafis (object Swing). Listener methods : menerima event dan meresponnya. Application methods : melakukan pekerjaan (komputasi) yang berguna bagi user. Menerima data dari GUI, mengirim data hasil olahan ke GUI yang akan ditampilkan, dan biasanya tidak lepas dari user interface

8 Real-world Interfaces
Radio Graphical Components ? Listener Methods ? Application Methods ?

9 Container Classes Program GUI terdiri dari kumpulan komponen grafis yang semuanya ditempatkan di dalam satu atau lebih window. Komponen-komponen GUI berada di dalam window. Container adalah obyek yang dapat berisi komponen GUI lainnya. Pada terminologi JAVA, window adalah sebuah container. Button, slider, icon dan komponen GUI lainnya selalu dimasukkan ke dalam Container.

10 Frames Pada Java, Frame merupakan window yang memiliki border, beberapa button perintah yang ada di bagian atas, dan fitur lain Window yang biasanya kalian ketahui, di java dikenal dengan Frame

11 Beberapa komponen utama dalam GUI adalah:
Containers: merupakan wadah yang berfungsi untuk menempatkan komponen-komponen lain di dalamnya. Canvas: merupakan komponen GUI yang berfungsi untuk menampilkan gambar atau untuk membuat program grafis. Dengan canvas, kita bisa menggambar berbagai bentuk seperti lingkaran, segitiga, dll. User Interface (UI) components: contohnya adalah buttons, list, simple popup menus, check boxes, text fields, dan elemen lain. Komponen pembentuk window: seperti frames, menu bars, windows, dan dialog boxes.

12 Komponen Dasar User Interface dengan Swing
Berikut adalah beberapa komponen dasar antarmuka pengguna (user interface) yang disediakan oleh Swing: Top level containers: adalah container dasar untuk meletakkan komponen-komponen lain. Contohnya adalah JFrame, JDialog, dll. Intermediate level containers: merupakan container perantara. Umumnya digunakan hanya untuk meletakkan atau mengelompokkan komponen-komponen yang digunakan, baik itu container atau berupa atomic component. Contoh dari Intermediate level container adalah JPanel (panel). Atomic component: merupakan komponen yang memiliki fungsi khusus. Umumnya pengguna langsusng berinteraksi dengan komponen ini. Contohnya adalah JButton (tombol), JLabel (label), JTextField, JTextArea (area untuk menulis teks),

13 Istilah Penting pada GUI
Container Komponen GUI Event Dialog Layout Menu

14 Istilah Penting pada GUI
Container Wadah untuk meletakkan komponen- komponen GUI. Komponen GUI Button, text edit, radio button , dll Menu Bar Frame Content pane

15 Komponen GUI Komponen GUI mewarisi kelas JComponent, antara lain:
Tombol: JButton, JCheckBox, JRadioButton, JMenuItem Combo box: JCombobox List: JList Menu: JMenu, J MenuItem Label: JLabel Text Field:JTextField Tabel : JTabel

16 Komponen GUI Event : Sinyal yang dibangkitkan untuk merespon aksi dari user. Contoh: aksi dari klik mouse/ keyboard Aksi tsb akan ditangani oleh Event Handler Dialog Sebuah Window kecil untuk menampilkan info sederhana pad user

17 Komponen GUI Layout Sebuah window utama dapat terdiri dari beberapa komponen yang dapat disesuaikan dengan layout Menu Adalah sekumpulan perintah yang dapat dipilih user untuk menjalankan perintah tertentu. Menu dibuat untuk memudahkan user mengetahui fasilitas yang tersedia pada suatu program.

18 Frame

19 Dialog

20 Border Layout BorderLayout merupakan default manager untuk ContentPane.

21 Flow Layout FlowLayout adalah layout yang menyusun komponen dari kiri ke kanan, selanjutnya ke baris berikutnya. Jika ukuran windows diperbesar ukuran komponen pada FlowLayout tidak berubah.

22 Box Layout Layout jenis ini meletakkan komponen-komponen dalam satu baris atau satu kolom saja.

23 Card Layout Card Layout menampilkan container-container/panel-panel seperti tumpukan kartu. Hanya satu container yang akan tampil untuk satu waktu.

24 Grid layout Grid layout merupakan layout manager berbentuk grid. Semua komponen dalam layout ini memiliki ukuran yang sama.

25 Grid bag layout adalah pengaturan layout yang dapat digunakan untuk meletakkan komponen secara bebas. Setiap komponen dapat menempati ukuran yang berbeda dengan komnponen lainnya.

26 Spring Layout Ini adalah pengaturan tata letak yang sangat fleksibel, dan dapat meniru fitur-fitur layout manager yang lain. Pada layout ini, ukuran komponen dapat berubah-ubah secara ototmatis jika ukuran window diubah.

27