Hi,
default padding in jewel list item renderers are 8px
to see where is defined check jewel IndexedItemRendererInitializer
(that is the super class of ListItemRendererInitializer)
this is the code there:
override protected function setupVisualsForItemRenderer(ir:
IIndexedItemRenderer):void
{
setPaddings(ir);
}
/**
* set padding for this renderer.
*
* try to retrieve paddings from the item renderer.
* If not exits create one with default padding setting
*/
public function setPaddings(ir:IStrand):void {
var paddings:Paddings = StyledUIBase(ir).getBeadByType(IPaddings) as
Paddings;
if(!paddings)
{
paddings = new Paddings();
paddings.padding = DEFAULT_PADDING;
ir.addBead(paddings)
}
}
public static const DEFAULT_PADDING:Number = 8;
So if the default list IR initializer doesn't find a Paddings bead it
creates one with 8px, since this space is the most correct for defaults.
If you want other paddings (0px, 20px,...) just add a Paddings bead in your
custom IR.
For example TabBar default render use:
<j:beads>
<js:ItemRendererDataBinding/>
<js:Paddings paddingLeft="24" paddingRight="24" paddingTop="12"
paddingBottom="12"/>
</j:beads>
you can use as well the following reduced code to apply the same padding in
the 4 zones:
<js:Paddings padding="15"/>
HTH
Carlos
El vie., 23 oct. 2020 a las 14:38, Koch (US), Warren R (<
[email protected]>) escribió:
> I found that bead and played with it. There must be some sort of padding
> or margin around each item in the list. Using row height only lets me
> collapse a row to about 30px with a font height of 11px. Might you know
> where that space is hiding?
>
>
>
> As far as contributing – might be something in the future. Right now I'm
> struggling to convert a mountain of Flex code and Time is my enemy. Which
> is why I'm very appreciative of your help. It takes a long time to figure
> out where these beads and other CSS issues are hiding and it's just killing
> my day. I know it's there somewhere….
>
>
>
> *From:* Carlos Rovira [mailto:[email protected]]
> *Sent:* Friday, October 23, 2020 3:54 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.
>
>
>
>
> Hi Warren,
>
>
>
> APIs from the presentation models were removed from TLC since it was only
> adding weight. Presentation models are beads and are showcased in TDJ. An
> example from TDJ:
>
>
>
> <j:List ...>
>
> <j:beads>
>
> <j:ListPresentationModel rowHeight="52" variableRowHeight="false"/>
>
> ...
>
> </j:beads>
>
> </j:List>
>
>
>
> The Jewel List page reference is here [1], just updated with latest
> changes.
>
>
>
> Jewel still doesn't have multiple selections, since it seems no one
> needed until now. Since that's done already in Basic I guess a Jewel
> implementation could be done very easily seeing how Basic one is done.
> Would you like to try and contribute that to the project? I'm a bit busy
> these days, but can guide you, and also others here.
>
>
>
> Thanks
>
>
>
> [1] https://apache.github.io/royale-docs/component-sets/jewel/list
>
>
>
>
>
> El vie., 23 oct. 2020 a las 2:22, Koch (US), Warren R (<
> [email protected]>) escribió:
>
> I was premature in my findings. The rowHeight in the
> ListPresentationModel bead did nothing. I tried the VerticalLayout to
> control gap. No response. I'm starting with the CSS in your reference [3].
>
> I did get the color and the font to change. Thank you! I have to get the
> rows under control though…..
>
>
>
> And while I'm asking – is there a bead to allow multiple selections?
>
>
>
> *From:* Koch (US), Warren R
> *Sent:* Thursday, October 22, 2020 5:04 PM
> *To:* [email protected]
> *Subject:* RE: [EXTERNAL] Re: Styling a Royale List
>
>
>
> I found the ListPresentationModel bead. Getting closer. Is there a
> bead or something that controls the row spacing and number of elements?
>
>
>
> Is there reference out there or a way to figure out what beads go with
> what elements? It's taking me a lot of time to find them and I only get to
> them when I see them in an example. Especially when it's in the API but
> got moved to a bead somewhere.
>
>
>
> *From:* Koch (US), Warren R
> *Sent:* Thursday, October 22, 2020 1:59 PM
> *To:* [email protected]
> *Subject:* RE: [EXTERNAL] Re: Styling a Royale List
>
>
>
> 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]
> <[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]>) 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]]
> *Sent:* Thursday, October 22, 2020 8:21 AM
> *To:* [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]>)
> 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
>
>
>
>
>
>
> --
>
> 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
