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

SDI & MDINguyễn Văn Phong1Nội DungTổng quan ứng dụng Document InterfaceSingle Document Interface (SDI)Multiple Document Interface (MDI)GUI hỗ trợMenuStripContextMenuStripToolStripStatusStrip2Ứng dụng document InterfaceDạng ứng dụng làm việc với các documentDocument 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 documentDocument soạn thảo văn bảnDocument xử lý ảnh đồ họaDocument bảng tínhDocument 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 DISingle Document InterfaceMultiple Document Interface3Single Document InterfaceChỉ 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.4Single Document InterfaceSingle Document InterfaceDocument5Multiple 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 MDIMS OfficeMS Studio.NETAdobe PhotoshopỨng dụng MDI thường phức tạp và chức năng xử lý đa dạngXử lý một cùng một dạng documentMS Word, Adobe PhotoshopXử lý nhiều dạng documentVisual Studio 6: code, design, image 6Multiple Document InterfaceDocumentỨng dụng MDI – MS PowerPoint7Multiple Document InterfaceMDI Parent Window – MDI Child WindowChild windowChild windowChild windowParent windowMDI ApplicationChỉ có duy nhất một parent windowsCó nhiều child windows8Multiple Document InterfaceCách tạo MDI FormTạo form và thiết lập thuộc tính IsMdiContainer = true, khi đó form sẽ thay đổi cách thể hiệnSDI FormMDI Form9Multiple Document InterfaceTạo một form con để add vào form chínhClick chuột phải lên tên project trong Solution ExplorerChọn Add-> Windows FormTrong cửa sổ Add New ItemChọn tên của form conThiết kế form con theo yêu cầu của ứng dụng.Tạo form con10Multiple Document InterfaceAdd form con vào form chínhTạo đối tượng của form conThiết lập thuộc tính MdiParent của form con là form chínhGọi phương thức Show của form conMột cách tổng quát để add form con vào form chínhChildFormClass childForm = new ChildFormClass(); childForm.MdiParent = ; childForm.Show(); Lớp form conThiết lập form cha (nếu đang ở trong form cha thì dùng đối tượng this)Hiển thị form conTạo đối tượng cho lớp form con 11Multiple Document InterfaceThuộc tính, phương thức và sự kiệnThuộc tính của MDI childIsMdiChildCho biết form là child hay khôngMdiParentXác định form cha của formThuộc tính của MDi parentActiveMdiChildTrả về form con đang activeIsMdiContainerXác định form là MDI parent hoặc khôngMdiChildrenTrả về mảng chứa các form conPhương thứcLayoutMdiXác định cách hiển thị các form conSự kiệnMdiChildActivateXuất hiện khi child form đóng hoặc active12Multiple Document InterfaceTrạng thái Minimize, Maximize và CloseIcon của parent: minimize, maximize, closeIcon của child: restore, maximize, closeIcon của child: minimize, restore, closeTitle của parent chứa tên child đang maximize13Multiple Document InterfaceSắp đặt các child formSử dụng phương thức LayoutMdiTham số là các giá trị MdiLayout enumerationArrangeIconsCascade14Multiple Document InterfaceSắp đặt các child formTileHorizontalTileVertical15Multiple Document InterfaceTạo ứng dụng MDI: PixView xem ảnhTạo ứng dụng MDI trong đóForm chaChức năng open: mở file ảnh từ đĩaGọi form con hiển thị ảnhCho phép sắp xếp các cửa sổ conForm conLấy thông tin file từ form chaHiển thị file ảnh lên PictureBox16Multiple Document InterfaceBước 1: Tạo ứng dụng Windows AppThiết lập Form1 là form chaMDI17Bước 2: tạo form conTrong cửa sổ Solution Explorer kích chuột phải lên tên ProjectChọn Add -> Windows FormĐặt tên cho form conMultiple Document Interface18Multiple Document InterfaceBước 3: bổ sung control PictureBox vào Form2Thiết lập các thuộc tính cho PictureBoxDock = FillSizeMode = CenterImage19Multiple Document InterfaceBước 4: bổ sung constructor cho form2, Constructor này có tham số là tên file cần mở20Multiple Document InterfaceBước 5: tạo menu cho form chính (Form1)Kéo MenuStrip thả vào Form1Tạo các top menu: FileOpenExitWindowCascadeTileHorizontalTileVertical21Multiple Document InterfaceBướ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 OpenVS.NET sẽ tạo trình xử lý cho menu itemPhần xử lý được mô tả như sauMở dialog để chọn fileUser chọn 1 file ảnhLấy đường dẫn file ảnh Tạo mới đối tượng form2 truyền tham số đường dẫn fileThiết lập liên kết giữa form cha và form conHiển thị form2 ra màn hình22Multiple Document InterfaceĐoạn code minh họa xử lý cho menu item “Open”23Multiple Document InterfaceBổ sung các chức năng sắp xếp form conKích đúp vào các menu item tương ứng trên menu WindowViết các xử lý cho các menu itemGọi hàm LayoutMdi với các tham số tương ứng24Multiple Document InterfaceDemo25Menu - MenuStrip26MenuMenu cung cấp nhóm lệnh có quan hệ với nhau cho các ứng dụng WindowsMenuMenu itemSubmenuShortcut key27MenuCách tạo menuTrong ToolBox kéo control MenuStrip thả vào formThanh menuBar xuất hiện trên cùng của formTrong màn hình design dễ dàng tạo lập các menu itemNhập tên menuMenuStripMenuBarToolStripMenuItem28MenuĐặt ký tự & trước ký tự làm phím tắtTạo menu item mới bằng cách nhập vào textbox29MenuThiết lập Shortcut Key cho menu itemKhai báo shortcut key30MenuMenu 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ácToolStripMenuItemToolStripComboBoxToolStripTextBox31MenuThuộc tính của MenuStrip, ToolStripMenuItemMenuStripItemsChứa những top menu itemMdiWindowListItemChọn top menu item hiển thị tên các cửa sổ conToolStripMenuItemCheckedXác định trạng thái check của menu itemIndexChỉ mục menu item trong menu chaDropDownItemsChứa những menu item conShortcutKeysPhím tắtTextTiêu đề menu itemShowShortcutKeysXác định trạng thái hiện thị phím tắt bên cạnh menu item32MenuSự kiện cho Menu Item thường dùng là ClickTrong màn hình Design View kích đúp vào menu itemVS sẽ tự động tạo trình xử lý cho menu itemTrình xử lý cho sự kiện click của menu item “Open”33ContextMenu34Context MenuXuất hiện khi user kích chuột phảiThô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 form35Context MenuKích vào ContextMenuStrip để soạn thảo các menuitemContextMenuStrip tạm thời thể hiện trên cùng của formKhi run thì sẽ không hiển thị cho đến khi được gọiselectSoạn thảo Context Menu tương tự như Menu bình thường36Context MenuKhai báo sử dụng Context MenuMỗi control đều có property là: ContextMenuStripKhai báo thuộc tính này với ContextMenuStripKhi đó user kích chuột phải lên control thì sẽ hiển thị context Menu đã cài đặt sẵnKhai báo trình xử lý sự kiện Click cho ContextMenuKí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.37Context MenuDemo: 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ư sauListBox hiển thị các item 38Context MenuKéo ContextMenuStrip thả vào Form39Context MenuKích vào ContextMenuStrip để thiết kế menuTạo một menu item “Remove” như hình mô tảSoạn thảo các menu item40Context MenuLiên kết ContextMenu với ListBoxTrong cửa sổ properties của ListBoxKhai báo thuộc tính ContextMenuStrip = ContextMenuStrip1Chọn context menu41Context MenuKhai báo trình xử lý sự kiện Click cho menu item42Context MenuDemoContext Menu hiển thị khi user kích chuột phải lên ListBox43ToolStrip44ToolStripToolStrip là sự thay thế cho ToolBar trong các ứng dụng trước đâyVị trí thường xuất hiện là ngay bên dưới thanh menuCung cấp các button cho phép thực hiện các chức năng thường dùng trong menuToolStrip là dạng container cho phép chứa các controlCác control này dẫn xuất từ ToolStripItemCác control bao gồmToolStripSplitButtonToolStripDropDownbuttonToolStripLabelToolStripProgressBarToolStripSeparatorToolStripComboBoxToolStripTextBox45ToolStripCách tạo button trên ToolStripKéo ToolStrip thả vào formAdd ToolStripButtonTạo button46ToolStripBổ sung image cho buttonSử dụng thuộc tính Images để thiết lập47ToolStripCác buttonSplit barToolStrip48ToolStripKhai báo trình xử lý sự kiện Click cho ToolStripButtonKhai báo tương tự như các buttonKích đúp vào button trong Design ViewThông thường các button là các chức năng thường sử dụng chứa trong menuVD: các button New, Open, SaveDo đó 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”49ToolStripDemo: tạo thanh menubar cho phép nhập URL và khi nhấn enter chương trình sẽ open địa chỉ đóToolStripLabelToolStripTextBoxWebBrowserDock=Fill50ToolStripXử lý sự kiện KeyDown cho ToolStripTextBox51ToolStripDemo52StatusStrip53StatusStripHiển thị thông tin trạng thái của ứng dụngNằm bên dưới cùng của Form.Các lớp liên quanStatusStrip: là container chứa control khácToolStripStatusLabel: control có thể add vào StatusStrip 54StatusStripTạo các item cho StatusStripTạo các item cho StatusStripCác kiểu control cho StatusStrip55StatusStripVí 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 StatusStripKéo Timer thả vào FormThiết lập sự kiện Tick cho Timer với Interval là 1000 msItem dạng Label của StatusStrip56StatusStripDemoToolStripStatusLabelStatusStrip57StatusStripVD: bổ sung hiển thị một hyperlink trên StatusStrip và open hyperlink khi user kích chuộtLabel hiển thị hyperlinkThuộc tính isLink = trueThiết lập với thuộc tính spring = true, Text = “”58StatusStripTạo trình xử lý sự kiện khi user kích vào item Label thứ 3 chứa hyperlinkTrong 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ện59StatusStripDemoLabel thứ 2 fill đầy khoảng trốngKích vào để mở web60Q&A61