View source for Pierwsze kroki w programowaniu z Qt/pl

{{Cleanup | reason=Auto-imported from ExpressionEngine.}}

= 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.

[[Image:http://doc.qt.nokia.com/latest/images/gs1.png|screenshot]]

Tak wygląda kod owej aplikacji:

<code>
#include <QApplication>
#include <QTextEdit>

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

 QTextEdit textEdit;
 textEdit.show();

 return app.exec();
}
</code>

Prześledźmy go linijka po linijce. W dwóch pierwszych dołączamy pliki nagłówkowe [http://doc.qt.nokia.com/latest/qapplication.html QApplication] i [http://doc.qt.nokia.com/latest/qtextedit.html QTextEdit], 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 [http://doc.qt.nokia.com/latest/qapplication.html QApplication]. 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 [http://doc.qt.nokia.com/latest/qtextedit.html QTextEdit]. 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. [http://doc.qt.nokia.com/latest/qmainwindow.html QMainWindow] 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 [http://doc.qt.nokia.com/latest/qwidget.html#show show()] pozwala nam zmienić ten stan rzeczy.

Ostatnia linijka w funkcji main() odpowiedzialna jest za wejście obiektu typu [http://doc.qt.nokia.com/latest/qapplication.html QApplication] 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:
<code>
qmake -project
qmake
make
</code>

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 [http://pl.wikipedia.org/wiki/Make#Makefile 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.

=== Dowiedz się więcej ===
* Widżety i geometria okien- [http://doc.qt.nokia.com/latest/application-windows.html Window and Dialog Widgets]
''' Zdarzenia i ich obsługa - [http://doc.qt.nokia.com/latest/eventsandfilters.html The Event System]

== 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ą).

[[Image:http://doc.qt.nokia.com/latest/images/gs2.png|screenshot]]

Kod źródłowy dla tego przykładu:
<code>
#include <QtGui>

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

QTextEdit textEdit;
 QPushButton quitButton("Quit");

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();
}
</code>

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.

[http://doc.qt.nokia.com/latest/qcoreapplication.html#quit quit()] jest slotem klasy [http://doc.qt.nokia.com/latest/qapplication.html QApplication], który zakańcza aplikację. [http://doc.qt.nokia.com/latest/qabstractbutton.html#clicked clicked()] to sygnał [http://doc.qt.nokia.com/latest/qpsuhbutton.html QPushButton], który emitowany jest, gdy przycisk zostanie przyciśnięty. Statyczna metoda [http://doc.qt.nokia.com/latest/qobject.html#connect QObject::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 [http://doc.qt.nokia.com/latest/qvboxlaout.html QVBoxLayout]. 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 - [http://doc.qt.nokia.com/latest/signalsandslots.html Signals & Slots]
* Sposoby rozmieszczania - [http://doc.qt.nokia.com/latest/layout.html Layout Management], [http://doc.qt.nokia.com/latest/widgets-and-layouts.html Widgets and Layouts], [http://doc.qt.nokia.com/latest/examples-layouts.html Layout Examples]
* Widżety dostępne w Qt - [http://doc.qt.nokia.com/latest/gallery.html Qt Widget Gallery], [http://doc.qt.nokia.com/latest/examples-widgets.html Widget Examples]

== 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 [http://doc.qt.nokia.com/latest/qwidget.html QWidget] i dodamy slot, do którego podłączymy przycisk ''Quit''.

[[Image:http://doc.qt.nokia.com/latest/images/gs3.png|screenshot]]

Spójrzmy na kod źródłówy:
<code>
#include <QtGui>

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

private slots:
 void quit();
 layout.addWidget(&quitButton);
private:
 QTextEdit *textEdit;
 QPushButton *quitButton;
};
</code>

Makro ''Q_OBJECT'' musi być pierwszym elementem w definicji klasy. Deklaruje ono naszą klasę jako [http://doc.qt.nokia.com/latest/qobject.html QObject] (oczywiście musi ona również dziedziczyć z [http://doc.qt.nokia.com/latest/qobject.html QObject]). 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.

<code>
 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"));
 }
</code>

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ć [http://doc.qt.nokia.com/latest/qobject.html QObiekty] na stosie i nigdy ich nie kopiować.

Następnie używamy metody [http://doc.qt.nokia.com/latest/qobject.html#tr 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.

=== Dowiedz się więcej ===
''' tr() i internacjonalizacja - [http://doc.qt.nokia.com/latest/linguist-manual.html Qt Linguist Manual], [http://doc.qt.nokia.com/latest/i18n-source-translation.html Writing Source Code for Translation], [http://doc.qt.nokia.com/latest/linguist-hellotr.html Hello tr() Example], [http://doc.qt.nokia.com/latest/internationalization.html Internationalization with Qt]
* [http://doc.qt.nokia.com/latest/qtwebkit-bridge.html#qobjects QObiekty] i model obiektów Qt (materiał kluczowy do zrozumienia Qt) - [http://doc.qt.nokia.com/latest/object.html Object Model]
* qmake i system budowania Qt - [http://doc.qt.nokia.com/latest/qmake-manual.html qmake Manual]

=== Tworzenie pliku .pro ===

Na potrzeby tego przykładu, napiszemy własny plik .pro zamiast używać qmake z opcją -project.
<code>
HEADERS = notepad.h
SOURCES = notepad.cpp  main.cpp
</code>

Do zbudowania naszej aplikacji wystarczą teraz dwa polecenia:
<code>
qmake
make
</code>

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

[[Image:http://doc.qt.nokia.com/latest/images/gs4.png|screenshot]]

Oto kod nowa definicja klasy Notepad:
<code>
 #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;
 };
</code>

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ę [http://doc.qt.nokia.com/latest/qaction.html QAction], obiektowi której podać można kilka widżetów i podłączyć go do slotu. Na przykład [http://doc.qt.nokia.com/latest/qmenu.html QMenu] i [http://doc.qt.nokia.com/latest/qtoolbar.html QToolBar] 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:

<code>
 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"));
 }
</code>

[http://doc.qt.nokia.com/latest/qaction.html QAction] 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ż [http://doc.qt.nokia.com/latest/qicon.html ikony].

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

=== Dowiedz się więcej ===
''' Główne okna i klasy je udostępniające- [http://doc.qt.nokia.com/latest/mainwindow.html Application Main Window], [http://doc.qt.nokia.com/latest/examples-mainwindow.html Main Window Examples]
* Aplikacje MDI - [http://doc.qt.nokia.com/latest/qmdiarea.html QMdiArea], [http://doc.qt.nokia.com/latest/mainwindows-mdi.html MDI Example]

== Zapisywanie i ładowanie ==

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

[[Image:http://doc.qt.nokia.com/latest/images/gs4.png|screenshot]]

Zaczniemy od slotu ''open()'':

<code>
 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();
 }
</code>

Pierwszy krok to zapytanie użytkownika o nazwę pliku do wczytania. Qt dostarcza [http://doc.qt.nokia.com/latest/qfiledialog.html QFileDialog], który jest oknem dialogowym, gdzie użytkownik wybiera plik. Obrazek wyżej ukazuje takie okno na systemie Kubuntu. Statyczna metoda [http://doc.qt.nokia.com/latest/qfiledialog.html#getOpenFileName 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ą [http://doc.qt.nokia.com/latest/qiodevice.html#open 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 [http://doc.qt.nokia.com/latest/qmessagebox.html QMessageBox] do wyświetlenia okna z komunikatem błędu (zobacz opis klasy [http://doc.qt.nokia.com/latest/qmessagebox.html QMessageBox] po więcej szczegółów).

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

Przejdźmy do slotu ''save()'':

<code>
 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();
 }
 }
</code>

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

=== Dowiedz się więcej ===
''' Pliki i urządzenia we/wy - [http://doc.qt.nokia.com/latest/qfile.html QFile], [http://doc.qt.nokia.com/latest/qiodevice.html QIODevice]