About Page
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.
First, we are going to create two files in the src/ directory called about.cpp and about.h.
about.h
#pragma once
#include <QObject>
#include <KAboutData>
class AboutType : public QObject
{
Q_OBJECT
Q_PROPERTY(KAboutData aboutData READ aboutData CONSTANT)
public:
[[nodiscard]] KAboutData aboutData() const
{
return KAboutData::applicationData();
}
};
In the .h file we create this class AboutType which is inherited from QObject.
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.
The aboutData method will return the application data from KAboutData.
about.cpp
#include "about.h"
In the .cpp file we just include the .h file.
main.cpp
...
#include <KAboutData>
#include "config-helloworld.h"
#include "about.h"
int main(int argc, char *argv[])
{
...
KAboutData aboutData(
// The program name used internally.
QStringLiteral("helloworld"),
// A displayable program name string.
i18nc("@title", "Hello World"),
// The program version string.
QStringLiteral(HELLOWORLD_VERSION_STRING),
// Short description of what the app does.
i18n("Hello world application"),
// The license this code is released under.
KAboutLicense::GPL,
// Copyright Statement.
i18n("(c) 2021"));
aboutData.addAuthor(i18nc("@info:credit", "Your name"), i18nc("@info:credit", "Author Role"), QStringLiteral("your@email.com"), QStringLiteral("https://yourwebsite.com"));
KAboutData::setApplicationData(aboutData);
QQmlApplicationEngine engine;
qmlRegisterSingletonType<AboutType>("org.kde.helloworld", 1, 0, "AboutType", [](QQmlEngine *engine, QJSEngine *scriptEngine) -> QObject * {
Q_UNUSED(engine)
Q_UNUSED(scriptEngine)
return new AboutType();
});
...
}
In the cpp file we include KAboutData and the .h file we just created,
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.
We also include this config-helloworld.h file which gives us this HELLOWORLD_VERSION_STRING variable that we’ll set later in this tutorial.
After all the required information has been set, we call KAboutData::setApplicationData to initialize the properties of the QApplication object.
After the QML Engine definition, we create a 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;
main.qml
...
import org.kde.helloworld 1.0
Kirigami.ApplicationWindow {
...
globalDrawer: Kirigami.GlobalDrawer {
...
actions: [
...
Kirigami.Action {
text: i18n("About")
icon.name: "help-about"
onTriggered: pageStack.layers.push(aboutPage)
}
...
]
}
Component {
id: aboutPage
Kirigami.AboutPage {
aboutData: AboutType.aboutData
}
}
}
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 Conrtoller.aboutData to it.
CMakeLists
...
project(helloworld)
set(PROJECT_VERSION "1.0")
...
include(ECMSetupVersion)
include(ECMGenerateHeaders)
include(ECMPoQmTools)
...
ecm_setup_version(${PROJECT_VERSION}
VARIABLE_PREFIX HELLOWORLD
VERSION_HEADER "${CMAKE_CURRENT_BINARY_DIR}/src/config-helloworld.h"
)
...
find_package(KF5 ${KF_MIN_VERSION} ... CoreAddons)
...
In the CMakeLists.txt file in our top-level folder, add CoreAddons to the find_package module. You’ll also want to add these three ECM includes which will allow us to use the ecm_setup_version function, this function let’s use the PROJECT_VERSION variable in our code so we only need to change one variable when bumping up versions.
...
add_executable(helloworld main.cpp controller.cpp resources.qrc)
target_link_libraries(helloworld ... KF5::CoreAddons)
In the CMakeLists.txt file in the ‘src’ directory, add controller.cpp to the add_executable module and KF5::CoreAddons to the target_link_libraries module.
Running the application
Now if you run your application and trigger the “About” action in the global drawer you should see our about page.
