Qt Lab #1

Eric Lecolinet - Télécom Paris - Dept. INFRES

Useful links

1st Step

Start QtCreator (through the Developpement menu or by typing qtcreator & in the Terminal), then select:

Five file have then been created by QtCreator :

Look at the contents of these files. The only ones we'll need to edit today are those of the MainWindow class, i.e. mainwindow.h and mainwindow.cpp. The file main.cpp is standard and usually does not need to be amended. Other files will then be created by QtCreator (the executable, the .o, moc_ * files, etc.) either in this directory, or in a directory hidden depending on the version and configuration of QtCreator.

2nd Step: Adding widgets to the main window

The MainWindow class derives from QMainWindow. It will allow you to implement the functionalities decribed in the next questions. At the moment it doesn't do much more than QMainWindow. To see what happens, compile and run by clicking on the green arrow (bottom left) of QtCreator. Notice the Compilation bar a little hihgher. It is gray during compilation, green if the compilation was successful and red otherwise. Clicking on this bar makes the errors appear (or disappear).

Create a menu bar and a "File" menu containing 3 items for activating the "Open ...", "Save ..." and "Quit ..." commands. Also create a toolbar allowing to activate the same commands. Use QAction and specify appropriate hot keys and tooltips (we will assume that we have three .png files containing the images of the icons of these commands). Finally, change the source code so that the central area of the MainWindow will display a QTextEdit (remember to include the corresponding header and declare variable appropriately). You can now compile and run the program.

Note: QtCreator automatically adds ui->setupUi(this); in the MainWindow constructor. This serves to instantiate the graphical interface created by QtDesigner . As for the moment we do not use it, you will need to comment this line and create a status bar by calling the statusBar() method of the QtMainWindow class.

3rd Step: Add ressources

Download the .png files containing the icon images in a sub-directory of your Qt project (you can for example download these icon files). Make sure that the icons specified in the source code have the same names as the files, then click on:

A resource file ( .qrc extension) is then created. Right click on the .qrc file and select "Open in Editor" to edit it, then add the images. Finally, set the Prefix as follows: If the icon names start with : and are the same as the paths of the images as shown in the editor the prefix must be /. If they only contain the image names without the image directory it should be /your_image_directory (if there is one).
Recompile and check that the menu bar actually displays the icons

4th Step: Defining and connecting the slots

Declare and implement the openFile(), saveFile() and quitApp () slots. For now they will just display a message (e.g. the name of the slot) on the console (NB: if you use std::cout and std::endl do not forget to include the iostream header. Alternately you can also use qDebug(). Connect the slots to the corresponding actions, then compile and test the program.

5th Step: Dialog boxes for opening and saving a file

Implement the openFile() and saveFile () slots so that each of them open a dialog box. These dialog boxes will serve to select the a file, either for reading the text or for writing it. You will typically use the QFileDialog widget for this purpose. Retrieve the name of the selected file and display it on the console.


6th Step: Open / save an HTML page

Add source code in the openFile () slot to make it read the file selected in the Open dialog box and display its content in the QTextEdit . For this purpose, you can use a QFile and a QTextStream (note that it's easier to read the entire content of the file in a single step). The textual content (a QString) can then be set to the QTextEdit through its setHtml () method. This method assumes the content is in HTML (we could use setPlainText() for plain text).

Conversely, following the same principle, make the saveFile () slot save the content of the QTextEdit widget in the file selected through the Save dialog box. Note: you can use the << operator).

8th Step: Prompt for confirmation when exiting the application

First, make the Quit button to open a QMessageBox (with "Yes" and "No" buttons) allowing the user to ask for confirmation before exiting the application. However, this is not sufficient because the user can also exit the program by clicking on the close button of the window bar (usually a cross, a red button, etc.) Change MainWindow so that this action will have the same effect as when clicking on the Quit button (i.e. open the QMessageBox)

Note: this will require redefining the QWidget::closeEvent() method.

Eric Lecolinet - http://www.telecom-paristech.fr/~elc - Telecom ParisTech