Getting Started on the Commandline/hr

Pregledajte ovu stranicu na sljedećim jezicima: "en":http://doc.qt.nokia.com/4.7/gettingstartedqt.html, "es":http://developer.qt.nokia.com/wiki/GettingStartedQt_Spanish, "ru":http://developer.qt.nokia.com/wiki/GettingStartedWithQtRussian, "pl":http://developer.qt.nokia.com/wiki/GettingStartedQtPolish, "pt":http://developer.qt.nokia.com/wiki/gettingStartedPortuguese, "nl":http://developer.qt.nokia.com/wiki/GettingStartedQtDutch

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

Početak programiranja u Qt

Dobrodošli u svijet Qt-a— više platformskog GUI frameworka. U ovom vodiču proći ćemo osnove Qt izradom jednostavne Notepad aplikacije.

Pozdrav Notepad

U prvom primjeru pokazat ćemo kako kreirati i prikazati editor teksta unutar prozora na desktopu. To je najednostavnija upotreba Qt-a u radu s korisničkim sučeljem.

p=. Texteingabefenster

Izvorni kod aplikacije:

#include <QApplication>
#include <QTextEdit>

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

 QTextEdit textEdit;
 textEdit.show();

 return app.exec();
}

Idemo proci kroz izvorni kod aplikacije red po red. U prve dvije linije koda, dodajemo header datoteke za "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html i "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html, dvije klase koje su nam potrebne za ovaj primjer. Sve Qt klase imaju header datoteku s nazivom klase.

U redu 6. aplikacije kreiramo "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html objekt. Ovaj objekt upravlja svim resursima na razini cijele aplikacije i neophodan je za sve Qt programe koji uključuju korisničko sučelje. Parametri argv i args su mu potrebni s obziorm da Qt prihvaća nekoliko komandnolinijskih parametara.

Red 8 kreira "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html objekt. Text Edit je vizualni element u koriničkom sučelju. U Qt, takve objekte nazivamo widgetima. Orimjeri drugih widgeta su scroll barovi, dugmad i tekst elementi. Widget je istovremeno može sadrćavati i druge widgete; dialog ili glavni prozor aplikacije.

Red 9 prikazuje Text Edit na ekranu unutar prozora aplikacije. S obzirom da widgeti istovremeno mogu u sebi sadržavati druge widgete (instanca "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.htm u sebi sadrži traku s alatima, menije, statusnu traku kao i druge widgete), moguće je prikazati svaki widget unutar njegovog vlastitog prozora. Widgeti pri samom kreiranju nisu vidljivi već ih se mora prikazati upotrebnom funkcije .show().

U redu 11 "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html ulazi u glavnu petlju u kojoj lovi događaje(eventove). Za vrijeme izvršavanja Qt aplikacije, eventovi se kreiraju i šalju widgetima unutar aplikacije. Primjeri događaja su pritisak na tipku miša ili unos na tipkovnici. Dok upisujete tekst u TextEdit widget, on prima event koji mu govori da je pritisnuta tipka i koja tipka je pritisnuta i zatim u skladu s time iscratava se upisani tekst.

Da bi pokrenuli aplikaciju, otvorite komadnu liniju, pronađite direktorij u kojem se nalazi .cpp datoteka programa. —Upišite sljedeće linije da bi pokrenuli program:

 qmake -project
 qmake
 make

Pokretanje ove skripte kreirat će izvrnu datoteku u part1 direkoriju (korinici Windows opertativnog sustava, umjeto make komande koristite nmake. Isto tako, izvrsna datoteka će biti locirana u direktorijima part1/debug i part1/release). QMake je Qt alat za izradu izvršnih datoteka iz konfiguracijskih datoteka. Njih takodjer kreira qmake upotrebom -project paramtera. Iz konfiguracijske datoteke (sa sufiksom .pro), qmake kreira </>make datoteku iz koje će se generirati izvrćna datoteka aplikacije. O pisanju vlastitih .pro datoteka ćemo malo kasnije.

h3. Dodatne informacije |. Tema |. Gdje? | | Widgeti i upotreba Window widgeta | "Window and Dialog Widgets":http://doc.qt.nokia.com/4.7/application-windows.html | | Eventi i rad s njima | "The Event System":http://doc.qt.nokia.com/4.7/eventsandfilters.html |

h2. Dodavanje tipke za izlak iz programa

Za izradu pravih aplikacija bit će nam potrebno više od jednog widgeta. Zato ćemo sada dodati "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html ispod Text Edit elementa. Pritiskom na novo dodanu tipku aplikacija će se zatvoriti.

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

Pogledajmo izvorni kod aplikacije.

#include <QtGui>

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

QTextEdit textEdit;
 QPushButton quitButton("Izađi");

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

U prvom redu dodajemo QtGui header datoteku koja sadrži sve klase potrebne za Qt korisničko sučelje.

Red 10 koristi Qt mehanizam za signale i slotove da bi se izvršilo zatvaranje aplikacije klikom miša na tipku za zatvaranje aplikacije. Slot je funkcija koja se izvršava pozivanjem iste koristeći njegzin naziv. Signal je funkcija koja će nakon što je pozvana, pokrenuti slotove koji su vezani na nju; povezujemo slot sa signalom.

quite() je slot od "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html clicked() je signal koji "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html šalje dok korisniki klikne na njega. Statička metoda QObject::connect() brine se za povezivanje slota i signala. SIGNAL () i SLOT() su dva makroa koji rješavaju povezivanje funkcija signala i slotova. Također, potrebno je dodati pokazivače na objekte koji primaju i šalju signal.

U redu 12 kreiramo "QVboxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html. Kao što je prije spomenuto, widgeti mogu u sebi sadržavati druge widgete. Moguće je postaviti granice (položaj i veličinu) direktno za sve nasljedne widgete, ali u praksi lakše je widgetima upravljati upotrebom predložaka(layouta). Layouti se brinu da svi widgeti budu posloženi unutar svojih granica. "QVboxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html primjerice, postavlja sve widgete okomito jedan iznad drugoga.

U redovima 13 i 14 dodajemo tekst i pripadajuće dugme u "QVboxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html predložak. U redu 17 postavljamo predložak na glavni widget.

=== Dodatne informacije |. Tema |. Gdje? | | Signali i Slotovi | "Signals & Slots":http://doc.qt.nokia.com/4.7/signalsandslots.html | | Layouti / Predlošci | "Layout Management":http://doc.qt.nokia.com/4.7/layout.html, "Widgets and Layouts":http://doc.qt.nokia.com/4.7/widgets-and-layouts.html, "Layout Examples":http://doc.qt.nokia.com/4.7/examples-layouts.html | | Widgeti | "Qt Widget Gallery":http://doc.qt.nokia.com/4.7/gallery.html, "Widget Examples":http://doc.qt.nokia.com/4.7/examples-widgets.html | ===

Nasljeđivanje QWidget klase

When the user wants to quit an application, you might want to pop-up a dialog that asks whether he/she really wants to quit. In this example, we subclass "QWidget":http://doc.qt.nokia.com/4.7/qwidget.html, and add a slot that we connect to the Quit button.

Kad korisnik poželi napustiti aplikaciju, poželjno je prije zatvaranja aplikacije korisniku prikazatio dijalog s pitanjem da li je siguran da želi zatvoriti aplikaciju. U ovom primjeru, izvest ćemo novu klasu iz postojeće "QWidget":http://doc.qt.nokia.com/4.7/qwidget.html klase, dodati slot i povezati ga s tipkom za izlazak iz aplikacije.

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

Pogledajmo izvorni kod aplikacije:

class Notepad : public QWidget
{
 Q_OBJECT

public:
 Notepad();

private slots:
 void quit();

private:
 QTextEdit *textEdit;
 QPushButton *quitButton;
};

Q_OBJECT macro mora postavljen na početak klase i time se naše klasa deklarira kao "QObject":http://doc.qt.nokia.com/4.7/qobject.html (Naravno, isto tako mora i naslijeđivati "QObject":http://doc.qt.nokia.com/4.7/qobject.html). "QObject":http://doc.qt.nokia.com/4.7/qobject.html dodaje nekoliko novih mogućnosti postojećoj C++ klasi. Prvenstveno, naziv klase i nazivi slotova dostupni su tijekom izvršavanja aplikacije. Isto tako, moguće je saznati sve parametre slotova te ih po potrebi i pozivati.

U redu 13 radimo deklaraciju slota quit() što se jednostavno radi upotrebom makroa za slotove. Quit() slot sad moze biti povezan sa signalima s kojima dijeli zajednički potpis (bilo koji signal koji u sebi nema pripadajućih parametara).

Umjesto ručnog postavljanja korisničkog sučelja i povezivanje slotova unutar main() funkcije, upotrijebit cemo konstruktor Notepad()

Notepad::Notepad()
{
 textEdit = new QTextEdit;
 quitButton = new QPushButton(tr("Izađi"));

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

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

 setLayout(layout);

 setWindowTitle(tr("Notepad"));
}

Kao što se moze vidjeti u definiciji klase, koristimo pointere na naše "QObject":http://doc.qt.nokia.com/4.7/qobject.html objekte (textEdit i quitButton), Po pravilima, poželjno je alocirati sve QObjects na hrpu i nikad ih ne kopirati.

Nadalje, koristimo funkciju tr() tekstove. Ova je funkcija potrebna ukoliko želimo da naša aplikacija radi na više od jednog jezika (primjerice Hrvatski i Engleski). Ovdje nećemo ići u detalje, ali više informacija možete saznati u dokumentaciji za "Qt Linguist":http://doc.qt.nokia.com/4.7/linguist-manual.html

h3. Dodatne informacije |. Tema |. Gdje? | | tr() i internacionalizacija | "Qt Linguist Manual":http://doc.qt.nokia.com/4.7/linguist-manual.html, "Writing Source Code for Translation":http://doc.qt.nokia.com/4.7/i18n-source-translation.html, "Hello tr()":http://doc.qt.nokia.com/4.7/linguist-hellotr.html Example, "Internationalization with Qt":http://doc.qt.nokia.com/4.7/internationalization.html | | "QObject":http://doc.qt.nokia.com/4.7/qobject.html i Qt Object Model (osnova za rad u Qt-u) | "Object Model":http://doc.qt.nokia.com/4.7/object.html | | qmake i Qt build sustav | "qmake Manual":http://doc.qt.nokia.com/4.7/qmake-manual.html |

h2. Kreiranje .pro datoteke

Za ovaj primjer, umjesto upotrebe qmake -project naredbe, .pro datoteku ćemo kreirati sami.

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

Upotrebom sljedećih naredbi dobit ćemo izvršnu datoteku koju možemo pokrenuti.

qmake
make

h2. Upotreba QMainWindow widgeta

Veliki broj aplikacija koristi prednosti "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html, koji ima svoj vlastiti layout na kojeg možemo dodati traku s alatima, widgete, menije i statusni bar. Središnja površina unutar "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html može sadržavati bilo koji widget. U našem slučaju mi ćemo staviti "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html widget.

p=. QMainWindow

Pogledajmo sada novu definiciju klase 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;
};

U aplikaciju smo dodali i dva nova slota pomoću kojih ćemo snimiti i učitati dokument. Njih ćemo implementirati malo kasnije.

Čest je slučaj da unutar glavnog prozora jedan slot aktivira više widgeta. Primjer je upotreba menija i alatne trake. Da bi se to pojednostavilo, Qt omogućuje upotrebu "QAction":http://doc.qt.nokia.com/4.7/qaction.html koju možemo proslijediti nekolicini widgeta, te ih spajati na slotove. Primjerice, "QMenu"::http://doc.qt.nokia.com/4.7/qmenu.html i "QToolBar":http://doc.qt.nokia.com/4.7/qtoolbar.html mogu kreirati nove opcije na meniju ili alate na alatnoj traci iz proslijeđene "QAction":http://doc.qt.nokia.com/4.7/qaction.html. Primjer slijedi ubrzo.

Kao i prije, za kreiranje korisničkog sučelja koristi ćemo Notepad konstruktor.

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

"QActions":http://doc.qt.nokia.com/4.7/qaction.html se kreiraju s tekstom koji će se pojaviti na widgetu kojima ih proslijedimo (u našem primjeru opcije na meniju). Ukoliko želimo iste dodati u "QToolBar":http://doc.qt.nokia.com/4.7/qtoolbar.htm, "QAction":http://doc.qt.nokia.com/4.7/qaction.html mora imati pridužen "QIcon":http://doc.qt.nokia.com/4.7/qicon.html objekt.

Kad kliknemo na opciju unutar menija, pozvat će se pripadajući "QAction":http://doc.qt.nokia.com/4.7/qaction.html koji će zatim pozvati pripadajući slot

h3. Dodatne informacije |. Tema |. Gdje? | | MainWindow i pripadajuće klase | "Application Main Window":http://doc.qt.nokia.com/4.7/mainwindow.html, "Main Window Examples":http://doc.qt.nokia.com/4.7/examples-mainwindow.html | | MDI aplikacije | "QMdiArea":http://doc.qt.nokia.com/4.7/qmdiarea.html, "MDI Example":http://doc.qt.nokia.com/4.7/mainwindows-mdi.html |

h2. Snimanje i učitavanje

U ovom primjeru implementirat ćemo funkcionalnost za open() i save() slotove koje smo dodali u prijašnjem primjeru.

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

Počet ćemo s implelentacijom open() slota:

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

Prvi korak je upitati korisnika naziv datoteke koju ćemo učitati. Qt dolazi s "QFileDialog":http://doc.qt.nokia.com/4.7/qfiledialog.html, koji omogućuje korisniku odabir datoteke. Slika iznad prikazuje dijalog prikazan na Kubuntu operativnom sustavu. Metoda getOpenFileName() prikazuje dijalog za izbor datoteke i sve dok datoteka ne bude odabrana ili korisnik odustane, on će biti prikazan. Po zatvaranju, vraća se putanja do datoteke ukoliko je ista odbarana, ili prazan string ukoliko je korisnik odustao.

Ukoliko imam naziv datoteke, pokušat ćemo je otvoriti s open() s time da ćemo dobiti true ukoliko je datoteka uspješno otvorena. U ovom primjeru nećemo ulaziti u pojašnjavanje kako rješiti pojavu grešaka u aplikacija, ali preporučamo slijediti linkove iz Više Informacija dijela ovog teksta. Ukoliko se datoteka iz nekog razloga nemože otvoriti, koristimo "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox.html da prikažemo dijalog s porukom o grešci (pogledati detalje o "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox.html klasi za dodatne informacije).

Čitanje podataka iz otvorene datoteke je prilično trivijalno upotrebom readAll() funkcije, koja nam vrća sve podatke iz datoteke u formatu "QByteArray":http://doc.qt.nokia.com/4.7/qbytearray.html. Metoda constData() vraća sve podatke u const char formatu za kojeg "QString":http://doc.qt.nokia.com/4.7/qstring.html ima konstruktor. Sadržaj datoteke nakon toga možemo prikazati u unutar "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html widgeta. Nakon toga metodom close() zatvaramo datoteku i vraćamo pristup datoteci operativnom sustavu.

Idemo pogledati source kod za save() metodu:

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

Kad zapisujemo sadržaj tekst kontrole u datoteku, koristimo "QTextStream":http://doc.qt.nokia.com/4.7/qtextstream.html klasu, kao wrapper "QFile":http://doc.qt.nokia.com/4.7/qfile.html objekta. Tekstualni stream zapisuje "QString":http://doc.qt.nokia.com/4.7/qstring.html direkto u datoteku; "QFile":http://doc.qt.nokia.com/4.7/qfile.html prima jedino podatke u char formatu i s write() metodom "QIODevice":http://doc.qt.nokia.com/4.7/qiodevice.html klase;

=== Dodatne informacije |. Tema |. Gdje? | ===