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
