I just imported the CSS and gave it a go. It's appears I can now style the
Jewel List component. Thank You!
One quick question. According to the API I can set a rowHeight on a Jewel List:
<j:List localId="myList" y="180" x="250" width="200" dataProvider="{simple2}"
rowHeight="20"/>
When I go to compile this I get an error : Error: This attribute is
unexpected. It will be ignored.
Do I need a bead of some sort to activate rowHeight?
From: Carlos Rovira [mailto:[email protected]]
Sent: Thursday, October 22, 2020 10:43 AM
To: [email protected]
Subject: Re: [EXTERNAL] Re: Styling a Royale List
This message was sent from outside of Boeing. Please do not click links or open
attachments unless you recognize the sender and know that the content is safe.
for "low level tags" I mean that Basic is done to be as simple as possible, so
you have a div or ul tag with nothing more, so since basic doesn't provide
anything more for PAYG reasons, is up to you to add whatever you want in terms
of style or CSS.
HTH
Carlos
El jue., 22 oct. 2020 a las 17:20, Koch (US), Warren R
(<[email protected]<mailto:[email protected]>>) escribió:
I was using Basic. I can't figure out where those low level tags are hiding in
the List.
I see where you are going with reference 3. I've been using the default in the
compiler. I'll pull the standard CSS in local and see if I can get where I
want to go. I'd rather use Jewel since I have more control. Getting Basic to
bind and render has been no fun.
From: Carlos Rovira
[mailto:[email protected]<mailto:[email protected]>]
Sent: Thursday, October 22, 2020 8:21 AM
To: [email protected]<mailto:[email protected]>
Subject: [EXTERNAL] Re: Styling a Royale List
This message was sent from outside of Boeing. Please do not click links or open
attachments unless you recognize the sender and know that the content is safe.
Hi Warren,
are you talking about Basic or Jewel List.
I think the first one doesn't have any template to follow so it's just about
doing low level CSS over the html tags.
In the case of Jewel you have a good example of how to change the look and feel
of components in the TodoMVC example in our repo [1]
It's using SASS that will be like to use AS3 over JS, just make you have better
separation, structure and organization and many other advantages like
functions, mixings, and more.
About how to customize visuals in Jewel List, you should start from Jewel Theme
List SASS file [2]
In theme we have all the style rules that should change (in Jewel there's
another CSS _list.sass file, but that's structure and things that you should
not change (like position, display, ...)
You can always use standard CSS in that case you should go to the compiler CSS
here [3]
In your CSS you can add your own rules that will be added to the final CSS by
the royale compiler instead of the theme default.
For example if you have:
.jewel.list {
color: #808080;
}
and want the color to be red, in your CSS file you add:
.jewel.list {
color: #FF0000;
}
For item renderers you must use .jewel.item and override or add rules
For example for hoover color:
.jewel.item.primary.hovered {
background: #3CADF1;
}
(search for more rules near this one for selected, active, and more)
About padding you can use in your renderer the bead <js:Padding/>
depending on the layout bead you use in the renderer you can have more options
to distribute items, but that use to be tied to some horizontal or vertical
layout, check more variables in the bead code or with code intelligence in your
ide, also you can launch the list of values in the IDE (a least VSCode supports
that with CTRL+SPACE)
HTH
[1]
https://github.com/apache/royale-asjs/blob/develop/examples/crux/todomvc-jewel-crux/src/main/sass/_global.sass
[2]
https://github.com/apache/royale-asjs/blob/develop/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
[3]
https://github.com/apache/royale-asjs/blob/25bdb2d5dbe7b2ec1a8f25f5f9c5b78f7a3243e4/frameworks/themes/JewelTheme/src/main/resources/defaults.css#L865
El mié., 21 oct. 2020 a las 22:20, wkoch
(<[email protected]<mailto:[email protected]>>) escribió:
I'm trying to do some basic CSS styling on an org.apache.royale.html.List and
can't seem to get where I need to -- mostly because I'm not very good at
CSS. Here are my list questions in the hopes some kind soul will save me.
How do I control the item color when a user hovers over it?
How do I control the color of a selected item?
Is padding the only way to space the list items from the left border?
Are the controls the same for an org.apache.royale.html.DropDownList class?
--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation
http://about.me/carlosrovira
--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation
http://about.me/carlosrovira
