Hi Alex, I was thinking about use view beads with bootstrap, semantic, mdl... and I think is not as easy as we talked.
Each ui set has its own particularities, for example, MDL has "primary" and "accent", while semantic has "primary", "secondary", and "emphasis", and Bootstrap has others. My plan was to have a Jewel set of properties for each component. For example, "primary" and "emphasized" (the last is the same in flex). Is something in the same way that we didi in MDL, so although I can use the view bead to output the html with attributes each set expects, we can't have each particularity of each ui set, for this reason my plan was to have our own set with our own properties and then create themes that conforms to that ui set. For components not in the Jewel UI set, we could create JewelBootstrap, where we could find the rest of components if we want, but for the controls all people use (Button, TextInput, CheckBox,...) we can't have properties for each case. The other way is to insert this in className, but that as well seems a bit like a mess, an not very "royale" (or "flex") style. Maybe we can use a beads to setup different particularities, but I think that's seems a little nightmare if I go that path. What do you think? 2018-03-15 22:48 GMT+01:00 Alex Harui <[email protected]>: > Some really low-level components like Label just thinly wrap an > HTMLElement. All complex components should be creating a Div in > createElement and having a view bead construct the sub elements. So, I > think a theme-able CheckBox that intends to support replaceable views > would not subclass the Basic Checkbox which creates an <input> and > subclass UIBase to get a div and have a bead that builds in the Label and > Input. I think there is already a checkbox that has a createElement that > hard codes a div with Label and Input. That's fine as well if you think > that structure never needs tweaking. > > My 2 cents, > -Alex > > > On 3/15/18, 2:30 PM, "[email protected] on behalf of Carlos Rovira" > <[email protected] on behalf of [email protected]> wrote: > > >Thanks Piotr, > > > >I check your code and see how this works, but I have a question. > >If I have in the component a "createElement" like in Label, that generates > >a <span> tag, what happens if I put an IBeadView? > >it overrides the createElement() to avoid create the <span> tag and > >creates > >what dictates the IBeadView? > >thanks > > > >2018-03-15 19:56 GMT+01:00 Piotr Zarzycki <[email protected]>: > > > >> Carlos, > >> > >> In one of my example I have implemented custom TitleBar for Panel. In > >>order > >> to apply it I have used IBeadView [1] > >> > >> [1] > >>https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fgoo.gl%2 > >>F3BAU9Y&data=02%7C01%7Caharui%40adobe.com%7C25b1cf8a49534632a77908d58abb > f > >>7fd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > 7C636567462291974066&sdata > >>=hPRx5U5zDYx4o7MTSVzGFMFdlUYMnkon2V1No2NKEnA%3D&reserved=0 > >> > >> Thanks, Piotr > >> > >> > >> 2018-03-15 19:51 GMT+01:00 Carlos Rovira <[email protected]>: > >> > >> > HI Alex, > >> > > >> > 2018-03-15 19:34 GMT+01:00 Alex Harui <[email protected]>: > >> > > >> > > > >> > > If you are saying you will have JewelTheme.swc that contains SVG and > >> > > assets in one folder and then other folders with only CSS for > >>setting > >> > > colors that's fine. If you need SVG in in the Blue theme and have > >>to > >> > turn > >> > > it into a SWC as well, that is also fine. The main point was to > >>avoid > >> > > having blue.css and red.css in the one JewelTheme.swc. > >> > > > >> > > >> > Right, that's the point now have a common theme (JewelTheme) and a > >>second > >> > derived theme for colors and other possible changes > >> > What is still to decide is if we should have blue, red, orange, > >>green,.. > >> or > >> > maybe blue-red, blue-orange,...and then red-blue, red-orange,... > >> > and more for gradients. Maybe this is the final part on "definitions" > >>or > >> > "foundations" to decide. > >> > > >> > > >> > > IMO, if we want to support Bootstrap, we should do it by > >>encapsulation > >> > > their HTML structures, not by trying to emulate their visuals. Then > >> > other > >> > > Bootstrap themes will "just work". Again, Royale is primarily in > >>the > >> > > business of encapsulating common patterns. If every Bootstrap user > >> must > >> > > fashion a Button out of a <div> and <label> and <input> and give > >>those > >> > > tags certain attributes so the Bootstrap CSS will take effect, then > >>a > >> > > Bootstrap.swc for Royale would contain view beads that generate > >>those > >> > tags > >> > > with those attributes. Another way of thinking about it is to take > >>two > >> > > different Bootstrap websites, look at the HTML DOM, find the common > >> > > patterns, and those patterns are what the view bead generates. I > >> thought > >> > > MDL worked the same way. We are creating our own component set at > >> first > >> > > just to make debugging simple, but also to make it possible to write > >> > > really simple HTML that isn't completely styleable and to avoid > >> licensing > >> > > issues, but now you are creating view beads that set up a particular > >> HTML > >> > > so you can style it with your CSS. If you love Bootstrap and want > >>to > >> use > >> > > Bootstrap to get our default Royale look, that's fine with me, as > >>long > >> as > >> > > you can stay away from licensing issues. > >> > > > >> > > > >> > well, I think that's brilliant! :), I didn't think on this from that > >> > perspective. > >> > So instead of emulate, we can use it's own css by using view beads. > >> > I think I'll give this a try to make a project to see how this will > >>work. > >> > If this is ok, we'll have the main scenario delineated and can simply > >> start > >> > the work :) > >> > > >> > MDL library had the problem that is was limited to it's own namespace > >> > I created "mdl:Button" or "mdl:TextField", and the structure in html > >>was > >> > what MDL expected > >> > now we have our own royale way through "jewel", and we can have > >>different > >> > themes that will > >> > encapsulate their own view beads, this was a point of discussion with > >> > @Piotr this morning > >> > in an issue thread and maybe this is a great way to exemplarize what > >>we > >> can > >> > do with views in themes > >> > instead in the library > >> > > >> > btw, I never used a ViewBead, we have already docs on how to use it? > >>or > >> > maybe you can point me to a class > >> > using a view bead. > >> > > >> > Finaly, I always think we must have our own style and that's where > >>more > >> > work will be pushed > >> > But I think is important to set the complete scenario so if I can end > >>a > >> > Bootstrap effort, other can. > >> > Maybe I could go per component, setting up different themes for > >> > Jewel, Bootstrap, Semantic and MDL, and then > >> > go to the next control, and so on... but main should be ours! :) > >> > > >> > Thanks > >> > > >> > > >> > -- > >> > Carlos Rovira > >> > > >>https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2Fabout.me% > >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > 7C25b1cf8a49534632a77908 > >>d58abbf7fd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > 7C63656746229197406 > >>6&sdata=ShzF245nFYjOA5DWRAOza8vgRtPxbLOZQeUt0NaxuHA%3D&reserved=0 > >> > > >> > >> > >> > >> -- > >> > >> Piotr Zarzycki > >> > >> Patreon: > >>*https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fwww.pat > >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com > %7C25b1cf8a4953 > >>4632a77908d58abbf7fd%7Cfa7b1b5a7b34438794aed2c178de > cee1%7C0%7C0%7C6365674 > >>62291974066&sdata=5k%2BoEsMbBiXpy8HEA5qugWkBnR2ju5P > qt17wFB360Nk%3D&reserv > >>ed=0 > >> > >><https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fwww.pat > >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com > %7C25b1cf8a4953 > >>4632a77908d58abbf7fd%7Cfa7b1b5a7b34438794aed2c178de > cee1%7C0%7C0%7C6365674 > >>62291974066&sdata=5k%2BoEsMbBiXpy8HEA5qugWkBnR2ju5P > qt17wFB360Nk%3D&reserv > >>ed=0>* > >> > > > > > > > >-- > >Carlos Rovira > >https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2Fabout.me%2 > >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > 7C25b1cf8a49534632a77908d5 > >8abbf7fd%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > 7C636567462291974066&s > >data=ShzF245nFYjOA5DWRAOza8vgRtPxbLOZQeUt0NaxuHA%3D&reserved=0 > > -- Carlos Rovira http://about.me/carlosrovira
