Shifting Flex 3.5 project to flex 4.0 - styles warnings

Question

I am shifting my project from Flex 3.5 platform to Flex 4.0. I am able to remove all compile time errors. All I am left with is approx. 1000 warnings and all are on styles.

I have used all mx components as earlier my project was in Flex 3.5. and i cannot change the controls to because it will hamper their look and field. All the styles that I have applied on controls, some of them are now depreciated. Please suggest a workaround for them in flex 4.

Properties are:

Button - > fillColor, fillApha

Canvas -> borderThickness

ComboBox -> borderColor, themeColor, fillColor, fillApha

TextArea -> backgroundColor, backgroundAlpha, themecolor, cornerRadius

TextInput -> backgroundColor, backgroundAlpha, themeColor

All these properties are not allowed in mxml components and they are giving warnings in CSS files also. I have included namespaces also in the beginning of CSS file as:

@namespace "http://www.adobe.com/2006/mxml";

@namespace mx "library://ns.adobe.com/flex/mx";

@namespace fx "library://ns.adobe.com/flex/spark";

@namespace flexlib "http://code.google.com/p/flexlib/";

mx|CheckBox.shadeChk { upIcon: Embed(source="assets/images/CL_collapse_close.png"); overIcon: Embed(source="assets/images/CL_collapse_close.png"); downIcon: Embed(source="assets/images/CL_collapse_close.png"); selectedUpIcon: Embed(source="assets/images/CL_collapse_open.png"); selectedOverIcon: Embed(source="assets/images/CL_collapse_open.png"); selectedDownIcon: Embed(source="assets/images/CL_collapse_open.png"); paddingLeft: 0; paddingRight: 0; paddingTop: 0; paddingBottom: 0; }

.....

Please guide me how can i get the same UI with Flex 4 in spark theme.

Thanks, Nitika

Answer 1

Button FillColor and FillAlpha need to be specified in a skin for spark skins, or you can specify to use the halo skin for the button and then you can specify them in a CSS file or fx:Style tag.

    fillAlphas: 0.8, 0.8, 0.65, 0.65;
fillColors: #B9d6ff, #99C2FF, #B9d6ff, #99C2FF;
skin: ClassReference("mx.skins.halo.ButtonSkin");

Can you change the Canvas to a s:BorderContainer? s:BorderContainer has the BorderWeight property that can be set in MXML.

Try the Suggestion above (with setting the skin to the halo skin) for TextArea and TextInput, otherwise you will get a spark skin by default and you will have to create a custom skin.