CHƯƠNG 0 TỔNG QUAN về HCI

Các thành phần Swing hỗ trợ các biến cố và đối tượng java .awt.event và java.beans... + 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,

HUT, Falt of IT  Dept of SE, 2002 HCI - One 1

0.1 Thuật ngữ và khái niệm

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 3

Đị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 5

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

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 7

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),

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 9

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

• 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 11

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 13

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/cT/L

Đối thoại

Hoạt động

Trao đổi giữa các

môđun

HUT, Falt of IT  Dept of SE, 2002 HCI - One 15

• 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.

• 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 17

• 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.

• 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

HUT, Falt of IT  Dept of SE, 2002 HCI - One 19

Java Swing (tiếp)

Swing UI có thể chia thành bốn thành phần sau:

chứa định nghĩa các nút: JButton, JToggleButton, CheckBox, JRadioButton, JMenuItem và JMenu

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,

HUT, Falt of IT  Dept of SE, 2002 HCI - One 21

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.

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

java awt.event và java.beans

HUT, Falt of IT  Dept of SE, 2002 HCI - One 23

Java Swing (tiếp)

+ 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 - Cung cấp các điều khiển Jtable,

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.

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 25

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

đượ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 27

iv)windowDeiconified(WindowEvent e)

v)windowClosed(WindowEvent e)

vi)windowActivated(WindowEvent e)

HUT, Falt of IT  Dept of SE, 2002 HCI - One 29

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 31

Một số biến cố và phương thức xử lý

(tiếp)

+ 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 : KeyListener

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)

HUT, Falt of IT  Dept of SE, 2002 HCI - One 33

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

+ Giao diện lắng nghe : AdjustmentListener

+ 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)

Thiết kế vùng chứa

• Các thành phần để thiết kế vùng chứa sau: Jframe,

Jpanel, Japplet Với:

hoặc các thành phần giao diện.

- 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 35

Sơ đồ phân cấp của Jframe

Lớp JrootPane

(javax.swing.JrootPane)

HUT, Falt of IT  Dept of SE, 2002 HCI - One 37

Lớp quản lý bố cục

Một vài thí dụ dùng Swing để xây

dựng giao tiếp UI

HUT, Falt of IT  Dept of SE, 2002 HCI - One 39

Thí dụ dùng Swing để xây dựng giao

tiếp UI (tiếp)

Hỡnh 2: Sử dụng jFileChooser

Thí dụ dùng Swing để xây dựng giao

tiếp UI (tiếp)

HUT, Falt of IT  Dept of SE, 2002 HCI - One 41

Môi trường Swing khi thiết kế

UI

Thiết kế 3 phím lệnh với Jbutton trên JToolBar

Một vài đoạn mã lệnh cho các

HUT, Falt of IT  Dept of SE, 2002 HCI - One 43

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];