Mencipta GUI Java dengan Komponen Swing

Artikel ini meneroka kit alat Swing Java. Perpustakaan untuk membina Antara Muka Pengguna Grafik (GUI) menggunakan komponen seperti JFrame, JDialog dan JApplet, yang berfungsi sebagai bekas peringkat teratas yang penting. Ia juga menunjukkan cara membuat borang hubungan mudah menggunakan komponen Swing.

---

Swing ialah perpustakaan Java yang digunakan untuk mencipta Antara Muka Pengguna Grafik (GUI) yang mudah. Ia ialah kit alat widget GUI yang menyediakan koleksi komponen untuk membina GUI. (Oracle Docs, n.d.a). Komponen swing ditulis sepenuhnya dalam bahasa pengaturcaraan Java. Terdapat tiga kelas kontena peringkat atas yang umumnya berguna: JFrame, JDialog dan JApplet (Oracle Docs, n.d. b).

Bekas peringkat atas:

JFrame ialah tetingkap peringkat atas dengan tajuk dan sempadan.

(Oracle Docs, n.d.b, Cara Membuat Bingkai (Windows Utama).

Tetingkap JDialog ialah sub-tetingkap bebas yang diperhatikan sementara selain daripada Tetingkap Aplikasi Swing utama.

(Oracle Docs, n.d.b, Cara Membuat Dialog)

“JApplet, applet Java ialah sejenis program Java khas yang boleh dimuat turun oleh penyemak imbas yang didayakan dengan teknologi Java daripada internet dan dijalankan. Applet biasanya dibenamkan di dalam halaman web dan dijalankan dalam konteks penyemak imbas. Applet mestilah subkelas applet. Kelas Applet. Kelas Applet menyediakan antara muka standard antara applet dan persekitaran penyemak imbas” (Oracle Docs, n.d.c).
Setiap program yang menggunakan komponen Swing termasuk sekurang-kurangnya satu bekas peringkat teratas. Bekas peringkat atas ini berfungsi sebagai punca hierarki pembendungan, yang merangkumi semua komponen Swing dalam bekas (Oracle Docs, n.d.b).

Lazimnya, aplikasi kendiri dengan GUI berasaskan Swing akan mempunyai sekurang-kurangnya satu hierarki pembendungan dengan JFrame sebagai akarnya. Sebagai contoh, jika aplikasi mempunyai tetingkap utama dan dua dialog, ia akan mempunyai tiga hierarki pembendungan, setiap satu dengan bekas peringkat teratasnya sendiri. Tetingkap utama akan mempunyai JFrame sebagai akarnya, manakala setiap dialog akan mempunyai JDialog sebagai akarnya. Applet berasaskan Swing juga mempunyai sekurang-kurangnya satu hierarki pembendungan, dengan satu berakar oleh objek JApplet. Sebagai contoh, applet yang memaparkan dialog akan mempunyai dua hierarki pembendungan. Komponen dalam tetingkap penyemak imbas tergolong dalam hierarki pembendungan yang diakar oleh objek JApplet, manakala dialog milik hierarki pembendungan yang diakarkan oleh objek JDialog.

Kelas Komponen J:

Kecuali bekas peringkat teratas, semua komponen Swing yang bermula dengan "J" diperoleh daripada kelas JComponent. Sebagai contoh, JPanel, JScrollPane, JButton dan JTable semuanya mewarisi daripada JComponent. Walau bagaimanapun, JFrame dan JDialog tidak, kerana ia adalah bekas peringkat teratas (Oracle Docs, n.d.b, The JComponent Class)

Perbezaan antara Bingkai dan Panel:

Bingkai:
JFrame ialah bekas peringkat teratas yang mewakili tetingkap dengan tajuk, sempadan dan butang.
Ia biasanya digunakan sebagai tetingkap utama aplikasi.
JFrame boleh mengandungi berbilang komponen, termasuk JPanel, JScrollPane, JButton, JTable dan lain-lain.

Panel:
JPanel ialah bekas generik yang digunakan untuk mengumpulkan set komponen bersama dalam tetingkap.
Ia tidak mempunyai hiasan tingkap seperti bar tajuk atau butang tutup.
JPanel selalunya digunakan untuk mengatur dan mengurus reka letak dalam JFrame.

Setiap program yang menggunakan komponen Swing termasuk sekurang-kurangnya satu bekas peringkat teratas. Bekas peringkat atas ini berfungsi sebagai punca hierarki pembendungan, yang merangkumi semua komponen Swing dalam bekas (Oracle Docs, n.d.b).

Lazimnya, aplikasi kendiri dengan GUI berasaskan Swing akan mempunyai sekurang-kurangnya satu hierarki pembendungan dengan JFrame sebagai akarnya. Sebagai contoh, jika aplikasi mempunyai tetingkap utama dan dua dialog, ia akan mempunyai tiga hierarki pembendungan, setiap satu dengan bekas peringkat teratasnya sendiri. Tetingkap utama akan mempunyai JFrame sebagai akarnya, manakala setiap dialog akan mempunyai JDialog sebagai akarnya.

Aplet berasaskan Swing juga mempunyai sekurang-kurangnya satu hierarki pembendungan, dengan satu apl berakar oleh objek JApplet. Sebagai contoh, applet yang memaparkan dialog akan mempunyai dua hierarki pembendungan. Komponen dalam tetingkap penyemak imbas tergolong dalam hierarki pembendungan yang diakar oleh objek JApplet, manakala dialog milik hierarki pembendungan yang diakarkan oleh objek JDialog.

Contoh di bawah termasuk JFrame dan JPanel, serta komponen tambahan seperti butang, medan teks dan label menggunakan GridBagLayout. Selain itu, ia juga memaparkan mesej menggunakan JDialog, komponen JOptionPane, dan komponen tetingkap Dialog. Ia ialah borang hubungan antara muka pengguna grafik (GUI) ringkas menggunakan komponen Swing.

//--- Abstract Window Toolkit (AWT)

// Provides layout manager for arranging components in five regions: 
// north, south, east, west, and center.
import java.awt.BorderLayout;
// Grid layout - Specifies constraints for components that are laid out using the GridBagLayout.
import java.awt.GridBagConstraints;
// Grid - layout manager that aligns components vertically and horizontally, 
// without requiring the components to be of the same size.
import java.awt.GridBagLayout;
// Gird padding - Specifies the space (padding) between components and their borders.
import java.awt.Insets;
// Button - Provides the capability to handle action events like button clicks.
import java.awt.event.ActionEvent;
// Button event - Allows handling of action events, such as button clicks.
import java.awt.event.ActionListener;

//--- swing GUI

// Button - Provides a button component that can trigger actions when clicked.
import javax.swing.JButton;
// Frame - Provides a window with decorations 
// such as a title, border, and buttons for closing and minimizing.
import javax.swing.JFrame;
// Labels - Provides a display area for a short text string or an image, or both.
import javax.swing.JLabel;
// Submition Message - Provides standard dialog boxes such as message, input, and confirmation dialogs.
import javax.swing.JOptionPane;
// Panel - Provides a generic container for grouping components together.
import javax.swing.JPanel;
// Scroll user message - Provides to the a scrollable view of a lightweight component.
import javax.swing.JScrollPane;
// User message - Provides a multi-line area to display/edit plain text.
import javax.swing.JTextArea;
// Name & Email - Provides a single-line text field for user input.
import javax.swing.JTextField;

/**
 * This class generates a simple contact form. The form includes fields for the
 * user's name, email, and message, and a submit button to submit the form.
 * 
 * @author Alejandro Ricciardi
 * @version 1.0
 * @date 06/16/2024
 */
public class contactForm {
    /**
     * The main method to create and display the contact form.
     *
     * @param args Command line arguments
     */
    public static void main(String[] args) {

        /*------------
         |   Frame   |
         ------------*/

        // ---- Initializes frame
        // Creates the main application frame
        JFrame frame = new JFrame("Contact Form");
        frame.setSize(400, 300); // Set the size of the frame
                // Close the application when the frame is closed
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
        frame.setLayout(new BorderLayout()); // Use BorderLayout for the frame

        /*------------
         |   Panel   |
         ------------*/

        // ---- Initializes panel
        // Create a panel with GridBagLayout
        JPanel panel = new JPanel(new GridBagLayout());
        GridBagConstraints gridForm = new GridBagConstraints();
        gridForm.insets = new Insets(5, 5, 5, 5); // Add padding around components

        // ---- Creates and adds grid components to the panel       // -- Name
        // Adds "Name" label
        JLabel nameLabel = new JLabel("Name:");
        gridForm.gridx = 0; // Position at column 0
        gridForm.gridy = 0; // Position at row 0
        panel.add(nameLabel, gridForm);
        // Add text field for name input
        JTextField nameField = new JTextField(20);
        gridForm.gridx = 1; // Position at column 1
        gridForm.gridy = 0; // Position at row 0
        panel.add(nameField, gridForm);

        // -- Email
        // Add "Email" label
        JLabel emailLabel = new JLabel("Email:");
        gridForm.gridx = 0; // Position at column 0
        gridForm.gridy = 1; // Position at row 1
        panel.add(emailLabel, gridForm);
        // Adds text field for email input
        JTextField emailField = new JTextField(20);
        gridForm.gridx = 1; // Position at column 1
        gridForm.gridy = 1; // Position at row 1
        panel.add(emailField, gridForm);

        // Adds "Message" label
        JLabel messageLabel = new JLabel("Message:");
        gridForm.gridx = 0; // Position at column 0
        gridForm.gridy = 2; // Position at row 2
        panel.add(messageLabel, gridForm);

        // -- Message
        // Adds text area for message input with a scroll pane
        JTextArea messageArea = new JTextArea(5, 20);
        JScrollPane scrollPane = new JScrollPane(messageArea);
        gridForm.gridx = 1; // Position at column 1
        gridForm.gridy = 2; // Position at row 2
        panel.add(scrollPane, gridForm);
        // Adds "Submit" button
        JButton submitButton = new JButton("Submit");
        gridForm.gridx = 1; // Position at column 1
        gridForm.gridy = 3; // Position at row 3
        panel.add(submitButton, gridForm);

        // Adds the panel to the frame's center
        frame.add(panel, BorderLayout.CENTER);

        // Make the frame visible
        frame.setVisible(true);

        /*------------
         |  JDialog  |
         ------------*/
        // Add action listener to the submit button
        ActionListener submitBtnClicked = new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                // Display a message dialog when the submit button is clicked
                JOptionPane.showMessageDialog(frame, "Message was sent!");
            }
        };

        submitButton.addActionListener(submitBtnClicked);
    }
}

Jika anda berminat untuk mengetahui lebih lanjut tentang tetingkap dialog, video berikut menerangkan cara melaksanakan mesej JDialog JOptionPane.

Untuk meringkaskan, kit alat Java's Swing menawarkan satu set komponen yang membolehkan pembangun mencipta GUI berstruktur visual yang mesra pengguna. Pustaka menggunakan bekas peringkat teratas seperti JFrame, JDialog dan JApplet, bersama elemen penting seperti JPanel dan JOptionPane.

---

Rujukan:

Dokumen Oracle. (n.d.a). Hayun. Oracle. https://docs.oracle.com/javase/8/docs/technotes/guides/swing/

Dokumen Oracle. (n.d.b). Menggunakan Bekas Peringkat Atas. Tutorial Java™. Oracle. https://docs.oracle.com/javase/tutorial/uiswing/components/toplevel.html

Dokumen Oracle. (n.d.c). Applet Java. Tutorial Java™. Oracle. https://docs.oracle.com/javase/tutorial/deployment/applet/index.html

---

Diterbitkan pada asalnya oleh Alex.omegapy di Medium pada 3 November 2024.

Atas ialah kandungan terperinci Mencipta GUI Java dengan Komponen Swing. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!