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

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

What I tried

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

score 1 · Answer 1 · answered Nov 28 '13 at 01:50

1

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

answered Nov 28 '13 at 01:50

Scott

552
3
7

this aspect works. The code up there is minified. maybe I should clarify that. what I ask is to use this in the tab – Igbanam Nov 28 '13 at 02:17

score 1 · Accepted Answer · answered Nov 28 '13 at 11:00

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

Good solutions, especially using a sheet. A comment on opening/displaying a Tab in response to an element other than the Tab button in the ActionBar. There are a number of applications that I use and like very much that do this, and even though I've used them for a while I still find them confusing. Without selecting a different tab the user is suddenly looking at a new one. The Sheet animation sliding in serves to cue the user that the action they selected involves a whole new page to interact with. This helps keep the user in tune with your application. — Richard, Nov 28 '13 at 19:23

How to populate tab with an attachedObject

2 Answers2