Flex 4 deslizante con dos pulgares

Question

Alguien sabe cómo hacer un hslider costumbre en Flex 4 (chispa) con dos pulgares? Desde Flex 4, la propiedad thumbcount del componente del control deslizante ya no está disponible (en el componente mx fue fácil establecerlo). Tengo que diseñar la pista y los pulgares.

Un tutorial sería bueno.

THX, esmoquin.

Answer 1

que no tienen un tutorial completo para usted, pero aquí son los primeros pasos en la creación de un componente hslider personalizada . Espero eso ayude.

empezar por mirar la piel hslider que se compone de 2 partes, un pulgar y una pista:

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

Ahora, crear una nueva piel, excepto que dar dos botones:

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

Crea un nuevo componente que amplíe HSlider y llámalo algo así como MultiButtonSlider. Reemplaza la función partAdded() y toma una referencia a thumb2 cuando se agrega.

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

Espero que esto comience en la dirección correcta. No se olvide de configurar el MultiButtonSlider.skinClass = "YourNewSkin"

Los próximos pasos serían hacer que sea arrastrable y convertir su punto en un valor. Vea la función HSlider.pointToValue().

Answer 2

que tenían el mismo problema. Estoy usando el componente mx en lugar del componente de chispas por ahora.

<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

Puede echar un vistazo a este tema (AS3)

Flash Range Slider Component

Answer 4

Como complemento a la respuesta de shi11i, que me puso en el camino correcto, aquí está el código 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()); 

    } 

}} 

Y aquí es cómo usarlo:

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

/> 

Espero que esto ayude.

Nota: En mi caso, no manejé la capacidad de arrastre del segundo cursor, ya que no lo necesitaba (era un componente de "solo lectura"). Sin embargo, me gustaría ver cómo lo manejas.

Answer 5

Patrick Mowrer tiene una libre sobre en GitHub: https://github.com/pmowrer/spark-components

yo era capaz de utilizarlo sin gran parte de un problema en un proyecto reciente. El componente no expone (a MXML) todas las propiedades que tiene Spark (por ejemplo, dataTipFormatFunction falta), pero aún se puede acceder y personalizar a través de un skin personalizado.