Flex: HSlider - Set pelli differenti per i diversi i pollici?

Question

Ho intenzione di utilizzare un HSlider per impostare un intervallo di valori. Vorrei che il pollice sinistro a guardare come ( e il pollice destro per lok come ) in modo che sembrano racchiudere la gamma come (range) invece di | gamma | . Io so solo come impostare la pelle per SliderThumb che consentirà di definire la pelle per entrambi. Qualcuno sa di un modo per impostare una pelle diversa per ogni pollice?

Grazie.

UPDATE

Ho questo codice ora:

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

Il pollice zecche appena non mostrare a tutti? Tra l'altro ho fatto in modo che le pelli vengono caricati correttamente perché posso impostare a un pulsante in questo modo:

<mx:Button styleName="thumbTickRight"/>

Answer 1

Beh ero in grado di farlo funzionare questo way..not sicuro se questo è il modo migliore o meno.

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

non si può leggere di nuovo questo, ma per il bene degli altri che stanno avendo il dolore per quanto sto cercando di manipolare più pollici per ogni avere diverse skin, ho pensato di far notare dove è andato storto nel vostro originale codice. Ho seguito il vostro esempio di codice originale e, inoltre, non ha potuto ottenere i pollici per rendere, poi mi sono reso conto il motivo per cui la soluzione finale ha funzionato.

Il problema è che nel codice originale che si sta utilizzando le proprietà di stile upSkin, downSkin, ecc, mentre nel codice che funziona si utilizza thumbUpSkin, thumbDownSkin, ecc cambiamento sottile, ma fa la differenza!

Spero che questo aiuti qualcuno salvare un giorno della loro vita lungo la pista ...; -)

Saluti Drew

Answer 3

Credo che si potrebbe fare questo sottoclassi della classe Slider (o HSlider), e l'aggiunta di un metodo per applicare skin per ogni pollice singolarmente.

In Slider.as c'è un metodo chiamato createThumbs. Se si guarda in su, vedrai che quando si crea un pollice, le sue pelli vengono assegnati ad esso sulla base di ciò che è impostato per thumbUpSkin, ecc.

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

Quindi, si potrebbe creare un metodo chiamato skinThumbs e lo hanno la precedenza sulle impostazioni della pelle che vengono applicate in getThumbAt(int). È possibile ottenere ogni pollice chiamando commitProperties. Se avete bisogno di una mano con ignorando le impostazioni della pelle, mi lasciare un commento.

Vorrei override del metodo super.commitProperties e chiamare <=> da lì - basta assicurarsi che si mette la chiamata del <=> dopo la chiamata a <=>. Per inciso, il metodo <=> viene chiamato solo da <=>, ed è chiamato solo da un posto in <=>, in modo da non dovete preoccuparvi di trattare con il vostro modifica di essere sostituito da un'altra chiamata interna a <=> .