I'm not saying that a component where you specify each tab child element isn't allowed in Royale, it is just my opinion that it isn't "Basic", and that the vast majority of folks will be more productive and run less code if they can just specify a list of labels, especially if that list comes from localization resources.
I'm hopeful that just about all of your code can be leveraged for the person who wants to use an emoji font or gifs or whatever as icons. Thanks, -Alex On 1/23/19, 12:51 AM, "Harbs" <[email protected]> wrote: Yeah. Well that’s a reason to do the as a List with item renderers. I might do that considering that seems to be the consensus. Spectrum uses SVGUseElements with xlinks for icons The icons are loaded in a central SVG file using symbols. It’s actually a very interesting system which I like a lot. > On Jan 23, 2019, at 10:45 AM, Alex Harui <[email protected]> wrote: > > IMO, all of these variants are different beads. In PAYG, if you don't want icons, you shouldn't have to specify a data structure that allows it, just a list of strings. So, if the model is an Array of just about anything, as long as the data matches what the View is expecting, it will all work fine and you only carry around the functionality you actually need. Then if you do want icons, you add them to the data structures and use a View or renderer that is expecting to add an icon. There are several ways to add icons (actual images, special characters, etc). Hopefully lots of code can be reused. > > HTH, > -Alex > > On 1/22/19, 11:49 PM, "Harbs" <[email protected] <mailto:[email protected]>> wrote: > > Tabs can have icons as well, so it seems to me like it’s either a dataProvider which takes an array of ITabData or String (or something we can get a label out of), or a list of child elements. > >> On Jan 23, 2019, at 9:22 AM, Alex Harui <[email protected]> wrote: >> >> IMO, there is too much redundancy in specifying tab tags when an array of tab names is good enough. Yes, there is probably some super-fancy TabBar where you should be allowed to specify each Tab's visuals individually, but I don't see that as the common case, and adding a simple CSS className property to the data model should let folks specify lots of different visuals in CSS. >> >> You don't have to call the property "dataProvider". You can call it "listOfTabNames" if you think that's better. >> >> Compare: >> <foo:TabBar> >> <foo:Tab text=“Tab 1”/> >> <foo:Tab text=“Tab 2”/> >> <foo:Tab text=“Tab 3”/> >> <foo:Tab text=“Tab 4”/> >> </foo:TabBar> >> >> vs. >> >> <foo:TabBar tabNames="['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4']" /> >> >> My 2 cent,s >> -Alex >> >> On 1/22/19, 1:26 PM, "Harbs" <[email protected]> wrote: >> >> The design was supposed to be one or the other: https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fpull%2F59%23issuecomment-455590132&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=i%2FiFYAu41JJuX477ZjpDpQ7ztfD4btrLo1crNqQVgO4%3D&reserved=0 <https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fpull%2F59%23issuecomment-455590132&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=i%2FiFYAu41JJuX477ZjpDpQ7ztfD4btrLo1crNqQVgO4%3D&reserved=0><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fpull%2F59%23issuecomment-455590132&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=i%2FiFYAu41JJuX477ZjpDpQ7ztfD4btrLo1crNqQVgO4%3D&reserved=0 <https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fpull%2F59%23issuecomment-455590132&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=i%2FiFYAu41JJuX477ZjpDpQ7ztfD4btrLo1crNqQVgO4%3D&reserved=0>> >> >> I was thinking of doing it as a List and using a dataProvider, but I liked the structure of the tab children better. >> >> Tabs don’t feel to me like a list and the dropdown feels more like a special case. >> >> I think this is a case which could really go either way. >> >>> On Jan 22, 2019, at 10:59 PM, Alex Harui <[email protected] <mailto:[email protected]>> wrote: >>> >>> I'm not sure I understood what we were supposed to get from these links, but to me, the links took me to web pages that would inspire me to write a component that leverage the Royale/Flex item renderer approach. The component would take a dataProvider of tab names and an optional renderer, and decide how many tabs to display and put the rest in a dropdown. >>> >>> My 2 cents, >>> -Alex >>> >>> On 1/22/19, 11:06 AM, "Harbs" <[email protected] <mailto:[email protected]>> wrote: >>> >>> I’m implementing this: >>> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fopensource.adobe.com%2Fspectrum-css%2F2.7.2%2Fdocs%2F%23tabs---too-many&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=MerKkprKOw14nx70Z5IeqSOPhhhzzfBw8ngYewQVrSI%3D&reserved=0 <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fopensource.adobe.com%2Fspectrum-css%2F2.7.2%2Fdocs%2F%23tabs---too-many&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=MerKkprKOw14nx70Z5IeqSOPhhhzzfBw8ngYewQVrSI%3D&reserved=0> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fopensource.adobe.com%2Fspectrum-css%2F2.7.2%2Fdocs%2F%23tabs---too-many&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=MerKkprKOw14nx70Z5IeqSOPhhhzzfBw8ngYewQVrSI%3D&reserved=0 <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fopensource.adobe.com%2Fspectrum-css%2F2.7.2%2Fdocs%2F%23tabs---too-many&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=MerKkprKOw14nx70Z5IeqSOPhhhzzfBw8ngYewQVrSI%3D&reserved=0>> >>> >>> The current display is not the latest. In the current implementation, the dropdown is structured like this: >>> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fblob%2Fmaster%2Fdocs%2Ftabs%2Ftabs-toomany.yml&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=JDvnRMYUUOq%2Fpg3cVV6RXK5sZaq8lSKvVMJ3Nu4fn0E%3D&reserved=0 <https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fblob%2Fmaster%2Fdocs%2Ftabs%2Ftabs-toomany.yml&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=JDvnRMYUUOq%2Fpg3cVV6RXK5sZaq8lSKvVMJ3Nu4fn0E%3D&reserved=0><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fblob%2Fmaster%2Fdocs%2Ftabs%2Ftabs-toomany.yml&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=JDvnRMYUUOq%2Fpg3cVV6RXK5sZaq8lSKvVMJ3Nu4fn0E%3D&reserved=0 <https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fblob%2Fmaster%2Fdocs%2Ftabs%2Ftabs-toomany.yml&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=JDvnRMYUUOq%2Fpg3cVV6RXK5sZaq8lSKvVMJ3Nu4fn0E%3D&reserved=0>> >>> >>> While the normal structure is like this: >>> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fblob%2Fmaster%2Fdocs%2Ftabs%2Ftabs.yml&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=%2FGfdDHb1%2FhfUFJKzBfhuwoqrP4SB7npO2x4QW2Y76hw%3D&reserved=0 <https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fblob%2Fmaster%2Fdocs%2Ftabs%2Ftabs.yml&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=%2FGfdDHb1%2FhfUFJKzBfhuwoqrP4SB7npO2x4QW2Y76hw%3D&reserved=0> <https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fblob%2Fmaster%2Fdocs%2Ftabs%2Ftabs.yml&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=%2FGfdDHb1%2FhfUFJKzBfhuwoqrP4SB7npO2x4QW2Y76hw%3D&reserved=0 <https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fblob%2Fmaster%2Fdocs%2Ftabs%2Ftabs.yml&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=%2FGfdDHb1%2FhfUFJKzBfhuwoqrP4SB7npO2x4QW2Y76hw%3D&reserved=0>> >>> >>> The spectrum css requires a specific structure, so I can’t use media queries. >>> >>> FWIW, [DefaultProperty] does what we want. >>> >>> Thanks Alex, >>> Harbs >>> >>>> On Jan 22, 2019, at 8:51 PM, Carlos Rovira <[email protected] <mailto:[email protected]>> wrote: >>>> >>>> Hi, >>>> >>>> So if I understand right: You want a tabbar navigation that when the user >>>> goes to mobile or shrinks the browser changes the visual to a dropdown >>>> right? >>>> >>>> For me the change should not happen at the level you are proposing. The >>>> component declaration in MXML is the same for both views (the data and >>>> structure), you only want to change representation. >>>> And for me that's in the realm of CSS with responsiveness. So doing a media >>>> query in CSS to arrange things in a way or another depending on the width >>>> of the browser window. >>>> >>>> That's the same we do in Jewel for Drawer, NumericStepper, ComboBox, and >>>> more... >>>> >>>> HTH >>>> >>>> Carlos >>>> >>>> >>>> >>>> El mar., 22 ene. 2019 a las 17:43, Alex Harui (<[email protected] <mailto:[email protected]>>) >>>> escribió: >>>> >>>>> The compiler supports a special property called mxmlContent that defers >>>>> the creation of the MXML tags assigned to that property until a bit later >>>>> in the lifecycle in order to try to make sure other properties are set up >>>>> before the children in the mxmlContent are. All other mxml tags are >>>>> created at constructor time. mxmlContent is the [DefaultProperty] of >>>>> Royale containers so instead having everyone type "mxmlContent" tags over >>>>> and over again, you just skip having to type "mxmlContent". >>>>> >>>>> So, one option is to define other properties to hold other sets of >>>>> children. They will be instantiated at constructor time, but you can store >>>>> them anywhere. IMO, it is bad practice to store UI widgets in the model, >>>>> but some components have both a data model and a presentation model that >>>>> holds things that are about the view (DataGrid rowHeight for example) and >>>>> not about the data itself. >>>>> >>>>> Another option is to think of this component like a Navigator like >>>>> ViewStack. Then you'd have two containers in the mxmlContent, one that >>>>> holds the tabs or the tabbar itself and another that holds the "complex one >>>>> with a dropdown". >>>>> >>>>> Yet another option is to think of it sort of like Panel. Panel has both a >>>>> TitleBar and mxmlContent. You can specify a completely different TitleBar >>>>> for a Panel. >>>>> >>>>> HTH, >>>>> -Alex >>>>> >>>>> On 1/22/19, 1:12 AM, "Harbs" <[email protected] <mailto:[email protected]>> wrote: >>>>> >>>>> We are working on a component which has two (very different) views >>>>> depending on available space. >>>>> >>>>> I’d like to have some markup which would look like this: >>>>> <foo:TabBar> >>>>> <foo:Tab text=“Tab 1”/> >>>>> <foo:Tab text=“Tab 2”/> >>>>> <foo:Tab text=“Tab 3”/> >>>>> <foo:Tab text=“Tab 4”/> >>>>> </foo:TabBar> >>>>> >>>>> The internal structure would change from a relatively simple one to a >>>>> complex one with a dropdown when there’s little space. >>>>> >>>>> I’d like to have a TabModel which would have an array of the tabs >>>>> specified. I’d have a separate view which is responsible for actually >>>>> adding the elements. My question is how to have the MXML children added to >>>>> the model instead of the default behavior where they are added as elements. >>>>> >>>>> Thanks, >>>>> Harbs >>>>> >>>>> >>>> >>>> -- >>>> Carlos Rovira >>>> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=bbdQyYtUxY%2BrucF%2BbfDM6Ad%2BdIhmG8bpMFcjAXyhngU%3D&reserved=0 <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C1794fd4845d3407a13a208d6810ffbbe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838302981603323&sdata=bbdQyYtUxY%2BrucF%2BbfDM6Ad%2BdIhmG8bpMFcjAXyhngU%3D&reserved=0>
