Контрольные вопросы.
Какие элементы отображения вы знаете?
Назовите основные методы и свойства элементов отображения.
Какую информацию можно поместить в виджет надписи?
Какую функциональность компоненту QLabel добавляет метод setBuddy()?
Какова функция знака & в тексте надписи?
Каково функциональное назначение виджета QProgressBar?
Каково функциональное назначение виджета QLCDNumber?
Каковы методы добавления виджетов в приложение?
Лабораторная работа 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