FormCard About pages

Some Kirigami Addons components let you credit your work and the work of other contributors to your project, and mention the frameworks your application uses: AboutKDEPage and AboutPage.

#About SonicDE

Each button we created in the previous step should open a new page. You add a page by instantiating it as a Component and calling pageStack.layers.push() from its button in Main.qml:

import QtQuick
import QtQuick.Layouts

import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard as FormCard

Kirigami.ApplicationWindow {
    id: root
    width: 600
    height: 700

    Component {
        id: aboutsonicde
        FormCard.AboutKDEPage {}
    }

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            FormCard.FormCard {
                FormCard.FormButtonDelegate {
                    id: aboutSonicDEButton
                    icon.name: "start-here-sonicde"
                    text: i18n("About SonicDE Page")
                    onClicked: root.pageStack.layers.push(aboutsonicde)
                }

                FormCard.FormButtonDelegate {
                    id: aboutPageButton
                    icon.name: "applications-utilities"
                    text: i18n("About Addons Example")
                }

                FormCard.FormButtonDelegate {
                    id: settingsButton
                    icon.name: "settings-configure"
                    text: i18n("Single Settings Page")
                }
            }
        }
    }
}

That's really it! All it takes is instantiating FormCard.AboutKDEPage. The type keeps its upstream name, but on SonicDE it shows an "About SonicDE" page: what SonicDE is, how to report bugs, and how to get involved. (FormCard.AboutKDE is a deprecated name for the same page, and logs a warning.)

#About page

The application's AboutPage is just as simple to use. By default it shows the data set with KAboutData::setApplicationData(aboutData); in main.cpp, so for a simple About page, add the following to your Main.qml:

    Component {
        id: aboutpage
        FormCard.AboutPage {}
    }

and open it from its button:

                FormCard.FormButtonDelegate {
                    id: aboutPageButton
                    icon.name: "applications-utilities"
                    text: i18n("About Addons Example")
                    onClicked: root.pageStack.layers.push(aboutpage)
                }

Note: If your application's desktop file name starts with org.sonicde. or org.kde., the page's "Get Involved" button links to SonicDE on GitHub, unless you set getInvolvedUrl yourself. The "Donate" button only appears if you set donateUrl. See the Kirigami About page.

#Using JSON instead of KAboutData

Instead of letting your About page get its information from KAboutData, you can pass a JSON object directly. For your application icon to show up, you still need QApplication::setWindowIcon() in your main.cpp, or a programLogo key.

Create a MyAboutPage.qml like this:

import org.kde.kirigamiaddons.formcard as FormCard

FormCard.AboutPage {
    title: i18nc("@action:button", "About")
    aboutData: {
        "displayName" : "Addons Example",
        "productName" : "",
        "componentName" : "addonsexample",
        "shortDescription" : "This program shows how to use AboutPage",
        "homepage" : "https://example.com/addonsexample/",
        "bugAddress" : "",
        "version" : "1.0",
        "otherText" : "Optional text shown in the About",
        "authors" : [
            {
                "name" : "John Doe",
                "task" : "Maintainer",
                "emailAddress" : "",
                "webAddress" : "",
                "ocsUsername" : ""
            }
        ],
        "credits" : [],
        "translators" : [],
        "licenses" : [
            {
                "name" : "GPL v3",
                "text" : "Long license text goes here",
                "spdx" : "GPL-3.0"
            }
        ],
        "copyrightStatement" : "© 2023",
        "releases" : [],
        "desktopFileName" : ""
    }

}

Then add the file to ecm_target_qml_sources() in CMakeLists.txt and use the new page in your Main.qml:

    Component {
        id: aboutpage
        MyAboutPage {}
    }

The main JSON object contains the keys displayName, productName, homepage and so on. The keys authors, credits, translators and licenses can each take an array of objects. The objects in authors, credits and translators share the same keys, and each is displayed in its own section, while licenses has the keys name, text and spdx for each license, since a project often has several licenses.

Your application should set at least these keys so it has no empty fields: displayName, version, shortDescription, homepage, copyrightStatement and authors. Also set releases, even to an empty array, or the page logs a warning. You are encouraged to fill in as many keys as possible.