如何使用 Apache Royale 设置按钮样式

Question

使用位于apache-royale-0.9.6-bin-js\royale-asjs\examples 的示例，我尝试更改按钮的背景或字体颜色。

所以，我找到了一个如何为js|TextButton 使用样式的示例，但我问了自己几个问题：

1) 如何用j|Button 做同样的事情？

2) 如果我想在 clic 上更改 j|Button 的颜色怎么办（搜索“setStyle”等效项）

这里是完整的代码：

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

问候

Answer 1

对于 Jewel，样式是通过 CSS 修改的。选择器使用以下格式：.jewel.<component-name>。在 Jewel Button 的情况下，使用以下命令同时影响 所有 宝石按钮并将文本标签的颜色更改为红色：

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

（如果需要，也可以在外部 CSS 文件中添加此选择器，而不是在 MXML 或 AS3 中）

编译器将输出此选择器规则，而不是 Jewel Theme 中的选择器规则，因为您的项目优先。

仅更改一个实例：

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

并使用它：

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

上一个按钮会将文本标签的颜色更改为绿色。

此外，您可以使用 j|Button 在运行时更改或添加珠子 (IBead)

在基本组件的情况下，所有这些都是通过js|Button、珠子和 CSS 样式完成的。