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

Posted on by adminChuyên mục:Kiến thức Internet

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

 
KHÓA HỌC LẬP TRÌNH JAVA

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

Nội dung của bài viết này gồm:Mình hy vọng bài viết này cũng củng cố thêm kiến thức và kỹ năng về Java cho những học viên tham giatại NIIT – ICT TP. Hà Nội. Chúng ta mở màn thôi nào. Nội dung của bài viết này gồm :

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:là một bộ công cụ tiện ích GUI cho Java. Nó là một phần của những lớp ( JFC ) của – một API để cung ứng giao diện người dùng đồ họa cho những chương trình Java. Nó được kiến thiết 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 ứng những thành phần không nhờ vào vào nền tảng và nhẹ hơn. Java Swing hoặc Swing được tăng trưởng dựa trên những API trước đó được gọi là “ Bộ công cụ trừu tượng Windows ( AWT ) ”. Swing cung ứng những thành phần GUI phong phú và đa dạng và phức tạp hơn AWT.Gói javax.swing cung ứng những lớp cho Java Swing API như JButton, JTextField, JTextArea, JRadioButton, JCheckbox, JMenu, JColorChooser … Gói này chứa tập hợp những lớp interface lan rộng ra và nâng cấp cải tiến những thành phần của gói java.awt được cho phép tạo giao diện đẹp hơn. Các thành phần của gói javax.swing đều mở màn bằng ký tự J như : JButton, JFrame, JRadioButton, JCheckbox, JMenu, JColorChooser … Toàn bộ thư viện Swing có tổng số 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 những 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 những 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 hoàn toàn có thể sử dụng eclipse hoặc những IDE tương tự để code Java .

> Hướng dẫn Lập trình giao diện GUI bằng Eclipse

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

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

Chúng ta hoàn toàn có thể viết code của Swing bên trong hàm main ( ), constructor hoặc bất kể phương pháp 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 thuầ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(150, 50, 150, 50);

        / / trục x, y, width, height : kích cỡ của một JButton

        / / width, height càng lớn thì size button càng to

        f.setTitle(” Ví dụ Java Swing “);

        f.add(b);/ / thêm button vào JFrame

        f.setSize(500, 300);/ / thiết lập kích cỡ cho của sổ

        f.setLayout(null);/ / không sử dụng trình quản trị bố cục tổng quan

        f.setVisible(true);/ / hiển thị hành lang cửa số

}

}
 

Đây là tác dụng của tất cả 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 để màn biểu diễn 4 nút của 4 phép toán công trừ nhân chia * /

       private JButton btn1, btn2, btn3, btn4;

       / * Dùng để chứa 2 số và 1 tác dụng * /

       private JTextField tf1, tf2, tf3;

       / * Biến result dùng để tàng trữ hiệu quả đo lường và thống kê * /

       private double result;

       / * Dùng để nhận tầng ContentPane của JFrame * /

       private Container container;

       / * Dùng Panel để nhóm những thành phần trên giao diện * /

       private JPanel panel1, panel2;

       / * 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 những đối tượng người tiêu dùng hiển thị * /

            container = this.getContentPane(); 

            / * Tạo những 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 những 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 màn 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 cỡ hiển thị * /

            this.setSize(350, 200);

            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 giám sát khi người dùng ấn những 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 thống kê giám sát

                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à tác dụng 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 thuầ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 những 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 trong thực tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, TP. Hà Nội

SĐT : 02435574074 – 0383.180086

E-Mail : [email protected]

Fanpage: https://facebook.com/NIIT.ICT/

# niit # icthanoi # niithanoi # niiticthanoi # hoclaptrinh # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp # python # java # php

admin