VisualC_Studio_1 / Lab / lb_02
.htmКруглински Д Лабораторная работа № 2
Тема: Генератор кода AppWizard. Диалоговая панель. Элементы управления: статический текст, поле ввода, кнопка. Файл ресурсов. Программа ClassWizard. Наложение двух растровых изображений на кнопку.
Разработаем приложение, которое переводит градусы по шкале Фаренгейта, принятой в США, в привычные градусы по шкале Цельсия. Преобразование осуществляется по формуле:
y = (x − 32) * (5/9),
где x - градусы по шкале Фаренгейта, а y - градусы по шкале Цельсия.
Например, 32-м градусам по Фаренгейту соответствует 0 градусов по шкале Цельсия, а 212-ти градусам по Фаренгейту - 100 градусов по шкале Цельсия.
Создание нового проекта с помощью генератора кода AppWizard
AppWizard - это генератор кода, создающий рабочую заготовку Windows-приложения с теми компонентами, именами классов и исходными файлами, которые Вы задали в его диалоговых окнах.
Выполните цепочку команд:
File > New > Project.
В качестве типа проекта Project types выберите MFC, в качестве Templates – MFC Application, укажите в разделе Location (Местоположение) свой директорий, заполните имя проекта Name: MyPr02 и щелкните ОК.
Затем
перелистните первую страницу, выбрав кнопку Next:
на странице Application type выберите Single document (однооконное приложение);
перелистните следующие пять страниц;
на странице Generated Classes для класса с именем CMyPr02View в качестве базового класса (Base class) выберите из списка CFormView. Нажмите кнопку Finish.
В свойствах проекта смените кодировку (см. лабораторную работу № 1).
Перейдите на вкладку ResourceView окна проектов (если она отсутствует на экране, её можно открыть через команду View Главного меню).
Раскройте списки MyPr02.rs и Dialog. Дважды щелкните левой кнопкой мыши идентификатор IDD_MYPR02_FORM, и, когда перед Вами откроется пустое диалоговое окно MyPr02.rs (IDD...Form-Dialog), снова, теперь уже правой кнопкой мыши, щелкните идентификатор IDD_MYPR02_FORM. В открывшемся контекстном меню выберите команду Properties (Свойства). В окне свойств диалога замените язык (Language) на русский (если он не указан там по умолчанию).
Закройте окно Properties.
Редактирование диалогового окна
Перед Вами открыто окно редактора ресурсов: MyPr02.rs (IDD...Form-Dialog).
Примечание. Если в процессе работы Вы случайно закроете окно редактора ресурсов, то открыть его снова можно следующим образом:
а) перейти на вкладку ResourceView окна проектов;
б) раскрыть списки MyPr02.rs и Dialog;
в) дважды щелкнуть левой кнопкой мыши IDD_MYPR02_FORM.
1. Щелкнув кнопку
на диалоговой панели инструментов (вверху), включите режим сетки.
2. В окне редактора ресурсов, перемещая с помощью мыши граничные маркеры (синие квадраты),
уменьшите размеры внутреннего (серого) прямоугольника примерно вдвое.
3. Щелкнув левой кнопкой мыши надпись: TODO: Place form controls on this dialog, выделите ее, после чего удалите (можно нажать клавишу Delete клавиатуры)
4. Щелкните правой кнопкой мыши внутри окна редактора ресурсов. В открывшемся контекстном меню выберите Properties (Свойства). Перед Вами открылось окно Properties. В строке Font (Size) смените шрифт на Arial Black, а размер шрифта - на 10. Нажмите ОК.
5. Откройте палитру элементов управления ToolBox (пункт View Главного меню).
Разместите на своём диалоговом окне следующие элементы управления:
поочередно два статических текста Static text;
поочередно два поля ввода Edit Control;
одну кнопку Button.
Разместите (и растяните) элементы управления примерно так, как показано на рисунке:
5.1. Удерживая клавишу Ctrl нажатой, щелчками левой кнопки мыши выделите оба поля Static text. Щелкнув кнопку
на диалоговой панели инструментов (вверху), выровняйте эти поля по левому краю.
5.2. Аналогичным образом выровняйте по левому краю оба элемента Edit. Другие кнопки этой панели позволяют выравнивать элементы управления по правому краю, ширине, делать их одного размера и т.д.
5.3. Правой кнопкой мыши щелкните на верхнем слове Static и выберите из контекстного меню Properties (свойства). Перед Вами открылось окно свойств Properties. Убедитесь, что идентификатор ресурса ID равен IDC_STATIC (раздел Misc). В поле Caption раздела Appearance надпись Static замените на «t по шкале Фаренгейта». Закройте окно Properties.
Аналогичным образом нижнюю надпись Static смените на «t по шкале Цельсия».
5.4. Правой кнопкой мыши щелкните на верхнем слове Edit и выберите из контекстного меню Properties (свойства). В открывшемся окне свойств Properties переименуйте идентификатор ресурса ID из IDC_EDIT1 в IDC_EDIT_TF. Закройте окно Edit Properties.
Аналогичным образом переименуйте идентификатор ресурса нижнего поля ввода из IDC_EDIT2 в IDC_EDIT_TC.
Так как нижнее поле ввода Edit будет использоваться только для вывода информации, то запретим пользователю туда соваться. Для этого в разделе Behavior свойство Read-only (Только для чтения) положите равным True. Само поле редактирования после этой процедуры окрасилось в серый цвет.
5.5. Правой кнопкой мыши щелкните на слове Button1 и выберите из контекстного меню Properties (свойства). В открывшемся окне свойств Properties переименуйте идентификатор ресурса ID из IDC_BUTTON1 в IDC_GO. В поле Caption смените название, заменив Button1 на «Перевести». Закройте окно Properties.
Результат Вашей работы должен выглядеть примерно так:
6. Проверьте порядок перехода между элементами управления. Для этого выберите в Главном меню команду Format, затем команду Tab Order. Укажите мышью порядок переключения между элементами управления при нажатии клавиши TAB. Для этого щелкните мышью каждый из элементов управления в нужном Вам порядке (например, слева направо, сверху вниз).
Если ошиблись, то, удерживая клавишу Ctrl нажатой, щелкните последний правильно помеченный элемент.
7. Сохраните файл ресурсов MyPr02.rc на диске: вкладка Resource View окна проектов > Dialog > правой кнопкой мыши щелкнуть IDD_MYPR02_FORM и выбрать в контекстном меню команду Save MyPr02.rc.
Добавление функции - обработчика сообщения
Добавим функцию-обработчик сообщений для кнопки «Перевести».
Правой кнопкой мыши щелкните на кнопке «Перевести» и выберите из контекстного меню Properties (свойства). В открывшемся окне свойств Properties нажмите кнопку
,
перейдя, таким образом, на вкладку событий кнопки.
В списке событий щелчком выделите строку BN_CLICKED и в открывшемся справа списке выберите строку <Add> OnBnClickedGo().
Перед Вами открылся файл MyPr02View.cpp и появился код функции OnBnClickedGo (вернее сказать, заготовка кода). Вставьте в текст этой процедуры следующие строки:
CString strText; // Объявляем строковую переменную strText
double tFar; // Объявляем вещественную переменную tFar
// В переменную strText копируем текст (значение температуры по шкале Фаренгейта)
// из поля ввода с идентификатором IDC_EDIT_TF
GetDlgItemText(IDC_EDIT_TF, strText);
// С помощью стандартной функции atof
// переводим строковую переменную в вещественную
tFar =atof(strText);
// В строковую переменную (формат: 7 цифр всего, из них 3 - на дробную часть)
// записываем значение температуры
strText.Format("%7.3f", (tFar -32)*5/9);
// В поле ввода с идентификатором IDC_EDIT_TC копируем текст из переменной strText
SetDlgItemText(IDC_EDIT_TC, strText);
5. Соберите приложение (F7) и запустите его на выполнение (Ctrl+F5).
Наше приложение исправно переводит температуру из значений по шкале Фаренгейта в значения по шкале Цельсия. Попробуйте ввести в поле ввода нечисловую информацию. В этом случае программа выдает температуру, равную −17.778. Дело в том, что если стандартная функция atof не смогла перевести строку в действительное число, она возвращает 0, откуда
(0 − 32) * (5/9) = −17.778.
Организуем контроль вводимых символов, запретив пользователю вводить любую информацию, кроме числовой.
Контроль вводимых символов
Самый простой способ изменить поведение любого элемента управления (в том числе и поля ввода) − воспользоваться инструментом MFC-библиотеки, предназначенным для создания оконных подклассов (window subclassing). При использовании редактора диалоговых окон в диалоговом ресурсе размещается обычный элемент управления, а потом на языке С++ пишется новый класс, содержащий обработчики сообщений для тех событий, которые Вы хотите обрабатывать самостоятельно.
Мы создадим новый класс (назовём его CEditTF), производный от класса CEdit, и создадим обработчик сообщения WM_CHAR, представляющий собой реакцию на ввод символов с клавиатуры.
1. Создаём новый класс
Щёлкните на вкладке Resource View строку MyPr02 (другими словами, перейдите на самый высокий уровень проекта) и после этого выполните цепочку команд:
Главное меню: Project > Add Class.
В открывшемся окне Add Class в качестве Categories выберите MFC, в качестве Templates – MFC Class и нажмите кнопку Add.
Перед Вами открылось окно MFC Class Wizard. В поле Class name этого окна введите имя нового класса: CEditTF, а в списке Base class в качестве базового выберите класс CEdit. Нажмите Finish, закрывая окно.
2. Создаём обработчик сообщения WM_CHAR
Откройте вкладку Class View окна проектов. В списке классов выделите CEditTF и откройте окно его свойств (правая кнопка мыши). В окне свойств с помощью кнопки
перейдите на вкладку сообщений и выберите там сообщение WM_CHAR. В открывшемся справа списке выберите строку <Add> OnChar().
Открылся сгенерированный файл EditTF.cpp и появилась заготовка кода функции OnChar. Замените текст этой процедуры следующим текстом:
if ( isdigit(nChar) || // если цифра
iscntrl(nChar) || // или управляющий символ
nChar==45 || // или минус (45 - ASCII-код минуса)
nChar==46 ) // или точка (46 - ASCII-код точки)
{
CEdit::OnChar(nChar, nRepCnt, nFlags); // ...то вывести символ на экран
}
else
{
if (nChar==44) // 44 - ASCII-код запятой
{
AfxMessageBox("Для отделения дробной части используйте точку.");
}
else
{
AfxMessageBox("Введён нечисловой символ!");
}
}
Теперь нам надо «донести» информацию о новом классе до сведения класса CMyPr02View.
3. Добавляем переменную класса
Перейдите на вкладку ClassView окна проектов и раскройте список MyPr02 classes. Щелкните правой кнопкой мыши CMyPr02View и в открывшемся контекстном меню выберите Add > Add Variable.
В результате перед Вами появилось одноимённое окно. В качестве типа переменной (Variable Type) введите CEditTF. В поле Variable Name присвойте новой переменной имя m_EditTF. Ничего больше не меняя, нажмите Finish.
Перейдите на вкладку Solution Explorer окна проектов. Раскройте списки: MyPr02, Source files, Header files. В списке Header files найдите файл MyPr02View.h (заголовочный файл класса «вид»). Дважды щелкнув по нему левой кнопкой мыши, откройте этот файл. Убедитесь, что в его текст добавлены строки:
#include "EditTF.h" (в начало файла)
и
public:
CEditTF m_EditTF; (в раздел Generated message map functions)
Они появились после добавления новой переменной. Следует отметить, что Вы могли внести их сами, и тогда не надо было пользоваться командой Add Variable. Сохраните файл MyPr02View.h и закройте его.
4. Откройте файл MyPr02View.cpp и найдите в нём функцию инициализации OnInitialUpdate. Добавьте в конец этой функции строки, которые позволят связать переменную m_EditTF нового класса с управляющим элементом, имеющим идентификатор IDC_EDIT_TF:
if (m_EditTF.m_hWnd==NULL)
{
m_EditTF.SubclassDlgItem(IDC_EDIT_TF, this);
}
5. Соберите приложение и запустите его на выполнение. Убедитесь, что в поле ввода появляется только числовая информация.
Изменение заголовка приложения
Изменим заголовок «Untitled» («Безымянный») в левом верхнем углу окна приложения.
1. Перейдите на вкладку Resource View окна проектов, раскройте список String Table и дважды щёлкните левой кнопкой мыши строку abc_String_Table. Перед Вами открылась строковая таблица редактора ресурсов.
2. Щелкните правой кнопкой мыши в любом месте этой таблицы и выберите команду New String. В таблице появилась новая строка с идентификатором IDS_STRING1. Щелкнув правой кнопкой мыши на этой строке, откройте окно её свойств и заполните его так, как показано на рисунке.
Строковый ресурс AFX_IDS_UNTITLED используется для задания имени приложения в левом верхнем углу. Закройте окно свойств.
3. Сохраните файл ресурсов на диске и закройте окно редактора ресурсов.
Соберите приложение и запустите его на выполнение. Убедитесь, что заголовок изменился.
Изменение положения диалогового окна
Чтобы расположить диалоговое окно в центре экрана, в файле MyPr02View.cpp добавьте в конец функции инициализации OnInitialUpdate строку:
GetParent()->CenterWindow();
Соберите приложение и запустите его на выполнение. Убедитесь, что окно приложения расположено в центре экрана.
Изменение цвета ФОНА в элементе диалогового окна
Каждый элемент управления, прежде чем появиться на экране, посылает родительскому диалоговому окну сообщение WM_CTLCOLOR. Если написать обработчик этого сообщения, то можно установить цвет текста и его фон, а также выбрать кисть для заполнения нетекстовой области элемента управления или всего диалогового окна.
«Выкрасим» фон нашего верхнего поля ввода в желтый цвет, а статический текст «напишем» синим цветом.
В системе RGB чистый красный (red) цвет имеет «координаты» (255, 0, 0); чистый зеленый (green) - (0, 255, 0), а синий (blue) - (0, 0, 255). Так как желтый - это смесь в равной пропорции красного и зеленого, то его «координаты» (255,255,0).
1. Добавим в закрытые члены класса CMyPr02Dialog переменную m_bYellowBrush типа HBRUSH (кисть), в которой будет храниться желтая кисть.
Добавление переменной класса
Перейдите на вкладку ClassView окна проектов и раскройте список MyPr02 classes. Щелкните правой кнопкой мыши CMyPr02View и в открывшемся контекстном меню выберите Add > Add Variable.
В результате перед Вами появилось окно Add Member Variable Wizard.
В качестве типа переменной (Variable Type) введите HBRUSH, а в качестве её имени (Variable Name) - m_bYellowBrush. Ничего больше не меняя, нажмите Finish.
Перейдите на вкладку Solution Explorer окна проектов. Раскройте списки: MyPr02 files, Source files, Header files.
В списке Header files найдите файл MyPr02View.h (заголовочный файл класса «вид»). Дважды щелкнув по нему левой кнопкой мыши, откройте этот файл. Найдите в тексте этого файла строки:
public:
HBRUSH m_bYellowBrush;
Эти строки Вы могли внести вручную, и тогда не надо было пользоваться командой Add Variable. Закройте файл MyPr02View.h.
2. Откройте MyPr02View.cpp. Добавьте в конструктор
(CMyPr02View::CMyPr02View(): CFormView(CMyPr02View::IDD))
определение желтой кисти:
// С помощью стандартной функции CreateSolidBrush создать желтую кисть
m_bYellowBrush=CreateSolidBrush(RGB(255,255,0));
3. Создадим процедуру − обработчик сообщения WM_CTLCOLOR.
Откройте вкладку Class View окна проектов. В списке классов выделите CMyPr02View и откройте окно его свойств (правая кнопка мыши). В окне свойств перейдите на вкладку сообщений Messages и выберите там сообщение WM_ CTLCOLOR.
В открывшемся справа списке выберите строку <Add> OnCtlColor().
В текст функции OnCtlColor между двумя строками комментариев добавьте код:
// Если идентификатор pWnd->GetDlgCtrlID() элемента pWnd
// совпадает с IDC_EDIT_TF, то
if (pWnd->GetDlgCtrlID()==IDC_EDIT_TF)
{
// Закрашиваем желтым цветом фон непосредственно за текстом
pDC->SetBkColor(RGB(255,255,0));
// Закрашиваем желтым цветом остальное пространство элемента управления
return m_bYellowBrush;
}
Соберите приложение и запустите его на выполнение. Убедитесь, что в верхнее поле редактирования окрасилось в яркий желтый цвет.
Изменение цвета ТЕКСТА в элементе диалогового окна
Займемся теперь статическими полями. В текст функции OnCtlColor после группы if вставьте еще одну группу if:
// Если тип nCtlColor элемента управления статический (CTLCOLOR_STATIC), то
if (nCtlColor==CTLCOLOR_STATIC)
{
// Устанавливаем синий цвет текста
pDC->SetTextColor(RGB(0,0,255)); // синий
}
Соберите приложение и запустите его на выполнение. Убедитесь, что текст обоих статических полей окрасился в синий цвет.
Наложение двух растровых изображений на кнопку
Пусть мы хотим наложить на одну кнопку два различных изображения, соответствующих ее «нажатому» и «отжатому» состояниям. Делается это так.
1. В свойствах кнопки «Перевести»
заголовок Caption «Перевести» замените на «Go»;
в разделе Appearance свойство Modal Frame, обеспечивающее трёхмерное изображение кнопки, положите равным True;
в разделе Behavior свойство Owner Draw (Хозяин Изображения) положите равным True.
2. Готовую картинку
загрузим из файла: VisualC_Part01\FilesForStud\Clc.bmp.
Скопируйте этот файл в свою папку MyPr02.
Перейдите на вкладку Resource View, щёлкните правой кнопкой мыши в любом месте этой вкладки и в открывшемся контекстном меню выберите команду Add Resource. Перед Вами открылось одноимённое окно. Выберите в нём пункт Bitmap (Рисунок) и щёлкните кнопку Import, после чего выберите файл Clc.bmp.
Не редактируя картинку, закройте её.
3. Перейдите на панель Resource View окна проектов и раскройте список Bitmap. Щелкнув правой кнопкой мыши строку IDB_BITMAP1, выберите Properties и в окне свойств переименуйте идентификатор ID в
“GOU”.
Обязательно заключите имя идентификатора в кавычки, чтобы идентифицировать ресурс по имени, а не по номеру.
Теперь у нас есть растровое изображение для кнопки в «отжатом» (U) состоянии. Закройте окно свойств Properties.
4. Вернитесь на панель ResourceView.
Удерживая клавишу Ctrl клавиатуры нажатой, левой кнопкой мыши перетащите идентификатор “ GOU” немного ниже. У Вас появилась копия с именем “GOU1”.
Щелкните на ней правой кнопкой мыши, выберите Properties и переименуйте идентификатор в “ GOD” (D соответствует «нажатому» состоянию кнопки). Закройте окно свойств Properties.
Дважды щелкнув идентификатор “GOD” левой кнопкой мыши, откройте рисунок для редактирования.
Самый быстрый способ созда