[tabs] + [header sections] Cannot add Tabs programmatically

This is a limitation in the VisualItemModel upon which Tabs is based and will need to be resolved with a feature request upstream within Qt. VisualItemModel does not currently have the ability to append, delete etc.
The only workaround I have found so far is to create the whole Tabs container and all tabs in a function using Qt.createQmlObject. Horribly hackey and the string gets unmanageable very quickly but does work.
My current working code can be seen here: http://pastebin.com/dmyPkyyX (see the fillTabs function)

It would be nice to be able use ListModel instead of VisualItemModel. You can do this with with a ListView.

    ListModel {
        id: pageModel

        ListElement {
            title: "Page 1"
            page: "TextPage.qml"
        }
        ListElement {
            title: "Page 2"
            page: "ListPage.qml"
        }
        ListElement {
            title: "Page 3"
            page: "WebPage.qml"
        }
    }

    ListView {
        id: pager
        anchors { fill: parent; topMargin: parent.indicatorHeight}
        model: root.pageModel
        delegate: Loader {
            width: pager.width
            height: pager.height
            source: page
        }
        preferredHighlightBegin: 0
        preferredHighlightEnd: 0
        highlightRangeMode: ListView.StrictlyEnforceRange
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
    }

When I tried a work-around for bug 1167568, I tried Qt.createQmlObject - added tabs have no labels and one tab must've been declared previously. For reference I'm attaching my test case.

@kalikiana: You need to create and replace the entire Tabs component dynamically, not just its children (Tab components). You can see a working implementation of this in the RSS Readers main view:

http://bazaar.launchpad.net/~dragly/ubuntu-rssreader-app/initial-design/view/head:/TodayPage.qml

Is this the same bug as https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1167568 ?
This MR https://code.launchpad.net/~tpeeters/ubuntu-ui-toolkit/tabfix/+merge/161902 makes Tabs work with a Repeater inside. Is that sufficient, or do you need additional functionality?

I think it would be useful to change the number of Tabs dynamically at
runtime. I.e. for the RSS reader, where each tab could represent a
feed, and the number of tabs needed would be known after reading the
number of feeds from the database.

Is this possible with a Repeater? For instance by changing the
Repeater's model property? (I have very little experience with the
Repeater component).

On Tue 07 May 2013 01:39:48 PM CEST, Tim Peeters wrote:
> Is this the same bug as https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1167568 ?
> This MR https://code.launchpad.net/~tpeeters/ubuntu-ui-toolkit/tabfix/+merge/161902 makes Tabs work with a Repeater inside. Is that sufficient, or do you need additional functionality?
>
> ** Changed in: ubuntu-ui-toolkit
> Status: Confirmed => Incomplete
>

I agree with Svenn-Arne.

Repeater can be useful for creating static components.
Of course we can dynamically create Tabs component with Repeater inside,
but it's spike solution!
Yes, we need dynamic qml object creation, but only for using like that:
var myNewTab = component.createObject(tabs)

Just think what if I want to display the same tab in two Tabs components?
It's impossible without dynamic tabs management, like
tabsItem.tabs.add(...)

2013/5/7 Svenn-Arne Dragly <email address hidden>

> I think it would be useful to change the number of Tabs dynamically at
> runtime. I.e. for the RSS reader, where each tab could represent a
> feed, and the number of tabs needed would be known after reading the
> number of feeds from the database.
>
> Is this possible with a Repeater? For instance by changing the
> Repeater's model property? (I have very little experience with the
> Repeater component).
>
> On Tue 07 May 2013 01:39:48 PM CEST, Tim Peeters wrote:
> > Is this the same bug as
> https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1167568 ?
> > This MR
> https://code.launchpad.net/~tpeeters/ubuntu-ui-toolkit/tabfix/+merge/161902makes Tabs work with a Repeater inside. Is that sufficient, or do you need
> additional functionality?
> >
> > ** Changed in: ubuntu-ui-toolkit
> > Status: Confirmed => Incomplete
> >
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> https://bugs.launchpad.net/bugs/1124071
>
> Title:
> [tabs] Cannot add Tabs programmatically
>
> Status in Ubuntu UI Toolkit:
> Incomplete
> Status in Ubuntu UX bugs:
> Confirmed
>
> Bug description:
> There seems to be no easy way to add a Tab to Tabs programmatically.
>
> I would be nice to be able add, remove and edit Tabs dynamically. So
> far I haven't found a way to do this.
>
> I have made an Android style ViewPager based on ListView. It is quite
> easy to update the pages with ListModel methods.
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1124071/+subscriptions
>

Guys, look at Tabs control in Qt Quick Desktop Components as example of complete Tabs component.

C'mon guys, half of year passed, and no any updates on this bug?
RSS Reader team critically requires ability to add tabs programmatically.

This bug is still valid for the UITK.

But for RSS reader, I wonder whether having all the RSS streams as tabs, it is not practical to navigate between possibly hundreds of tabs. I think a list of feeds that can be tapped to push a stream to the PageStack is a better approach. Katie what do you think? Do we have designs that show how to navigate to the different streams?

Guys, relax, Lisette Slegers currently working on design of our reader. We are using tabs for topics. Topics are used for grouping feeds by their content. So user can read "hundreds of streams" in few topics, for ex. "News" topic can contain bbc, cnn, reuters feeds inside :)

BR,
Roman.

16.09.13 11:50 Tim Peeters написал(а):

This bug is still valid for the UITK.

But for RSS reader, I wonder whether having all the RSS streams as tabs,
it is not practical to navigate between possibly hundreds of tabs. I
think a list of feeds that can be tapped to push a stream to the
PageStack is a better approach. Katie what do you think? Do we have
designs that show how to navigate to the different streams?

--

You received this bug notification because you are subscribed to the bug
report.
Matching subscriptions: Ubuntu RSS Reader Bugmail

https://bugs.launchpad.net/bugs/1124071

Title:
[tabs] Cannot add Tabs programmatically

Status in RSS Feed Reader application for Ubuntu devices:
Confirmed
Status in Ubuntu UI Toolkit:
Confirmed
Status in Ubuntu UX bugs:
Confirmed

Bug description:
There seems to be no easy way to add a Tab to Tabs programmatically.

I would be nice to be able add, remove and edit Tabs dynamically. So
far I haven't found a way to do this.

I have made an Android style ViewPager based on ListView. It is quite
easy to update the pages with ListModel methods.

To manage notifications about this bug go to:

https://bugs.launchpad.net/bugs/1124071

Doesn't it use it for feed categories, rather than individual feeds? And, the feed categories are created by the user, so it requires adding tabs dynamically.

Yes, Sam, you are absolutely right =) we are calling this categories as "topics" in our design specs.

16.09.13 14:37 Sam Bull написал(а):

Doesn't it use it for feed categories, rather than individual feeds?
And, the feed categories are created by the user, so it requires adding
tabs dynamically.

--

You received this bug notification because you are subscribed to the bug
report.
Matching subscriptions: Ubuntu RSS Reader Bugmail

https://bugs.launchpad.net/bugs/1124071

Title:
[tabs] Cannot add Tabs programmatically

Status in RSS Feed Reader application for Ubuntu devices:
Confirmed
Status in Ubuntu UI Toolkit:
Confirmed
Status in Ubuntu UX bugs:
Confirmed

Bug description:
There seems to be no easy way to add a Tab to Tabs programmatically.

I would be nice to be able add, remove and edit Tabs dynamically. So
far I haven't found a way to do this.

I have made an Android style ViewPager based on ListView. It is quite
easy to update the pages with ListModel methods.

To manage notifications about this bug go to:

https://bugs.launchpad.net/bugs/1124071

Any updates on this bug? :)

I need some time to port our app to new Tabs component, so please try to
fix it as fast as possible...

BR,
Roman.

2013/9/25 Tim Peeters <email address hidden>

> ** Changed in: ubuntu-ui-toolkit
> Assignee: Tim Peeters (tpeeters) => Zsombor Egri (zsombi)
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> Matching subscriptions: Ubuntu RSS Reader Bugmail
> https://bugs.launchpad.net/bugs/1124071
>
> Title:
> [tabs] Cannot add Tabs programmatically
>
> Status in RSS Feed Reader application for Ubuntu devices:
> Confirmed
> Status in Ubuntu UI Toolkit:
> Confirmed
> Status in Ubuntu UX bugs:
> Confirmed
>
> Bug description:
> There seems to be no easy way to add a Tab to Tabs programmatically.
>
> I would be nice to be able add, remove and edit Tabs dynamically. So
> far I haven't found a way to do this.
>
> I have made an Android style ViewPager based on ListView. It is quite
> easy to update the pages with ListModel methods.
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/ubuntu-rssreader-app/+bug/1124071/+subscriptions
>

related bug: https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1168359

Sorry to keep you waiting Roman, I have been busy fixing other critical bugs. This one was the next on my list, but I will go on holidays tomorrow, so I gave the bug to zsombi.

Any updates? :)
We strongly need it before 10 October, and day or two to rewrite some pieces of our app.

I completely understand you Roman, however we also have loads of other more critical bugs we need to fix, and despite this is also critical, I simply cannot break in 1000 pieces to solve this one too.

Sad. But It was next in Tim's plans (as you can read above)...
So you wouldn't fix it near?

03.10.13 11:00 Zsombor Egri написал(а):

I completely understand you Roman, however we also have loads of other
more critical bugs we need to fix, and despite this is also critical, I
simply cannot break in 1000 pieces to solve this one too.

--

You received this bug notification because you are subscribed to the bug
report.
Matching subscriptions: Ubuntu RSS Reader Bugmail

https://bugs.launchpad.net/bugs/1124071

Title:
[tabs] Cannot add Tabs programmatically

Status in RSS Feed Reader application for Ubuntu devices:
Confirmed
Status in Ubuntu UI Toolkit:
Confirmed
Status in Ubuntu UX bugs:
Confirmed

Bug description:
There seems to be no easy way to add a Tab to Tabs programmatically.

I would be nice to be able add, remove and edit Tabs dynamically. So
far I haven't found a way to do this.

I have made an Android style ViewPager based on ListView. It is quite
easy to update the pages with ListModel methods.

To manage notifications about this bug go to:

https://bugs.launchpad.net/bugs/1124071

Any updates? :)

Started to work on it today, there's the work in progress branch you can check now. It's not ready yet, there are few issues with it, just pushed the stage so you can check it too.

All done, waiting for green light to land.

Great! I'll test it as soon it will be merged! =)

08.11.13 12:55 Zsombor Egri написал(а):

All done, waiting for green light to land.

--

You received this bug notification because you are subscribed to the bug
report.
Matching subscriptions: Ubuntu RSS Reader Bugmail

https://bugs.launchpad.net/bugs/1124071

Title:
[tabs] Cannot add Tabs programmatically

Status in RSS Feed Reader application for Ubuntu devices:
Confirmed
Status in Ubuntu UI Toolkit:
In Progress
Status in Ubuntu UX bugs:
Confirmed

Bug description:
There seems to be no easy way to add a Tab to Tabs programmatically.

I would be nice to be able add, remove and edit Tabs dynamically. So
far I haven't found a way to do this.

I have made an Android style ViewPager based on ListView. It is quite
easy to update the pages with ListModel methods.

To manage notifications about this bug go to:

https://bugs.launchpad.net/bugs/1124071

Fix committed into lp:ubuntu-ui-toolkit at revision None, scheduled for release in ubuntu-ui-toolkit, milestone Unknown

This bug was fixed in the package ubuntu-ui-toolkit - 0.1.46+14.04.20131118-0ubuntu1

---------------
ubuntu-ui-toolkit (0.1.46+14.04.20131118-0ubuntu1) trusty; urgency=low

  [ Zsombor Egri ]
  * Support for dynamically inserting/moving/removing tabs in Tabs. .
    (LP: #1124071)

  [ Leo Arias ]
  * Fixes for swipe_to_delete on autopilot list items emulator: Take
    into account items without confirmation. Take into account items
    that are destroyed on removal. (LP: #1245651, #1249221)

  [ Albert Astals ]
  * InverseMouseArea: Do not filter events if disabled.

  [ Robert Bruce Park ]
  * Support both Python 2 and 3 in the autopilot tests.

  [ Christian Dywan ]
  * Track magic window with a property signal instead of defining it.
    (LP: #1251436)

  [ Ubuntu daily release ]
  * Automatic snapshot from revision 837
 -- Ubuntu daily release <email address hidden> Mon, 18 Nov 2013 17:13:33 +0000

Any docs show how to use it ?

We have added functions to add, insert, move and remove tabs. However there were some issues with the way tabs were arranged in the Tabs stack, therefore we had to remove the MP which fixed this bug, so teh functions disappear again.

On the other side we managed to fix the Repeater issues we had earlier with the Tabs, so you could use the Repeater to maintain dynamic tabs now. We haven't decided still whether we should only recommend Repeater to maintain dynamic tabs or have the functions back. They both have their pros and cons, like with functions you can decide what kind of Tab you want to add, whereas with Repeater you need to have some hint in the model which tells what tab you shoudl use, and then you need to use a loader for that. On the other side, one thing is sure: you cannot combine Repeater and function-based added tabs, as you cannot insert a Tab in between the tabs created by the Repeater, because any model change of the Repeater will throw out the function-added tab from that area.

So, for RSS app, I think a Repeater would do the job, where the model would be a list of URLs with feeds. Or you know better how your code is organized. I can help you on building that side of your app if need.

Something like:
Tabs {
    Repeater {
        model: ["Page 1", "Page 2"]
        Tab {
            title: modelData
            page: Page {
                [....]
            }
        }
    }
}

Thanks for your answer :)
That helps a lot

Hello!

"dynamic tabs or have the functions back" - of course you must return
functions! Be sure!
Repeater has one huge issue - changing model causes recreating of all it's
child items.
So if you will add new tab via changing model, all other tabs will lose
their state.

Try to find solution in Qt Quick Controls (desktop components).
Just believe me - guy with big QML experience.

Best regards, Roman.

2013/12/10 Joey Chan <email address hidden>

> Thanks for your answer :)
> That helps a lot
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> Matching subscriptions: Ubuntu RSS Reader Bugmail
> https://bugs.launchpad.net/bugs/1124071
>
> Title:
> [tabs] Cannot add Tabs programmatically
>
> Status in RSS Feed Reader application for Ubuntu devices:
> Confirmed
> Status in Ubuntu UI Toolkit:
> Confirmed
> Status in Ubuntu UX bugs:
> Confirmed
> Status in “ubuntu-ui-toolkit” package in Ubuntu:
> Fix Released
>
> Bug description:
> There seems to be no easy way to add a Tab to Tabs programmatically.
>
> I would be nice to be able add, remove and edit Tabs dynamically. So
> far I haven't found a way to do this.
>
> I have made an Android style ViewPager based on ListView. It is quite
> easy to update the pages with ListModel methods.
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/ubuntu-rssreader-app/+bug/1124071/+subscriptions
>

Roman, noone questions your experience, what I just said previously was that "you cannot combine Repeater and function-based added tabs, as you cannot insert a Tab in between the tabs created by the Repeater, because any model change of the Repeater will throw out the function-added tab from that area". Yes, this can be documented and will be, once we decide to roll back the fix I pushed. I've never said that the Repeater will give you full support, what I said that for instance for the RSS app this approach might be good enough - we have StateSaver that could be used to restore states on Tabs btw...

We are checking other solutions, other API than functions, but most likely we will roll back to the functions.

And apologies for keeping this bug open for such a long time, we thought that we managed to close this, but then everything blew up... I'll make sure we will have a solution ASAP.

Any news?

I see zsombi's branch is moving forward today; I assume the branch will properly support adding and removing tabs dynamically.

Yes, the same functionality that was planned with the previous branch attached to the bug is brought back: you will get functions to add tabs dynamically, to reorder them and to remove them. You can also remove statically added tabs too, and you can add them back.

wow , can't wait to use it ! \(^0^)/

Thanks very much

you could eventually branch/take the deb packages and test it :)

That's cool! :)

2014-03-11 14:44 GMT+04:00 Zsombor Egri <email address hidden>:

> you could eventually branch/take the deb packages and test it :)
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> Matching subscriptions: Ubuntu RSS Reader Bugmail
> https://bugs.launchpad.net/bugs/1124071
>
> Title:
> [tabs] Cannot add Tabs programmatically
>
> Status in RSS Feed Reader application for Ubuntu devices:
> Confirmed
> Status in Ubuntu UI Toolkit:
> Confirmed
> Status in Ubuntu UX bugs:
> Confirmed
> Status in "ubuntu-ui-toolkit" package in Ubuntu:
> Fix Released
>
> Bug description:
> There seems to be no easy way to add a Tab to Tabs programmatically.
>
> I would be nice to be able add, remove and edit Tabs dynamically. So
> far I haven't found a way to do this.
>
> I have made an Android style ViewPager based on ListView. It is quite
> easy to update the pages with ListModel methods.
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/ubuntu-rssreader-app/+bug/1124071/+subscriptions
>

Any update on this?

It has been planned to be released, but due to CI hiccups and some extra
comments I got in the review for documentation, we had to exclude it from
the landing. Will be included in the next one, once we manage to sort out
whether the current landing fails because of some UITK introduced changes
or due to some autopilot timing issues :/

Sorry guys, you had to wait for too long to get this sorted, and we are
also having the MP ready for too long too... I have to ask for your
patience, few more days to go...

On Mon, Mar 31, 2014 at 11:49 PM, Nicholas Skaggs <
<email address hidden>> wrote:

> Any update on this?
>
> --
> You received this bug notification because you are a bug assignee.
> https://bugs.launchpad.net/bugs/1124071
>
> Title:
> [tabs] Cannot add Tabs programmatically
>
> Status in RSS Feed Reader application for Ubuntu devices:
> Confirmed
> Status in Ubuntu UI Toolkit:
> Confirmed
> Status in Ubuntu UX bugs:
> Confirmed
> Status in "ubuntu-ui-toolkit" package in Ubuntu:
> Fix Released
>
> Bug description:
> There seems to be no easy way to add a Tab to Tabs programmatically.
>
> I would be nice to be able add, remove and edit Tabs dynamically. So
> far I haven't found a way to do this.
>
> I have made an Android style ViewPager based on ListView. It is quite
> easy to update the pages with ListModel methods.
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/ubuntu-rssreader-app/+bug/1124071/+subscriptions
>

Fix committed into lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/staging at revision None, scheduled for release in ubuntu-ui-toolkit, milestone Unknown

We had to draw back the change again from landing, as conflicts with the changes we have for the header. We will reload the work once the header changes are completed.
Moved to june milestone.

There were also some weird failures on arm64 and powerpc, both caused by the ListModel's move() function. Needs further investigation once we get back to land the changes.

Logs from ARM64:
FAIL! : components::TabsAPI::test_z_insertTab() Uncaught exception: Cannot read property '__protected' of null
   Loc: [/build/buildd/ubuntu-ui-toolkit-0.1.46+14.04.20140414/modules/Ubuntu/Components/Tabs.qml(514)]
QWARN : components::UnknownTestFunc() file:///build/buildd/ubuntu-ui-toolkit-0.1.46+14.04.20140414/modules/Ubuntu/Components/Tabs.qml:514: TypeError: Cannot read property '__protected' of null
QWARN : components::UnknownTestFunc() file:///build/buildd/ubuntu-ui-toolkit-0.1.46+14.04.20140414/modules/Ubuntu/Components/Tabs.qml:514: TypeError: Cannot read property '__protected' of null
QWARN : components::UnknownTestFunc() file:///build/buildd/ubuntu-ui-toolkit-0.1.46+14.04.20140414/modules/Ubuntu/Components/Tabs.qml:514: TypeError: Cannot read property '__protected' of null
QWARN : components::UnknownTestFunc() file:///build/buildd/ubuntu-ui-toolkit-0.1.46+14.04.20140414/modules/Ubuntu/Components/Tabs.qml:514: TypeError: Cannot read property '__protected' of null
QWARN : components::TabsAPI::test_z_insertTabAndActivate() file:///build/buildd/ubuntu-ui-toolkit-0.1.46+14.04.20140414/modules/Ubuntu/Components/Tabs.qml:514: TypeError: Cannot read property '__protected' of null
PASS : components::TabsAPI::test_z_insertTabAndActivate()
FAIL! : components::TabsAPI::test_z_insertTabAtSelectedIndex() Uncaught exception: Cannot read property '__protected' of null
   Loc: [/build/buildd/ubuntu-ui-toolkit-0.1.46+14.04.20140414/modules/Ubuntu/Components/Tabs.qml(514)]

Logs from powerpc:
QWARN : components::TabsAPI::test_z_removeActiveTab() file:///build/buildd/ubuntu-ui-toolkit-0.1.46+14.04.20140416/modules/Ubuntu/Components/Tabs.qml:515: ReferenceError: wait is not defined
FAIL! : components::TabsAPI::test_z_removeActiveTab() Uncaught exception: Type error
   Loc: [/build/buildd/ubuntu-ui-toolkit-0.1.46+14.04.20140416/modules/Ubuntu/Components/Tabs.qml(430)]

Status changed to 'Confirmed' because the bug affects multiple users.

With the new header, what is the status on this?

@Nicholas

I've test the new header compatibility with static tabs & toolbar, u may saw it in G+ days ago.

Repeater will be tested in next few days.

BTW, are the new tab management APIs landed with new header ?

Joey, Roman, what's the status on this bug for Shorts?

@David

I've check the API doc of Tabs http://developer.ubuntu.com/api/qml/sdk-14.10/Ubuntu.Components.Tabs/

It still recommend using Repeater to generate tabs, I don't see any other API implicitly manage tabs.

Maybe the "defaulttabChildren : list<Item>" I never seen before, will try later

David, we want this feature for Shorts because of
 - performance (we want to add\remove one tab in time, not all like now)
 - usability (current implementation causes unwanted cleaning)

App will become little bit better :)
And later a lot developers will use this feature I think)

@giorgio-venturi: May I ask for which reasons the Tabs component is deprecated now? I always liked the "Hamburger" tabs menu and it is used by a number of core apps (Shorts, Whether, Sudoku, etc.).

Here is an example of "Tabs" API:
http://doc.qt.io/qt-5/qml-qtquick-controls-tabview.html

Any activity in this? :)
A lot of time passed)

@Niklas Tabs component is not deprecated from UITK point of view. Design uses slightly different naming than UITK for components they design, they call Tabs now the component we call Sections (the strip bar under right below the page header). The old Tabs design is deprecated, but Tabs ended up in the hamburger (drawer) on the page header's left side :)

@Roman, we are busy with bringing the convergence components to "market" so you guys can use them and file bugs, so we can fix them together with you guys asap. We will reload this work once the urgent tasks are done, but as long as the Repeater + model approach works, we won't consider this as critical.

Apologies and thanks for your patience.

Thanks a lot for the clarification, Zsombor!

Sooo? Should we use another component for tabs?