Flex 4 Slider con due pollici

Question

qualcuno sa come fare un hslider personalizzato in Flex 4 (scintilla) con due pollici? Dal momento che Flex 4 la proprietà Thumbcount del componente di scorrimento non è più disponibile (al componente mx è stato facilmente impostato). Devo modellare la traccia e i pollici.

Un tutorial sarebbe bello.

thx, smoking.

Answer 1

Non ho un tutorial completo per voi, ma qui sono i primi passi nella creazione di un componente hslider personalizzato . Spero che sia d'aiuto.

iniziare a guardare la pelle hslider che si compone di 2 parti, un pollice e una traccia:

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100" 
       skinClass="spark.skins.spark.HSliderTrackSkin" /> 
<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
       skinClass="spark.skins.spark.HSliderThumbSkin" /> 

Ora, creare una nuova pelle, tranne dargli due pulsanti:

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100" 
        skinClass="spark.skins.spark.HSliderTrackSkin" /> 
<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
        skinClass="spark.skins.spark.HSliderThumbSkin" /> 
<s:Button id="thumb2" top="0" bottom="0" width="11" height="11" 
        skinClass="spark.skins.spark.HSliderThumbSkin" /> 

Creare un nuovo componente che estenda HSlider e chiamarlo qualcosa come MultiButtonSlider. Sostituisci la funzione partAdded() e prendi un riferimento a thumb2 quando viene aggiunto.

override protected function partAdded(partName:String, instance:Object):void{ 
if(partName == "thumb2"){ 
    thumb2 = instance as Button; 
} 
} 

Spero che questo ti spinga nella giusta direzione. Non dimenticare di impostare MultiButtonSlider.skinClass = "YourNewSkin"

I prossimi passi sarebbero renderlo trascinabile e convertire il suo punto in un valore. Vedi la funzione HSlider.pointToValue().

Answer 2

Ho avuto lo stesso problema. Per il momento sto usando il componente mx invece del componente di sparks.

<mx:HSlider x="46" y="358" minimum="1" maximum="600" snapInterval="1" 
thumbCount="2" values="[1,600]" id="hsTiming" height="23" width="618" 
change="hsTiming_changeHandler(event)"/> 

Answer 3

Si può dare un'occhiata a questa discussione (AS3)

Flash Range Slider Component

Answer 4

A integrazione risposta di shi11i, che mi ha messo sulla strada giusta, ecco il codice completo:

package test.components 

{

import flash.geom.Point; 

import spark.components.Button; 
import spark.components.Group; 
import spark.components.HSlider; 


public class HSliderTwoThumbs extends HSlider 
{ 
    private var _value2:Number; 

    [Bindable] 
    public function get value2():Number 
    { 
     return _value2; 
    } 

    public function set value2(value:Number):void 
    { 
     _value2=value; 
     invalidateDisplayList(); 
    } 


    [SkinPart(required="true")] 
    public var thumb2:Button; 

    public function HSliderTwoThumbs() 
    { 
     super(); 
     //this.setStyle("skinClass", "HRangeSliderSkin"); 
    } 

    override protected function partAdded(partName:String, instance:Object):void 
    { 
     super.partAdded(partName, instance); 
    } 


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

     if (!thumb2 || !track || !rangeDisplay) 
      return; 

     var thumbRange:Number=track.getLayoutBoundsWidth() - thumb2.getLayoutBoundsWidth(); 
     var range:Number=maximum - minimum; 

     // calculate new thumb position. 
     var thumbPosTrackX:Number=(range > 0) ? ((value2 - minimum)/range) * thumbRange : 0; 
     // convert to parent's coordinates. 
     var thumbPos:Point=track.localToGlobal(new Point(thumbPosTrackX, 0)); 
     var thumbPosParentX:Number=thumb2.parent.globalToLocal(thumbPos).x; //- distanceToSecondThumb 

     thumb2.setLayoutBoundsPosition(Math.round(thumbPosParentX), thumb2.getLayoutBoundsY()); 

    } 

}} 

Ed ecco come usarlo:

<components:HSliderTwoThumbs id="sliderTwoThumbs"            skinClass="test.skins.HRangeSliderSkin" 
width="300" 
minimum="0" 
maximum="300" 
value="150" 
value2="100" 

/> 

Spero che questo aiuti.

Nota: Nel mio caso non ho gestito la trascinabilità del secondo cursore, poiché non ne avevo bisogno (era un componente di sola lettura). Sarei interessato a vedere come gestirlo, però.

Answer 5

Patrick Mowrer ha uno libero sopra su GitHub: https://github.com/pmowrer/spark-components

sono stato in grado di utilizzarlo senza molto di un problema in un recente progetto. Il componente non espone (in MXML) a tutte le proprietà di Spark (ad esempio, dataTipFormatFunction è assente), ma è ancora possibile accedervi e personalizzarle tramite skinning personalizzato.