[FLEX-35268] [FlexJS] MDL - Add/Remove item(s) to TabBar

• Type: Improvement
• Status: Resolved
• Priority: Major
• Resolution: Won't Fix
• Affects Version/s: Apache FlexJS 0.8.0
• Fix Version/s: Apache FlexJS 0.8.0
• Assignee: Piotr Zarzycki
• Reporter: Devsena
• Created: 16/Feb/17 06:43
• Updated: 26/Feb/17 22:26
• Resolved: 26/Feb/17 22:26

Description

I have a requirement to add/remove tabs to TabBar component at runtime.

Despite the bracketed binding is fixed now to TabBar, it's failed to update it's view on any update to bindable source; though it's a second big expectation from a binding feature.

I tried to look into the TabBar source and then into TabsItemRendererFactoryForArrayData.as file. I seen there is a change listener added to the collection/source:

dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);

I noticed that changes to the source never fires the above method, though. Thus, I forcibly dispatches the event after any changes to the source, i.e. addition to the source, that does adds a new tab like block to the TabBar component, but without any working functionality to it.

In above image, "CHIPS" added after a button click event, but I noticed it gets added without mdl tab styles on it. Furthermore, the TabBar seems completely broken, no section change occur, no selected tab style occur (the red line beneath the selected tab), and clicking any particular tab add the 'tabId' to the address bar (as shown in the image).

I've attaching herewith a basic TabBar project which has 3 buttons - to modify an entry, remove an entry and add an entry to the TabBar component. TabBar's data source is done in a fashioned manner with bracketed binding.

Thanks!