Hi Carlos, I'm not sure I'm fully understanding you.
If your question is about how to create a default look for Royale, I would not worry about Bootstrap and MDL. Create the HTML structures you need with the attributes you need and create the CSS that makes it look good. My point about Bootstrap is that if someday someone wants to support Bootstrap in Royale, the way to do it is to create other views that create exactly the HTML structure expected by Bootstrap because then you can use any Bootstrap theme as-is. Same for MDL, or any other CSS-based framework. I don't think we can make one view for Button that works with Bootstrap and MDL. It would be nice if we could, but I think you are pointing out that there are attributes in the HTML structure that are different for each framework. I think Bootstrap and MDL do not have the same kinds of components that we have in Royale (like Panel and DataGrid) so existing themes will still need enhancing to work for Royale components. But the initial goal if we ever do try to support Bootstrap is just to create Royale components for the components Bootstrap does support and if you can create your app with only those Bootstrap components, then any Bootstrap theme should "just work" with it. My 2 cents. Hopefully I am agreeing with you. -Alex On 3/16/18, 5:07 AM, "[email protected] on behalf of Carlos Rovira" <[email protected] on behalf of [email protected]> wrote: >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%7C25b1cf8a49534632a77908d58ab >>>>b >> 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 >https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2 >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cfd992c09135f4dc6aa5008d5 >8b368e44%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636567988793544448&s >data=S%2F9k%2FvE34bMncn8pMoBh9ywbKFwCOsS%2BsPxKBsxctDE%3D&reserved=0
