KDE Application Tutorials: Building the Qt Tutorials

Next Previous Table of Contents

### 3. Building the Qt Tutorials

### 3.1 Step One: Hello World!

As the previous chapter explains, we created a project called `MyWidget`- now, when looking at the first tutorial page of the Qt documentation, you will see that the first application only uses a `main()` function. Therefore, we only have to change the given `main()` function of our generated project to get the first tutorial step running.

To access the `main()` function, select it from the classviewer's "Globals" folder, which contains a subfolder for "Functions" where all non-class functions are listed. This will open the file `main.cpp` in the "C/C++ Files" window and the editing cursor is already set in front of the first line of `main()`.

#### What to change first

We could start changing the given code towards the desired one which is listed in the tutorial- but it can be even easier. Select the contents of the `main()` function with the mouse or by holding the Shift-key pressed while selecting the lines with the down-arrow key. Then select "Cut" from the "Edit" menu or press the DEL-key to remove the selected code. This will clear the main function and we can start from scratch to build our first tutorial.

#### Entering the tutorial code

Now, to insert the code from the tutorial, you could first read it carefully and try to remember which line contained which code. Then, after reading the tutorial's line-by-line description, you could use it as an example to write the tutorial by yourself.

Those who want to go the easy way: select the contents of the listed `main()` function in the documentation browser and press the "Copy"-icon from the toolbar. Optionally, you could use the context-menu or the according entry in the "Edit" menu. This will copy the selection into the clipboard and, after switching back to the sourcecode window, can be inserted with "Paste" (either from the context menu, the toolbar icon or the according entry in the "Edit" menu).

Finally, add the according header files outside the `main()` function:

> `

>     #include <qapplication.h>
>     #include <qpushbutton.h>

> `

That's it ! The source code is done for your first tutorial application.

#### Building Hello World!

To build the first tutorial, select "Make" from the "Build" menu or press the according toolbar icon. Optionally, you could choose "Execute" as well, which results in running the application after the build was successful.

If the build stops due to an error, be assured the fault was on the programmer's side, not on the tutorial ! This would be sad to search for an error just when you decided to program for KDE and/or Qt, but you can use this to train yourself to use KDevelop. Now, to find an error, you have two options: either select the according error message in the output window, which will bring you to the according line the error occured, or press the F4 key; optionally you could use the "Next Error" entry in the "View" menu.

#### Exercises

You may ask "Exercises ? This one was so simple, I don't need to excercise !", but be assured, things will get more complicated. This one was the easiest example, but the more complex they will get the more thinking is asked on your side to understand and follow the tutorial steps. Also the excercises will enable you to learn how to acutally use KDevelop and it's features.

To teach yourself more with the first tutorial, you should try to do the following changes to the given code and see how this will influence the application behavoir:

1. change the pushbutton to a `QLabel`.
2. use `setText()` instead of directly setting the text in the pushbutton's constructor
3. use `QPushButton::resize ( const QSize & s )` instead of setting the size by width and height directly. Create a `QSize` instance first that contains the size
4. play with the sizes to see which is width and heigth

### 3.2 Step 2 and 3: Extensions

The tutorial steps 2 and 3 are extending the facilities of the first tutorial. There, you will learn about signals and slots as well as parent-child relationships between widgets.

Now, why is it important to learn about that ? Well, the signals and slots are building the technology which make the difference when comparing the Qt library to other widget library. Whenever you will hit an implementation problem where you want to communicate between objects, this will make your work incredible short and nothing serious will happen if something went wrong, even misconnections don't lead to a segmentation fault. This is the strength of the Qt library and a lot of KDE/Qt developer's won't want to miss it anymore because of it's flexibility. Understanding the signal/slot mechanism therefore is essential to create any KDE/Qt application.

Another thing to watch out for is the fact that the button terminates the `QApplication` instance by calling `quit()`. You will meet `quit()` again when working with `QApplication`'s KDE-pendant, `KApplication`

### 3.3 Writing your own Widgets

Now, after having successfully modified and extended the `main()` function, you will hit the point to create a new widget- a unique widget that only can be constructed with the class you're about to write in step 4. Actually, the class has been created by the application wizard for you, so there is not much to add- just that you have to insert the code that lesson 4 places in the `main.cpp` file into the `MyWidget` classes' header and implementation file. Fortunately, you only have to add the implementation to the constructor code.

To access the constructor, select it from the classviewer. This will automatically bring you to the implementation where you have to add the code.

Here, you only have to watch out for the include of `qfont.h`- `QFont` is only used in the constructor code of `MyWidget`. Therefore, add `#include <qfont.h>` to the top of the `mywidget.cpp` file.

To run the new application, just hit "Execute". This will result in compling the changes after an autosaving.

### 3.4 Extending the Widget Class

Now, in lesson 5 the target is to extend the widget class. Therefore, you will learn about virtual functions as well. Here, the `resizeEvent()` is reimplemented. What is important to learn here (besides extending a class) is that Qt works with user events by virtual functions that take an event as a parameter. Therefore, you should make yourself comfortable with the following classes of the Qt library:

- QEvent
- QChildEvent
- QCloseEvent
- QFocusEvent
- QKeyEvent
- QMouseEvent
- QMoveEvent
- QPaintEvent
- QResizeEvent
- QTimerEvent

Whenever writing custom widgets, especially view areas of applications, you will have to overwrite the default implementation of the widget's event-methods by your own for certain events that have to be processed. Those would be e.g.

`virtual void mousePressEvent ( QMouseEvent * )` for processing a mouse event to pop up a context menu. In the implementation, you have to insert a formal parameter into the function header, most developers either use `event` or just `e` as the parameter name.

Then, you can process the event's parameters. For a `QMouseEvent`, you have to ask if the right, middle or left mouse button was the one that caused the event.

### 3.5 Adding a new Class

With lesson 6, you will have to add a class to the tutorial application. Now, normally you would think "I just will create a header file and an implementation file- then I'm done"- but KDevelop will make it easier for you. When adding a class, you should always use the Classgenerator. This will do all the work for you so you just will have to add the specific code.

To add a class with the Classgenerator, choose "Project"-"New Class", which will open a dialog to enter all needed values for the class you want to add. The first thing we have to insert is the classname. The tutorial name this `LCDRange`, so this has to be inserted first. Then proceed to the baseclass. The baseclass is the one that the new class inherits. Looking at the tutorial (Qt 1.42), this is `QWidget`. Now, as most GUI classes to add would inherit `QWidget`, the Classgenerator makes it even easier. Leave the baseclass empty and instead check "QWidget child class" in the "Additional Options" section. This will automatically add the required `Q_OBJECT` macro to the headerfile to add slots and signals later (which is required in chapter 7).

As the filenames are automatically inserted, you don't have to care for that. The only thing that we would suggest adding is the documentation. It is always a good style to add a desciptive documentation to the class, especially as the classname `LCDRange` doesn't inform you specifically about the purpose of the widget.

### 3.6 Step 7-14

For the rest of the tutorial steps, you are prepared and know everything you have to know- adding the classes required and doing the changes.

After each change you should do a new build and check your code for errors. Run the application and follow it's execution; additionally, you should play with KDevelop's options for "Build"- execute the application with a commandline argument such as --geometry and debug it with KDbg in the Tools-window. Then you should be able to proceed with the Qt examples that are provided with Qt. In the next chapter, you will be introduced into development for KDE 2 by an example application KScribble, which is a small drawing application that will show you the concepts of application design and how to implement you own program.

Next Previous Table of Contents