royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Carlos Rovira <>
Subject Re: [DISCUSS] Explanation of the changes
Date Mon, 14 May 2018 16:25:30 GMT
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):

        @namespace j "library://";

            border: 5px solid black;

            <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(

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

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 <>:

> 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=" <
>>" xmlns:js="library://ns.apache.
> org/royale/basic <library://>"
>                                 xmlns:j="library://ns.apache.
> org/royale/jewel <library://>">
>         <fx:Style>
>         @namespace " <
>                 @namespace svg "library://
> <library://>";
>                 @namespace j "library://
> <library://>";
>                 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 <
> <>> 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

  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message