Bài giảng VB 6.0 - Chương 2: Thiết kế giao diện

CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN I. CÁC BƯỚC THIẾT KẾ 1 CHƯƠNG TRÌNH 	Chúng ta qua hai bước : B1 : Thiết kế giao diện B2 : Viết code cho chương trình 	Trong chương này chúng ta tìm hiểu việc thiết kế giao diện. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN Quy trình thiết kế giao diện Tạo mới dự án:Vào menu File-> New project CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN Chọn standard.exe -> Open. Form mới được tạo ra có tên mặc định là form1 CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN II. Thiết kế giao diện cho form Đưa vào form các điều kiểm lấy từ thanh công cụ toolbox Đưa đối tượng lên form C1 : Nhấp đúp đối tượng trong toolbox, đối tượng sẽ được tạo giữa form với kích thước mặc định. C2 : Nhấp chuột vào đối tượng cần tạo trong toolbox, kéo chuột đến vị trí cần tạo đối tượng trong form, nhấp và kéo chuột với kích thước mong muốn để tạo đối tượng CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN  CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN 2. Chọn đối tượng trên form 	Chọn một đối tượng: nhấp chuột vào đối tượng đó. 	Chọn nhiều đối tượng: nhấp chuột và kéo quanh những đối tượng cần chọn hoặc nhấn Ctrl và nhấp chuột lần lượt những đối tượng cần chọn. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN 3. Hiệu chỉnh kích thước đối tượng: 	Hiệu chỉnh kích thước một đối tượng: Nhấp vào đối tượng cần chọn, xuất hiện 8 hình vuông nhỏ. Ta nhấp chuột vào 1 trong 8 hình vuông đó để hiệu chỉnh kích thước. 	Hiệu chỉnh kích thước cùng lúc nhiều đối tượng: Để hiệu chỉnh kích thước các đối tượng cho bằng nhau, ta chọn các đối tượng đó. Sau đó dùng menu Format  Make same size  Width/Height/Both. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN 4. Sắp xếp các đối tượng:Sắp xếp đối tượng thẳng hàng: chọn các đối tượng cần sắp xếp, sau đó dùng menu Format  Align  Tops. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN Sắp xếp các đối tượng thẳng cột : chọn các đối tượng cần sắp xếp, Format  Align  Lefts. Cân chỉnh vị trí cách đều: Để khoảng các giữa các đối tượng trên cùng một hàng cách đều nhau, chọn cảc đối tượng trên hàng đó, Format  Horizontal Spacing  Make Equal. Cân chỉnh vị trí các đối tượng trên cùng cột cách đều nhau : làm tương tự nhưng dung menu Format  Vertical Spacing  Make Equal. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN 5. Hiệu chỉnh các thuộc tính của đối tượng 	Chọn đối tượng đó, chọn thuộc tính cần thay đổi trong cửa sổ thuộc tính (Property) để thay đổi. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN 6. Xóa đối tượng 	Chọn đối tượng đó rồi nhấn nút Del trên bàn phím hoặc nhấp chuột phải vào đối tượng đó và chọn menu Delete. 7. Thêm một form mới 	Nhấp chuột phải trong cửa sổ Project, chọn menu Add  Form. 	Nhấp đúp chuột vào biểu tượng Form trong cửa sổ Add Form (với tab New), một form mới sẽ được thêm vào project. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN Trường hợp thêm một form có sẵn trên đĩa cứng: 	Nhấp chuột phải trong cửa sổ Project, chọn menu Add  Form. 	Chọn tab Existing trong cửa sổ Add Form. Sau đó, nhấp đúp vào form cần thêm vào. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN 8. Xóa một form 	Nhấp chuột phải vào form muốn xóa trong cửa sổ Project. 	Chọn menu Remove form. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN Mở dự án đã cóMenu File -> Open project -> tìm tới file cần mở ->Open. Nếu cửa sổ thiết kế không xuất hiện, ta làm như sau : C1 : Nhấn F5 để chạy chương trình, khi biểu mẫu chương trình đang thực hiện, đóng chương trình lại. Vào menu view chọn object. C2 : Mở cửa sổ Project Explorer, click form cần mở, click chọn tab (biểu tượng) view object. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN Quy trình viết code cho chương trình. TH1 : Nếu đang ở cửa sổ thiết kế, R-Click vào vị trí bất kỳ trong form -> View code TH2 : Để sửa code cho project đã có vào Menu File -> Open project -> chọn tên chương trình -> Open. Sau đó : 	C1 : nhấn F5-> mở cửa sổ Explorer->view code 	C2 : đóng chương trình ->view ->view code Ta được cửa sổ view code. CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN Trong cửa sổ này có 2 hộp combobox Hộp trái : chứa tất cả các điều kiểm có trên form Hộp phải : chứa các biến cố có thể có cho điều kiểm tương ứng.  CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN Muốn viết lệnh cho điều kiểm nào, chọn tên điều kiểm đó từ danh sách, chọn biến cố ở hộp bên phải, có 2 câu lệnh cho sẵn Private sub Cmdcommand1_click() …. End sub CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN Nhập các lệnh giữa thân cho thủ tục. Chạy thử chương trình : nhấn F5 hoặc nút Chỉnh sửa các chi tiết cần thiết.  CHƯƠNG 2 : THIẾT KẾ GIAO DIỆN