Hi I did Icons recently. You have a library "Icons" with "FontIcon" and "ToggleFontIcon". Jewel Button already supports now "icon" property through "IIcon" interface in core. ToggleFontIcon is an ISelectable component and it's used as well with ToggleButton as well recently done.
About ItemRenderer there's an example in JewelExample in NavigationIconLinkItemRenderer.mxml. It's done in MXML and not AS3 since in Royale, mxml seems to be as performant as AS3, so not need to make it AS3. But if you're more happy you can create it your own in AS3. The renderer is like this: <j:NavigationLinkItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:j="library://ns.apache.org/royale/jewel" xmlns:js="library://ns.apache.org/royale/basic" xmlns:html="library://ns.apache.org/royale/html" xmlns="http://www.w3.org/1999/xhtml";> <fx:Script> <![CDATA[ import vos.NavigationLinkVO; [Bindable("dataChange")] public function get navlink():NavigationLinkVO { return data as NavigationLinkVO; } ]]> </fx:Script> <mdl:beads> <js:ItemRendererDataBinding /> </mdl:beads> <js:FontIcon text="{navlink.icon}" material="true" visible="{navlink.icon != null}"/> <html:Span text="{navlink.label}"/> </j:NavigationLinkItemRenderer> So it's using Binding. FontIcon are icons that use font icons like Material Design, you should be able to use as well FontAwesome or others. The list using this is: <j:Navigation change="changeHandler(event)" className= "navIconLinkItemRenderer"> <j:beads> <js:ConstantBinding sourceID="mainNavigationModel" sourcePropertyName="containerDrawerNavigation" destinationPropertyName="dataProvider"/> </j:beads> </j:Navigation> and in CSS: .navIconLinkItemRenderer { IItemRenderer: ClassReference("itemRenderers.NavigationIconLinkItemRenderer" ); } As a bonus, buttons con icons are like this: <j:Button click="topappbar.visible = !topappbar.visible"> <j:icon> <js:FontIcon text="{MaterialIconType.VISIBILITY}" material="true"/> </j:icon> </j:Button> <j:ToggleButton click="toggleTopAppBarFixed()"> <j:icon> <js:ToggleFontIcon text="{MaterialIconType.LOCK}" selectedText= "{MaterialIconType.LOCK_OPEN}" material="true"/> </j:icon> </j:ToggleButton> You can take into account that a j:Button used in a TopBarApp will look without chrome and only as an icon. You can look into the CSS As well I want to give you a warning. This code is what I'm doing this days, so while it seems finished, I can't guarantee that will not change tomorrow until it settles it a bit, if this happens will be during the next few days and before that I expect it to be pretty final I have to do some blog example as well as I consider this finished. Best, Carlos 2018-07-06 14:53 GMT+02:00 pynenburgad <[email protected]>: > Hi, > > I am considering porting a Flex mobile app to web/Apache Royale. The Flex > mobile app makes extensive use of (customized) AS iconitemrenders, so I am > wondering if there are plans to develop an Apache Royale IconItemRenderer, > preferably to be used with the Jewel theme? I couldn’t find any references > in the Github source code repositories. > > I’ve experimented with a Jewel List using an MXML renderer to display > graphics in list items, finding that when the number of list items times > row > height exceeds list height, row heights are diminished to fit list items > inside the list viewport. > > Thanks in advance, > Ad > > > > -- > Sent from: http://apache-royale-users.20374.n8.nabble.com/ > -- Carlos Rovira http://about.me/carlosrovira
