Binding MXML CSS value

0
votes

In some of my containers I want to bind the padding and gap value to a variable so they are consistent throughout my application and I have the following code

  <s:VGroup gap="{MyCSSStyle.space}"
            paddingLeft="{MyCSSStyle.space}"
            paddingRight="{MyCSSStyle.space}"
            paddingTop="{MyCSSStyle.space}"
            paddingBottom="{MyCSSStyle.space}">

However it is not good if I have to copy the inline styles everywhere, is it possible to bind the values in CSS such that I can achieve like this?

    .myStyle {
            gap: {MyCSSStyle.space};
            paddingLeft: {MyCSSStyle.space};
            paddingRight: {MyCSSStyle.space};
            paddingTop: {MyCSSStyle.space};
            paddingBottom: {MyCSSStyle.space};
    }
    <s:VGroup styleName="myStyle">

I tried but the complier do not allow me to do binding like that.

1
cssactionscript-3apache-flexmxml
But why you need like that. use same style for all instead. - ketan
Because the style value required to be dynamic, such that I can config the value in external source like database or config files and see the updated result on the fly. - Optimus Frog
then you can set it using actionscript also. - ketan
can you provide example on how? - Optimus Frog
like playBtn.setStyle("paddingLeft",20); - ketan

1 Answers

0
votes

Binding of CSS is not possible in flex. Instead you can use actionscript to give css dynamically like following:

MXML:

<s:VGroup id="vgContainer" />

Script:

vgContainer.setStyle("paddingLeft",MyCSSStyle.space);
vgContainer.setStyle("paddingRight",MyCSSStyle.space);
vgContainer.setStyle("paddingTop",MyCSSStyle.space);
vgContainer.setStyle("paddingBottom",MyCSSStyle.space);

Hope, It will help.