Xem mẫu
MÔN TIN HỌC
Chương 4
QUI TRÌNH THIẾT KẾ TRỰC QUAN
GIAO DIỆN CỦA ỨNG DỤNG
4.1 Dự Án Và Ứng Dụng
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
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 93
4.1 Dự Án Và Ứng Dụng
1 ứng dụng VB được cấu thành từ nhiều đối tượng thuộc nhiều loại :
Các phần tử giao diện
Các "class module", mỗi class đặc tả 1 loại đối tượng cần dùng cho
giải thuật của chương trình.
Các đối tượng khác như các thư viện liên kết động, các database,...
Để quản lý ứng dụng được dễ dàng ta sử dụng phương tiện "Dự án"
(Project). Dự án là 1 cây thứ bậc các phần tử cấu thành ứng dụng. Viết
ứ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.
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 94
47
Khởi động VB 6.0
VB là 1 ứng dụng như bao ứng dụng khác. Để khởi động 1 ứng 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:
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 95
Cửa sổ khởi động VB
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 96
48
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.
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 97
Thí dụ về form thiết kế : MiniCalculator
Control buttons
Window ≡ Form,
Dialogbox
Title bar
Menu
Toolbar
Textbox
Command Button
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 98
49
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.
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 99
4.3 Thiết lập giá trị cho các thuộc tính
Để dễ cân chỉnh vị trí
và kích thước của các
đối tượng, ta nên thiết
lập các thuộc tính cơ
bản sau : "Name",
"Caption". Thuộc tính
"Name" được dùng để
truy xuất đối tượng lúc
lập trình, còn thuộc
tính "Caption" được
hiển thị trên phần tử
(không phải đối tượng
nào cũng có Caption).
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 100
50
Thiết lập giá trị cho các thuộc tính (tt)
Để xem và hiệu chỉnh
giá trị của các thuộc
tính của 1 đối tượng
giao diện, bạn ấn
chuột chọn đối tượng,
cửa sổ Properties bên
phải màn hình sẽ
hiển thị các thuộc tính
của đối tượng được
chọn. Bạn duyệt các
thuộc tính từ trên
xuống và nhập vào
giá trị mới cho thuộc
tính mong muốn.
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 101
Cân chỉnh kích thước các đối tượng
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).
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 102
51
nguon tai.lieu . vn
Chương 4
QUI TRÌNH THIẾT KẾ TRỰC QUAN
GIAO DIỆN CỦA ỨNG DỤNG
4.1 Dự Án Và Ứng Dụng
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
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 93
4.1 Dự Án Và Ứng Dụng
1 ứng dụng VB được cấu thành từ nhiều đối tượng thuộc nhiều loại :
Các phần tử giao diện
Các "class module", mỗi class đặc tả 1 loại đối tượng cần dùng cho
giải thuật của chương trình.
Các đối tượng khác như các thư viện liên kết động, các database,...
Để quản lý ứng dụng được dễ dàng ta sử dụng phương tiện "Dự án"
(Project). Dự án là 1 cây thứ bậc các phần tử cấu thành ứng dụng. Viết
ứ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.
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 94
47
Khởi động VB 6.0
VB là 1 ứng dụng như bao ứng dụng khác. Để khởi động 1 ứng 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:
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 95
Cửa sổ khởi động VB
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 96
48
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.
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 97
Thí dụ về form thiết kế : MiniCalculator
Control buttons
Window ≡ Form,
Dialogbox
Title bar
Menu
Toolbar
Textbox
Command Button
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 98
49
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.
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 99
4.3 Thiết lập giá trị cho các thuộc tính
Để dễ cân chỉnh vị trí
và kích thước của các
đối tượng, ta nên thiết
lập các thuộc tính cơ
bản sau : "Name",
"Caption". Thuộc tính
"Name" được dùng để
truy xuất đối tượng lúc
lập trình, còn thuộc
tính "Caption" được
hiển thị trên phần tử
(không phải đối tượng
nào cũng có Caption).
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 100
50
Thiết lập giá trị cho các thuộc tính (tt)
Để xem và hiệu chỉnh
giá trị của các thuộc
tính của 1 đối tượng
giao diện, bạn ấn
chuột chọn đối tượng,
cửa sổ Properties bên
phải màn hình sẽ
hiển thị các thuộc tính
của đối tượng được
chọn. Bạn duyệt các
thuộc tính từ trên
xuống và nhập vào
giá trị mới cho thuộc
tính mong muốn.
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 101
Cân chỉnh kích thước các đối tượng
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).
Khoa Công nghệ Thông tin
Trường ĐH Bách Khoa Tp.HCM
Môn : Tin học
Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng
Slide 102
51