Flex 4 Slider avec deux pouces

Question

quelqu'un sait comment faire un hslider personnalisé en Flex 4 (étincelle) avec deux pouces? Depuis Flex 4, la propriété thumbcount du composant slider n'est plus disponible (au niveau du composant mx, il était facile de le définir). Je dois styliser la piste et les pouces.

Un tutoriel serait bien.

thx, tux.

Answer 1

Je n'ai pas un tutoriel complet pour vous, mais voici les premières étapes de création d'un composant HSlider personnalisé . J'espère que cela aide.

Commencez par regarder la peau HSlider qui se compose de 2 parties, un pouce et une piste:

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

Maintenant, créez une nouvelle peau, sauf lui donner deux boutons:

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

Créez un nouveau composant qui étend HSlider et l'appelle quelque chose comme MultiButtonSlider. Substituez la fonction partAdded() et saisissez une référence à thumb2 quand elle est ajoutée.

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

Espérons que cela vous amène dans la bonne direction. N'oubliez pas de définir MultiButtonSlider.skinClass = "YourNewSkin"

Les prochaines étapes consisteront à le faire glisser et à convertir son point en valeur. Voir la fonction HSlider.pointToValue().

Answer 2

J'ai eu le même problème. J'utilise le composant mx au lieu du compontent des sparks pour le moment.

<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

Vous pouvez jeter un oeil à ce sujet (AS3)

Flash Range Slider Component

Answer 4

Pour compléter la réponse de shi11i, qui m'a mis sur la bonne voie, voici le code complet:

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

    } 

}} 

Et voici comment l'utiliser:

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

/> 

Espérons que cela aide.

Remarque: Dans mon cas, je ne géraient pas la draggability du second curseur, comme je ne l'ai pas pas besoin (il était une composante « lecture seule »). Je serais intéressé de voir comment vous le manipuler, cependant.

Answer 5

Patrick Mowrer a un libre sur le GitHub: https://github.com/pmowrer/spark-components

j'ai pu l'utiliser sans beaucoup d'un problème dans un récent projet. Le composant n'expose pas (à MXML) toutes les propriétés que le Spark fait (par exemple, dataTipFormatFunction est absent), mais on peut toujours accéder et les personnaliser par l'habillage personnalisé.