4 Replies Latest reply on Jan 22, 2010 3:08 AM by Theodore Denovan

    Custom Currency Format

    SeanDU

      I am a newbie for the flex. Please forgive me if this is a simple question.

       

      How can I add  the letter "K" at the end of the amount if it exceeds 1000. For example if the Amount is 15000 I would like to show as 15k?

      I do not think this is possible with the standard Currency formatter.

        • 1. Re: Custom Currency Format
          Gregory Lafrance Level 6

          As long as you do not need the currency symbol also displayed, you can do this:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:CurrencyFormatter id="cf" currencySymbol="k" alignSymbol="right"/>
            <mx:TextInput id="txt" change="txt.text=cf.format(txt.text);"/>
          </mx:Application>
          


          Otherwise you can do this:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[
                private function formatAmount():void{
                  txt.text=cf.format(txt.text);        
                  if(txt.text.charAt(txt.text.length-1)!="k"){
                    txt.text += "k";
                  }
                }
              ]]>
            </mx:Script>
            <mx:CurrencyFormatter id="cf" currencySymbol="$" alignSymbol="left"/>
            <mx:TextInput id="txt" change="formatAmount();"/>
          </mx:Application>
          


          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

          • 2. Re: Custom Currency Format
            SeanDU Level 1

            Thanks bunch for your response Greg.

            with this solution it is allways just adding "K" at the end.

            I want to add K only when it exceeds the 1000 value.

            for example if the amount is 15000 it should look like 15k not 15000k

            • 3. Re: Custom Currency Format
              Gregory Lafrance Level 6

              This kind of does what you want, but now I see that especially if you want the user to enter values, it becomes problematic because if user types 1000, it is changed to 1k, and then they should not be allowed to delete the k, unless they make the number at least 1001.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:Script>
                  <![CDATA[
                    private function formatAmount():void{
                      if(Number(txt.text) >= 1000){
                        if(txt.text.charAt(txt.text.length-1)!="k"){
                          txt.text = String(Number(txt.text)/1000);
                          txt.text += "k";
                        }
                      }
                    }
                  ]]>
                </mx:Script>
                <mx:TextInput id="txt" change="formatAmount();"/>
              </mx:Application>
              

               

              If this post answers your question or helps, please mark it as such.


              Greg Lafrance - Flex 2 and 3 ACE certified

              www.ChikaraDev.com

              Flex / AIR Development, Training, and Support Services

              • 4. Re: Custom Currency Format
                Theodore Denovan

                An alternative approach is to subclass the TextInput component and override the keyUp and text methods. This approach should automatically append/remove the k when the value exceeds 1000 or drops below 1000.

                 

                CustomCurrencyInput.mxml

                <?xml version="1.0" encoding="utf-8"?>
                <mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml">
                     <mx:Script>
                          <![CDATA[
                               import mx.formatters.NumberFormatter;
                               
                               /**
                                * Override the key up handler to append k if the number exceeds 1000
                                */
                               override protected function keyUpHandler(event:KeyboardEvent) : void
                               {
                                    super.keyUpHandler( event );
                                    
                                    if( text.length == 0 )
                                    {
                                         return;
                                    }
                                    
                                    var numberString     : String     = text;
                                                        
                                    // if a key has already been appended it, remove it
                                    if( numberString.charAt( numberString.length - 1 ) == "k" )
                                    {
                                         numberString     = numberString.substr( 0, numberString.length - 1 );
                                    }
                                    
                                    var number     : Number     = Number( numberString.replace( ".", "" ) );
                                   
                                    if( number >= 1000 )
                                    {
                                         super.text     = number / 1000 + "k";
                                       
                                         // update the cursor position (to the character before k)
                                         validateNow();
                                         textField.setSelection( textField.text.length - 1, textField.text.length - 1 );
                                    } else if( text.charAt( text.length - 1 ) == "k" ) {
                                         // remove the k
                                         super.text     = numberString.replace( ".", "" );
                                    }
                               }            
                               /**
                                * Override the text method to prevent the user entering any value other than a number
                                */
                               override public function set text(value:String) : void
                               {                    
                                    if( value.length == 0 )
                                    {
                                         super.text     = value;
                                         return;
                                    }
                                  
                                    var formatter     : NumberFormatter     = new NumberFormatter();
                
                                    // format the text (to remove any non-numeric characters)
                                    if( value.charAt( value.length - 1 ) == "k" )
                                    {
                                         value     = formatter.format( value.substr( 0, value.length - 1 ) );
                                    } else {
                                         // there is no k, format the whole string
                                         value     = formatter.format( value );
                                    }                    
                                    super.text     = value;
                               }
                          ]]>
                     </mx:Script>
                </mx:TextInput>