You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@royale.apache.org by Carlos Rovira <ca...@apache.org> on 2019/04/19 22:51:22 UTC
Jewel TabBar improvements
Hi all.
just let you know that this days I was working on Jewel TabBar to improve
and fix many things. Until now the component was working at a minimum but
it needs many more things.
Here's a recent tweet about how it looks now:
https://twitter.com/ApacheRoyale/status/1119353305329803264
There's still more things to do. I hope to finish it in 1-2 days.
About using it. I create a bead to use the TabBar with a TabBarContent.
Example usage is:
<j:TabBar localId="tabbar" width="100%" className="tabBarIconItemRenderer"
dataProvider="{tabBarData}">
<j:beads>
<j:AssignTabContent selectedContentProperty="href">
<j:content>
<j:TabBarContent localId="tabcontent" >
<j:SectionContent name="tab1">
<j:Label text="Tab 1"/>
</j:SectionContent>
<j:SectionContent name="tab2">
<j:Label text="Tab 2"/>
</j:SectionContent>
<j:SectionContent name="tab3">
<j:Label text="Tab 3"/>
</j:SectionContent>
<j:SectionContent name="tab4">
<j:Label text="Tab 4"/>
</j:SectionContent>
</j:TabBarContent>
</j:content>
</j:AssignTabContent>
</j:beads>
</j:TabBar>
So AssignTabContent bead is aware of the obejct's property inside the data
provider to use for select the right content in the TabBarContent and adds
a handler for change to make the selection. As well the bead adds it to the
parent of the TabBar. So I think is very convenient to use this bead with
TabBar/TabBarContent.
Let me know what you think about it.
Another valid way could be for example use bindings like this (without the
bead AssignTabContent):
<j:TabBar localId="tabbar2" selectedIndex="2">
<j:beads>
<js:ConstantBinding sourcePropertyName="tabBarData"
destinationPropertyName="dataProvider"/>
</j:beads>
</j:TabBar>
<j:TabBarContent localId="tabcontent2"
selectedContent="{(tabbar2.selectedItem
as TabBarButtonVO).href}" >
<j:SectionContent name="tab1">
<j:Label text="Tab 1"/>
</j:SectionContent>
<j:SectionContent name="tab2">
<j:Label text="Tab 2"/>
</j:SectionContent>
<j:SectionContent name="tab3">
<j:Label text="Tab 3"/>
</j:SectionContent>
<j:SectionContent name="tab4">
<j:Label text="Tab 4"/>
</j:SectionContent>
</j:TabBarContent>
Hope you like it
As usual, please share and like the tweet! :)
--
Carlos Rovira
http://about.me/carlosrovira
Re: Jewel TabBar improvements
Posted by Carlos Rovira <ca...@apache.org>.
Hi Taro,
as always, thanks for your thoughts .Good you bring this to the table :).
I must say I think about this as I design Jewel TabBar to found the best
way (more usable, less code , more Royale,...) to implement it.
What I found is that current implementation is more "decoupled" pieces of
code, since we have the TabBar (that is 98% a List), then the content (the
TabBarContent), and finally a bead to relate both adding the change
function call back and some more wiring lines of code. In this way we are
using a property in the TabBar data provider objects as the data to use for
select the content by name.
As you already notice, making TabBar work more like old MX ViewStack or
Accordion, will need the data be mixed with the view so SectionContent will
be the objects in the "dataprovider" and as well the ones used as the
elements to add to the tree of displayed visual components. I must say that
this idea doesn't look good to me and another problem is that we need to
add in each SectionContent "just-in-case" code like "icon", "label"
(that's is against PAYG Royale rules). But maybe other things as well.
In emulation MXRoyale, we'll need to have that component just for ease the
migration from flex. But I think doing so in a new UI modern UI set would
not be good.
I think in this case we need to provide the building blocks and you should
be able to create this component yourself easily. Even you could share that
version and we can eventually add it to Royale. Or expose it in a blog
article to show how easy is to get that so others that want this specific
component the way to get it.
Hope this make sense.
Carlos
El dom., 21 abr. 2019 a las 4:15, Taro.Yu (<ye...@gmail.com>) escribió:
> I’m looking forward to TabBar. Grad to see it more and more better.
>
> The new bead AssignTabContent is convenience. ^^
>
> I think when using AssignTabContent, does it can be TabBar's dataProvider
> directly ?
> That will be more convenience, like the old days, mx:ViewStack can be
> mx:TabBar's dataProvider...
>
> I saw the source code of AssignTabContent, could be just add some code in
> updateHost() method.
>
> But if use AssignTabContent as TabBar's dataProvider directly. The
> SectionContent only has one property - "name", but TabBarIconItemRenderer
> need more properties - "label" and "icon".
>
> I don't know the idea of AssignTabContent as TabBar's dataProvider
> directly,
> is good or bad... maybe in Roayle has another better way.
>
> Thank you again for these wonderful jewel components :)
>
>
>
>
>
>
> --
> Sent from: http://apache-royale-users.20374.n8.nabble.com/
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Jewel TabBar improvements
Posted by "Taro.Yu" <ye...@gmail.com>.
I’m looking forward to TabBar. Grad to see it more and more better.
The new bead AssignTabContent is convenience. ^^
I think when using AssignTabContent, does it can be TabBar's dataProvider
directly ?
That will be more convenience, like the old days, mx:ViewStack can be
mx:TabBar's dataProvider...
I saw the source code of AssignTabContent, could be just add some code in
updateHost() method.
But if use AssignTabContent as TabBar's dataProvider directly. The
SectionContent only has one property - "name", but TabBarIconItemRenderer
need more properties - "label" and "icon".
I don't know the idea of AssignTabContent as TabBar's dataProvider directly,
is good or bad... maybe in Roayle has another better way.
Thank you again for these wonderful jewel components :)
--
Sent from: http://apache-royale-users.20374.n8.nabble.com/