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.
Related
I would like to set the "!active" background-color of QTableWidget to match the "active" color. I tried to do this:
QTableWidget::item:selected:!active{
background-color:QTableWidget::item:selected:active;
}
but it doesn't seem to work. Is there a way to set a property's value to the value of another property?
Thanks,
David
Referencing other styles from within a style is not possible. I can think of two alternatives:
1) Modify the QPalette of your QTableWidget from within your code. The QPalette object will give you access to the properties you're looking for.
QPalette palette = myTableWidget->palette();
palette.setColor( QPalette::Inactive, QPalette::Highlight, palette.color(QPalette::Active, QPalette::Highlight) );
palette.setColor( QPalette::Inactive, QPalette::HighlightedText, palette.color(QPalette::Active, QPalette::HighlightedText) );
myTableWidget->setPalette( palette );
2) Use some QString magic:
QString styleSheet = QString( "QTableWidget::item:selected:active { %1 }"
"QTableWidget::item:selected:!active { %1 }" )
.arg( "style_for_both_items" )
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
I am trying to style a DataGrid component so that the background is transparent (Flex 4). Rgba colors work fine if I make "alternatingItemColors" an attribute on the component, but if I try to declare it in my css stylesheet, I cannot declare the alpha value.
Works (mxml):
<mx:DataGrid id="songGrid" width="800" height="529" dataProvider="{songs}" itemClick="handleRowClick(event);" x="145" y="168" headerStyleName="dataGridHeader" alternatingItemColors="[0xFFFFFFFF, 0xFFFFFFFF]">
Doesn't Work (css):
mx|DataGrid {
alternatingItemColors: #FFFFFFFF, #FFFFFFFF;
}
If I enter the values as "0xFFFFFFFF", I get a parse error, because it's not proper css (of course, most of flex's css isn't proper css, but I digress...). So, is there any way to declare the alpha value of these colors in the css?
You could try extending the DataGrid and making the following override:
override protected function drawRowBackground(s:Sprite, rowIndex:int,
y:Number, height:Number, color:uint, dataIndex:int):void {
var background:Shape = Shape(s.getChildAt(rowIndex));
background.alpha = 0.5; // or whatever alpha value you wish
super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}
CSS3 transparency is described at http://www.w3.org/TR/css3-color/#transparency . From the examples, where the alpha is a number between 0 (fully transparent) and 1 (fully opaque):
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */
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.
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).