Display only text field of Numeric Stepper in Flex - actionscript-3

Question

Is there any property of Numeric Stepper in Flex which can be used to display only the text field of Numeric Stepper and hide the arrow buttons? I need to display the complete Numeric Stepper on Mouse Roll over.

Answer 1

In flex 4 create custom skin with new state: over. Create new class NumericStepperExtends extends NumericStepper, listen rollover and rollout events, and change skin state.
NumericStepperExtends:
package classes
{
import flash.events.MouseEvent;
import spark.components.NumericStepper;
public class NumericStepperExtends extends NumericStepper
{
private var _over:Boolean = false;
public function NumericStepperExtends()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true);
addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true);
}
override protected function getCurrentSkinState():String
{
if (_over) return "over";
return super.getCurrentSkinState();
}
protected function onRollOutHandler(event:MouseEvent):void
{
_over = false;
invalidateSkinState();
}
protected function onRollOverHandler(event:MouseEvent):void
{
_over = true;
invalidateSkinState();
}
}
}
Skin:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minHeight="23" minWidth="40"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.NumericStepper")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
static private const exclusions:Array = ["textDisplay", "decrementButton", "incrementButton"];
/**
* #private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* #private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
private var cornerRadiusChanged:Boolean;
private var borderStylesChanged:Boolean;
/**
* #private
*/
override protected function commitProperties():void
{
super.commitProperties();
if (cornerRadiusChanged)
{
var cr:Number = getStyle("cornerRadius");
if (incrementButton)
incrementButton.setStyle("cornerRadius", cr);
if (decrementButton)
decrementButton.setStyle("cornerRadius", cr);
cornerRadiusChanged = false;
}
if (borderStylesChanged)
{
textDisplay.setStyle("borderAlpha", getStyle("borderAlpha"));
textDisplay.setStyle("borderColor", getStyle("borderColor"));
textDisplay.setStyle("borderVisible", getStyle("borderVisible"));
borderStylesChanged = false;
}
}
/**
* #private
*/
override public function styleChanged(styleProp:String):void
{
var allStyles:Boolean = !styleProp || styleProp == "styleName";
super.styleChanged(styleProp);
if (allStyles || styleProp == "cornerRadius")
{
cornerRadiusChanged = true;
invalidateProperties();
}
if (allStyles || styleProp.indexOf("border") == 0)
{
borderStylesChanged = true;
invalidateProperties();
}
}
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="over" />
</s:states>
<s:Button id="incrementButton" right="0" top="0" height="50%" tabEnabled="false"
includeInLayout.normal="false" visible.normal="false" includeInLayout.over="true"
skinClass="spark.skins.spark.NumericStepperIncrementButtonSkin" />
<s:Button id="decrementButton" right="0" bottom="0" height="50%" tabEnabled="false"
includeInLayout.normal="false" visible.normal="false" includeInLayout.over="true"
skinClass="spark.skins.spark.NumericStepperDecrementButtonSkin" />
<s:TextInput id="textDisplay" left="0" top="0" right="18" bottom="0"
skinClass="spark.skins.spark.NumericStepperTextInputSkin" />
</s:SparkSkin>
Don't forget add css for bind new component and new skin:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace classes "classes.*";
classes|NumericStepperExtends
{
skinClass: ClassReference("skins.NumericStepper");
}
</fx:Style>

Answer 2

you can create a mask (tutorial here), what is applied when mouse is not over.
so you have to:
1) create a masking object,
2) mask the stepper (stepper.mask = mymask)
3) add rollover and rollout listeners to mask, where you set or remove the mask.

Answer 3

You can try a very simple way: Use mx_internal:
var n : NumericStepper = new NumericStepper();
n.mx_internal::nextButton.visible = false;
n.mx_internal::prevButton.visible = false;