›
›

Bài giảng SDI và MDI - Nguyễn Văn Phong

ppt 61 trang hapham 1790
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng SDI và MDI - Nguyễn Văn Phong", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pptbai_giang_sdi_va_mdi_nguyen_van_phong.ppt

Nội dung text: Bài giảng SDI và MDI - Nguyễn Văn Phong

  1. SDI & MDI Nguyễn Văn Phong 1
  2. Nội Dung ◼ Tổng quan ứng dụng Document Interface ◼ Single Document Interface (SDI) ◼ Multiple Document Interface (MDI) ◼ GUI hỗ trợ ❑ MenuStrip ❑ ContextMenuStrip ❑ ToolStrip ❑ StatusStrip Nguyễn Văn Phong 2
  3. Ứng dụng document Interface ◼ 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 đặc trưng, hoặc trong CSDL. ◼ Các dạng document ❑ Document soạn thảo văn bản ❑ Document xử lý ảnh đồ họa ❑ Document bảng tính ❑ Document 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 Nguyễn Văn Phong 3
  4. Single Document Interface ◼ 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. Nguyễn Văn Phong 4
  5. Single Document Interface Single Document Interface Document Nguyễn Văn Phong 5
  6. Multiple Document Interface ◼ Ứ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 6: code, design, image Nguyễn Văn Phong 6
  7. Multiple Document Interface Ứng dụng MDI – MS PowerPoint Document Nguyễn Văn Phong 7
  8. Multiple Document Interface ◼ MDI Parent Window – MDI Child Window MDI Application Chỉ có duy nhất Parent window một parent windows Child window Child Có nhiều child window Child windows window Nguyễn Văn Phong 8
  9. Multiple Document Interface ◼ Cách tạo MDI Form ❑ Tạo form và thiết lập thuộc tính IsMdiContainer = true, khi đó form sẽ thay đổi cách thể hiện SDI Form MDI Form Nguyễn Văn Phong 9
  10. Multiple Document Interface ◼ 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 Nguyễn Văn Phong 10
  11. 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 ◼ Một cách tổng quát để add form con vào form chính Tạo đối tượng cho Lớp form con lớp form con ChildFormClass childForm = new ChildFormClass(); childForm.MdiParent = ; childForm.Show(); Thiết lập form cha (nếu Hiển thị form con đang ở trong form cha thì dùng đối tượng this) Nguyễn Văn Phong 11
  12. Multiple Document Interface 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 Nguyễn Văn Phong 12
  13. Multiple Document Interface ◼ Trạng thái Minimize, Maximize và Close Icon của parent: minimize, Icon của child: minimize, maximize, close restore, close Icon của child: restore, Title của parent chứa tên maximize, close child đang maximize Nguyễn Văn Phong 13
  14. 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 Nguyễn Văn Phong 14
  15. Multiple Document Interface ◼ Sắp đặt các child form TileHorizontal TileVertical Nguyễn Văn Phong 15
  16. Multiple Document Interface ◼ Tạo ứng dụng MDI: PixView xem ảnh ◼ Tạo ứng dụng MDI 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 Nguyễn Văn Phong 16
  17. Multiple Document Interface ◼ Bước 1: Tạo ứng dụng Windows App ❑ Thiết lập Form1 là form cha MDI Nguyễn Văn Phong 17
  18. Multiple Document Interface ◼ Bước 2: tạo form con ❑ Trong cửa sổ Solution Explorer kích chuột phải lên tên Project ❑ Chọn Add -> Windows Form ❑ Đặt tên cho form con Nguyễn Văn Phong 18
  19. 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 Nguyễn Văn Phong 19
  20. Multiple Document Interface ◼ Bước 4: bổ sung constructor cho form2, ❑ Constructor này có tham số là tên file cần mở Nguyễn Văn Phong 20
  21. 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 Nguyễn Văn Phong 21
  22. Multiple Document Interface ◼ Bước 6: viết phần xử lý cho menu item “Open” ❑ Trong màn hình thiết kế kích đúp vào menu item 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 Nguyễn Văn Phong 22
  23. Multiple Document Interface ◼ Đoạn code minh họa xử lý cho menu item “Open” Nguyễn Văn Phong 23
  24. Multiple Document Interface ◼ Bổ sung các chức năng sắp xếp form con ❑ Kích đúp 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 Nguyễn Văn Phong 24
  25. Multiple Document Interface Nguyễn Văn Phong 25
  26. Menu - MenuStrip Nguyễn Văn Phong 26
  27. Menu ◼ Menu cung cấp nhóm lệnh có quan hệ với nhau cho các ứng dụng Windows Menu item Menu Submenu Shortcut key Nguyễn Văn Phong 27
  28. Menu ◼ 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 MenuBar ToolStripMenuItem MenuStrip Nguyễn Văn Phong 28
  29. Menu Đặt ký tự & Tạo menu item trước ký tự mới bằng cách làm phím tắt nhập vào textbox Nguyễn Văn Phong 29
  30. Menu ◼ Thiết lập Shortcut Key cho menu item Khai báo shortcut key Nguyễn Văn Phong 30
  31. Menu ◼ Menu item có thể là TextBox hoặc ComboBox ToolStripMenuItem Chọn nút dropdown trên textbox nhập item để hiển ToolStripComboBox thị các dạng menu item khác ToolStripTextBox Nguyễn Văn Phong 31
  32. Menu 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 Nguyễn Văn Phong 32
  33. Menu ◼ Sự kiện cho Menu Item thường dùng là Click ◼ Trong màn hình Design View kích đúp 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” Nguyễn Văn Phong 33
  34. ContextMenu Nguyễn Văn Phong 34
  35. Context Menu ◼ Xuất hiện khi user kích chuột 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 kích chuột phải. ◼ Trong ToolBox kéo ContextMenuStrip thả vào form Nguyễn Văn Phong 35
  36. Context Menu ◼ Kích 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 Soạn thảo Context Menu tương tự như Menu bình thường select Nguyễn Văn Phong 36
  37. Context Menu ◼ 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 kích chuột 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 ❑ Kích đúp vào menu item của Context Menu để tạo ❑ Hoặc trong cửa sổ Properties -> Event kích đúp vào sự kiện Click. Nguyễn Văn Phong 37
  38. Context Menu ◼ Demo: 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 Nguyễn Văn Phong 38
  39. Context Menu ◼ Kéo ContextMenuStrip thả vào Form Nguyễn Văn Phong 39
  40. Context Menu ◼ Kích 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 Nguyễn Văn Phong 40
  41. 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 Nguyễn Văn Phong 41
  42. Context Menu ◼ Khai báo trình xử lý sự kiện Click cho menu item Nguyễn Văn Phong 42
  43. Context Menu ◼ Demo Context Menu hiển thị khi user kích chuột phải lên ListBox Nguyễn Văn Phong 43
  44. ToolStrip Nguyễn Văn Phong 44
  45. ToolStrip ◼ 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à dạng 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 Nguyễn Văn Phong 45
  46. ToolStrip ◼ Cách tạo button trên ToolStrip ❑ Kéo ToolStrip thả vào form ❑ Add ToolStripButton Tạo button Nguyễn Văn Phong 46
  47. ToolStrip ◼ Bổ sung image cho button ❑ Sử dụng thuộc tính Images để thiết lập Nguyễn Văn Phong 47
  48. ToolStrip Split bar Các button ToolStrip Nguyễn Văn Phong 48
  49. ToolStrip ◼ Khai báo trình xử lý sự kiện Click cho ToolStripButton ❑ Khai báo tương tự như các button ◼ Kích đúp 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” Nguyễn Văn Phong 49
  50. ToolStrip ◼ Demo: 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 Nguyễn Văn Phong 50
  51. ToolStrip ◼ Xử lý sự kiện KeyDown cho ToolStripTextBox Nguyễn Văn Phong 51
  52. ToolStrip ◼ Demo Nguyễn Văn Phong 52
  53. StatusStrip Nguyễn Văn Phong 53
  54. StatusStrip ◼ 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 Nguyễn Văn Phong 54
  55. StatusStrip ◼ Tạo các item cho StatusStrip Tạo các item cho StatusStrip Các kiểu control cho StatusStrip Nguyễn Văn Phong 55
  56. 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 Nguyễn Văn Phong 56
  57. StatusStrip ◼ Demo ToolStripStatusLabel StatusStrip Nguyễn Văn Phong 57
  58. StatusStrip ◼ VD: bổ sung hiển thị một hyperlink trên StatusStrip và open hyperlink khi user kích 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 = “” Nguyễn Văn Phong 58
  59. StatusStrip ◼ Tạo trình xử lý sự kiện khi user kích vào item Label thứ 3 chứa hyperlink ❑ Trong màn hình design kích đúp vào item thứ 3, VS.NET sẽ phát sinh ra trình xử lý sự kiện Nguyễn Văn Phong 59
  60. StatusStrip ◼ Demo Kích vào để mở web Label thứ 2 fill đầy khoảng trống Nguyễn Văn Phong 60
  61. Nguyễn Văn Phong 61