Flex: HSlider - Set de peaux différentes pour différentes pouces?

Question

Je vais utiliser un HSlider pour définir une plage de valeurs. Je voudrais que le pouce gauche pour ressembler à ( et le pouce droit à LOK comme ) afin qu'ils semblent englober toute la gamme comme (plage) au lieu de | gamme | . Je ne sais comment définir la peau pour SliderThumb qui définira la peau pour les deux. Est-ce que quelqu'un sait d'une façon de régler une peau différente pour chaque pouce?

Merci.

UPDATE

J'ai ce code maintenant:

<?xml version="1.0" encoding="utf-8"?>
<mx:HSlider xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
    .thumbTickLeft
    {
        disabledSkin: Embed(source="skins.swf", symbol="thumbTickLeft_disabledSkin");
        downSkin: Embed(source="skins.swf", symbol="thumbTickLeft_downSkin");
        overSkin: Embed(source="skins.swf", symbol="thumbTickLeft_overSkin");
        upSkin: Embed(source="skins.swf", symbol="thumbTickLeft_upSkin");
    }
    .thumbTickRight
    {
        disabledSkin: Embed(source="skins.swf", symbol="thumbTickRight_disabledSkin");
        downSkin: Embed(source="skins.swf", symbol="thumbTickRight_downSkin");
        overSkin: Embed(source="skins.swf", symbol="thumbTickRight_overSkin");
        upSkin: Embed(source="skins.swf", symbol="thumbTickRight_upSkin");
    }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            override protected function commitProperties():void
            {
                super.commitProperties();

                updateThumbSkins();   
            }

            private function updateThumbSkins():void
            {
                this.getThumbAt(0).setStyle('styleName','thumbTickLeft');
                this.getThumbAt(1).setStyle('styleName','thumbTickRight');
            }
        ]]>
    </mx:Script>


</mx:HSlider>

Le pouce ticks juste ne montrer du tout? D'ailleurs, je me suis assuré que les peaux se chargent correctement parce que je peux les mettre à un bouton comme ceci:

<mx:Button styleName="thumbTickRight"/>

Answer 1

Eh bien, j'ai pu le faire fonctionner ce way..not sûr que ce soit la meilleure façon ou non.

<?xml version="1.0" encoding="utf-8"?>
<mx:HSlider 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    sliderThumbClass="RangeSliderThumb" 
    creationComplete="initThumbs()">

    <mx:Script>
        <![CDATA[
            import mx.controls.sliderClasses.SliderThumb;

            [Embed(source="skins.swf", symbol="thumbTickLeft_upSkin")]
            private var leftUp:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_upSkin")]
            private var rightUp:Class;

            [Embed(source="skins.swf", symbol="thumbTickLeft_downSkin")]
            private var leftDown:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_downSkin")]
            private var rightDown:Class;

            [Embed(source="skins.swf", symbol="thumbTickLeft_overSkin")]
            private var leftOver:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_overSkin")]
            private var rightOver:Class;

            [Embed(source="skins.swf", symbol="thumbTickLeft_disabledSkin")]
            private var leftDisabled:Class;

            [Embed(source="skins.swf", symbol="thumbTickRight_disabledSkin")]
            private var rightDisabled:Class;

            private function initThumbs():void 
            {
                this.thumbCount = 2;

                var thumb1:SliderThumb = this.getThumbAt(0);
                thumb1.setStyle("thumbUpSkin", leftUp);
                thumb1.setStyle("thumbDownSkin", leftDown);
                thumb1.setStyle("thumbOverSkin", leftOver);
                thumb1.setStyle("thumbDisabledSkin", leftDisabled);

                var thumb2:SliderThumb = this.getThumbAt(1);
                thumb2.setStyle("thumbUpSkin", rightUp);
                thumb2.setStyle("thumbDownSkin", rightDown);
                thumb2.setStyle("thumbOverSkin", rightOver);
                thumb2.setStyle("thumbDisabledSkin", rightDisabled);
            }
        ]]>
    </mx:Script>

</mx:HSlider>

Answer 2

vous ne pouvez pas lire à nouveau, mais au profit d'autres qui ont autant de douleur que je suis en train de manipuler plusieurs pouces à chaque avoir différentes peaux, je pensais que je signale où vous êtes allé mal dans votre original code. J'ai suivi votre exemple de code d'origine et aussi n'a pas pu obtenir les pouces pour rendre, il me vint à l'esprit pourquoi votre solution finale a travaillé.

Le problème est que dans le code d'origine que vous utilisez les propriétés de style upSkin, downSkin, etc, alors que dans le code qui fonctionne vous utilisez thumbUpSkin, thumbDownSkin, etc. changement subtil, mais il fait toute la différence!

Espérons que cela aide quelqu'un à sauver un jour de leur vie sur la piste ...; -)

Vive Drew

Answer 3

Je pense que vous pouvez le faire en sous-classement de la classe Slider (ou HSlider), et en ajoutant une méthode pour appliquer les peaux à chaque pouce individuellement.

Dans Slider.as il y a une méthode appelée createThumbs. Si vous regardez vers le haut, vous verrez que lorsqu'un pouce est créé, ses peaux lui sont attribués en fonction de tout ce qui est fixé pour thumbUpSkin, etc.

thumb = SliderThumb(new _thumbClass());

thumb.owner = this;
thumb.styleName = new StyleProxy(this, thumbStyleFilters);
thumb.thumbIndex = i;
thumb.visible = true;
thumb.enabled = enabled;

thumb.upSkinName = "thumbUpSkin";
thumb.downSkinName = "thumbDownSkin";
thumb.disabledSkinName = "thumbDisabledSkin";
thumb.overSkinName = "thumbOverSkin";
thumb.skinName = "thumbSkin";

Alors, vous pouvez créer une méthode appelée et l'ont skinThumbs remplacent les paramètres de la peau qui sont appliqués dans getThumbAt(int). Vous pouvez obtenir chaque pouce en appelant commitProperties. Si vous avez besoin d'une main avec remplacement des paramètres de la peau, me laisser un commentaire.

Je substituez la méthode et appeler super.commitProperties à partir de là <=> - assurez-vous que vous mettez l'appel l'appel après l'<=> à <=>. Soit dit en passant, la méthode est appelée uniquement <=> de <=>, et n'est appelé d'un endroit à <=>, de sorte que vous n'avez pas à vous soucier de traiter avec votre modification étant remplacé par un autre appel interne à <=> .