How to style Button with Apache Royale

Question

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

score 1 · Accepted Answer · answered Sep 25 '19 at 21:00

1

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.

answered Sep 25 '19 at 21:00

Carlos Rovira

507
2
11

Many thanks, effectively, to change style at runtime I did jbutton.className = "mystyle_red" (added .jewel.button.mystyle_red in CSS with color:#ff0000) and it worked ! Where can I find all styles names available for one component ? Docs doesn't have a "style" chapter. Do I need to look into Jewel Button SDK source ? – Fred Sep 25 '19 at 21:31
Hi Fred, unfortunately for now you need to dig into the SASS code in Jewel and JewelTheme projects in Royale. I'm working on docs this days, and in concrete in Jewel docs too. With your comment you gave me the idea to add a style sheet per component, For example for button this will be here: https://apache.github.io/royale-docs/component-sets/jewel/button – Carlos Rovira Sep 27 '19 at 18:04
Another link of interest : https://apache.github.io/royale-docs/component-sets/jewel/theme-creation – Carlos Rovira Sep 27 '19 at 18:05

How to style Button with Apache Royale

1 Answers1