Thiết kế giao diện trong Java với NetBeans

Ngày đăng: 08/06/2020   -    Cập nhật: 19/05/2021
Chào bạn, trong bài viết này mình sẽ giới thiệu cho bạn cách để thiết kế giao diện trong Java với Netbeans sử dụng Java Swing.


Thiết kế giao diện trong Java với NetBeans

Thiết kế giao diện trong Java với NetBeans

 

Mình hi vọng bài viết này cũng củng cố thêm kiến thức về Java cho các học viên tham gia KHÓA HỌC LẬP TRÌNH JAVA tại NIIT - ICT Hà Nội.


Chúng ta bắt đầu thôi nào.


Nội dung của bài viết này gồm:


  • Giới thiệu về Java swing
  • Ví dụ thiết kế giao diện với Netbeans sử dụng Swing


1. Giới thiệu về Java Swing



Java Swing là một bộ công cụ tiện ích GUI cho Java. Nó là một phần của các lớp Java Foundation Classes (JFC) của Oracle - một API để cung cấp giao diện người dùng đồ họa cho các chương trình Java.


Nó được xây dựng dựa trên Abstract Windowing Toolkit (AWT) Application Interface (API) và được viết bằng Java.


Không giống như AWT, Java Swing cung cấp các thành phần không phụ thuộc vào nền tảng và nhẹ hơn.


Java Swing hoặc Swing được phát triển dựa trên các API trước đó được gọi là “Bộ công cụ trừu tượng Windows (AWT)”. Swing cung cấp các thành phần GUI phong phú và phức tạp hơn AWT.


Gói javax.swing cung cấp các lớp cho Java Swing API như JButton, JTextField, JTextArea, JRadioButton, JCheckbox, JMenu, JColorChooser… Gói này chứa tập hợp các lớp interface mở rộng và cải tiến các thành phần của gói java.awt cho phép tạo giao diện đẹp hơn.


Các thành phần của gói javax.swing đều bắt đầu bằng ký tự J như: JButton, JFrame, JRadioButton, JCheckbox, JMenu, JColorChooser...


Toàn bộ thư viện Swing có tổng cộng 18 package sau:



  • javax.accessibility
  • javax.swing
  • javax.swing.border
  • javax.swing.colorchooser
  • javax.swing.event
  • javax.swing.filechooser
  • javax.swing.plaf
  • javax.swing.plaf.basic
  • javax.swing.plaf.metal
  • javax.swing.plaf.multi
  • javax.swing.plaf.synth
  • javax.swing.table
  • javax.swing.text
  • javax.swing.text.html
  • javax.swing.text.html.parser
  • javax.swing.text.rtf
  • javax.swing.tree
  • javax.swing.undo


Phân cấp các lớp Java Swing: Hệ thống phân cấp của API java swing được đưa ra dưới đây.

Cấu trúc thứ bậc của các class trong Java Swing

Cấu trúc thứ bậc của các class trong Java Swing


2. Một số ví dụ về thiết kế giao diện trong Java với Netbeans thông qua Swing



Ở trong phần này, mình sử dụng netbeans để lập trình giao diện Java nhé. Bạn cũng có thể sử dụng eclipse hoặc các IDE tương đương để code Java.




Có hai cách để tạo khung (Frame):

  • Bằng cách tạo đối tượng của lớp JFrame.
  • Bằng cách kế thừa lớp JFrame.

Chúng ta có thể viết code của Swing bên trong hàm main(), constructor hoặc bất kỳ phương thức nào khác.


Ví dụ 1: Tạo một giao diện Java với Jframe đơn giản, sau đó thêm Jbutton vào trong Jframe đó.



Ví dụ này thật đơn giản phải không nào. Bạn theo dõi đoạn code dưới đây và xem comment nếu chưa hiểu nhé



//Import hai thư viện JButton và JFrame
import javax.swing.JButton;
import javax.swing.JFrame;

public class Demo {

    public static void main(String[] args) {
        JFrame f = new JFrame();// Khai bào và khởi tạo một Jframe

        JButton b = new JButton("click");// Khai bào và khởi tạo một JButton
        b.setBounds(1505015050);
        // trục x , y , width, height: kích thước của một JButton
        // width, height càng lớn thì kích thước button càng to

        f.setTitle("Ví dụ Java Swing");
        f.add(b);// thêm button vào JFrame

        f.setSize(500300);// thiết lập kích thước cho của sổ
        f.setLayout(null);// không sử dụng trình quản lý bố cục
        f.setVisible(true);// hiển thị cửa sổ
    }
}
 


Đây là kết quả của chúng ta:

Kết quả thêm Jbutton vào trong Jframe

Kết quả thêm Jbutton vào trong Jframe


Ngoài ra, chúng ta cũng có thể làm theo cách kéo thả giao diện như sau:

 
Mình vừa tạo một project Demo. Trong phần Source Packages -> demo, click chuột phải vào demo, chọn New -> Jframe Form.



Hướng dẫn tạo Jframe Form trong Java Swing (Bước 1)

Hướng dẫn tạo Jframe Form trong Java Swing (Bước 1)


Một cửa sổ New Jframe Form hiện ra, bạn đặt tên class name, ở đây mình đặt là Application nhé. Sau đó nhần finish. Dưới đây là toàn bộ giao diện Java của chúng ta sau khi tạo form.


 
Hướng dẫn tạo Jframe Form trong Java Swing (Bước 2)

Hướng dẫn tạo Jframe Form trong Java Swing (Bước 2)


Ở mục mình khoanh, có phần design là phần mà chúng ta sẽ kéo thả giao diện, phần source là phần code.


Ở bên màn hình bên phải là các giao diện mà chúng ta sẽ kéo thả. Bên dưới chúng là các properties, binding,… cho từng giao diện đó.

 
Ở đây mình sẽ lấy ra một button nhé. Giữ chuột trái vào button sau đó kéo sang form (Nhớ là đừng vội thả chuột trái ra).


Ở trong phần Properties, chọn text và đặt lại tên cho button. Ở đây mình đặt là click nhé.


Kéo thả Jbutton trong Java Swing

Kéo thả Jbutton trong Java Swing


OK! Vậy là xong rồi đó.


Giờ chúng ta muốn bắt sự kiện cho button, thì chúng ta sẽ phải code cho button đó, bằng cách bạn nháy đúp chuột trái vào button trong form.


Sau đó source code cho Jbutton đó sẽ hiện ra và bạn tiến hành code sự kiện cho button thôi.


Ở trong ví dụ này mình chỉ show ra một Jframe có một Jbutton ở trong đó thôi. Bạn sang file Demo.java, trong hàm main chúng ta khai báo như sau:




public class Demo {
 
    public static void main(String[] args) {
        Application app = new Application();
        app.show();
    } 
}
 

 
Bây giờ thì tiến hành chạy thôi.


Và nếu bạn copy đúng thì chúng ta cũng sẽ có kết quả giống như cách bên trên.



Ví dụ 2: Lập trình một ứng dụng máy tính đơn giản với bốn phép toán cộng trừ nhân chia sử dụng Java Swing trên NetBeans



Với những gì chúng ta vừa tìm hiểu ở bên trên thì chúng ta bắt tay vào làm một ví dụ khó hơn và hay ho hơn nhé.


Chắc là chương trình tính Cộng, Trừ, Nhân, Chia cũng không còn xa lạ với bạn rồi đúng không?


Mình cũng đã comment chi tiết để bạn có thể đọc code và hiểu được. Bạn tham khảo chương trình sau của mình nhé:




import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
 
public class CalcutateDemo extends JFrame implements ActionListener{
        /*Dùng để biểu diễn 4 nút của 4 phép toán công trừ nhân chia */
       private JButton btn1btn2btn3btn4;
       /*Dùng để chứa 2 số và 1 kết quả*/
       private JTextField tf1tf2tf3;
       /*Biến result dùng để lưu trữ kết quả tính toán*/
       private double result;
       /*Dùng để nhận tầng ContentPane của JFrame*/
       private Container container;
       /*Dùng Panel để nhóm các thành phần trên giao diện*/
       private JPanel panel1panel2;
 
       /*Hàm khởi tạo với một tham số là String s*/
       public CalcutateDemo(String s) { 
            super(s);
            /*Lấy lớp ContentPane để đặt các đối tượng hiển thị*/
            container = this.getContentPane(); 
      
            /*Tạo các thành phần trên giao diện*/
            JLabel num1 = new JLabel("Số thứ nhất: ");
            tf1 = new JTextField();
            JLabel num2 = new JLabel("Số thứ nhất: ");
            tf2 = new JTextField();
            JLabel resultl = new JLabel("Kết quả: ");
            tf3 = new JTextField();
           
            tf3.setEditable(false);
 
            /*Panel1 chứa 3 Textfield*/
            panel1 = new JPanel(); 
            /*thiết lập Layout gồm 3 hàng 2 cột*/
            panel1.setLayout(new GridLayout(3,2));
            /*Đặt các thành phần vào panel 1*/
            panel1.add(num1); 
            panel1.add(tf1); 
            panel1.add(num2); 
            panel1.add(tf2);
            panel1.add(resultl);
            panel1.add(tf3);
            /*Tạo 4 nút biểu diễn 4 phép toán*/
            btn1 = new JButton("+");
            btn2= new JButton("-");
            btn3 = new JButton("*");
            btn4 = new JButton(":");
            /*Panel2 chứa 4 nút*/
            panel2 = new JPanel();
            panel2.add(btn1);
            panel2.add(btn2);
            panel2.add(btn3);
            panel2.add(btn4);
 
            /*Đặt 2 panel vào ContentPane*/
            container.add(panel1); 
            container.add(panel2,"South"); 
 
            btn1.addActionListener(this);
            btn2.addActionListener(this); 
            btn3.addActionListener(this); 
            btn4.addActionListener(this);
           
            /*Thiết lập kích thước hiển thị*/
            this.setSize(350200);
            this.setVisible(true);
       }
 
       /*Định nghĩa hàm cộng*/
       public void Add() 
       { 
            result = Double.parseDouble(tf1.getText()) + Double.parseDouble(tf2.getText()); 
            tf3.setText(String.valueOf(result)); 
       }
       /*Định nghĩa hàm trừ*/
       public void Minus() 
       { 
            result = Double.parseDouble(tf1.getText()) - Double.parseDouble(tf2.getText());
            tf3.setText(String.valueOf(result));
       }
       /*Định nghĩa hàm nhân*/
       public void Multi() 
       {
            result = Double.parseDouble(tf1.getText()) * Double.parseDouble(tf2.getText());
            tf3.setText(String.valueOf(result)); 
       }
       /*Định nghĩa hàm chia*/
       public void Div()
       {
           result = Double.parseDouble(tf1.getText()) / Double.parseDouble(tf2.getText());
           tf3.setText(String.valueOf(result));
       } 
      
       /*Bắt đầu tính toán khi người dùng ấn các nút phép toán*/
       public void actionPerformed(ActionEvent e
       { 
            if (e.getActionCommand()=="+") {
                //Xử lý trường hợp chưa nhập số nhưng đã bấm tính toán
                if(tf1.getText().equals("") || tf2.getText().equals("")) {
                    JOptionPane.showMessageDialog(this"Bạn chưa nhập đủ");
                }else {
                    Add();
                }
            }
               
            if (e.getActionCommand()=="-") {
                if(tf1.getText().equals("")|| tf2.getText().equals("")) {
                    JOptionPane.showMessageDialog(this"Bạn chưa nhập đủ");
                }else {
                    Minus();
                }
            }
            if (e.getActionCommand()=="*"){
                if(tf1.getText().equals("")|| tf2.getText().equals("")) {
                    JOptionPane.showMessageDialog(this"Bạn chưa nhập đủ");
                }else {
                    Multi();
                }
            }               
            if (e.getActionCommand()==":") {
                if(tf1.getText().equals("")|| tf2.getText().equals("")) {
                    JOptionPane.showMessageDialog(this"Bạn chưa nhập đủ");
                }else {
                    Div();
                }
            }               
       }
       
    public static void main(String[] args) {
        CalcutateDemo cal = new CalcutateDemo("SimpleCalculator");
       cal.setLocationRelativeTo(null);
    }  
}
 


Đây là kết quả sau khi chạy chương trình: mình demo với phép cộng nha


Chương trình máy tính đơn giản sử dụng Java Swing

Chương trình máy tính đơn giản sử dụng Java Swing
 

Chúc mừng bạn đã học được nhiều thêm về cách thiết kế giao diện GUI trong Java với Java Swing.



Như vậy mình cùng bạn vừa tìm hiểu xong về Java Swing là gì, cùng học cách thiết kế giao diện trong Java với Netbeans thông qua hai ví dụ đơn giản.


Để tìm hiểu sâu hơn về Java Swing bạn có thể xem thêm tại đây:




Hẹn gặp lại bạn trong các bài viết tiếp theo.


---

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
 
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php
Bình luận Facebook
Khóa học liên quan đến bài viết

Khóa học Java Full stack (IJFD)

104 giờ
Học lập trình Java Fullstack với khóa học được xây dựng theo lộ trình bài bản, từ JAVA CƠ BẢN đến JAVA WEB và nâng cao về JAVA FRAMEWORK như: Spring Boot, Hibernate

KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)

48 giờ
Khóa học Angular & TypeScript (Front end) sẽ giúp bạn làm chủ được nền tảng Angular từ đó phát triển được các ứng dụng mạnh mẽ, đa nền tảng.

Khóa học Lập trình Android tại Hà Nội

59 giờ
NIIT - ICT Hà Nội cung cấp khóa học Lập trình Android với ngôn ngữ lập trình Java. Chương trình cung ứng lập trình viên Android theo yêu cầu doanh nghiệp.

Lập trình Android Nâng cao

56 giờ
Khóa học Android nâng cao cung cấp kiến thức và kỹ năng chuyên sâu về lập trình Android. Phát triển ứng dụng tiên triến như: Lập trình giao diện tùy biến, xử lý dữ liệu nâng cao
Mục lục
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!