Mẫu thiết kế giao diện

Mẫu thiết kế giao diện

Thi t k giao di n ế ế ệ

Đ thi t k giao di n, đ u tiên d a vào các ch c năng và d li u mà ta đã phânể ế ế ệ ầ ự ứ ữ ệ

tích, ta có th xác đ nh để ị ược bao nhiêu giao di n c n ph i s d ng, m c đích c a t ngệ ầ ả ử ụ ụ ủ ừ

giao di n và quan h gi a chúng nh th nào.ệ ệ ữ ư ế

I Thi t k giao di n ế ế ệ

Chúng ta ph i xác đ nh đả ị ược chương trình s g m có t t c bao nhiêu giao di n,ẽ ồ ấ ả ệ

bao nhiêu lo i và gi a các giao di n đó tạ ữ ệ ương tác v i nhau nh th nào.ớ ư ế

Đ i v i chố ớ ương trình có các ch c năng riêng bi t nhau, ta th hi n nh sau:ứ ệ ể ệ ư

Chuyên Ngành frmChuyenNganh

frmTruong

frmQuocGia frmNhapDT

Xét duy t đ tài ệ ề Nh p Chuyên gia ậ

Tr ườ ng

Qu c gia ố

Đ tài ề

frmHoiDong

Đăng ký đ tài ề frmDangKyDeTai

frmDangKy

Nh p H i Đ ng ậ ộ ồ Xét duy t ệ

frmChonNhom

Ch n nhóm th c hi n ọ ự ệ

frmNhapCG

frmXetDuyetDT

Tri n khai đ tài ể ề frmKinhPhi

frmChuyenNhom

C p kinh phí ấ Chuy n nhóm ể Gia H n ạ

Nhóm đăng ký Đăng ký đ tài ề

frmGiaHan

Đ i v i các chố ớ ương trình có các giao di n tệ ương tác v i nhau, ta s d ng mô hìnhớ ử ụ

DFD đ di n t m i quan h gi a các giao di n.ể ễ ả ố ệ ữ ệ

Ví d : Đ i v i chụ ố ớ ương trình qu n lý đĩa CD g m có 3 form c b n sau: formả ồ ơ ả

nh p li u v đĩa CD, form tìm ki m đĩa và form bán đĩa Ta có mô hình sau:ậ ệ ề ế

Nghi m thu ệ frmNghiemThu

H i th o đ ộ ả ề tài

Phân công chuyên gia

Tra c uứ Kinh Phí đ tài ề frmTcuuKP

Tr ng thái đ tài ạ ề frmTcuuTrangThaiDT

frmTCHoiThao

frmTCHoiDong

Cu c h i th o ộ ộ ả

H i đ ng xét duy t ộ ồ ệ

H i th o đ tài ộ ả ề

frmBcaoGiaHan

Cu c h i th o ộ ộ ả

H i đ ng xét duy t ộ ồ ệ

Tr ng thái đ tài ạ ề frmBcDeTai

frmBCCuocHT

Báo cáo

Đ tài gia h n ề ạ

Tình hình h i th o ộ ả

rptTrangthaiDT

rptGiaHan

rptCuocHT

rptHTDT

rptHDXetDuyet

frmHTDeTai

frmHDXetDuyet frmBCHoiThao

II Trình bày giao di n: ệ

Chúng ta có th s d ng t t c các công c t đ n gi n nh Winword, Paint… đ nể ử ụ ấ ả ụ ừ ơ ả ư ế

ph c t p nh Photoshop, Corel…đ h tr vi c trình bày t ng giao di n K t h p v iứ ạ ư ể ỗ ợ ệ ừ ệ ế ợ ớ

b n mô t (s u li u) v giao di n đó giúp cho ngả ả ư ệ ề ệ ườ ậi l p trình d dàng th c hi n.ễ ự ệ

VD:

Form

nh p li uậ ệ Form tra c uứ

Form bán đĩa đĩa được ch nọ tìm đĩa

Thay đ i thông ổ tin v đĩaề

người dùng

C p nh t ậ ậ

thông tin v ề

đĩa

người

dùng

mua đĩa

tìm đĩa

S u li u ư ệ

STT Tên Control Lo i Control ạ Ch c năng ứ

1 Cbomahd ComboBox Ch a danh sách mã h i đ ngứ ộ ồ

2 Cbotenhd Combobox Ch a danh sách tên h i đ ngứ ộ ồ

3 Grddetai Xceed.Grid.GridControl Hi n th danh sách các đ tài để ị ề ược h iộ

đ ng xét duy tồ ệ

4 grdCGia Xceed.Grid.GridControl Hi n th danh sách các chuyên giaể ị

không thu c h i đ ngộ ộ ồ

5 grdCG Xceed.Grid.GridControl Hi n th danh sách các chuyên giaể ị

thu c h i đ ngộ ộ ồ

6 cmdPhai Button Thêm chuyên gia vào h i đ ngộ ồ

7 cmdTrai Button Xóa chuyên gia kh i h i đ ngỏ ộ ồ

8 cmdXetDuyet Button G i đ n frmHD_DT đ phân công h iọ ề ể ộ

đ ng xét duy t đ tàiồ ệ ề

9 cmdThem Button Kh i t o các textbox đ nh p m i dở ạ ể ậ ớ ữ

li u h i đ ngệ ộ ồ

10 cmdCN Button L u thông tin v a nh p hay v a s aư ừ ậ ừ ử

ch aữ

11 cmdXoa Button Xoá dòng d li u đữ ệ ược ch n trênọ

Combobox ô

III M t s kinh nghi m v thi t k giao di n: ộ ố ệ ề ế ế ệ

• Khi thi t k giao di n, ta thi t k các control nh label, button, textbox,… saoế ế ệ ế ế ư cho kho ng tr ng trong form đả ố ược gi m t i đa; các control ph i cân đ i v đả ố ả ố ề ộ

r ng, h p, font ch …ộ ẹ ữ

• Thường thì trong m t chộ ương trình các form s s d ng chung m t pattern vẽ ử ụ ộ ề màu s c, font ch … (nh ví d dắ ữ ư ụ ưới) Đ nh n m nh ý nghĩa c a m t s formể ấ ạ ủ ộ ố nào đó, ta có th s d ng m t ki u riêng cho nó (thay đ i v màu s c, cáchể ử ụ ộ ể ổ ề ắ

trang trí…)

VD: form sau đây có cùng ki u v i form dùng trong ví d trên.ể ớ ụ

• Có th s d ng màu s c thay đ i đ làm n i b t n i dung Nh ví d sau, màuể ử ụ ắ ổ ể ổ ậ ộ ư ụ

s c thay đ i trong t ng dòng d li u cho bi t đ tài đó đã đắ ổ ừ ữ ệ ế ề ược xét duy t hayệ

ch a hay đã hoàn t t.ư ấ

IV Thi t k report: ế ế

Tùy theo yêu c u c a t ng report mà ta ch n m u report nào cho thích h p Các m uầ ủ ừ ọ ẫ ợ ẫ report các b n có th tham kh o trong ph n sample khi cài chạ ể ả ầ ương trình Crystal Report Crystal Report cung c p r t nhi u m u khác nhau.ấ ấ ề ẫ