Bài giảng Tin học đại cương: Chương 4 - ĐH Bách Khoa

Chương 4 trình bày về Qui trình thiết kế trực quan giao diện của ứng dụng. Nội dung cụ thể của chương này gồm có: Dự án và ứng dụng, tạo/xóa đối tượng giao diện, hiệu chỉnh giá trị thuộc tính của đối tượng giao diện, tạo menubar, tạo Toolbar, tạo và viết thủ tục xử lý sự kiện.

Trang 1

Khoa Công ngh ệ Thông tin

4.2 T ạ o/xóa đố i t ượ ng giao di ệ n

4.3 Hi ệ u ch ỉ nh giá tr ị thu ộ c tính c ủ a đố i t ượ ng giao di ệ n

4.4 T ạ o menubar

4.5 T ạ o Toolbar

4.6 T ạ o và vi ế t th ủ t ụ c x ử lý s ự ki ệ n

Trang 2

ứng dụng là qui trình tạo dự án, thêm/bớt, hiệu chỉnh từng phần tử trong

dự án

Thao tác để thực hiện các tác vụ trên khá giống với các thao tác mà ta đã

biết trên hệ thống file thứ bậc của máy tính

Ch ươ ng 4: Qui trình thi ế t k ế tr ự c quan giao di ệ n c ủ a ứ ng d ụ ng

Trang 3

d ụ ng, ta có nhi ề u cách khau nhau:

Ch ọ n menu Start.Programs.Microsoft Visual Basic

6.0.Microsoft Visual Basic 6.0

Ấ n kép chu ộ t vào icon shortcut c ủ a VB trên màn hình desktop (ta

ph ả i t ạ o tr ướ c icon shortcut này)

Ch ọ n menu Start.Run, r ồ i nh ậ p hàng l ệ nh ch ạ y ứ ng d ụ ng, thí d ụ

nh ư "c:\Program Files\Microsoft Visual Studio\VB98\VB6.exe"

Dùng trình qu ả n lý h ệ th ố ng file WE, duy ệ t đế n th ư m ụ c ch ứ a file

ch ươ ng trình VB (thí d ụ c:\Program Files\Microsoft Visual Studio\VB98), ấ n kép vào file ch ươ ng trình VB6.exe

Sau khi VB đượ c kh ở i độ ng, ta th ườ ng th ấ y c ử a s ổ màn hình nh ư

sau:

Trang 4

Trang 5

Tr ườ ng Đ H Bách Khoa Tp.HCM

Môn: Tin h ọ c

Slide 97

T ạ o m ớ i d ự án

C ử a s ổ New Project c ủ a VB có ba th ẻ (Tab):

New: t ạ o m ớ i m ộ t d ự án (tab này đượ c ch ọ n default)

Existing: M ở 1 d ự án đ ã có s ẵ n trên máy (d ự án c ũ nào đ ó)

Recent: M ở 1 d ự án trong n d ự án g ầ n hi ệ n t ạ i nh ấ t

V ớ i tab New đượ c ch ọ n, b ạ n có th ể t ạ o 1 d ự án theo 1 lo ạ i nào đ ó,

nh ư ng đố i v ớ i các ứ ng d ụ ng thông th ườ ng ta s ẽ dùng lo ạ i d ự án

"Standard EXE" Ấ n kép vào icon "Standard EXE" để t ạ o m ớ i d ự án

t ươ ng ứ ng 1 form m ớ i đượ c t ạ o ra t ự độ ng để b ạ n có th ể thi ế t k ế

tr ự c quan form giao di ệ n này

Qui trình thi ế t k ế giao di ệ n là tu ầ n t ự thi ế t k ế t ừ ng form theo yêu

c ầ u, n ế u mu ố n t ạ o m ớ i 1 form khác (hay 1 đố i t ượ ng nào đ ó vào d ự

án), b ạ n ấ n kép chu ộ t vào c ử a s ổ Project, d ờ i chu ộ t đế n menu

"Add", r ồ i ch ọ n m ụ c "Form" trong danh sách

Trang 6

Thí d ụ v ề form thi ế t k ế : MiniCalculator

Trang 7

Môn: Tin h ọ c

Slide 99

4.2 T ạ o 1 đố i t ượ ng giao di ệ n trên form

Để hiển thị và làm việc trực quan với 1 form, ấn kép chuột vào mục

tên form trong cửa sổ Project

Để tạo mới 1 đối tượng giao diện trong form, dùng chuột chọn icon

tương ứng với đối tượng trong cửa sổ Toolbox rồi vẽ đối tượng ở vị

trí và kích thước mong muốn trên form

Bạn cũng có thể tạo mới đối tượng giao diện dùng cơ chế sinh sản

vô tính: chọn đối tượng đã có, ấn button Copy trên Toolbar rồi ấn button Past trên Toolbar, đối tượng mới sinh ra giống y như đối

tượng có sẵn (nên đặt lại tên khác bằng cách chọn button "No" trong

hộp thoại yêu cầu sau khi ấn icon Past) Đây là 1 trong nhiều cách để

tạo nhiều đối tượng có kích thước giống hệt nhau

Thí dụ slide sau miêu tả trạng thái của form sau khi ta vẽ được 1 textbox

hiển thị số và 5 button bên trái nhất của máy tính

Trang 8

4.3 Thi ế t l ậ p giá tr ị cho các thu ộ c tính

Trang 9

Thi ế t l ậ p giá tr ị cho các thu ộ c tính (tt)

Trang 10

Môn: Tin h ọ c

Slide 102

N ế u v ẽ b ằ ng tay tu ầ n t ự các đố i t ượ ng thì khó lòng đả m b ả o kích th ướ c c ủ a chúng

b ằ ng nhau, do đ ó b ạ n nên dùng c ơ ch ế sinh s ả n vô tính (Copy-Paste) Tuy nhiên

n ế u l ỡ t ạ o b ằ ng tay các đố i t ượ ng r ồ i thì để làm kích th ướ c nhi ề u đố i t ượ ng gi ố ng

y nhau, b ạ n ch ọ n các đố i t ượ ng r ồ i ch ọ n menu Format.Make Same Size.Both (b ằ ng kích th ướ c c ủ a đố i t ượ ng đượ c ch ọ n cu ố i cùng)

Cân ch ỉ nh kích th ướ c các đố i t ượ ng

Trang 11

b ạ n ch ọ n các đố i t ượ ng r ồ i ch ọ n menu Format.Vertical Spacing.Make Equal (c ố

đị nh v ị trí 2 đố i t ượ ng xa nh ấ t theo chi ề u d ọ c r ồ i ch ỉ nh d ọ c các đố i t ượ ng còn l ạ i)

Đồ ng ch ỉ nh v ị trí các đố i t ượ ng

Trang 12

Trang 13

Môn: Tin h ọ c

Slide 105

Danh sách thu ộ c tính các đố i t ượ ng

Caption = , Name = cmdMemStatus

Caption = +, Name = cmdAdd

Caption = -, Name = cmdSub

Caption = *, Name = cmdMul

Caption = /, Name = cmdDiv

Caption = +/-, Name = cmdPosNeg

Caption = , Name = cmdPoint

Caption = =, Name = cmdEqual

Caption = 1/x, Name = cmd1x

Caption = %, Name = cmdPercent

Caption = sqrt, Name = cmdSqrt

Caption = C, Name = cmdC

Caption = CE, Name = cmdCE

Caption = Backspace, Name = cmdBack

Text = 0., Name = txtDisplay

Ch ươ ng 4: Qui trình t ủ hi ế t k ế tr ự c quan giao di ệ n c ủ a ứ ng d ụ ng Danh sách giá tr ị các thu ộ c tính đượ c thi ế t l ậ p cho các đố i t ượ ng (s ẽ đượ c tham

kh ả o b ở i code ch ươ ng trình đượ c vi ế t sau):

Trang 14

Môn: Tin h ọ c

Slide 106

4.4 Thi ế t k ế menu bar cho form giao di ệ n

Gi ả s ử form MiniCalculator c ầ n có 1 h ệ th ố ng menu nh ư sau:

Để tạo menu bar cho 1 form nào

đó, ta hiển thị cửa sổ chứa form

đó (ấn kép mục tên form trong

cửa sổ Project chứa cây thứ bậc

các phần tử) rồi chọn menu

Tools.Menu Bar Cửa sổ trong

slide sau sẽ hiện lên:

Ch ươ ng 4: Qui trình t ủ hi ế t k ế tr ự c quan giao di ệ n c ủ a ứ ng d ụ ng

Trang 15

Môn: Tin h ọ c

Slide 107

Dùng Menu Editor để thi ế t k ế menu bar

Button Insert cho phép chèn 1 m ụ c

tr ố ng vào tr ướ c m ụ c đượ c ch ọ n hi ệ n

đượ c ch ọ n vô thêm hay ra b ớ t 1 c ấ p

trong h ệ th ố ng cây phân c ấ p menu

Trang 16

Môn: Tin h ọ c

Slide 108

Dùng Menu Editor để thi ế t k ế menu bar (tt)

D ự a vào đặ c t ả menu bar c ủ a slide tr ướ c đ ây, nh ậ p l ầ n l ượ t các m ụ c sau:

Caption = File, Name = mnuFile

Caption = Copy, Name = mnuFileCopy, ấ n button → để vô thêm 1 c ấ p

Caption = Paste, Name = mnuFilePaste

Caption = View, Name = mnuView, ấ n button ← để ra 1 c ấ p

Caption = Standard, Name = mnuViewStand, ấ n button → để vô thêm 1

c ấ p

Caption = Scientific, Name = mnuViewScien

Caption = -, Name = mnuViewBar

Caption = Digital grouping, Name = mnuViewDigital

Caption = Help, Name = mnuHelp, ấ n button ← để ra 1 c ấ p

Caption = Help Topics, Name = mnuHelpTopics, ấ n button → để vô thêm 1

c ấ p

Caption = -, Name = mnuHelpBar

Caption = About MiniCalculator, Name = mnuHelpAbout

Trang 17

Môn: Tin h ọ c

Slide 109

Dùng Menu Editor để thi ế t k ế menu bar (tt)

Sau khi đặ c t ả xong menu, c ử a

s ổ menu editor có d ạ ng nh ư

sau L ư u ý lúc này b ạ n v ẫ n

ch ư a th ấ y menu 1 cách tr ự c

quan:

Trang 18

Trang 19

4.5 Thi ế t k ế Toolbar cho form giao di ệ n

m ớ i

đượ c thêm vào Tool- box

Trang 20

Môn: Tin h ọ c

Slide 112

Qui trình t ạ o Toolbar c ủ a form

Toolbar là 1 c ử a s ổ ch ứ a nhi ề u button (icon), m ỗ i button cho phép

t ừ ng button trong Toolbar B ạ n có th ể dùng trình "Screen Capture"

c ắ t các icon có s ẵ n c ủ a ứ ng d ụ ng đ ang ch ạ y và dán vào vùng

so ạ n th ả o ả nh c ủ a trình so ạ n th ả o đồ h ọ a Sau khi so ạ n xong 1

ả nh, ta c ấ t ả nh lên file d ạ ng *.bmp L ư u ý r ằ ng các ả nh ph ả i có cùng kích th ướ c (thí d ụ 16*16, 20*20,32*32, ) Slide k ế miêu t ả

c ử a s ổ c ủ a trình so ạ n th ả o đồ h ọ a Paint

Trang 21

Trang 22

Qui trình t ạ o Toolbar c ủ a form (tt)

Trang 23

Môn: Tin h ọ c

Slide 115

2.2 Chọn tab General, chọn checkbox Custom rồi nhập kích thước của

button Toolbar vào 2 field Height và Width

Trang 24

Môn: Tin h ọ c

Slide 116

2.3 Chọn tab Images rồi thêm từng ảnh button vào ImageList bằng trình

tự: ấn Insert Picture, duyệt và chọn file image, nhập giá trị cho field Key Để truy xuất ảnh button, ta dùng hoặc thuộc tính Index hoặc thuộc tính Key (tên gợi nhớ)

Trang 25

Trang 26

Môn: Tin h ọ c

Slide 118

3 Tạo 1 đối tượng Toolbar, vị trí và kích thước của đối tượng này không

quan trọng vì nó sẽ luôn được xếp ngay dưới menubar

Trang 27

Môn: Tin h ọ c

Slide 119

Trang 28

Môn: Tin h ọ c

Slide 120

3.2 Chọn tab Buttons, thêm

từng button vào Toolbar

Trang 29

Môn: Tin h ọ c

Slide 121

Ch ươ ng 4: Qui trình thi ế t k ế tr ự c quan giao di ệ n c ủ a ứ ng d ụ ng 3.3 Sau khi thêm 6 button vào Toolbar thì Toolbar có dạng sau:

Trang 30

Môn: Tin h ọ c

Slide 122

Ghi chú v ề qui trình t ạ o giao di ệ n

Th ườ ng thì form giao di ệ n nh ư MiniCalculator không c ầ n ch ứ a

menubar và Toolbar Giao di ệ n d ạ ng này đượ c g ọ i là Dialog

based

Còn 2 d ạ ng giao di ệ n ứ ng d ụ ng ph ổ bi ế n khác là:

SDI (Single Document Interface): c ử a s ổ c ủ a ch ươ ng trình g ồ m

1 menubar, 1 hay nhi ề u Toolbar và 1 c ử a s ổ làm vi ệ c duy nh ấ t

T ừ ng th ờ i đ i ể m, c ử a s ổ làm vi ệ c này s ẽ cho phép hi ể n th ị /hi ệ u

ch ỉ nh 1 document c ủ a ứ ng d ụ ng

và MDI (Multiple Document Interface): c ử a s ổ c ủ a ch ươ ng trình

g ồ m 1 menubar, 1 hay nhi ề u Toolbar và n c ử a s ổ làm vi ệ c

khác nhau, m ỗ i c ử a s ổ làm vi ệ c s ẽ cho phép hi ể n th ị /hi ệ u ch ỉ nh

1 document c ủ a ứ ng d ụ ng

Trang 31

Môn: Tin h ọ c

Slide 123

Giao di ệ n SDI (Single Document Interface)

Trang 32

Môn: Tin h ọ c

Slide 124

Giao di ệ n MDI (Multiple Document Interface)

Trang 33

Môn: Tin h ọ c

Slide 125

Ghi chú v ề qui trình t ạ o giao di ệ n (tt)

Để t ạ o giao di ệ n tr ự c quan c ủ a các ứ ng d ụ ng SDI và MDI đượ c

d ễ dàng, VB cung c ấ p cho ng ườ i dùng 1 d ạ ng Project tên là "VB Application Wizard"

Ch ọ n d ạ ng Project này khi t ạ o Project, VB s ẽ h ướ ng d ẫ n ng ườ i dùng t ạ o ra các ph ầ n t ử giao di ệ n r ấ t d ễ dàng, trong đ ó 2 đố i

t ượ ng c ơ b ả n là menubar và Toolbar đượ c VB t ạ o t ự độ ng, ng ườ i

l ậ p trình ch ỉ c ầ n hi ệ u ch ỉ nh l ạ i theo yêu c ầ u riêng

Trang 34

Môn: Tin h ọ c

Slide 126

4.6 T ạ o th ủ t ụ c x ử lý s ự ki ệ n cho các đố i t ượ ng giao di ệ n

Sau khi đ ã thi ế t k ế tr ự c quan giao di ệ n c ủ a ứ ng d ụ ng theo yêu c ầ u, b ạ n s ẽ t ạ o các th ủ t ụ c x ử lý s ự ki ệ n c ầ n thi ế t cho t ừ ng đố i t ượ ng giao di ệ n

Để t ạ o th ủ t ụ c x ử lý cho 1 option trong menu, b ạ n ch ọ n menu t ươ ng ứ ng, d ờ i chu ộ t v ề option c ầ n t ạ o th ủ t ụ c r ồ i ch ọ n nó, template c ủ a th ủ t ụ c s ẽ đượ c t ạ o ra

Các ch ươ ng t ớ i s ẽ gi ớ i thi ệ u cú pháp VB để b ạ n có th ể vi ế t code cho th ủ t ụ c

Trang 35

Môn: Tin h ọ c

Slide 127

T ạ o th ủ t ụ c x ử lý s ự ki ệ n cho các đố i t ượ ng giao di ệ n (tt)

Để t ạ o th ủ t ụ c x ử lý cho 1 button trong Toolbar, b ạ n ấ n kép chu ộ t vào button đ ó, template c ủ a th ủ t ụ c s ẽ đượ c t ạ o ra (l ư u ý ch ỉ có 1 th ủ t ụ c x ử lý cho t ấ t c ả các button trong 1 Toolbar, th ủ t ụ c này s ẽ d ự a vào thu ộ c tính Button.Key để bi ế t

button nào đ ã đượ c ch ọ n)

Để t ạ o th ủ t ụ c x ử lý cho 1 command button, b ạ n ấ n kép chu ộ t vào command button đ ó, template c ủ a th ụ t ụ c s ẽ đượ c t ạ o ra:

Trang 36

Môn: Tin h ọ c

Slide 128

T ạ o th ủ t ụ c x ử lý s ự ki ệ n cho các đố i t ượ ng giao di ệ n (tt)

Cách t ổ ng quát để t ạ o th ủ t ụ c x ử lý s ự ki ệ n là m ở c ử a s ổ code (View.Code),

ch ọ n tên đố i t ượ ng trong danh sách r ồ i ch ọ n s ự ki ệ n c ầ n x ử lý, th ủ t ụ c x ử lý

t ươ ng ứ ng s ẽ đượ c t ạ o ra:

Định dạng
Số trang	36
Dung lượng	2,92 MB