Bài giảng môn Tin học: Chương 4 - TS. Nguyễn Văn Hiệp

MÔN TIN HỌC<br /> Chương 4<br /> <br /> QUI TRÌNH THIẾT KẾ TRỰC QUAN<br /> GIAO DIỆN CỦA ỨNG DỤNG<br /> 4.1 Dự Án Và Ứng Dụng<br /> 4.2 Tạo/xóa đối tượng giao diện.<br /> 4.3 Hiệu chỉnh giá trị thuộc tính của đối tượng giao diện<br /> 4.4 Tạo menubar<br /> 4.5 Tạo Toolbar<br /> 4.6 Tạo và viết thủ tục xử lý sự kiện<br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 93<br /> <br /> 4.1 Dự Án Và Ứng Dụng<br /> 1 ứng dụng VB được cấu thành từ nhiều đối tượng thuộc nhiều loại :<br /> ƒ<br /> <br /> Các phần tử giao diện<br /> <br /> ƒ<br /> <br /> Các "class module", mỗi class đặc tả 1 loại đối tượng cần dùng cho<br /> giải thuật của chương trình.<br /> <br /> ƒ<br /> <br /> Các đối tượng khác như các thư viện liên kết động, các database,...<br /> <br /> Để quản lý ứng dụng được dễ dàng ta sử dụng phương tiện "Dự án"<br /> (Project). Dự án là 1 cây thứ bậc các phần tử cấu thành ứng dụng. Viết<br /> ứ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<br /> dự án.<br /> 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 đã<br /> biết trên hệ thống file thứ bậc của máy tính.<br /> <br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 94<br /> <br /> 47<br /> <br /> Khởi động VB 6.0<br /> VB là 1 ứng dụng như bao ứng dụng khác. Để khởi động 1 ứng dụng,<br /> ta có nhiều cách khau nhau :<br /> ƒ<br /> chọn<br /> menu<br /> Start.Programs.Microsoft<br /> Visual<br /> Basic<br /> 6.0.Microsoft Visual Basic 6.0.<br /> ƒ<br /> Ấn kép chuột vào icon shortcut của VB trên màn hình desktop<br /> (ta phải tạo trước icon shortcut này).<br /> ƒ<br /> chọn menu Start.Run, rồi nhập hàng lệnh chạy ứng dụng, thí dụ<br /> như "c:\Program Files\Microsoft Visual Studio\VB98\VB6.exe".<br /> ƒ<br /> dùng trình quản lý hệ thống file WE, duyệt đến thư mục chứa<br /> file chương trình VB (thí dụ c:\Program Files\Microsoft Visual<br /> Studio\VB98), ấn kép vào file chương trình VB6.exe.<br /> Sau khi VB được khởi động, ta thường thấy cửa sổ màn hình như<br /> sau:<br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 95<br /> <br /> Cửa sổ khởi động VB<br /> <br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 96<br /> <br /> 48<br /> <br /> Tạo mới dự án<br /> Cửa sổ New Project của VB có ba thẻ (Tab) :<br /> ƒ<br /> New : tạo mới một dự án (tab này được chọn default)<br /> ƒ<br /> Existing : Mở 1 dự án đã có sẵn trên máy (dự án cũ nào đó).<br /> ƒ<br /> Recent : Mở 1 dự án trong n dự án gần hiện tại nhất.<br /> Với tab New được chọn, bạn có thể tạo 1 dự án theo 1 loại nào đó,<br /> nhưng đối với các ứng dụng thông thường ta sẽ dùng loại dự án<br /> "Standard EXE". Ấn kép vào icon "Standard EXE" để tạo mới dự án<br /> tương ứng. 1 form mới được tạo ra tự động để bạn có thể thiết kế trực<br /> quan form giao diện này.<br /> Qui trình thiết kế giao diện là tuần tự thiết kế từng form theo yêu cầu,<br /> nếu muốn tạo mới 1 form khác (hay 1 đối tượng nào đó vào dự án),<br /> bạn ấn kép chuột vào cửa sổ Project, dời chuột đến menu "Add", rồi<br /> chọn mục "Form" trong danh sách.<br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 97<br /> <br /> Thí dụ về form thiết kế : MiniCalculator<br /> Control buttons<br /> Window ≡ Form,<br /> Dialogbox<br /> Title bar<br /> Menu<br /> Toolbar<br /> Textbox<br /> Command Button<br /> <br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 98<br /> <br /> 49<br /> <br /> 4.2 Tạo 1 đối tượng giao diện trên form<br /> ƒ<br /> <br /> Để hiển thị và làm việc trực quan với 1 form, ấn kép chuột vào mục<br /> tên form trong cửa sổ Project.<br /> <br /> ƒ<br /> <br /> Để tạo mới 1 đối tượng giao diện trong form, dùng chuột chọn icon<br /> tương ứng với đối tượng trong cửa sổ Toolbox rồi vẽ đối tượng ở vị trí<br /> và kích thước mong muốn trên form.<br /> <br /> ƒ<br /> <br /> Bạn cũng có thể tạo mới đối tượng giao diện dùng cơ chế sinh sản vô<br /> tính : chọn đối tượng đã có, ấn button Copy trên Toolbar rồi ấn button<br /> Past trên Toolbar, đối tượng mới sinh ra giống y như đối tượng có sẵn<br /> (nên đặt lại tên khác bằng cách chọn button "No" trong hộp thoại yêu<br /> cầu sau khi ấn icon Past). Đây là 1 trong nhiều cách để tạo nhiều đối<br /> tượng có kích thước giống hệt nhau.<br /> <br /> Thí dụ slide sau miêu tả trạng thái của form sau khi ta vẽ được 1 textbox<br /> hiển thị số và 5 button bên trái nhất của máy tính.<br /> <br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 99<br /> <br /> 4.3 Thiết lập giá trị cho các thuộc tính<br /> ƒ<br /> <br /> Để dễ cân chỉnh vị trí<br /> và kích thước của các<br /> đối tượng, ta nên thiết<br /> lập các thuộc tính cơ<br /> bản sau : "Name",<br /> "Caption". Thuộc tính<br /> "Name" được dùng để<br /> truy xuất đối tượng lúc<br /> lập trình, còn thuộc<br /> tính "Caption" được<br /> hiển thị trên phần tử<br /> (không phải đối tượng<br /> nào cũng có Caption).<br /> <br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 100<br /> <br /> 50<br /> <br /> Thiết lập giá trị cho các thuộc tính (tt)<br /> ƒ<br /> <br /> Để xem và hiệu chỉnh<br /> giá trị của các thuộc<br /> tính của 1 đối tượng<br /> giao diện, bạn ấn<br /> chuột chọn đối tượng,<br /> cửa sổ Properties bên<br /> phải màn hình sẽ<br /> hiển thị các thuộc tính<br /> của đối tượng được<br /> chọn. Bạn duyệt các<br /> thuộc tính từ trên<br /> xuống và nhập vào<br /> giá trị mới cho thuộc<br /> tính mong muốn.<br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 101<br /> <br /> Cân chỉnh kích thước các đối tượng<br /> 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<br /> bằng nhau, do đó bạn nên dùng cơ chế sinh sản vô tính (Copy-Paste). Tuy nhiên<br /> 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<br /> nhau, bạn chọn các đối tượng rồi chọn menu Format.Make Same Size.Both (bằng<br /> kích thước của đối tượng được chọn cuối cùng).<br /> <br /> Khoa Công nghệ Thông tin<br /> Trường ĐH Bách Khoa Tp.HCM<br /> <br /> Môn : Tin học<br /> Chương 4: Qui trình thiết kế trực quan giao diện của ứng dụng<br /> Slide 102<br /> <br /> 51<br /> <br />