View source for Qt for beginners pretty button

{{Cleanup | reason=Auto-imported from ExpressionEngine.}}

[[Category:Qt_for_beginners]]
[[Category:Tutorial]]
[[Category:HowTo]]

= Qt for beginners — A pretty button =

[[Qt_for_beginners_Hello_World|<<< Hello World]] | [[Qt_for_beginners|Summary]] | [[Qt_for_beginners_Signals_and_slots|Signals and Slots >>>]]

'''''Note:''' Unfortunately, the images are no longer available. See the official [http://doc.qt.io/qt-5/gettingstartedqt.html Getting Started with Qt Widgets] page for an alternative tutorial.''

This chapter gives an overview of the widgets modules. It will cover widgets properties, the inheritance scheme that is used in widgets, and also the parenting system.

== A pretty button ==

Now that we have our button, we may want to customize it a bit.

[[Image:http://web.archive.org/web/20130724080021/http://farm9.staticflickr.com/8023/7461280736_3982305f74_z.jpg|buttons]]

Qt objects have a lot of attributes that can be modified using getters and setters. In Qt, if an attribute is called ''foo'', the associated getter and setter will have these signatures

<code>
T foo() const;
void setFoo(const T);
</code>

In fact, Qt extends this system of attributes and getters and setters to something called ''property''. A property is a value of any type that can be accessed, be modified or constant, and can notify a change. The property system is useful, especially in the third part (QML). For now, we will use "attribute" or "property" to do the same thing.

A QPushButton has plenty of properties :
* text
* font
* tooltip
* icon
…

So we can use these to customize the button.

Let's first change the text and add a tooltip
<code>
#include <QApplication>
#include <QPushButton>

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

QPushButton button;
 button.setText("My text");
 button.setToolTip("A tooltip");
 button.show();

return app.exec();
}
</code>

Here is the result

[[Image:http://web.archive.org/web/20130724094319/http://farm9.staticflickr.com/8027/7461415006_e067eeca92_m.jpg|Button with tooltip]]

We can also change the font. In Qt, a font is represented with the [[Doc:QFont]] class. The documentation provides a lot of information. We are especially concerned here with one of the constructors of QFont.

<code>
QFont(const QString &amp; family, int pointSize = –1, int weight = -1, bool italic = false)
</code>

In order to change the font, we have to instantiate a <code>QFont</code> class, and pass it to the <code>QPushButton</code> using <code>setFont</code>. The following snippet will change the font to Courier.

<code>
QFont font ("Courier");
button.setFont(font);
</code>

You can try other parameters of QFont's constructor to reproduce the button that is represented in the first picture in this chapter.

Setting an icon is not very difficult either. An icon is represented with the [[Doc:QIcon]] class. And you can create an icon provided that it has an absolute (or relative) path in the filesystem. I recommend providing the absolute path in this example. But for deployment considerations, you might use the relative path, or better, the resource system.

<code>
QIcon icon ("/path/to/my/icon/icon.png");
button.setIcon(icon);
</code>

On Linux, and some other OS's, there is a convenient way to set an icon from an icon theme. It can be done by using the static method

<code>
QIcon Qicon::fromTheme ( const QString &amp;name, const QIcon &amp;fallback = QIcon());
</code>

For example, in the screenshot at the beginning of this chapter, the smiley comes from the Oxygen KDE icon theme and was set by

<code>
button.setIcon(QIcon::fromTheme("face-smile"));
</code>

== Qt class hierarchy ==

Qt widely uses inheritance, especially in the Widgets module. The following graph shows some of these inheritance

[[Image:http://web.archive.org/web/20130724091512/http://farm9.staticflickr.com/8158/7462350426_b5a7557a46_z.jpg|QObject inheritance tree]]

[[Doc:QObject]] is the most basic class in Qt. Most of classes in Qt inherit from this class. QObject provides some very powerful capabilities like :
* '''object name''' : you can set a name, as a string, to an object and search for objects by names.
* '''parenting system''' (described in the following section)
* '''signals and slots''' (described in the next chapter)
* '''event management'''

Widgets are able to respond to events and use parenting system and signals and slots mechanism. All widgets inherit from QObject. The most basic widget is the [[Doc:QWidget]]. QWidget contains most properties that are used to describe a window, or a widget, like position and size, mouse cursor, tooltips, etc.

'''Remark''' : in Qt, a widget can also be a window. In the previous section we displayed a button, that is a widget, but it appears directly as a window. There is no need of a "QWindow" class.

Nearly all graphical elements inherit from QWidget. We can list for example
* QAbstractButton, a base class for all button types
'''''' QPushButton
'''''' QCheckBox
'''''' QRadioButton
* QFrame, that displays a frame
* QLabel, that displays text or picture

This inheritance is done in order to facilitate properties management. Shared properties like size are cursors can be used on other graphical components, and QAbstractButton provides basic properties that are shared by all buttons.

== Parenting system ==

Parenting system is a convenient way of dealing with objects in Qt, especially widgets. Any object that inherits from [[Doc:QObject]] can have a parent and children. This hierarchy tree makes many things convenient :
* When an object is destroyed, all of its children are destroyed as well. So calling ''delete'' becomes optional in certain cases
* All QObjects have ''findChild'' and ''findChildren'' methods that can be used to search for children of a given object.
* Child widgets in a [[Doc:QWidget]] automatically appear inside the parent widget.

The following snippet that creates a [[Doc:QPushButton]] inside a QPushButton:

<code>
#include <QApplication>
#include <QPushButton>

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

 QPushButton button1 ("test");
 QPushButton button2 ("other", &amp;button1);

 button1.show();

 return app.exec();
}
</code>

[[Image:http://web.archive.org/web/20130724081640/http://farm8.staticflickr.com/7132/7479250714_3335bd48d4.jpg|button_in_button]]

You can also note that when the application is closed, <code>button1</code>, which is allocated on the stack, is deallocated. Since <code>button2</code> has <code>button1</code> as a parent, it is deleted also. You can even test this in Qt Creator in the analyze section, by searching for a memory leak—there won't be any.

There is clearly no benefit in putting a button inside a button, but based on this idea, we might want to put buttons inside a container, that does not display anything. This container is simply the [[Doc:QWidget]]. 

The following code is used to display a button inside a widget

<code>
#include <QApplication>
#include <QPushButton>

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

 QWidget window;
 window.setFixedSize(100, 50);

 QPushButton *button = new QPushButton("Hello World", &amp;window);
 button->setGeometry(10, 10, 80, 30);

window.show();

return app.exec();

}
</code>

Note that we create a fixed size widget (that acts as a window) using ''setFixedSize''. This method has the following signature

<code>
void QWidget::setFixedSize(int width, int height);
</code>

We also positioned the button using ''setGeometry''. This method has the following signature

<code>
void QWidget::setGeometry(int x, int y, int width, int height);
</code>

== Subclassing QWidget ==

Until now, we have put all of our code in the ''main'' function. This was not a problem for our simple examples, but for more and more complex applications we might want to split our code into different classes. What is often done is to create a class that is used to display a window, and implement all the widgets that are contained in this window as attributes of this class.

Inside Qt Creator, you can automatically create a new class with File > New file or project > C++ > C++ Class

[[Image:http://web.archive.org/web/20130724095005/http://farm8.staticflickr.com/7259/7507029228_790c08c46a_b.jpg|Create class dialog]]

Make the class inherit from QWidget, and you should obtain code similar to below

''Header''

<code>
#ifndef WINDOW_H
#define WINDOW_H

#include <QWidget>

class Window : public QWidget
{
 Q_OBJECT
public:
 explicit Window(QWidget *parent = 0);

signals:

public slots:

};

#endif // WINDOW_H
</code>

''Source''

<code>
#include "window.h"

Window::Window(QWidget '''parent) :
 QWidget(parent)
{
}
</code>

You can see that Qt Creator automatically generates a class template. Notice that there are some new elements in the header :
''' The '''Q_OBJECT''' macro.
* A new category of methods : '''signals'''
* A new category of methods : '''public slots'''

All these elements will be explained in the next chapter, and none of them are needed now.
Implementing the window is done in the constructor. We can declare the size of the window, as well as the widgets that this window contains and their positions. For example, implementing the previous window that contains a button can be done in this way :

''main.cpp''

<code>
#include <QApplication>
#include "window.h"

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

Window window;
 window.show();

return app.exec();
}
</code>

''window.h''

<code>
#ifndef WINDOW_H
#define WINDOW_H

#include <QWidget>

class QPushButton;
class Window : public QWidget
{
public:
 explicit Window(QWidget *parent = 0);
private:
 QPushButton *m_button;
};

#endif // WINDOW_H
</code>

''window.cpp''

<code>
#include "window.h"

#include <QPushButton>

Window::Window(QWidget *parent) :
 QWidget(parent)
{
 // Set size of the window
 setFixedSize(100, 50);

// Create and position the button
 m_button = new QPushButton("Hello World", this);
 m_button->setGeometry(10, 10, 80, 30);
}
</code>

Please note that there is no need for writing a destructor for deleting <code>m_button</code>. With the parenting system, when the <code>Window</code> instance is out of the stack, the <code>m_button</code> is automatically deleted.

== See Also ==

A better overview of [[Doc:qpushbutton]] is given in this wiki page [[How_to_Use_QPushButton|How to use QPushButton]]