Página acerca de FormCard

Aprenda a crear páginas «Acerca de» para mostrar los créditos de su aplicación.

Los complementos de Kirigami son un conjunto adicional de componentes visuales que funcionan bien en el móvil y en el escritorio, con la garantía de ser multiplataforma. Usan Kirigami internamente para crear sus componentes.

Algunos de estos componentes le permiten mostrar los créditos de su trabajo y del de los colaboradores de su proyecto, así como hacer mención de las infraestructuras que usa su aplicación: AboutKDE y AboutPage.

Acerca de KDE

Cada nuevo botón que creamos en el paso anterior debería abrir una nueva página. Se pueden añadir nuevas páginas instanciándolas como Components y usando posteriormente pageStack.layers.push() en cada botón para cargar la página en nuestro main.qml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import QtQuick 2.15
import QtQuick.Layouts 1.15

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

import org.kde.about 1.0

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

    Component {
        id: aboutkde
        FormCard.AboutKDE {}    // <==========
    }

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            FormCard.FormCard {
                FormCard.FormButtonDelegate {
                    id: aboutKDEButton
                    icon.name: "kde"
                    text: i18n("About KDE Page")
                    onClicked: root.pageStack.layers.push(aboutkde)     // <==========
                }

                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")
                }
            }
        }
    }
}

¡Eso es todo! Todo lo que se necesita es crear una instancia de FormCard.AboutKDE. Debería ver algo parecido a esto tras pulsar el botón «AboutKDE»:

Página acerca de

La «AboutPage» de la aplicación es un poco más compleja, aunque sigue siendo bastante fácil de usar. Añadiremos un nuevo archivo QML que contendrá la información necesaria para nuestra página «acerca de» en el archivo resources.qrc:

<RCC version="1.0">
<qresource prefix="/">
    <file alias="main.qml">contents/ui/main.qml</file>
    <file alias="MyAboutPage.qml">contents/ui/MyAboutPage.qml</file>
</qresource>
</RCC>

Y nuestro contents/ui/MyAboutPage.qml debería tener lo siguiente:

import org.kde.kirigamiaddons.formcard 1.0 as FormCard
import org.kde.about 1.0

FormCard.AboutPage {
    aboutData: About
}

Aquí usamos la información que hemos definido usando KAboutData en nuestro main.cpp. Esto es un breve recordatorio de lo que hay en main.cpp:

qmlRegisterSingletonType(
    "org.kde.about",        // <========== se usa en la importación
    1, 0, "About",          // <========== objeto C++ que se exporta como un tipo QML
    [](QQmlEngine *engine, QJSEngine *) -> QJSValue {
        return engine->toScriptValue(KAboutData::applicationData());
    }
);

El objeto About que hemos exportado al lado QML usando qmlRegisterSingletonType() contiene los datos de KAboutData::applicationData() , y eso es lo que pasamos a la propiedad aboutData.

Por último, añadimos nuestra nueva MyAboutPage a nuestro main.qml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

import QtQuick 2.15
import QtQuick.Layouts 1.15

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

import org.kde.about 1.0

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

    Component {
        id: aboutkde
        FormCard.AboutKDE {}
    }

    Component {
        id: aboutpage
        MyAboutPage {}      // <==========
    }

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            FormCard.FormCard {
                FormCard.FormButtonDelegate {
                    id: aboutKDEButton
                    icon.name: "kde"
                    text: i18n("About KDE Page")
                    onClicked: root.pageStack.layers.push(aboutkde)
                }

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

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

La página «Acerca de» de nuestra aplicación debería parecerse a esto:

Uso de JSON en lugar de KAboutData

Si se está preguntando por qué la página «About» se guarda por separado en lugar de integrarla en main.qml, es porque permite definir un modelo personalizado para la propiedad aboutData.

En lugar de dejar que la página «acerca de» obtenga información de KAboutData , se puede pasar un objeto JSON directamente. Seguirá necesitando usar QApplication::setWindowIcon() en main.cpp para que se muestre el icono de la aplicación.

Cambie MyAboutPage.json a algo similar a esto:

import org.kde.kirigamiaddons.formcard 1.0 as FormCard
import org.kde.about 1.0

FormCard.AboutPage {
    title: i18n("About")
    aboutData: {
        "displayName" : "Addons Example",
        "productName" : "",
        "componentName" : "addonsexample",
        "shortDescription" : "This program shows how to use AboutKDE and AboutPage",
        "homepage" : "https://kde.org",
        "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",
        "desktopFileName" : ""
    }

}

El objeto JSON principal contiene aquí las claves displayName, productName, homepage y demás. Las claves authors, translators y licenses se pueden pasar como array de objetos. Los objetos que se pasan a authors, credits y translators comparten las mismas claves, por lo que cada uno se puede mostrar en su propia sección, mientras que licenses incluye las claves name, text y spdx para cada licencia que se añada, ya que es común que un proyecto incluya múltiples licencias.

Estas claves son opcionales, aunque se espera una cantidad mínima de claves razonable para que la aplicación no tenga en blanco los campos displayName, version, description, homepage, copyrightStatement y authors. No obstante, se recomienda que se rellenen tantos como sea posible.

Previous
Introducción a los complementos de Kirigami
Next
Delegados de Form en sus páginas de preferencias