VisualC_Studio / Lab / lb_03
.htmКруглински Д Лабораторная работа № 3
Тема: Приложение с вертикальной и горизонтальной прокруткой. Прокрутка с помощью мыши и клавиатуры. Элементы управления: группирующая рамка, переключатель, флажок, ползунок. Создание нового класса. Добавление пункта в Главное меню.
Создадим программу, которая по желанию пользователя рисует один из трёх геометрических объектов: линию, окружность или квадрат.
Пусть пользователь может выбрать из предлагаемого перечня цвет объекта, причем если выбрано, например, три цвета, то и объект будет нарисован трижды. Пусть пользователь также может выбрать из предлагаемого промежутка размер объекта (в пикселях): для линии - её длину, для окружности - её диаметр, для квадрата - длину его стороны.
Создаем новый проект с помощью редактора AppWizard
1. Создайте новый проект с именем MyPr03:
File > New > Project.
В качестве типа проекта Project types выберите MFC, в качестве Templates – MFC Application, укажите в разделе Location (Местоположение) свой директорий, заполните имя проекта Name: MyPr03 и щелкните ОК.
Затем
· перелистните первую страницу, выбрав кнопку Next;
· на странице Application type выберите Single document (однооконное приложение);
· перелистните следующие пять страниц;
· на странице Generated Classes для класса с именем CMyPr02View в качестве базового класса (Base class) выберите из списка CScrollView. Такой выбор позволит создать приложение, главное окно которого будет содержать в своем составе горизонтальную и вертикальную линейки прокрутки. Нажмите кнопку Finish.
В свойствах проекта смените кодировку (см. лабораторную работу № 1).
2. Измените текст функции инициализации OnInitialUpdate в файле MyPr03View.cpp на:
CScrollView::OnInitialUpdate();
CSize sizeTotal(1000, 500); // задаем полный размер окна в пикселях
CSize sizePage(sizeTotal.cx/2, sizeTotal.cy/2); // размер страницы
CSize sizeLine(sizeTotal.cx/50, sizeTotal.cy/50); // размер линии
SetScrollSizes(MM_TEXT, sizeTotal, sizePage, sizeLine);
Соберите приложение (F7) и запустите его на выполнение (Ctrl+F5). С помощью мыши убедитесь, что прокрутка работает. Закройте свое приложение.
3. Заставим полосы прокрутки «слушаться» клавиатуру.
Откройте вкладку Class View окна проектов. В списке классов выделите MyPr03View и откройте окно его свойств (правая кнопка мыши). В окне свойств перейдите на вкладку сообщений Message и выберите там сообщение WM_KEYDOWN. В открывшемся справа списке выберите строку
<Add> OnKeyDown ()
и внесите в процедуру следующий текст:
switch (nChar) {
case VK_HOME: // клавиша Home
OnVScroll(SB_TOP, 0, NULL); OnHScroll(SB_LEFT, 0, NULL);
break;
case VK_END: // клавиша End
OnVScroll(SB_BOTTOM, 0, NULL); OnHScroll(SB_RIGHT, 0, NULL);
break;
case VK_UP: // клавиша «стрелка вверх»
OnVScroll(SB_LINEUP, 0, NULL);
break;
case VK_DOWN: // клавиша «стрелка вниз»
OnVScroll(SB_LINEDOWN, 0, NULL);
break;
case VK_PRIOR: // клавиша Page Up
OnVScroll(SB_PAGEUP, 0, NULL);
break;
case VK_NEXT: // клавиша Page Down
OnVScroll(SB_PAGEDOWN, 0, NULL);
break;
case VK_LEFT: // клавиша «стрелка влево»
OnHScroll(SB_LINELEFT, 0, NULL);
break;
case VK_RIGHT: // клавиша «стрелка вправо»
OnHScroll(SB_LINERIGHT, 0, NULL);
break;
default:
break;
}
Соберите приложение и запустите его на выполнение. Проверьте прокрутку с помощью клавиатуры. Закройте свое приложение.
Создаем диалоговое окно
1. Чтобы создать новый диалоговый ресурс, перейдите на вкладку Resource View, щёлкните правой кнопкой мыши строку Dialog и в открывшемся контекстном меню выберите команду Add Resource. Перед Вами открылось одноимённое окно. Выберите в нём пункт Dialog и щёлкните кнопку New.
2. В результате этих действий перед Вами открылся редактор диалоговых окон
MyPr 03.rc (IDD_DIALOG1 - Dialog).
Редактор диалоговых окон присвоил новому диалоговому окну идентификатор ресурса IDD_DIALOG1. Именно с помощью этого идентификатора Ваша программа сможет в дальнейшем распознавать окно диалога. Кроме того, редактор диалоговых окон самостоятельно вставляет на диалоговую панель кнопки OK и Cancel.
Удалите кнопку Cancel (выделить, щелкнув левой кнопкой мыши, а затем нажать клавишу Delete клавиатуры).
Примечание. Если в процессе работы Вы закрыли окно редактора диалоговых окон, то открыть его снова можно следующим образом:
а) перейти на вкладку ResourceView окна проектов;
б) раскрыть списки MyPr03 resources и Dialog;
в) дважды щелкнуть левой кнопкой мыши IDD_DIALOG1.
3. Чтобы Вам было удобнее работать с редактором диалога, можете, как описано в предыдущей лабораторной работе, растянуть окно диалога и включить режим сетки (кнопка Toggle Grid вверху на диалоговой панели инструментов).
4. Щёлкните правой кнопкой мыши в любом месте диалогового окна. В открывшемся контекстном меню выберите Properties (Свойства). Перед Вами открылось окно свойств Properties.
4.1. Смените заголовок диалогового окна (параметр Caption) с Dialog на «Выберите объект и его характеристики».
4.2. Щелкните кнопку Font (Шрифт). В окне шрифтов смените размер шрифта на 10. Нажмите ОК.
5. С помощью палитры элементов управления ToolBox (если палитра не видна, её можно открыть, воспользовавшись пунктом View Главного меню) разместите на диалоговом окне элементы управления.
5.1. Перетащите мышью с палитры в создаваемое диалоговое окно группирующую рамку
.
Этот элемент управления сам по себе не выполняет никакой полезной работы, он лишь позволяет сгруппировать визуально несколько однотипных элементов. В свойствах группирующей рамки (правая кнопка мыши) смените наименование (параметр Caption) со Static на «Выберите объект».
5.2. Внутри группирующей рамки разместите три переключателя
.
У первого в свойствах смените название (Caption) на «Линия», у второго − на «Окружность», у третьего − на «Квадрат».
Вернитесь к свойствам первого переключателя и смените у него идентификатор ID на IDC_OBJECT. Кроме того, в разделе Misc установите для него свойство Group (Группа) равным True.
При правильном задании свойств у группы переключателей пользователь сможет выбрать только одну из этих кнопок.
5.3. Разместите на диалоговом окне еще одну группирующую рамку. В ее свойствах (правая кнопка мыши) смените наименование (параметр Caption) со Static на «Выберите цвет».
5.4. Внутри новой группирующей рамки разместите три флажка
.
У первого в свойствах смените идентификатор на IDC_RED, а название (Caption) на «Красный», у второго − идентификатор на IDC_GREEN, название на «Зеленый», у третьего − идентификатор на IDC_BLUE, название на «Синий».
В отличие от переключателей, флажки ведут себя независимо: пользователь сможет установить любую их комбинацию.
5.5. Разместите на диалоговом окне ползунок
.
5.6. Вокруг ползунка разместите четыре статических текста (см. рисунок).
Первый (над ползунком) просто предлагает пользователю выбрать размер объекта, второй (под ползунком слева) и третий (под ползунком справа) с наименованиями 20 и 100 указывают границы изменения выбираемого пользователем размера, а четвёртый (Static) понадобится нам для вывода информации о текущем положении ползунка. У четвёртого смените идентификатор на IDC_SLIDER_VAL.
6. Сохраните файл ресурсов MyPr03.rc на диске: ResourceView > Dialog > правой кнопкой мыши щелкнуть IDD_DIALOG1 и выбрать в контекстном меню Save MyPr03.rc.
Создаем новый класс «диалоговое окно»
Щёлкните правой кнопкой мыши в любом месте диалогового окна и в открывшемся контекстном меню выберите команду: Add Class.
Перед Вами открылось окно MFC Class Wizard. В поле Class name этого окна введите имя нового класса: CMyPr03Dialog. В списке Base class в качестве базового уже указан нужный нам класс CDialog, в списке Dialog ID также указан нужный идентификатор IDD_DIALOG1. Нажмите Finish, закрывая окно.
Заглянув на вкладку ClassView окна Workspace, Вы можете убедиться, что наряду с уже имеющимися классами там появился новый класс CMyPr03Dialog.
Добавление переменных класса CMyPr03Dialog
Свяжем переменные с нашими элементами управления.
Перейдите на вкладку Class View окна проектов и раскройте список MyPr03 classes.
Щелкните правой кнопкой мыши CMyPr03Dialog и в открывшемся контекстном меню выберите Add > Add Variable. В результате перед Вами появилось одноименное окно.
Поставьте «галочку» слева от Control variable, объявив тем самым, что переменная связана с управляющим элементом.
В списке Control ID выберите идентификатор управления IDC_BLUE. Чтобы изменить тип переменной Variable Type с CButton на BOOL, сначала в списке Category измените значение с Control на Value. В результате тип переменной BOOL проставлен в поле Variable Type автоматически. В качестве имени переменной Variable name введите m_bBlue.
Ничего больше не меняя, нажмите Finish.
Аналогичным образом добавьте остальные переменные:
Идентификатор
Тип переменной
Имя переменной
IDC_GREEN
BOOL
m_bGreen
IDC_OBJECT
int
m_nObject
IDC_RED
BOOL
m_bRed
IDC_SLIDER_VAL
CString
m_strSlVal
IDC_ SLIDER 1
int
m_nSlider
Перейдите на вкладку Solution Explorer окна проектов. Раскройте список Header Files и двойным щелчком левой кнопки мыши откройте заголовочный файл MyPr03Dialog.h. Убедитесь, что все только что объявленные Вами переменные уже прописаны в тексте этого файла. Закройте файл MyPr03Dialog.h.
Теперь откройте файл MyPr03Dialog.cpp. В тексте конструктора CMyPr03Dialog найдите строки:
, m_bBlue(FALSE)
, m_bGreen(FALSE)
, m_bRed(FALSE)
, m_nObject(0)
, m_strSlVal(_T(""))
Редактор Class View сам присвоил нашим переменным стартовые значения. Давайте некоторые из них немного изменим. Например, «включим» флажок, отвечающий за красный цвет, поменяв значение переменной m_bRed с FALSE на TRUE. Теперь, когда пользователь откроет диалоговое окно Вашего приложения, в разделе «Выберите цвет» напротив слова «красный» будет стоять «галочка».
Значение 0 переменной m_nObject означает, что выбран первый геометрический объект. Они у нас расположены в следующем порядке: «линия», «окружность», «квадрат». Значит, линия имеет номер 0, окружность - номер 1, квадрат - номер 2. Поменяйте значение m_nObject с 0 на 1. Тем самым, мы определяем в качестве выбранного по умолчанию объекта окружность. Сохраните файл MyPr03Dialog.cpp.
Добавление пункта в Главного меню
1. Добавьте в раздел Implementation файла MyPr03View.h объявление открытых переменных, в которые мы перегрузим данные из диалогового окна:
public:
int m_nType, m_nSize;
BOOL m_bColorRed, m_bColorGreen, m_bColorBlue;
2. Пусть наше диалоговое окно открывается через пункт Главного меню. Добавим в Главное меню пункт Paint (Нарисовать) с двумя командами: Input Data (Ввести Данные) и Clear Screen (Очистить Экран). Для этого выполните цепочку команд:
вкладка ResourceView окна проектов > список Menu > дважды щелкнуть левой кнопкой мыши IDR_MAINFRAME.
Перед Вами открылось окно редактора ресурсов.
Щелкните расположенную в конце (после пункта Help) ячейку Type Here и введите текст: Paint.
Перейдите в ту ячейку, которая появилась под пунктом Paint и введите &Input Data. Буква, которая стоит после символа & (в нашем случае I), будет подчеркнута. Именно эта буква определяет быструю клавишу. В окне свойств этого пункта меню ячейки (щёлкнуть ячейку правой кнопкой мыши) в поле идентификатора ID введите ID_INPUTDATA, в поле всплывающей подсказки Prompt − Click, to open dialog. Эта подсказка сообщит пользователю, что при нажатии данной клавиши откроется окно диалога. Закройте окно свойств.
В ячейке, которая появилась под пунктом Input Data, введите &Clear Screen. В поле идентификатора ID введите ID_CLEARSCREEN, в поле всплывающей подсказки Prompt − Click, to clear screen. Закройте окно свойств.
Выделите ячейку Paint и перетащите ее левой кнопкой мыши влево, вставив между пунктами Edit и View. У Вас должно получиться следующее:
3. Сохраните файл ресурсов MyPr03.rc на диске: вкладка ResourceView окна проектов > Menu > правой кнопкой мыши щелкнуть IDR_MAINFRAME и выбрать Save MyPr03.rc.
4. Для нового пункта меню создадим обработчик сообщения COMMAND.
Щёлкните правой кнопкой мыши ячейку Input Data и в открывшемся контекстном меню выберите команду Add Event Handler (Добавить Событие).
Перед Вами открылось окно Event Handler Wizard. В списке Class List выберите класс CMyPr03View. Убедитесь, что в списке Message type указано сообщение COMMAND и нажмите кнопку Add and Edit (Добавить и Редактировать).
В текст функции OnInputdata добавьте код:
CMyPr03Dialog dlg; // Объявляем переменную dlg класса CMyPr03Dialog
dlg.DoModal(); // Открыть модальное диалоговое окно
// Перегрузить данные из диалогового окна в переменные класса CMyPr03View
m_nType=dlg.m_nObject;
m_nSize=dlg.m_nSlider;
m_bColorRed=dlg.m_bRed;
m_bColorGreen=dlg.m_bGreen;
m_bColorBlue=dlg.m_bBlue;
5. Добавьте в файл MyPr03View.cpp оператор include:
#include “MyPr03Dialog.h”
6. Соберите проект и запустите программу на выполнение.
Щелкните кнопку Paint главного меню. Подведите курсор к строке Input Data, не нажимая ее. В нижней строке окна, строке состояния, Вы можете прочесть подсказку Click, to open dialog, которую внесли в поле Prompt свойств пункта меню.
Обратите внимание, что команда Clear Screen пока не доступна. Так и должно быть, - ведь мы еще не добавили к проекту обработчик этой команды.
Откройте диалоговое окно, щелкнув строку меню Input Data, и убедитесь, что в качестве выбранного объекта помечена окружность, а в качестве выбранного цвета − красный. Пощелкайте переключатели и флажки, выбирая другой объект и другой цвет.
Снова щелкните кнопку Paint, после чего нажмите клавишу «i» клавиатуры. Как видите, быстрая клавиша исправно работает: диалоговое окно послушно открылось.
Замечания.
1. Процесс «перевода» Главного меню на русский язык см. в лабораторной работе № 6.
2. Процесс создания контекстного меню см. в лабораторной работе № 5.
Подключение «непрерывного» ползунка
1. Изменим начальное значение переменной m_nSlider, связанной с ползунком.
Откройте файл MyPr03Dialog.cpp. В тексте конструктора CMyPr03Dialog найдите строку
, m_nSlider(0)
Редактор ClassView сам присвоил нашей переменной значение 0. Поменяйте его на 50.
2. Добавим функцию инициализации OnInitDialog.
На вкладке Class View выберите класс CMyPr03Dialog и откройте окно его свойств (правая кнопка мыши). В окне свойств щёлкните кнопку
и в открывшемся списке выберите строку OnInitDialog. Добавьте функцию инициализации (<Add> OnInitDialog).
Перед оператором return вставьте в текст функции OnInitDialog следующий код:
// Объявляем строковую переменную strText1
CString strText1;
// Объявляем переменную pSlide1, как указатель на элемент класса CSliderCtrl
// и связываем ее с элементом управления, имеющим идентификатор IDC_SLIDER1
CSliderCtrl* pSlide1=(CSliderCtrl*)GetDlgItem(IDC_SLIDER1);
// Устанавливаем для ползунка диапазон значений
pSlide1->SetRange(20, 100);
// Устанавливаем начальное положение ползунка (m_nSlider=50)
pSlide1->SetPos(m_nSlider);
// В строковую переменную заносим значение, на которое указывает ползунок
strText1.Format("%d", pSlide1->GetPos());
// Выводим это значение в статическое поле с идентификатором IDC_SLIDER_VAL
SetDlgItemText(IDC_SLIDER_VAL, strText1);
3. Создадим обработчик сообщения WM_HSCROLL.
Чтобы можно было обновлять статический текст в соответствии с текущим положением ползунка, а также обновить значение переменной m_nSlider, выполните следующие действия.
Откройте вкладку Class View окна проектов. В списке классов выделите CMyPr03 Dialog и откройте окно его свойств (правая кнопка мыши). В окне свойств перейдите на вкладку сообщений Messages и выберите там сообщение WM_HSCROLL (реакция на горизонтальную прокрутку). В открывшемся справа списке выберите строку <Add> OnHScroll().
Замените текст функции OnHScroll на:
// Объявляем строковую переменную strText
CString strText;
// Объявляем переменную pSlide, как указатель на элемент класса CSliderCtrl
CSliderCtrl*