Как стилизовать Баттон с помощью Apache Royale - PullRequest
Новая
       20

Как стилизовать Баттон с помощью Apache Royale

1 голос
/ 25 сентября 2019

Играя с примерами, расположенными в apache-royale-0.9.6-bin-js\royale-asjs\examples, я попытался изменить фон или цвет шрифта для кнопки.

Итак, я нашел пример использования стиля для js|TextButton, но я спрашиваю myselftнесколько вопросов:

1) как сделать то же самое с j|Button?

2) как это сделать, если я хочу изменить цвет 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>

С уважением

1 Ответ

0 голосов
/ 26 сентября 2019

В случае Jewel стили модифицируются с помощью CSS.Селекторы используют следующий формат: .jewel.<component-name>.В случае Jewel Button, используйте следующее, чтобы воздействовать на все кнопки драгоценного камня сразу и изменить цвет текстовой метки на красный: 

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

(Вы можете добавить этот селектор ввнешний CSS-файл, если вы хотите вместо этого в MXML или AS3)

Компилятор выведет это правило селектора вместо того, которое содержится в теме Jewel, поскольку ваш проект имеет приоритет.

Только для измененийодин экземпляр: 

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

и используйте его: 

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

Предыдущая кнопка изменит цвет текстовой метки на зеленый.

Кроме того, вы можете использовать j|Button, как вы делали, чтобы изменять или добавлять шарики во время выполнения (IBead)

В случае базовых компонентов все выполняется через js|Button, шарикии стили CSS.

...