Search code examples
cssactionscript-3apache-flexmxml

Binding MXML CSS value

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.

Solution

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