iterate through style properties in CSSStyleDeclaration

[wac]

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?

[Inigoesdr]

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:

PHP 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:

PHP Code:

getStyleList("Button"); 


And expect an array returned like this:

PHP 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.

[PeatMoss]

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:

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.