Revision as of 10:53, 24 February 2015

[toc align_right="yes" depth="3"]

Перші кроки з Qt

Ласкаво просимо до світу Qt — крос-платформного набору інструментів для ГІК (графічного інтерфейсу користувача). В цьому посібнику з перших кроків ми отримаємо базові знання з Qt, реалізовуючи просту програму Нотатник. Після прочитання цього посібника ви маєте бути готові зануритись до наших оглядів та документації з API та знайти потрібну вам інформацію для програми, що ви розробляєте.

Привіт, Нотатник

В цьому першому прикладі ми просто створимо та відобразимо текстовий редактор у вікні на стільниці. Це буде найпростіша можлива програма Qt, що має ГІК.

p=. http://doc.qt.nokia.com/4.7/images/gs1.png

Код програми:

<br />#include &lt;QApplication&amp;gt;<br />#include &lt;QTextEdit&amp;gt;

int main(int argc, char *'''argv)<br />{<br /> QApplication app(argc, argv);
<br /> QTextEdit textEdit;<br /> textEdit.show();
<br /> return app.exec&amp;amp;#40;&amp;#41;;<br />}<br />

p. Давайте переглянемо код рядок за рядком. В перших двох рядках ми підключаємо файли заголовків для "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html та "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html, двох класів, що потрібні для цього прикладу. Усі класи Qt мають файл заголовків, названий так само як і клас.
p. В рядку 6 створюється об'єкт "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html. Цей об'єкт керує ресурсами програми і має бути запущений в будь-який програмі Qt, що має ГІК. Йому передаються <code>argc</code> та <code>argv</code>, оскільки Qt обробляє деякі параметри командного рядка.
p. В рядку 8 створюється об'єкт "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html. Текстовий редактор є візуальним елементом ГІК. Ми називаємо такі елементи віджетами в Qt. Прикладами інших віджетів є панелі прокрутки, мітки та перемикачі. Віджет також може бути контейнером для інших віджетів, як, наприклад, діалог або головне вікно програми.
p. В рядку 9 текстовий редактор відображується на екрані у його власному вікні. Оскільки віджети також функціонують як контейнери (наприклад, "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html, який має панелі інструментів, меню, рядок статусу та декілька інших віджетів), то можна відобразити один віджет у його власному вікні. Віджети не відображаються за замовчанням; функція "show()":http://doc.qt.nokia.com/4.7/qwidget.html#show робить віджет видимим.
p. В рядку 11 відбувається вхід до циклу подій "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html. Коли програма Qt виконується, генеруються події, що доставляються до віджетів програми. Прикладами подій є натискання на кнопки миші та клавіші клавіатури. Коли ви набираєте текст в віджеті текстового редактора, він отримує події натискання клавіш та реагує промальовуванням тексту, що набирається.
p. Щоб запустити програму, відкрийте командний рядок та перейдіть до теки, в якій знаходиться файл <code>.cpp</code> програми. Наступні команди оболонки зберуть програму.

<br />qmake <s>project<br />qmake<br />make<br />

p. При цьому виконуваний модуль з'явиться в теці <code>part1</code> (майте на увазі, що у Windows вам, можливо, потрібно буде використовувати <code>nmake</code> замість <code>make</code>. Також, виконуваний модуль буде розміщено в <code>part1/debug</code> або <code>part1/release</code>). <code>qmake</code> це інструмент збірки з Qt, який використовує конфігураційний файл. <code>qmake</code> генерує його для нас, коли запускається з аргументом <code>project</code>. Коли конфігураційний файл (із суфіксом <code>.pro</code>) існує, <code>qmake</code> створює файл збірки, який збирає для вас програму. Ми розглянемо написання власних файлів <code>.pro</code> пізніше.
h3. Дізнайтесь більше
table{border:1px solid lightgray}.
{background:lightgray }. |. Про |. Тут |
|Віджети та геометрія вікна|"Віджети вікна та діалогу":http://doc.qt.nokia.com/4.7/application-windows.html|
|Події та обробка подій|"Система подій":http://doc.qt.nokia.com/4.7/eventsandfilters.html|
h2. Додаємо кнопку виходу
p. В справжній програмі вам, зазвичай, буде потрібен більше ніж один віджет. Зараз ми додамо "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html нижче текстового редактора. Кнопка буде здійснювати вихід з програми Нотатник, коли на неї будуть натискати (наприклад, клацнуть мишею).
p=. http://doc.qt.nokia.com/4.7/images/gs2.png
p. Давайте поглянемо на код.

#include <QtGui&gt; int main(int argv, char **args) { QApplication app(argv, args); QTextEdit textEdit; QPushButton quitButton("Quit&quot;); QObject::connect(&quitButton, SIGNAL (clicked()), qApp, SLOT (quit())); QVBoxLayout layout; layout.addWidget(&textEdit); layout.addWidget(&quitButton); QWidget window; window.setLayout(&layout); window.show(); return app.exec&amp;#40;&#41;; }

p. Рядок 1 включає "QtGui":http://doc.qt.nokia.com/4.7/qtgui.html, який містить усі класи ГІК Qt.
p. В рядку 10 використовується механізм сигналів та слотів Qt, щоб завершити програму, коли натискається кнопка Вихід. Слот це функція, що може бути викликана під час виконання програми за допомогою її назви (як рядкового літералу). Сигналом є функція, яка під час свого виклику, виконає слоти зареєстровані до неї; ми називаємо це "під'єднати слот до сигналу та видати сигнал".
p. "quit()":http://doc.qt.nokia.com/4.7/qcoreapplication.html#quit є слотом "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html, який завершує програму. "clicked()":http://doc.qt.nokia.com/4.7/qabstractbutton.html#clicked є сигналом, який "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html видає, коли натискається. Статична функція "QObject::connect":http://doc.qt.nokia.com/4.7/qobject.html#connect() піклується про з'єднання слота із сигналом. SIGNAL&#40;) та SLOT&#40;) - це два макроси, що приймають сигнатури функцій сигналу та слота, що з'єднуються. Також ми повинні передати вказівники на об'єкти, що мають надіслати та отримати сигнал.
p. В рядку 12 створюється "QVBoxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html. Як вже згадувалось, віджети можуть містити інші віджети. Можна встановити границі (розташування та розмір) дочірніх віджетів безпосередньо, однак, зазвичай легше використати компонувальник. Компонувальник керує границями дочірніх віджетів. Наприклад, "QVBoxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html розташовує дітей у вертикальному рядку.
p. Рядки 13 та 14 додають текстовий редактор до компонувальника. В рядку 17 ми встановлюємо конмпонувальник на віджет.
h3. Дізнайтесь більше
table{border:1px solid lightgray}.
{background:lightgray }. |. Про |. Тут |
|Сигнали та слоти|"Сигнали та слоти":http://doc.qt.nokia.com/4.7/signalsandslots.html*%7C
|Компонування|"Управління компонуванням":http://doc.qt.nokia.com/4.7/layout.html, "Віджети та компонування":http://doc.qt.nokia.com/4.7/widgets-and-layouts.html, "Приклади компонування":http://doc.qt.nokia.com/4.7/examples-layouts.html|
|Віджети, що входять до Qt|"Галерея віджетів Qt":http://doc.qt.nokia.com/4.7/gallery.html, "Приклади віджетів":http://doc.qt.nokia.com/4.7/examples-widgets.html|

Успадкування від QWidget

Коли користувач бажає завершити програму, ви можете хотіти відобразити діалог, в якому запитаєте чи дійсно він хоче вийти. В цьому прикладі ми успадкуємось від "QWidget":http://doc.qt.nokia.com/4.7/qwidget.html та додамо слот, який під'єднаємо до кнопки Вихід.

p=. http://doc.qt.nokia.com/4.7/images/gs3.png

Давайте поглянемо на код:

<br />class Notepad : public QWidget<br />{<br /> Q_OBJECT

public:<br /> Notepad();

private slots:<br /> void quit();

private:<br /> QTextEdit *textEdit;<br /> QPushButton *quitButton;<br />};<br />

Макрос <code>Q_OBJECT</code> повинен бути першим у визначенні класу, він оголошує наш клас як <code>QObject</code> (звичайно, він повинен бути успадкованим від "QObject":http://doc.qt.nokia.com/4.7/qobject.html). "QObject":http://doc.qt.nokia.com/4.7/qobject.html додає декілька особливостей до звичайного класу C++. Найважливішим є те, що назва класу та імена слотів можуть бути отримані під час виконання. Також є можливість дізнатись типи параметрів слоту та викликати його.

В рядку 13 оголошено слот <code>quit()</code>. Це легко зробити завдяки макросу <code>slots</code>. Слот <code>quit()</code> тепер може бути під'єднаним до сигналів з відповідними сигнатурами (будь-який сигнал, що не приймає параметрів).

Замість того, щоб встановлювати ГІК та під'єднувати слот в функції <code>main()</code>, тепер ми використаємо конструктор <code>Notepad</code>.

<br />Notepad::Notepad()<br />{<br /> textEdit = new QTextEdit;<br /> quitButton = new QPushButton(tr(&quot;Quit&amp;quot;));

connect(quitButton, SIGNAL (clicked()), this, SLOT (quit()));

QVBoxLayout '''layout = new QVBoxLayout;<br /> layout-&gt;addWidget(textEdit);<br /> layout-&gt;addWidget(quitButton);
<br /> setLayout(layout);
<br /> setWindowTitle(tr(&quot;Notepad&amp;quot;));<br />}<br />

p. Як видно у визначенні класу, ми використовуємо вказівники на наші "QObject":http://doc.qt.nokia.com/4.7/qobject.htmls'и (<code>textEdit</code> та <code>quitButton</code>). Як правило, вам завжди слід виділяти "QObject":http://doc.qt.nokia.com/4.7/qobject.htmls'и в купі та ніколи не копіювати їх.
p. Тепер ми використовуємо функцію "tr()":http://doc.qt.nokia.com/4.7/qobject.html#tr навколо рядків, що відображаються користувачу. Ця функція необхідна, якщо ви хочете надавати вашу програму більше ніж однією мовою (наприклад, англійською та китайською). Ми не будемо розглядати деталі тут, однак ви можете перейти за посиланням з таблиці "Дізнайтесь більше" до <code>Qt Linguist</code>.
h3. Дізнайтесь більше
table{border:1px solid lightgray}.
{background:lightgray }. |. Про |. Тут |
|tr() та інтернаціоналізація|"Посібник з Qt Linguist":http://doc.qt.nokia.com/4.7/linguist-manual.html*, "Написання коду для перекладу":http://doc.qt.nokia.com/4.7/i18n-source-translation.html, Приклад "Привіт tr":http://doc.qt.nokia.com/4.7/linguist-hellotr.html(), "Інтернаціоналізація з Qt":http://doc.qt.nokia.com/4.7/internationalization.html|
|"QObject":http://doc.qt.nokia.com/4.7/qtwebkit-bridge.html#qobjects'и та об'єктна модель Qt (Це необхідний матеріал, щоб зрозуміти Qt)|"Об'єктна модель":http://doc.qt.nokia.com/4.7/object.html|
|qmake та система збірки Qt|"Посібник з qmake":http://doc.qt.nokia.com/4.7/qmake-manual.html|

Створення файлу .pro

Для цього прикладу ми напишемо наш власний файл <code>.pro</code> замість використання <code>qmake</code> з опцією <code>-project</code>.

<br />HEADERS = notepad.h<br />SOURCES = notepad.cpp  main.cpp<br />

Наступні команди оболонки збирають приклад.

<br />qmake<br />make<br />

Використання QMainWindow

Багато програм отримають переваги від використання "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html, який має своє власне компонування, до якого ви можете додавати панель меню, віджети, що прикріплюються, панелі інструментів та рядок статусу. "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html має центральну область, що може бути зайнята віджетом довільного типу. В нашому випадку ми розташуємо там текстовий редактор.

p=. http://doc.qt.nokia.com/4.7/images/gs4.png

Давайте поглянемо на нове визначення класу <code>Notepad</code>.

<br /> #include &lt;QtGui&amp;gt;<br />class Notepad : public QMainWindow<br />{<br /> Q_OBJECT<br />public:<br /> Notepad();<br />private slots:<br /> void open();<br /> void save();<br /> void quit();<br />private:<br /> QTextEdit *textEdit;<br /> QAction *openAction;<br /> QAction *saveAction;<br /> QAction *exitAction;<br /> QMenu '''fileMenu;<br />};<br />

p. Ми включили ще два слоти, які можуть зберігати та відкривати документ. Ми реалізуємо їх в наступній частині.
p. Доволі часто в головному вікні один і той самий слот може бути викликаний декількома різними віджетами. Прикладами є пункти меню та кнопки на панелі інструментів. Щоб полегшити це, Qt надає "QAction":http://doc.qt.nokia.com/4.7/qaction.html (дія), який може бути переданий декільком віджетам та під'єднаний до слота. Наприклад, як "QMenu":http://doc.qt.nokia.com/4.7/qmenu.html так і "QToolBar":http://doc.qt.nokia.com/4.7/qtoolbar.html можуть створювати пункти меню та кнопки на панелі з одного й того ж "QAction":http://doc.qt.nokia.com/4.7/qaction.htmls. Ми скоро побачимо, як це працює.
p. Як і раніше ми використовуємо конструктор <code>Notepad</code> для встановлення ГІК.

<br />Notepad::Notepad()<br />{<br /> openAction = new QAction(tr(&quot;&amp;Open&amp;quot;), this);<br /> saveAction = new QAction(tr(&quot;&amp;Save&amp;quot;), this);<br /> exitAction = new QAction(tr(&quot;E&amp;amp;xit&amp;quot;), this);
<br /> connect(openAction, SIGNAL (triggered()), this, SLOT (open()));<br /> connect(saveAction, SIGNAL (triggered()), this, SLOT (save()));<br /> connect(exitAction, SIGNAL (triggered()), qApp, SLOT (quit()));
<br /> fileMenu = menuBar()<s>&gt;addMenu(tr(&quot;&amp;File&amp;quot;));<br /> fileMenu</s>&gt;addAction(openAction);<br /> fileMenu-&gt;addAction(saveAction);<br /> fileMenu-&gt;addSeparator();<br /> fileMenu-&gt;addAction(exitAction);
<br /> textEdit = new QTextEdit;<br /> setCentralWidget(textEdit);
<br /> setWindowTitle(tr(&quot;Notepad&amp;quot;));<br />}<br />

p. "QAction":http://doc.qt.nokia.com/4.7/qaction.htmls'и створюються з текстом, що має з'явитись на віджетах, до яких ми їх додаємо (в нашому випадку це пункти меню). Якщо б ми також хотіли додати їх до панелі інструментів, ми б могли призначити до них "піктограми":http://doc.qt.nokia.com/4.7/qicon.html.
p. Коли по пункту меню клацнуть, елемент запустить дію і буде викликано відповідний слот.
h3. Дізнайтесь більше
table{border:1px solid lightgray}.
{background:lightgray }. |. Про |. Тут |
|Головні вікна та класи головного вікна||"Головне вікно програми":http://doc.qt.nokia.com/4.7/mainwindow.html*, "Приклади головного вікна":http://doc.qt.nokia.com/4.7/examples-mainwindow.html|
|Програми з MDI|"QMdiArea":http://doc.qt.nokia.com/4.7/qmdiarea.html, "Приклад MDI":http://doc.qt.nokia.com/4.7/mainwindows-mdi.html|

Збереження та завантаження

В цьому прикладі ми реалізуємо функціональність слотів <code>open()</code> та <code>save()</code>, які ми додали в попередньому прикладі.

p=. http://doc.qt.nokia.com/4.7/images/gs5.png

Ми почнемо зі слоту <code>open()</code>:

<br />QString fileName = QFileDialog::getOpenFileName(this, tr(&quot;Open File&amp;quot;), &quot;&quot;,<br /> tr(&quot;Text Files ('''.txt);;C++ Files ('''.cpp '''.h)&quot;));
<br />if (fileName != &quot;&quot;) {<br /> QFile file&amp;amp;#40;fileName&amp;amp;#41;;<br /> if (!file.open(QIODevice::ReadOnly)) {<br /> QMessageBox::critical(this, tr(&quot;Error&amp;quot;),<br /> tr(&quot;Could not open file&amp;quot;));<br /> return;<br /> }<br /> QString contents = file.readAll().constData();<br /> textEdit-&gt;setPlainText(contents);<br /> file.close();<br />}<br />

p. На першому кроці ми запитаємо у користувача ім'я файлу для відкриття. В Qt є "QFileDialog":http://doc.qt.nokia.com/4.7/qfiledialog.html - діалог, з якого користувач може вибрати файл. На зображенні вище показано цей діалог в Kubuntu. Статична функція "getOpenFileName()":http://doc.qt.nokia.com/4.7/qfiledialog.html#getOpenFileName відображує модальний файловий діалог, а повернення з неї не відбувається, доки користувач не вибере файл. Вона повертає шлях до обраного файлу або порожній рядок, якщо користувач скасував діалог.
p. Якщо в нас є ім'я файлу, ми намагаємось відкрити файл за допомогою функції "open()":http://doc.qt.nokia.com/4.7/qiodevice.html#open, яка повертає істинне значення, якщо файл вдалось відкрити. Ми не будемо тут заглиблюватись в обробку помилок, але ви можете перейти за посиланням з частини "Дізнайтесь більше". Якщо файл не вдалось відкрити, ми використовуємо "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox.html, щоб відобразити діалог з повідомленням про помилку (див. опис класу "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox.html для деталей).
p. Реальне читання даних є доволі тривіальним з використанням функції "readAll()":http://doc.qt.nokia.com/4.7/qiodevice.html#readAll, яка повертає усі дані з файлу в "QByteArray":http://doc.qt.nokia.com/4.7/qbytearray.html. Метод "constData()":http://doc.qt.nokia.com/4.7/qbytearray.html#constData повертає усі дані з масиву як const char, для якого у "QString":http://doc.qt.nokia.com/4.7/qstring.html є конструктор. Зміст в подальшому може бути відображено в текстовому редакторі. Потім ми закриваємо файл функцією "close()":http://doc.qt.nokia.com/4.7/qiodevice.html#close, щоб повернути файловий дескриптор назад операційній системі.

Тепер, давайте перейдемо до слота <code>save()</code>.

<br />QString fileName = QFileDialog::getSaveFileName(this, tr(&quot;Save File&amp;quot;), &quot;&quot;,<br /> tr(&quot;Text Files ('''.txt);;C++ Files ('''.cpp '''.h)&quot;));
<br />if (fileName != &quot;&quot;) {<br /> QFile file&amp;amp;#40;fileName&amp;amp;#41;;<br /> if (!file.open(QIODevice::WriteOnly)) {<br /> // повідомлення про помилку<br /> } else {<br /> QTextStream stream(&amp;file);<br /> stream &lt;&lt; textEdit-&gt;toPlainText();<br /> stream.flush();<br /> file.close();<br /> }<br />}<br />

p. Коли ми записуємо зміст текстового редактора до файлу, ми використовуємо клас "QTextStream":http://doc.qt.nokia.com/4.7/qtextstream.html, який обгортає об'єкт "QFile":http://doc.qt.nokia.com/4.7/qfile.html. Текстовий потік може записувати QString'и безпосередньо до файлу; "QFile":http://doc.qt.nokia.com/4.7/qfile.html приймає лише сирі дані (char) за допомогою функцій "write()":http://doc.qt.nokia.com/4.7/qiodevice.html#write класу "QIODevice":http://doc.qt.nokia.com/4.7/qiodevice.html.

Дізнайтесь більше

table{border:1px solid lightgray}.
{background:lightgray }. |. Про |. Тут |
|Файли та пристрої I/O|"QFile":http://doc.qt.nokia.com/4.7/qfile.html, "QIODevice":http://doc.qt.nokia.com/4.7/qiodevice.html|

Getting Started on the Commandline/uk: Difference between revisions

Revision as of 10:53, 24 February 2015

Contents

Перші кроки з Qt

Привіт, Нотатник

Успадкування від QWidget

Створення файлу .pro

Використання QMainWindow

Збереження та завантаження

Дізнайтесь більше

Navigation menu

Getting Started on the Commandline/uk: Difference between revisions

Revision as of 10:53, 24 February 2015

Перші кроки з Qt

Привіт, Нотатник

Успадкування від QWidget

Створення файлу .pro

Використання QMainWindow

Збереження та завантаження

Дізнайтесь більше

Navigation menu

Search