Интернет-журнал "Домашняя лаборатория", 2007 №1

Уроки программирования на Visual C++ с помощью MFC

Первый урок посвящен созданию программы HELLO.EXE, которая будет выводить диалоговую панель с кнопками Say Hello и Exit, при нажатии на кнопку "SAY HELLO" выводится сообщение "Say Hello".

Второй урок посвящен созданию программы TEST.EXE. В программе при вводе в окне редактирования " paint" — запускается редактор Paint, а при вводе Calculator-Windows Калькулятор. При снятии флажков, элементы панели будут исчезать или будет закрываться к ним доступ.

Третий урок посвящен созданию программы DRAW.EXE. Программа предназначена для рисования с помощью мыши линий, соответствующих ее движениям.

Сейчас вы создадите свою первую программу! Для этого нужно:

1) Создать проект программы

2) Визуально спроектировать диалоговую панель

3) Связать элементы управления с событиями

4) Сохранить и выполнить программу

Теперь рассмотрим все пункты по порядку.

1) Вначале запустим Visual C++. Зайдем в меню FILE — > NEW…, выберем там Project. Ваша панель должна выглядеть теперь так:

Затем выбираем MFC AppWizard(exe). В окне редактирования Project Name задаем имя программы и нажимаем ОК.

STEP1 Теперь выбираем Dialog based, как показано на рис 1.1. Вы задали компилятору, что программа ваша будет основана на диалоговых окнах.

STEP2 В этой панели введите название программы как показано на рис 1.2. Рассмотрим здесь группу "What features would you like to include".

Первое включение говорит о использовании справки (небольшой диалоговой панели, которая всплывает при нажатии на иконку).

Теперь щелкаем NEXT.

STEP3 Вы видите, что диалоговая панель задает два вопроса:

1) Нужно ли вставлять комментарии в исходный текст, который будет являться каркасом вашей программы?

2) Программа, которую создает для вас MFC AppWizard, будет иметь библиотеку с динамической компоновкой (01±), а не статической? DLL дает вам преимущество в том, что ЕХЕ файл будет меньшего размера, а рядом к нему будет прилагаться DLL файл. Выбираем все как показано на рис 1.3

Затем нажимаем NEXT и щелкаем FINISH, посмотрите, чтобы было выбрано все, как показано на рис. 1.4

Вы закончили создание проекта программы!

Все каркасные файлы для вашей программы написал Visual C++, с помощью мастера настроек MFC AppWizard. MFC — это вещь очень полезная, с помощью нее можно быстро создавать программы, так как все дежурные файлы он пишет сам, что сильно облегчает работу программиста, ведь не писать стандартный набор текста каждый раз!

А теперь мы спроектируем диалоговую панель.

Сейчас мы визуально спроектируем диалоговую панель. Для этого вначале выберете закладку "Resourse View" и раскройте пункт Hello Resource, как показано на рис. 1.5.

Здесь вы видите две записи:

1) IDD_ABOUTBOX

2) IDD_HELLO_DIALOG

1) — это название диалоговой панели ABOUT, а 2) — название главной диалоговой панели. Выполните щелчок по второй строчке(2) и справа появится, диалоговая панель. В этом режиме вы можете ее редактировать (см. рис. 1.6).

Удалите из диалоговой панели текст: "TODO:.." и две кнопки, для этого щелкните на эти элементы и нажмите DEL. Теперь у вас чистая панель и вы можете спроектировать ее на свой вкус.

Справа от диалоговой панели находятся элементы управления(если вы их не видите, то зайдите в TOOLS->CUSTOMIZE, в закладке TOOLBARS, CONTROLS — поставьте влажок). Вы можете редактировать панель в полном экране, для этого зайдите в VIEW->FULLSCREEN. Сейчас вы выберети в элементах управления Button,

и щелкните мышкой на диалоговую панель, которая должна выглядеть, как показано на рис. 1.6.

Теперь выделите кнопку мышкой, для этого нажмите на нее и отбуксируйте маркеры, чтобы кнопка стала такой же, как на рис 1.6. После этого опять выделите кнопку левым щелчком мыши, затем нажмите правую кнопку и в раскрывшемся меню выберете Ргореrties(настройки).

Выведется такая диалоговая панель (рис 1.7).

Вместо текста IDC_BUTTONl введите IDC_SAYHELLO_BUTTON, вы задали идентификатор, по которому VC будет распознавать элемент. В строке Captions(надпись), введите название кнопки Say Hello.

Вставьте теперь еще одну кнопку такого же размера, с ID — IDC_EXIT_BUTTON и Captions(надпись) Exit. Ваша диалоговая панель должна выглядеть, как показано на рис. 1.8

Поздравляю, вы закончили визуальное проектирование диалоговой панели!

Отныне все свойства диалогового окна будут задавать таблицей, где будут указываться свойства элементов диалога. К примеру для этого диалога, таблица будет выглядеть так:

Связывание элементов управления

Сейчас мы свяжем элементы управления с событиями. У нас всего два элемента — это две кнопки: Say Hello и Exit.

Теперь мы будем пользоваться еще одним мастером ClassWizard, он сильно облегчит нам работу. Зайдите в VIEW->ClassWizard, появится такая диалоговая панель

Рассмотрим эту панель.

1) Project — здесь вы выбираете свой проект.

2) ClassName — название класса, элементы которого вы будете связывать с событиями, проверьте, чтобы там было установлено CHelloDIg — это класс, который связан с главным диалоговым окном.

3) Object IDs — это идентификаторы(названия) элементов управления, в нашем случае это две кнопки. Первый идентификатор — это название самого класса, оно туда включено, так как с ним связаны многие события(это такие значения, которые возвращаются Windows, при совершении какого-нибудь действия).

4) Messages — а это как раз те самые события, которые генерирует программа. К примеру, если вы нажали на кнопку, то генерируется событие BN_CLICKED, а если два раза — то BN_DOUBLECLICKED.

5) Members function — это список функций, которые вы включили, и соответствующие им события.

Теперь свяжем кнопку EXIT с событием BN_CLICKED — оно возникает при нажатие на кнопку. Для этого щелкнем в Object IDs на IDC_EXIT_BUTTON, справа появится события, с которыми можно связать эту кнопку. Выбираем там BN_CLICKED. И щелкаем на кнопке Add Function, которая находится справа. Этим нажатием вы говорите Visual C++, что вам необходимо связать это событие с функцией. Выведетя такая диалоговая панель, где вам предложат выбрать название функции. Оставьте все по умолчанию и нажмите кнопку ОК.

В Members function появилась запись о том, что мы связали кнопку (с идентификатором IDC_EXIT_BUTTON) с функцией OnExitButton. Теперь щелкаем по кнопке Edit Code, которая находится ниже кнопки Add Fucnction. При нажатии на эту кнопку мы переходим в режим редактирования исходного текста. В окошке появится тест:

Вы написали ОnОК();, эта функция будет выполняться при каждом нажатии на кнопку EXIT, и она предназначена для завершения программы. Проверьте, чтобы в написании OnOK, ОК было написано с большой буквы, иначе, при компиляции программы, Visual C++ сообщит вам об ошибке, так символы верхнего и нижнего регистра в VC имеют распознаются по-разному. Итак вы связали кнопку EXIT с событием BN_CLICKED, а его с функцией OnExitButton, которая будет выполняться при каждом нажатии на кнопку EXIT.

Теперь свяжем кнопку Say Hello с событием BN_CLICKED. Для этого зайдем в меню VIEW->ClassWizard.

Выберем в Object IDs IDC_SAYHELLO_BUTTON

Щелкнем на BN_CLICKED в Messages (этим вы связываете кнопку Say Hello с событием BN_CLICKED).

Нажимаем на Add function, этим вы связываете событие BN_CLICKED с функцией.

В раскрывшемся окне оставляем все по умолчанию и нажимаем кнопку ОК.

Затем нажимаем на кнопку Edit Code, для редактирование исходного текста.

И в раскрывшемся окне пишем следующий код:

Функция MessageBox("Say Hello"); вызывает окно сообщений, в котором написан текст Say Hello, который и является параметром этой функции.

Итак, вы связали кнопки Say Hello и EXIT с событием BN_CLICKED. При нажатии на кнопку Exit программа завершается, а при нажатии на кнопку Say Hello выводится сообщение "Say Hello".

Теперь вам осталось построить и выполнить программу. Нажимаем Далее…

Компиляция и запуск программы

Построение и выполнение программы

Для того, чтобы выполнить программу надо ее вначале сохранить. Зайдите в меню File и там нажмите на Save Аll. Затем надо ее построить(скомпилировать).

Зайдем в меню Build->Build Hello.ехе, начнется построение программы. Если компилятор не выдал сообщение об ошибке, которые можно посмотреть в появившемся внизу окошке, то можно смело запускать программу.

Теперь вам осталось только выполнить программу, для этого зайдите в меню Build->Execute Hello.exe

Ваша программа должна будет выглядеть так:

А окно сообщений при нажатии на кнопку Say Hello:

Резюме

В этой главе вы научились создавать проект программы, визуально проектировать диалоговую панель(вставлять различные элементы управления), связывать элементы управления с событиями с помощью мастера ClassWizard, и выполнять программу.

А теперь вашему вниманию предлагается выполнить упражнение для закрепления пройденного материала.

Упражнение к Уроку

Упражнение

Сейчас вы выполните упражнение. Вам необходимо вставить еще одну кнопку с названием Веер с идентификатором IDC_BEEP_BUTTON, при нажатии на которую компьютер подает сигнал через динамик компьютера.

Функция для подачи сигнала — MessageBeep((WORD)-2);.

Окно вашей программы должно будет выглядеть так:

Ответ к упражнению

Щелкнем на закладку Resource View, раскроем меню Hello Resource, там откроем Dialog и щелкнем мышкой два раза на IDD_HELLO_DIALOG. Откроется окно проектирования.

Вставим туда еще одну кнопку с идентификатором IDC_BEEP_BUTTON и надписью (Сарtion) — Веер.

Заходим в меню View->ClassWizard, выбираем в Object IDs IDC_BEEP_BUTTON, в Messages щелкаем на BN_CLICKED и нажимаем на Add Function, там оставляем все по умолчанию и жмем ОК, затем нажимаем на кнопку Edit Code. И вводим такой текст:

Теперь выполняем программу, для этого заходим в меню Build->Build Hello.exe, а потом в меню Build выбираем Execute Hello.exe

Вы закончили первый урок!

Сейчас мы создадим программу TEST.EXE

Посмотрим на ее спецификацию и что она должна делать.

• При вводе в строке редактирования слов "Paint" и "Calculator", запускаются соответственно "Windows Paint" и "Windows Calc".

• При снятии флажка Visible, строка редактирования исчезает, а при снятии флажка Enabled, закрывается доступ к окну редактирования.

• При отмечании флажков, все происходит наоборот.

При запуске вашей программы, главное окно должно будет выглядеть так:

План урока:

1) Создание проекта программы

2) Визуальное проектирование диалоговой панели

3) Связывание переменных с окном редактирования и флажками

4) Связывание элементов управления с событиями

5) Резюме, Упражнение и ответ к упражнению.

Теперь рассмотрим все пункты по порядку.

• Вначале запустим Visual C++. Зайдем в меню FILE —> NEW…, выберем там Project. Ваша панель должна выглядеть теперь так:

• Выберем там MFC AppWizard(exe), это значит вы хотите создать запускаемый файл.

• В Project Name задайте имя программы Test. И щелкните ОК.

• В раскрывшемся окне(SТЕР1) выберете Dialog Based. Это означает, что ваша программа будет основана на диалоге. Щелкните Next.

• В STEP2 задайте в Please enter title of your dialog имя программы The Test Program.

Остальное оставьте без изменения и нажмите NEXT.

• В STEP3 Оставьте все без изменения и щелкните NEXT. Здесь вы указали, что ваша программа будет иметь библиотеку с динамической компоновкой (DLL), а не статической.

• В STEP4 Оставьте все без изменения. Посмотрите, чтобы в Class Name было выбрано CTestApp и щелкните FINISH.

Вы закончили создание проекта программы!

Все каркасные файлы для вашей программы написал Visual C++, с помощью мастера настроек MFC AppWizard.

MFC — это вещь очень полезная, с помощью нее можно быстро создавать программы, так как все дежурные файлы он пишет сам, что сильно облегчает работу программиста, ведь не писать стандартный набор текста каждый раз!

А теперь мы спроектируем диалоговую панель.

Сейчас мы визуально спроектируем диалоговую панель. Для этого вначале выберете закладку "Resourse View" и раскройте пункт Hello Resource, как показано на рис. 1.5.

Выполните следующие действия

• Щелкните два раза по надписи IDD_TEST_DIALOG. Справа появится окно проектирования диалоговой панели.

• С помощью панели Controls расставьте элементы, управления как показано на рис. 2.0 и согласно таблице 2.0.

Теперь рассмотрим все пункты по порядку.

• В объекте Dialog Box вы задаете следующие данные:

Caption — название диалогового окна.

Font — здесь вы установили шрифт — System и его размер 10

Панель Minimize и Maximaze отмечены для того, чтобы вы могли свертывать окно и наоборот рассматривать его во весь экран. Для их установки вам необходимо зайти в Dialog Box Propertions и на странице Styles отметить их.

• Edit Box — это окно редактирования, в нем вы можете вводить свой текст. Мы не задавали этому элементу никаких дополнительных параметров, нам необходимо только знать его идентификатор (IDС_ТЕSТ_ЕDIТ).

• В следующем пункте Group Box, который служит для выделения элементов управления в рамку. Этот элемент выглядит так:

Вы указали для этого элемента название (Сарtion) Test и идентификатор IDC_STATIC.

• Static Text — это элемент текста, он вставляется как обычный элемент управления, но не выполняет ни каких функций, так как служит для показа текста, который вы зададите в Captions. В данном случае мы вставляем инструкцию по применению программы: INSTRUCTIONS: То execute…. Вы, наверное, заметили, что этот элемент имеет такой же идентификатор, как и у Group Box, так как мы не будем их использовать в программе и связывать с ними события(хотя это и невозможно).

• Следующие два элемента Check Box с Captions &Visible и &Enable, будут служить для скрытия окна редактирования и закрытия доступа к окну редактирования, и наоборот. Если они включены, то окно видимо и есть к нему доступ, и наоборот. При запуске программы они должны будут быть отмечены. Для этого в дальнейшем мы напишем специальный код.

• Затем идут три кнопки Test, Clear и Exit. При нажатии на кнопку Test в окне редактирования появляется текст: This is a Test, а при нажатии на кнопку Clear, окно редактирования очищается. Кнопка E&xit, служащая для завершения программы, имеет еще дополнительные параметры, которые можно включить на странице Extended Styles. Они служат для разнообразного обрамления, выделения.

Поздравляю, вы закончили визуальное проектирование диалоговой панели!

Связывание переменных с окном редактирования и флажками

• Сейчас нам необходимо связать окно редактирования и флажки с переменными, с помощью которых мы будем иметь к ним доступ. В частности для окна редактирования нам нужна переменная типа CString, используя эту переменную, мы сможем извлекать текст из окна редактирования, а также изменять его содержимое.

• Также нам необходимо связать переменные с флажками, чтобы управлять ими и получать текущие состояния: включено, выключено.

А теперь зайдите в View->ClassWizard и выберете в закладках Member Variables. В этом пункте вы можете связывать переменные с элементами управления.

Ваше окно сейчас должно быть выглядеть так:

Теперь рассмотрим эту закладку.

• Project — название вашего проекта.

• Class Name — название класса, элементы которого вы будете связывать с переменными. Убедитесь в том, чтобы был выбран класс CTestDIg, потому что именно он отвечает за диалоговую панель, которую вы только что проектировали.

• Control IDs — названия элементов управления, с которыми можно связать переменные.

• Туре — тип переменной, которую вы связываете с элементом диалога.

• Member — название переменной, которую вы связываете с элементом диалога.

Выберем в списке Control IDs идентификатор IDC_TEST_EDIT и щелкнем на кнопку Add Varible, выведется такое диалоговое окно:

Рассмотрим его:

• Member Varible Name — название переменной, с которой вы хотите связать элемент управления.

• Category — здесь вы можете выбрать категорию переменной. К примеру, Value — это категория переменной, предназначенная для передачи значения переменной Control — а это категория предназначена для управления элементами. К примеру, с помощью переменной такой категории можно менять названия кнопок, добавлять строки в ListBox и многое др.

• Varible Туре — это тип переменной.

В Member Varible Name зададим название — m_TestEdit и нажмем кнопку ОК.

Вы связали окно редактирования с переменной m_TestEdit, с помощью которой вы получите доступ к окну редактирования.

Теперь свяжем флажки с переменными, для этого выберем в Member Varible идентификатор IDC_ENABLE_CHECK и нажмем на кнопку Add Varible. Зададим название переменной — m_EnableCheck. Посмотрите, эта переменная имеет категорию Value и тип BOOL. Переменная типа BOOL может принимать два значения TRUE и FALSE. TRUE — правда, a FALSE — ложь. Если флажок отмечен, то переменная будет иметь значения TRUE, а если нет — FALSE.

Теперь выберете в закладке Member Varible идентификатор IDC_VISIBLE_CHECK и нажмем на кнопку Add Varible. Зададим название переменной — m_VisibleCheck.

Вы закончили связывание переменных с окном редактирования и флажками

Код, инициализирующий окно редактирования

• При запуске программы, основанную на диалоге, вам нужно установить определенные значения некоторых элементов управления. Вам необходимо, чтобы флажки Visible и Enable были отмечены, иначе окна редактирования не будет видно. Для этого выполните следующие действия:

• Зайдите в View->ClassWizard,откройте закладку Message Maps.

• В Message IDs выберете CTestDIg, в Messages появится список событий, с которыми может быть связано диалоговое окно. Выберете там событие WM_INITDIALOG. Оно происходит, когда запускается программа и инициализируется диалоговое окно.

• Щелкнете на кнопку Add Function, а затем нажмите на кнопку Edit Code, для редактирования исходного кода.

Функция OnlnitDialog() уже содержит часть кода написанного VC++. Найдите в нем коментарий //TODO: Add extra initialization here, который сообщает нам, что после него мы можем добавить свой код.

Напишите следующий код в функции OnlnitDialog():

• Рассмотрим код:

• Первый и второй операторы, который которые вы ввели присваивают переменным m_VisibleCheck и m_EnableCheck значение TRUE. Это означает, что при запуске программы флажки будут отмечены.

• Последний оператор UpdateData(FALSE) обновляет экран, т. е. он обновляет значения переменных элементов управления на текущие. В нашем случае, при выполнении этого оператора текущие содержимое переменных связанных с флажками будет передано к ним.

• Теперь для того, чтобы посмотреть инициализирующий код в действии выполните программу.

Главное окно вашей программы должно будет выглядеть так:

Флажки должны быть отмечены.

При нажатии на кнопку Exit программа Test.Exe завершится.

Чтобы связать код с событием BN_CLICKED кнопки EXIT, выполните следующие действия:

• Выберете ClassWizard в меню View

• Выберете закладку Message Maps в панели ClassWizard

• Используйте диалоговую панель ClassWizard для выбора следующего события:

Class Name: CTestDIg

Object ID: IDC_EXIT_BUTTON

Messages: BN_CLICKED

• Щелкните на кнопку Add Fucntion и в раскрывшемся окне нажмите кнопку ОК.

• Сейчас ваша панель MFC ClassWizard должна будет выглядеть так:

• Нажмите кнопку Edit Code и напишите следующий код в функции OnExitButton():

• Функция ОnОК(), которую вы ввели завершает программу, при нажатии на кнопку Exit.

При нажатии на кнопку Test программа Test.Exe в окне редактирования напишет текст: This is a Test

Чтобы связать код с событием BN_CLICKED кнопки Test, выполните следующие действия:

• Выберете ClassWizard в меню View

• Выберете закладку Message Maps в панели ClassWizard

• Используйте диалоговую панель ClassWizard для выбора следующего события:

Class Name: CTestDIg

Object ID: IDC_TEST_BUTTON

Messages: BN_CLICKED

• Щелкните на кнопку Add Fucntion и в раскрывшемся окне нажмите кнопку ОК.

• Нажмите кнопку Edit Code и напишите следующий код в функции OnTestButton():

• Код, который вы ввели содержит два оператора:

• Первый присваивает переменной m_TestEdit типа CString значение This is a Test.

• А второй оператор UpdateData(FALSE); обновляет экран, т. е. сообщает переменным диалогового окна текущие их значения.

При нажатии на кнопку Clear программа Test.Exe должна стирать текст из окна редактирования.

• Чтобы связать код с событием BN_CLICKED кнопки Clear, выполните следующие действия:

• Выбирете ClassWizard в меню View

• Выберете закладку Message Maps в панели ClassWizard

• Используйте диалоговую панель ClassWizard для выбора следующего события:

Class Name: CTestDIg

Object ID: IDC_CLEAR_BUTTON

Messages: BN_CLICKED

• Щелкните на кнопку Add Fucntion и в раскрывшемся окне нажмите кнопку ОК.

• Нажмите кнопку Edit Code и напишите следующий код в функции OnClearButton():

• Код, который вы ввели содержит два оператора:

• Первый присваивает переменной m_TestEdit типа CString значение NULL, т. е. окно редактирования не будет содержать никакого текста.

• А второй оператор UpdateData(FALSE); обновляет экран, т. е. сообщает переменным диалогового окна текущие их значения. При выполнении этого оператора весь текст из окна редактирования удалится.

• Теперь сохраните свою работу, выбрав Save All в меню File.

• Чтобы увидеть в действии код программы выполните и запустите ее.

• Напишите что-нибудь в окне редактирования.

• Щелкните на кнопку Clear, вы видите что текст стирается.

• Теперь нажмите на кнопку Test в окне редактирования появится текст This is a Test.

• Если все это выполняется, значит вы совершенно правильно связали события с кнопками Test и Clear.

При включении флажка Visible программа Test.Exe должна сделать окно редактирования невидимым, а при выключении — наоборот.

• Чтобы связать код с событием BN_CLICKED флажка Visible, выполните следующие действия:

• Выберете ClassWizard в меню View

• Выберете закладку Message Maps в панели ClassWizard

• Используйте диалоговую панель ClassWizard для выбора следующего события:

Class Name: CTestDIg

Object ID: IDC_VISIBLE_CHECK

Messages: BN_CLICKED

• Щелкните на кнопку Add Fucntion и в раскрывшемся окне нажмите кнопку ОК.

Нажмите кнопку Edit Code и напишите следующий код в функции OnVisibleButton():

• Код который вы ввели содержит следующие операторы:

• UpdateData(TRUE); — этот оператор обновляет значения переменных элементов управления текущими значениями, которые содержаться на экране. Т. е. при нажатии на флажок переменная может принимать два значения TRUE или FALSE, TRUE — это когда флажок включен, a FASLE — наоборот. Значит при выполнении этого оператора переменная флажка управления принимает текущее положение флажка и все остальные переменные обновляются значениями, которые отображаются на экране.

• Следующие оператор проверяет включен или выключен флажок. Если он включен, то выполняется оператор GetDlgItem(IDC_TEST_EDIT)->ShowWindow(SW_SHOW);, где GetDlgItem(IDC_TEST_EDIT) извлекает указатель на элемент управления, а функция ShowWindow(SW_SHOW); с параметром SW_SHOW, делает окно редактирования видимым.

• А если флажок не отмечен, то выполняется также самая функция ShowWindow(); с параметром SW_HIDE, этот параметр означает спрятать окно редактирования.

При включении флажка Enable программа Test.Exe должна сделать окно редактирования доступным, а при выключении — недоступным.

• Чтобы связать код с событием BN_CLICKED флажка Enable, выполните следующие действия:

• Выберете ClassWizard в меню View

• Выберете закладку Message Maps в панели ClassWizard

• Используйте диалоговую панель ClassWizard для выбора следующего события:

Class Name: CTestDIg

Object ID: IDC_ENABLE_CHECK

Messages: BN_CLICKED

• Щелкните на кнопку Add Fucntion и в раскрывшемся окне нажмите кнопку ОК.

• Нажмите кнопку Edit Code и напишите следующий код в функции OnEnableButton():

• Код который вы ввели содержит следующие операторы:

• UpdateData(TRUE) — обновляет переменные элементов управления текущими их значениями на экране. После выполнения этого оператора переменной m_EnableCheck присваивается текущее значение флажка Enable.

• Следующие операторы имеют ту же конструкцию, как и у флажка Visible, но только функция ShowWindow заменена на EnableWindow(), которая предназначена для того, чтобы элемент управления был недоступен или доступен. Она имеет те же параметры, что и функция ShowWindow.

При вводе текста и его изменении в окне редактирования, возникает событие EN_CHANGE. В нашей программе при вводе слова CALCULATOR запускается калькулятор, а при вводе Paint — графический редактор Paint.

• Чтобы связать код с событием EN_CHANGE окна редактирования, выполните следующие действия:

• Выберете ClassWizard в меню View

• Выберете закладку Message Maps в панели ClassWizard

• Используйте диалоговую панель ClassWizard для выбора следующего события:

Class Name: CTestDIg

Object ID: IDC_TEST_EDIT

Messages: EN_CHANGE

• Щелкните на кнопку Add Fucntion и в раскрывшемся окне нажмите кнопку ОК.

Нажмите кнопку Edit Code и напишите следующий код в функции OnChangeTestEdit():

• Код который вы ввели содержит следующие операторы:

• UpdateData(TRUE); обновляет переменную m_TestEdit значением содержимого окна редактирования, при каждом его изменении, так как окно редактирования связано с событием EN_CHANGE.

• Следующий оператор CString UpperValue; создает новую переменную типа CString.

• Затем переменной UpperValue приравнивается значение переменной m_TestEdit, это можно сделать, так как они имеют одинаковый тип.

• Оператор UpperValue.MakeUpper(); переводит все символы переменной UpperValue в верхний регистр.

• Оператор if(UpperValue=="PAINT"); проверяет, если введено ли слово PAINT, то выполняются следующие три оператора:

Первый system("pbrush.exe"); запускает графический редактор, так как не указан явный путь к файлу, то программа будет искать его в каталоге C: \WINDOWS.

Второй оператор m_TestEdit=""; присваивает переменной окна редактирования значение NULL, а следующий оператор UpadteData(FALSE) — обновляет экран. Вследствие этого, весь текст из окна редактирования удалится.

• Заметьте, что мы перевели символы переменной UpperValue в верхний регистр — это нужно потому, что в языке C++ символы нижнего и верхнего регистра имеют разные значения, поэтому при переводе на верхний регистр, мы 100 % будем уверены, что написанное нами слово Paint совпадет с PAINT.

• Следующая конструкция операторов полностью идентична предыдущей, только проверяется равно ли значение переменной m_TestEdit слову CALCULATOR, если да, то запускается калькулятор, и окно редактирования очищается.

Вы закончили связывание событий с элементами управления

Упражнение

Сейчас вы выполните упражнение. Вам необходимо включить в свою программу еще код, чтобы при вводе слова Веер в окне редактирования, компьютер подавал звуковой сигнал. Подсказка: Код для генерации сигнала MessageBeep((WORD)-2);

Ответ к упражнению

Для того, чтобы выполнить упражнение вам необходимо включить в конец функции OnChangeTestEdit следующий код:

В этой главе вы получили некоторой опыт использования элементов управления и написали программу, которая имеет такие элементы управления, как окно редактирования, флажок и кнопка.

Вы также увидели процесс написания программы, использующей различные средства управления, который состоит в размещении элемента управления в диалоговой панели, настройки его свойств и связывания кода с событием данного элемента.

Теперь выполняем программу, для этого заходим в меню Build->Build Test.exe, а потом в меню Build выбираем Execute Test.exe

Вы закончили второй урок!

Сейчас мы создадим программу DRAW.EXE Посмотрим на ее спецификацию и что она должна делать.

• Программа DRAW предназначена для рисования с помощью мыши линий установленного цвета и размера, программа будет рисовать линию в соответствии с движениями мыши.

• При нажатии на кнопку Exit программа завершается.

При запуске вашей программы, главное окно должно будет выглядеть так:

План урока:

1) Создание проекта программы

2) Визуальное проектирование диалоговой панели

3) Связывание элементов управления с событиями

4) Резюме, Упражнение и ответ к упражнению.

Теперь рассмотрим все пункты по порядку.

• Вначале запустим Visual C++. Зайдем в меню FILE —> NEW…, выберем там Project. Ваша панель должна выглядеть теперь так:

• Выберем там MFC AppWizard(exe), это значит вы хотите создать запускаемый файл.

• В Project Name задайте имя программы Draw. И щелкните ОК.

• В раскрывшемся окне (SТЕР1) выберете Dialog Based. Это означает, что ваша программа будет основана на диалоге. Щелкните Next.

• В STEP2 задайте в Please enter title of your dialog имя программы The Draw Program.

Остальное оставьте без изменения и нажмите NEXT.

• В STEP3 Оставьте все без изменения и щелкните NEXT. Здесь вы указали, что ваша программа будет иметь библиотеку с динамической компоновкой (DLL), а не статической.

• В STEP4 Оставьте все без изменения. Посмотрите, чтобы в Class Name было выбрано CTestApp и щелкните FINISH.

Вы закончили создание проекта программы!

Все каркасные файлы для вашей программы написал Visual C++, с помощью мастера настроек MFC AppWizard.

MFC — это вещь очень полезная, с помощью нее можно быстро создавать программы, так как все дежурные файлы он пишет сам, что сильно облегчает работу программиста, ведь не писать стандартный набор текста каждый раз!

А теперь мы спроектируем диалоговую панель.

Сейчас мы визуально спроектируем диалоговую панель. Для этого вначале выберете закладку "Resourse View" и раскройте пункт Draw Resource, как показано на рис. 1.5.

Выполните следующие действия

• Щелкните два раза по надписи IDD_DRAW_DIALOG. Справа появится окно проектирования диалоговой панели.

• С помощью панели Controls расставьте элементы, управления как показано на рис. 2.0 и согласно таблице 2.0.

Теперь рассмотрим все пункты по порядку.

• В объекте Dialog Box вы задаете следующие данные:

Caption — название диалогового окна.

Font — здесь вы установили шрифт — System и его размер 10

• Static Text — это элемент текста, он вставляется как обычный элемент управления, но не выполняет никаких функций, так как служит для показа текста, который вы зададите в Captions. Так же мы задали некоторые графические установки для статистического текста — это Client Edge и Static Edge. Поздравляю, вы закончили визуальное проектирование диалоговой панели!

Связывание кода с событием BN_CLICKED кнопки Exit

При нажатии на кнопку Exit программа Draw.Exe завершится.

• Чтобы связать код с событием BN_CLICKED кнопки EXIT, выполните следующие действия:

• Выберете ClassWizard в меню View

• Выберете закладку Message Maps в панели ClassWizard

• Используйте диалоговую панель ClassWizard для выбора следующего события:

Class Name: CDrawDIg

Object ID: IDC_EXIT_BUTTON

Messages: BN_CLICKED

• Щелкните на кнопку Add Fucntion и в раскрывшемся окне нажмите кнопку ОК.

• Сейчас ваша панель MFC ClassWizard должна будет выглядеть так:

• Нажмите кнопку Edit Code и напишите следующий код в функции OnExitButton():

• Функция ОnОК(), которую вы ввели завершает программу, при нажатии на кнопку Exit.

Сейчас мы свяжем код с событием WM_MOUSEMOVE, которое будет автоматически выполняться при передвижении мыши.

• Чтобы связать код с событием WM_MOUSEMOVE диалоговой панели, выполните следующие действия:

• Выберете ClassWizard в меню View

• Выберете закладку Message Maps в панели ClassWizard

• Используйте диалоговую панель ClassWizard для выбора следующего события:

Class Name: CDrawDIg

Object ID: CDrawDIg

Messages: WM_MOUSEMOVE

• Щелкните на кнопку Add Fucntion.

Нажмите кнопку Edit Code и напишите следующий код в функции OnMouseMove():

• Код который вы ввели содержит единственный оператор IF:

• Оператор IF содержит в себе функции, которые будут выполняться, если условие оператора IF верно. Условие таково, если левая кнопка мыши нажата и произошло перемещение, то функции внутри оператора IF выполняются.

• Функция OnMouseMove выполняется при любом передвижении мыши, ее параметр nFlags показывает была ли нажата какая-нибудь клавиша клавиатуры(типа ALT или Shift) и кнопка мыши. Операция & проверяет прижата ли левая кнопка мыши при ее перемещении. Если это так, то выполняется код ниже оператора IF.

• Код в блоке оператора IF CCIientDC dc(this); создает объект контексного устройства, с помощью него вы сможете рисовать, его можно назвать воображаемым экраном в памяти компьютера. Научно говоря, dc(this) — это экземпляр класса CCIientDC с параметром конструктора this, с помощью экземпляра класса вы можете обращаться к функциям этого класса.

• Следующий оператор, который вы напечатали рисует точку в заданном месте (место щелчка мыши), используя параметры point.x и point.y, которые ему передает функция OnMouseMove, и заданного цвета, с помощью функции RGB();.

Сейчас у нас установлен черный цвет, чтобы установить красный, синий или зеленый, надо заменить параметры функции RGB() соответственно на 255, 0, 0, 0, 255, 0, 0, 0,255.

Чтобы увидеть в действии свой код, выполните следующие действия:

• Скомпонуйте и скомпилируйте программу.

• Запустите ее.

• Удерживая нажатой левую кнопку мыши, претащите ее в сторону.

• Вы видите, что точки рисуются не слитно друг с другом, это происходит по тому, что WINDOWS должен выполнять и другие задачи и не может полностью следить за Draw. Поэтому мы модифицируем нашу программу, так чтобы эти точки соединялись линиями.

• При выполнении функции OnMouseMove параметр point передает положение курсора во время последней проверки его положения.

Сейчас вы расширите возможности программы Draw. Вы сделаете так, чтобы при передвижении мыши, рисовалась сплошная линия.

• Модифицируем программу следующим образом.

• Чтобы соединить точки линией функция OnMouseMove должна знать предыдущие координаты мыши, для этого нам нужно объявить две переменные m_PrevX и m_PrevY, для хранения координат по X и Y.

• Выведем на экран файл DrawDIg.h, для этого откроем Project Workspace, щелкнем на закладке File View и выполним двойной щелчек на пункте DrawDIg.h.

• Включите объявления переменных m_PrevX и m_PrevY следующим образом:

• Вы объявили две переменные целого типа для хранения предыдущих координат мыши. Заметьте, что вы их включили после слова public: — это означает, что эти переменные доступны всем функциям класса.

• Теперь модифицируем функцию OnMouseMove в файле DrawDIg.cpp

• Рассмотрим код приведенный выше:

• Код вызова функции SetPixel(), помещен в комментарий, так как он нам больше не понадобиться.

• Следующий код CPen NewPen(PS_SOLID, 10, RGB(255,0,0)) создает новое перо с именем NewPen класса СРеn с заданным размером шрифта 10 пикселов и красным цветом. Параметр PC_SOLID говорит, что будет рисоваться сплошная линия.

• После этого выполняется функция SelectObject, выбирающая новое перо:

dc.SelectObject(&NewPen);

Этой функцией вы включаете перо в работу.

• Следующие два оператора:

dc.MoveTo(m_PrevX, m_PrevY);

dc.LineTo(point.x, point.y);

рисуют линию, используя координаты начала(это определяет функция MoveTo()) и координат конца (LineTo).

• И последний два оператора:

m_PrevX=point.x;

m_P revY=point.y;

сохраняют в переменных m_PrevX и m_PrevY, текущие координаты, которые в следующий раз будут использоваться, как предыдущие(начальная позиция).

• Теперь запустите программу и проверьте правильность ее работы.

• Вы должны заметить, что при первом нажатии на кнопку мышки в любой области диалоговой панели, есть лишняя линия, которая выходит из краев окна. Дело в том, что вы при первом рисовании линии, т. е после первого щелчка мыши и ее передвижении, начальные координаты не определены, а будут известны только текущие.

• Это выглядит примерно так:

• Для решения этой проблемы, вы должны связать код событием WM_LBUTTONDOWN, которое происходит при нажатии на левую кнопку мыши.

• Выберете ClassWizard в меню View

• Выберете закладку Message Maps в панели ClassWizard

• Используйте диалоговую панель ClassWizard для выбора следующего события:

Class Name: CDrawDIg

Object ID: CDrawDIg

Messages: WM_LBUTTONDOWN

• Щелкните на кнопку Add Fucntion.

• Нажмите кнопку Edit Code и напишите следующий код в функции OnLButtonDown():

• Код, который вы напечатали, обновляет значения переменных m_PrevX и m_PrevY, тем местоположением мыши, где был совершен щелчок по ее левой кнопке, соответственно при первом и последующих нажатиях кнопки, линия будет начинаться из данной точки нажатия.

• Поэкспериментируйте с программой Draw и щелкните на кнопку Exit для ее прекращения.

Упражнение

Сделайте так, чтобы линия, которую вы рисуете была шириной 5 пикселов.

Ответ к упражнению

Для того, чтобы выполнить упражнение вам необходимо изменить код функции OnMouseMove следующим образом:

Вы создали и выполнили программу Draw.exe, с помощью которой вы можете рисовать, путем передвижения мыши, при нажатой ее левой кнопки. Также вы познакомились с функцией OnMouseMove, которая выполняется при передвижении мыши, и с функцией OnLButtonDown — при нажатии на левую кнопку мыши.

Вы закончили третий урок!