Página acerca de

Information about your application

Kirigami.AboutPage le permite tener una página que muestra información sobre el copyright de la aplicación junto a la lista de colaboradores y cierta información sobre la plataforma en la que se está ejecutando.

En primer lugar, vamos a editar nuestro archivo main.cpp de los tutoriales anteriores.

main.cpp

 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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 #include <QApplication> #include <QQmlApplicationEngine> #include <QtQml> #include <QUrl> #include <KAboutData> #include <KLocalizedContext> #include <KLocalizedString>  int main(int argc, char *argv[]) {  QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);   QApplication app(argc, argv);   KLocalizedString::setApplicationDomain("helloworld");  QCoreApplication::setOrganizationName(QStringLiteral("KDE"));  QCoreApplication::setOrganizationDomain(QStringLiteral("kde.org"));  QCoreApplication::setApplicationName(QStringLiteral("Hello World"));   if (qEnvironmentVariableIsEmpty("QT_QUICK_CONTROLS_STYLE")) {  QQuickStyle::setStyle(QStringLiteral("org.kde.desktop"));  }   KAboutData aboutData(  QStringLiteral("helloworld"),  i18nc("@title", "Hello World"),  QStringLiteral("1.0"),  i18n("Hello world application"),  KAboutLicense::GPL,  i18n("(c) 2021"));   aboutData.addAuthor(  i18nc("@info:credit", "Your name"),  i18nc("@info:credit", "Author Role"),  QStringLiteral("your@email.com"),  QStringLiteral("https://yourwebsite.com"));   // Set aboutData as information about the app  KAboutData::setApplicationData(aboutData);   // Register a singleton that will be accessible from QML.  qmlRegisterSingletonType(  "org.kde.example", // How the import statement should look like  1, 0, // Major and minor versions of the import  "About", // The name of the QML object  [](QQmlEngine* engine, QJSEngine *) -> QJSValue {  // Here we retrieve our aboutData and give it to the QML engine  // to turn it into a QML type  return engine->toScriptValue(KAboutData::applicationData());  }  );   // Load an application from a QML file  QQmlApplicationEngine engine;   engine.rootContext()->setContextObject(new KLocalizedContext(&engine));  engine.load(QUrl(QStringLiteral("qrc:/main.qml")));   if (engine.rootObjects().isEmpty()) {  return -1;  }   return app.exec(); } 

En el archivo main.cpp incluimos KAboutData, un componente principal de KDE Frameworks que nos permite guardar información sobre nuestra aplicación. Esta información la pueden reutilizar otros componentes de KDE Frameworks. Creamos una instancia de un nuevo objeto aboutData con su constructor predeterminado, que es bastante completo, y añadimos información sobre el autor.

After all the required information has been set, we call KAboutData::setApplicationData() to initialize the properties of the QApplication object.

A continuación creamos un qmlRegisterSingletonType(). Esto se usa para permitirnos importar el código C++ como un módulo en nuestro main.qml con import org.kde.example 1.0.

Su primer argumento es el URI que se usará para la importación; el segundo y tercer argumentos son, respectivamente, las versiones mayor y menor; el cuarto es el nombre del tipo, el nombre que llamaremos para acceder a nuestro tipo About; y el último es una referencia al objeto de C++ que se expone a QML. En el caso de este último, usamos una lambda para instanciar el aboutData de nuestra aplicación en el mismo lugar.

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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 import QtQuick import QtQuick.Layouts import QtQuick.Controls as Controls import org.kde.kirigami as Kirigami  import org.kde.example 1.0  Kirigami.ApplicationWindow {  id: root   title: i18nc("@title:window", "Day Kountdown")   globalDrawer: Kirigami.GlobalDrawer {  isMenu: true  actions: [  Kirigami.Action {  text: i18n("Quit")  icon.name: "gtk-quit"  shortcut: StandardKey.Quit  onTriggered: Qt.quit()  },   Kirigami.Action { // <==== Action to open About page  text: i18n("About")  icon.name: "help-about"  onTriggered: pageStack.layers.push(aboutPage)  }  ]  }   Component { // <==== Component that instantiates the Kirigami.AboutPage  id: aboutPage   Kirigami.AboutPage {  aboutData: About  }  }   ListModel {  id: kountdownModel  }   AddEditSheet {  id: addEditSheet  onAdded: kountdownModel.append({  "name": name,  "description": description,  "date": Date.parse(kdate)  });  onEdited: kountdownModel.set(index, {  "name": name,  "description": description,  "date": Date.parse(kdate)  });  onRemoved: kountdownModel.remove(index, 1)  }   function openPopulatedSheet(mode, index = -1, listName = "", listDesc = "", listDate = "") {  addEditSheet.mode = mode  addEditSheet.index = index;  addEditSheet.name = listName  addEditSheet.description = listDesc  addEditSheet.kdate = listDate   addEditSheet.open()  }    pageStack.initialPage: Kirigami.ScrollablePage {  title: i18nc("@title", "Kountdown")   actions: [  Kirigami.Action {  id: addAction  icon.name: "list-add"  text: i18nc("@action:button", "Add kountdown")  onTriggered: openPopulatedSheet("add")  }  ]   Kirigami.CardsListView {  id: layout  model: kountdownModel  delegate: KountdownDelegate {}  }  } } 

En primer lugar, usamos la importación que definimos en el archivo main.cpp; es decir, org.kde.example. A continuación añadimos una Kirigami.Action a nuestro cajón global, que nos enviará a la página «Acerca de», y creamos un componente con una Kirigami.AboutPage en él, que espera un objeto KAboutData::applicationData(). Ya expusimos precisamente eso en nuestro main.cpp y lo llamamos About, para poder pasarlo aquí.

CMakeLists

 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 cmake_minimum_required(VERSION 3.16) project(helloworld)  find_package(ECM REQUIRED NO_MODULE)  set(CMAKE_MODULE_PATH ${ECM_MODULE_PATH})  include(KDEInstallDirs) include(KDECMakeSettings) include(KDECompilerSettings NO_POLICY_SCOPE)  find_package(Qt6 REQUIRED NO_MODULE COMPONENTS  Core  Quick  Test  Gui  QuickControls2  Widgets )  find_package(KF6 REQUIRED COMPONENTS  Kirigami2  I18n  CoreAddons )  add_subdirectory(src)  feature_summary(WHAT ALL INCLUDE_QUIET_PACKAGES FATAL_ON_MISSING_REQUIRED_PACKAGES) 

En el archivo CMakeLists.txt de nuestra carpeta principal, nos aseguramos de tener CoreAddons en la llamada a find_package(). Es necesario para KAboutData.

 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 add_executable(helloworld)  target_sources(helloworld PRIVATE  main.cpp  resources.qrc )  target_link_libraries(helloworld  Qt6::Quick  Qt6::Qml  Qt6::Gui  Qt6::QuickControls2  Qt6::Widgets  KF6::Kirigami2  KF6::I18n  KF6::CoreAddons ) 

En el archivo CMakeLists.txt del directorio src/ no hace falta nada, ya que hemos creado una instancia de aboutData en el lugar.

Ejecución de la aplicación

Ahora, si ejecuta la aplicación y lanza la acción "Acerca de" del cajón global, debería ver nuestra página «Acerca de».

Captura de pantalla de la página acerca de Kirigami

Descubriendo main.cpp

Conectar modelos de C++ a la interfaz de usuario QML