Jewel TabBar improvements

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Jewel TabBar improvements

Carlos Rovira-2
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! :)


--
Reply | Threaded
Open this post in threaded view
|

Re: Jewel TabBar improvements

Taro.Yu
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/
Reply | Threaded
Open this post in threaded view
|

Re: Jewel TabBar improvements

Carlos Rovira-2
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 (<[hidden email]>) 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/


--