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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580516096&sdata=uq8%2FEHElZxmQAEgBAGoLGI6sylAOfxqtJs4tpTbBPbA%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580516096&sdata=uq8%2FEHElZxmQAEgBAGoLGI6sylAOfxqtJs4tpTbBPbA%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580516096&sdata=uq8%2FEHElZxmQAEgBAGoLGI6sylAOfxqtJs4tpTbBPbA%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580516096&sdata=uq8%2FEHElZxmQAEgBAGoLGI6sylAOfxqtJs4tpTbBPbA%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580516096&sdata=yN8Pzp%2BtkytNIy0h9tKOduHZroOxJLEetUgneFoIpLM%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580516096&sdata=yN8Pzp%2BtkytNIy0h9tKOduHZroOxJLEetUgneFoIpLM%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=O4sjnlfwP%2BMF9diWKTK47brs4mMjHM0g%2BpCa0jqpBWo%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=O4sjnlfwP%2BMF9diWKTK47brs4mMjHM0g%2BpCa0jqpBWo%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=F8Gb9hATHR4ZfatqMcOaFG3Y%2BoGJ6Th0VKGHJspwiKE%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=F8Gb9hATHR4ZfatqMcOaFG3Y%2BoGJ6Th0VKGHJspwiKE%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=F8Gb9hATHR4ZfatqMcOaFG3Y%2BoGJ6Th0VKGHJspwiKE%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=F8Gb9hATHR4ZfatqMcOaFG3Y%2BoGJ6Th0VKGHJspwiKE%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=Nv0B7DsPAzQOVkvBVJn3pC7SzXGWxlGWznPb31csrFs%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=Nv0B7DsPAzQOVkvBVJn3pC7SzXGWxlGWznPb31csrFs%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=Nv0B7DsPAzQOVkvBVJn3pC7SzXGWxlGWznPb31csrFs%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=Nv0B7DsPAzQOVkvBVJn3pC7SzXGWxlGWznPb31csrFs%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%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=5GTy7N%2BP9BtaeKxR2KHSYSU%2B9OcJGR7xMWL%2F2g1rEPs%3D&reserved=0 >>>> >>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C05e31cd229a641f084a108d6810744dd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636838265580526105&sdata=5GTy7N%2BP9BtaeKxR2KHSYSU%2B9OcJGR7xMWL%2F2g1rEPs%3D&reserved=0>
