Классы библиотеки Qt: элементы виджета.

Цель работы: отработка умений и навыков использования библиотеки Qt для формирования элементов виджета.

Теория.

Классы интерфейса (см. лек. oop_lek7.pdf)

 

Задание.

1. Создать пустой виджет с заголовком "MyWidget", который не перекрывается другими окнами;
2. Скопировать файл /usr/local/share/wall в рабочую папку;
3. Создать окно с красным фоном размером (x, y). В окне расположить рисунок с координатами (a, b), размером (c, d);
4. Создать скрин-шот;
5. Дополнить код программы возможностью изменения вида курсора при его движении над картинкой;
6. Создать полосы прокрутки в окне виджета;
7. Создать скрин-шот.

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

Варианты

	a	b	c	d	x	y	курсор
1.							UpArrowCursor
2.							CrossCursor
3.							WaitCursor
4.							IbeamCursor
5.							PointingHandCursor
6.							ForbiddenCursor
7.							WhatsThisCursor
8.							SizeVerCursor
9.							SizeHorCursor
10.							SizeAllCursor
11.							CrossCursor
12.							ForbiddenCursor

Комментарий.

 

Для создания компонента QLabel необходимо подключить соответствующую библиотеку. Элемент надписи можно создать так:

1. QLabel lbl = new QLabel(“Hello”);

Для указания цвета компонента используют метод setStyleSheet

2. lbl->setStyleSheet("background-color: red;"

"font: 14px 'Courier New';");

 

Контрольные вопросы

1. Что называют библиотекой классов?

2. Что собой представляет иерархия классов библиотеки Qt?

3. Что является классом приложения, каковы его функции?

4. Каковы общие принципы построения приложения с использованием библиотеки Qt?

5. Какова структура Qt проекта?

6. Какие вы знаете элементы отображения библиотеки Qt, каковы их основные методы и свойства?

7. Как в проекте Qt определяют связи наследования классов?

8. Как задают вид курсора в приложении Qt?

9. Что собой представляет виджет прокрутки, каковы его основные методы и свойства?

10. Каково функциональное назначение виджета QFrame?

 

Лабораторная работа 8

Классы библиотеки Qt: элементы отображения Qt

Цель работы: отработка умений и навыков использования библиотеки Qt для формирования элементов отображения.

 

Задание.

Компонент QLabel библиотеки Qt способен отображать HTML код.

1. Создать приложение, которое отображает информацию вашего варианта (в русскоязычном варианте). По необходимости использовать таблицы, картинки, подбор цвета.
2. Добавить в программу компонент.

· Вариант 1 – информация о предстоящей вам сессии (название института, факультета, специальности, порядковый номер сессии, предстоящие экзамены и зачеты). Добавить компонент QProgressBar, который должен отображать процентное отношение количества экзаменов и зачетов в этой сессии.

· Вариант 2 – информация о прошедшей сессии (название института, факультета, специальности, порядковый номер сессии, предстоящие экзамены и зачеты). Добавить компонент QLCDNumber, который должен отображать средний балл оценок предыдущей сессии.

· Вариант 3 – информация о себе (визитная карточка: Ф.И.О., название института, факультета, специальности). Добавить компонент QLCDNumber, который будет отображать ваш возраст.

· Вариант 4 – информация о фильмах в кинотеатрах города (название кинотеатра, фильма, время сеансов). Добавить компонент QProgressBar, минимальное значение которого должно соответствовать дню начала показа фильма, максимальное значение – концу показа, а текущее значение – настоящему дню.

· Вариант 5 – информация о характеристиках компьютера (производитель системной платы, процессор, объем ОЗУ, вид внешней памяти и ее объем). Частоту работы процессора и объем ОЗУ отобразить в компонентах QLCDNumber.

· Вариант 6 – информация для поступающих в институт на факультет АИТ (название института, номер и название специальности, перечень экзаменов). Добавить компонент QLCDNumber, который будет отображать год.

· Вариант 7 – информация о предложенных вам лабораторных работах по дисциплине. Добавить компонент QProgressBar, который должен отображать процентное отношение выполненных работ.

· Вариант 8 – расписание вашего рабочего дня. Добавить компонент QLCDNumber, который должен отображать ваше рабочее время в часах.

· Вариант 9 – информация о движении городских маршрутов автобусов в нашем городе (рейс - направление). В компоненте QLCDNumber отобразить стоимость проезда.

· Вариант 10 – информация о движении междугородних маршрутов автобусов в нашем городе (направление, время). В компоненте QLCDNumber отобразить стоимость билета маршрута Старый Оскол - Белгород.

· Вариант 11 – информация о курсах валют на сегодняшний день. Курс рубль – доллар отобразить с помощью двух компонентов QLCDNumber.

· Вариант 12 – информация о сотовых телефонах (5 моделей). В компонентах QProgressBar отобразить их относительную стоимость.

 

Контрольные вопросы.

 

1. Какие элементы отображения вы знаете?

2. Назовите основные методы и свойства элементов отображения.

3. Какую информацию можно поместить в виджет надписи?

4. Какую функциональность компоненту QLabel добавляет метод setBuddy()?

5. Какова функция знака & в тексте надписи?

6. Каково функциональное назначение виджета QProgressBar?

7. Каково функциональное назначение виджета QLCDNumber?

8. Каковы методы добавления виджетов в приложение?

 

Лабораторная работа 9-10

Методы и средства проектирования интерфейса пользователя

Цель работы: отработка умений и навыков создания интерфейса пользователя в среде программирования QDevelop.

Теория.

Пример создания интерфейса пользователя в интерактивной среде программирования QDevelop.

1. Нажмите кнопку меню Пуск | Все программы | QDevelop | QDevelop. Откроется окно приложения QDevelop, изображенное на рис.1.

Рис.1.

1. В главном меню программы выберите пункт Проект | Новый проект … Появится окно создания нового проекта

1. Укажите путь к папке проекта D:\First, имя проекта – first, остальные параметры оставьте неизменными. После нажатия кнопки Ok будет автоматически создан проект, состоящий из следующих файлов: main.cpp, dialogimpl.cpp, dialogimpl.h в папке src, и шаблон интерфейса приложения dialog.ui в папке ui.
2. В поле Состав проекта выберите вкладку Диалоги, и дважды щелкните левой кнопкой мыши на надписи ui/dialog.ui. Откроется среда быстрого создания интерфейса пользователя Qt designer. Удалите все элементы окна, созданные по умолчанию.

 

1. В панели Property Editor (Редактор свойств), расположенной справа, выделите строку windowTitle (заголовок окна) и замените содержащийся в нем заголовок диалогового окна Dialog заголовком Qt Dialog.
2. С панели Widget Box, расположенной слева, перетащите мышкой виджет статического текста Label в левый верхний угол заготовки диалогового окна. Появится рамка статического текста.
3. В панели Property Editor выделите строку text (текст) и введите в связанное с ней текстовое поле строку LineEdit.
4. Перетащите мышкой на форму под только что введенным статическим текстом виджет LineEdit (Текстовое поле).
5. В панели Property Editor выделите строку objectName и измените имя текстового поля на LineEdit.
6. Повторите пункты 6 и 7 для создания справа от заголовка текстового поля нового статического текста SpinBox.
7. Перетащите мышкой на форму под только что введенным статическим текстом виджет Spin Box (Инкрементный регулятор).
8. В панели Property Editor выделите строку objectName и измените имя инкрементного регулятора на SpinBox.
9. Повторите пункты 6 и 7 для создания справа от заголовка инкрементного регулятора нового статического текста Combo Box.
10. Перетащите мышкой на форму под только что введенным статическим текстом виджет ComboBox (Раскрывающийся список).
11. В панели Property Editor выделите строку objectName и измените имя раскрывающегося списка на ComboBox.
12. В той же панели выделите строку editable (Редактируемый) и выделите в связанном с ней раскрывающемся списке строку True.
13. Перетащите мышкой на форму виджеты Horizontal Spacer (Горизонтальный разделитель) и расположите их слева и справа от статического текста Line Edit, Spin Box и ComboBox.
14. Поместите указатель мыши в левый верхний угол заготовки диалогового окна, нажмите левую кнопку мыши и, не отпуская ее, переместите указатель мыши. Появится рамка.
15. Охватите рамкой статический текст Line Edit и два разделителя. Отпустите левую кнопку мыши. Элементы управления, попавшие в рамку, будут выделены. Если при выделении текстового поля и его заголовка в рамку попали и выделились другие элементы управления, отмените их выделение щелчком левой кнопки мыши при нажатой клавише <Shift>.
16. Выберите команду контекстного меню правой кнопки мыши Lay out | Lay Out Horizontally (Расположение | Расположить по горизонтали), нажмите комбинацию клавиш <Ctrl>+<H> или кнопку Lay Out Horizontally в панели инструментов Layout. Текстовое поле и два разделителя будут автоматически выровнены по горизонтали.
17. Поместите указатель мыши в левый верхний угол заготовки диалогового окна, нажмите левую кнопку мыши и, не отпуская ее, обведите получаемой при перемещении указателя мыши рамкой текстовое поле с его заголовком. Текстовое поле и его заголовок будут выделены.
18. Выберите команду контекстного меню правой кнопки мыши Lay out | Lay Out Vertically (Расположение | Расположить по вертикали), нажмите комбинацию клавиш <Ctrl>+<L> или кнопку Lay Out Vertically в панели инструментов Layout. Текстовое поле и его заголовок будут автоматически выровнены по вертикали.
19. Повторите пункты 18-22 для инкрементного регулятора и его заголовка.
20. Повторите пункты 18-22 для раскрывающегося списка и его заголовка.
21. Поместите горизонтальные разделители слева от текстового поля, справа от раскрывающегося списка и по обеим сторонам инкрементного регулятора, выделите все элементы управления и разделители и выровняйте их по горизонтали.
22. Перетащите мышкой на форму под текстовым полем виджет ButtonGroup (Групповая рамка кнопок). В результате будет создана групповая рамка кнопок.
23. В панели Property Editor выделите строку title (заголовок) и измените заголовок группы переключателей на Destination.
24. В той же панели выделите строку objectName и измените имя группы переключателей на DestGroup.
25. Перетащите мышкой в групповую рамку один под другим два виджета RadioButton (Переключатель).
26. В панели Property Editor выделите строку objectName и задайте имя первого переключателя EditSwitch, а второго – SpinSwitch.
27. В той же панели выделите строку text и введите в связанное с ней текстовое поле строку Line Edit для первого переключателя и SpinBox для второго.
28. Выделите строку checked (отмеченный) для первого переключателя и выделите в связанном с ней раскрывающемся списке строк True.
29. Выделите элемент управления групповой рамки и выберите команду контекстного меню правой кнопки мыши Lay out | Lay Out Vertically, нажмите комбинацию клавиш <Ctrl> +<L> или кнопку Lay Out Vertically в панели инструментов Layout. Групповая рамка расширится, а переключатели в ней выровняются по вертикали.
30. Перетащите мышкой на форму виджет CheckBox (Флажок) и расположите его справа от группы переключателей.
31. В панели Property Editor выделите строку objectName и измените имя флажка на CopyCheck.
32. В той же панели выделите строку text и введите в связанное с ней текстовое поле строку Сору? (Копировать?).
33. Перетащите мышкой на форму виджет PushButton (Кнопка) и расположите его справа от флажка.
34. В панели Property Editor выделите строку objectName и измените имя кнопки на OKButton.
35. В той же панели выделите строку text и введите в связанное с ней текстовое поле строку ОК.
36. Поместите горизонтальные разделители слева от групповой рамки, справа от кнопки ОК и по обеим сторонам флажка.
37. Выделите групповую рамку, флажок, кнопку ОК и введенные в предыдущем пункте разделители и выровняйте их по горизонтали.
38. Установите вертикальные разделители над строкой заголовков, выше и ниже флажка.
39. Щелкните левой кнопкой мыши в заготовке диалогового окна за пределами элементов управления и выберите команду контекстного меню правой кнопки мыши Lay out | Lay Out Vertically, нажмите комбинацию клавиш <Ctrl>+<L> или кнопку Lay Out Vertically в панели инструментов Layout. Элементы управления диалогового окна будут выровнены по вертикали.
40. Выберите команду контекстного меню правой кнопки мыши Lay out | Adjust Size (Расположение | Настроить размер), нажмите комбинацию клавиш <Ctrl>+<J> или кнопку Adjust Size в панели инструментов Layout. Размеры заготовки диалогового окна будут приведены в соответствие с его содержимым.
41. Нажмите кнопку Edit Tab Order в панели инструментов. Эта кнопка "утопится", и заготовка диалогового окна примет вид, изображенный на рис.2.

Рис.2.

1. Щелкните левой кнопкой мыши по синему кружку с номером 7, расположенным около кнопки ОК. В этом кружке появится номер 1, а номера в остальных кружках будут увеличены на единицу. Нажмите клавишу <Esc>. Порядковые номера элементов управления исчезнут.
2. Выберите команду меню Preview | Preview Form (Предварительный просмотр | Предварительный просмотр формы) или нажмите комбинацию клавиш <Ctrl>+<T>. Появится макет созданного нами диалогового окна, изображенный на рис.3.

Рис.3.

1. Измените размеры макета диалогового окна. Его элементы управления будут плавно перемещаться по его поверхности и его размер не может быть сделан меньшим, чем это необходимо для размещения всех его элементов управления.
2. Нажмите кнопку Закрыть. Макет диалогового окна закроется.
3. Теперь нам остается рассмотреть еще один важный вопрос, связанный с созданием заготовки диалогового окна – установление последовательности передачи фокуса ввода элементам управления диалогового окна при нажатии пользователем клавиши <Таb> или комбинации клавиш <Shift> + <Tab>. Несмотря на несомненные преимущества работы с мышью, в некоторых случаях пользователю удобно не отрываться от клавиатуры, осуществлять с нее передачу фокуса ввода элементам управления диалогового окна. Для этого все элементы управления диалогового окна, у которых свойство focusPolicy имеет значение TabFocus, объединяются в циклический список. Для передачи фокуса ввода следующему элементу этого списка используется Клавиша <Таb>, а для передачи его предыдущему элементу списка – комбинации клавиш <Shift>+<Tab>. Диалоговые окна часто вызываются по ошибке, поэтому всегда полезно предоставить пользователю возможность закрыть только что открытое окно с минимальными усилиями. Для этого в них могли бы быть назначены кнопки, выбираемые по умолчанию, но эти кнопки перехватывают сообщение о нажатии клавиши <Enter> независимо от наличия у них фокуса ввода, что может негативно сказаться на работе с другими элементами управления. Поэтому мы просто поставили кнопку выхода из диалогового окна первой в списке элементов управления.
4. Для превращения заготовки диалогового окна в полноценное диалоговое окно необходимо сохранить форму.
5. Но прежде, создадим связь сигнал-слот, корректно закрывающую приложение.
6. Нажмите кнопку Edit Signal/Slots панели инструментов. Форма готова к отображению заданных связей.
7. Выберите мышью кнопку Ok. И не отпуская кнопку, переместите мышь на пустое поле формы. Появится окно связи.

1. Свяжите сигнал clicked() со слотом accept(). Нажмите кнопку Ok.
2. Необходимо определить значения величин по умолчанию.
3. В панели Property Editor в строке text компонентов LineEdit и SpinBox соответственно укажите значения 32, 24.
4. Щелкните два раза левой кнопкой мыши на компоненте ComboBox, появится окно Edit Listbox. В нем создайте три элемента (с помощью кнопки NewItem) с полями 8, 32, 256.
5. Сохраните форму, выбрав команду File | Save Form и закройте Qt Designer.

 

Завершение создания диалогового приложения

 

1. В QDevelop двойным щелчком мыши откройте исходные файлы main.cpp, dialogimpl.cpp, dialogimpl.h.
2. Слева в окне Состав проекта выберите вкладку Классы.
3. Щелкните правой клавишей мыши на классе DialogImpl. В контекстном меню выберите пункт Add Method…
4. В строке Method Name укажите имя слота EditDest. Параметры слота - bool. Слот объявите закрытым.

Рис.4.

1. Нажмите кнопку ОК. Файлы dialogimpl.cpp и dialogimpl.h будут дополнены необходимыми заголовками слота.
2. Повторите пункты 59 и 61 для создания слотов SpinDest(bool), copyFlag(bool) и boxCopy(QString).
3. В разделе private класса создайте переменную ui, наследующую все свойства формы интерфейса пользователя, целочисленную переменную dest, характеризующую состояние переключателей и двоичную переменную copy, характеризующую состояние флажка.
4. В конструкторе формы укажите состояние переменных и создайте сигнально-слотные связи:

ui.setupUi(this);

dest = 0;

copy = false;

connect(ui.ComboBox, SIGNAL(activated(QString)),

this, SLOT(boxCopy(QString)));

connect(ui.EditSwitch, SIGNAL(toggled(bool)),

this, SLOT(EditDest(bool)));

connect(ui.SpinSwitch, SIGNAL(toggled(bool)),

this, SLOT(SpinDest(bool)));

connect(ui.CopyCheck, SIGNAL(toggled(bool)),

this, SLOT(copyFlag(bool)));

1. Листинг слотов приводится ниже:

void DialogImpl::EditDest(bool a)

{

if (a)

dest = 0;

}

void DialogImpl::SpinDest(bool a)

{

if (a)

dest = 1;

}

void DialogImpl::copyFlag(bool c)

{

copy = c;

}

void DialogImpl::boxCopy(QString str)

{

if (copy) {

switch(dest) {

case 0: ui.LineEdit->setText(str);

break;

case 1: ui.SpinBox->setValue(str.toInt());

break;

}

}

}

1. Сохраните проект и произведите его сборку, нажав кнопку Сборка панели инструментов, или клавишу F7.
2. Если необходимо, выполните отладку проекта.
3. Запустите программу:./test
4. В раскрывающемся списке ComboBox выделите строку 256. Она появится в текстовом поле раскрывающегося списка.
5. Измените значение в текстовом поле раскрывающегося списка.
6. Установите флажок Сору? и повторите пункт 72. Новое значение появится не только в текстовом поле раскрывающегося списка, но и в текстовом поле LineEdit.
7. Установите переключатель SpinBox в группе Destination и повторите пункт 72, выделив в раскрывающемся списке строку 32. Новое значение появится не только в текстовом поле раскрывающегося списка, но и в текстовом поле инкрементного регулятора.
8. Нажмите на верхнюю кнопку инкрементного регулятора. Значение в его текстовом поле увеличится на 1.
9. Нажмите на нижнюю кнопку инкрементного регулятора. Значение в его текстовом поле уменьшится на 1.
10. Нажмите кнопку ОК. Диалоговое окно и приложение закроется.

 

Лабораторная работа 10