Flex 4 Suwak z dwoma kciukami

Question

Ktoś wie, jak zrobić niestandardowy hslider w Flex 4 (iskra) z dwoma kciukami? Od wersji Flex 4 właściwość thumbcount składnika suwakowego nie jest już dostępna (w komponencie mx można go było łatwo ustawić). Muszę nadać styl ścieżce i kciukom.

Samouczek byłby miły.

thx, tux.

Answer 1

nie mam pełny poradnik dla Ciebie, ale oto kilka pierwszych kroków w tworzeniu niestandardowy składnik hslider . Mam nadzieję, że to pomoże.

Rozpocznij patrząc na skórze hslider który składa się z 2 części, kciukiem i utwór:

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

Teraz utwórz nową skórę wyjątkiem nadać mu dwa przyciski:

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

Utwórz nowy komponent, który rozszerza HSlider i nazwij go czymś takim jak MultiButtonSlider. Zastąp funkcję partAdded() i pobierz referencję do kciuka2 po dodaniu.

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

Mam nadzieję, że to od razu ruszy w dobrym kierunku. Nie zapomnij ustawić obiektu MultiButtonSlider.skinClass = "YourNewSkin". Kolejnym krokiem jest uczynienie go przeciągalnym i przekształcenie jego punktu w wartość. Zobacz funkcję HSlider.pointToValue().

Answer 2

Miałem ten sam problem. Używam na razie komponentu mx zamiast iskier compontent.

<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

Można spojrzeć na ten temat (AS3)

Flash Range Slider Component

Answer 4

celu uzupełnienia odpowiedź shi11i użytkownika, który wprowadził mnie na właściwe tory, tutaj jest pełny kod:

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()); 

    } 

}} 

A oto jak go używać:

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

/> 

Mam nadzieję, że to pomoże.

Uwaga: W moim przypadku nie dotykać draggability drugiego kursora, bo nie nie trzeba go (to był „tylko do odczytu” component). Byłbym zainteresowany widząc, jak sobie z tym radzisz.

Answer 5

Patrick Mowrer ma wolny jeden Powyżej na GitHub: https://github.com/pmowrer/spark-components

I był w stanie użyć go bez większego problemu w ostatnim projekcie. Komponent nie wystawia (na MXML) wszystkich właściwości, które wykonuje Spark (na przykład dataTipFormatFunction jest nieobecny), ale wciąż można uzyskać do nich dostęp i dostosować je za pomocą niestandardowego skórowania.