Thiết kế dialog thông qua màn hình thiết kế mà ta vừa nhận được từ
bước trên. Các thao tác cơ bản như sau:
• Bật / Tắt thanh công cụ hỗ trợ thiết kế dialog: - Chọn mục menu Tools / Customize...
- Đánh dấu hoặc bỏ đánh dấu mục Controls. Chọn Close.
(Thanh công cụ với các loại control sử dụng được trên dialog)
• Ấn định các đặc tính của dialog resource: Right-clict trên khung dialog resource (vùng không cài controls), chọn mục Properties:
Hộp hội thoại 101
à ID : Số hiệu của dialog resource. à Caption : Nội dung tiêu đề của dialog.
à Menu : Số hiệu của menu resource gắn vào dialog. à Font : Ấn định font dùng cho nội dung chữ trên dialog. - Chọn Styles để ấn định thông số dạng cửa sổ của dialog:
à Style : Đặc tính của dialog. Chẳng hạn chọn Popup cho phép dialog tạo ra có thông số dạng WS_POPUP. à Border : Kiểu đường viền của dialog.
à Title Bar : Dialog có tiêu đề.
à System Menu : Dialog có hộp System Menu.
- Chọn More Styles để ấn định các thông số dạng mở rộng:
à Visible : Dialog hiển thị. Đối với dialog resource dùng cho modeless dialog thì mục này phải luôn được chọn.
- Chọn Extended Style để ấn định các thông số dạng mở rộng: à ToolWindow : Tương ứng WS_EX_TOOLWINDOW. à Static edge : Vùng client được chìm xuống (3D). Gõ phím Enter để kết thúc.
• Cài đối tượng mục thông báo lên dialog:
- Click chọn biểu tượng trên thanh công cụ.
- Drag chuột trên vùng dành cho mục thông báo trên dialog. - Right-click trên đối tượng mục thông báo vừa cài đặt, chọn mục
Properties. Thực hiện các ấn định cần thiết:
à ID : Số hiệu mục thông báo, mặc nhiên IDC_STATIC. Để dialog nhận diện được mục khi xử lý message thì giá trị này phải được khai báo tường minh và duy nhất.
à Caption : chuỗi thông báo Style :
à Visible : Nếu đánh dấu thì mục được hiển thị.
à Align Text : Canh chỉnh nội dung thông báo trong mục.
à Center Vertically : Canh chỉnh giữa nội dung thông báo theo chiều dọc trong mục.
à Border : Có khung bao quanh mục thông báo. à Sunken : Khung chìm.
à Notify : Mục thông báo có khả năng thông tin cho cửa sổ cha. Extened style :
à Transparent : Nền mục trong suốt.
102 Lập trình Windows với MFC - Microsoft Visual C++ 6.0 - Lê Ngọc Thạnh - lntmail@yahoo.comà Static edge : Khung chìm. à Static edge : Khung chìm.
• Cài đối tượng hộp nhập lên dialog:
- Click chọn biểu tượng trên thanh công cụ.
- Thực hiện cài đặt và ấn định thông số như với mục thông báo: à Multi Line : Hộp nhập cho phép nhập nhiều dòng. (adsbygoogle = window.adsbygoogle || []).push({});
à AutoHScroll/AutoVScroll : Tự động trượt nội dung khi thông tin nhập vượt quá kích thước hộp nhập.
à HorizontalScroll | VerticalScroll : Hiển thị thanh trượt ngang, dọc của hộp nhập.
à Want return : Sử dụng phím enter để xuống dòng trong hộp nhập nhiều dòng.
à Password : Dùng nhập password.
• Cài đối tượng comboBox lên dialog:
- Click chọn biểu tượng trên thanh công cụ.
- Thực hiện cài đặt và ấn định thông số như với mục thông báo: à Data : Chứa các mục chọn. Các mục này được nhập trên các
dòng khác nhau. Lưu ý dùng phím Ctrl+Enter để xuống dòng. à Type : Kiểu comboBox.
à Sort : Các mục trong comboBox được sắp xếp theo nội dung.
• Cài đối tượng comboBox lên dialog:
- Click chọn biểu tượng trên thanh công cụ.
- Thực hiện cài đặt và ấn định thông số như với mục thông báo: à Selection : Kiểu listbox.
à Multi-column : Listbox có nhiều cột.
à Want Key Input : Lisbox cho phép xử lý phím.
• Cài đối tượng button lên dialog:
- Click chọn biểu tượng trên thanh công cụ.
- Thực hiện cài đặt và ấn định thông số như với mục thông báo: à Default Button: Button ứng với phím tắt là Enter.
à Multi-lines: Nội dung thông báo của button có nhiều dòng. à Notify : Button có khả năng thông tin cho cửa sổ cha.
• Đánh dấu chọn các đối tượng trên dialog: Thực hiện thao tác click. Phối hợp phím Shift hoặc Ctrl để đánh dấu nhiều đối tượng.
• Chỉnh vị trí của một đối tượng: Thực hiện thao tác drag đối tượng.
• Chỉnh kích thước của một đối tượng: - Click chọn đối tượng.
Hộp hội thoại 103
- Thực hiện thao tác Drag trên biên của đối tượng để đạt kích thước mong muốn.
• Canh chỉnh vị trí, kích thước một nhóm đối tượng: - Đánh dấu nhóm đối tượng
- Chọn công cụ phù hợp trên thanh công cụ: à Canh thẳng theo biên:
à Canh thẳng giữa dialog: à Các đều nhau:
à Bằng cỡ đối tượng chọn cuối cùng trong nhóm: 9.3.2 Khai báo lớp kế thừa CDialog sử dụng dialog resource:
Thông qua lớp này, ta thực hiện cài đặt các xử lý phù hợp trên dialog và các đối tượng nhập liệu được mô tả trong dialog resource ở trên.
Trong màn hình thiết kế dialog, chọn View / ClassWizard (Ctrl+W).
Chọn OK để tạo lớp mới ứng với dialog resource. (adsbygoogle = window.adsbygoogle || []).push({});
- Name = COptionDlg : Nhập tên lớp mới
104 Lập trình Windows với MFC - Microsoft Visual C++ 6.0 - Lê Ngọc Thạnh - lntmail@yahoo.com- File name = OptDlg : Tên tập tin, - File name = OptDlg : Tên tập tin,
- Base class = CDialog : Lớp cơ sở
- Dialog ID = IDD_OPTION : Số hiệu dialog resource. Sau cùng chọn OK.
Đóng màn hình thiết kế dialog. Trong màn hình Workspace, chọn ClassView, ta có lớp COptionDlg trong danh sách các lớp của dự án. Trên lớp COptionDlg, ta có thể thực hiện bổ sung thuộc tính, cài đặt các hành vi thông thường cũng như các hành vi xử lý message. Các thao tác hoàn toàn tương tự như đã thực hiện với các lớp CEmpApp và CEmpWnd. 9.3.3 Sử dụng dialog trong chương trình:
Khai báo đối tượng thuộc lớp dialog mới tạo. Dùng chỉ thị #include tập tin (.H) chứa khai báo lớp ở đầu chương trình:
#include "Optdlg.h" // EmpWnd.cpp : implement file
...
COptionDlg dlg (this); // Đối tượng COptionDlg
Gọi hành vi DoModal hoặc Create của đối tượng dialog một cách phù hợp tùy theo yêu cầu dùng dialog khóa hay không khóa.
dlg.DoModal(); // Dialog hoạt động ở chế độ khóa 2 Thực hành: Bổ sung dự án VD25: Cài đặt hành vi xử lý mục chọn Option
trên menu cho CEmpWnd với nội dung thực hiện dialog COptionDlg. Bổ sung hành vi xử lý mục chọn Option cho lớp CEmpWnd.
Trong phần cài đặt hành vi này, ta khai báo đối tượng COptionDlg và gọi hành vi DoModal của nó:
void CEmpWnd::OnGameOption () {
COptionDlg dlg(this); dlg.DoModal(); }
9.4 LIÊN KẾT GIỮA DIALOG VAØ CÁC THAØNH PHẦN KHÁC:
Dialog là công cụ giao diện rất tiện lợi với người dùng. Tạo mối liên kết giữa dialog và các thành phần khác của ứng dụng để trao đổi thông tin từ người dùng là vấn đề thường gặp. Vấn đề này có thể giải quyết như sau:
Đối tượng nhận thông tin sẽ chuyển con trỏ (handle) quản lý mình cho đối tượng cung cấp thông tin.
Hộp hội thoại 105
Đối tượng cung cấp thông tin sẽ dùng handle của đối tượng nhận tin để xác định các ô chứa tin của đối tượng này, sau đó điền các thông tin của mình vào các ô chứa tin của đối tượng nhận tin.
2 Thực hành: Tạo ứng dụng VD26 như VD25. Thực hiện các bổ sung: Khi option dialog hoạt động, người dùng gõ thông tin vào hộp nhập. Nếu người dùng chọn OK thì thông tin nhập chuyển vào hộp nhập YourName trên cửa số chính, ngược lại mục chọn Cancel sẽ không xử lý gì cả.
HD: Mục nhập YourName được quản lý bởi thuộc tính m_editName của đối tượng CEmpWnd, đây là ô chứa tin của đối tượng nhận tin CEmpWnd. Đối tượng COptionDlg là đối tượng cung cấp tin. Xử lý điền thông tin chỉ xảy ra khi người dùng chọn OK. Xử lý này được cài đặt trong hành vi mà đối tượng COptionDlg dùng để trả lời thao tác click trên nút OK.
Các bước thực hiện dự án VD26:
Tạo dự án VD26 tương tự dự án VD25.
Hành vi thực hiện OptionDlg trong CEmpWnd sử dụng dùng con trỏ chỉ đến nó làm tham số cho hành vi tạo lập của đối tượng COptionDlg: void CEmpWnd::OnGameOption ()
{
COptionDlg dlg( this ); dlg.DoModal(); }
Bổ sung thuộc tính protected m_parent kiểu con trỏ CEmpWnd* cho lớp COptionDlg. Thuộc tính này được dùng để chứa con trỏ đến cửa sổ cha của COptionDlg (CEmpWnd). Bổ sung #include "EmpWnd.h" vào đầu tập tin khai báo (.h) của lớp COptionDlg.
Hành vi tạo lập của COptionDlg lưu giữ giá trị con trỏ cửa sổ cha được truyền cho nó vào thuộc tính m_parent.
COptionDlg::COptionDlg ( CWnd* pParent ) (adsbygoogle = window.adsbygoogle || []).push({});
: CDialog( COptionDlg::IDD, pParent ) {
m_parent = (CEmpWnd*) pParent; //{{AFX_DATA_INIT(COptionDlg)
// NOTE: the ClassWizard will add member initialization here //}}AFX_DATA_INIT
}
106 Lập trình Windows với MFC - Microsoft Visual C++ 6.0 - Lê Ngọc Thạnh - lntmail@yahoo.com Hành vi xử lý chọn nút OK của lớp COptionDlg: Thực hiện việc lấy Hành vi xử lý chọn nút OK của lớp COptionDlg: Thực hiện việc lấy
thông tin từ hộp nhập của nó để gán cho đối tượng hộp nhập m_editName trên cửa sổ cha CEmpWnd.
void COptionDlg::OnOK() {
CString name;
// Lấy thông tin nhập trong hộp nhập của dialog GetDlgItemText( IDC_NAME, name );
// và chuyển thông tin này sang hộp nhập trên cửa số chính m_parent->m_editName.SetWindowText( name ); // Dùng hành vi lớp cơ sở để kết thúc dialog.
CDialog::OnOK(); }
) Hành vi OnOK của lớp COptionDlg bị lỗi do truy xuất thuộc tính kiểu protected m_editName của lớp CEmpWnd. Để khắc phục lỗi này, ta khai báo lớp COptionDlg là một lớp bạn (friend) của lớp CEmpWnd. class CEmpWnd : public CWnd
{
friend class COptionDlg; // COptionDlg is a friend public:
CEmpWnd();
... // other declarations
} ;
9.5 SỬ DỤNG DIALOG LAØM GIAO DIỆN CHÍNH CỦA ỨNG DỤNG: Kế thừa từ CWnd, lớp CDialog và các lớp kế thừa từ nó có thể dùng khai Kế thừa từ CWnd, lớp CDialog và các lớp kế thừa từ nó có thể dùng khai báo các đối tượng cửa sổ giao diện chính của ứng dụng.
9.5.1 Thực hiện ứng dụng với giao diện chính là dialog:
Tạo dự án VD27 tương tự VD03 (dự án chỉ có lớp kế thừa CWinApp). Tạo dialog resource có nội dung tùy ý làm giao diện chính.
Tạo lớp quản lý dialog resource. Giả sử lớp có tên là CMainDlg có mã nguồn trong các tập tin MainDlg.H và MainDlg.CPP.
Đăng ký sử dụng lớp CMainDlg cho phần cài đặt của lớp quản lý ứng dụng: Bổ sung vào đầu tập tin cài đặt của lớp (VD27.cpp):
#include "maindlg.h" // at the begin of program
Hộp hội thoại 107
BOOL CEmpApp::InitInstance () {
CMainDlg main; // Khai báo đối tượng dialog m_pMainWnd = &main; // Dùng dialog làm cửa sổ chính main.DoModal(); // Thực hiện dialog
return TRUE; }
* Cài biểu tượng ứng dụng trên tiêu đề của dialog:
Khai báo style là Popup hoặc Overlap cho dialog resource. Hành vi OnInitDialog của dialog sẽ thực hiện cài đặt icon
BOOL CMainDlg::OnInitDialog() { CDialog::OnInitDialog(); (adsbygoogle = window.adsbygoogle || []).push({});
SetIcon(AfxGetApp()->LoadIcon(IDR_MAINFRAME), TRUE); return TRUE;
}
9.5.2 Dùng MFC wizard tạo ứng dụng với giao diện chính là dialog:
Để người dùng có ngay một dự án cỡ VD27 mà không phải mất công thực hiện các việc như trên, MFC wizard cung cấp chức năng hỗ trợ tạo nhanh dự án với dialog làm cửa sổ chính. Cách sử dụng chức năng hỗ trợ này như sau:
Chọn menu File / New.
108 Lập trình Windows với MFC - Microsoft Visual C++ 6.0 - Lê Ngọc Thạnh - lntmail@yahoo.com Điền các thông tin trong hộp hội thoại New, Sau đó chọn OK. Điền các thông tin trong hộp hội thoại New, Sau đó chọn OK.
Hộp hội thoại 109
Ấn định các mục chọn như trên. Sau đó chọn Next.
Chọn cơ chế liên kết với thư viện MFC. Sau đó chọn next.
Cuối cùng, ấn định tên tập tin chứa khai báo các lớp. Chọn Finish. Biên dịch và chạy thử ứng dụng.
9.6 KHAI BÁO BIẾN CHO CONTROL TRÊN DIALOG:
Khai báo biến cho control trên dialog là thực hiện định nghĩa biến đối tượng có kiểu phù hợp và thiết lập mối quan hệ giữa biến đối tượng và control liên quan. Thông qua biến đối tượng, ta dễ dàng tiến hành các xử lý cần thiết để tác động hoặc lấy giá trị của control. Có hai loại biến:
- Biến giá trị (value variable): Biến được sử dụng để lưu trữ giá trị của control.
- Biến điều khiển (control variable): Biến đối tượng, có kiểu phù hợp và các hành vi xử lý cần thiết, được sử dụng để tác động lên control. áĐồng bộ nội dung nhập trong control và nội dung biến giá trị:
Khi người dùng thao tác nhập liệu trên control, nội dung nhập chưa thực sự trở thành giá trị của biến. Ngược lại, việc gán trị cho biến cũng không làm thay đổi ngay nội dung hiển thị trong control.