=> Главная База Знаний Qt Быстрое проектирование диалоговых окон


Быстрое проектирование диалоговых окон

Быстрое проектирование диалоговых окон

Средства разработки Qt спроектированы таким образом, чтобы было приятно программировать «вручную» и чтобы этот процесс был интуитивно понятен; и нет ничего необычного в разработке всего приложения Qt на «чистом» языке С++. Все же многие программисты предпочитают применять визуальные средства проектирования форм, поскольку этот метод представляется более естественным и позволяет получать конечный результат быстрее, чем при программировании «вручную», и такой подход дает возможность программистам быстрее и легче экспериментировать и изменять дизайн.

Qt Designer расширяет возможности программистов, предоставляя визуальные средства проектирования. Qt Designer может использоваться для разработки всех или только некоторых форм приложения. Формы, созданные с помощью Qt Designer, в конце концов представляются в виде программного кода на С++, поэтому Qt Designer может использоваться совместно с обычными средствами разработки, и он не налагает никаких специальных требований на компилятор.

В данном разделе мы применяем Qt Designer для создания диалогового окна (см. рис. 2.4), которое управляет переходом на заданную ячейку таблицы (Go-to-Cell dialog). Создание диалогового окна как при ручном кодирования, так и при использовании Qt Designer предусматривает выполнение следующих шагов:

• создание и инициализация дочерних виджетов;

• размещение дочерних виджетов в менеджерах компоновки;

• определение последовательности переходов по клавише табуляции;

• установка соединений «сигнал — слот»;

• реализация пользовательских слотов диалогового окна.

Рис. 2.4. Диалоговое окно для перехода на заданную ячейку таблицы.

Для запуска Qt Designer выберите функцию Qt by Trolltech v4.x.y | Designer в меню Start системы Windows, наберите designer в командной строке системы Unix или дважды щелкните по Designer в системе Mac OS X Finder. После старта Qt Designer выдает список шаблонов. Выберите шаблон «Widget», затем нажмите на кнопку ОК. (Привлекательным может показаться шаблон «Dialog with Buttons Bottom» (диалог с кнопками в нижней части), но в этом примере мы покажем, как создавать кнопки OK и Cancel вручную.) Вы получите на экране окно с заголовком «Untitled».

По умолчанию интерфейс пользователя в Qt Designer содержит несколько окон верхнего уровня. Если вы предпочитаете интерфейс в стиле MDI с одним окном верхнего уровня и несколькими подчиненными окнами, выберите функцию Edit | User Interface Mode | Docked Window.

На первом этапе создайте дочерние виджеты и поместите их в форму. Создайте одну текстовую метку, одну строку редактирования, одну (горизонтальную) pacпорку (spacer) и две кнопки. При создании любого элемента перенесите его название или пиктограмму из окна виджетов Qt Designer на форму приблизительно в то место, где он должен располагаться. Элемент распорка, который не будет видим при работе формы, в QtDesigner показан в виде синей пружинки.

Рис. 2.5. Qt Designer в режиме пристыкованного окна в системе Windows.

Затем передвиньте низ формы вверх, чтобы она стала короче. В результате вы получите форму, похожую на показанную на рис. 2.6. Не тратьте слишком много времени на позиционирование элементов на форме; менеджеры компоновки Qt позже выполнят точное их позиционирование.

Рис. 2.6. Форма с несколькими виджетами.

Задайте свойства каждого виджета, используя редактор свойств Qt Designer.

1. Щелкните по текстовой метке. Убедитесь, что свойство objectName (имя объекта) имеет значение «label» (текстовая метка), а свойство text (текст) установите на значение «&Cell Location» (расположение ячейки).

2. Щелкните по строке редактирования. Убедитесь, что свойство objectName имеет значение «lineEdit» (строка редактирования).

3. Щелкните по первой кнопке. Установите свойство objectName на значение «okButton» (кнопка подтверждения), свойство enabled (включена) на значение «false» (ложь), свойство default (режим умолчания) на «true» (истина), свойство text на значение «OK» (подтвердить).

4. Щелкните по второй кнопке. Установите свойство objectName на значение «cancelButton» (кнопка отмены) и свойство text на значение «Cancel» (отменить).

5. Щелкните по свободному месту формы для выбора самой формы. Установите objectName на значение «GoToCellDialog» (диалоговое окно перехода на ячейку) и windowTitle (заголовок окна) на значение «Go to Cell» (перейти на ячейку).

Теперь все виджеты выглядят привлекательно, кроме текстовой метки &Cell Location. Выберите Edit | Edit Buddies (Правка | Редактировать партнеров) для входа в специальный режим, позволяющий задавать партнеров. Щелкните по этой метке и перенесите красную стрелку на строку редактирования, а затем отпустите кнопку мышки. Теперь эта метка будет выглядеть как Cell Location и иметь строку редактирования в качестве партнера. Выберите Click Edit | Edit Widgets (Правка | Редактировать виджеты) для выхода из режима установки партнеров.

Рис. 2.7. Вид формы после установки свойств виджетов.

На следующем этапе виджеты размещаются в форме требуемым образом:

1. Щелкните по текстовой метке Cell Location и нажмите клавишу Shift одновременно со щелчком по полю редактирования, обеспечив одновременный выбор этих виджетов. Выберите в меню Form | Lay Out Horizontally (Форма | Горизонтальная компоновка).

2. Щелкните по растяжке, затем, удерживая клавишу Shift, щелкните по клавишам OK и Cancel. Выберите в меню Form | Lay Out Horizontally.

3. Щелкните по свободному месту формы, аннулируя выбор любых виджетов, затем выберите в меню функцию Form | Lay Out Vertically (Форма | Вертикальная компоновка).

4. Выберите в меню функцию Form | Adjust Size для установки предпочитаемого размера формы.

Красными линиями на форме обозначаются созданные менеджеры компоновки. Они невидимы при выполнении программы.

Рис. 2.8. Форма с менеджерами компоновки.

Теперь выберите в меню функцию Edit | Edit Tab Order (Правка | Редактировать порядок перехода по клавише табуляции). Рядом с каждым виджетом, которому может передаваться фокус, появятся синие прямоугольники. Щелкните по каждому виджету, соблюдая необходимую вам последовательность перевода фокуса, затем выберите в меню функцию Edit | Edit Widgets для выхода из режима редактирования переходов по клавише табуляции.

Рис. 2.9. Установка последовательности перевода фокуса по виджетам формы.

Для предварительного просмотра спроектированного диалогового окна выберите в меню функцию Form | Preview (Форма | Предварительный просмотр). Проверьте последовательность перехода фокуса, нажимая несколько раз клавишу табуляции. Нажмите одновременно клавиши Alt+C для перевода фокуса на строку редактирования. Нажмите на кнопку Cancel для прекращения работы.

Сохраните спроектированное диалоговое окно в файле gotocelldialog.ui в каталоге с названием gotocell и создайте файл main.cpp в том же каталоге с помощью обычного текстового редактора.

01 #include <QApplication>

02 #include <QDialog>

03 #include "ui_gotocelldialog.h"


04 int main(int argc, char *argv[])

05 {

06 QApplication app(argc, argv);

07 Ui::GoToCellDialog ui;

08 QDialog *dialog = new QDialog;

09 ui.setupUi(dialog);

10 dialog->show();

11 return app.exec();

12 }

Теперь выполните команду qmake для создания файла с расширением .pro и затем создайте файл makefile (команды qmake —project; qmake gotocell.pro). Программе qmake «хватит ума» обнаружить файл пользовательского интерфейса gotocelldialog.ui и сгенерировать соответствующие команды для вызова uic — компилятора пользовательского интерфейса, входящего в состав средств разработки Qt. Компилятор uic преобразует gotocelldialog.ui в инструкции С++ и помещает результат в ui_gotocelldialog.h.

Полученный файл ui_gotocelldialog.h содержит определение класса Ui::GoToCellDialog, который содержит инструкции С++, эквивалентные файлу gotocelldialog.ui. В этом классе объявляются переменные—члены, в которых содержатся дочерние виджеты и менеджеры компоновки формы, а также функция setupUi(), которая инициализирует форму. Сгенерированный класс выглядит следующим образом:

class Ui::GoToCellDialog

{

public:

QLabel *label;

QLineEdit *lineEdit;

QSpacerItem *spacerItem;

QPushButton *okButton;

QPushButton *cancelButton;

void setupUi(QWidget *widget) {

}

};

Сгенерированный класс не наследует никакой Qt—класс. При использовании формы в main.cpp мы создаем QDialog и передаем его функции setupUi().

Если вы станете выполнять программу в данный момент, она будет работать, но не совсем так, как требуется:

• кнопка OK всегда будет в неактивном состоянии;

• кнопка Cancel не выполняет никаких действий;

• поле редактирования будет принимать любой текст, а оно должно принимать только допустимое обозначение ячейки.

Правильную работу диалогового окна мы можем обеспечить, написав некоторый программный код. Лучше всего создать новый класс, который наследует QDialog и Ui::GoToCellDialog и реализует недостающую функциональность (подтверждая известное утверждение, что любую проблему программного обеспечения можно решить, просто добавив еще один уровень представления объектов). По нашим правилам мы даем этому новому классу такое же имя, которое генерируется компилятором uic, но без префикса Ui::.

Используя текстовый редактор, создайте файл с именем gotocelldialog.h, который будет содержать следующий код:

01 #ifndef GOTOCELLDIALOG_H

02 #define GOTOCELLDIALOG_H

03 #include <QDialog>

04 #include "ui_gotocelldialog.h"

05 class GoToCellDialog : public QDialog, public Ui::GoToCellDialog

06 {

07 Q_OBJECT

08 public:

09 GoToCellDialog(QWidget *parent = 0);

10 private slots:

11 void on_lineEdit_textChanged();

12 };

13 #endif

Реализация методов класса делается в файле gotocelldialog.cpp:

01 #include <QtGui>

02 #include "gotocelldialog.h"


03 GoToCellDialog::GoToCellDialog(QWidget *parent)

04 : QDialog(parent)

05 {

06 setupUi(this);

07 QRegExp regExp("[A-Za-z][1-9][0-9]{0,2}");

08 lineEdit->setValidator(new QRegExpValidator(regExp, this));

09 connect(okButton, SIGNAL(clicked()),

10 this, SLOT(accept()));

11 connect(cancelButton, SIGNAL(clicked()),

12 this, SLOT(reject()));

13 }


14 void GoToCellDialog::on_lineEdit_textChanged()

15 {

16 okButton->setEnabled(lineEdit->hasAcceptableInput());

17 }

В конструкторе мы вызываем setupUi() для инициализации формы. Благодаря множественному наследованию мы можем непосредственно получить доступ к членам класса Ui::GoToCellDialog. После создания пользовательского интерфейса setupUi() будет также автоматически подключать все слоты с именами типа on_objectName_signalName() к соответствующему сигналу signalName() виджета objectName. В нашем примере это означает, что setupUi() будет устанавливать следующее соединение «сигнал—слот»:

connect(lineEdit, SIGNAL(textChanged(const QString &)),

this, SLOT(on_lineEdit_textChanged()));

Также в конструкторе мы задаем ограничение на допустимый диапазон вводимых значений. Qt обеспечивает три встроенных класса по проверке правильности значений: QIntValidator, QDoubleValidator и QRegExpValidator. В нашем случае мы используем QRegExpValidator, задавая регулярное выражение «[A—Za—z][1—9][0—9]{0,2}», которое означает следующее: допускается одна маленькая или большая буква, за которой следует одна цифра в диапазоне от 1 до 9; затем идут ноль, одна или две цифры в диапазоне от 0 до 9. (Введение в регулярные выражения вы можете найти в документации по классу QRegExp.)

Указывая в конструкторе QRegExpValidator значение this, мы его делаем дочерним элементом объекта GoToCellDialog. После этого нам можно не беспокоиться об удалении в будущем QRegExpValidator; этот объект будет удален автоматически после удаления его родительского элемента.

Механизм взаимодействия объекта с родительскими и дочерними элементами реализован в QObject. Когда мы создаем объект (виджет, функцию по проверке правильности значений или любой другой объект) и он имеет родительский объект, то к списку дочерних элементов этого родителя добавится и данный объект. При удалении родительского элемента будет просмотрен список его дочерних элементов и все они будут удалены. Эти дочерние элементы, в свою очередь, сами удалят все свои дочерние элементы, и эта процедура будет выполняться до тех пор, пока ничего не останется.

Механизм взаимодействия объекта с родительскими и дочерними элементами значительно упрощает управление памятью, снижая риск утечек памяти. Явным образом мы должны удалять только объекты, которые созданы оператором new и которые не имеют родительского элемента. А если мы удаляем дочерний элемент до удаления его родителя, то Qt автоматически удалит этот объект из списка дочерних объектов этого родителя.

Для виджетов родительский объект имеет дополнительный смысл: дочерние виджеты размещаются внутри области, которую занимает родительский объект. При удалении родительского виджета не только освобождается занимаемая дочерними объектами память — он исчезает с экрана.

В конце конструктора мы подключаем кнопку OK к слоту accept() виджета QDialog и кнопку Cancel к слоту reject(). Оба слота закрывают диалог, но accept() устанавливает результат диалога на значение QDialog::Accepted (которое равно 1), a reject() устанавливает значение QDialog::Rejected (которое равно 0). При использовании этого диалога мы можем использовать значение результата, чтобы узнать, была ли нажата кнопка OK, и действовать соответствующим образом.

Слот on_lineEdit_textChanged() устанавливает кнопку OK в активное или неактивное состояние в зависимости от наличия в строке редактирования допустимого обозначения ячейки. QLineEdit::hasAcceptableInput() использует функцию проверки допустимости значений, которую мы задали в конструкторе.

На этом завершается построение диалога. Теперь мы можем переписать main.cpp следующим образом:

01 #include <QApplication>

02 #include "gotocelldialog.h"

03 int main(int argc, char *argv[])

04 {

05 QApplication app(argc, argv);

06 GoToCellDialog *dialog = new GoToCellDialog;

07 dialog->show();

08 return app.exec();

09 }

Постройте еще раз приложение (qmake —project; qmake gotocell.pro) и выполните его. Наберите в строке редактирования значение «A12» и обратите внимание на то, как кнопка OK становится активной. Попытайтесь ввести какой-нибудь произвольный текст и посмотрите, как сработает функция по проверке допустимости значения. Нажмите кнопку Cancel для закрытия диалогового окна.

Привлекательной особенностью применения Qt Designer является возможность для программиста действовать достаточно свободно при изменении дизайна формы, причем при этом исходный код программы не будет нарушен. При разработке формы с непосредственным написанием операторов С++ на изменение дизайна уходит много времени. При использовании Qt Designer не будет тратиться много времени, поскольку uic просто заново генерирует исходный код программы для форм, которые были изменены. Пользовательский интерфейс диалога сохраняется в файле .ui (который имеет формат XML), а соответствующая функциональная часть реализуется путем создания подкласса, сгенерированного компилятором uic класса.