1 Reply Latest reply on Jun 5, 2011 10:45 PM by harihisu

    NumericStepper as Currency

    Daniel Pride Level 1

      I want to format a Numeric Stepper so it increments in $5.00 values and displays $5.00,$10.00 etc

      Setting the stepsize is obvious but how do you format it so it steps and displays currency?

      If that is too difficult,... how about just formatting it as 5.00, 10.00 etc ??

      Thanks

        • 1. Re: NumericStepper as Currency
          harihisu Level 2

          Hi, to format the displaying text of a NumericStepper, you can configure the valueFormatFunction to convert Number to String. Beside, because NumericStepper only store the value as text (the text you see), once you have a format function, you will need a parse function set by valueParseFunction parameter. See my example below.

           

          Hope this help.

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="library://ns.adobe.com/flex/spark" 
                            xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
                            >
               <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                    <mx:CurrencyFormatter id="usdFormatter" precision="2" 
                                               currencySymbol="$" decimalSeparatorFrom="."
                                               decimalSeparatorTo="." useNegativeSign="true" 
                                               useThousandsSeparator="true" alignSymbol="left"/>
               </fx:Declarations>
               <fx:Script>
                    <![CDATA[
                         private function nsValueFormatFunc(value: Number): String 
                         {
                              return usdFormatter.format( value );
                         }
                         private function nsValueParseFunc(value: String): Number
                         {
                              return parseInt(value.substring(1));
                         }
                    ]]>
               </fx:Script>
               <s:NumericStepper id="ns" valueFormatFunction="nsValueFormatFunc" valueParseFunction="nsValueParseFunc" 
                                     value="0" snapInterval="5" minimum="0" maximum="100" />
          </s:Application>