Custom Slider Showing values on thumb

Hi all,

Just check out my Custom slider for flex with the valus shown on and above the thumb.

I have a Custom Slider in which the create children method has been overriden to add a label and its x and y positions are set.A listner for Mouse button up has been written to update the value of the label.Once the top label value is updated a custom event called ThumbUpdateEvent is triggered to notify the change in the value.

I have a slider thumb skin in which a uitextfield is used to display the value  inside the thumb.The uitextfield is set when the ThumbUpdateEvent is dispatched.

CustomSlider.as

package com
{
import flash.events.MouseEvent;

import mx.controls.Label;
import mx.controls.sliderClasses.Slider;
import mx.controls.sliderClasses.SliderThumb;
import mx.core.mx_internal;

use namespace mx_internal;

public class CustomSlider extends SliderThumb
{
public var lab:Label;
public var ob:Array;
public var num:int;
public var index:int;
public function CustomSlider()
{
super();
this.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
this.width=20;
this.setStyle(“fontSize”,12);
this.setStyle(“Color”,”red”);

}
private function onMouseUp(evt:MouseEvent):void{
ob=Slider(owner).values;
num=ob[thumbIndex]
this.index=thumbIndex;
lab.text=num.toString();
//this.label=num.toString();
this.dispatchEvent(new ThumbUpdateEvent(ThumbUpdateEvent.Updated,num,true));
//Alert.show(ob.toString());
}
override protected function createChildren():void
{
if(!lab)
{
lab=new Label();
lab.x=-10;
lab.y=-20;
lab.width=100;
lab.height=100;
lab.setStyle(“color”,”blue”);
this.addChild(lab);
}
}

}
}

ThumbUpdateEvent.as

package com
{
import flash.events.Event;

public class ThumbUpdateEvent extends Event
{
public static var Updated:String=”Updated”;
public var ThumbVal:int;
public function ThumbUpdateEvent(type:String,Value:int, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.ThumbVal=Value;
}

}
}

DownloadSource

Custom TimeInput(24 hrs) with TimeValidator in Flex

Hi all,

here comes the custom TimeInput for flex with time validator,I have  Timevalidator.as extending Validator which validates for the 24 hrs Time format.

The CustomText.as extending the TextInput has overridden keyboardup and keyboarddown handlers in which the left and right arrow key cases are set to select the text .

Note that the delete and backspace keys doesnot have any effects as these keys are restricted by making the focus null during keyDown and again setting the focus in the text during keyUp

Screenshot

CustomText.as

package com
{
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

import mx.controls.Alert;
import mx.controls.TextInput;
import mx.events.FlexEvent;
import mx.events.ValidationResultEvent;

public class CustomText extends TextInput
{

public var nameStr:String;
private var valid:TimeValidator;
private var _text:String;
private var selectionStart:int=0;
private var selectionEnd:int=0;

public var validTime:Function=new Function();
public var inValidTime:Function=new Function();

public function CustomText()
{
super();
this.maxChars=8;
this.addEventListener(FlexEvent.CREATION_COMPLETE,assignValues);
this.restrict=”0-9″;
valid=new TimeValidator();
valid.source=this;
valid.property=”text”;
valid.addEventListener(ValidationResultEvent.VALID,validTime);
valid.addEventListener(ValidationResultEvent.INVALID,inValidTime);
}
override public function set text(value:String):void
{
if(this.textField)
{
_text=value;
this.textField.text=value;
dispatchEvent(new Event(“textChanged”));
invalidateProperties();
invalidateSize();
invalidateDisplayList();
dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));
}
}
override public function get text():String
{
if(textField)
return textField.text;
else
return “”;
}
private function assignValues(e:FlexEvent):void
{
this.text=”00:00:00″;
this.setFocus();
selectionStart=0;
selectionEnd=2;
this.setSelection(selectionStart,selectionEnd);
}
private function validRes(e:ValidationResultEvent):void
{
Alert.show(e.toString());
}
private function invalidRes(e:ValidationResultEvent):void
{
Alert.show(“invalid”);
}
override protected function keyDownHandler(event:KeyboardEvent):void
{
switch (event.keyCode)
{
case Keyboard.BACKSPACE:
stage.focus=null;
break;
case Keyboard.DELETE:
stage.focus=null;
event.preventDefault();
break;
case Keyboard.RIGHT:
if(selectionStart<=6)
{
selectionStart=selectionStart+3;
selectionEnd=selectionEnd+3;
}
else
{
selectionStart=6;
selectionEnd=8;
}
this.setSelection(selectionStart,selectionEnd);
break;
case Keyboard.LEFT:
if(selectionStart>0)
{
selectionStart=selectionStart-3;
selectionEnd=selectionEnd-3;
}
else
{
selectionStart=0;
selectionEnd=2;
}
this.setSelection(selectionStart,selectionEnd);
break;
case Keyboard.ENTER:
{
dispatchEvent(new FlexEvent(FlexEvent.ENTER));
break;
}
}
}
override protected function keyUpHandler(event:KeyboardEvent):void
{
switch(event.keyCode)
{
case Keyboard.BACKSPACE :
stage.focus=this;
this.setFocus();
break;
case Keyboard.DELETE :
stage.focus=this;
this.setFocus();
break;
}
}
override public function setFocus():void
{

this.setSelection(selectionStart,selectionEnd);
textField.setFocus();

}

}
}

TimeValidator.as

package com
{
import mx.controls.Alert;
import mx.validators.ValidationResult;
import mx.validators.Validator;

public class TimeValidator extends Validator
{
private var results:Array;

public function TimeValidator()
{
super();
}
override protected function doValidation(value:Object):Array
{
var str:String=value.toString();
results=super.doValidation(value);
if(int(str.slice(0,2))>=24)
{
results.push(new ValidationResult(false,null,”not a valid hour”,”Enter Hours less than 24″));
}
else if(int(str.slice(3,5))>=60)
{
results.push(new ValidationResult(false,null,”not a valid minute”,”Enter Minute less than 60″));
}
else if(int(str.slice(6,8))>=60)
{
results.push(new ValidationResult(false,null,”not a valid second”,”Enter Seconds less than 60″));
}
return results;
}
}
}

 

It may have bugs too ,so ill update a cleaner one soon

DownLoad Source