Flex 4: есть ли простой способ расширить кнопку Spark?

Question

Я создал несколько настраиваемую кнопку Spark, выполнив обложку File> New> MXML и основав ее на spark.components.button.Проблема в том, что мне нужно добавить дополнительное текстовое поле для компонента кнопки и динамически изменить этот текст ... но, конечно, свойство не распознается в кнопке Spark.

Есть ли простой способдобавить это поле в свой пользовательский скин кнопки и его свойство, чтобы к нему можно было обратиться?Если нет, есть ли простой способ взять то, что я сделал, и просто расширить кнопку Spark?Кажется, я не могу найти примеры, которые показывают, как это сделать, не написав все это в ActionScript.

Answer 1

Я рад, что ты спросил! Это намного проще, чем вы думаете, так что не расстраивайтесь! ActionScript довольно прост, если вы освоите его.

Прежде всего, давайте определим, что мы хотим. После прочтения вашего вопроса, я думаю, вы хотели бы использовать вашу кнопку примерно так:

<local:MyCustomButton label="Hello" label2="World!"/>

Итак, давайте рассмотрим, как сделать это реальностью.

Теперь я бы настоятельно рекомендовал расширить Button с помощью ActionScript, но это также можно сделать в mxml:

//MyCustomButton.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx">

</s:Button>

Затем вы можете добавить SkinPart s в <fx:Script>:

<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[

            [SkinPart]
            public var secondLabelDisplay:spark.components.Label;


        ]]>
    </fx:Script>


</s:Button>

Так что теперь, когда вы создаете скин, вы должны включить что-то вроде оригинальной этикетки, просто с другим идентификатором, чтобы отразить ваш новый скинPart:

Но подождите! Какой текст должен показывать наш второй ярлык ?? Что ж, нам нужно добавить еще одно свойство, которое вы можете установить для каждого отдельного экземпляра кнопки:

<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[

            [SkinPart]
            public var secondLabelDisplay:spark.components.Label;


            private var _label2:String;

            public function get label2():String
            {
                return _label2;
            }

            public function set label2(value:String):void
            {
                _label2 = value;
            }


        ]]>
    </fx:Script>


</s:Button>

Круто, так что теперь мы можем установить label2, когда будем использовать нашу кнопку, но на этом этапе она не изменит фактического свойства текста метки. Нам нужно подключить наш label2 к нашему secondLabelDisplay. Мы делаем это, вызывая invalidateProperties при изменении label2, а затем меняем метку в commitProperties (который будет вызываться из-за вызова invalidateProperties ()):

  <?xml version="1.0" encoding="utf-8"?>
    <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
              xmlns:s="library://ns.adobe.com/flex/spark" 
              xmlns:mx="library://ns.adobe.com/flex/mx">

        <fx:Script>
            <![CDATA[

                [SkinPart]
                public var secondLabelDisplay:spark.components.Label;


                private var _label2:String;
                private var label2Changed:Boolean;

                public function get label2():String
                {
                    return _label2;
                }

                public function set label2(value:String):void
                {
                    _label2 = value;
                    label2Changed = true;
                    invalidateProperties();
                }

                override protected function commitProperties():void
                {
                    super.commitProperties();

                    if(label2Changed)
                    {
                        label2Changed = false;
                                            secondLabelDisplay.text = label2;
                    }

                }


            ]]>
        </fx:Script>


    </s:Button>

Наконец, вы заметите, что если вы измените label2 снова после выполнения, ярлык покажет это изменение. Но это не покажет изменения, если вы установите начальный label2, как в нашем целевом использовании. Команда Flex разработала для этого случая специальный метод partAdded (). Я не буду подробно останавливаться на этом, потому что по этому вопросу уже имеется достаточно литературы.

Наконец, вот наша законченная, настраиваемая кнопка, ожидающая обложки для ее использования:

<fx:Script>
    <![CDATA[

        [SkinPart]
        public var secondLabelDisplay:spark.components.Label;


        private var _label2:String;
        private var label2Changed:Boolean;

        public function get label2():String
        {
            return _label2;
        }

        public function set label2(value:String):void
        {
            _label2 = value;
            label2Changed = true;
            invalidateProperties();
        }

        override protected function commitProperties():void
        {
            super.commitProperties();

            if(label2Changed)
            {
                label2Changed = false;
                                    secondLabelDisplay.text = label2;
            }

        }

        override protected function partAdded(partName:String, instance:Object):void
        {
            if(instance == secondLabelDisplay)
            {
                secondLabelDisplay.text = _label2;
            }

        }


    ]]>
</fx:Script>

Удачи!