Xây dựng giao diện ứng dụng winform dựa trên công cụ diagrams. Nắm được cách thiết kế trên công cụ thiết kế giao diện diagrams. Tư duy được giao diện các màn hình chức năng của phần mềm để thực hiện thiết kế.
BÀI THỰC HÀNH THIẾT KẾ GIAO DIỆN PHẦN MỀM Buổi Thiết kế giao diện ứng dụng winform I Mục tiêu - Xây dựng giao diện ứng dụng winform dựa công cụ diagrams - Nắm cách thiết kế công cụ thiết kế giao diện diagrams - Tư giao diện hình chức phần mềm để thực thiết kế II Nội dung - Thiết kế giao diện quản lý danh mục thông tin sách với yêu cầu sau: + Các thông tin cần lưu trữ có thêm đầu sách nhập thư viện là: mã sách, tên sách, năm xuất bản, ảnh bìa, tình trạng, thể loại, + Có thể thêm, sửa, xố, lưu xuất thơng tin sách có thư viện + Giao diện phải thể số lượng sách có thư viện + Có thể quay giao diện trước/tiến đến giao diện sau + Có thể tìm kiếm sách theo từ khoá - Các bước thực hiện: + Tạo file thiết kế diagrams + Xây dựng giao diện đăng nhập ứng dụng + Xây dựng giao diện danh mục thông tin sách + Xây dựng giao diện thêm sách + Hoàn thiện thực hành Tạo file thiết kế diagrams Truy cập địa chỉ: https://app.diagrams.net/ - Chọn nơi lưu file thiết kế: - Chọn Thiết bị để lưu file thiết kế vào máy tính Có thể chọn Drive, Dropbox… để lưu file thiết kế online - Nhập Email sau bấm Tiếp theo, nhập mật sau - Bấm vào Tạo biểu đồ để tạo file thiết kế - Đặt tên cho file thiết kế - Chọn vào biểu đồ trống - Cuối bấm vào Tạo để khởi tạo biểu đồ - Chọn thư mục lưu file thiết kế: - Giao diện làm việc công cụ - Thực kéo thả đối tượng để thiết kế giao diện + hình khối, biểu tượng để sử dụng xây dựng thiết kế + trang thiết kế + khung dùng để chỉnh sửa, phong cách thiết kế + menu chức công cụ + Trung tâm nơi thiết kế Xây dựng giao diện đăng nhập ứng dụng quản lý thông tin sách - Khởi động phần mềm quản lý thư viện, phần mềm có giao diện đăng nhập phần mềm Gợi ý giao diện đăng nhập phần mềm Tiến hành thực thiết kế giao diện: + Sử dụng frame Rectangle đặt vào trung tâm giao diện thiết kế Điều chỉnh kích thước frame + Sử dụng text để tạo text cho frame + Thực thêm ô nhập tài khoản mật khẩu: + Điều chỉnh kích thước phù hợp với hình + Thêm check box Nhớ mật khẩu: + Thêm dòng text Nhớ mật + Thêm Button Đăng nhập + Sử dụng cơng cụ tìm kiếm để tìm kiếm button Nhập từ khố tìm kiếm, sau enter + Chọn button thích hợp đặt vào frame, điều chỉnh kích thước button - Thêm text Quên mật khẩu? - Chọn vào tab Trang-1, bấm vào đổi tên, thực đổi tên thành: Màn hình đăng nhập - Như thiết kế giao diện đăng nhập phần mềm Xây dựng giao diện danh mục thơng tin sách - Phân tích thơng tin cần hiển thị: Đăng nhập phần mềm thành công, hiển thị danh mục sách thư viện + Hiển thị số lượng sách kho + Có button Thêm mới, sửa, xố liệu + Có textbox tìm kiếm sách theo tên sách + Có selectbox tìm kiếm sách theo loại sách + Có button tìm kiếm, button bỏ điều kiện lọc Gợi ý giao diện danh mục sách Tiến hành thiết kế giao diện: - Bấm vào dấu + để thực tạo tab để thiết kế giao diện: