Java Swing

Java Swing là một phần của Java Foundation Classes (JFC) được sử dụng để tạo ứng dụng trên máy tính để bàn với các tính năng giao diện người dùng đồ họa. Nó được xây dựng dựa trên Abstract Windowing Toolkit (AWT) API, là toolkit đầu tiên dành cho cửa sổ và đồ họa được tạo ra cho Java. Theo thời gian, một hình thức phức tạp hơn của toolkit được phát triển và gọi là Swing.

Swing đã được bao gồm trong Java SE từ phiên bản 1.2. Nó được viết hoàn toàn bằng Java. Nó độc lập với nền tảng, nhẹ và tuân theo kiến trúc MVC (Model-View-Controller). Gói javax.swing cung cấp các lớp cho API Swing như JButton, JTextField, JTextArea, JRadioButton, JCheckbox, Menu, JColorChooser, và nhiều lớp khác.

Các Đặc Điểm Chính
Một số đặc điểm quan trọng của Swing bao gồm:

Nhẹ (Lightweight)

Các thành phần Swing độc lập với API của hệ điều hành và các điều khiển của nó chủ yếu được tạo ra bằng mã Java thuần túy.

Đa dạng về trình điều khiển (Rich Controls)

Nó cung cấp một bộ đa dạng các điều khiển tiên tiến như Tree, TabbedPane, Slider, ColorPicker và các điều khiển bảng.

Dễ tùy chỉnh (Highly Customizable)

Các điều khiển của nó có thể được tùy chỉnh dễ dàng, vì giao diện trực quan độc lập với biểu diễn bên trong.

Giao diện người dùng có thể thay đổi (Pluggable Look-and-Feel)

Giao diện ứng dụng của nó có thể thay đổi tại thời gian chạy, dựa trên giá trị thể hiện có sẵn.

Các trình điều khiển Swing

Các điều khiển Swing có thể được phân loại như sau:

Các Yếu Tố Giao Diện Người Dùng (UI Elements)

Đây là các thành phần giao diện trực quan cơ bản mà người dùng tương tác và trải qua trải nghiệm. AWT cung cấp các phần tử được sử dụng rộng rãi và phổ biến, từ cơ bản đến phức tạp.

Bố Cục (Layouts)

Chúng quản lý cách các yếu tố giao diện người dùng nên được tổ chức trên màn hình và cung cấp một giao diện trực quan yêu cầu.

Hành Vi (Behavior)

Chúng phụ thuộc vào các sự kiện xảy ra khi người dùng tương tác với các yếu tố giao diện người dùng.

Hệ thống phân cấp của các lớp Swing

Here’s the improved text with grammar and syntax corrections, along with the translation into Vietnamese:

Mỗi điều khiển Swing kế thừa các thuộc tính từ các lớp thành phần tương ứng của chúng, như được thể hiện như sau:

Component – Đây là một lớp cơ sở trừu tượng cho các điều khiển giao diện người dùng không phải là menu của Swing. Nó cũng có thể đại diện cho một đối tượng với biểu đồ biểu diễn.

Container – Đây là thành phần có khả năng chứa các thành phần Swing khác.

Component (JComponent) – Đây là lớp cơ sở cho tất cả các thành phần giao diện người dùng Swing. Để sử dụng một thành phần Swing mà kế thừa từ JComponent, nó phải là một phần của cấu trúc thụ động và gốc của nó phải là một container Swing cấp cao.

Swing UI Elements

Mô tả tạo ứng dụng Java Swing băng NetBean:

Jlabel

JLabel có thể hiển thị văn bản, hình ảnh hoặc cả hai. Nội dung của nhãn có thể được căn chỉnh bằng cách thiết lập căn chỉnh theo chiều dọc và chiều ngang trong khu vực hiển thị của nó. Mặc định, các nhãn được căn chỉnh theo chiều dọc ở giữa trong khu vực hiển thị của họ. Nhãn chỉ chứa văn bản được căn chỉnh ở phía trước, trong khi nhãn chỉ chứa hình ảnh được căn chỉnh ở giữa theo chiều ngang. Đoạn mã dưới mô tả ví dụ về JLabel với tùy chọn căn chỉnh và màu sắc cho văn bản nhãn. Nó kế thừa từ lớp JComponent, mà triển khai các giao diện SwingConstants và Accessible.

package com.hello;
import javax.swing.*;

public class JLabelDemo {
    public static void main(String[] args) {
        JFrame frame = new JFrame("Ví dụ về JLabel trong Swing");
        JLabel label1, label2;
        label1 = new JLabel("Ví dụ về JLabel", JLabel.CENTER);
        label1.setBounds(50, 50, 250, 30);
        label2 = new JLabel("Chào mừng bạn đến với ví dụ về JLabel", JLabel.CENTER);
        label2.setBounds(50, 100, 250, 30);
        frame.add(label1);
        frame.add(label2);
        frame.setSize(400, 400);
        frame.setLayout(null);
        frame.setVisible(true);
    }
}

JButton

JButton là một triển khai của nút nhấn. Nó có một nhãn và tạo ra sự kiện khi người dùng nhấn vào nó. Nó cũng có thể chứa một hình ảnh và kế thừa từ lớp Button trừu tượng, mà triển khai giao diện Accessible.

package com.gui; // Use a valid package name

import javax.swing.*;

public class JButtonDemo {
    public static void main(String[] args) {
        JFrame frame = new JFrame("JButton Example");
        JButton button = new JButton("Click Here");
        button.setBounds(100, 100, 150, 30);
        frame.add(button);
        frame.setSize(400, 400);
        frame.setLayout(null);
        frame.setVisible(true);
    }
}

Nếu nút được bấm, không có gì xảy ra. Điều này xảy ra vì mã để xử lý sự nhấn nút chưa được thêm vào đến lúc này. Khi người dùng nhấn nút, một ‘hành động’ được thực hiện. Để lắng nghe các hành động như vậy, chúng ta sử dụng ActionListener. Ví dụ:

package com.aptech.guly;

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;

public class JButtonALDemo {
    public static void main(String[] args) {
        JFrame frame = new JFrame("JButton ActionListener Example");
        JTextField textField = new JTextField("Click the button to change this text");
        textField.setBounds(50, 20, 300, 30);

        JButton button = new JButton("Click ME");
        button.setBounds(150, 150, 95, 30);

        button.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                textField.setText("Welcome to ActionListener Example.");
            }
        });

        frame.add(button);
        frame.add(textField);

        frame.setSize(400, 400);
        frame.setLayout(null);
        frame.setVisible(true);
    }
}

JColorChooser

Nó cung cấp một bảng điều khiển được thiết kế để cho phép người dùng thao tác và chọn một màu. JColorChooser() tạo một bảng chọn màu với màu ban đầu là trắng. Trong khi đó, JColorChooser(color initialColor) được sử dụng để tạo một bảng chọn màu với màu được chỉ định ban đầu. Ví dụ:

package com.aptech.gui;

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.Color;
import javax.swing.*;

public class JColorChooserDemo extends JFrame implements ActionListener {
    JButton button;
    Container container;

    JColorChooserDemo() {
        container = getContentPane();
        container.setLayout(new FlowLayout());
        button = new JButton("Color");
        button.addActionListener(this);
        container.add(button);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        Color initialColor = Color.RED;
        Color color = JColorChooser.showDialog(this, "Select a color", initialColor);
        container.setBackground(color);
    }

    public static void main(String[] args) {
        JColorChooserDemo colorChooser = new JColorChooserDemo();
        colorChooser.setSize(400, 400);
        colorChooser.setVisible(true);
        colorChooser.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
}

Danh sách các Control và mô tả của Java Swing

JCheckBox – Đây là một thành phần đồ họa có thể ở trạng thái bật (true) hoặc tắt (false).

JRadioButton – Đây là một thành phần đồ họa có thể ở trạng thái bật (true) hoặc tắt (false) trong một nhóm.

JList – Thành phần danh sách hiển thị cho người dùng một danh sách cuộn các mục văn bản.

JComboBox – Thành phần ComboBox hiển thị cho người dùng một danh sách thả xuống để chọn từ menu các lựa chọn.

JTextField – Đối tượng TextField là một thành phần văn bản cho phép chỉnh sửa một dòng văn bản duy nhất.

JPasswordField – Đối tượng JPasswordField là một thành phần văn bản được tùy chỉnh để nhập mật khẩu.

JTextArea – Đối tượng TextArea là một thành phần văn bản cho phép chỉnh sửa nhiều dòng văn bản.

ImageIcon – Một điều khiển ImageIcon là một triển khai của giao diện Icon, vẽ biểu tượng từ hình ảnh.

JScrollBar – Điều khiển Scrollbar đại diện cho một thanh cuộn để cho phép người dùng chọn từ một phạm vi giá trị.

JOptionPane – JOptionPane cung cấp một tập hộp thoại tiêu chuẩn để yêu cầu người dùng nhập giá trị hoặc thông báo cho họ về điều gì đó.

JFileChooser – Điều khiển JFileChooser đại diện cho một cửa sổ hộp thoại mà người dùng có thể chọn một tệp.

JProgressBar – ProgressBar đại diện cho thanh tiến trình hiển thị phần trăm hoàn thành của nhiệm vụ khi nhiệm vụ tiến triển đến hoàn thành.

JSlider – Slider cho phép người dùng chọn giá trị một cách đồ họa bằng cách trượt núm trong một khoảng giới hạn.

JSpinner – JSpinner là một trường nhập dòng duy nhất cho phép người dùng chọn một số hoặc giá trị đối tượng từ một chuỗi có thứ tự.

Trình quản lý bố cục

Bộ quản lý bố cục (Layout manager) giúp sắp xếp vị trí cho tất cả các thành phần trong một container. Nếu bạn không chỉ định bộ quản lý bố cục, các thành phần sẽ được sắp xếp bởi bộ quản lý bố cục mặc định có tên là FlowLayout. Java cung cấp các bộ quản lý bố cục khác nhau để sắp xếp các điều khiển. Các thuộc tính của bộ quản lý bố cục như kích thước, hình dạng và sắp xếp thay đổi từ một bộ quản lý bố cục sang bộ quản lý bố cục khác.

Bộ quản lý bố cục thích nghi với kích thước của cửa sổ ứng dụng và nó liên kết với mỗi đối tượng Container. Mỗi bộ quản lý bố cụclà một đối tượng của lớp triển khai giao diện LayoutManager.

Các Bộ quản lý bố cục thường được sử dụng khi thiết kế giao diện đồ họa với AWT:

• BorderLayout: Sắp xếp các thành phần để phù hợp vào năm khu vực: phía đông, phía tây, phía bắc, phía nam và trung tâm.
• CardLayout: Xem xét mỗi thành phần trong container như một thẻ và chỉ hiển thị một thẻ duy nhất vào một thời điểm.
• FlowLayout: Đây là bố trí mặc định và nó sắp xếp các thành phần theo hướng luồng.
• GridLayout: Quản lý các thành phần trong một lưới hình chữ nhật.
• GridBagLayout: Đây là bộ quản lý bố trí linh hoạt nhất, căn chỉnh các thành phần theo chiều dọc, chiều ngang hoặc theo đường cơ sở của chúng có kích thước khác nhau.
• GroupLayout: Nhóm các thành phần theo cấp bậc để sắp xếp chúng trong một container.
• SpringLayout: Sắp xếp các thành phần con của container liên quan của nó theo một tập hạn chế.

Ví dụ:

package com.aptech.gui;

import java.awt.BorderLayout;
import javax.swing.JButton;
import javax.swing.JFrame;

public class BorderLayoutDemo {
    public BorderLayoutDemo() {
        JFrame frame = new JFrame();
        JButton button1 = new JButton("NORTH");
        JButton button2 = new JButton("SOUTH");
        JButton button3 = new JButton("EAST");
        JButton button4 = new JButton("WEST");
        JButton button5 = new JButton("CENTER");

        frame.add(button1, BorderLayout.NORTH);
        frame.add(button2, BorderLayout.SOUTH);
        frame.add(button3, BorderLayout.EAST);
        frame.add(button4, BorderLayout.WEST);
        frame.add(button5, BorderLayout.CENTER);

        frame.setSize(300, 300);
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        new BorderLayoutDemo();
    }
}

JavaFX

avaFX là một thư viện Java được sử dụng để tạo Rich Internet Application (RIA). Ứng dụng được viết bằng JavaFX có thể chạy một cách đồng nhất trên nhiều nền tảng và thiết bị khác nhau như máy tính để bàn, điện thoại di động, máy tính bảng và nhiều nền tảng khác.

Để phát triển ứng dụng GUI bằng ngôn ngữ lập trình Java, các lập trình viên thường phải dựa vào các thư viện như Advanced Windowing Toolkit và Swing. Sau sự xuất hiện của JavaFX, những lập trình viên Java này có thể phát triển ứng dụng GUI một cách hiệu quả với nội dung phong phú. JavaFX chứa một bộ API phong phú cung cấp các lớp cần thiết để thực hiện một ứng dụng JavaFX đầy đủ tính năng.

Liệt kê một số API JavaFX và mô tả:

Javafx.animation: Cung cấp một tập hợp các lớp chịu trách nhiệm cho các hoạt hình dựa trên chuyển đổi.

Javafx.application: Cung cấp các phương thức vòng đời ứng dụng.

Javafx.collections: Cung cấp các lớp có khả năng xử lý bộ sưu tập và các tiện ích liên quan.

Javafx.concurrent: Cung cấp các lớp chịu trách nhiệm cho việc đa nhiệm.

Javafx.embed.swing: Cung cấp một tập hợp các lớp có thể được sử dụng trong mã Swing.

Javafx.embed.swt: Cung cấp một tập hợp các lớp có thể được sử dụng trong mã Standard Widget Toolkit (SWT).

Javafx.event: Cung cấp các lớp xử lý sự kiện và xử lý sự kiện.

Javafx.fxml: Bao gồm một tập hợp các lớp chịu trách nhiệm tải hệ thống con từ đánh dấu.

Javafx.geometry: Cung cấp các lớp 2D chứa các phương thức để thao tác với hình học 2D trên đối tượng.

Javafx.scene: Cung cấp các lớp xử lý sơ đồ cảnh quan APL.

Javafx.scene.canvas: Cung cấp một tập hợp các lớp xử lý canvas.

Javafx.scene.control: Chứa các lớp cho tất cả các thành phần JavaFX.

Javafx.scene.effect: Bao gồm một tập hợp các lớp áp dụng hiệu ứng đồ họa cho các nút trong sơ đồ cảnh.

Javafx.scene.image: Cung cấp một tập hợp các lớp để tải và hiển thị hình ảnh.

Javafx.scene.input: Cung cấp một tập hợp các lớp cho sự kiện chuột và bàn phím.

Javafx.scene.layout: Cung cấp một tập hợp các lớp để hỗ trợ bố trí giao diện người dùng.

Javafx.scene.shape: Cung cấp một tập hợp 20 lớp thực hiện các thao tác liên quan đến hình học 2D.

Javafx.scene.text: Cung cấp một tập hợp các lớp cho font và kết xuất các nút văn bản.

Javafx.scene.transform: Cung cấp một tập hợp các lớp được sử dụng để thực hiện xoay, co giãn và xoay nghiêng đối tượng.

Javafx.scene.web: Cung cấp cách tải và hiển thị nội dung web.

Javafx.stage: Cung cấp các lớp container cấp cao nhất cho nội dung JavaFX.

Javafx.util: Cung cấp các lớp tiện ích.

Javafx.util.converter: Cung cấp các chuẩn chuyển đổi chuỗi cho JavaFX.

Từ Java 11 trở đi, JavaFX không được đưa vào như một phần của SDK mà phải được tải xuống riêng.

https://gluonhq.com/products/javafx/

Các thành phần của Kiến trúc JavaFX

Scene Graph

Ứng dụng JavaFX được viết bằng cách sử dụng một Sơ đồ Cảnh quan (Scene Graph); đó là một điểm khởi đầu cho việc xây dựng ứng dụng JavaFX. Sơ đồ cảnh quan là một cây phân cấp của các nút (nodes) đại diện cho tất cả các thành phần giao diện người dùng và có khả năng xử lý sự kiện. Mỗi nút có một id, kiểu dáng (style) và kích thước riêng. Có nhiều lớp (classes) có sẵn trong gói javafx.scene được sử dụng để tạo, sửa đổi và áp dụng các biến đổi lên các nút.

Hình trên biểu diễn một sơ đồ cảnh quan, trong đó một nút không chứa bất kỳ nút cha nào được gọi là nút gốc. Tương tự, mỗi nút có thể có một hoặc nhiều nút con và một nút không có nút con được gọi là nút lá; một nút có nút con được gọi là nút nhánh.

Here’s the improved paragraph with grammar and syntax corrections, along with the translation into Vietnamese:

Bộ động cơ đồ họa (Graphics Engine):

Bộ động cơ đồ họa của JavaFX cung cấp hỗ trợ đồ họa cho sơ đồ cảnh quan. Nó hỗ trợ đồ họa 2D và 3D. Nó cung cấp khả năng kết xuất phần mềm khi phần cứng đồ họa trên hệ thống không thể hỗ trợ kết xuất tăng tốc. Prism và Quantum Toolkit là hai đường ống đồ họa tăng tốc trong JavaFX.

Prism:

Đây là một đường ống đồ họa tăng tốc phần cứng hiệu suất cao. Nó có thể kết xuất cả đồ họa 2D và 3D. Nó cũng có khả năng kết xuất đồ họa trên các nền tảng khác nhau.

a. DirectX 9 trên Windows XP hoặc Vista

b. DirectX 11 trên Windows 7

c. OpenGL trên Mac, Linux và nhúng

Quantum Toolkit:

Nó được sử dụng để liên kết Prism và Glass Windowing Toolkit (GWT) lại với nhau và làm cho chúng có sẵn cho các lớp trong ngăn xếp (stack).

Glass Windowing Toolkit:

Nó là một phần của mức độ thấp nhất trong ngăn xếp đồ họa JavaFX và hoạt động phụ thuộc vào nền tảng, làm nhiệm vụ giao tiếp giữa JavaFX và hệ điều hành nguyên bản. Ngoài ra, nó còn có trách nhiệm cung cấp các dịch vụ hệ điều hành như quản lý cửa sổ, bộ đếm thời gian, hàng đợi sự kiện và bề mặt.

WebView:

Nó được sử dụng để nhúng nội dung HTML vào sơ đồ cảnh quan JavaFX. WebView sử dụng WebKit là một trình duyệt mã nguồn mở nội bộ và được sử dụng để kết xuất HTML, Document Object Model (DOM), Cascading Style Sheets (CSS) và JavaScript. Nó kết xuất nội dung HTML từ ứng dụng JavaFX và áp dụng các kiểu CSS cho giao diện người dùng.

Bộ động cơ đa phương tiện (Media Engine):

Ứng dụng JavaFX có thể hỗ trợ âm thanh và video bằng cách sử dụng Bộ động cơ đa phương tiện. Nó phụ thuộc vào một bộ động cơ mã nguồn mở gọi là GStreamer. Gói javafx.scene.media chứa tất cả các lớp và giao diện hỗ trợ chức năng đa phương tiện cho ứng dụng JavaFX.

Cấu trúc ứng dụng JavaFX

Ứng dụng JavaFX chủ yếu có ba thành phần chính: Stage, Scene và Nodes như được thể hiện trong hình:

Stage

Là cửa sổ chứa tất cả các đối tượng của một ứng dụng JavaFX và được đại diện bởi lớp Stage trong gói javafx.stage. Cửa sổ chính được tạo bởi nền tảng (platform) chính mình và sau đó, đối tượng cửa sổ được tạo sẽ được truyền làm đối số cho phương thức start() của lớp Application. Cửa sổ có hai tham số xác định vị trí của nó, đó là Chiều rộng (Width) và Chiều cao (Height). Nó được chia thành Hai khu vực: Khu vực Nội dung (Content Area) và Khu vực Trang trí (Decorations).

Có tổng cộng năm loại cửa sổ có sẵn như sau:

1. Cửa sổ có trang trí (Decorated)
2. Cửa sổ không có trang trí (Undecorated)
3. Cửa sổ trong suốt (Transparent)
4. Cửa sổ thống nhất (Unified)
5. Cửa sổ tiện ích (Utility)

Phương thức show() được sử dụng để hiển thị nội dung của một cửa sổ.

Dưới đây là các bước để tạo ứng dụng JavaFX:

JavaFX 2D Shapes

Trong một số ứng dụng cụ thể, có yêu cầu về các hình hai chiều. JavaFX cung cấp tính linh hoạt để tạo ra các hình hai chiều với các thông số tùy chỉnh. Tất cả các lớp thực hiện các hình hai chiều đều thuộc gói javafx.scene.shape. Các phương thức bên trong các lớp này xử lý về tọa độ của việc tạo ra hình hai chiều. Danh sách liệt kê các hình hai chiều phổ biến cùng với mô tả của chúng:

Đường thẳng (Line)

Là một hình học kết nối hai điểm trên hệ tọa độ 2D. Để tạo một đường thẳng trong ứng dụng JavaFX, bạn cần tạo một thể hiện của lớp javafx.scene.shape.Line.

Hình chữ nhật (Rectangle)

Là một hình học có hai cặp hai cạnh bằng nhau và bốn góc vuông tại các điểm giao nhau của chúng. Để tạo một hình chữ nhật trong ứng dụng JavaFX, bạn cần tạo một thể hiện của lớp javafx.scene.shape.Rectangle.

Hình ellipse (Ellipse)

Có thể được định nghĩa là một đường cong với hai điểm tiêu điểm. Để tạo nó trong ứng dụng JavaFX, bạn cần tạo một thể hiện của lớp javafx.scene.shape.Ellipse.

Hình cung (Arc)

Có thể được định nghĩa là một phần của chu vi của hình tròn hoặc hình ellipse. Trong ứng dụng JavaFX, bạn cần tạo một thể hiện của lớp javafx.scene.shape.Arc để tạo một hình cung.

Hình tròn (Circle)

Là một loại đặc biệt của hình ellipse có cả hai điểm tiêu điểm nằm ở cùng một vị trí. Trong ứng dụng JavaFX, bạn có thể tạo một hình tròn bằng cách tạo một thể hiện của lớp javafx.scene.shape.Circle.

Đa giác (Polygon)

Là một hình học có thể được tạo bằng cách kết nối nhiều đoạn thẳng có cùng một mặt phẳng. Trong ứng dụng JavaFX, bạn cần tạo một thể hiện của lớp javafx.scene.shape.Polygon để tạo một đa giác.

Đường cong ba bậc (Cubic Curve)

Là một đường cong ba bậc trong mặt phẳng XY. Trong ứng dụng JavaFX, bạn cần tạo một thể hiện của lớp javafx.scene.shape.CubicCurve để tạo đường cong ba bậc.

Đường cong hai bậc (Quad Curve)

Là một đường cong hai bậc trong mặt phẳng XY. Trong ứng dụng JavaFX, bạn cần tạo một thể hiện của lớp javafx.scene.shape.QuadCurve để tạo đường cong hai bậc.

Ví dụ vẽ đa giác bằng JavaFX:

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Polygon;

public class JavaFxApplication2 extends Application {

    @Override
    public void start(Stage primaryStage) {
        Group root = new Group();
        primaryStage.setTitle("Polygon Example");

        Polygon polygon = new Polygon();
        polygon.getPoints().addAll(
            0.0, 0.0,
            100.0, 200.0,
            200.0, 100.0
        );

        root.getChildren().add(polygon);

        Scene scene = new Scene(root, 300, 400);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Output:

Tương tự, ứng dụng JavaFX có thể sử dụng Text, Effects, Transformation, Animation, 3D Shapes, Layouts và nhiều tính năng khác để tạo ra các ứng dụng GUI tương tác.