1

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

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

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

2）如果我想更改j|Buttonclic 上的颜色怎么办（搜索“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>

问候

4

1 回答 1

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)

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

于 2019-09-25T21:00:31.030 回答