1 / 49

Pengantar GUI: Frames, Simple Components, dan Layouts

Pengantar GUI: Frames, Simple Components, dan Layouts. minggu 12. Objectives (Sasaran). Untuk mengenal komponen GUI sederhana Untuk menjelaskan hierarki Java GUI API Untuk membuat tampilan bagi user menggunakan frames, panels, dan komponen GUI sederhana

alize
Download Presentation

Pengantar GUI: Frames, Simple Components, dan Layouts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pengantar GUI:Frames, Simple Components, dan Layouts • minggu 12

  2. Objectives (Sasaran) • Untuk mengenal komponen GUI sederhana • Untuk menjelaskan hierarki Java GUI API • Untuk membuat tampilan bagi user menggunakan frames, panels, dan komponen GUI sederhana • Untuk memahami aturan penggunaan layout managers • Untuk menggunakan FlowLayout, GridLayout, dan BorderLayout managers dalam mengatur layout components di dalam container • Untuk mengatur warna (colors) dan tampilan (font) menggunakan class Color dan Font • Untuk menggunakan JPanel di subcontainers 2

  3. Elemen-Elemen Program GUI Programming • Components • Object visual yang muncul ke screen • Layouts • Mengatur posisi components di dalam container • Events • Merespon aksi yang dilakukan user • Graphics • Lines, shapes, colors, fonts, etc. Semuanya terenkapsulasi di Java Classes dan Packages

  4. Components • Dua kategori dari Java Component classes: • AWT – Abstract Windows Toolkit (java.awt package) • Versi awal dari komponen GUI • Bergantung pada “peer architecture”… tampilan dilakukan oleh platform OS dimana aplikasi / aplet dijalankan • Bersifat “heavy-weight” • Swing (javax.swing package) • Versi yang lebih baru • Bukan “peer architecture”…components menampilkan secara independen, tidak tergantug OS • Bersifat “lightweight” The textbook focuses primarily on Swing classes

  5. Swing vs. AWT • So why do the GUI component classes have a prefix J? Instead of JButton, why not name it simply Button? In fact, there is a class already named Button in the java.awt package. • When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT). For every platform on which Java runs, the AWT components are automatically mapped to the platform-specific components through their respective agents, known as peers. AWT is fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects. Besides, AWT is prone to platform-specific bugs because its peer-based approach relies heavily on the underlying platform. With the release of Java 2, the AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing components. Swing components are painted directly on canvases using Java code, except for components that are subclasses of java.awt.Window or java.awt.Panel, which must be drawn using native GUI on a specific platform. Swing components are less dependent on the target platform and use less of the native GUI resource. For this reason, Swing components that don’t rely on native GUI are referred to as lightweight components, and AWT components are referred to as heavyweight components.

  6. GUI Class Hierarchy (AWT)

  7. GUI Class Hierarchy (Swing)

  8. Container Classes Container classes can contain other GUI components.

  9. GUI Helper Classes The helper classes are not subclasses of Component. They are used to describe the properties of GUI components such as graphics context, colors, fonts, and dimension.

  10. Swing GUI Components

  11. Membuat GUI Objects Radio Button Label Text field Check Box • // Membuat button (tombol) dengan teks OK • JButton jbtOK = new JButton("OK"); • // Membuat label dengan teks "Enter your name: " • JLabel jlblName = new JLabel("Enter your name: "); • // Membuat text field dengan teks "Type Name Here" • JTextField jtfName = new JTextField("Type Name Here"); • // Membuat check box dengan teks bold • JCheckBox jchkBold = new JCheckBox("Bold"); • // Membuat radio button dengan teks red • JRadioButton jrbRed = new JRadioButton("Red"); • // Membuat combo box dengan pilihan red, green, and blue • JComboBox jcboColor = new JComboBox(new String[]{"Red", • "Green", "Blue"}); Button Combo Box

  12. Frames • Frame adalah window yang independen dan merupakan window terluar. • Frame menjadi dasar untuk meletakkan komponen lain di aplikasi GUI • Class Frame bisa digunakan untuk membuat windows

  13. Penggunaan setiap jenis class Swing memerlukan import package javax.swing Instansiasi object swing bertipe Frame Memanggil method-method di JFrame untuk mengatur tampilan dan tingkah laku JFrame Membuat Frame Listing 12.1 p404

  14. Membuat Frame Listing 12.1 p404 Mengatur lebar dan tinggi frame dalam ukuran pixels

  15. Membuat Frame Listing 12.1 p404 Mengatur frame agar terletak di tengah screen ketika ditampilkan

  16. Membuat Frame Listing 12.1 p404 Ketika user menutup window, aplikasi akan dihentikan

  17. Membuat Frame Listing 12.1 p404 Baris ini digunakan untuk menampilkan frame di screen

  18. Ini adalah bagaimana frame akan terlihat. Perhatikan title bar, content area, minimize, maximize/restore, dan close icons. Caption di title bar ditentukan oleh argumen di constructor

  19. Frames dengan Components • Frame adalah container. Oleh karena itu frame dapat memiliki components (seperti buttons, text fields, etc.) • Components ditambahkan ke content pane dari frame • Content pane adalah area berwarna abu-abu di window Frame • Cara sederhana untuk menggabarkan konsep container adalah: • JFrame memiliki: • Menu bar • Content pane

  20. Gambaran konsep Frame Containment From: http://java.sun.com/docs/books/tutorial/uiswing/components/toplevel.html Actually, there’s more to it than this, but this picture will suffice for now.

  21. Menambahkan Komponen ke Frame // Menambahkan button ke frame frame.getContentPane().add( new JButton("OK")); Title bar Content pane 14

  22. Delegasi Content Pane di JDK 1.5 // Menambahkan button ke frame frame.getContentPane().add( new JButton("OK")); Title bar // Menambahkan button ke frame frame.add( new JButton("OK")); Content pane

  23. Menambahkan Komponen ke Frame (Kode Program)

  24. Class JFrame

  25. Layout Managers • Mengatur peletakan components di container. • Ini merupakan alternatif untuk mengatur letak componen secara hardcoding dengan presisi pixel. • Keuntungan: resizing container (frame) tidak akan mengganggu tampilan components • Layout managers yang sering digunakan: • FlowLayout, GridLayout, BorderLayout, CardLayout, dan GridBagLayout

  26. Hierarki Layout Manager LayoutManager adalah interface. Semua class layout implement interface ini

  27. FlowLayout • Meletakkan components secara berurutan dari kiri ke kanan berdasarkan urutan penambahan components bersangkutan • Components secara otomatis akan menempati baris baru bila lebar container tidak mencyukupi untuk menampung semua components dalam satu baris • Secara default digunakan oleh applets dan panels, tapi tidak oleh frames • Pilihan: • left, center (ini adalah default), or right • Typical syntax: dalam constructor class Frame • setLayout(new FlowLayout(FlowLayout.LEFT)) ATAU • setLayout(new FlowLayout(FlowLayout.LEFT,hgap,vgap))

  28. Class Frame yang menggunakan FlowLayout layout manager

  29. Class Frame yang menggunakan FlowLayout layout manager Note: membuat subclass dari JFrame

  30. Class Frame yang menggunakan FlowLayout layout manager Note: adalah umum untuk membuat Frame dengan menyertakan main method.

  31. Class Frame yang menggunakan FlowLayout layout manager Swing components berada di java.swing package Layout managers berada di java.awt package 1 2 • Constructor akan melakukan hal berikut ini: • Mengatur layout manager untuk content pane di frame • Menambahkan components pada content pane di frame • Dalam kasus ini, layout yang digunakan adalah Flow, dan terdapat 6 komponen Swing yang ditambahkan

  32. Resizing frame menyebabkan components pindah ke baris bawahnya.

  33. GridLayout • Mengatur komponen dalam susunan baris dan kolom • Konstruktornya:: • setLayout • (new GridLayout(rows,columns)) • ATAU • setLayout(new GridLayout(rows,columns,hgap,vgap)) • Components akan ditambahkan secara terurut dari kiri ke kanan, baris per baris • Ukuran components semuanya sama • Jika container di-resized, components juga berubah ukuran, dan tetap di posisi yang sama

  34. Setting layout manager Menambahkan components Class Frame yang menggunakan GridLayout layout manager

  35. Resizing frame menyebabkan components berubah pula ukurannya, namun grid pattern-nya tetap

  36. BorderLayout • Mengatur components ke lima area: North, South, East, West, dan Center • Konstruktor: • setLayout(new BorderLayout()) • ATAU • setLayout(new BorderLayout(hgap,vgap)) • untuk setiap komponen: • add (the_component, region) • setting area yang diinginkan: • BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.NORTH, atau BorderLayout.CENTER • Tingkah laku: jika container di-resize, ukuran components juga berubah, namun orientasi letaknya tetap. • NOTE: maksimum hanya ada lima components yang bisa ditambah dan ditampilkan, masing-masing area satu component.

  37. Setting layout manager Menambahkan components ke area yang diinginkan Class Frame yang menggunakan BorderLayout layout manager

  38. Resizing frame menyebabkan ukuran komponen berubah, namun tetap di area yang sama NOTE: area CENTER lebih luas dari area lainnya

  39. Menggunakan Panels sebagai “Sub-Containers” • JPanel adalah component yang dapat berisi components lainnya. • Sebagai containers, JPanels dapat memiliki layout managers-nya sendiri. • Dengan ini, kita dapat menggabungkan layout dalam frame yang sama dengan menambahkan panel ke frame dan dengan menambahkan components ke panel. • Sehingga, seperti JFrames, kita dapat menggunakan method berikut bersama JPanels: • add() – menambah components ke panel • setLayout() – untuk mengasosiasikan layout manager pada panel

  40. Contoh ini menggunakan panels untuk mengorganisasi components. Program membuat tampilan user untuk oven microwave.

  41. Class Frame yang mengandung panels untuk mengorganisasi components

  42. Class Frame yang mengandung panels untuk mengorganisasi components Membuat panel dan mengatur layout-nya

  43. Class Frame yang mengandung panels untuk mengorganisasi components Menambahkan components ke panel

  44. Class Frame yang mengandung panels untuk mengorganisasi components Membuat panel lain dan mengatur layout-nya…perhatikan bahwa pengaturan layout pada panel dapat dilakukan melalu constructor

  45. Class Frame yang mengandung panels untuk mengorganisasi components Menambahkan components ke panel kedua NOTE: panel p1 berada di dalam panel p2!

  46. Class Frame yang mengandung panels untuk mengorganisasi components Menambahkan panel dan button ke content pane milik frame. Note: layout manager standard milik JFrame adalah Border, sehingga jika tidak secara eksplisit memanggil method setLayout(), maka frame ini ber-layout Border

  47. Panel p2 di area EAST Button di area CENTER Frame memiliki BorderLayout manager

  48. Text field di area NORTH Panel p1 di area CENTER Panel p2 memiliki BorderLayout manager

  49. Panel p1 memiliki GridLayout manager, empat baris dan tiga kolom

More Related