I have a spark RichText that I want to change his color according with the value on text property.
Negative values get red, positives blue...
When I declare the component, I call a method to set up the css style, but when the value changes, the color is not updated.
How can I put a conditional CSS Style?
Is possible to create custom skins to RichText component?
Thanks
Here is a example of my code:
<s:RichText id="txtOsc" styleName="{getCorOs(txtOsc.text)}" columnCount="1" kerning="on" text="10" whiteSpaceCollapse="preserve" x="460" y="103"/>
..
private function getCorOs(_text:String):String{
if(_text.indexOf("-") > -1){
return "RED";
}else{
//positivo
return "BLUE";
}
}
]]>
..
It creates ok, but if I change the value at runtime to -10, for instance, the color doesn't change.
You need to re-apply the new style: yourText.thePortionToColor.setStyle('color', 0xFFFFFF); or string value - it doesn't matter.
FTQuest
Related
How to set alternatingRowColors alpah color in flex 4.6 spark DataGrid
Answer:
Tnx to www.Flextras.com I found it:
In the DataGrid skin need to override prepareGridVisualElement like this:
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
{
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const colors:Array = dataGrid.getStyle("alternatingRowColors");
rowBackgroundFillColor.alpha = rowIndex % 2 == 0 ? 0 : 0.25;
}
Use the alternatingRowColors or style.
To quote the docs:
Used to initialize the DataGrid's rowBackground skin part. If the
alternatingRowColors style is specified, then use the
alternatingRowColorsBackground skin part as the value of the
rowBackground skin part. The alternating colors for the grid rows are
defined by successive entries in the Array value of this style.
If you want to change how this style is rendered, replace the
alternatingRowColorsBackground skin part in the DataGridSkin class. If
you want to specify the background for each row, then initialize the
rowBackground skin part directly. The default value is undefined.
I have a advanced datagrid label function like this:
private function dgFormat(item:Object, column:AdvancedDataGridColumn):String{
var v3:int = item.value1 - item.value2;
return "Total: " + v3;
}
How can I change the text color of v3 dynamically? I want it to be red if it's less than zero & black otherwise.
thanks!
There's a few ways of doing this, but personally if I were you, I'd just create a custom item renderer for the columns that you want the color to change and do something like:
<s:Label text="Total: {data}" color="{data < 0?0xFF0000:0x000000}" />
This way, you bind the difference right off the bat without having to add 'total' in your data, and bind the color change as well.
You'll need a custom item renderer for your AdvancedDataGridColumn. The item renderer will check the value being set, and update the color of the text depending on its content.
This should get you started.
In my AdvancedDataGrid,
I am adding dynamic values to cells by dragging a cell value to other cells. While copying, I am setting the value to listData and setting the Red color to the value in ItemRenderer. Everything is working fine, but when I scroll down/up, the values remains in the cells where thay are supposed to be(as I am setting to listData) but the coloring behaves wierd(as I am trying to set the color in ItemRenderer).
I don't want to store the color of the value, but I should be able to see the dynamically created values in Red color.
Is there a way, I can do this? Do I need to set the color to actual dataprovider object and then check in ItemRenderer?
Can anyone help me with this?
public class CustomItemRenderer extends AdvancedDataGridItemRenderer
{
private var _isDynamicValue:Boolean;
....
....
//_isDynamicValue is set to true if the value is dynamic
if(_isDynamicValue && listData.label) {
setStyle("color", 0xFF0000);
setStyle("fontWeight", "bold");
}
else {
setStyle("color", 0x000000);
}
I didn't found a way to store those values temporarily. I stored the colored values indexes and checked them in ItemRenderer.
I have a tooltip for each datagrid row. Which is fine. I also can style it with with mx:Style which is great.
However, I desire to have multiple styles ie a header and the rest of the text in the tooltip. Is this possible? Or to have htmlText for input?
If you need that you should create your own component implementing mx.core.IToolTip and use it to display the tooltip. Write you own handler for toolTipCreate and in this handler set your own component as the tooltip renderer.
private function createTooltip(e:ToolTipEvent):void {
//CustomToolTip should extend the Canvas and implement IToolTip
var tooltip:CustomToolTip = new CustomToolTip();
//you need to set the tooltip property in order to make your component used for tooltip renderer
e.toolTip = tooltip;
}
<mx:DataGrid id="myDataGrid" toolTip=" " toolTipCreate="createToolTip(event)">
in MXML, there is a Button class which you can instantiate like so:
<mx:Button id="something />
but what if you wanted to dynamically build this in AS3 and add it to the Flex app dynamically, without the use of components (just AS3) and then modify Flex's styles, for example, here you access the Button's properties and set them:
var btn:Button = new Button();
btn.height = 50;
btn.width = 75;
btn.x = 100;
btn.y = 40;
but how would you go about changing the Style, for example:
btn.downSkin = "something";
btn.color = "0xfffff";
I'm sort of starting to lean towards making a flex component in MXMLand than just making it visible true/false, but i like the fact that i create an object in AS3 and then destroy it when I don't need it anymore, than create it again once needed.
This page has a solution to the problem:
Setting and getting Style attributes in ActionScript:
// setting a components styleName to reference a CSS class
component.styleName = "highlight";
// set a Button's background color and font size
submitButton.setStyle( "backgroundColor", 0x000000 );
submitButton.setStyle( "fontSize", 14 );
// get a TextArea's font family and color
textArea.getStyle( "fontFamily" );
textArea.getStyle( "color" );
You could use CSS, either inline or as an external CSS file. That way you don't have to set the properties manually every time you create a button.
/* CSS file */
Button {
borderColor: red;
}
Check out Styling Button control, by Peter deHaan (also read the comments in that post).