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.
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...
How can I set up the LabelItemRenderer or use any other item renderer that wouldn't truncate the overflowing text but would word wrap it?
UPDATE:
This blog post solved it:
http://flexponential.com/2011/08/21/adding-multiline-text-support-to-labelitemrenderer/
What version of the SDK are you using? You can just make a custom renderer and use a label in it and it'll work, use ItemRenderer as the base class
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer width="100%"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Label text="{data}"
width="100%"/>
</s:ItemRenderer>
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.
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/