SWING Layout trong SWING 1 Ni dung o

SWING Layout trong SWING 1

Nội dung o o o Giới thiệu về Layout Các Layout của AWT Các Layout của SWING Bài tập Kết luận 2

Giới thiệu về Layout o Layout : Cách bố trí các components lên container. o Không dễ dàng gì để tự quản lý vị trí của các components trên GUI. o Layout. Manager là interface mô tả về các layout. o Trong gói AWT có hiện thức sẵn một số layout, các lớp layout này đều implement Layout. Manager interface.

Layouts có sẵn trong AWT java. awt. Flow. Layout (bố trí dạng dòng chảy) java. awt. Border. Layout (bố trí về biên khung) java. awt. Grid. Layout (bố trí dạng lưới đều nhau) java. awt. Grid. Bag. Layout (bố trí dạng lưới không đều) java. awt. Card. Layout (bố trí dạng lưng quân bài) GUI Slide 4/57

Flow. Layout o Bố trí các component theo dạng chảy xuôi theo thứ tự mà phần tử này được add vào container. o Đây là layout mặc định của Panel. o Nếu có nhiều component trên container Các component có thể được đặt trên nhiều dòng Vấn đề gióng hàng (Align) o Giữa các component, chúng hở nhau theo chiều dọc (vgap) bao nhiêu, theo chiều ngang (hgap) bao nhiêu? GUI Slide 5/57

Flow. Layout. . . Constructors Flow. Layout() Tạo Flow. Layout mặc định: align= center, vgap=hgap=5 unit. Flow. Layout(int align) Tạo Flow. Layout với align đã biết, vgap=hgap=5 unit (default). Flow. Layout(int align, int hgap, int vgap) Tạo Flow. Layout với 3 tham số Trị của align: các dữ liệu static của class Flow. Layout LEFT CENTER RIGHT LEADING (phía đầu, tương tự LEFT) TRAILING (phía đuôi, tương tự RIGHT)

Border. Layout o Bố trí các component theo dạng ra biên của khung tạo ra 5 vị trí: EAST, WEST, SOUTH, NORTH, CENTER. o Đây là layout MẶC ĐỊNH của Frame. o Nếu container chỉ có 1 component và đặt nó ở vị trí CENTER thì component này phủ kín container. o Cú pháp thêm 1 component vào container tại 1 vị trí: Container. add("East", component. Name); // hoặc Container. add(Border. Layout. EAST, component. Name); o Tương tự cho “West”, “South”, “North”, “Center” GUI Slide 7/57

Grid. Layout o Bố trí các component thành 1 lưới rows dòng, cols cột đều nhau. Lưới 4 x 4 Lưới 3 x 2 Lưới 1 x 4

Grid. Layout. . . Constructor Grid. Layout() Tạo grid layout mặc định 1 x 1 Grid. Layout(int rows, int cols) Tạo grid layout rows x cols Grid. Layout(int rows, int cols, int hgap, int vgap)

Grid. Bag. Layout o Layout dạng lưới cho phép 1 component chiếm 1 số ô kề nhau theo cả 2 chiều. o Hình Empoyee Info sau là Grid. Bag. Layout 6 x 4, các label bên trái chiếm 1ô, các textbox chiếm 3 ô ngang. Dòng “Sex” chiếm 4 ô ngang, 2 checkbox chiếm 2 ô ngang.

Card. Layout o Bố trí các component thành từng lớp như lưng các quân bài (card). o Thường dùng Panel để chứa các component. o Tại 1 thời điểm chỉ có 1 panel hiện hành (quân bài trên cùng). o Có thể chuyển qua lại giữa các Panel.

Card. Layout. . . o Cách tạo GUI với card layout panel 1 với Layout 1 + các components Main panel với Card. Layout panel 2 với Layout 2 + các components Frame Cơ chế điều khiển

Một số Layout SWING o Box. Layout o Spring Layout o Null Layout 13

SWING Lập trình Giao Diện với JFC 14

Nội dung o o o Giới thiệu về AWT Giới thiệu về SWING Các SWING Component Các ứng dụng SWING – Bài tập Kết luận 15

GUI là gì? . . . o GUI= Container + Components Container Components GUI

Gói AWT của Java o AWT : abstract windowing toolkit - bộ công cụ chứa các lớp để tạo cửa sổ. o AWT là 1 phần của JFC- Java Foundation Classes. o Sử dụng: import java. awt. *; o Gồm nhiều phần tử (class) để tạo GUI. o Có các lớp quản lý việc bố trí các phần tử. o Có (event-oriented application) mô hình ứng dụng hướng sự kiện. o Có các công cụ xử lý đồ họa và hình ảnh. o Các lớp sử dụng các tác vụ với clipboard (vùng nhớ đệm) như cut, paste. GUI Slide 17/57

Demo AWT 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. import java. awt. *; public class Demo. AWT extends Frame { public Demo. AWT(String title) { super(title); this. set. Bounds(100, 150, 200); this. set. Visible(true); } public static void main (String[] args) { new Demo. AWT("First App"); } } 18

So sánh AWT và SWING AWT • Xây dựng bằng native code • Khó phát triển thêm các linh kiện(widget) mới SWING • Xây dựng bằng JAVA API • Dễ phát triển các linh kiện • Có thể thay đổi diện mạo của linh kiện lúc runtime • Mô hình MVC (Model – View – Controller) 19

Giới thiệu về JFC(Java Foundation Class) o JFC bao gồm các bộ phận sau : n n Các thành phần SWING Look & Feel Manager Java 2 D API Drag and Drop support 20

Kiến trúc SWING 21

Demo JFrame 1. import javax. swing. *; 2. public class Demo. JFrame extends JFrame 3. { 4. public Demo. JFrame(String title) { 5. super(title); 6. this. set. Bounds(100, 150, 200); 7. this. set. Visible(true); 8. } 9. public static void main (String[] args) { 10. new Demo. JFrame("Demo Swing"); 11. } 12. } 22

SWING Component - JFrame public class JButtons. Demo extends JFrame { Container cn ; JButton button 1 = new JButton(“Java”); public JButtons. Demo(String title) { cn = this. get. Content. Pane(); cn. set. Layout(new Flow. Layout()); cn. add(button 1); //………. } } Layer. Pane Content. Pane Glass. Pane JFrame() JFrame(String title ) 23 Source. Code

JPanel o Tương tự như Panel của AWT , Content. Pane của JFrame thực chất là 1 JPanel o Constructors: JPanel() JPanel( Layout. Manager layout) o Thêm component c vào panel p: p. add(c) ; 24

JButton o JButton là lớp kế thừa từ JAbstract. Button, diện mạo của JButton bao gồm: 1 nhãn and/or 1 ảnh diễn tả mục đích của nút này. Chữ trên nút có thể gạch dưới để mô tả phím nóng của nút (shortcut key, mnemonic key). o Constructors JButton () JButton (Icon icon) JButton(String text) JButton (String text, Icon icon) JButton (Action a) o the. Button. set. Mnemonic(‘J’); // Alt + J 25

JLabel o JLabel cũng tương tự như Label của AWT nhưng có thêm tính chất cho phép nạp 1 ảnh vào nhãn này, xử lý HTML o Constructors: JLabel(Icon image) JLabel(Icon image, int horizontal. Alignment) JLabel(String text, Icon icon, int horizontal. Alignment) JLabel(String text, int horizontal. Alignment) 26

JLabel (tt) o String content = "<HTML><BODY><FONT color=RED>Image</FONT>"; o content = content + "<FONT color=BLUE> <I>JLabel demo</I></FONT></BODY></HTML>"; o JLabel lbl = new JLabel(content , Img , Swing. Constants. LEFT); 27

JText. Field o Constructors JText. Field() JText. Field(Document doc, String text, int columns) JText. Field(int columns) JText. Field(String text, int columns) 28

JText. Area Constructors: o JText. Area() o JText. Area(Document doc) JText. Area(Document doc, String txt, int rows, int cols) o JText. Area(String text) JText. Area(String text, int rows, int cols) 29

Nhập bằng lựa chọn với JCheck. Box, JRadio. Button, JList o JCheckbox : Cho phép chọn nhiều lựa chọn o JRadio. Button : Chọn 1 trong nhóm lựa chọn (lớp Button. Group) o JList : Danh sách chuỗi lựa chọn o JCombo. Box combobox =1 text field + 1 drop down list 30

Demo JRadio. Button - JCheck. Box Button. Group Grp = new Button. Group(); JRadio. Button rad 1 = new JRadio. Button("Male", true); JRadio. Button rad 2 = new JRadio. Button("Female", false); Grp. add(rad 1); Grp. add(rad 2); Source Code 31

JList o Constructor JList() JList(Object [] A) JList(List. Model A) JList(Vector A) Source Code 32

JCombo. Box o Constructor n n JCombo. Box(); JCombo. Box(Combo. Box. Model model); JCombo. Box(Object[] arr); JCombo. Box(Vector a. Vec); Source Code 33

JMenu 34

JMenu. Bar File New Open JMenu. Item JMenu. Bar m. Bar = new JMenu. Bar JMenu m. File = new JMenu(“File”); m. Bar. add(m. File); this. set. JMenu. Bar(m. Bar); JMenu. Item() JMenu. Item(Action a) JMenu. Item(Icon icon) JMenu. Item(String text, int mnemonic) 35

Demo Menu Source Code public void mouse. Pressed(Mouse. Event m) { if ( m. get. Modifiers() == Input. Event. BUTTON 3_MASK ) app. demo. Popup. show(app , m. get. X() , m. get. Y()); } 36

Menu Demo Source Demo Menu 1. java 37

SWING Dialog 38

Nội dung o o Giới thiệu class JOption. Pane Hiển thị hình ảnh trong SWING Bài tập Kết luận 39

JOption. Pane o Hiển thị một Message với chỉ một button “OK” o Hiển thị Message với 2 hay 3 Button. 1. ) "Yes" and "No" 2. ) "Yes", "No" and "Cancel" 3. ) "Ok", and "Cancel" q Hiển thị một hộp thoại nhập với 2 button “OK” và “Cancel”

Các phương thức của class o show. Message. Dialog(): hiển thị Message đơn giản với một nút “OK”. o show. Input. Dialog(): hiển thị một hộp thoại input. Method trả về một String ( vừa nhập ). o show. Confirm. Dialog(): And the last or third method is the show. Confirm. Dialog() which asks the user for confirmation (Yes/No) by displaying message. This method return a numeric value either 0 or 1. If you click on the "Yes" button the method returns 1 otherwise 0. GUI Slide 41/57

import javax. swing. *; import java. awt. event. *; Demo public class Show. Dialog. Box{ JFrame frame; public static void main(String[] args){ Show. Dialog. Box db = new Show. Dialog. Box(); } public Show. Dialog. Box(){ frame = new JFrame("Show Message Dialog"); JButton button = new JButton("Click Me"); button. add. Action. Listener(new My. Action()); frame. add(button); frame. set. Size(400, 400); frame. set. Visible(true); frame. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); } public class My. Action implements Action. Listener{ public void action. Performed(Action. Event e){ JOption. Pane. show. Message. Dialog(frame, "Roseindia. net"); } } }

Các phương thức khác - Demo

Kết quả … GUI

Show. Input. Dialog

Các Dialog chuẩn của Window o JFile. Chooser o JColor. Chooser 46

JFile. Chooser o Cho phép chọn File o Cho phép Save o Có thể hiển thị theo mode : fc. set. File. Selection. Mode(JFile. Chooser. DI RECTORIES_ONLY); fc. set. File. Selection. Mode(JFile. Chooser. FIL ES_AND_DIRECTORIES); 47