Java Swing Tutorial: วิธีการสร้างแอปพลิเคชัน GUI ใน Java

สวิงคืออะไร Java?

สวิงเข้ามา Java เป็นชุดเครื่องมือ Graphical User Interface (GUI) ที่รวมเอาส่วนประกอบ GUI ไว้ด้วย Swing มอบชุดวิดเจ็ตและแพ็คเกจที่หลากหลายเพื่อสร้างส่วนประกอบ GUI ที่ซับซ้อนสำหรับ Java แอพพลิเคชัน Swing เป็นส่วนหนึ่งของ Java Foundation Classes(JFC) ซึ่งเป็น API สำหรับ Java การเขียนโปรแกรม GUI ที่ให้ GUI

เค้ก Java ห้องสมุดสวิงถูกสร้างขึ้นบน Java ชุดเครื่องมือวิดเจ็ตนามธรรม (AWT) ชุดเครื่องมือ GUI รุ่นเก่าที่ขึ้นกับแพลตฟอร์ม คุณสามารถใช้ Java ส่วนประกอบการเขียนโปรแกรม GUI ง่ายๆ เช่น ปุ่ม กล่องข้อความ ฯลฯ จากไลบรารี และไม่จำเป็นต้องสร้างส่วนประกอบเหล่านั้นขึ้นมาใหม่

ในการนี​​้ Java บทเรียนการสวิง คุณจะได้เรียนรู้ Java พื้นฐาน GUI เช่น-

Java แผนภาพลำดับชั้นของคลาสสวิง

Java ไดอะแกรมลำดับชั้นของคลาสสวิง
Java ไดอะแกรมลำดับชั้นของคลาสสวิง

ส่วนประกอบทั้งหมดใน Java Swing เป็น JComponent ที่สามารถเพิ่มเข้าในคลาสคอนเทนเนอร์ได้

คลาสคอนเทนเนอร์คืออะไร

คลาสคอนเทนเนอร์คือคลาสที่สามารถมีส่วนประกอบอื่นอยู่ได้ ดังนั้นสำหรับการสร้าง Java GUI ของ Swing เราต้องมีวัตถุคอนเทนเนอร์อย่างน้อยหนึ่งรายการ มี 3 ประเภท Java ภาชนะแกว่ง

  1. แผงหน้าปัด: มันเป็นภาชนะล้วนๆ และไม่ใช่หน้าต่างในตัวมันเอง วัตถุประสงค์เพียงอย่างเดียวของแผงควบคุมคือการจัดระเบียบส่วนประกอบต่าง ๆ บนหน้าต่าง
  2. กรอบ: เป็นหน้าต่างที่ใช้งานได้เต็มรูปแบบพร้อมชื่อและไอคอน
  3. โต้ตอบ:อาจคิดได้ว่าเป็นหน้าต่างป๊อปอัปที่เด้งออกมาเมื่อต้องแสดงข้อความ ไม่ใช่หน้าต่างที่ทำงานได้เต็มรูปแบบเหมือนกับ Frame

GUI คืออะไร Java?

GUI (ส่วนต่อประสานกราฟิกกับผู้ใช้) ใน Java เป็นตัวสร้างประสบการณ์ภาพที่ใช้งานง่ายสำหรับ Java แอปพลิเคชัน ประกอบด้วยส่วนประกอบกราฟิก เช่น ปุ่ม ป้าย หน้าต่าง ฯลฯ ซึ่งผู้ใช้สามารถโต้ตอบกับแอปพลิเคชันได้ GUI มีบทบาทสำคัญในการสร้างอินเทอร์เฟซที่ใช้งานง่ายสำหรับ Java การใช้งาน

วิธีสร้าง GUI ใน Java พร้อมตัวอย่าง

ตอนนี้อยู่ในนี้ Java GUI Tutorial เรามาทำความเข้าใจวิธีการสร้าง GUI กันดีกว่า Java พร้อมชิงช้าใน Java ตัวอย่าง.

ขั้นตอน 1) คัดลอกโค้ดลงในโปรแกรมแก้ไข
ในขั้นตอนแรกให้คัดลอกโค้ดต่อไปนี้ลงในตัวแก้ไข

import javax.swing.*;
class gui{
    public static void main(String args[]){
       JFrame frame = new JFrame("My First GUI");
       frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       frame.setSize(300,300);
       JButton button = new JButton("Press");
       frame.getContentPane().add(button); // Adds Button to content pane of frame
       frame.setVisible(true);
    }
}

ขั้นตอน 2) เรียกใช้รหัส
ขั้นตอนถัดไป บันทึก คอมไพล์ และรันโค้ด

ขั้นตอน 3) คัดลอกโค้ดต่อไปนี้ลงในโปรแกรมแก้ไข
ตอนนี้เรามาเพิ่มปุ่มลงในเฟรมของเรากัน คัดลอกโค้ดต่อไปนี้ลงในตัวแก้ไขจากที่กำหนด Java ตัวอย่าง UI

import javax.swing.*;
   class gui{
      public static void main(String args[]){
        JFrame frame = new JFrame("My First GUI");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300,300);
       JButton button1 = new JButton("Press");
       frame.getContentPane().add(button1);
       frame.setVisible(true);
     }
}

ขั้นตอน 4) ดำเนินการรหัส
ถัดไปดำเนินการโค้ด คุณจะได้รับปุ่มใหญ่


Java ตัวอย่าง GUI

ขั้นตอน 5) เพิ่มสองปุ่ม

จะเพิ่มปุ่มสองปุ่มได้อย่างไร? คัดลอกโค้ดต่อไปนี้ลงในโปรแกรมแก้ไข

import javax.swing.*;
class gui{
      public static void main(String args[]){
           JFrame frame = new JFrame("My First GUI");
           frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
           frame.setSize(300,300);
          JButton button1 = new JButton("Button 1");
          JButton button2 = new JButton("Button 2");
          frame.getContentPane().add(button1);
          frame.getContentPane().add(button2);
          frame.setVisible(true);
     }
}

ขั้นตอน 6) บันทึกและรันโปรแกรม
ถัดไป บันทึก คอมไพล์ และรันโปรแกรม

ขั้นตอน 7) ตรวจสอบเอาท์พุท
ผลลัพธ์ที่ไม่คาดคิด =? ปุ่มต่างๆ ซ้อนทับกัน

Java ผู้จัดการเค้าโครง

ตัวจัดการเค้าโครงใช้เพื่อจัดวาง (หรือจัดเรียง) GUI Java ส่วนประกอบภายในคอนเทนเนอร์ มีเครื่องมือจัดการเลย์เอาต์มากมาย แต่เครื่องมือที่ใช้บ่อยที่สุดคือ-

Java BorderLayout

A BorderLayout วางส่วนประกอบต่างๆ ได้ถึงห้าส่วน: บน, ล่าง, ซ้าย, ขวา และตรงกลาง เป็นตัวจัดการโครงร่างเริ่มต้นสำหรับ Java JFrame ทุกตัว

Java BorderLayout

Java BorderLayout

Java FlowLayout

FlowLayout เป็นตัวจัดการเค้าโครงเริ่มต้นสำหรับทุกคน JPanel- โดยจะวางส่วนประกอบต่างๆ ไว้ในแถวเดียวเรียงกัน

Java FlowLayout

Java FlowLayout

Java GridBagLayout

เป็นเลย์เอาต์ที่ซับซ้อนกว่าเลย์เอาต์อื่นๆ ทั้งหมด โดยจะจัดตำแหน่งส่วนประกอบต่างๆ โดยวางไว้ในตารางเซลล์ ทำให้ส่วนประกอบต่างๆ สามารถขยายได้มากกว่าหนึ่งเซลล์

Java GridBagLayout

Java GridBagLayout

ขั้นตอน 8) สร้างกรอบแชท
ลองสร้างกรอบแชทแบบด้านล่างนี้ดูไหม?


ตัวอย่างของการ Java GUI

ลองเขียนโค้ดตัวเองก่อนที่จะดูโปรแกรมด้านล่างนี้

//Usually you will require both swing and awt packages
// even if you are working with just swings.
import javax.swing.*;
import java.awt.*;
class gui {
    public static void main(String args[]) {

        //Creating the Frame
        JFrame frame = new JFrame("Chat Frame");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(400, 400);

        //Creating the MenuBar and adding components
        JMenuBar mb = new JMenuBar();
        JMenu m1 = new JMenu("FILE");
        JMenu m2 = new JMenu("Help");
        mb.add(m1);
        mb.add(m2);
        JMenuItem m11 = new JMenuItem("Open");
        JMenuItem m22 = new JMenuItem("Save as");
        m1.add(m11);
        m1.add(m22);

        //Creating the panel at bottom and adding components
        JPanel panel = new JPanel(); // the panel is not visible in output
        JLabel label = new JLabel("Enter Text");
        JTextField tf = new JTextField(10); // accepts upto 10 characters
        JButton send = new JButton("Send");
        JButton reset = new JButton("Reset");
        panel.add(label); // Components Added using Flow Layout
        panel.add(tf);
        panel.add(send);
        panel.add(reset);

        // Text Area at the Center
        JTextArea ta = new JTextArea();

        //Adding Components to the frame.
        frame.getContentPane().add(BorderLayout.SOUTH, panel);
        frame.getContentPane().add(BorderLayout.NORTH, mb);
        frame.getContentPane().add(BorderLayout.CENTER, ta);
        frame.setVisible(true);
    }
}