Hiểu mục đích của gói AWT và cấu trúc của gói này. Biết cách sử dụng các đối tượng của gói AWT. Biết cách thiết kế một GUI.. Chúc các bạn học tốt.
Chương Tạo giao tiếp người dùng Graphic User Interface- GUI GUI Slide 1/57 Mục tiêu Hiểu mục đích gói AWT cấu trúc gói Biết cách sử dụng đối tượng gói AWT Biết cách bố cục GUI Biết cách thiết kế GUI GUI Slide 2/57 Nội dung 5.1- Ôn tập 5.2- GUI gì? 5.3- Gói AWT Java 5.4- Đưa component vào GUI 5.5- Một chương trình tạo GUI 5.6- Sử dụng ñối tượng AWT 5.7- Bố trí phần tử GUI 5.8- Hướng dẫn tạo GUI cho ứng dụng 5.9- Tóm tắt 5.10- Bài tập GUI Slide 3/57 5.1- Ơn tập • loại lỗi chương trình: Compile-time error / Run-time error • Exception = Run-time error • Có thể bẫy exception cấu trúc try {…} catch (ExceptionClass e) {…} finally { … } • Lỗi truyền từ method gây exception lên method gọi • Có thể tự ñịnh nghĩa class Exception kế thừa từ lớp Exception Java GUI Slide 4/57 5.2- GUI gì? • GUI = Graphic User Interface – mơ hình giao tiếp kiểu tương tác ứng dụng 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 tồn code ñể tạo GUI, Java hỗ trợ sẵn lớp tạo GUI cho Programmer sử dụng GUI Slide 5/57 GUI gì? • GUI= Container + Components Container Components GUI Slide 6/57 5.3- Gói AWT Java • AWT : abstract windowing toolkit - công cụ chứa lớp để tạo cửa sổ • AWT phần JFC- Java Foundation Classes • Sử dụng: import java.awt.*; • Gồm nhiều phần tử (class) để tạo GUI • Có lớp quản lý việc bố trí phần tử • Có (event-oriented application) mơ hình ứng dụng hướng kiện • Có cơng cụ xử lý đồ họa hình ảnh • Các lớp sử dụng tác vụ với clipboard (vùng nhớ ñệm) cut, paste GUI Slide 7/57 Cấu trúc gói AWT Component Button Choice Checkbox Canvas TextComponent Container Panel Applet Label Window Frame TextField TextArea Dialog GUI Slide 8/57 Tham khảo gói java.awt GUI Slide 9/57 Tham khảo gói java.awt GUI Slide 10/57 Yêu cầu GUI • Thân thiện với user • Số phần tử (element, component) GUI thay ñổi tùy thuộc vào ứng dụng • Khi user tương tác với phần tử GUI, ứng dụng phải có phản ứng • Lập trình kiện bàn đến chương sau GUI Slide 11/57 5.4- Đưa component vào GUI Các bước ñể ñưa component vào GUI ( viết code ) • Tạo đối tượng component phù hợp • Xác định hình thức bên ngồi lúc ñầu component • Định vị component GUI • Thêm component vào GUI GUI Slide 12/57 5.5- Một thí dụ Container Components •3 label, •3 text-field •1 checkboxgroup chứa check-box •4 button GUI Slide 13/57 5.6- Sử dụng lớp awt GUI Slide 14/57 5.6.1- Container Component Container Phân cấp thừa kế Panel Panel vùng chữ nhật, khơng có đường viền Applet Window Frame Dialog Panel khung chữ nhật, có đường viền, có nut1 điều khiển cửa sổ GUI Slide 15/57 Container Container: Đối tượng chứa element, cho phép vẽ, tô màu lên container Frame Panel class thường dùng Panel thường dùng ñể chứa element GUI phức tạp, Frame chứa nhiều Panel Panel, Applet thường dùng để tạo ứng dụng nhúng vào Browser GUI Slide 16/57 5.6.2- Frame Constructors: Frame() Make invisible frame Frame(String) Make a visible frame with title GUI Slide 17/57 Frame Common methods void setSize( int width, int Height) public String getTitle(); public void setTitle(String title); public void setResizable(boolean resizable) public boolean isResizable() public void setVisible(boolean) public boolean isShowing() void show(boolean) void add ( ) // add component GUI Slide 18/57 5.6.3- Panel Panel phải ñược ñưa vào Frame viết application Frame có border Constructors Panel(): tạo panel với bố cục mặc ñịnh Panel(LayoutManager layout): tạo panel với bố cục ñã biết Methods: add (component) // thêm component vào panel setLayout(LayoutManager layout) //chọn kiểu bố trí components GUI Slide 19/57 5.6.4- Label • Nhãn nhằm giải thích, chứa liệu xuất Constructor: Label() : tạo label trống Label(String) : tạo label có chuỗi Label (String, int Align) Tạo label có gióng hàng: Align=LEFT,RIGHT,CENTER Common Methods: void setFont (Font f) void setText(String S) String getText() GUI Slide 20/57 10 5.6.10- Scrollbar- Thanh cuộn • Công cụ nhập trị khoảng số ( biểu diễn Maximum, Minimum) cách kéo trượt • Tại thời điểm, trượt vi trí mơ tả cho trị hành (Value) • Có thể có hướng ngang dọc (Orientation) Kích thay ñổi tăng giảm theo UNIT ñã ấn ñịnh trước Kích ñây thay ñổi tăng giảm theo BLOCK ñã ấn ñịnh trước GUI Slide 27/57 Scrollbar Constructors Scrollbar() - tạo cuộn dọc Scrollbar(int orientation) // VERTICAL|HORIZONTAL Scrollbar(int orientation, int value, int visible, int minimum, int maximum) Common methods void setMaximum(int v) int getMaximum() ; void setMinimum(int v) int getMinimum() int getOrientation() void setUnitIncrement(int v) int getUnitIncrement() void setBlockIncrement(int v) int getBlockIncrement() void setValue(int v) int getValue() void setVisibleAmount(int newAmount) int getVisibleAmount() GUI Slide 28/57 14 Minh họa Click for Demonstration GUI Slide 29/57 5.7- Bố trí components lên GUI • Layout : Cách bố trí components lên container • Khơng dễ dàng để tự quản lý vị trí components GUI • LayoutManager interface mơ tả layout • Trong gói AWT có thức sẵn số layout, lớp layout ñều implement LayoutManager interface GUI Slide 30/57 15 5.7.1-Layouts có sẵn AWT java.awt.FlowLayout (bố trí dạng dịng chảy) java.awt.BorderLayout (bố trí biên khung) java.awt.GridLayout (bố trí dạng lưới nhau) java.awt.GridBagLayout (bố trí dạng lưới khơng đều) java.awt.CardLayout (bố trí dạng lưng quân bài) Tham khảo docs\api\java\awt\package-tree.html vớo docs thư mục Documantation Java GUI Slide 31/57 5.7.2- FlowLayout • Bố trí component theo dạng chảy xi theo thứ tự mà phần tử add vào container • Đây layout mặc định Panel • Nếu có nhiều component container Các component đặt nhiều dịng Vấn đề gióng hàng (Align) • Giữa component, chúng hở theo chiều dọc (vgap) bao nhiêu, theo chiều ngang (hgap) bao nhiêu? GUI Slide 32/57 16 FlowLayout Constructors FlowLayout() Tạo FlowLayout mặc ñịnh: align= center, vgap=hgap=5 unit FlowLayout(int align) Tạo FlowLayout với align ñã biết, vgap=hgap=5 unit (default) FlowLayout(int align, int hgap, int vgap) Tạo FlowLayout với tham số Trị align: liệu static class FlowLayout LEFT CENTER RIGHT LEADING (phía đầu, tương tự LEFT) Click for Demo TRAILING (phía đi, tương tự RIGHT) GUI Slide 33/57 5.7.3- BorderLayout • Bố trí component theo dạng biên khung tạo vị trí: EAST, WEST, SOUTH,NORTH, CENTER • Đây layout MẶC ĐỊNH Frame • Nếu container có component đặt vị trí CENTER component phủ kín container • Cú pháp thêm component vào container vị trí: Container.add("East", componentName); // Container.add(BorderLayout.EAST, componentName); • Tương tự cho “West”, “South”, “North”, “Center” Click for Demo GUI Slide 34/57 17 5.7.4- GridLayout • Bố trí component thành lưới rows dịng, cols cột Lưới 4x4 Lưới 3x2 Lưới 1x4 Lưới 1x4 GUI Slide 35/57 GridLayout Constructor GridLayout() Tạo grid layout mặc ñịnh 1x1 GridLayout(int rows, int cols) Tạo grid layout rows x cols GridLayout(int rows, int cols, int hgap, int vgap) Click for Demo GUI Slide 36/57 18 5.7.5- GridBagLayout • Layout dạng lưới cho phép component chiếm số ô kề theo chiều • Hình Empoyee Info sau GridBagLayout 6x4, label bên trái chiếm 1ô, textbox chiếm ô ngang Dòng “Sex” chiếm ô ngang, checkbox chiếm ngang Các thí dụ khác GUI Slide 37/57 Class java.awt.GridBagLayout • Constructors: GridBagLayout() • Áp đặt GridBagLayout cho container: GridBagLayout gb= new GridBagLayout(); FrameName.setLayout(gb); PanelName.setLayout(gb); Viết ngắn gọn: FrameName.setLayout(new GridBagLayout()); PanelName.setLayout(new GridBagLayout()); GUI Slide 38/57 19 class GridBagConstraints • Làm để đưa component vào vị trí trải dài nhiều kề nhau? • component vào vị trí trải dài nhiều ô kề “ràng buộc” component vào ô Một ñối tượng thuộc lớp GridBagConstraints ñảm nhiệm việc GUI Slide 39/57 class GridBagConstraints • Properties – Đa số static data int gridx, gridy : ô ñặt component vào int gridwidth, gridheight : số ô phủ theo chiều thêm component vào ô double weightx, weighty : Khoảng hở lưới, mặc ñịnh int anchor : Vị trí ñặt component, mặc ñi6nh CENTER, static int ñược khai báo sẵn: GridBagConstraints.NORTH, EAST,WEST, SOUTH, NORTHEAST, SOUTHEAST, NORTHWEST, SOUTHWEST int fill: Xác định kiểu đặt component có kích thước lớn hơm đặt vào Các dùng: GridBagConstraints.NONE, HORIZONTAL, VERTICAL, BOTH Insets insets : Đặc tả khoảng hở phần tử ñược ñưa vào, mặc ñịnh int ipadx, ipady: Khoảng ñộn (số pixel trống) bên phần tử theo chiều Mặc ñịnh Khi vẽ phần tử, thêm 2*ipadx 2*ipady vào chiều rộng tối thiểu chiều cao tối thiểu phần tử GUI Slide 40/57 20 class GridBagConstraints • Constructor: GridBagConstraint() // tạo object với liệu mặc ñịnh GridBagConstraints(int gridx, int gridy, int gridwidth, int gridheight, double weightx, double weighty, int anchor, int fill, Insets insets, int ipadx, int ipady) • Thao tác với GridBagConstraint object static data • Làm kết hợp GridBagConstraints với GridBagLayout? GridBagLayout gbLayout = new GridBagLayout(); GridBagConstraints gbc = new GridBagConstraints(); gbLayout.setConstraints(gbc); GUI Slide 41/57 class GridBagConstraints Method sau ñây thêm component c vào vị trí (row,col) kéo tràn dọc nrow tràn ngang ncol Trong gbc GridBagConstraints gbc GridBagLayout void addComponent(Component c,int row, int col, int nrow, int ncol) { gbc.gridx= col; gbc.gridy=row; // ñịnh vị ô thao tác gbc.gridwidth=ncol; gbc.gridheight=nrow; // ñịnh vùng tràn // ràng buộc c vào lưới thông qua gbc gb.setConstraints(c,gbc); add(c); } Click for Demo GUI Slide 42/57 21 5.7.6- CardLayout • Bố trí component thành lớp lưng qn (card) • Thường dùng Panel để chứa component • Tại thời điểm có panel hành (qn cùng) • Có thể chuyển qua lại Panel GUI Slide 43/57 CardLayout • Cách tạo GUI với card layout panel với Layout1 + components Main panel Frame với CardLayout Cơ chế ñiều khiển panel2 với Layout2 + components GUI Slide 44/57 22 CardLayout • CardLayout Constructors: CardLayout() CardLayout(int hgap, int vgap) • Đưa panel vào panel cha FatherPanel.add (sonPanel); FatherPanel.add (“Alias”,sonPanel); • Chọn panel hiển thị Card.first(FatherPanel); Click for Demo Card.last(FatherPanel); Card.next(FatherPanel); Card.previous(FatherPanel); Card.show( FatherPanel, “Alias_of_sonPanel”); GUI Slide 45/57 5.7.7- Layout phức tạp • Có thể phải kết hợp nhiều Layout GUI • Chia GUI thành nhiều Panel, panel Layout riêng Panel p1, lưới 3x2 Panel p2, lưới 1x4 Panel p3, lưới 1x4 Panel p4 Click for Demo GUI Slide 46/57 23 5.8- Hướng dẫn tạo GUI cho ứng dụng • GUI khuynh hướng ứng dụng Nhờ GUI, giao diện với người sử dụng đẹp có hội kiểm tra liệu nhập trước chuyển giao vào biến Ta nói “tách biệt chế điều khiển chương trình liệu) • User GUI Biến GUI Slide 47/57 Hướng dẫn tạo GUI: Chọn components • Bài tốn Dữ liệu nhập/xuất Các tác vụ Chọn component cho việc nhập/xuất Mỗi tác vụ nút lệnh Đối tượng Dữ liệu Chuỗi nhập dòng TextField Chuỗi nhiều dòng TextArea Chọn nhiều chuỗi Choice Chọn Yes/No (nhiều) Checkbox Chọn Yes/No (1/n) CheckboxGroup + Checkbox Dữ liệu xuất dòng Label, TextField-cấm nhập Dữ liệu xuất nhiều dòng TextArea – cấm nhập Chuỗi nhập + xuất TextField/TextArea GUI Slide 48/57 24 Hướng dẫn tạo GUI: Chọn Layout • Các sở chọn Layout Thân thiện :Ưu tiên tạo Layout giống mẫu hồ sơ mà user thường dùng Trật tự nhập liệu tự nhiên toán Nếu GUI phức tạp phân bổ component vào nhiều panel, panel có layout khác • Thói quen tốt ñặt tên ñối tượng Dùng tiếp ñầu ngữ txt cho TextField, lbl cho Label, chk cho Checkbox, btn cho Button, GUI Slide 49/57 Một thí dụ: -Phân tích tốn Bài tốn: Xây dựng ứng dụng cho phép làm phép tính +, -, *, / • Dữ liệu nhập: số TextFiled, tên txt1, txt2 • Dữ liệu xuất: Kết qủa phép tính: Label, tên lblResult • tác vụ: Cộng, trừ, nhân, chia Button, tên btnAdd, btnSub, btnMul, btnDiv • lời thuyết minh: Label, tên lbl1, lbl2, lbl3 GUI Slide 50/57 25 Một thí dụ: THiết kế GUI • Hình thức GUI Calculator Label thuyết minh, lbl1, lbl2,lbl3 12 (txt1) First number: Second number: 39 (lblResult) Result: + GridLayout 3x2 27 (txt2) - x / GUI GridLayout 1x4 Slide 51/57 Kết qủa Click for Demo GUI Slide 52/57 26 5.9- Tóm tắt • GUI- Graphic User Interface • GUI khuynh hướng ứng dụng • Nhờ GUI, người lập trình tách điều khiển chương trình liệu chương trình • Gói AWT Java bao gồm tập lớp cho phép người lập trình tạo GUI ứng dụng • Một component đặt GUI user nhìn thấy (visible) hôc khơng nhìn thấy (invisible) thay đổi kích thước (resize) • Frame Panel container thường ñược dùng ñể tạo ứng dụng chạy độc lập (stand-alone application) • Một panel thường dùng để nhóm số components lại với GUI Slide 53/57 Tóm tắt • Các lớp Layout manager giúp bố trí component lên GUI • Trong gói awt, có loại layout khác nhau: FlowLayout, BorderLayout, GridLayout, GridBagLayout,CardLayout • Thiết lập layout cho container hành vi setLayout(aLayout) lớp container • FlowLayout bố cục mặc ñịnh Panel, Applet Các component ñược thêm vào từ xuống dưới, từ trái sang phải • BorderLayout bố cục mặc định Frame Cửa sổ ñược chia thành phần: “East”, “West”, “South”, “North”, “Center” • GridLayout cách bố trí component vào container dạng lưới rows hàng cols cột Các component đưa vào theo thứ tự: dưới, trái phải Các component có kích thước GUI Slide 54/57 27 Tóm tắt • GridBagLayout cách bố trí cho phép component trải rộng nhiều kề nhau.Các component có kích thước khác • Để dùng GridBagLayout, cần có kết hợp GridBagConstraint để “ràng buộc” component vào lưới • CardLayout cách bố trí component số Panel Các panel hình thành chồng (stack) Tại thời điểm có panel hành • Một GUI có bố cục phức tạp phân tích thành nhiều thành phần, thành phần panel có layout riêng • BorderLayout bố cục mặc ñịnh Frame Cửa sổ ñược chia thành phần: “East”, “West”, “South”, “North”, “Center” • GridLayout cách bố trí component vào container dạng lưới rows hàng cols cột Các component đưa vào theo thứ tự: dưới, trái phải GUI Slide 55/57 Tóm tắt • Trình tự thiết kế GUI: (1) Đọc kỹ yêu cầu (2) Xác ñịnh liệu nhập/xuất, chọn ñối tượng phù hợp (3) Xác ñịnh tác vụ, tác vụ nút lệnh (4) Xác ñịnh nội dung thuyết minh, lời thuyết minh label (5) Vẽ đối tượng lên giấy Hình dáng GUI (6) Phân tích hình dáng GUI để xác định số nhóm panel GUI Slide 56/57 28 ... 5. 1- Ơn tập 5. 2- GUI gì? 5. 3- Gói AWT Java 5. 4- Đưa component vào GUI 5. 5- Một chương trình tạo GUI 5. 6- Sử dụng ñối tượng AWT 5. 7- Bố trí phần tử GUI 5. 8- Hướng dẫn tạo GUI cho ứng dụng 5. 9-. .. Slide 51 /57 Kết qủa Click for Demo GUI Slide 52 /57 26 5. 9- Tóm tắt • GUI- Graphic User Interface • GUI khuynh hướng ứng dụng • Nhờ GUI, người lập trình tách điều khiển chương trình liệu chương trình. .. GUI Slide 12 /57 5. 5- Một thí dụ Container Components •3 label, •3 text-field •1 checkboxgroup chứa check-box •4 button GUI Slide 13 /57 5. 6- Sử dụng lớp awt GUI Slide 14 /57 5. 6. 1- Container Component