> I'm finding this thread to be hard to follow. Agreed. There are many different points and things have gotten quite confusing. That’s why I’m trying to concentrate on one issue at a time. That should enable us to take things in bite size pieces. I think it has been successful so far. I feel the discussion is being productive. :-)
> so I tried to write up such a document in the wiki. Good effort. I did not see anything there that I disagree with. Once we finish this discussion, I think that the wiki should be expanded to include guidelines on what kind of functionality goes into which package and project, but I don’t think we’re up to that yet. Thanks, Harbs > On May 15, 2018, at 9:29 AM, Alex Harui <[email protected]> wrote: > > Hi, > > I'm finding this thread to be hard to follow. It seems to be focusing a lot > on mixing what I call "top-level components" from more than one component > set, which is a valid scenario, and exposes some valid bugs, but I'm not sure > how often it will be used. I also think there is some leftover "Flex" > thinking going on and some terms are being used that I'm not clear what they > are. > > It occurred to me that could be because we don't really have a good document > on what the key terms and concepts are for Royale framework development, so I > tried to write up such a document in the wiki. Our new contributors could > probably use such a document regardless of this issue. The link is here [1]. > Consider it a draft, and not final. But if we're lucky it may help settle > this debate. The key takeaway: Top-Level-Components (TLCs) are different > from other classes in the SWCs. They are almost like examples. This is > different from Flex. Components in one component set have no obligation to > subclass TLCs from other component sets. > > A few other comments: > 1) I'm pretty sure we could require that typenames are fully qualified names. > I'm pretty sure the CSS generator knows the package name. I would recommend > doing that to allow mixing of TLCs from different component sets since that > is guaranteed to be unique and is known to the tooling. It does mean longer > strings in the CSS output though. > 2) Fewer dependencies still doesn't seem like it should be a major goal so it > isn't in the document I wrote. Code reuse is usually the higher goal. When > I think about the projects I've worked on, the focus has always been on code > reuse. That's why Apache Commons and even AS3Commons are popular. Most > folks choose to use those libraries instead of writing their own version of > what those libraries do. Fewer dependencies comes into play when you have > choices. If there are two libraries that implement, say a Sort algorithm you > want to use and you are already using one of those libraries for other > things, you'd probably choose to use the Sort from the library you already > have. > 3) Similarly, Apache Commons and AS3 Commons aren't delivered as one giant > JAR or SWC. Our beads should be organized into different SWCs as well. > 4) Concerns about breakage by subclassing ancestor classes is a valid > concern, but that generally doesn't keep people from subclassing. Instead, > we use testing to verify changes to the ancestor classes. Really, probably > all of us on this mailing list made the same bet about breakage by using the > Flex framework. In any next version of Flex or even Flash, something could > change and break your app. That's why we have tests and preview periods. > > In short, think of many of our SWCs (Core, Binding, Collections, Basic) like > Apache Commons or AS3Commons. > > I'm pretty much done for tonight. I'll see if I made things better or worse > when I start my day tomorrow. > > HTH, > -Alex > > [1] https://github.com/apache/royale-asjs/wiki/Terminology-and-Concepts > <https://github.com/apache/royale-asjs/wiki/Terminology-and-Concepts> > > On 5/14/18, 10:35 PM, "[email protected] > <mailto:[email protected]> on behalf of Carlos Rovira" > <[email protected] <mailto:[email protected]> on behalf of > [email protected] <mailto:[email protected]>> wrote: > > Hi Harbs, > > 2018-05-14 23:37 GMT+02:00 Harbs <[email protected]>: > >> So, we are saying the same thing. >> >> This will not work: >> j|Button >> { >> border: 5px solid black; >> } >> >> But this will: >> .jewel.button >> { >> border: 5px solid black; >> } >> >> That’s what I meant when I said the user must know the default classnames >> that Jewel uses. >> >> I consider this to be a problem. (Not a catastrophic one, but one I’d like >> to avoid if possible.) >> >> One of the features of Royale is that qualified CSS can be used to >> describe application defaults for types. This applies to beads as well as >> styling. With the Jewel (and MDL) architecture, beads are described using >> namespaced classes, while HTML css is described using whatever (different) >> classnames are defined. One of the features of namespaced classes in CSS is >> that it’s checked by the compiler and tooling can take advantage of that. >> By using custom class names, we lose that. >> >> I understand why this compromise was reached, but can we agree that it’s a >> compromise and not the ideal way to solve the problem? If we could make >> j|Button{} work, wouldn’t that be better? >> >> > Right, but take two considerations: > > a) UI sets like MDL (BootStrap, Semantic,...) will never could be done in > that way, since you must to follow the way that external library works. Or > in other words you must to adapt to the given css unless you want to rework > the external CSS (s). > > b) Depending on solution, that could be very verbose, so that should be > considered. > > on the other hand that would be good solution to avoid styles reach final > App if the user doesn't use a concrete component, then the compiler should > not bring it to the final CSS from the theme CSS > > Carlos > > > > >> Thanks, >> Harbs >> >>> On May 14, 2018, at 7:25 PM, Carlos Rovira <[email protected]> >> wrote: >>> >>> I'll give you working examples that I tried for this so you can test >>> yourself if you want: >>> >>> To affect all buttons with *html css*, you do this (for example in main >>> App.mxml file (you can try this in JewelExample): >>> >>> <fx:Style> >>> @namespace j "library://ns.apache.org/royale/jewel <library:// >> ns.apache.org/royale/jewel>"; >>> >>> .jewel.button >>> { >>> border: 5px solid black; >>> } >>> </fx:Style> >>> >>> >>> <j:Button text="hi!"/> >>> >>> you'll see all buttons with a black border of 5 pixels. overriding the >>> normal Jewel Button border. >>> >>> Instead if you want to change something at "bead level" you must use the >>> component name. For example: >>> >>> j|TitleBar { >>> IBeadLayout: ClassReference( >>> "org.apache.royale.jewel.beads.layouts.VerticalLayout"); >>> } >>> >>> will make *Alert* display things in tittle vertical instead of >> horizontal. >>> (notice that to see the effect you need to add something more to >>> AlertTitleBarBiew like this: >>> >>> <j:Label text="hi"/> >>> >>> Since by default there's only a label so you will not see the real >> effect. >>> >>> and must comment in AlertView this line (130) >>> titleBar.addBead(new HorizontalLayoutSpaceBetween()); >>> that override the concrete behavior of the standard TitleBar for Alert >> and >>> expose the one in css for general TitleBar. >>> >>> Why this happens? Is simply how compiler works. I see it a lot natural >> and >>> for that reason styles in Jewel are organized in the actual way: beads >> are >>> in the Jewel library since it wire the default behavior and html css >> styles >>> are in themes since the things we want to change mostly. >>> >>> Other themes could mix both, and as I tried and exposed, override beads >> in >>> themes is supported that seems a very powerful feature to explore in the >>> future. >>> >>> I worked a lot on organization, I think where you put things (library), >>> packaging and naming is all important, even method signatures are vey >>> important since is what users will be using finaly, so making this as >>> simple as possible but flexible is our main focus. >>> >>> Hope this clears all better :) >>> >>> >>> 2018-05-14 17:43 GMT+02:00 Harbs <[email protected] <mailto: >> [email protected]>>: >>> >>>> I think we have zeroed in on the point of 1a. Great! :-) >>>> >>>> I don’t understand what you mean here. I don’t understand how component >>>> styles could be assigned. >>>> >>>> To be clear I mean something like this: >>>> >>>> <js:Application >>>> xmlns:fx="https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=FxFpEVp00FvoeV5tN%2Fw05Ufr3I8Is0piFEs6FxojJvU%3D&reserved=0 >>>> >>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=FxFpEVp00FvoeV5tN%2Fw05Ufr3I8Is0piFEs6FxojJvU%3D&reserved=0> >>>> < >> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=FxFpEVp00FvoeV5tN%2Fw05Ufr3I8Is0piFEs6FxojJvU%3D&reserved=0 >> >> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=FxFpEVp00FvoeV5tN%2Fw05Ufr3I8Is0piFEs6FxojJvU%3D&reserved=0>> >> < >>>> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=FxFpEVp00FvoeV5tN%2Fw05Ufr3I8Is0piFEs6FxojJvU%3D&reserved=0 >>>> >>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=FxFpEVp00FvoeV5tN%2Fw05Ufr3I8Is0piFEs6FxojJvU%3D&reserved=0><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=FxFpEVp00FvoeV5tN%2Fw05Ufr3I8Is0piFEs6FxojJvU%3D&reserved=0 >>>> >>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fns.adobe.com%2Fmxml%2F2009&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=FxFpEVp00FvoeV5tN%2Fw05Ufr3I8Is0piFEs6FxojJvU%3D&reserved=0>>>" >> xmlns:js="library://ns.apache <library://ns.apache> <library://ns.apache >> <library://ns.apache>>. >>>> org/royale/basic <library://ns.apache.org/royale/basic >>>> <library://ns.apache.org/royale/basic> <library:// >> ns.apache.org/royale/basic <http://ns.apache.org/royale/basic>>>" >>>> xmlns:j="library://ns.apache >>>> <library://ns.apache> >> <library://ns.apache <library://ns.apache>>. >>>> org/royale/jewel <library://ns.apache.org/royale/jewel >>>> <library://ns.apache.org/royale/jewel> <library:// >> ns.apache.org/royale/jewel <http://ns.apache.org/royale/jewel>>>"> >>>> <fx:Style> >>>> @namespace >>>> "https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=KxkNtF6nXu7nBjr1V5fhCQtl%2FJVKA6iGyeczEgp1pMw%3D&reserved=0 >>>> >>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=KxkNtF6nXu7nBjr1V5fhCQtl%2FJVKA6iGyeczEgp1pMw%3D&reserved=0> >>>> < >> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=KxkNtF6nXu7nBjr1V5fhCQtl%2FJVKA6iGyeczEgp1pMw%3D&reserved=0 >> >> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=KxkNtF6nXu7nBjr1V5fhCQtl%2FJVKA6iGyeczEgp1pMw%3D&reserved=0>> >> < >>>> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=KxkNtF6nXu7nBjr1V5fhCQtl%2FJVKA6iGyeczEgp1pMw%3D&reserved=0 >>>> >>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=KxkNtF6nXu7nBjr1V5fhCQtl%2FJVKA6iGyeczEgp1pMw%3D&reserved=0><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=KxkNtF6nXu7nBjr1V5fhCQtl%2FJVKA6iGyeczEgp1pMw%3D&reserved=0 >>>> >>>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=KxkNtF6nXu7nBjr1V5fhCQtl%2FJVKA6iGyeczEgp1pMw%3D&reserved=0>>>"; >>>> @namespace svg "library://ns.apache.org/royale/svg >>>> <library://ns.apache.org/royale/svg> >> <library://ns.apache.org/royale/svg <library://ns.apache.org/royale/svg>> >>>> <library://ns.apache.org/royale/svg <library://ns.apache.org/royale/svg> >>>> <library://ns.apache.org/royale/svg <library://ns.apache.org/royale/svg> >>>> "; >>>> @namespace j "library://ns.apache.org/royale/jewel >>>> <library://ns.apache.org/royale/jewel> >> <library://ns.apache.org/royale/jewel <library://ns.apache.org/royale/jewel>> >>>> <library://ns.apache.org/royale/jewel >>>> <library://ns.apache.org/royale/jewel> <library://ns.apache.org/ >>>> <library://ns.apache.org/> >> royale/jewel>>"; >>>> >>>> j|TextButton >>>> { >>>> padding-top:10px; >>>> } >>>> </fx:Style> >>>> </js:Application> >>>> >>>> Are you saying that this will work? If yes, please explain how. >>>> >>>> Thanks, >>>> Harbs >>>> >>>>> On May 14, 2018, at 5:26 PM, Carlos Rovira <[email protected] >>>>> <mailto:[email protected]> >> <mailto:[email protected] <mailto:[email protected]>> >>>> <mailto:[email protected] <mailto:[email protected]> >>>> <mailto:[email protected] <mailto:[email protected]>>>> >> wrote: >>>>> >>>>>> >>>>>> 2. Client code cannot declare default CSS in their app for all Jewel >>>>>> components of a specific type. In other words >> j:Button{background-color: >>>> blue} >>>>>> will not work because a Jewel Button does not have a “Button” class >>>> name. >>>>>> >>>>> >>>>> No. That would work. You can check in Jewel "sass" folder where all >>>>> components define the css that links beads and classes. >>>>> In that case we don't have anything for Button at this time, but most >> of >>>>> the rest have declarations like j|{Component} and beans assigned. >>>>> Then mostly all html styles are in themes in the styles that are as you >>>>> already notice "jewel {component}" >>>> >>>> >>> >>> >>> -- >>> Carlos Rovira >>> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=h8Gaodrdvy1hwXtjbVv1IYArPKYiH4ypZqQZPdL%2BcGs%3D&reserved=0 >>> >>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=h8Gaodrdvy1hwXtjbVv1IYArPKYiH4ypZqQZPdL%2BcGs%3D&reserved=0><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=h8Gaodrdvy1hwXtjbVv1IYArPKYiH4ypZqQZPdL%2BcGs%3D&reserved=0 >>> >>> <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=h8Gaodrdvy1hwXtjbVv1IYArPKYiH4ypZqQZPdL%2BcGs%3D&reserved=0>> >> > > > > -- > Carlos Rovira > > https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=h8Gaodrdvy1hwXtjbVv1IYArPKYiH4ypZqQZPdL%2BcGs%3D&reserved=0 > > <https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C79bedd805d964128efaf08d5ba259c06%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636619593058778449&sdata=h8Gaodrdvy1hwXtjbVv1IYArPKYiH4ypZqQZPdL%2BcGs%3D&reserved=0>
