Reputation: 19287
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 ?
Upvotes: 0
Views: 159
Reputation: 39408
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.
Upvotes: 2