Why is not the CSS applied with flex-mobile fields?

Question

I am working with flex-mobile.

I created a CSS file within the same folder of my Views files :

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";

s|Button {
    height: 25px;
    width: 120px;
    text-shadow: 3px 3px 3px #FFF;
    font-weight:bold;
    color:#000;
    border:1px solid #bbbbbb;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Then I applied the CSS to my View :

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Accueil" creationComplete="creationCompleteHandler(event)" 
        >
    <fx:Style source="style.css" />
        ...
        <s:HGroup>
            <s:Button id="go" label="Continuer" click="navigator.pushView(MyNewView)"/>
            <s:Button id="quit" label="Quitter" click="quitter(event)"/>
        </s:HGroup> ...

The problem is that at runtime the CSS is not applied ! So how to make the CSS be applied ?

Answer 1

It looks like you are trying to use HTML CSS Styles with a Flex Button. They are two very different approaches to development and CSS Styles cannot be shared.

Look up the styles available on the Flex Button as a reference and for more details.

But, briefly, height and width are properties, not styles. They cannot be set with CSS.

text-shadow is not a valid style. I'm not sure how you'd apply a shadow to the text.

border is not a valid style. The proper way to change the border of a button would be to use a custom button skin.

border-radius, , -moz-border-radius, and -webkit-border-radius are not valid styles, but you may try cornerRadius.

The color style should work, although color applies to the text in the button according to the docs; not the actual button. I believe that you can use chromeColor to change the button's color.

font-weight should be fontWeight.

It is my conclusions that your styles are being applied; however the Flex button does not recognize the styles you're trying to apply.