Writing generic QML ListView that can be created to reference different instances of a c++ data class.

Dolphin

I have a QtQuick 2 application with a c++ back end. The app needs to display various different lists with the data being processed in the c++. I have a c++ class that handles everything to do with the lists (a load of link lists) and passes QML a QList of strings to display in each list. If the user presses key 2 the 2nd item in the list is found by the c++ and the relevant list is displayed by the QML etc.

I need to be able to make this generic. Obviously in the c++ I just create multiple versions of my object holding the differing data (the app loads different addons to do different things and each would need its own version of the c++ class). So, do I get each addon to pass each instance to QML with the same name ("menuManager")? If so how would the QML differentiate between A:menuManager, B:menuManager, C:menuManager? My assumption is that passing B would lose the reference to A.

How can I make the code generic so I can reference A, B, C without either of them knowing about the other (separate dll's). If I call the code below from the main.qml in A, B and C as a component how can I associate each with the correct c++ so I get the same functionality with each but from different source data. (The application will flip between A, B and C so not reloading things is best).

@
import QtQuick 2.0

Rectangle
{
id: theMenu
property double fontSize: menuManager.menuFontPointSize
property double menuWidth: menuManager.menuWidth
property string menuTitle: menuManager.menuTitle
property double menuItemHeight: 0

Component
{
    id: menuEntryDelegate

    Rectangle
    {
        id: menuItemContainer
        width: menuEntry.width
        height: menuEntry.height * 1.25

        property double fontSize: theMenu.fontSize
        property double menuWidth: theMenu.menuWidth
        property double menuItemHeight: theMenu.menuItemHeight//TBD - listview needs the height

        state: ListView.isCurrentItem ? "selected" : "notselected"

        Text
        {
            id: menuEntry
            font.pointSize: fontSize
            width: menuWidth
            wrapMode: Text.WordWrap
            text: displayText
            clip: true

        }

        states:
        [
            State
            {
                name: "selected"
                PropertyChanges
                {
                    target: menuItemContainer
                    color: "#FAFCD9"
                }

...
...
]

    }
}

Rectangle
{
    id: menuContainer
    width:theMenu.menuWidth
    height: parent.height
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: parent.top

    property string menuTitle: theMenu.menuTitle

    ListView
    {
        id: menuHolder
        model: menuModel
        anchors.fill: parent
        opacity: 1

        clip: true

        property string menuTitle: ""

        header: Rectangle
        {
            width: menuHolder.width
            height: 50
            color: "#2A51A3"


           Text
            {
               id: header
               anchors.centerIn: parent

               text: menuTitle//menuManager.menuTitle
               font.pointSize: menuManager.menuFontPointSize
               color: "white"
               wrapMode: Text.WordWrap
            }
        }

        delegate: menuEntryDelegate
        focus: true


        Keys.onPressed:
        {
......
            //Ways to select a menu item
            else if((event.key >= Qt.Key_1 && event.key <= Qt.Key_9)
                    || event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
            {
                if(event.key >= Qt.Key_1 && event.key <= Qt.Key_9)
                {
                    menuHolder.currentIndex = event.key  - Qt.Key_1;
                }

                menuManager.displayMenu(menuHolder.currentIndex);
                theMenu.fontSize = menuManager.menuFontPointSize
            }
        }
    }
}

}
@

tedmiddleton

I'm not quite following you here - so do you want to simultaneously display data from A, B, and C? Isn't that going to mean having separate QML root contexts anyways?

Do you want to display them all in the same root context, but at different times in the program's execution? In that case, can you unbind and rebind data A, B, and C from the root context?

Update: Forum Guidelines & Code of Conduct

Writing generic QML ListView that can be created to reference different instances of a c++ data class.