advanced-add_about_page.md 3.35 KB
Newer Older
1
2
3
4
5
---
title: About Page
weight: 204
description: Informations about your application
group: advanced
6
7
aliases:
  - /docs/kirigami/advanced-add_about_page/
8
9
10
11
---

The About Page allows you to have a page that shows the copyright notice of the application together with the contributors and some information of which platform it's running on.

Felipe Kinoshita's avatar
Felipe Kinoshita committed
12
First, we are going to create two files in the `src/` directory called `about.cpp` and `about.h`.
13

Felipe Kinoshita's avatar
Felipe Kinoshita committed
14
### about.h
15
16

{{< readfile file="/content/docs/use/kirigami/advanced-add_about_page/src/about.h" highlight="cpp" >}}
17

Felipe Kinoshita's avatar
Felipe Kinoshita committed
18
In the `.h` file we create this class `AboutType` which is inherited from [QObject](https://doc.qt.io/qt-5/qobject.html).
19
20
21
22
23


The `Q_OBJECT` macro tells the compiler that this class uses own signals and slots, the `Q_PROPERTY` macro behaves like a class data member, but it has additional features, it will allow our QML code to have access to this class.


Felipe Kinoshita's avatar
Felipe Kinoshita committed
24
The `aboutData` method will return the application data from `KAboutData`.
25

Felipe Kinoshita's avatar
Felipe Kinoshita committed
26
### about.cpp
27

28
{{< readfile file="/content/docs/use/kirigami/advanced-add_about_page/src/about.cpp" highlight="cpp" >}}
29

Felipe Kinoshita's avatar
Felipe Kinoshita committed
30
In the `.cpp` file we just include the `.h` file.
31
32
33

### main.cpp

34
{{< readfile file="/content/docs/use/kirigami/advanced-add_about_page/src/main.cpp" highlight="cpp" >}}
35
36
37
38
39
40
41

In the cpp file we include `KAboutData` and the `.h` file we just created, [KAboutData](docs:kcoreaddons;KAboutData) is a core KDE Frameworks component that stores information about an application, which can then be reused by many other KDE Frameworks components. We instantiate a new `KAboutData` object with its fairly complete default constructor and add author information.


After all the required information has been set, we call `KAboutData::setApplicationData` to initialize the properties of the [QApplication ](https://doc.qt.io/qt-5/qapplication.html) object.


Felipe Kinoshita's avatar
Felipe Kinoshita committed
42
43
44
After the QML Engine definition, we create a [qmlRegisterSingletonType](https://doc.qt.io/qt-5/qqmlengine.html#qmlRegisterSingletonType), the first argument is a URI, basically a package name, the second and third arguments are major and minor versions respectively, the fourth is the type name, the name that we will call when accessing the `AboutType` methods.

In the `qmlRegisterSingletonType` lambda we just return a new `AboutType` object;
45
46
47
48


### main.qml

49
{{< readfile file="/content/docs/use/kirigami/advanced-add_about_page/src/contents/ui/main.qml" highlight="qml" >}}
50

51
First, we import the package we defined in the `main.cpp` file, add a `Kirigami.Action` to our global drawer that will send us to the about page and create a component with a `Kirigami.AboutPage` in it, the About Page only have one property: `aboutData`, we then pass `AboutType.aboutData` to it.
52
53
54
55


### CMakeLists

56
{{< readfile file="/content/docs/use/kirigami/advanced-add_about_page/CMakeLists.txt" highlight="cmake" >}}
57

58
In the CMakeLists.txt file in our top-level folder, add `CoreAddons` to the `find_package` module. 
59

60
{{< readfile file="/content/docs/use/kirigami/advanced-add_about_page/src/CMakeLists.txt" highlight="cmake" >}}
61

62
In the CMakeLists.txt file in the ‘src’ directory, add `about.cpp` to the `add_executable` module and `KF5::CoreAddons` to the `target_link_libraries` module.
63

64

65
66
67
68
69
## Running the application

Now if you run your application and trigger the "About" action in the global drawer you should see our about page.

![Screenshot of the Kirigami About Page](about-page.png)