Bài giảng Lập trình trên môi trường Windows - Chương 4: SDI & MDI - Dương Thành Phết

Chương 4: 
SDI & MDI 
Single & Multiple Document Interface 
1 
LẬP TRÌNH WINDOWS 
 Giảng Viên: ThS. Dương Thành Phết 
 Email: phetcm@gmail.com – YahooID: phetcm 
 Website:  
 Tel: 0918158670 
NỘI DUNG 
Tổng quan ứng dụng Document Interface 1 
Single Document Interface (SDI) 2 
Multiple Document Interface (MDI) 3 
MenuStrip 4 
ContextMenuStrip 5 
ToolStrip 6 
StatusStrip 7 
2 
1. TỔNG QUAN ỨNG DỤNG DI 
3 
 Dạng ứng dụng làm việc với các document: 
Document chứa nội dung dữ liệu, được lưu trữ 
trên file hoặc trong CSDL. 
 Các dạng document: Soạn thảo văn bản; Xử lý ảnh 
đồ họa; Bảng tính; Làm việc csdl ... 
 Ứng dụng dạng DI sẽ cung cấp các chức năng 
Mở file (hoặc CSDL), xử lý nội dung và lưu file 
(hoặc CSDL) 
 Có 2 dạng ứng dụng DI: 
+ Single Document Interface 
+ Multiple Document Interface 
2. SINGLE DOCUMENT INTERFACE 
4 
 Chỉ hỗ trợ một document hoặc một cửa sổ tại một 
thời điểm. 
 Dạng ứng dụng như NotePad, MS Paint với các 
đặc tính xử lý ảnh và văn bản giới hạn. 
 Để làm việc với nhiều tài liệu thì phải mở các 
instance khác của ứng dụng. 
 Việc quản lý ứng dụng SDI khá đơn giản. 
Document 
3. MULTIPLE DOCUMENT INTERFACE 
5 
3.1. Giới thiệu 
 Ứng dụng cho phép xử lý nhiều document tại một 
thời điểm. 
 Các ứng dụng hiện tại thường là dạng MDI: MS 
Office; MS Studio.NET; Adobe Photoshop  
 Ứng dụng MDI thường phức tạp và chức năng xử 
lý đa dạng 
 Xử lý một cùng một dạng document: MS Word, 
Adobe Photoshop. Xử lý nhiều dạng document: 
Visual Studio: code, design, 
3. MULTIPLE DOCUMENT INTERFACE 
6 
Document 
Ứng dụng MDI – MS PowerPoint 
3. MULTIPLE DOCUMENT INTERFACE 
7 
MDI Parent Window – MDI Child Window 
Child 
window 
Child 
window 
Child 
window 
Parent window 
MDI Application 
Chỉ có duy nhất một 
parent windows 
Có nhiều child 
windows 
3. MULTIPLE DOCUMENT INTERFACE 
8 
3.2. Đặc điểm của MDIParent Form 
 Được sử dụng làm cửa sổ chính cho ứng dụng. 
Trong một ứng dụng chỉ có một cửa sổ MDI. 
 Các cửa sổ con bên trong MDI chỉ có thể di 
chuyển trong phạm vi của cửa sổ MDI chứa nó. 
 Khi cửa sổ con bên trong MDI được maximize thì 
click thước cũng chỉ bằng vùng làm việc của MDI 
 Tiêu đề của cửa sổ con được ghép với tiêu đề 
của cửa sổ MDI. Nếu có menu, lúc này menu của 
cửa sổ con sẽ thay thế menu của cửa sổ MDI. 
 Khi cửa sổ con được minimize, biểu tượng của 
cửa sổ con nó nằm trong cửa sổ MDI. 
3. MULTIPLE DOCUMENT INTERFACE 
9 
3.3. Tạo một MDI Form 
 Thêm mới một MDI form hoặc sử dụng một 
Form đã có, thiết lập thuộc tính IsMdiContainer 
là True. 
 Màu nền của form theo mặc định sẽ là màu 
xám. 
SDI Form MDI Form MDI Form tạo mới 
3. MULTIPLE DOCUMENT INTERFACE 
10 
3.4. Thiết lập một Form là form con của MDI Form: 
Ta có thể thiết lập một form dạng SDI làm form con 
của form MDI bằng cách dùng lệnh thiết lập giá trị cho 
thuộc tính MdiParent là tên của MDI Form 
 frmchild frm = new frmchild (); 
 frm.MdiParent = this; 
 frm.Show(); 
3. MULTIPLE DOCUMENT INTERFACE 
3.5. Tạo một form con để add vào form chính 
Click chuột phải lên tên project trong 
Solution Explorer 
Chọn Add-> Windows Form 
Trong cửa sổ Add New Item 
Chọn tên của form con 
Thiết kế form con theo yêu cầu 
 của ứng dụng. 
Tạo form con 
11 
12 
3. MULTIPLE DOCUMENT INTERFACE 
 Add form con vào form chính 
 Tạo đối tượng của form con 
 Thiết lập thuộc tính MdiParent của form con là 
form chính 
 Gọi phương thức Show của form con 
ChildFormClass childForm = new ChildFormClass(); 
childForm.MdiParent = ; 
childForm.Show(); 
Lớp form con 
Thiết lập form cha (nếu đang 
ở trong form cha thì dùng đối 
tượng this) 
Hiển thị form con 
Tạo đối tượng cho 
lớp form con 
13 
3. MULTIPLE DOCUMENT INTERFACE 
3.6. Thuộc tính, phương thức và sự kiện 
Thuộc tính của MDI child 
IsMdiChild Cho biết form là child hay không 
MdiParent Xác định form cha của form 
Thuộc tính của MDi parent 
ActiveMdiChild Trả về form con đang active 
IsMdiContainer Xác định form là MDI parent hoặc không 
MdiChildren Trả về mảng chứa các form con 
Phương thức 
LayoutMdi Xác định cách hiển thị các form con 
Sự kiện 
MdiChildActivate Xuất hiện khi child form đóng hoặc active 
Ví dụ: Gán thuộc tính màu nền của form con đang được active là 
màu đỏ. ActiveForm.Backcolor = VBRed 
14 
3. MULTIPLE DOCUMENT INTERFACE 
Trạng thái Minimize, Maximize và Close 
Icon của parent: minimize, 
maximize, close 
Icon của child: restore, 
maximize, close 
Icon của child: 
minimize, restore, close 
Title của parent chứa tên 
child đang maximize 
15 
3. MULTIPLE DOCUMENT INTERFACE 
Sắp đặt các child form 
 Sử dụng phương thức LayoutMdi 
 Tham số là các giá trị MdiLayout enumeration 
ArrangeIcons Cascade 
16 
3. MULTIPLE DOCUMENT INTERFACE 
Sắp đặt các child form 
TileHorizontal TileVertical 
17 
3. MULTIPLE DOCUMENT INTERFACE 
3.7. Ví dụ: 
 Tạo ứng dụng MDI: PixView xem ảnh trong đó 
 Form cha 
• Chức năng open: mở file ảnh từ đĩa 
• Gọi form con hiển thị ảnh 
• Cho phép sắp xếp các cửa sổ con 
 Form con 
• Lấy thông tin file từ form cha 
• Hiển thị file ảnh lên PictureBox 
18 
3. MULTIPLE DOCUMENT INTERFACE 
 Bước 1: Tạo ứng dụng Windows App 
 Thiết lập Form1 là form cha 
MDI 
19 
3. MULTIPLE DOCUMENT INTERFACE 
 Bước 2: tạo form con 
 Trong cửa sổ Solution Explorer click phải lên tên 
Project 
 Chọn Add -> Windows Form 
 Đặt tên cho form con 
20 
3. MULTIPLE DOCUMENT INTERFACE 
 Bước 3: Bổ sung control PictureBox vào Form2 
 Thiết lập các thuộc tính cho PictureBox 
 Dock = Fill 
 SizeMode = CenterImage 
21 
3. MULTIPLE DOCUMENT INTERFACE 
 Bước 4: bổ sung constructor cho form2, 
 Constructor này có tham số là tên file cần mở 
22 
3. MULTIPLE DOCUMENT INTERFACE 
 Bước 5: tạo menu cho form chính (Form1) 
 Kéo MenuStrip thả vào Form1 
 Tạo các top menu: 
• File 
– Open 
– Exit 
• Window 
– Cascade 
– TileHorizontal 
– TileVertical 
23 
3. MULTIPLE DOCUMENT INTERFACE 
 Bước 6: viết phần xử lý cho menu item “Open” 
 Trong màn hình thiết kế Double click vào menu Open 
 VS.NET sẽ tạo trình xử lý cho menu item 
 Phần xử lý được mô tả như sau 
• Mở dialog để chọn file 
• User chọn 1 file ảnh 
• Lấy đường dẫn file ảnh 
• Tạo mới đối tượng form2 truyền tham số đường 
dẫn file 
• Thiết lập liên kết giữa form cha và form con 
• Hiển thị form2 ra màn hình 
24 
3. MULTIPLE DOCUMENT INTERFACE 
 Đoạn code minh họa xử lý cho menu item “Open” 
25 
3. MULTIPLE DOCUMENT INTERFACE 
 Bổ sung các chức năng sắp xếp form con 
 Double click vào các menu item tương ứng trên 
menu Window 
 Viết các xử lý cho các menu item 
• Gọi hàm LayoutMdi với các tham số tương ứng 
26 
3. MULTIPLE DOCUMENT INTERFACE 
27 
4. MENUSTRIP 
4.1. Giới thiệu: 
 Thanh trình đơn (Menu Bar): Trình bày các chức 
năng cần thực hiện dưới dạng nhóm lệnh. 
 Các mục trên thanh trình đơn gọi là Menu và 
trong mỗi Menu có các SubMenu 
 Phím tắt (Shortcut Key): Để chọn một menu trên 
thành trình đơn ta thực hiện thao tác Click chuột. 
Tuy nhiên ta có thể thực hiện bằng cách chọn 
phím tắt hay phím nóng. 
 Phím tắt : Dùng để chọn 1 Menu (VD: Alt + O) 
 Phím nóng: Để chọn 1 Sub Menu (VD: Ctrl+P) 
28 
4. MENUSTRIP 
Menu cung cấp nhóm lệnh có quan hệ với nhau cho các 
ứng dụng Windows 
Menu 
Menu item 
Submenu 
Shortcut key 
4.2. Cách tạo menu 
 Trong ToolBox kéo control MenuStrip thả vào form 
 Thanh menuBar xuất hiện trên cùng của form 
 Trong màn hình design dễ dàng tạo lập các menu item 
Nhập tên menu 
MenuStrip 
MenuBar 
ToolStripMenuItem 
4. MENUSTRIP 
29 
Đặt ký tự & 
trước ký tự 
làm phím tắt 
Tạo menu item 
mới bằng cách 
nhập vào textbox 
4. MENUSTRIP 
30 
 Thiết lập Shortcut Key cho menu item 
Khai báo 
shortcut key 
4. MENUSTRIP 
31 
32 
 Menu item có thể là TextBox hoặc ComboBox 
 Chọn nút dropdown 
trên textbox nhập 
item để hiển thị các 
dạng menu item khác 
ToolStripMenuItem 
ToolStripComboBox 
ToolStripTextBox 
4. MENUSTRIP 
33 
Thuộc tính của MenuStrip, ToolStripMenuItem 
MenuStrip 
Items Chứa những top menu item 
MdiWindowListItem Chọn top menu item hiển thị tên các cửa sổ con 
ToolStripMenuItem 
Checked Xác định trạng thái check của menu item 
Index Chỉ mục menu item trong menu cha 
DropDownItems Chứa những menu item con 
ShortcutKeys Phím tắt 
Text Tiêu đề menu item 
ShowShortcutKeys Xác định trạng thái hiện thị phím tắt bên cạnh 
menu item 
4. MENUSTRIP 
33 
34 
 Sự kiện cho Menu Item thường dùng là Click 
 Trong màn hình Design View Double click vào menu 
item. VS sẽ tự động tạo trình xử lý cho menu item 
Trình xử lý cho 
sự kiện click của 
menu item 
“Open” 
4. MENUSTRIP 
35 
5. CONTEXT MENU 
5.1. Giới thiệu: 
 Xuất hiện khi user click phải 
 Thông thường menu này xuất hiện tùy thuộc vào đối 
tượng trong vùng click phải. 
36 
5.2. Cách tạo Context Menu 
 Trong ToolBox kéo ContextMenuStrip thả vào form 
 click vào ContextMenuStrip để soạn thảo các menuitem 
 ContextMenuStrip tạm thời thể hiện trên cùng của form 
 Khi run thì sẽ không hiển thị cho đến khi được gọi 
select 
Soạn thảo Context 
Menu tương tự như 
Menu bình thường 
5. CONTEXT MENU 
37 
 Khai báo sử dụng Context Menu 
 Mỗi control đều có property là: ContextMenuStrip 
 Khai báo thuộc tính này với ContextMenuStrip. Khi đó 
user click phải lên control thì sẽ hiển thị context Menu 
đã cài đặt sẵn 
 Khai báo trình xử lý sự kiện Click cho ContextMenu 
 Double click vào menu item của Context Menu để tạo 
 Hoặc trong cửa sổ Properties -> Event Double click 
vào sự kiện Click. 
5. CONTEXT MENU 
38 
5.3. Ví dụ: 
 Tạo context Menu hiển thị trong ListBox có menu 
item Remove, cho phép xóa item đang được chọn. 
 Tạo Form có mô tả như sau: 
ListBox hiển thị 
các item 
5. CONTEXT MENU 
39 
 Kéo ContextMenuStrip thả vào Form 
5. CONTEXT MENU 
40 
 Click vào ContextMenuStrip để thiết kế menu 
 Tạo một menu item “Remove” như hình mô tả 
Soạn thảo các 
menu item 
5. CONTEXT MENU 
 Liên kết ContextMenu với ListBox 
 Trong cửa sổ properties của ListBox. Khai báo 
thuộc tính 
ContextMenuStrip = ContextMenuStrip1 
Chọn context 
menu 
41 
5. CONTEXT MENU 
 Khai báo trình xử lý sự kiện Click cho menu item 
42 
5. CONTEXT MENU 
Kết quả 
Context Menu 
hiển thị khi user 
click phải lên 
ListBox 
43 
5. CONTEXT MENU 
6. TOOLSTRIP 
6.1. Giới thiệu: 
 ToolStrip là sự thay thế cho ToolBar trong các ứng 
dụng trước đây 
 Vị trí thường xuất hiện là ngay bên dưới thanh menu 
 Cung cấp các button cho phép thực hiện các chức 
năng thường dùng trong menu 
 ToolStrip là container cho phép chứa các control 
 Các control này dẫn xuất từ ToolStripItem 
 Các control bao gồm: ToolStripSplitButton; 
ToolStripDropDownbutton;ToolStripLabel; 
ToolStripProgressBar;ToolStripSeparator; 
ToolStripComboBox; ToolStripTextBox 
44 
6.2. Cách tạo button trên ToolStrip: 
 Kéo ToolStrip thả vào form 
 Add ToolStripButton 
Tạo button 
45 
6. TOOLSTRIP 
 Bổ sung image cho button 
 Sử dụng thuộc tính Images để thiết lập 
46 
6. TOOLSTRIP 
Các button 
Split bar 
ToolStrip 
47 
6. TOOLSTRIP 
48 
 Khai báo trình xử lý sự kiện Click cho 
ToolStripButton 
 Khai báo tương tự như các button: Double click 
vào button trong Design View 
 Thông thường các button là các chức năng 
thường sử dụng chứa trong menu 
VD: Các button New, Open, Save 
Do đó có thể khai báo cùng trình xử lý sự kiện 
cho các button và menu item cùng chức năng. 
VD:Menu item “Open” cùng trình xử lý với 
ToolStripButton “Open” 
6. TOOLSTRIP 
6.3. Ví dụ: 
 Tạo thanh menubar cho phép nhập URL và khi nhấn 
enter chương trình sẽ open địa chỉ đó 
ToolStripLabel ToolStripTextBox 
WebBrowser 
Dock=Fill 
49 
6. TOOLSTRIP 
 Xử lý sự kiện KeyDown cho ToolStripTextBox 
50 
6. TOOLSTRIP 
 Kết quả 
51 
6. TOOLSTRIP 
7. STATUSSTRIP 
7.1. Giới thiệu: 
 Hiển thị thông tin trạng thái của ứng dụng 
 Nằm bên dưới cùng của Form. 
 Các lớp liên quan 
 StatusStrip: là container chứa control khác 
 ToolStripStatusLabel: control có thể add vào StatusStrip 
52 
53 
7.2. Tạo các item cho StatusStrip 
Tạo các item cho 
StatusStrip 
Các kiểu control cho 
StatusStrip 
7. STATUSSTRIP 
Ví dụ tạo sự kiện Tick của Timer cứ mỗi giây kích hoạt 
và hiển thị giờ trên StatusStrip 
 Kéo Timer thả vào Form. Thiết lập sự kiện Tick cho 
Timer với Interval là 1000 ms 
Item dạng Label của StatusStrip 
54 
7. STATUSSTRIP 
 Kết quả: 
ToolStripStatusLabel StatusStrip 
55 
7. STATUSSTRIP 
 VD: bổ sung hiển thị một hyperlink trên StatusStrip 
và open hyperlink khi user click chuột 
Label hiển thị 
hyperlink 
Thuộc tính isLink 
= true 
Thiết lập với thuộc tính spring = true, Text = “” 
56 
7. STATUSSTRIP 
 Tạo trình xử lý sự kiện khi user click vào item 
Label thứ 3 chứa hyperlink 
Trong màn hình design Double click vào item thứ 3, 
VS.NET sẽ phát sinh ra trình xử lý sự kiện 
57 
7. STATUSSTRIP 
58 
 Kết quả 
Label thứ 2 fill đầy khoảng trống 
click vào để mở web 
7. STATUSSTRIP 
59