You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by sankar <sa...@gmail.com> on 2017/02/16 06:18:03 UTC
[FlexJS] MDL: Add/Remove item(s) to TabBar
/(*Note:* I've tested by new fix pushed by Piotr recently to TabBar bracketed
binding source reported at:
https://issues.apache.org/jira/browse/FLEX-35256)/
Hi,
I have a requirement to add/remove tabs to TabBar component at runtime.
Although by recent fix from Piotr for bracketed binding to TabBar component,
it's failed to update it's view on any update to the 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.
<http://apache-flex-development.2333347.n4.nabble.com/file/n59508/Untitled.png>
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).
Can Piotr or Carlos give me some idea how to make this thing works, how can
I add/remove items to the TabBar component at runtime?
Appreciate to hear from you.
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
Hi Sankar,
I think TabBar wasn't prepared from the beginning to simple add/remove
things at runtime. Raise a jira that you cannot add tabs at runtime. I will
be looking into that through the weekend.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59509.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by sankar <sa...@gmail.com>.
sankar wrote
> Also, I was thinking if there's a way possible to implement to
> programmatically 'active' certain section in
*
> NavigationLayoutContent
*
> (?)
Nevermind, I've created a method which does the job now.
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59530.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by sankar <sa...@gmail.com>.
Also, I was thinking if there's a way possible to implement to
programmatically 'active' certain section in *NavigationLayoutContent* (?) I
was thinking to do a different component (i.e. breadcrumb) which should have
similar structure in use like NavigationLayoutContent, but I'm not sure how
to make certain section active in it.
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59523.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by sankar <sa...@gmail.com>.
Hi Piotr,
No, it was my first time. I tried by very basic codes (before you fixed
bracketed binding to TabBar). My codes were like this:
...
<mdl:TabBar ripple="true" selectedIndex="0" labelField="label"
tabIdField="href" className="customTabBarSetup">
<mdl:beads>
<js:SimpleBinding
sourceID="mainNavigationModel"
sourcePropertyName="componentsTabs"
destinationPropertyName="dataProvider"
eventName="componentsTabsUpdated"/>
</mdl:beads>
</mdl:TabBar>
...
...
// in model class
[Bindable(event="componentsTabsUpdated")]
public function get componentsTabs():Array
{
return _componentsTabs;
}
public function set componentsTabs(value:Array):void
{
_componentsTabs = value;
dispatchEvent(new Event("componentsTabsUpdated"));
}
...
...
// I modified TabBar.as class to forcibly dispatch "dataProviderChange"
event that listened into TabsItemRendererFactoryForArrayData.as class
public function set dataProvider(value:Object):void
{
// @devsena
if (!ITabModel(model).dataProvider) ITabModel(model).dataProvider = value;
else
{
ITabModel(model).dataProvider = value;
ITabModel(model).dispatchEvent(new Event("dataProviderChanged"));
}
}
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59517.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
Sankar,
Did you try before add/remove tabs before? Is it your first attempt?
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59514.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by sankar <sa...@gmail.com>.
Here's the issue number Piotr -
https://issues.apache.org/jira/browse/FLEX-35268.
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59513.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by sankar <sa...@gmail.com>.
Hi Piotr,
I shall report with a project example.
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59512.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
Please specify in jira how you are adding new Tab.
Thanks,
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59511.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
Hi Sankar,
I have Bad and Good news. I will start from the bad.
I'm not able in reasonable way add support for adding dynamically Tabs in
TabBar to our framework. Cause adding dynamically Tab in case when you using
TabBar is actually two step things:
1) You need to add Tab to TabBar
2) You need to add TabBarPanel
Both components are splitted, so I cannot make hacks where inside TabBar I
will be adding TabBarPanel.
Good News:
But we have "Tabs" component where I was able to resolve above issue without
hacks. :) Unfortunately I have one serious problem which I probably explain
soon if won't find resolution,
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59880.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
I forgot to post this link [1] which Om provide me. It explains what actually
should be done in order to add Tabs using TabBar.
[1] http://codepen.io/anon/pen/BNOVvw
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59881.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by sankar <sa...@gmail.com>.
Hi Piotr,
In the MDLExample/Tabs.mxml, I see the TabBar component uses default
itemrenderer component -
org.apache.flex.mdl.itemRenderers.TabBarButtonLayoutItemRenderer. I haven't
look into details if the renderer has some logic to display arrow buttons to
navigate left and right and other logic.
In case of TabBar, when you'll have enough tabs, it automatically shows two
arrow buttons at far right and far left hand side. The TabBar do not shows
any scrollbar, but you can navigate to right or left by clicking on those
arrow buttons.
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59919.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
Sankar,
I may be wrong but I think that your item renderer in "Tabs" will be
responsible for scrolling. Look into my example and try to play with item
renderer added there.
How did you create scrollers in TabBar cases?
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59915.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by sankar <sa...@gmail.com>.
Hi Piotr,
Sorry, it's my bad. I missed a few previous comments of yours. I understand
now what you were talking about.
But if I'm not wrong, Tab does not have scrolling feature (when there's
enough tabs) like TabBar does. Or, does it has any such?
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59907.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
Sankar,
I'm not sure what you are asking for ? I provided example which I have
mentioned in new thread you can find link.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59900.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by sankar <sa...@gmail.com>.
Hi Piotr,
Is your last comment before the JIRA issue you closed or after?
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59896.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
Ok I have found cause of the problem and pushed the changes. Basically I did
use "itemsCreated" for "Tabs", but in my case I should use "itemsCreated" in
TabBar.
Sankar,
I will soon create separate small application with "Tabs" component which
will illustrate dynamic update by ArrayList. In the meantime you can play
with "Tabs" on your own.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59887.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
I'll try to play more with Tabs over the weekend. In general I'm accesing
componentHandler in "addedToParent" method, but from your perspective you
can try "initComplete" or "beadsAdded" event - If you ofcours using some of
our component.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59937.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by sankar <sa...@gmail.com>.
piotrz wrote
> var componentHandler:Object = window["componentHandler"];
> if (componentHandler)
> {
> componentHandler.upgradeElement(element); //MDL function
> }
How you access 'window' in above example, Piotr?
In my case I able to access 'window' by accessing 'document.defaultView'.
But this access breaks the componentHandler code in 'bin-release' version.
It throws error like this:
Uncaught TypeError: document.defaultView.componentHandler.ag is not a
function
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59920.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] MDL: Add/Remove item(s) to TabBar
Posted by piotrz <pi...@gmail.com>.
Issue which I mentioned in the previous post: [1][2]
In MDL library I have component "Tabs". When my dataProvider is ArrayList I
can add another Tab dynamically. Unfortunately "Tabs" component need to be
upgraded:
var componentHandler:Object = window["componentHandler"];
if (componentHandler)
{
componentHandler.upgradeElement(element); //MDL function
}
My first approach was that I do that upgrade once I get from
"TabsItemRendererFactoryForArrayListData" event "itemsCreated", but doesn't
work.
But when I expose function "forceUpgradeTabs" (just for tests) and call it
after "tabs.addItem(new TabVO("tab4", "Tab Four"));" everything is working
great.
The problem is that when I'm doing my upgrade after "itemsCreated" my new
Tab is not yet in the DOM. Does anyone have an idea how can I know whether
my item renderers are already added to DOM ?
[1] https://paste.apache.org/YplB
[2] https://paste.apache.org/wGEe
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Add-Remove-item-s-to-TabBar-tp59508p59884.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.