Pregledajte ovu stranicu na sljedećim jezicima: en [doc.qt.nokia.com], es [developer.qt.nokia.com], ru [developer.qt.nokia.com], pl [developer.qt.nokia.com], pt [developer.qt.nokia.com], nl [developer.qt.nokia.com]

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.

Texteingabefenster

Izvorni kod aplikacije:

  1. #include <QApplication>
  2. #include <QTextEdit>
  3.  
  4. int main(int argv, char **args)
  5. {
  6.   QApplication app(argv, args);
  7.  
  8.   QTextEdit textEdit;
  9.   textEdit.show();
  10.  
  11.   return app.exec();
  12. }

Idemo proci kroz izvorni kod aplikacije red po red. U prve dvije linije koda, dodajemo header datoteke za QApplication [doc.qt.nokia.com] i QTextEdit [doc.qt.nokia.com], dvije klase koje su nam potrebne za ovaj primjer. Sve Qt klase imaju header datoteku s ####### klase.

U redu 6. aplikacije kreiramo QApplication [doc.qt.nokia.com] 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 [doc.qt.nokia.com] objekt. Text Edit je vizualni element u koriničkom sučelju. U Qt, takve objekte ######## 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 [doc.qt.nokia.com] 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 [doc.qt.nokia.com] 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:

  1.      qmake -project
  2.      qmake
  3.      make

Pokretanje ove skripte kreirat će izvrnu datoteku u part1 direkoriju (korinici Windows opertativnog sustava, umjeto <i>make</i> komande koristite <i>nmake</i>. 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</i> datoteku iz koje će se generirati izvrćna datoteka aplikacije. O pisanju vlastitih .pro datoteka ćemo malo kasnije.

Dodatne informacije
Tema Gdje?
Widgeti i upotreba Window widgeta Window and Dialog Widgets [doc.qt.nokia.com]
Eventi i rad s njima The Event System [doc.qt.nokia.com]

Dodavanje tipke za izlak iz programa

Za izradu pravih aplikacija bit će nam potrebno više od jednog widgeta. Zato ćemo sada dodati QPushButton [doc.qt.nokia.com] ispod Text Edit elementa. Pritiskom na novo dodanu tipku aplikacija će se zatvoriti.

Pogledajmo izvorni kod aplikacije.

  1. #include <QtGui>
  2.  
  3. int main(int argv, char **args)
  4. {
  5.   QApplication app(argv, args);
  6.  
  7.   QTextEdit textEdit;
  8.   QPushButton quitButton("Izađi");
  9.  
  10.   QObject::connect(&quitButton, SIGNAL(clicked()), qApp, SLOT(quit()));
  11.  
  12.   QVBoxLayout layout;
  13.   layout.addWidget(&textEdit);
  14.   layout.addWidget(&quitButton);
  15.  
  16.   QWidget window;
  17.   window.setLayout(&layout);
  18.  
  19.   window.show();
  20.  
  21.   return app.exec();
  22. }

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 #####. 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 [doc.qt.nokia.com] clicked() je signal koji QPushButton [doc.qt.nokia.com] š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 [doc.qt.nokia.com]. 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 [doc.qt.nokia.com] primjerice, postavlja sve widgete okomito jedan iznad drugoga.

U redovima 13 i 14 dodajemo tekst i pripadajuće dugme u QVboxLayout [doc.qt.nokia.com] predložak. U redu 17 postavljamo predložak na glavni widget.

Dodatne informacije
Tema Gdje?
Signali i Slotovi Signals & Slots [doc.qt.nokia.com]
Layouti / Predlošci Layout Management [doc.qt.nokia.com], Widgets and Layouts [doc.qt.nokia.com], Layout Examples [doc.qt.nokia.com]
Widgeti Qt Widget Gallery [doc.qt.nokia.com], Widget Examples [doc.qt.nokia.com]

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 [doc.qt.nokia.com], 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 [doc.qt.nokia.com] klase, dodati slot i povezati ga s tipkom za izlazak iz aplikacije.

Pogledajmo izvorni kod aplikacije:

  1. class Notepad : public QWidget
  2. {
  3.   Q_OBJECT
  4.  
  5. public:
  6.   Notepad();
  7.  
  8. private slots:
  9.   void quit();
  10.  
  11. private:
  12.   QTextEdit *textEdit;
  13.   QPushButton *quitButton;
  14. };

Q_OBJECT macro mora postavljen na početak klase i time se naše klasa deklarira kao QObject [doc.qt.nokia.com] (Naravno, isto tako mora i naslijeđivati QObject [doc.qt.nokia.com]). QObject [doc.qt.nokia.com] dodaje nekoliko novih mogućnosti postojećoj C++ klasi. Prvenstveno, ##### klase i ###### 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()

  1. Notepad::Notepad()
  2. {
  3.   textEdit = new QTextEdit;
  4.   quitButton = new QPushButton(tr("Izađi"));
  5.  
  6.   connect(quitButton, SIGNAL(clicked()), this, SLOT(quit()));
  7.  
  8.   QVBoxLayout *layout = new QVBoxLayout;
  9.   layout->addWidget(textEdit);
  10.   layout->addWidget(quitButton);
  11.  
  12.   setLayout(layout);
  13.  
  14.   setWindowTitle(tr("Notepad"));
  15. }

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

Nadalje, koristimo funkciju <i>tr()</i> 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 [doc.qt.nokia.com]

Dodatne informacije
Tema Gdje?
tr() i internacionalizacija Qt Linguist Manual [doc.qt.nokia.com], Writing Source Code for Translation [doc.qt.nokia.com], Hello tr() [doc.qt.nokia.com] Example, Internationalization with Qt [doc.qt.nokia.com]
QObject [doc.qt.nokia.com] i Qt Object Model (osnova za rad u Qt-u) Object Model [doc.qt.nokia.com]
qmake i Qt build sustav qmake Manual [doc.qt.nokia.com]

Kreiranje .pro datoteke

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

  1. HEADERS =  notepad.h
  2. SOURCES =  notepad.cpp \
  3. main.cpp

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

Upotreba QMainWindow widgeta

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

QMainWindow

Pogledajmo sada novu definiciju klase Notepad:

  1. #include <QtGui>
  2.  
  3. class Notepad : public QMainWindow
  4. {
  5.   Q_OBJECT
  6.  
  7. public:
  8.   Notepad();
  9.  
  10. private slots:
  11.   void open();
  12.   void save();
  13.   void quit();
  14.  
  15. private:
  16.   QTextEdit *textEdit;
  17.  
  18.   QAction *openAction;
  19.   QAction *saveAction;
  20.   QAction *exitAction;
  21.  
  22.   QMenu *fileMenu;
  23. };

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 [doc.qt.nokia.com] koju možemo proslijediti nekolicini widgeta, te ih spajati na slotove. Primjerice, QMenu i QToolBar [doc.qt.nokia.com] mogu kreirati nove opcije na meniju ili alate na alatnoj traci iz proslijeđene QAction [doc.qt.nokia.com]. Primjer slijedi ubrzo.

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

  1. Notepad::Notepad()
  2. {
  3.   saveAction = new QAction(tr("&Open"), this);
  4.   saveAction = new QAction(tr("&Save"), this);
  5.   exitAction = new QAction(tr("E&xit"), this);
  6.  
  7.   connect(openAction, SIGNAL(triggered()), this, SLOT(open()));
  8.   connect(saveAction, SIGNAL(triggered()), this, SLOT(save()));
  9.   connect(exitAction, SIGNAL(triggered()), qApp, SLOT(quit()));
  10.  
  11.   fileMenu = menuBar()->addMenu(tr("&File"));
  12.   fileMenu->addAction(openAction);
  13.   fileMenu->addAction(saveAction);
  14.   fileMenu->addSeparator();
  15.   fileMenu->addAction(exitAction);
  16.  
  17.   textEdit = new QTextEdit;
  18.   setCentralWidget(textEdit);
  19.  
  20.   setWindowTitle(tr("Notepad"));
  21. }

QActions [doc.qt.nokia.com] 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 [doc.qt.nokia.com], QAction [doc.qt.nokia.com] mora imati pridužen QIcon [doc.qt.nokia.com] objekt.

Kad kliknemo na opciju unutar menija, pozvat će se pripadajući QAction [doc.qt.nokia.com] koji će zatim pozvati pripadajući slot

Dodatne informacije
Tema Gdje?
MainWindow i pripadajuće klase Application Main Window [doc.qt.nokia.com], Main Window Examples [doc.qt.nokia.com]
MDI aplikacije QMdiArea [doc.qt.nokia.com], MDI Example [doc.qt.nokia.com]

Snimanje i učitavanje

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

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

  1. QString fileName = QFileDialog::getOpenFileName(this, tr("Open File"), "",
  2.       tr("Text Files (*.txt);;C++ Files (*.cpp *.h)"));
  3.  
  4. if (fileName != "") {
  5.   QFile file(fileName);
  6.   if (!file.open(QIODevice::ReadOnly)) {
  7.     QMessageBox::critical(this, tr("Error"),
  8.      tr("Could not open file"));
  9.     return;
  10.   }
  11.   QString contents = file.readAll().constData();
  12.   textEdit->setPlainText(contents);
  13.   file.close();
  14. }

Prvi korak je upitati korisnika ##### datoteke koju ćemo učitati. Qt dolazi s QFileDialog [doc.qt.nokia.com], 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 ##### datoteke, pokušat ćemo je otvoriti s open() s time da ćemo dobiti <i>true</i> 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 [doc.qt.nokia.com] da prikažemo dijalog s porukom o grešci (pogledati detalje o QMessageBox [doc.qt.nokia.com] 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 [doc.qt.nokia.com]. Metoda constData() vraća sve podatke u <i>const char*</i> formatu za kojeg QString [doc.qt.nokia.com] ima konstruktor. Sadržaj datoteke nakon toga možemo prikazati u unutar QTextEdit [doc.qt.nokia.com] widgeta. Nakon toga metodom close() zatvaramo datoteku i vraćamo pristup datoteci operativnom sustavu.

Idemo pogledati source kod za save() metodu:

  1. QString fileName = QFileDialog::getSaveFileName(this, tr("Save File"), "",
  2.       tr("Text Files (*.txt);;C++ Files (*.cpp *.h)"));
  3.  
  4. if (fileName != "") {
  5.   QFile file(fileName);
  6.   if (!file.open(QIODevice::WriteOnly)) {
  7.     // error message
  8.   } else {
  9.     QTextStream stream(&file);
  10.     stream << textEdit->toPlainText();
  11.     stream.flush();
  12.     file.close();
  13.   }
  14. }

Kad zapisujemo sadržaj tekst kontrole u datoteku, koristimo QTextStream [doc.qt.nokia.com] klasu, kao wrapper QFile [doc.qt.nokia.com] objekta. Tekstualni stream zapisuje QString [doc.qt.nokia.com] direkto u datoteku; QFile [doc.qt.nokia.com] prima jedino podatke u <i>char*</i> formatu i s write() metodom QIODevice [doc.qt.nokia.com] klase;

Dodatne informacije
Tema Gdje?
Datoteke i I/O uređaji QFile [doc.qt.nokia.com], QIODevice [doc.qt.nokia.com]