Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

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

    QML and Qt Quick
    2
    2
    823
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      Dolphin last edited by

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

      }
      @

      1 Reply Last reply Reply Quote 0
      • T
        tedmiddleton last edited by

        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?

        1 Reply Last reply Reply Quote 0
        • First post
          Last post