I'm trying to make a horizontal list of labels with a space in-between them (for use as part of a ticker tape).
Labels outside of a list have a transparent background but as part of either the ItemRenderer or List, they get a white background. My assumption is that this is part of the default styling applied to a Spark ItemRenderer.
Question - Is there any way to totally get rid of all default visual stylings applied to an ItemRenderer?
protected var messages:ArrayCollection = new ArrayCollection( new Array("1", "2", "3", "etc") );
<s:List dataProvider="{messages}" itemRenderer="SimpleTextRenderer">
<s:layout >
<s:HorizontalLayout verticalAlign="middle" />
</s:layout>
</s:List>
SimpleTextRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false" contentBackgroundAlpha="0" >
<s:Label text="{data}" />
</s:ItemRenderer>
You can implement your own custom item renderer, extending UIComponent (or Label) for instance and implementing IItemRenderer. It's actually quite easy, as explained here (you won't need to implement both of the given interfaces, as one implements the other).
This will allow you to get rid of styling and stuff, because you'll precisely manage how your component gets rendered through its validation cycle.
Related
I am trying to create a Header for DataGrid which will show the Label and TextInput. The code is:
<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:VBox paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5">
<s:Label text="{data.headerText}"/>
<s:TextInput width="100%" />
</mx:VBox>
</s:DefaultGridHeaderRenderer>
It somehow works but the problem is I am loosing the styles on the headers and the background is showing as white instead of the nice grey gradient.
I think I have to add the styling manually. Is there an easy way to do so?
Thanks
Styles are handled by ActionScript code in the item renderer. It's up to you to write that code in your own item renderer. For an example view the source code for the default header renderer. Or you can ignore styles, and just add a Rect behind the Vbox and set its fill properties to whatever you like.
I have an item renderer tied to an mx:DataGrid column. The renderer used to be inline with the column, but I've moved it out to its own file so I can reuse it across multiple tables.
The problem is that now the renderer doesn't resize (grow/shrink) when the column is resized. So if the user makes the column very small, the contents displayed by the renderer just eat up space and show up over top other columns Any ideas how to make this work?
Code for Item Renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<mx:HBox verticalScrollPolicy="auto" horizontalScrollPolicy="off" width="100%">
<mx:Spacer top="0" bottom="0" width="4" />
<mx:Image id="typeIcon" buttonMode="false" source="{data.type}" />
</mx:HBox>
</s:MXDataGridItemRenderer>
Code for column using that renderer:
<mx:DataGridColumn headerText="Type" dataField="type" itemRenderer="com.myCompany.myProject.TypeRenderer" />
Edit
Adding width=100% to the MXDataGridItemRender didn't work.
I posted my question on Adobe's flex forum -- the solution was to remove the outer s:MXDataGridItemRenderer and to just let the mx:HBox be the root control (no other changes were necessary.)
Strange that he Flex Builder app doesn't give you the option of defining the outermost control, it just plops an s:MXDataGridItemRenderer on top...
I need hand cursor to appear on roll over spark Label. I've tried useHandCursor + buttonMode properties, but no result. And is there anything like htmlText property for spark Label (I need underline)? Any alternative solutions are welcome. Thanks.
Does this code suites your needs?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Label buttonMode="true" horizontalCenter="0" text="Test" textDecoration="underline" verticalCenter="0" />
</s:Application>
If you want to have ability to mix styles together you can use the following:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:RichText buttonMode="true" horizontalCenter="0" verticalCenter="0">
<s:content>Hello, <s:span textDecoration="underline">World</s:span>!</s:content>
</s:RichText>
</s:Application>
According to documentation:
The Spark architecture provides three
text "primitives" -- Label, RichText,
and RichEditableText -- as part of its
pay-only-for-what-you-need philosophy.
Label is the fastest and most
lightweight, but is limited in its
capabilities: no complex formatting,
no scrolling, no selection, no
editing, and no hyperlinks. RichText
and RichEditableText are built on the
Text Layout Framework (TLF) library,
rather than on FTE. RichText adds the
ability to render rich HTML-like text
with complex formatting, but is still
completely non-interactive.
RichEditableText is the slowest and
heaviest, but can do it all: it
supports scrolling with virtualized
TextLines, selection, editing,
hyperlinks, and images loaded from
URLs. You should use the fastest one
that meets your needs.
What I'd like to do: create an MXML component with some children, then extend it via MXML to create a new component with more children, without losing the original set.
In other words
create a component bc.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<s:Button id="b1" label="button1"/>
</s:BorderContainer>
and then extend it to a separate component mc.mxml
<?xml version="1.0" encoding="utf-8"?>
<borderContainerX:bc xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:borderContainerX="borderContainerX.*">
<s:Button id="b2" y="100" label="button2"/>
</borderContainerX:bc>
and get a component with 2 buttons.
I've seen various threads on how this is either not possible (1) or on workarounds to accomplish this (2, 3) and have been wondering if something has changed with the advent of Flex 4 or if we're still stuck with these workarounds the last reply in thread 3 seems to hint at Flex 4 fixing it all?
In Flex 4, you will have to override your "mxmlContent" property setter in order to preserve your already defined children in a parent class
One of possible implementations of such a override is presented in the comment for this blog entry
Quick tip (Flex 4): Goodbye templates – hello mxmlContent
http://www.websector.de/blog/2009/10/02/quick-tip-flex-4-goodbye-templates-hello-mxmlcontent/
I have a code in Flex 4 like this
<!-- START >>> middle part: items -->
<mx:Canvas id="itemContainer"
width="100%"
height="100%">
<!-- START >>> Items Display on the page -->
<mx:Repeater id="richTextReapeater"
dataProvider="{_model.current_day.richTextNotes}">
<components:RichTextNoteDisplay theNote="{richTextReapeater.currentItem}" />
</mx:Repeater>
<mx:Repeater id="postItReapeater"
dataProvider="{_model.current_day.positNotes}">
<components:PostItNoteDisplay theNote="{postItReapeater.currentItem}" />
</mx:Repeater>
......
</mx:Canvas>
Mainly it's a MX:Canvas that has inside it reapeaters for multiple custom components I created. Most of these custom components are like this:
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
x="{theNote.x}"
y="{theNote.y}"
width="{theNote.width}"
height="{theNote.height}"
depth="{theNote.depth}"
rotation="{theNote.rotation}"
creationComplete="skinnablecontainer1_creationCompleteHandler(event)" >
Everything works fine (x,y,width,height,rotation) except for depth!
it seems that regardless what the number is it shows as the order it was rendered in the parent container. (MX:Canvas)!
What I want to acheive is that relative to each others, all the items in the mx:Canvas shows in the order of "depth" assigned to them.
How do I do this?
You're using a repeater; which is, in essence, a loop.
It sounds like you're asking to loop over items, but process those items in a different order. Is that correct?
My first recommendation would be that you look into ways to sort your dataProvider items by depth before the repeater 'runs'.
My second recommendation is that you don't use a repeater. A List based class will give you better performance due to renderer recycling.
If you really need to create all children at once, my third recommendation is that you move to an ActionScript implementation which will give you lots more granular control over how and when things are created.
Everytime I've used a repeater I've been unhappy.
Here is some info on lists and itemRenderers with Flex 4.
This is a rough estimate of how I might modify this sample to use a list instead of a repeater:
<!-- START >>> middle part: items -->
<mx:Canvas id="itemContainer"
width="100%"
height="100%">
<!-- START >>> Items Display on the page -->
<s:List id="richTextList"
dataProvider="{_model.current_day.richTextNotes}"
itemRenderer="com.something.myComponent">
</s:List>
</mx:Canvas>
An itemRenderer may be something like this:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:SkinnableContainer rotation="{data.rotation}"
creationComplete="skinnablecontainer1_creationCompleteHandler(event)" />
</s:ItemRenderer>
The list will determine the width, x, and y positions of the renderer. In most cases it will also determine the height; although the Flex 3 List has a variableRowHeight option.
If you want to use a different renderer based ond ata, look into using an itemRendererFunction