iterate through style properties in CSSStyleDeclaration

Member Posts : 6 Join date : 2011-06-21

given some arbitrary style, say
Button
{
color: green ;
backgroundAlpha: 0.5 ;
}
that I've gotten using StyleManager.getStyleDeclaration,
is there a way to enumerate through the properties/descriptors of that style :(

Member Posts : 5 Join date : 2011-06-21

Not directly, no. But you can check a style for all possible values and just exclude the ones that aren't defined. Here is an example:

Code:: public function getStyleList(styleName:String):Array
{
import mx.styles.StyleManager;

var possibleStyles:Array = ['alternatingItemColors','arrowButtonWidth','backgroundAlpha','backgroundAttachment','backgroundColor',
'backgroundDisabledColor','backgroundGradientAlphas','backgroundGradientColors','backgroundImage','backgroundSize',
'backgroundSkin','barColor','barSkin','baseline','borderAlpha',
'borderColor','borderSides','borderSkin','borderStyle','borderThickness',
'borderThicknessBottom','borderThicknessLeft','borderThicknessRight','borderThicknessTop','bottom',
'branchDisabledIcon','branchIcon','brokenImageBorderSkin','brokenImageSkin','busyCursor',
'buttonHeight','buttonStyleName','buttonWidth','checkDisabledIcon','checkIcon',
'closeButtonDisabledSkin','closeButtonDownSkin','closeButtonOverSkin','closeButtonSkin','closeButtonUpSkin',
'closeDuration','closeEasingFunction','color','columnCount','columnDropIndicatorSkin',
'columnResizeSkin','controlBarStyleName','copyCursor','cornerRadius','dataTipOffset',
'dataTipPlacement','dataTipPrecision','dataTipStyleName','dateChooserStyleName','defaultDragImageSkin',
'defaultLeafIcon','depthColors','disabledColor','disabledIcon','disabledIconColor',
'disabledOverlayAlpha','disabledSkin','disclosureClosedIcon','disclosureOpenIcon','dividerAffordance',
'dividerAlpha','dividerColor','dividerSkin','dividerThickness','downArrowDisabledSkin',
'downArrowDownSkin','downArrowOverSkin','downArrowSkin','downArrowUpSkin','downIcon',
'downSkin','dropdownBorderColor','dropDownStyleName','dropIndicatorSkin','dropShadowColor',
'dropShadowEnabled','editableDisabledSkin','editableDownSkin','editableOverSkin','editableUpSkin',
'errorColor','fillAlphas','fillColors','firstButtonStyleName','firstTabStyleName',
'focusAlpha','focusBlendMode','focusRoundedCorners','focusSkin','focusThickness',
'folderClosedIcon','folderOpenIcon','fontAntiAliasType','fontFamily','fontGridFitType',
'fontSharpness','fontSize','fontStyle','fontThickness','fontWeight',
'footerColors','headerBackgroundSkin','headerColors','headerDragProxyStyleName','headerHeight',
'headerSeparatorSkin','headerStyleName','highlightAlphas','highlightColor','horizontalAlign',
'horizontalCenter','horizontalDividerCursor','horizontalGap','horizontalGridLineColor','horizontalGridLines',
'horizontalLockedSeparatorSkin','horizontalScrollBarStyleName','horizontalSeparatorSkin','icon','iconColor',
'indentation','indeterminateMoveInterval','indeterminateSkin','indicatorGap','indicatorSkin',
'invertThumbDirection','itemDownSkin','itemOverSkin','itemSkin','itemUpSkin',
'kerning','labelOffset','labelStyleName','labelWidth','lastButtonStyleName',
'lastTabStyleName','leading','left','leftIconGap','letterSpacing',
'linkButtonStyleName','linkCursor','maskSkin','menuStyleName','messageStyleName',
'modalTransparency','modalTransparencyBlur','modalTransparencyColor','modalTransparencyDuration','moveCursor',
'nextMonthDisabledSkin','nextMonthDownSkin','nextMonthOverSkin','nextMonthSkin','nextMonthUpSkin',
'nextYearDisabledSkin','nextYearDownSkin','nextYearOverSkin','nextYearSkin','nextYearUpSkin',
'openDuration','openEasingFunction','overIcon','overSkin','paddingBottom',
'paddingLeft','paddingRight','paddingTop','popUpDownSkin','popUpGap',
'popUpIcon','popUpOverSkin','popUpStyleName','previewHeight','previewWidth',
'prevMonthDisabledSkin','prevMonthDownSkin','prevMonthOverSkin','prevMonthSkin','prevMonthUpSkin',
'prevYearDisabledSkin','prevYearDownSkin','prevYearOverSkin','prevYearSkin','prevYearUpSkin',
'radioDisabledIcon','radioIcon','rejectCursor','repeatDelay','repeatInterval',
'right','rightIconGap','rollOverColor','rollOverIndicatorSkin','roundedBottomCorners',
'selectedButtonTextStyleName','selectedDisabledIcon','selectedDisabledSkin','selectedDownIcon','selectedDownSkin',
'selectedFillColors','selectedOverIcon','selectedOverSkin','selectedTabTextStyleName','selectedUpIcon',
'selectedUpSkin','selectionColor','selectionDisabledColor','selectionDuration','selectionEasingFunction',
'selectionIndicatorSkin','separatorColor','separatorSkin','separatorWidth','shadowCapColor',
'shadowColor','shadowDirection','shadowDistance','showTrackHighlight','skin',
'slideDuration','slideEasingFunction','sortArrowSkin','statusStyleName','stretchCursor',
'strokeColor','strokeWidth','swatchBorderColor','swatchBorderSize','swatchGridBackgroundColor',
'swatchGridBorderSize','swatchHeight','swatchHighlightColor','swatchHighlightSize','swatchPanelStyleName',
'swatchWidth','tabHeight','tabOffset','tabStyleName','tabWidth',
'textAlign','textDecoration','textFieldStyleName','textFieldWidth','textIndent',
'textInputStyleName','textRollOverColor','textSelectedColor','themeColor','thumbDisabledSkin',
'thumbDownSkin','thumbIcon','thumbOffset','thumbOverSkin','thumbSkin',
'thumbUpSkin','tickColor','tickLength','tickOffset','tickThickness',
'titleBackgroundSkin','titleStyleName','todayColor','todayIndicatorSkin','todayStyleName',
'top','trackColors','trackDisabledSkin','trackDownSkin','trackHeight',
'trackHighlightSkin','trackMargin','trackOverSkin','trackSkin','trackUpSkin',
'upArrowDisabledSkin','upArrowDownSkin','upArrowOverSkin','upArrowSkin','upArrowUpSkin',
'upIcon','upSkin','useRollOver','verticalAlign','verticalCenter',
'verticalDividerCursor','verticalGap','verticalGridLineColor','verticalGridLines','verticalLockedSeparatorSkin',
'verticalScrollBarStyleName','verticalSeparatorSkin','weekDayStyleName'];
var actualStyles:Array = [];
for(var i:String in possibleStyles)
{
if(StyleManager.getStyleDeclaration(styleName).getStyle(possibleStyles[i]) != undefined)
actualStyles.push(possibleStyles[i] + ' = ' + StyleManager.getStyleDeclaration(styleName).getStyle(possibleStyles[i]));
}
return actualStyles;
}

With that function you can execute a command like this:

Code:: getStyleList("Button");

And expect an array returned like this:

Code:: (Array)#0
[0] "backgroundAlpha = 0.5"
[1] "color = 32768"
[2] "cornerRadius = 4"
[3] "fontSize = 24"
[4] "fontWeight = bold"
[5] "horizontalGap = 2"
[6] "paddingBottom = 2"
[7] "paddingLeft = 10"
[8] "paddingRight = 10"
[9] "paddingTop = 2"
[10] "skin = [class ButtonSkin]"
[11] "textAlign = center"
[12] "verticalGap = 2"

I made the key and value a string for simplicity.

Member Posts : 8 Join date : 2011-06-21

I stumbled upon this as I had to iterate over the set of styles defined in some class descriptor defined in a CSS file. My solution comes from a perusal of the source code in CSSStyleDeclaration.getStyle() method. Here is a little helper function that returns all style declarations in a CSSStyleDeclaration as a Dictionary object:

Code:: private function getAllStyleDeclarations(css:CSSStyleDeclaration):Dictionary
{
var map:Dictionary = new Dictionary();
var o:Object;
var styleName:String;

// See CSSStyleDeclaration.getStyle() for motivation...
// Get defaults first
if (css.defaultFactory != null)
{
o = new css.defaultFactory();
for (styleName in o)
{
map[styleName] = o[styleName];
}
}

if (css.factory != null)
{
o = new css.factory();
for (styleName in o)
{
map[styleName] = o[styleName];
}
}

if (css.overrides != null)
{
for (styleName in css.overrides)
{
map[styleName] = css.overrides[styleName];
}
}

return(map);
}

It worked for me in my environment, but I can't say that it will work for you. Your mileage may vary.