Мы поможем в написании ваших работ!
ЗНАЕТЕ ЛИ ВЫ?
|
Классы библиотеки Qt: элементы виджета.
Цель работы: отработка умений и навыков использования библиотеки Qt для формирования элементов виджета.
Теория.
Классы интерфейса (см. лек. oop_lek7.pdf)
Задание.
- Создать пустой виджет с заголовком "MyWidget", который не перекрывается другими окнами;
- Скопировать файл /usr/local/share/wall в рабочую папку;
- Создать окно с красным фоном размером (x, y). В окне расположить рисунок с координатами (a, b), размером (c, d);
- Создать скрин-шот;
- Дополнить код программы возможностью изменения вида курсора при его движении над картинкой;
- Создать полосы прокрутки в окне виджета;
- Создать скрин-шот.
В отчете представить конечный код программы с подробными комментариями и скрин-шотами приложений.
Варианты
| 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 – информация о предстоящей вам сессии (название института, факультета, специальности, порядковый номер сессии, предстоящие экзамены и зачеты). Добавить компонент 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.
- Нажмите кнопку меню Пуск | Все программы | QDevelop | QDevelop. Откроется окно приложения QDevelop, изображенное на рис.1.
Рис.1.
- В главном меню программы выберите пункт Проект | Новый проект … Появится окно создания нового проекта
- Укажите путь к папке проекта D:\First, имя проекта – first, остальные параметры оставьте неизменными. После нажатия кнопки Ok будет автоматически создан проект, состоящий из следующих файлов: main.cpp, dialogimpl.cpp, dialogimpl.h в папке src, и шаблон интерфейса приложения dialog.ui в папке ui.
- В поле Состав проекта выберите вкладку Диалоги, и дважды щелкните левой кнопкой мыши на надписи ui/dialog.ui. Откроется среда быстрого создания интерфейса пользователя Qt designer. Удалите все элементы окна, созданные по умолчанию.
- В панели Property Editor (Редактор свойств), расположенной справа, выделите строку windowTitle (заголовок окна) и замените содержащийся в нем заголовок диалогового окна Dialog заголовком Qt Dialog.
- С панели Widget Box, расположенной слева, перетащите мышкой виджет статического текста Label в левый верхний угол заготовки диалогового окна. Появится рамка статического текста.
- В панели Property Editor выделите строку text (текст) и введите в связанное с ней текстовое поле строку LineEdit.
- Перетащите мышкой на форму под только что введенным статическим текстом виджет LineEdit (Текстовое поле).
- В панели Property Editor выделите строку objectName и измените имя текстового поля на LineEdit.
- Повторите пункты 6 и 7 для создания справа от заголовка текстового поля нового статического текста SpinBox.
- Перетащите мышкой на форму под только что введенным статическим текстом виджет Spin Box (Инкрементный регулятор).
- В панели Property Editor выделите строку objectName и измените имя инкрементного регулятора на SpinBox.
- Повторите пункты 6 и 7 для создания справа от заголовка инкрементного регулятора нового статического текста Combo Box.
- Перетащите мышкой на форму под только что введенным статическим текстом виджет ComboBox (Раскрывающийся список).
- В панели Property Editor выделите строку objectName и измените имя раскрывающегося списка на ComboBox.
- В той же панели выделите строку editable (Редактируемый) и выделите в связанном с ней раскрывающемся списке строку True.
- Перетащите мышкой на форму виджеты Horizontal Spacer (Горизонтальный разделитель) и расположите их слева и справа от статического текста Line Edit, Spin Box и ComboBox.
- Поместите указатель мыши в левый верхний угол заготовки диалогового окна, нажмите левую кнопку мыши и, не отпуская ее, переместите указатель мыши. Появится рамка.
- Охватите рамкой статический текст Line Edit и два разделителя. Отпустите левую кнопку мыши. Элементы управления, попавшие в рамку, будут выделены. Если при выделении текстового поля и его заголовка в рамку попали и выделились другие элементы управления, отмените их выделение щелчком левой кнопки мыши при нажатой клавише <Shift>.
- Выберите команду контекстного меню правой кнопки мыши Lay out | Lay Out Horizontally (Расположение | Расположить по горизонтали), нажмите комбинацию клавиш <Ctrl>+<H> или кнопку Lay Out Horizontally в панели инструментов Layout. Текстовое поле и два разделителя будут автоматически выровнены по горизонтали.
- Поместите указатель мыши в левый верхний угол заготовки диалогового окна, нажмите левую кнопку мыши и, не отпуская ее, обведите получаемой при перемещении указателя мыши рамкой текстовое поле с его заголовком. Текстовое поле и его заголовок будут выделены.
- Выберите команду контекстного меню правой кнопки мыши Lay out | Lay Out Vertically (Расположение | Расположить по вертикали), нажмите комбинацию клавиш <Ctrl>+<L> или кнопку Lay Out Vertically в панели инструментов Layout. Текстовое поле и его заголовок будут автоматически выровнены по вертикали.
- Повторите пункты 18-22 для инкрементного регулятора и его заголовка.
- Повторите пункты 18-22 для раскрывающегося списка и его заголовка.
- Поместите горизонтальные разделители слева от текстового поля, справа от раскрывающегося списка и по обеим сторонам инкрементного регулятора, выделите все элементы управления и разделители и выровняйте их по горизонтали.
- Перетащите мышкой на форму под текстовым полем виджет ButtonGroup (Групповая рамка кнопок). В результате будет создана групповая рамка кнопок.
- В панели Property Editor выделите строку title (заголовок) и измените заголовок группы переключателей на Destination.
- В той же панели выделите строку objectName и измените имя группы переключателей на DestGroup.
- Перетащите мышкой в групповую рамку один под другим два виджета RadioButton (Переключатель).
- В панели Property Editor выделите строку objectName и задайте имя первого переключателя EditSwitch, а второго – SpinSwitch.
- В той же панели выделите строку text и введите в связанное с ней текстовое поле строку Line Edit для первого переключателя и SpinBox для второго.
- Выделите строку checked (отмеченный) для первого переключателя и выделите в связанном с ней раскрывающемся списке строк True.
- Выделите элемент управления групповой рамки и выберите команду контекстного меню правой кнопки мыши Lay out | Lay Out Vertically, нажмите комбинацию клавиш <Ctrl> +<L> или кнопку Lay Out Vertically в панели инструментов Layout. Групповая рамка расширится, а переключатели в ней выровняются по вертикали.
- Перетащите мышкой на форму виджет CheckBox (Флажок) и расположите его справа от группы переключателей.
- В панели Property Editor выделите строку objectName и измените имя флажка на CopyCheck.
- В той же панели выделите строку text и введите в связанное с ней текстовое поле строку Сору? (Копировать?).
- Перетащите мышкой на форму виджет PushButton (Кнопка) и расположите его справа от флажка.
- В панели Property Editor выделите строку objectName и измените имя кнопки на OKButton.
- В той же панели выделите строку text и введите в связанное с ней текстовое поле строку ОК.
- Поместите горизонтальные разделители слева от групповой рамки, справа от кнопки ОК и по обеим сторонам флажка.
- Выделите групповую рамку, флажок, кнопку ОК и введенные в предыдущем пункте разделители и выровняйте их по горизонтали.
- Установите вертикальные разделители над строкой заголовков, выше и ниже флажка.
- Щелкните левой кнопкой мыши в заготовке диалогового окна за пределами элементов управления и выберите команду контекстного меню правой кнопки мыши Lay out | Lay Out Vertically, нажмите комбинацию клавиш <Ctrl>+<L> или кнопку Lay Out Vertically в панели инструментов Layout. Элементы управления диалогового окна будут выровнены по вертикали.
- Выберите команду контекстного меню правой кнопки мыши Lay out | Adjust Size (Расположение | Настроить размер), нажмите комбинацию клавиш <Ctrl>+<J> или кнопку Adjust Size в панели инструментов Layout. Размеры заготовки диалогового окна будут приведены в соответствие с его содержимым.
- Нажмите кнопку Edit Tab Order в панели инструментов. Эта кнопка "утопится", и заготовка диалогового окна примет вид, изображенный на рис.2.
Рис.2.
- Щелкните левой кнопкой мыши по синему кружку с номером 7, расположенным около кнопки ОК. В этом кружке появится номер 1, а номера в остальных кружках будут увеличены на единицу. Нажмите клавишу <Esc>. Порядковые номера элементов управления исчезнут.
- Выберите команду меню Preview | Preview Form (Предварительный просмотр | Предварительный просмотр формы) или нажмите комбинацию клавиш <Ctrl>+<T>. Появится макет созданного нами диалогового окна, изображенный на рис.3.
Рис.3.
- Измените размеры макета диалогового окна. Его элементы управления будут плавно перемещаться по его поверхности и его размер не может быть сделан меньшим, чем это необходимо для размещения всех его элементов управления.
- Нажмите кнопку Закрыть. Макет диалогового окна закроется.
- Теперь нам остается рассмотреть еще один важный вопрос, связанный с созданием заготовки диалогового окна – установление последовательности передачи фокуса ввода элементам управления диалогового окна при нажатии пользователем клавиши <Таb> или комбинации клавиш <Shift> + <Tab>. Несмотря на несомненные преимущества работы с мышью, в некоторых случаях пользователю удобно не отрываться от клавиатуры, осуществлять с нее передачу фокуса ввода элементам управления диалогового окна. Для этого все элементы управления диалогового окна, у которых свойство focusPolicy имеет значение TabFocus, объединяются в циклический список. Для передачи фокуса ввода следующему элементу этого списка используется Клавиша <Таb>, а для передачи его предыдущему элементу списка – комбинации клавиш <Shift>+<Tab>. Диалоговые окна часто вызываются по ошибке, поэтому всегда полезно предоставить пользователю возможность закрыть только что открытое окно с минимальными усилиями. Для этого в них могли бы быть назначены кнопки, выбираемые по умолчанию, но эти кнопки перехватывают сообщение о нажатии клавиши <Enter> независимо от наличия у них фокуса ввода, что может негативно сказаться на работе с другими элементами управления. Поэтому мы просто поставили кнопку выхода из диалогового окна первой в списке элементов управления.
- Для превращения заготовки диалогового окна в полноценное диалоговое окно необходимо сохранить форму.
- Но прежде, создадим связь сигнал-слот, корректно закрывающую приложение.
- Нажмите кнопку Edit Signal/Slots панели инструментов. Форма готова к отображению заданных связей.
- Выберите мышью кнопку Ok. И не отпуская кнопку, переместите мышь на пустое поле формы. Появится окно связи.
- Свяжите сигнал clicked() со слотом accept(). Нажмите кнопку Ok.
- Необходимо определить значения величин по умолчанию.
- В панели Property Editor в строке text компонентов LineEdit и SpinBox соответственно укажите значения 32, 24.
- Щелкните два раза левой кнопкой мыши на компоненте ComboBox, появится окно Edit Listbox. В нем создайте три элемента (с помощью кнопки NewItem) с полями 8, 32, 256.
- Сохраните форму, выбрав команду File | Save Form и закройте Qt Designer.
Завершение создания диалогового приложения
- В QDevelop двойным щелчком мыши откройте исходные файлы main.cpp, dialogimpl.cpp, dialogimpl.h.
- Слева в окне Состав проекта выберите вкладку Классы.
- Щелкните правой клавишей мыши на классе DialogImpl. В контекстном меню выберите пункт Add Method…
- В строке Method Name укажите имя слота EditDest. Параметры слота - bool. Слот объявите закрытым.
Рис.4.
- Нажмите кнопку ОК. Файлы dialogimpl.cpp и dialogimpl.h будут дополнены необходимыми заголовками слота.
- Повторите пункты 59 и 61 для создания слотов SpinDest(bool), copyFlag(bool) и boxCopy(QString).
- В разделе private класса создайте переменную ui, наследующую все свойства формы интерфейса пользователя, целочисленную переменную dest, характеризующую состояние переключателей и двоичную переменную copy, характеризующую состояние флажка.
- В конструкторе формы укажите состояние переменных и создайте сигнально-слотные связи:
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)));
- Листинг слотов приводится ниже:
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;
}
}
}
- Сохраните проект и произведите его сборку, нажав кнопку Сборка панели инструментов, или клавишу F7.
- Если необходимо, выполните отладку проекта.
- Запустите программу:./test
- В раскрывающемся списке ComboBox выделите строку 256. Она появится в текстовом поле раскрывающегося списка.
- Измените значение в текстовом поле раскрывающегося списка.
- Установите флажок Сору? и повторите пункт 72. Новое значение появится не только в текстовом поле раскрывающегося списка, но и в текстовом поле LineEdit.
- Установите переключатель SpinBox в группе Destination и повторите пункт 72, выделив в раскрывающемся списке строку 32. Новое значение появится не только в текстовом поле раскрывающегося списка, но и в текстовом поле инкрементного регулятора.
- Нажмите на верхнюю кнопку инкрементного регулятора. Значение в его текстовом поле увеличится на 1.
- Нажмите на нижнюю кнопку инкрементного регулятора. Значение в его текстовом поле уменьшится на 1.
- Нажмите кнопку ОК. Диалоговое окно и приложение закроется.
Лабораторная работа 10
|