Jewel TabBar improvements

[Carlos Rovira]

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