How to style Button with Apache Royale

Playing with exemples located in apache-royale-0.9.6-bin-js\royale-asjs\examples, I tried to change background or font color of a Button.

So, I found an exemple of how to use style for js|TextButton, but I ask myselft several questions :

1) how to do same thing with j|Button ?

2) how to do if I want to change the color of j|Button on a clic (search for a 'setStyle' equivalent)

Here is full code :

<js:Application 
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:js="library://ns.apache.org/royale/basic" 
               xmlns:j="library://ns.apache.org/royale/jewel" >

    <fx:Style>
        @namespace j "library://ns.apache.org/royale/jewel";
        @namespace js "library://ns.apache.org/royale/basic";

        j|Button {
            color : #ffA3EE ; /*Has no effect, not sure I do the right things*/
        }

        js|TextButton {
            background-color: #fc0000;
            border-radius : 6px ;
            font-weight : normal ;
            line-height : 1.4 ;
            color : #ffA3EE ;
            font-size : 15px ;
            padding : 5px ;
        }

        js|TextButton:hover {
            background-color: #CFCFCF;
            vertical-align: middle;
            border: none;
            border-radius: 6px;
        }

        js|TextButton:active {
            background-color: #77CEFF;
            color: #FFFFFF;
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            private function ev_clic_jbutton():void{
                //jbutton.setStyle("color",0x00ff00); // How to do to change color ?
            }
        ]]>
    </fx:Script>


    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>

    <js:beads>
        <js:ApplicationDataBinding />
    </js:beads>

    <js:initialView>
        <js:View width="100" height="100" >

            <j:HGroup gap="10">
                <j:Button id="jbutton" click="ev_clic_jbutton()" text="J Button" width="100" height="100"/>
                <js:TextButton text="JS TextButton" width="100" height="100"/>
            </j:HGroup>

        </js:View>
    </js:initialView>
</js:Application>

Regards

Solution

In the case of Jewel, styles are modified via CSS. Selectors uses the following format: .jewel.<component-name>. In the case of Jewel Button, use the following to affect all jewel buttons at once and change color of text label to red:

    <fx:Style>
    .jewel.button
    {
        color: #ff0000;
    }
    </fx:Style>

(You can add this selector in an external CSS file too if you want instead in MXML or AS3)

The compiler will output this selector rule instead of the one in the Jewel Theme since your project takes precedence.

For change only one instance:

    .jewel.button.mystyle
    {
       color: #00ff00;
    }

and use it:

<j:Button text="A Button" className="mystyle"/>

The previous button will change color of text label to green.

Additionally, you can use j|Button as you did to change or add beads at runtime (IBead)

In the case of Basic components all is done through js|Button, beads, and CSS styles.