status-desktop/docs/tutorial_custom_component.md

Creating a Custom QML component

Creating a custom element typically involves

• creating a new QML file
• adding that QML file in a qmldir file
• adding that QML file to the project nim-status-client.pro file (automatic if done in QT Creator)

The easiest way is to do it in QT creator although this can be done manually as well, if not using QT Creator make sure the files are added in the nim-status-client.pro.pro file.

step 1 - create folder

In QT creator, go to app/AppLayouts right click, and select "New folder", name the folder MySection

step 2 - create QML file

In MySection, right click, and select "Add New", select "QT" -> "QML File (Qt Quick 2)", as a name put MyQMLComponent.qml and create the file.

Add the desired content, for example

import QtQuick 2.0

Item {
    Text {
        text: "hello"
    }
}

if not using QT Creator, make sure the files are added in the nim-status-client.pro.pro file, for e.g:

 DISTFILES += \
    app/AppLayouts/MySection/MyQMLComponent.qml \

step 3 - add the component to qmldir

In app/AppLayouts/ edit qmldir and add the file

BrowserLayout 1.0 Browser/BrowserLayout.qml
ChatLayout 1.0 Chat/ChatLayout.qml
NodeLayout 1.0 Node/NodeLayout.qml
ProfileLayout 1.0 Profile/ProfileLayout.qml
WalletLayout 1.0 Wallet/WalletLayout.qml

MyQMLComponent 1.0 MySection/MyQMLComponent.qml

This ensures that when app/AppLayouts/ is imported, the component MyQMLComponent will point to the component at MySection/MyQMLComponent.qml

step 4 - use the component

Note that AppMain.qml already imports AppLayouts

import "./AppLayouts"

which makes the MyQMLComponent available

In the section created in the Adding a sidebar section, replace it with this component

StackLayout {
    ...

    MyQMLComponent {
    }
}