Đối tượng container trong gui là gì

Thư viện Java Swing được xây dựng trên đầu Bộ công cụ tiện ích con trừu tượng Java (AWT), một bộ công cụ GUI cũ hơn, phụ thuộc vào nền tảng. Bạn có thể sử dụng các thành phần lập trình GUI đơn giản của Java như nút, hộp văn bản, v.v., từ thư viện và không phải tạo các thành phần từ đầu.

In this Java Swing tutorial, you will learn Java GUI basics like-

Sơ đồ phân cấp lớp Java Swing

Sơ đồ phân cấp lớp Java Swing

Tất cả các thành phần trong Java Swing là JComponent có thể được thêm vào các lớp vùng chứa.

Lớp Container là gì?

Các lớp vùng chứa là các lớp có thể có các thành phần khác trên đó. Vì vậy, để tạo Java Swing GUI, chúng ta cần ít nhất một đối tượng container. Có 3 loại thùng chứa Java Swing.

  1. Panel: Nó là một vật chứa thuần túy và bản thân nó không phải là một cửa sổ. Mục đích duy nhất của Panel là tổ chức các thành phần trên một cửa sổ.
  2. Frame: Đây là một cửa sổ hoạt động đầy đủ với tiêu đề và các biểu tượng.
  3. Dialog: Nó có thể được coi như một cửa sổ bật lên bật ra khi một thông báo phải được hiển thị. Nó không phải là một cửa sổ hoạt động đầy đủ như Frame.

GUI (Graphical User Interface) in Java là một trình tạo trải nghiệm trực quan dễ sử dụng cho các ứng dụng Java. Nó chủ yếu được làm bằng các thành phần đồ họa như nút, nhãn, cửa sổ, v.v. mà thông qua đó người dùng có thể tương tác với một ứng dụng. GUI đóng một vai trò quan trọng để xây dựng giao diện dễ dàng cho các ứng dụng Java.

Cách tạo GUI trong Java với ví dụ

Bây giờ trong Hướng dẫn Java GUI này, chúng ta hãy hiểu cách tạo GUI trong Java với các ví dụ Swings trong Java.

Step 1) Sao chép mã vào trình chỉnh sửa
Trong bước đầu tiên, Sao chép đoạn mã sau vào một trình soạn thảo.

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); } }

Step 2) Chạy mã
Bước tiếp theo, Lưu, Biên dịch và Chạy mã

Step 3) Sao chép mã sau vào trình chỉnh sửa
Bây giờ chúng ta hãy Thêm một nút vào khung của chúng ta. Sao chép mã sau vào một trình soạn thảo từ Ví dụ về giao diện người dùng Java nhất định

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); } }

Step 4) Thực thi mã
Tiếp theo, Thực thi mã. Bạn sẽ nhận được một nút lớn.

Đối tượng container trong gui là gì

Step 5) Thêm hai nút
Làm thế nào về việc thêm hai nút? Sao chép mã sau vào một trình chỉnh sửa.

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); } }

Step 6) Lưu và chạy chương trình
Tiếp theo, Lưu, Biên dịch và Chạy chương trình.

Step 7) Kiểm tra đầu ra
Đầu ra không mong muốn =? Các nút đang bị chồng lên nhau.

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

Trình quản lý bố cục được sử dụng để bố trí (hoặc sắp xếp) các thành phần GUI Java bên trong một vùng chứa. Có nhiều trình quản lý bố cục, nhưng những trình quản lý thường xuyên được sử dụng nhất là-

Java BorderLayout

Một BorderLayout đặt các thành phần vào tối đa năm khu vực: trên cùng, dưới cùng, trái, phải và trung tâm. Nó là trình quản lý bố cục mặc định cho mọi java JFrame

Đối tượng container trong gui là gì
Java BorderLayout

Java FlowLayout

FlowLayout là trình quản lý bố cục mặc định cho mọi JPanel. Nó chỉ đơn giản là lần lượt đưa ra các thành phần trong một hàng duy nhất.

Đối tượng container trong gui là gì
Java FlowLayout

Java GridBagLayout

Nó là phức tạp hơn của tất cả các bố cục. Nó sắp xếp các thành phần bằng cách đặt chúng trong một lưới ô, cho phép các thành phần kéo dài nhiều hơn một ô.

Đối tượng container trong gui là gì
Java GridBagLayout

Step 8) Tạo khung trò chuyện
Còn cách tạo khung chat như bên dưới thì sao?

Đối tượng container trong gui là gì

Hãy thử tự viết mã trước khi xem chương trình bên dưới.

//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); } }

1Chương 6: Lập trình GUIChương 6: Lập trình GUIGVLT: Trần Anh Dũng2Nội dungNội dung GUI là gì?  Giới thiệu thiết kế GUI trong java ðối tượng khung chứa (Container)  Các thành phần cơ bản (Component) Bộ quản lý trình bày (Layout Manager) Ví dụ minh họa3Giới thiệu (1)Giới thiệu (1) GUI: Graphic User Interface – mô hình giao tiếp kiểutương tác giữa ứng dụng và user dạng ñồ họa. Mỗi ngôn ngữ hỗ trợ cách tạo GUI khác nhau: VB, VC++ dùng dạng drag and drop C++ ñòi hỏi programmer viết toàn bộ code ñể tạoGUI. Java hỗ trợ sẵn các lớp tạo GUI cho Programmer sửdụng. Hầu hết các ngôn ngữ lập trình hiện nay ñược cung cấpcác ñối tượng ñồ họa.4Giới thiệu (2)Giới thiệu (2) GUI = Container + ComponentsContainerComponents5 Một thành phần (component) GUI là một ñối tượng trựcquan. Người dùng tương tác với ñối tượng này thôngqua con trỏ chuột hay bàn phím. Các thành phần như là button, label… có thể ñượcnhìn thấy trên màn hình. Bất kỳ thao tác nào áp dụng ñến tất cả các thànhphần GUI ñều ñược tìm thấy trong lớp ñối tượngComponent. ðể tạo các thành phần GUI, sử dụng các lớp tồn tạitrong gói java.awtGiới thiệu (3)Giới thiệu (3)6 AWT: Abstract Windowing Toolkit AWT là một bộ các lớp trong Java cho phép chúng tatạo một GUI và chấp nhận các nhập liệu của người dùngthông qua bàn phím và chuột. AWT là thư viện nền tảng, cơ sở giúp cho chúng ta tiếpcận với thư viện mở rộng JFC hiệu quả hơn. Sử dụng:- import java.awt.*;- import java.awt.event.*;Giới thiệu về AWT (1)Giới thiệu về AWT (1)7 AWT cung cấp các item khác nhau ñể tạo một GUI hiệu quả và lôi cuốn người sử dụng. Các item này có thể là: Container Component Trình quản lý cách trình bày (Layout manager) ðồ họa (Graphic) và các tính năng vẽ (draw) Phông chữ (Font) Sự kiện (Event)Giới thiệu về AWT (2)Giới thiệu về AWT (2)8AWTEventFontFontMetricsComponentGraphicsObject ColorCanvasButtonTextComponentLabelListCheckBoxGroupCheckBoxChoiceContainer Panel AppletFrameDialog FileDialogWindowTextFieldTextAreaMenuComponentMenuItemMenuBarMenuScrollbarLayoutManagerCấu trúc gói AWTCấu trúc gói AWT9Tham khảo gói awtTham khảo gói awt10Container (1)Container (1) Container là ñối tượng vật chứa hay những ñối tượng cókhả năng quản lý và nhóm các ñối tượng khác lại. Những ñối tượng con thuộc thành phần awt như:button, checkbox, radio button, scrollbar, list,… chỉ sửdụng ñược khi ta ñưa nó vào khung chứa (container). Gói java.awt chứa một lớp có tên là Container. Lớp nàytrực tiếp hay gián tiếp phát sinh ra hai container ñược sửdụng phổ biến nhất là Frame và Panel.11Container (2)Container (2)12 Khung chứa Frame là một cửa sổ window Là lớp con của window Bao gồm một tiêu ñề và một ñường biên (border) nhưcác ứng dụng windows thông thường khác. Thường ñược sử dụng ñể tạo cửa sổ chính của cácứng dụng.Frame (1)Frame (1)13 Frame có thể hoạt ñộng như một container hay như mộtthành phần (component). Chúng ta có thể sử dụng một trong những constructorsau ñể tạo một frame: Frame() Frame(String title) … Các phương thức: Tìm hiểu java docsFrame (2)Frame (2)14import java.awt.*;class FrameDemo extends Frame{public FrameDemo(String title){super (title);}public static void main (String args[]) {FrameDemo ObjFr = new FrameDemo("I have been Framed!!!");ObjFr.setSize(500,500); ObjFr.setVisible(true);}}import java.awt.*;class FrameDemo extends Frame{public FrameDemo(String title){super (title);}public static void main (String args[]) {FrameDemo ObjFr = new FrameDemo("I have been Framed!!!");ObjFr.setSize(500,500); ObjFr.setVisible(true);}}Frame Frame –– Ví dụVí dụ15 ðối tượng khung chứa ñơn giản nhất, dùng ñể nhómcác ñối tượng, thành phần con lại. Một Panel có thểchứa bên trong một Panel khác. Một panel không có sẵn vì thế chúng ta cần phải thêmnó vào Frame. Hàm khởi tạo Panel ( ) Panel (LayoutManager)Panel (1)Panel (1)16 Panel không thể ñược nhìn thấy trực tiếp. Do ñó, chúng ta cần thêm panel ñến một frame. Vì vậy ta cần tạo một frame mới và thêm Panel mớiñược tạo này vào nó. Tuy nhiên, frame sẽ không nhìn thấy ñược, và không cókích thước. Chúng ta sử dụng hai phương thứcsetSize() và setVisible() ñể thiết lập kích thước và hiểnthị frame.Panel (2)Panel (2)17Panel Panel –– Ví dụVí dụimport java.awt.*;class Paneltest extends Panel{public static void main(String args[]){Paneltest p = new Paneltest();Frame f = new Frame(“Testing a Panel”);f.add(p);f.setSize(300,200);f.setVisible(true);}public Paneltest(){}}import java.awt.*;class Paneltest extends Panel{public static void main(String args[]){Paneltest p = new Paneltest();Frame f = new Frame(“Testing a Panel”);f.add(p);f.setSize(300,200);f.setVisible(true);}public Paneltest(){}}18 java.awt.Panel Ví dụ microwave GUIButtonTextField12 ButtonPanel(GridLayout)Panel(GridLayout)Panel(BorderLayout)Panel(BorderLayout)Frame(BorderLayout)Frame(BorderLayout)Panel Panel –– Ví dụ (tt)Ví dụ (tt)19Dialog (1)Dialog (1) Là một cửa sổ dạng hộp hội thoại, cửa sổ dạng nàythường ñược dùng ñể ñưa ra thông báo, hay dùng ñểlấy dữ liệu nhập từ ngoài vào thông qua các ñối tượng,thành phần trên dialog như TextField chẳng hạn. Dialog cũng là một cửa sổ nhưng không ñầy ñủ chứcnăng như ñối tượng khung chứa Frame.20Dialog (2)Dialog (2) Là một lớp con của lớp Window Tham khảo chi tiết các constructor và các phương thứctrong java docs.Frame myframe = new Frame(“My frame”); String title = “Title”;boolean modal = true; Dialog dlg = new Dialog(myframe, title, modal);Frame myframe = new Frame(“My frame”); String title = “Title”;boolean modal = true; Dialog dlg = new Dialog(myframe, title, modal);21ScrollPanesScrollPanes Là một khung chứa tương tự khung chứa Panel, nhưngcó thêm 2 thanh trượt giúp ta tổ chức và xem ñược cácñối tượng lớn chiếm nhiều chỗ trên màn hình nhưnhững hình ảnh hay văn bản nhiều dòng.22Nguyên tắc xây dựng GUINguyên tắc xây dựng GUI Lựa chọn 1 container: Frame, Dialog,… Tạo các ñiều khiển: label, button, text areas… ðưa các ñiều khiển vào vùng chứa Sắp xếp các ñiều khiển (layout) Thêm các xử lý sự kiện (Listeners) Sẽ ñược giới thiệu trong chương sau23Thành phần Thành phần ComponentsComponents Tất cả các thành phần cấu tạo nên chương trình GUIñược gọi là component. Ví dụ: Containers, TextFields, Labels, CheckBoxes, TextAreas Scrollbars, scrollpanes, dialog24LabelButtonButtonCheckboxChoiceListScrollbarTextFieldTextAreaCheckboxGroupCheckboxThành phần Thành phần ComponentsComponents25 Dùng ñể hiển thị chuỗi Constructors: Label(); Label(String); Label(String, int alignment); Các phương thức phổ biến: setFont(Font f); setText(String); getText(); …Label (1)Label (1)