Prepared by MSc Luong Manh Ba
Tương tác người máy Human Computer Interaction - HCI
Department of Software Engineering Faculty of Information Technology Hanoi University of Technology
TEL: 04-8682595 FAX: 04-8692906 Email: cnpm@it-hut.edu
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 1
Prepared by MSc Luong Manh Ba
Cấu trúc môn học
• 60 tiết LT+ đồ án môn học + bài tập • Cần các kiến thức cơ bản về CNTT, đồ hoạ,
tâm lý nhận thức, công thái học
• Cung cấp những nguyên lý chung về tương
tác người máy
• Cung cấp những kiến thức cần thiết để học các môn chuyên ngành hẹp và áp dụng vào thiết kế, xây dựng, đánh giá phần mềm.
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 2
Prepared by MSc Luong Manh Ba
Cấu trúc môn học (tiếp)
• Nội dung môn học: 3 phần 10 chương I- Phần I Phần cơ sở (foundation) gồm 4 chương:
Chương 0: Tổng quan về HCI Chương I: Tâm lý nhận thức của Con người trong giao tiếp và xử lý Chương II: Nhân tố Máy tính trong tương tác
người máy
Chương III: Các dạng đối thoại trong tương tác người máy (Dialogue styles for HCI)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 3
Prepared by MSc Luong Manh Ba
Cấu trúc môn học (tiếp) II-Phần II Phân tích và thiết kế giao tiếp người
dùng (User Interface Analyse and Design) Chương IV: Các nguyên tắc chính và vòng đời hình sao trong thiết kế giao tiếp Người dùng – Máy tính
Chương V: Mô hình GOM, Keytrock,… (GOM
and Keytrock Models)
Chương VI: Đặc tả yêu cầu người dùng và phân
tích nhiệm vụ Chương VII: Ký pháp đối thoại và thiết kế
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 4
Prepared by MSc Luong Manh Ba
Cấu trúc môn học (tiếp)
III-Phần III Cài đặt và đánh giá tương tác người dùng (Users Interface Implementation and Evaluation ) gồm 2 chương:
Chương VII: Hỗ trợ Cài đặt (Implementation) Chương VIII: Các kỹ thuật đánh giá phần mềm
(Evaluation Techniques) • Đánh giá: Đồ án môn học + Bài tập
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 5
Prepared by MSc Luong Manh Ba
Tài liệu tham khảo (Reference)
[1] Jenny Preece et al: Human-Computer Interaction,
Addison-Wesley, 1994
[2] Dix, Finlay, Abowd and Beale: Human -Computer
Interaction (course and book), Prentice-Hall, second edition, 1993 (http: //www.hcibook.com/hcibook/toc.html) [3] Gary Perlman, Ohio State University: User
Interface
development (course), SEI Curriculum Module, 11-1989
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 6
Prepared by MSc Luong Manh Ba
Tài liệu tham khảo (tiếp)
[4] C.Machgeels: Interfaces Humains- ordinateur (cours),
Département Informatique, ULB, 2001-2002
[5] J.Coutas, Interface Home-ordinareur,
Conception et réalisation, Dunod Paris 1990 (Bá) (Nghiêng về hướng tâm lý khoa học nhận thức)
[6] Andy Downton, Engineering the Human- Computer Interface , McGraw Hill 1992. [7] J.P.Menadier, l’Interface uilisateur pour une
Informatique plus conviale, Dunod Paris 1991.
[8] Sommerville, Software Engineering (chapter 17-
User Interface), Addison 1996 (BM)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 7
Prepared by MSc Luong Manh Ba
Tài liệu tham khảo (tiếp)
[9] Dự thảo ®Ò c¬ng m«n häc HCI- PGS Nguyễn Văn Ba
khoa CNTT.
[10] Bản đề cương HCI (Human Computer Interface -Hiệp
hội CNPM ACM & IEEE ). course CS1 (Use Interface Design and Development) [11] W.Brener, R. Zarnekow, H. Witig: Software
Intelligent Agents. 1998.
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 8
Prepared by MSc Luong Manh Ba
Chương 0: Tổng quan về HCI
0.1. Thuật ngữ và khái niệm 0.2. Người dùng 0.3. Môi trường 0.4 Lĩnh vực liên quan 0.5. Chất lượng 0.6. Phương tiện và công cụ 0.7. Đầu vào 0.8. Đầu ra 0.9. Công cụ (Tools)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 9
Prepared by MSc Luong Manh Ba
0.1 Định nghĩa và khái niệm
• HCI: Human-Computer Interaction • CHI: Computer – Human Interaction • IHO: Interaction Humains Ordinateur • IHM: Interaction Homme Machine • Tương tác người máy
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 10
Prepared by MSc Luong Manh Ba
Định nghĩa (tiếp)
• Không có định nghĩa chính xác .Tuy nhiên có thể dùng
hai định nghĩa: • Định nghĩa 1
Tập các quá trình, đối thoại và các hành động, qua đó ND con người sử dụng và tương tác với MT (Backer & Buxton, 1987).
• Định nghĩa 2
Là một lĩnh vực liên quan đến thiết kế, đánh giá và cài đặt Hệ thống MT tương tác cho con người sử dụng và nghiên cứu các hiện tượng chính xảy ra trên đó (ACMSIGCHI 1992).
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 11
Prepared by MSc Luong Manh Ba
Định nghĩa và vai trò của HCI (tiếp)
Vai trò của HCI: Tạo ra các Hệ Thống an toàn và sử dụng được (Usability) như các Hệ Thống chức năng. Usability: Là khái niệm trong trong HCI có thể hiểu là làm cho HT dễ học và dễ dùng.
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 12
Prepared by MSc Luong Manh Ba
0.2 Người dùng
• Trước đây:
- Là các kỹ thuật viên, chuyên gia
• Hiện nay: Đa dạng
- Người dùng đầu cuối (có ít kiến
thức về tin học)
- Các kỹ thuật viên, chuyên gia - Yêu cầu đòi hỏi cao
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 13
Prepared by MSc Luong Manh Ba
0.3 Môi trường làm việc
• Trước đây:
- Máy tính lớn, không nối mạng - Người sử dụng máy tính không phải là người thao tác, điều khiển máy tính. - Môi trường: văn bản dạng text
• Ngày nay :
- Máy tính cá nhân, mạng, internet - Môi trường: đa dạng, văn bản, đồ hoạ, trực quan
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 14
Prepared by MSc Luong Manh Ba
0.4 Lĩnh vực liên quan
• Trước đây : Phương pháp tính • Ngày nay:
- Phương pháp tính, tính toán ký hiệu, Soạn thảo Văn bản, xử lý đồ hoạ, hình ảnh, âm thanh, đa phương tiện. - §an quyện dữ liệu, lệnh và kết quả Đối thoại (Dialogue),
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 15
Prepared by MSc Luong Manh Ba
0.4 Lĩnh vực liên quan (tiếp)
4 thành phần chính: Môi trường, Con người, Máy tính và Quá trình phát triển (ACM SIGCHI 1992)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 16
Prepared by MSc Luong Manh Ba
Môi trường (Use and Context)
• Sử dụng những gì mà máy tính cung cấp được gọi là “ứng dụng”. Tổ chức xã hội, công việc, kinh doanh tương tác với ứng dụng đó
• Lĩnh vực ứng dụng (Application Area): phân loại
các ứng dụng và các ứng dụng đặc biệt
- cá nhân, nhóm - giao tiếp hướng văn bản - giao tiếp hướng truyền thông - Môi trường thiết kế, lập trình, CAD/CAM - Trợ giúp trực tuyến, điều khiển HT liên tục
• Sự thích nghi Người-Máy
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 17
Prepared by MSc Luong Manh Ba
Con người
• Mục đích: Hiểu con người như là một Bộ xử lý
thông tin ▪ Cảm nhận ▪ Lưu trữ (các loại bộ nhớ) ▪ Xử lý
• Ngôn ngữ, giao tiếp và tương tác
▪ Các sắc thái ngôn ngữ: cú pháp , ngứ nghĩa ▪ Các mô hình hình thức của ngôn ngữ
• Công thái học
▪ Bố trí hiện và điều khiển, quan hệ ▪ Nhận thức của con người và giới hạn,…
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 18
Prepared by MSc Luong Manh Ba
Máy tính và kiến trúc tương tác (Computer System and Interface Architecture)
• Các thiết bị vào ra • Các kỹ thuật đối thoại; vào, ra và tương tác • Các kiểu đối thoại • Đồ hoạ máy tính • Kiến trúc đối thoại
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 19
Prepared by MSc Luong Manh Ba
Qui trình phát triển
• Bao gồm thiết kế và kỹ thuật • Các tiếp cận thiết kế • Kỹ thuật và công cụ cài đặt • Kỹ thuật đánh giá • Hệ thống mẫu và Case studies
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 20
Prepared by MSc Luong Manh Ba
0.5 Chất lượng
• Trước đây: Trạng thái ứng xử đúng với dữ
liệu đúng
• Tiếp theo: Trạng thái đúng với dữ liệu có
thể sai
• Ngày nay: Thân thiện, sinh động, dễ
dùng
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 21
Prepared by MSc Luong Manh Ba
0.6 Phương tiện và công cụ
• Hai thành phần cơ bản: ▪ Con người và máy tính ▪ Phương tiện: đối thoại => Muốn làm tương tác phải Hiểu đối tượng & Con người
Y/c
Hoạt động
T/L
Đối thoại
Trao đổi giữa các môđun
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 22
Prepared by MSc Luong Manh Ba
Phương tiện và công cụ (tiếp)
• Công cụ: Visual Basic, Jbuilder của Java 1.4
Chú ý Thành phần Swing là phần mới của Java để xây dựng giao tiếp đồ hoạ: menu, các hộp công cụ như Combo, List, Dialogue, . . .
• Nếu SV chưa học cần giới thiệu khoảng 10 tiết;
nếu không thì chỉ cần nêu khoảng 1 tiết.
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 23
Prepared by MSc Luong Manh Ba
Thành phần Swing của JBuilder
• Java là NNLT hướng đối tượng, ra đời 5 /1995 do nhóm chuyên gia đứng đầu là James Goshing thuộc công ty Sun Microsystems thiết kế. Năm 1991 lấy tên là Oak, năm 1995 chính thức lấy tên Java, và được thiết kế lại để xây dựng chương trình ứng dụng Internet. Ngoài ứng dụng Web, Java còn có đủ đặc tính lập trình để thiết kế chương trình ứng dụng độc lập.
• Độc lập với hệ nền, do vậy có thể chạy trên bất cứ máy tính nào có hệ điều hành hỗ trợ Java Virtual Machine. • Là ngôn ngữ có tính phân tán với khả năng nối mạng
cài sẵn .
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 24
Prepared by MSc Luong Manh Ba
Thành phần Swing (tiếp)
• Các bản Java trước (<1.2), các thành phần đồ hoạ được
xây dựng trong thư viện AWT (Abstract Windows Toolkit). AWT là thư viện hữu ích trong thiết kế chương trình ứng dụng GUI nhưng không dùng để thiết kế những Project toàn diện.
• Do AWT phụ thuộc nhiều vào hệ nền, nên từ bản Java 2 trở đi các thành phần giao diện người dùng (UI) thay thế bằng tập hợp thành phần linh hoạt, đa năng và mạnh mẽ: thành phần Swing.
• Swing.* là gói thuộc Javax chứa thành phần UI dạng
đồ hoạ.
• Swing ít phụ thuộc vào hệ đích hơn và tài dần dần thay
thế cho AWT.
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 25
Prepared by MSc Luong Manh Ba
Thành phần Swing (tiếp)
• Swing chỉ thay thế UI như Button, Textfield, TextArea;
Một số thành phần khác: Graphics, Color, Font, FontMetrics, LayoutManager vẫn nhờ AWT. Nó thừa kế các lớp trong thư viện AWT.
• Các thành phần Swing có tên gọi kèm theo tiếp đầu ngữ J, gồm trên 250 lớp. Swing là giải pháp toàn diện để thiết kế các trình ứng dụng GUI trung tâm.
• Để giới thiệu về Swing ta có thể quy về các thành phần
chính như sau : - JComponent là lớp trên của tất cả các thành phần Swing lightweight, bản thân nó thì được thừa kế từ lớp Container trong sơ đồ phân cấp đồ hoạ Java.
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 26
Prepared by MSc Luong Manh Ba
Sơ đồ phân cấp của Swing
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 27
Prepared by MSc Luong Manh Ba
Java Swing (tiếp)
Swing UI có thể chia thành bốn thành phần sau: - javax.swing.AbstractButton. Lớp trừu tượng, chứa định nghĩa các nút: JButton, JToggleButton, CheckBox, JRadioButton, JMenuItem và JMenu. - javax.swing.JtextComponent: chứa các thành phần văn bản:Jlabel, Jlist, JcomboBox, JmenuBar, Jpanel, JoptionPane, JscrollBar, JscrollPane, JfileChooser và gồm các lớp : JpoPupMenu, JtoolBar, JlayeredPane, JrootPane, JprogressBar, JtoolTip, JtabbedPane, Jtree, JinternalFrame, Jslider, Jtable, Jpane, Jseparator, JsplitPane, . . .
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 28
Prepared by MSc Luong Manh Ba
Java Swing (tiếp)
- Các thành phần Swing Heavyweight:
+ Japplet (javax.swing.Japplet): Lớp tạo tiểu trình + Jframe (javax.swing.Jframe): Là cửa sổ không lồng bên trong cửa sổ khác, là cơ sở chính chứa các thành phần UI. Khi muốn thêm một thành phần thì không trực tiếp thêm vào Jframe mà phải thêm vào JrootPane - thành phần con của Jframe. + JDialog: Là dạng cửa sổ tạm, được bật lên nhằm thu nhận thông tin từ ND, hoặc thông báo mỗi khi có biến cố xảy ra.
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 29
Prepared by MSc Luong Manh Ba
Java Swing (tiếp)
- Ngoài hai thành phần trên thì Swing còn chứa
các thành phần khác như sau. + javax.swing.border: Lớp chứa tất cả các kiểu đường viền + javax.swing.colorchooser: Lớp và giao diện hỗ trợ cho các thành phần. JcolorChooser dùng để cho phép lựa chọn màu. + javax.swing.event: Gói đặc biệt chứa các loại biến cố và các đối tượng lắng nghe. Các thành phần Swing hỗ trợ các biến cố và đối tượng lắng nghe được định nghĩa trong java.awt.event và java.beans .
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 30
Prepared by MSc Luong Manh Ba
Java Swing (tiếp)
khiển
điều
cấp
các
+ javax.swing.filechooser: Thành phần hỗ trợ cho JfileChooser. + javax.swing.plaf: Lớp chứa các kiểu nhìn và cảm nhận (look–and–feel) từ sơ đồ phân cấp đồ hoạ API, dùng để định nghĩa các thủ tục thành phần giao diện người dùng. Hầu hết các lớp này được chứa trong gói trừu tượng, chúng được thiết kế chỉ dành cho các nhà phát triển. Một số lớp con như sau:javax.swing.table - Jtable, Cung javax.swing.text: Chứa các lớp và giao diện được sử dụng bởi các thành phần văn bản.
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 31
Prepared by MSc Luong Manh Ba
Thiết kế các thành phần giao diện với Swing
• Chương trình đồ hoạ Java được điều khiển bởi biến cố. Khi chương trình vận hành tức là tương tác với ND thì tất mọi biến cố chi phối việc thi hành chương trình . Biến cố phát sinh từ các tác động bên ngoài của con người như: bấm chuột, nhấn phím . . . , hay từ HĐH. Các lớp biến cố được chứa trong gói Java.awt.event ngoại trừ một số biến cố như : EventListenerList, ListSlectionEvent, chứa trong gói Javax.Swing.event . • Swing quản lý các đối tượng lắng nghe thông qua
ListenerList, nó được gọi từ EventListenerList.
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 32
Prepared by MSc Luong Manh Ba
Thiết kế các thành phần giao diện với Swing (tiếp)
• Khi nhận được biến cố phát sinh do tác động lên các đối tượng nguồn thì đối tượng lắng nghe (listener) đã được đối tượng nguồn đăng ký trước sẽ nhận và xử lý biến cố dựa theo chương trình đã lập. Giữa đối tượng nguồn và đối tượng lắng nghe luôn liên lạc với nhau thông qua phương thức xử lý biến cố (handler) đặt trên đối tượng lắng nghe .
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 33
Prepared by MSc Luong Manh Ba
Một số biến cố và phương thức xử lý
1- ActionEvent + Nguyên nhân: Nhấp nút lên đối tượng, trường văn bản ,... + Giao diện lắng nghe : ActionListener + Phương thức XL:actionPerformed(ActionEvent e) 2- ItemEvent + Nguyên nhân: Chọn khoản mục mới, nhấp ô chọn + Giao diện lắng nghe: ItemListener + Phương thức xử lý:ItemStateChanged(ItemEvent e)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 34
Prepared by MSc Luong Manh Ba
Một số biến cố và phương thức xử lý (tiếp)
3- WindowEvent + Nguyên nhân: Mở, đóng, thu nhỏ thành biểu tượng
+ Giao diện lắng nghe: WindowListener + Phương thức xử lý:
i)window Closing(WindowEvent e) ii)windowOpened(WindowEvent e) iii)windowIconified(WindowEvent e) iv)windowDeiconified(WindowEvent e) v)windowClosed(WindowEvent e) vi)windowActivated(WindowEvent e)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 35
Prepared by MSc Luong Manh Ba
Một số biến cố và phương thức xử lý (tiếp)
vii)windowDeactivated(WindowEvent e) 4- ContainerEvent + Nguyên nhân: Bổ sung hoặc loại bỏ thành phần khỏi vật chứa
+ Giao diện lắng nghe: ContainerListener + Phương thức xử lý :
i)componentAdded(ContainerEvent e) ii)componentRemoved(ContainerEvent e)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 36
Prepared by MSc Luong Manh Ba
Một số biến cố và phương thức xử lý (tiếp)
5- ComponentEvent + Nguyên nhân: Di chuyển, định kích cỡ, dấu hoặc
hiện lại Component
+ Giao diện lắng nghe: ComponentListener + Phương thức xử lý :
i)componentMoved(ComponentEvent e) ii)componentHidden(ComponentEvent e) iii)componentResized(ComponentEvent e) iv)componentShown(ComponentEvent e)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 37
Prepared by MSc Luong Manh Ba
Một số biến cố và phương thức xử lý (tiếp)
6- FocusEvent (mở rộng gói java.awt.ComponentEvent) + Nguyên nhân: Dời tiêu điểm đến/ ra khỏi thành phần :
Component
+ Giao diện lắng nghe : FocusListener + Phương thức xử lý :
i)focusGained(FocusEvent e) ii)focusLost(FocusEvent e)
7- TextEvent + Nguyên nhân:Thay đổi văn bản(JtextComponent) + Giao diện lắng nghe : TextListener
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 38
Prepared by MSc Luong Manh Ba
Một số biến cố và phương thức xử lý (tiếp)
: KeyListener
+ Phương thức xử lý : textValueChanged(TextEvent e) 8- KeyEvent + Nguyên nhân: Thả hoặc nhấn phím Component + Giao diện lắng nghe + Phương thức xử lý :
i) KeyPressed(KeyEvent e) ii) KeyReleased(KeyEvent e) iii)KeyTyped(KeyEvent e)
9- MouseEvent + Nguyên nhân:Di chuyển chuột Component
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 39
Prepared by MSc Luong Manh Ba
Một số biến cố và phương thức xử lý (tiếp)
+ Giao diện lắng nghe: có hai giao diện lắng nghe là
MouseListener và MouseMotionListener
+ Phương thức xử lý.
- Với MouseListener :
i) MousePressed(MouseEvent e) ii) MouseReleased(MouseEvent e) iii) MouseEntered(MouseEvent e) iv)MouseExited(MouseEvent e) v)MouseClicked(MouseEvent e)
-Với MouseMotionListener : i) MouseDragged(MouseEvent e)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 40
Prepared by MSc Luong Manh Ba
Một số biến cố và phương thức xử lý (tiếp)
ii) MouseMoved(MouseEvent e) 10- AdjustmentEvent + Nguyên nhân: Di chuyển thanh cuốn JscrollBar : AdjustmentListener + Giao diện lắng nghe + Phương thức xử lý
:
adjustmentValueChanged(AdjustmentEvent e)
11- ListSelectionEvent + Nguyên nhân: Chọn khoản mục: Jlist + Giao diện lắng nghe: ListSelectionListener + Phương thức xử lý
:
ValueChanged(ListSelectionListener e)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 41
Prepared by MSc Luong Manh Ba
Thiết kế vùng chứa
• Các thành phần để thiết kế vùng chứa sau: Jframe,
tạo khung cơ sở chứa các thành phần Jpanel
Jpanel, Japplet. Với: - Jframe: hoặc các thành phần giao diện. - Japplet: tạo tiểu trình có thể chứa các Jframe - Jpanel: là các thành phần trực tiếp dùng để biểu diễn các nút, nhãn, văn bản, . . ., được đặt bám vào các Jframe/Japplet. Jpanel có thể được đặt lồng nhau.
- Ngoài các thành phần dùng để thiết kế, Swing còn thừa kế các trình quản lý các thành phần giao diện (layout manager) nhằm đạt hiệu quả cao như: FlowLayout, GridLayout, GridBagLayout, BorderLayout, ...
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 42
Prepared by MSc Luong Manh Ba
Sơ đồ phân cấp của Jframe
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 43
Prepared by MSc Luong Manh Ba
Lớp JrootPane (javax.swing.JrootPane)
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 44
Prepared by MSc Luong Manh Ba
Lớp quản lý bố cục
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 45
Prepared by MSc Luong Manh Ba
Một vài thí dụ dùng Swing để xây dựng giao tiếp UI
H×nh 1: Cöa sæ so¹n th¶o chÝnh © Dept. of SE, 2002
HUT, Falt. of IT HCI - One. 46
Prepared by MSc Luong Manh Ba
Thí dụ dùng Swing để xây dựng giao tiếp UI (tiếp)
Hỡnh 2: Sử dụng jFileChooser
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 47
Prepared by MSc Luong Manh Ba
Thí dụ dùng Swing để xây dựng giao tiếp UI (tiếp)
Hình 3: Sử dụng JColorChooser
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 48
Prepared by MSc Luong Manh Ba
Môi trường Swing khi thiết kế UI
Thiết kế 3 phím lệnh với Jbutton trên JToolBar
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 49
Prepared by MSc Luong Manh Ba
Một vài đoạn mã lệnh cho các sự kiện
void fileOpen() {
if (!okToAbandon()) {return;}
if (JFileChooser.APPROVE_OPTION == jFileChooser1.showOpenDialog(this)) { openFile(jFileChooser1.getSelectedFile().get Path()); } this.repaint();
} Đoạn mã lệnh cho sự kiện khi chọn Open trên Menu
hay nhấn biểu tượng Open trên ToolBar
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 50
Prepared by MSc Luong Manh Ba
Mã lệnh cho thủ tục mở File
void openFile(String fileName) {
try {File file = new File(fileName);
int size = (int)file.length(); int chars_read = 0; FileReader in = new FileReader(file); char[] data = new char[size]; while(in.ready()) {
chars_read += in.read(data,
chars_read, size - chars_read);}
0,
in.close(); jTextArea1.setText(new String(data, chars_read)); this.currFileName = fileName; this.dirty = false; statusBar.setText("Opened"+fileName);
updateCaption();} catch (IOException e) { statusBar.setText("Error opening "+fileName);}}
HUT, Falt. of IT © Dept. of SE, 2002 HCI - One. 51
