How to populate tab with an attachedObject

Question

I have a TabbedPane with two tabs. The first has ListView which opens a message composing view when an element in the list view is selected.

TabbedPane {
  attachedObjects: [
    ComponentDefinition {
      id: cmp_page
      // ... other UI elements for this page
    }
  ]
  Tab { // First tab
    NavigationPane {
      id: tmp_nav
      Page {
        ListView {
          onTriggered: {
            var pg = cmp_page.createObject()
            tmp_nav.push(pg)
          }
        }
      }
    }
  }
  Tab { // Second Tab whose contents should be "cmp_page"
    id: should_be_cmp_page
    // ... UI elements, the same in cmp page
  }
}

I am trying to get rid of this duplication to

1. make my code smaller
2. reduce the number of signal-slot handling I have to do

What I tried

1. opening should_be_cmp_page in the onTriggered method in the first tab
   • error: TypeError: Result of expression 'should_be_cmp_page.createObject' [undefined] is not a function.
2. considered but not attempted: create the attached object in the tab view; but this is not a NavigationPane and I don't think making it one for this sole purpose is the most ideal solution.

Answer 1

There are 2 solutions I can suggest for this.

The "easier" solution is to use a sheet for the message composing view instead of a tab. This can be opened from anywhere and you can then just pass the values into the sheet.

To use the tab requires some c++ code. I have recently had a similar issue where when a user taps on an element in another tab it needs to open the weather tab and show a 5 day forecast on the weather tab. However qml does not support opening a tab.

I made the following method in my c++:

ApplicationUI.cpp

void ApplicationUI::openTab(QString tabName) {
Tab *mTab = tabbedPane->findChild<Tab*>(tabName);

if (mTab == 0) {
    qDebug() << "Error: unable to open tab " << tabName;
    return;
}

tabbedPane->setActiveTab(mTab);
}

ApplicationUI.hpp

public:
    Q_INVOKABLE void openTab(QString tabName);

Then you could do something like this:

Tab { // First tab
    NavigationPane {
       id: tmp_nav
       Page {
            ListView {
                 onTriggered: {
                     var pg = cmp_page.createObject();
                     messageNav.push(pg);
                 }
            }
       }
    }

}


Tab { // Second Tab whose contents should be "cmp_page"
    NavigationPane {
         id: messageNav
    }
}

Answer 2

You can't just call the createObject method. You have to assign it to a variable.

ListView {
      onTriggered: {
        var page = cmp_page.createObject()
        tmp_nav.push(page)
      }
    }