Getting Started on the Commandline/nl: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Add "cleanup" tag)
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}


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


= Beginnen met programmeren in Qt =
= Beginnen met programmeren in Qt =
Line 27: Line 26:
}</code>
}</code>


Laten we dit stuk code regel voor regel doornemen. In de eerste twee regels includen we de header files voor "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html en "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html, die de twee classes zijn die we voor dit voorbeeld nodig hebben. Alle Qt classes hebben een header met zelfde naam.
Laten we dit stuk code regel voor regel doornemen. In de eerste twee regels includen we de header files voor [http://doc.qt.nokia.com/4.7/qapplication.html QApplication] en [http://doc.qt.nokia.com/4.7/qtextedit.html QTextEdit], die de twee classes zijn die we voor dit voorbeeld nodig hebben. Alle Qt classes hebben een header met zelfde naam.


Regel 6 creëert een "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html object. Dit object beheert alle resources die nodig zijn voor een Qt applicatie met een GUI. Het heeft argv en args nodig omdat Qt applicaties enkele command line argumenten accepteren.
Regel 6 creëert een [http://doc.qt.nokia.com/4.7/qapplication.html QApplication] object. Dit object beheert alle resources die nodig zijn voor een Qt applicatie met een GUI. Het heeft argv en args nodig omdat Qt applicaties enkele command line argumenten accepteren.


Regel 8 creert een "QTextEdit":http://doc.qt.nokia.com/4.7/qtextedit.html object. Een text edit is een visueel element in de GUI. In Qt noemen we dit soort elementen widgets. Voorbeelden van andere widgets zijn scroll bars, labels en radio knoppen. Een widget can ook een container zijn voor andere widgets, een dialog of een main applicatie bijvoorbeeld.
Regel 8 creert een [http://doc.qt.nokia.com/4.7/qtextedit.html QTextEdit] object. Een text edit is een visueel element in de GUI. In Qt noemen we dit soort elementen widgets. Voorbeelden van andere widgets zijn scroll bars, labels en radio knoppen. Een widget can ook een container zijn voor andere widgets, een dialog of een main applicatie bijvoorbeeld.


Regel 9 toont de text edit op het scherm in zijn eigen window frame. Omdat widgets ook als containers functioneren (bijvoorbeeld een "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html, die toolbars, menus, een status bar, en een aantal andere widgets bezit), is het mogelijk om een enkele widget te tonen in zijn eigen window. Widgets zijn niet standaard zichtbaar. De functie "show()":http://doc.qt.nokia.com/4.7/qwidget.html#show zorgt dat ze zichtbaar worden.
Regel 9 toont de text edit op het scherm in zijn eigen window frame. Omdat widgets ook als containers functioneren (bijvoorbeeld een [http://doc.qt.nokia.com/4.7/qmainwindow.html QMainWindow], die toolbars, menus, een status bar, en een aantal andere widgets bezit), is het mogelijk om een enkele widget te tonen in zijn eigen window. Widgets zijn niet standaard zichtbaar. De functie [http://doc.qt.nokia.com/4.7/qwidget.html#show show()] zorgt dat ze zichtbaar worden.


Regel 11 zorgt ervoor dat de "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html zijn event loop ingaat. Wanneer een Qt applicatie draait worden events gegenereerd en verzonden naar de widgets van de applicatie. Voorbeelden van events zijn muisklikken en toetsaanslagen. Wanneer je text typt in de text edit widget, ontvangt het toetsaanslagevents en reageert dan door de text te tekenen.
Regel 11 zorgt ervoor dat de [http://doc.qt.nokia.com/4.7/qapplication.html QApplication] zijn event loop ingaat. Wanneer een Qt applicatie draait worden events gegenereerd en verzonden naar de widgets van de applicatie. Voorbeelden van events zijn muisklikken en toetsaanslagen. Wanneer je text typt in de text edit widget, ontvangt het toetsaanslagevents en reageert dan door de text te tekenen.


Om de applicatie te draaien open je een command prompt en voert de directory in waarin het .cpp bestand van het programma staat. De volgende opdrachten bouwen dan je programma.
Om de applicatie te draaien open je een command prompt en voert de directory in waarin het .cpp bestand van het programma staat. De volgende opdrachten bouwen dan je programma.
Line 52: Line 51:
|-
|-
|Widgets and Window Geometry
|Widgets and Window Geometry
|"Window and Dialog Widgets":http://doc.qt.nokia.com/4.7/application-windows.html
|[http://doc.qt.nokia.com/4.7/application-windows.html Window and Dialog Widgets]
|-
|-
|Events and event handling
|Events and event handling
|"The Event System":http://doc.qt.nokia.com/4.7/eventsandfilters.html
|[http://doc.qt.nokia.com/4.7/eventsandfilters.html The Event System]
|}
|}


== Afsluitknop toevoegen ==
== Afsluitknop toevoegen ==


In een echte applicatie heb je normaal gesproken meer dan een widget nodig. We zullen nu de een "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html introduceren onder de text edit. De knop zal de kladblok applicatie afsluiten wanneer er op wordt geklikt.
In een echte applicatie heb je normaal gesproken meer dan een widget nodig. We zullen nu de een [http://doc.qt.nokia.com/4.7/qpushbutton.html QPushButton] introduceren onder de text edit. De knop zal de kladblok applicatie afsluiten wanneer er op wordt geklikt.


p=. [[Image:http://doc.qt.nokia.com/4.7/images/gs2.png|http://doc.qt.nokia.com/4.7/images/gs2.png]]
p=. [[Image:http://doc.qt.nokia.com/4.7/images/gs2.png|http://doc.qt.nokia.com/4.7/images/gs2.png]]
Line 75: Line 74:
  QPushButton quitButton("Quit");
  QPushButton quitButton("Quit");


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


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


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


window.show();
window.show();
Line 89: Line 88:
}</code>
}</code>


Regel 1 includet "QtGui":http://doc.qt.nokia.com/4.7/qtgui.html, welke alle GUI classes van Qt bevat.
Regel 1 includet [http://doc.qt.nokia.com/4.7/qtgui.html QtGui], welke alle GUI classes van Qt bevat.


Regel 10 gebruikt de Signals en Slots mechanismen van Qt om te zorgen dat de applicatie afsluit wanneer op de '''Quit knop''' geklikt wordt. Een slot is een functie die als een programma draait, aangeroepen kan worden via zijn naam (als een string). Een signal is een functie die wanneer hij uitgevoerd wordt de slots zal aanroepen die erbij geregistreerd zijn; dat noemen we het slot verbinden met het signal en het signal uitzenden.
Regel 10 gebruikt de Signals en Slots mechanismen van Qt om te zorgen dat de applicatie afsluit wanneer op de '''Quit knop''' geklikt wordt. Een slot is een functie die als een programma draait, aangeroepen kan worden via zijn naam (als een string). Een signal is een functie die wanneer hij uitgevoerd wordt de slots zal aanroepen die erbij geregistreerd zijn; dat noemen we het slot verbinden met het signal en het signal uitzenden.


"quit()":http://doc.qt.nokia.com/4.7/qcoreapplication.html#quit is een slot van "QApplication":http://doc.qt.nokia.com/4.7/qapplication.html dat de applicatie afsluit. "clicked()":http://doc.qt.nokia.com/4.7/qabstractbutton.html#clicked is een signal dat "QPushButton":http://doc.qt.nokia.com/4.7/qpushbutton.html uitzendt als erop geklikt wordt. De statische functie "QObject::connect()":http://doc.qt.nokia.com/4.7/qobject.html#connect zorgt voor het verbinden van het slot met het signal. SIGNAL () en SLOT() zijn twee macros die de zogenaamde function signatures van het signal en het slot die verbonden dienen te worden als parameter nemen. We moeten ook pointers geven aan de objecten die het signal moeten zenden en ontvangen.
[http://doc.qt.nokia.com/4.7/qcoreapplication.html#quit quit()] is een slot van [http://doc.qt.nokia.com/4.7/qapplication.html QApplication] dat de applicatie afsluit. [http://doc.qt.nokia.com/4.7/qabstractbutton.html#clicked clicked()] is een signal dat [http://doc.qt.nokia.com/4.7/qpushbutton.html QPushButton] uitzendt als erop geklikt wordt. De statische functie [http://doc.qt.nokia.com/4.7/qobject.html#connect QObject::connect()] zorgt voor het verbinden van het slot met het signal. SIGNAL () en SLOT() zijn twee macros die de zogenaamde function signatures van het signal en het slot die verbonden dienen te worden als parameter nemen. We moeten ook pointers geven aan de objecten die het signal moeten zenden en ontvangen.


Regel 12 maakt een "QVBoxLayout":http://doc.qt.nokia.com/4.7/qvboxlayout.html. Zoals eerder besproken kunnen widgets ook een container zijn voor andere widgets. Het is mogelijk om de grenzen (afmeting en positie) van child widgets direct in te stellen, maar het is meestal gemakkelijker om een layout te gebruiken. Een layout beheert de grenzen van de widgets die in een andere widget geplaatst zijn, de zogenaamde kinderen van die container widget. QVBoxLayout, bijvoorbeeld, plaatst de kinderen in een verticale rij onder elkaar.
Regel 12 maakt een [http://doc.qt.nokia.com/4.7/qvboxlayout.html QVBoxLayout]. Zoals eerder besproken kunnen widgets ook een container zijn voor andere widgets. Het is mogelijk om de grenzen (afmeting en positie) van child widgets direct in te stellen, maar het is meestal gemakkelijker om een layout te gebruiken. Een layout beheert de grenzen van de widgets die in een andere widget geplaatst zijn, de zogenaamde kinderen van die container widget. QVBoxLayout, bijvoorbeeld, plaatst de kinderen in een verticale rij onder elkaar.


Regel 13 en 14 voegen het tekst bewerkings vak en de knop toe aan de layout. Met regel 17 plaatsen we de layout in een widget.
Regel 13 en 14 voegen het tekst bewerkings vak en de knop toe aan de layout. Met regel 17 plaatsen we de layout in een widget.
Line 106: Line 105:
|-
|-
|Signals and slots
|Signals and slots
|"Signals &amp; Slots":http://doc.qt.nokia.com/4.7/signalsandslots.html
|[http://doc.qt.nokia.com/4.7/signalsandslots.html Signals & Slots]
|-
|-
|Layouts
|Layouts
|"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
|[http://doc.qt.nokia.com/4.7/layout.html Layout Management], [http://doc.qt.nokia.com/4.7/widgets-and-layouts.html Widgets and Layouts], [http://doc.qt.nokia.com/4.7/examples-layouts.html Layout Examples]
|-
|-
|The widgets that come with Qt
|The widgets that come with Qt
|"Qt Widget Gallery":http://doc.qt.nokia.com/4.7/gallery.html, "Widget Examples":http://doc.qt.nokia.com/4.7/examples-widgets.html
|[http://doc.qt.nokia.com/4.7/gallery.html Qt Widget Gallery], [http://doc.qt.nokia.com/4.7/examples-widgets.html Widget Examples]
|}
|}


Line 138: Line 137:
};</code>
};</code>


De "Q_OBJECT":http://doc.qt.nokia.com/4.7/qobject.html#Q_OBJECT macro moet als eerste in de class definitie, het definieert onze class als een "QObject":http://doc.qt.nokia.com/4.7/qobject.html (Dit betekent dat je ook "QObject":http://doc.qt.nokia.com/4.7/qobject.html moet overerven). Een "QObject":http://doc.qt.nokia.com/4.7/qobject.html voegt meerdere extra opties toe aan een normale C++ class. Met name, de class naam en slot namen kunnen tijdens het runnen worden opgevraagd, daarnaast is het mogelijk om de parameters van een slot op te vragen en deze aan te roepen.
De [http://doc.qt.nokia.com/4.7/qobject.html#Q_OBJECT Q_OBJECT] macro moet als eerste in de class definitie, het definieert onze class als een [http://doc.qt.nokia.com/4.7/qobject.html QObject] (Dit betekent dat je ook [http://doc.qt.nokia.com/4.7/qobject.html QObject] moet overerven). Een [http://doc.qt.nokia.com/4.7/qobject.html QObject] voegt meerdere extra opties toe aan een normale C++ class. Met name, de class naam en slot namen kunnen tijdens het runnen worden opgevraagd, daarnaast is het mogelijk om de parameters van een slot op te vragen en deze aan te roepen.


Regel 13 definieert het slot quit(). Dit wordt makkelijk gemaakt door de slots macro. Het quit() slot kan nu worden verbonden met signals die dezelfde function signature hebben (ieder signal dat geen parameters heeft).
Regel 13 definieert het slot quit(). Dit wordt makkelijk gemaakt door de slots macro. Het quit() slot kan nu worden verbonden met signals die dezelfde function signature hebben (ieder signal dat geen parameters heeft).
Line 160: Line 159:
}</code>
}</code>


Zoals je als zag in de class definitie, gebruiken we pointers voor onze "QObjects":http://doc.qt.nokia.com/4.7/qobject.html (textEdit en quitButton). Als een regel, moet je "QObjects":http://doc.qt.nokia.com/4.7/qobject.html altijd op de heap alloceren en er nooit een kopie van maken.
Zoals je als zag in de class definitie, gebruiken we pointers voor onze [http://doc.qt.nokia.com/4.7/qobject.html QObjects] (textEdit en quitButton). Als een regel, moet je [http://doc.qt.nokia.com/4.7/qobject.html QObjects] altijd op de heap alloceren en er nooit een kopie van maken.


We maken nu gebruik van de functie "tr()":http://doc.qt.nokia.com/4.7/qobject.html#tr rond onze zichtbare strings. Deze functie is nodig als je de applicatie in meer dan een taal wil aanbieden (bijvoorbeeld: Engels en Chinees). Hierover zullen we hier niet in meer detail op ingaan, maar je kan de Qt Linguist link van de extra informatie tabel volgen.
We maken nu gebruik van de functie [http://doc.qt.nokia.com/4.7/qobject.html#tr tr()] rond onze zichtbare strings. Deze functie is nodig als je de applicatie in meer dan een taal wil aanbieden (bijvoorbeeld: Engels en Chinees). Hierover zullen we hier niet in meer detail op ingaan, maar je kan de Qt Linguist link van de extra informatie tabel volgen.


h3. Extra informatie
=== Extra informatie ===
|Onderwerp|Hier|
|Onderwerp|Hier|
|tr() and internationalization|"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|
|tr() and internationalization|[http://doc.qt.nokia.com/4.7/linguist-manual.html Qt Linguist Manual], [http://doc.qt.nokia.com/4.7/i18n-source-translation.html Writing Source Code for Translation], [http://doc.qt.nokia.com/4.7/linguist-hellotr.html Hello tr]() Example, [http://doc.qt.nokia.com/4.7/internationalization.html| Internationalization with Qt]
|QObjects and the Qt Object model (This is essential to understand Qt)|"Object Model":http://doc.qt.nokia.com/4.7/object.html|
|QObjects and the Qt Object model (This is essential to understand Qt)|[http://doc.qt.nokia.com/4.7/object.html| Object Model]
|qmake and the Qt build system|"qmake Manual":http://doc.qt.nokia.com/4.7/qmake-manual.html|
|qmake and the Qt build system|[http://doc.qt.nokia.com/4.7/qmake-manual.html| qmake Manual]
 
h3. Aanmaken van een .pro bestand


=== Aanmaken van een .pro bestand ===
Voor dit voorbeeld maken we ons eigen .pro bestand, in plaats van gebruik te maken van de optie -project van qmake.
Voor dit voorbeeld maken we ons eigen .pro bestand, in plaats van gebruik te maken van de optie -project van qmake.


Line 182: Line 180:
make</code>
make</code>


h2. Gebruik maken van QMainWindow
== Gebruik maken van QMainWindow ==
 
Veel applicaties zullen profiteren van het gebruik van een [http://doc.qt.nokia.com/4.7/qmainwindow.html QMainWindow], welke zijn eigen layout heeft waaraan je bijvoorbeeld een menu balk, dock widgets, tool balken, en een status balk kan toevoegen. [http://doc.qt.nokia.com/4.7/qmainwindow.html QMainWindow] heeft een centrum gebied dat gebruikt kan worden voor ieder type widget. In ons geval zullen we daar ons text edit plaatsen.
Veel applicaties zullen profiteren van het gebruik van een "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html, welke zijn eigen layout heeft waaraan je bijvoorbeeld een menu balk, dock widgets, tool balken, en een status balk kan toevoegen. "QMainWindow":http://doc.qt.nokia.com/4.7/qmainwindow.html heeft een centrum gebied dat gebruikt kan worden voor ieder type widget. In ons geval zullen we daar ons text edit plaatsen.


p=. [[Image:http://doc.qt.nokia.com/4.7/images/gs4.png|http://doc.qt.nokia.com/4.7/images/gs4.png]]
p=. [[Image:http://doc.qt.nokia.com/4.7/images/gs4.png|http://doc.qt.nokia.com/4.7/images/gs4.png]]
Line 216: Line 213:
We includen nog 2 slots die documenten kunnen openen en opslaan. Deze zullen in de volgende sectie implementeren.
We includen nog 2 slots die documenten kunnen openen en opslaan. Deze zullen in de volgende sectie implementeren.


In een main window moet hetzelfde slot vaak door meerdere widgets worden aangeroepen. Voorbeelden hiervan zijn menu items en knoppen op een tool bar. Om dit makkelijker te maken heeft Qt "QAction":http://doc.qt.nokia.com/4.7/qaction.html, welke aan meerdere widgets meegegeven kan worden en verbonden kan worden aan een slot. Zowel een "QMenu":http://doc.qt.nokia.com/4.7/qmenu.html als een "QToolBar":http://doc.qt.nokia.com/4.7/qtoolbar.html kunnen bijvoorbeeld menu items en tool buttons maken van dezelfde "QActions":http://doc.qt.nokia.com/4.7/qaction.html. We zullen zo zien hoe dit werkt.
In een main window moet hetzelfde slot vaak door meerdere widgets worden aangeroepen. Voorbeelden hiervan zijn menu items en knoppen op een tool bar. Om dit makkelijker te maken heeft Qt [http://doc.qt.nokia.com/4.7/qaction.html QAction], welke aan meerdere widgets meegegeven kan worden en verbonden kan worden aan een slot. Zowel een [http://doc.qt.nokia.com/4.7/qmenu.html QMenu] als een [http://doc.qt.nokia.com/4.7/qtoolbar.html QToolBar] kunnen bijvoorbeeld menu items en tool buttons maken van dezelfde [http://doc.qt.nokia.com/4.7/qaction.html QActions]. We zullen zo zien hoe dit werkt.


Net als de vorige keer, gebruiken we de constructor van Notepad voor het aanmaken van de GUI.
Net als de vorige keer, gebruiken we de constructor van Notepad voor het aanmaken van de GUI.
Line 222: Line 219:
<code>Notepad::Notepad()
<code>Notepad::Notepad()
{
{
  saveAction = new QAction(tr("&amp;Open"), this);
  saveAction = new QAction(tr("&Open"), this);
  saveAction = new QAction(tr("&amp;Save"), this);
  saveAction = new QAction(tr("&Save"), this);
  exitAction = new QAction(tr("E&amp;amp;xit"), this);
  exitAction = new QAction(tr("E&xit"), this);


  connect(openAction, SIGNAL (triggered()), this, SLOT (open()));
  connect(openAction, SIGNAL (triggered()), this, SLOT (open()));
Line 230: Line 227:
  connect(exitAction, SIGNAL (triggered()), qApp, SLOT (quit()));
  connect(exitAction, SIGNAL (triggered()), qApp, SLOT (quit()));


  fileMenu = menuBar()->addMenu(tr("&amp;File"));
  fileMenu = menuBar()->addMenu(tr("&File"));
  fileMenu->addAction(openAction);
  fileMenu->addAction(openAction);
  fileMenu->addAction(saveAction);
  fileMenu->addAction(saveAction);
Line 242: Line 239:
}</code>
}</code>


"QActions":http://doc.qt.nokia.com/4.7/qaction.html worden aangemaakt met de text die zichtbaar moet zijn op de widgets waar we ze aan toevoegen (in ons geval, menu items). Als we ze ook aan een tool bar wilden toevoegen, zouden we een "icon":http://doc.qt.nokia.com/4.7/qicon.html kunnen meegeven aan de actions.
[http://doc.qt.nokia.com/4.7/qaction.html QActions] worden aangemaakt met de text die zichtbaar moet zijn op de widgets waar we ze aan toevoegen (in ons geval, menu items). Als we ze ook aan een tool bar wilden toevoegen, zouden we een [http://doc.qt.nokia.com/4.7/qicon.html icon] kunnen meegeven aan de actions.


Wanneer er op een menu item word geklikt, zal dit de action triggeren, en het bijbehorende slot zal worden aangeroepen.
Wanneer er op een menu item word geklikt, zal dit de action triggeren, en het bijbehorende slot zal worden aangeroepen.


h3. Extra informatie
=== Extra informatie ===
|Onderwerp|Hier|
|Onderwerp|Hier|
|Main windows and main window classes|"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|
|Main windows and main window classes|[http://doc.qt.nokia.com/4.7/mainwindow.html Application Main Window], [http://doc.qt.nokia.com/4.7/examples-mainwindow.html| Main Window Examples]
|MDI applications|"QMdiArea":http://doc.qt.nokia.com/4.7/qmdiarea.html, "MDI Example":http://doc.qt.nokia.com/4.7/mainwindows-mdi.html|
|MDI applications|[http://doc.qt.nokia.com/4.7/qmdiarea.html QMdiArea], [http://doc.qt.nokia.com/4.7/mainwindows-mdi.html| MDI Example]
 
h2. Opslaan en laden


== Opslaan en laden ==
In dit voorbeeld zullen we de functionaliteit van de open() en save() slots, die we in het vorige voorbeeld hebben toegevoegd, implementeren.
In dit voorbeeld zullen we de functionaliteit van de open() en save() slots, die we in het vorige voorbeeld hebben toegevoegd, implementeren.


Line 274: Line 270:
}</code>
}</code>


De eerst stap is om aan de gebruiker de naam van het bestand dat geopend moet worden te vragen. Qt heeft een "QFileDialog":http://doc.qt.nokia.com/4.7/qfiledialog.html, welke een dialog is waarin de gebruiker een bestand kan selecteren. Het plaatje hierboven toont dit dialog in Kubuntu. De static "getOpenFileName()":http://doc.qt.nokia.com/4.7/qfiledialog.html#getOpenFileName functie toont een modal file dialog, en keert niet terug totdat de gebruiker een file heeft geselecteerd. Het geeft de bestands locatie van het bestand dat is geselecteerd terug, of een lege string wanneer de gebruiker op cancel heeft gedrukt.
De eerst stap is om aan de gebruiker de naam van het bestand dat geopend moet worden te vragen. Qt heeft een [http://doc.qt.nokia.com/4.7/qfiledialog.html QFileDialog], welke een dialog is waarin de gebruiker een bestand kan selecteren. Het plaatje hierboven toont dit dialog in Kubuntu. De static [http://doc.qt.nokia.com/4.7/qfiledialog.html#getOpenFileName getOpenFileName()] functie toont een modal file dialog, en keert niet terug totdat de gebruiker een file heeft geselecteerd. Het geeft de bestands locatie van het bestand dat is geselecteerd terug, of een lege string wanneer de gebruiker op cancel heeft gedrukt.


Als we eenmaal een bestands naam hebben, proberen we dit bestand te openen met "open()":http://doc.qt.nokia.com/4.7/qiodevice.html#open, welke true terug geeft als het bestand geopend kon worden. We zullen niet ingaan op de error afhandeling, maar je kan daarvoor de links in het extra informatie deel volgen. Als het bestand niet kon worden geopend, gebruiken we "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox.html om een dialog te tonen met daarin het error bericht (bekijk de "QMessageBox":http://doc.qt.nokia.com/4.7/qmessagebox.html class beschrijving voor meer informatie).
Als we eenmaal een bestands naam hebben, proberen we dit bestand te openen met [http://doc.qt.nokia.com/4.7/qiodevice.html#open open()], welke true terug geeft als het bestand geopend kon worden. We zullen niet ingaan op de error afhandeling, maar je kan daarvoor de links in het extra informatie deel volgen. Als het bestand niet kon worden geopend, gebruiken we [http://doc.qt.nokia.com/4.7/qmessagebox.html QMessageBox] om een dialog te tonen met daarin het error bericht (bekijk de [http://doc.qt.nokia.com/4.7/qmessagebox.html QMessageBox] class beschrijving voor meer informatie).


Het lezen van data is eigenlijk heel triviaal door middel van de "readAll()":http://doc.qt.nokia.com/4.7/qiodevice.html#readAll functie, welke alle data in het bestand teruggeeft als een "QByteArray":http://doc.qt.nokia.com/4.7/qbytearray.html. De "constData()":http://doc.qt.nokia.com/4.7/qbytearray.html#constData geeft alle data terug als een array van const char''', waar QString een constructor voor heeft. De inhoud kan dan worden getoond in de text edit. We sluiten dan het bestand af met "close()":http://doc.qt.nokia.com/4.7/qiodevice.html#close om de file descriptor terug te geven aan het besturings systeem.
Het lezen van data is eigenlijk heel triviaal door middel van de [http://doc.qt.nokia.com/4.7/qiodevice.html#readAll readAll()] functie, welke alle data in het bestand teruggeeft als een [http://doc.qt.nokia.com/4.7/qbytearray.html QByteArray]. De [http://doc.qt.nokia.com/4.7/qbytearray.html#constData constData()] geeft alle data terug als een array van const char''', waar QString een constructor voor heeft. De inhoud kan dan worden getoond in de text edit. We sluiten dan het bestand af met [http://doc.qt.nokia.com/4.7/qiodevice.html#close close()] om de file descriptor terug te geven aan het besturings systeem.


Laten we nu kijken naar de implementatie van het save() slot.
Laten we nu kijken naar de implementatie van het save() slot.
Line 290: Line 286:
  // error message
  // error message
  } else {
  } else {
  QTextStream stream(&amp;file);
  QTextStream stream(&file);
  stream << textEdit->toPlainText();
  stream << textEdit->toPlainText();
  stream.flush();
  stream.flush();
Line 297: Line 293:
}</code>
}</code>


We schrijven de inhoud van de text edit naar het bestand naar welke word gewezen in het "QFile":http://doc.qt.nokia.com/4.7/qfile.html object, hiervoor gebruiken we de "QTextStram":http://doc.qt.nokia.com/4.7/qtextstream.html class. De text stream kan een "QString":http://doc.qt.nokia.com/4.7/qstring.html direct naar het bestand schrijven; "QFile":http://doc.qt.nokia.com/4.7/qfile.html accepteert alleen ruwe data (char''') met de "write()":http://doc.qt.nokia.com/4.7/qiodevice.html#write functies van het "QIODevice":http://doc.qt.nokia.com/4.7/qiodevice.html.
We schrijven de inhoud van de text edit naar het bestand naar welke word gewezen in het [http://doc.qt.nokia.com/4.7/qfile.html QFile] object, hiervoor gebruiken we de [http://doc.qt.nokia.com/4.7/qtextstream.html QTextStram] class. De text stream kan een [http://doc.qt.nokia.com/4.7/qstring.html QString] direct naar het bestand schrijven; [http://doc.qt.nokia.com/4.7/qfile.html QFile] accepteert alleen ruwe data (char''') met de [http://doc.qt.nokia.com/4.7/qiodevice.html#write write()] functies van het [http://doc.qt.nokia.com/4.7/qiodevice.html QIODevice].


=== Extra informatie
=== Extra informatie
|Onderwerp|Hier| ===
|Onderwerp|Hier| ===

Latest revision as of 17:53, 24 March 2016

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.


Beginnen met programmeren in Qt

Welkom in de wereld van Qt — de cross-platform GUI toolkit. In deze "getting started guide" zullen we u basis Qt kennis bijbrengen door een simpele kladblok applicatie te maken. Na het lezen van deze oefening, zult u klaar zijn om in onze overzichten en API documentatie te duiken, en alle informatie te vinden die u nodig heeft voor de applicatie die u ontwikkelt.

Hallo Kladblok

In dit eerste voorbeeld zullen we een eenvoudig venster op de desktop maken met daarin een text edit. Dit representeert het simpelste Qt programma met een GUI.

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

Hier is de code:

#include <QApplication>
#include <QTextEdit>

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

QTextEdit textEdit;
 textEdit.show();

return app.exec();
}

Laten we dit stuk code regel voor regel doornemen. In de eerste twee regels includen we de header files voor QApplication en QTextEdit, die de twee classes zijn die we voor dit voorbeeld nodig hebben. Alle Qt classes hebben een header met zelfde naam.

Regel 6 creëert een QApplication object. Dit object beheert alle resources die nodig zijn voor een Qt applicatie met een GUI. Het heeft argv en args nodig omdat Qt applicaties enkele command line argumenten accepteren.

Regel 8 creert een QTextEdit object. Een text edit is een visueel element in de GUI. In Qt noemen we dit soort elementen widgets. Voorbeelden van andere widgets zijn scroll bars, labels en radio knoppen. Een widget can ook een container zijn voor andere widgets, een dialog of een main applicatie bijvoorbeeld.

Regel 9 toont de text edit op het scherm in zijn eigen window frame. Omdat widgets ook als containers functioneren (bijvoorbeeld een QMainWindow, die toolbars, menus, een status bar, en een aantal andere widgets bezit), is het mogelijk om een enkele widget te tonen in zijn eigen window. Widgets zijn niet standaard zichtbaar. De functie show() zorgt dat ze zichtbaar worden.

Regel 11 zorgt ervoor dat de QApplication zijn event loop ingaat. Wanneer een Qt applicatie draait worden events gegenereerd en verzonden naar de widgets van de applicatie. Voorbeelden van events zijn muisklikken en toetsaanslagen. Wanneer je text typt in de text edit widget, ontvangt het toetsaanslagevents en reageert dan door de text te tekenen.

Om de applicatie te draaien open je een command prompt en voert de directory in waarin het .cpp bestand van het programma staat. De volgende opdrachten bouwen dan je programma.

qmake -project
qmake
make

Dit laat een executable achter in de part1 map (onthoud dat op Windows je mogelijk gebruik moet maken van nmake in plaats van make. Daarnaast word de executable in de map part1/debug of part1/release geplaatst). qmake is Qt's build applicatie dat een configuratie bestand accepteert. qmake genereert dit voor ons wanneer het argument -project word meegegeven. Aan de hand van het configuratie bestand (eindigend met .pro) produceert qmake een Makefile dat je programma voor je zal bouwen. We zullen later kijken naar hoe we zelf een .pro kunnen schrijven.

Extra informatie

Onderwerp Hier
Widgets and Window Geometry Window and Dialog Widgets
Events and event handling The Event System

Afsluitknop toevoegen

In een echte applicatie heb je normaal gesproken meer dan een widget nodig. We zullen nu de een QPushButton introduceren onder de text edit. De knop zal de kladblok applicatie afsluiten wanneer er op wordt geklikt.

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

Laten we naar de code kijken.

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

Regel 1 includet QtGui, welke alle GUI classes van Qt bevat.

Regel 10 gebruikt de Signals en Slots mechanismen van Qt om te zorgen dat de applicatie afsluit wanneer op de Quit knop geklikt wordt. Een slot is een functie die als een programma draait, aangeroepen kan worden via zijn naam (als een string). Een signal is een functie die wanneer hij uitgevoerd wordt de slots zal aanroepen die erbij geregistreerd zijn; dat noemen we het slot verbinden met het signal en het signal uitzenden.

quit() is een slot van QApplication dat de applicatie afsluit. clicked() is een signal dat QPushButton uitzendt als erop geklikt wordt. De statische functie QObject::connect() zorgt voor het verbinden van het slot met het signal. SIGNAL () en SLOT() zijn twee macros die de zogenaamde function signatures van het signal en het slot die verbonden dienen te worden als parameter nemen. We moeten ook pointers geven aan de objecten die het signal moeten zenden en ontvangen.

Regel 12 maakt een QVBoxLayout. Zoals eerder besproken kunnen widgets ook een container zijn voor andere widgets. Het is mogelijk om de grenzen (afmeting en positie) van child widgets direct in te stellen, maar het is meestal gemakkelijker om een layout te gebruiken. Een layout beheert de grenzen van de widgets die in een andere widget geplaatst zijn, de zogenaamde kinderen van die container widget. QVBoxLayout, bijvoorbeeld, plaatst de kinderen in een verticale rij onder elkaar.

Regel 13 en 14 voegen het tekst bewerkings vak en de knop toe aan de layout. Met regel 17 plaatsen we de layout in een widget.

Extra informatie

Onderwerp Hier
Signals and slots Signals & Slots
Layouts Layout Management, Widgets and Layouts, Layout Examples
The widgets that come with Qt Qt Widget Gallery, Widget Examples

Subklasse van QWidget

Het kan zijn dat als de gebruiker de applicatie afsluit je een dialoogscherm wil tonen met de vraag of hij/zij de applicatie echt wil afsluiten. In dit voorbeeld leiden we een klasse af van QWidget, en we voegen een slot toe dat we met de Quit knop verbinden.

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

Laten we naar de code kijken:

class Notepad : public QWidget
{
 Q_OBJECT

public:
 Notepad();

private slots:
 void quit();

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

De Q_OBJECT macro moet als eerste in de class definitie, het definieert onze class als een QObject (Dit betekent dat je ook QObject moet overerven). Een QObject voegt meerdere extra opties toe aan een normale C++ class. Met name, de class naam en slot namen kunnen tijdens het runnen worden opgevraagd, daarnaast is het mogelijk om de parameters van een slot op te vragen en deze aan te roepen.

Regel 13 definieert het slot quit(). Dit wordt makkelijk gemaakt door de slots macro. Het quit() slot kan nu worden verbonden met signals die dezelfde function signature hebben (ieder signal dat geen parameters heeft).

In plaats van het opzetten van de GUI en het verbinden van het slot in de main() functie, maken we nu gebruik van de constructor van 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"));
}

Zoals je als zag in de class definitie, gebruiken we pointers voor onze QObjects (textEdit en quitButton). Als een regel, moet je QObjects altijd op de heap alloceren en er nooit een kopie van maken.

We maken nu gebruik van de functie tr() rond onze zichtbare strings. Deze functie is nodig als je de applicatie in meer dan een taal wil aanbieden (bijvoorbeeld: Engels en Chinees). Hierover zullen we hier niet in meer detail op ingaan, maar je kan de Qt Linguist link van de extra informatie tabel volgen.

Extra informatie

|Onderwerp|Hier| |tr() and internationalization|Qt Linguist Manual, Writing Source Code for Translation, Hello tr() Example, Internationalization with Qt |QObjects and the Qt Object model (This is essential to understand Qt)|Object Model |qmake and the Qt build system|qmake Manual

Aanmaken van een .pro bestand

Voor dit voorbeeld maken we ons eigen .pro bestand, in plaats van gebruik te maken van de optie -project van qmake.

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

De volgende opdrachten bouwen dan het voorbeeld.

qmake
make

Gebruik maken van QMainWindow

Veel applicaties zullen profiteren van het gebruik van een QMainWindow, welke zijn eigen layout heeft waaraan je bijvoorbeeld een menu balk, dock widgets, tool balken, en een status balk kan toevoegen. QMainWindow heeft een centrum gebied dat gebruikt kan worden voor ieder type widget. In ons geval zullen we daar ons text edit plaatsen.

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

Laten we kijken naar de class definitie van 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;
};

We includen nog 2 slots die documenten kunnen openen en opslaan. Deze zullen in de volgende sectie implementeren.

In een main window moet hetzelfde slot vaak door meerdere widgets worden aangeroepen. Voorbeelden hiervan zijn menu items en knoppen op een tool bar. Om dit makkelijker te maken heeft Qt QAction, welke aan meerdere widgets meegegeven kan worden en verbonden kan worden aan een slot. Zowel een QMenu als een QToolBar kunnen bijvoorbeeld menu items en tool buttons maken van dezelfde QActions. We zullen zo zien hoe dit werkt.

Net als de vorige keer, gebruiken we de constructor van Notepad voor het aanmaken van de 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"));
}

QActions worden aangemaakt met de text die zichtbaar moet zijn op de widgets waar we ze aan toevoegen (in ons geval, menu items). Als we ze ook aan een tool bar wilden toevoegen, zouden we een icon kunnen meegeven aan de actions.

Wanneer er op een menu item word geklikt, zal dit de action triggeren, en het bijbehorende slot zal worden aangeroepen.

Extra informatie

|Onderwerp|Hier| |Main windows and main window classes|Application Main Window, Main Window Examples |MDI applications|QMdiArea, MDI Example

Opslaan en laden

In dit voorbeeld zullen we de functionaliteit van de open() en save() slots, die we in het vorige voorbeeld hebben toegevoegd, implementeren.

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

We zullen beginnen met het open() slot:

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

De eerst stap is om aan de gebruiker de naam van het bestand dat geopend moet worden te vragen. Qt heeft een QFileDialog, welke een dialog is waarin de gebruiker een bestand kan selecteren. Het plaatje hierboven toont dit dialog in Kubuntu. De static getOpenFileName() functie toont een modal file dialog, en keert niet terug totdat de gebruiker een file heeft geselecteerd. Het geeft de bestands locatie van het bestand dat is geselecteerd terug, of een lege string wanneer de gebruiker op cancel heeft gedrukt.

Als we eenmaal een bestands naam hebben, proberen we dit bestand te openen met open(), welke true terug geeft als het bestand geopend kon worden. We zullen niet ingaan op de error afhandeling, maar je kan daarvoor de links in het extra informatie deel volgen. Als het bestand niet kon worden geopend, gebruiken we QMessageBox om een dialog te tonen met daarin het error bericht (bekijk de QMessageBox class beschrijving voor meer informatie).

Het lezen van data is eigenlijk heel triviaal door middel van de readAll() functie, welke alle data in het bestand teruggeeft als een QByteArray. De constData() geeft alle data terug als een array van const char, waar QString een constructor voor heeft. De inhoud kan dan worden getoond in de text edit. We sluiten dan het bestand af met close() om de file descriptor terug te geven aan het besturings systeem.

Laten we nu kijken naar de implementatie van het save() slot.

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

We schrijven de inhoud van de text edit naar het bestand naar welke word gewezen in het QFile object, hiervoor gebruiken we de QTextStram class. De text stream kan een QString direct naar het bestand schrijven; QFile accepteert alleen ruwe data (char) met de write() functies van het QIODevice.

=== Extra informatie |Onderwerp|Hier| ===