Pierwsze kroki w programowaniu z Qt/pl

h1. Pierwsze kroki w programowaniu z Qt

Witamy w świecie Qt - wieloplatformowego zestawu narzędzi i bibliotek do tworzenia aplikacji z graficznym interfejsem użytkownika (GUI) i nie tylko. Nauczymy cię tutaj podstaw Qt pokazując jak zaimplementować prostą aplikację typu Notatnik. Po lekturze tego przewodnika powinieneś być gotów do zagłębienia się w dokumentację API oraz omówień poszczególnych modułów i rozwiązań dostępnych w Qt. Znajdywanie informacji potrzebnych do stworzenia aplikacji, którą zapewne od dawna planujesz napisać, będzie wówczas przebiegać sprawniej.

Powitalny notatnik

W pierwszym przykładzie stworzymy i pokażemy pole edycji tekstu w jego własnym oknie. Jest to najprostszy możliwy program napisany w Qt posiadający GUI.

screenshot

Tak wygląda kod owej aplikacji:

#include <QApplication>
#include <QTextEdit>

int main(int argv, char *'''args)
{
 QApplication app(argv, args);

 QTextEdit textEdit;
 textEdit.show();

 return app.exec();
}

Prześledźmy go linijka po linijce. W dwóch pierwszych dołączamy pliki nagłówkowe "QApplication":http://doc.qt.nokia.com/latest/qapplication.html i "QTextEdit":http://doc.qt.nokia.com/latest/qtextedit.html, czyli dwóch klas, których użyjemy w tym przykładzie. Wszystkie klasy Qt posiadają pliki nagłówkowe nazwane tak samo jak nazwy klas, których dotyczą.

W 6 linijce tworzony jest obiekt typu "QApplication":http://doc.qt.nokia.com/latest/qapplication.html. Zarządza on zasobami aplikacji i jest niezbędny do uruchomienia jakiegokolwiek programu Qt mającego GUI. Parametry argv i args są wymagane, ponieważ każda aplikacja Qt obsługuje zestaw opcji, które można przekazać do programu z linii poleceń (np. -graphicssystem).

W 8 linijce powstaje obiekt typu "QTextEdit":http://doc.qt.nokia.com/latest/qtextedit.html. Jest to element mający wizualną reprezentację w GUI, a takie w Qt nazywamy widżetami (z ang. widget). Inne widżety to np. pasek przesuwania (ang. scroll bar), etykieta (ang. label) czy przycisk opcji (ang. radio button). Widżet może być także kontenerem dla innych widżetów, a okno dialogowe jest tego przykładem.

Linijka 9 powoduje wyświetlenie się pola edycji tekstu z jego własną ramką okna. Ponieważ widżety funkcjonują także jako kontenery (np. "QMainWindow":http://doc.qt.nokia.com/latest/qmainwindow.html z jego paskami narzędzi, menu, statusu i paroma innymi widżetami), możliwe jest wyświetlenie pojedynczego widżetu w jego własnym oknie. Widżety nie są domyślnie widoczne, ale funkcja "show()":http://doc.qt.nokia.com/latest/qwidget.html#show pozwala nam zmienić ten stan rzeczy.

Ostatnia linijka w funkcji main() odpowiedzialna jest za wejście obiektu typu "QApplication":http://doc.qt.nokia.com/latest/qapplication.html w jego pętlę zdarzeń (ang. event loop). Programy oparte na Qt korzystają ze zdarzeń, które są generowane i przesyłane w trakcie działania aplikacji między widżetami. Takie zdarzenia to np. naciśnięcie klawisza na klawiaturze lub myszy. W trakcie pisania tekstu w polu edycji, widżet je reprezentujący odbiera zdarzenia informujące o naciśnięciu poszczególnych klawiszy i rysuje wpisany tekst.

Nim uruchomimy naszą aplikację, musimy ją najpierw zbudować. Dokonać tego możemy otwierając z okno z linią poleceń, przechodząc do katalogu, w którym trzymamy wyżej zaprezentowany plik .cpp z kodem programu i wykonując następujące polecenia:

qmake -project
qmake
make

To spowoduje utworzenie pliku wykonywalnego (w systemie Windows może zaistnieć potrzeba użycia polecenia nmake zamiast make; ponadto plik będzie umieszczony w podkatalogu debug lub release). qmake to narzędzie Qt wspierające budowanie aplikacji poprzez generację plików "Makefile":http://pl.wikipedia.org/wiki/Make#Makefile, które opisują proces budowania, na bazie specjalnych plików konfiguracyjnych. Taki plik konfiguracyjny (o rozszerzeniu .pro) może zostać wygenerowany automatycznie również dzięki aplikacji qmake przy użyciu opcji -project. Pisaniem własnych plików .pro zajmiemy się później.

h3. Dowiedz się więcej

• Widżety i geometria okien- "Window and Dialog Widgets":http://doc.qt.nokia.com/latest/application-windows.html

Zdarzenia i ich obsługa - "The Event System":http://doc.qt.nokia.com/latest/eventsandfilters.html

Dodanie przycisku Quit

W prawdziwej aplikacji zazwyczaj potrzeba więcej niż jednego widżetu. Dodamy więc QPushButton – przycisk – pod polem edycji tekstu. Przycisk ten sprawi, że aplikacja zakończy się w momencie jego naciśnięcia (np. za pomocą kliknięcia myszą).

screenshot

Kod źródłowy dla tego przykładu:

#include <QtGui>

int main(int argv, char **args)
{
 QApplication app(argv, args);

QTextEdit textEdit;
 QPushButton quitButton("Quit");

QObject::connect(&amp;quitButton, SIGNAL (clicked()), qApp, SLOT (quit()));

QVBoxLayout layout;
 layout.addWidget(&amp;textEdit);
 layout.addWidget(&amp;quitButton);

QWidget window;
 window.setLayout(&amp;layout);

window.show();

return app.exec();
}

W 10 linijce wykorzystujemy mechanizm sygnałów i slotów Qt, aby sprawić, że aplikacja zakończy się, kiedy przycisk Quit zostanie naciśnięty. Sygnał, kiedy uruchomiony, wywoła wszystkie powiązane z nim sloty.

"quit()":http://doc.qt.nokia.com/latest/qcoreapplication.html#quit jest slotem klasy "QApplication":http://doc.qt.nokia.com/latest/qapplication.html, który zakańcza aplikację. "clicked()":http://doc.qt.nokia.com/latest/qabstractbutton.html#clicked to sygnał "QPushButton":http://doc.qt.nokia.com/latest/qpsuhbutton.html, który emitowany jest, gdy przycisk zostanie przyciśnięty. Statyczna metoda "QObject::connect()":http://doc.qt.nokia.com/latest/qobject.html#connect zajmuje się dowiązaniem slotu do sygnału. SIGNAL ()_ oraz _SLOT() to dwa makra, które opisują metody mające zostać ze sobą powiązane. Trzeba również podać wskaźniki do obiektów, które emitują i otrzymują dany sygnał.

W linijce 12 tworzymy "QVBoxLayout":http://doc.qt.nokia.com/latest/qvboxlaout.html. Jak wspominaliśmy, widżety mogą zawierać inne widżety. Można ustawić lokalizację i wymiary każdego widżetu bezpośrednio ale zazwyczaj łatwiej jest użyć layoutu (z ang. „rozkład” lub „układ graficzny” - sposób rozmieszczenia). Layout zarządza wymiarami wszystkich swoich podwidżetów. Na przykład QVBoxLayout ustawia wszystkie podwidżety pionowo w rzędzie.

Linijki 13 oraz 14 dodają pole edycji tekstu oraz przycisk do layoutu. W linijce 17 ustawiony zostaje layout naszego widżetu.

Dowiedz się więcej

• Sygnały i sloty - "Signals & Slots":http://doc.qt.nokia.com/latest/signalsandslots.html
• Sposoby rozmieszczania - "Layout Management":http://doc.qt.nokia.com/latest/layout.html, "Widgets and Layouts":http://doc.qt.nokia.com/latest/widgets-and-layouts.html, "Layout Examples":http://doc.qt.nokia.com/latest/examples-layouts.html
• Widżety dostępne w Qt - "Qt Widget Gallery":http://doc.qt.nokia.com/latest/gallery.html, "Widget Examples":http://doc.qt.nokia.com/latest/examples-widgets.html

Definiowanie klas pochodnych od QWidget

Kiedy użytkownik chce wyjść z aplikacji, możesz chcieć pokazać okno dialogowe, które pyta, czy on, lub ona, rzeczywiście tego chce. W tym przykładzie, stworzymy klasę dziedziczącą z "QWidget":http://doc.qt.nokia.com/latest/qwidget.html i dodamy slot, do którego podłączymy przycisk Quit.

screenshot

Spójrzmy na kod źródłówy:

#include <QtGui>

class Notepad : public QWidget
{
 Q_OBJECT
 QPushButton quitButton("Quit");
public:
 Notepad();

private slots:
 void quit();
 layout.addWidget(&amp;quitButton);
private:
 QTextEdit *textEdit;
 QPushButton *quitButton;
};

Makro Q_OBJECT musi być pierwszym elementem w definicji klasy. Deklaruje ono naszą klasę jako "QObject":http://doc.qt.nokia.com/latest/qobject.html (oczywiście musi ona również dziedziczyć z "QObject":http://doc.qt.nokia.com/latest/qobject.html). Dodaje to kilka funkcjonalności do zwykłej klasy C++. Przede wszystkim, nazwa klasy i jej slotów mogą być pobrane w trakcie działania programu. Można również pobrać typy parametrów tych slotów i je wywołać.

W linijce 13 deklarowany jest, przy użyciu makra slots, slot quit(). Teraz można podłączyć ten slot do sygnałów ze zgadzającą się sygnaturą, tj. z jakimkolwiek sygnałem, który nie ma parametrów.

Zamiast ustawiania GUI i łączenia slotów w funkcji main(), użyjemy konstruktora klasy Notepad.

 Notepad::Notepad()
 {
 textEdit = new QTextEdit;
 quitButton = new QPushButton(tr("Quit"));

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

QVBoxLayout '''layout = new QVBoxLayout;
 layout->addWidget(textEdit);
 layout->addWidget(quitButton);

 setLayout(layout);

 setWindowTitle(tr("Notepad"));
 }

Jak widać było w definicji klasy, używamy wskaźników do naszych QObject-ów (textEdit oraz quitButton). Z zasady zawsze powinno się tworzyć "QObiekty":http://doc.qt.nokia.com/latest/qobject.html na stosie i nigdy ich nie kopiować.

Następnie używamy metody "tr()":http://doc.qt.nokia.com/latest/qobject.html#tr dla wszystkich widocznych dla użytkownika ciągów tekstu. Metoda ta jest niezbędna jeżeli chcesz udostępniać swoją aplikację w więcej niż jednym języku (np. po polsku i po angielsku). Nie będziemy wchodzić w szczegóły, możesz zgłębić temat pod linkiem Qt Linguist Manual z tabeli poniżej.

h3. Dowiedz się więcej

tr() i internacjonalizacja - "Qt Linguist Manual":http://doc.qt.nokia.com/latest/linguist-manual.html, "Writing Source Code for Translation":http://doc.qt.nokia.com/latest/i18n-source-translation.html, "Hello tr() Example":http://doc.qt.nokia.com/latest/linguist-hellotr.html, "Internationalization with Qt":http://doc.qt.nokia.com/latest/internationalization.html

• "QObiekty":http://doc.qt.nokia.com/latest/qtwebkit-bridge.html#qobjects i model obiektów Qt (materiał kluczowy do zrozumienia Qt) - "Object Model":http://doc.qt.nokia.com/latest/object.html
• qmake i system budowania Qt - "qmake Manual":http://doc.qt.nokia.com/latest/qmake-manual.html

Tworzenie pliku .pro

Na potrzeby tego przykładu, napiszemy własny plik .pro zamiast używać qmake z opcją -project.

HEADERS = notepad.h
SOURCES = notepad.cpp  main.cpp

Do zbudowania naszej aplikacji wystarczą teraz dwa polecenia:

qmake
make

h2. Używanie QMainWindow

Wiele aplikacji skorzysta z plusów używania "QMainWindow":http://doc.qt.nokia.com/latest/qmainwindow.html. Klasa ta dostarcza swój własny layout, do którego można dodać menu, zadokowane widgety, paski narzędzi i pasek statusu. "QMainWindow":http://doc.qt.nokia.com/latest/qobject.html ma centralną strefę, która może być zajmowana przez dowolny widget. W naszym przypadku będzie to pole edycji tekstu.

screenshot

Oto kod nowa definicja klasy Notepad:

 #include <QtGui>

 class Notepad : public QMainWindow
 {
 Q_OBJECT

 public:
 Notepad();

 private slots:
 void open();
 void save();
 void quit();

 private:
 QTextEdit *textEdit;

 QAction *openAction;
 QAction *saveAction;
 QAction *exitAction;

 QMenu '''fileMenu;
 };

Dołączyliśmy dwa nowe sloty, które zapiszą i wczytają dokument. Zaimplementujemy je w następnej sekcji.

Bardzo często w głównym oknie ten sam slot może być wywołany przez kilka widżetów. Przykładem może być opcja w menu i przycisk na pasku narzędzi. Zeby to uprościć, Qt dostarcza klasę "QAction":http://doc.qt.nokia.com/latest/qaction.html, obiektowi której podać można kilka widżetów i podłączyć go do slotu. Na przykład "QMenu":http://doc.qt.nokia.com/latest/qmenu.html i "QToolBar":http://doc.qt.nokia.com/latest/qtoolbar.html mogą stworzyć wpisy w menu i przycisku na pasku z tej samej QAction. Za chwilę zobaczymy, w jaki sposób to zrobić.

Tak jak wcześniej, używamy konstruktora klasy Notepad do zestawienia GUI:

 Notepad::Notepad()
 {
 saveAction = new QAction(tr("&Open"), this);
 saveAction = new QAction(tr("&Save"), this);
 exitAction = new QAction(tr("E&xit"), this);

 connect(openAction, SIGNAL (triggered()), this, SLOT (open()));
 connect(saveAction, SIGNAL (triggered()), this, SLOT (save()));
 connect(exitAction, SIGNAL (triggered()), qApp, SLOT (quit()));

 fileMenu = menuBar()->addMenu(tr("&File"));
 fileMenu->addAction(openAction);
 fileMenu->addAction(saveAction);
 fileMenu->addSeparator();
 fileMenu->addAction(exitAction);

 textEdit = new QTextEdit;
 setCentralWidget(textEdit);

 setWindowTitle(tr("Notepad"));
 }

"QAction":http://doc.qt.nokia.com/latest/qaction.html tworzone są z tekstu, który ma pojawić się na widżecie, do którego je dodajemy - w tym przypadku do opcji w menu. Gdybyśmy chcieli dodać akcje dodatkowo do paska narzędzi, moglibyśmy dać im również "ikony":http://doc.qt.nokia.com/latest/qicon.html.

Teraz, w momencie kliknięcia wpisu w menu, uruchomi on akcję i wywoła odpowiedni slot.

h3. Dowiedz się więcej

Główne okna i klasy je udostępniające- "Application Main Window":http://doc.qt.nokia.com/latest/mainwindow.html, "Main Window Examples":http://doc.qt.nokia.com/latest/examples-mainwindow.html

• Aplikacje MDI - "QMdiArea":http://doc.qt.nokia.com/latest/qmdiarea.html, "MDI Example":http://doc.qt.nokia.com/latest/mainwindows-mdi.html

Zapisywanie i ładowanie

W tym przykładzie, zaimplementujemy funkcjonalność slotów open() oraz save(), które dodaliśmy w poprzedniej sekcji.

screenshot

Zaczniemy od slotu open():

 QString fileName = QFileDialog::getOpenFileName(this, tr("Open File"), "",
 tr("Text Files ('''.txt);;C++ Files ('''.cpp *.h)"));

if (fileName != "") {
 QFile file(fileName);
 if (!file.open(QIODevice::ReadOnly)) {
 QMessageBox::critical(this, tr("Error"),
 tr("Could not open file"));
 return;
 }
 QString contents = file.readAll().constData();
 textEdit->setPlainText(contents);
 file.close();
 }

Pierwszy krok to zapytanie użytkownika o nazwę pliku do wczytania. Qt dostarcza "QFileDialog":http://doc.qt.nokia.com/latest/qfiledialog.html, który jest oknem dialogowym, gdzie użytkownik wybiera plik. Obrazek wyżej ukazuje takie okno na systemie Kubuntu. Statyczna metoda "getOpenFileName()":http://doc.qt.nokia.com/latest/qfiledialog.html#getOpenFileName wyświetla modalne okno dialogowe i nie zwraca wartości dopóki użytkownik nie wybierze pliku. Zwracana przez nią wartość to ścieżka do wybranego pliku, lub pusty ciąg jeżeli użytkownik anulowal wybór.

Gdy mamy ścieżkę, otwieramy plik metodą "open()":http://doc.qt.nokia.com/latest/qiodevice.html#open, która zwraca true, jeżeli operacja się powiodła. Nie będziemy zgłębiać obsługi błędów, jest ona opisane w linkach z tabeli Dowiedz się więcej. Jeżeli otwarcie pliku jest niemożliwe, używamy "QMessageBox":http://doc.qt.nokia.com/latest/qmessagebox.html do wyświetlenia okna z komunikatem błędu (zobacz opis klasy "QMessageBox":http://doc.qt.nokia.com/latest/qmessagebox.html po więcej szczegółów).

Sam odczyt danych jest trywialny dzięki użyciu metody "readAll()":http://doc.qt.nokia.com/latest/qiodevice.html#readAll, która zwraca wszystkie dane w postaci "QByteArray":http://doc.qt.nokia.com/latest/qbytearray.html. "constData()":http://doc.qt.nokia.com/latest/qbytearray.html#constData zwraca tablicę jako const char*, dla której klasa "QString":http://doc.qt.nokia.com/latest/qstring.html ma zdefiniowany konstruktor. Następnie zawartość pliku może być wyświetlona w polu edycji. Możemy więc zamknąć plik metodą "close()":http://doc.qt.nokia.com/latest/qiodevice.html#close, aby oddać systemowi operacyjnemu deskryptor pliku.

Przejdźmy do slotu save():

 QString fileName = QFileDialog::getSaveFileName(this, tr("Save File"), "",
 tr("Text Files ('''.txt);;C++ Files ('''.cpp '''.h)"));

 if (fileName != "") {
 QFile file(fileName);
 if (!file.open(QIODevice::WriteOnly)) {
 // error message
 } else {
 QTextStream stream(&file);
 stream << textEdit->toPlainText();
 stream.flush();
 file.close();
 }
 }

Do zapisywania zawartości pola edycji do pliku używamy klasy "QTextStream":http://doc.qt.nokia.com/latest/qtextstream.html, która opakowuje obiekt "QFile":http://doc.qt.nokia.com/latest/qfile.html. Strumień może zapisywać "QString":http://doc.qt.nokia.com/latest/qstring.html bezpośrednio do pliku, natomiast "QFile":http://doc.qt.nokia.com/latest/qfile.html akceptuje jedynie czyste dane (char*) przy pomocy metody "write()":http://doc.qt.nokia.com/latest/qiodevice.html#write z klasy "QIODevice":http://doc.qt.nokia.com/latest/qiodevice.html.

h3. Dowiedz się więcej

Pliki i urządzenia we/wy - "QFile":http://doc.qt.nokia.com/latest/qfile.html, "QIODevice":http://doc.qt.nokia.com/latest/qiodevice.html