11 Replies Latest reply on Jul 14, 2011 5:41 AM by jfb00

    Textinput component questions

    jfb00 Level 3

      Hi All,

      I have an issue passing number data to textinput component.

      If my data have decimals like 8.45463 and I display the number with 2 decimal places like 8.45.

      If user doesn't modify the number when I save again in the database is only 8.45.

      It is a way to set the textInput component with value = 8.45463 and text = 8.45? I am sure with so many financial applications it should be something up there.

      I have the same issue with advance datagrid displaing numbers.

      Any ideas or comments?

      Thanks

       

      JFB

        • 1. Re: Textinput component questions
          saisri2k2 Level 4

          I would extend the textinput component and add an additional property X which holds the 8.452342 value and let the text get the formatted data like 8.45 from the X property. While saving, save the value in the X property.

          1 person found this helpful
          • 2. Re: Textinput component questions
            jfb00 Level 3

            Ok,

            How can I add another property to my extended component?

            <?xml version="1.0" encoding="utf-8"?>
            <mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="right" creationComplete="init()" >
                <mx:Script>
                    <![CDATA[
                        public function init():void
                        {
                            //init code
                        }
            
                        override public function set data(value:Object):void
                        {
                            super.data = value;
                        }
                    ]]>
                </mx:Script>
            </mx:TextInput>
            

             

            Thanks for you reply and help!

             

            JFB

            • 3. Re: Textinput component questions
              UbuntuPenguin Level 4

              Have you looked at the NumberFormatter class ?

              If I HAD to extend TextInput I might get a rough start with something like this.

               

              <s:TextInput>
                <Script>
                   private var _realValue:String;
                   [Bindable(Event="textChanged")]
                   public function get realValue():String
                   {

                   }
               
                  private var _numberFormatter:NumberFormatter;
                  override public function set text(value:String):void
                  {
                      _realValue = value;

                      // format the number here
                      super.text = formattedNumber;
                     
                      // Trigger bindings to textChanged.
                      dispatchEvent(new Event("textChanged"));
                  }
                 
                  

               

              But your issue sounds more like you want to format your data for UI considerations, not manipulate the actual data so I would first see if I could solve the problem with an out-of-the-box formatter class or a custom one if necessary, before making a custom UI component.  Remember kids, using an existing library/component/framework beats making a functionally equivalent one every day of the week and twice on Tuesday.

              1 person found this helpful
              • 4. Re: Textinput component questions
                jfb00 Level 3

                Thanks for you reply and help.

                I can set the real value number in my extended component and display the text with 2 decimals

                <?xml version="1.0" encoding="utf-8"?>
                <mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="right" creationComplete="init()" >
                    <mx:Script>
                        <![CDATA[
                            import mx.formatters.NumberFormatter;
                            
                            private function init():void
                            {
                                //init code
                            }
                            
                            private function formatDecimal(val:Number):String
                            {
                                var decimalFormatter: NumberFormatter = new NumberFormatter();
                                decimalFormatter.rounding = "nearest";
                                decimalFormatter.precision = 2;
                                decimalFormatter.useNegativeSign = false;
                                return decimalFormatter.format(val);
                            }
                            
                            public function set realValue(value:String):void
                            {
                                // format the number here
                                super.text = formatDecimal(Number(value));
                            }
                        ]]>
                    </mx:Script>
                </mx:TextInput>
                

                 

                Now in my application, how can I get the realValue from my component?

                I am getting this error:

                -1119: Access of possibly undefined property realValue through a reference with static type com:NumberInput.
                

                 

                Thanks

                 

                JFB

                • 5. Re: Textinput component questions
                  UbuntuPenguin Level 4

                  You need a corresponding getter.

                   

                  public function get realValue():String

                  {

                    return _realValue;

                  }

                  • 6. Re: Textinput component questions
                    jfb00 Level 3

                    Got it,

                    What about if the user focus on the component, i would like to display the realValue until the user leave the component i will display the two decimals.

                    Can this be done? any ideas?

                    Thanks

                     

                    JFB

                    • 7. Re: Textinput component questions
                      kokorito Level 4

                      use the focusOut event of the textInput to apply the formatter

                      focusIn to display the realValue

                      • 8. Re: Textinput component questions
                        jfb00 Level 3

                        Thanks,

                        Do you know the syntax?

                        I try this:

                        override public function focusIn():String

                        I am getting error:

                        1020: Method marked override must override another method.

                         

                        Best,

                        JFB

                        • 9. Re: Textinput component questions
                          jfb00 Level 3

                          Got it.

                          override protected function focusInHandler(event:FocusEvent):void
                                      {
                                          super.text = _realValue;
                                      }
                          
                          

                           

                          Now in the focus out, if the user change the number. How can I get the new number?

                          Thanks

                           

                          JFB

                          • 10. Re: Textinput component questions
                            jfb00 Level 3

                            Got it,

                            override protected function focusOutHandler(event:FocusEvent):void
                                        {
                                            _realValue = event.target.text;
                                            super.text =  formatDecimal(Number(_realValue));
                                        }
                            

                             

                            This is fun

                            Now, how can I limit to use only numbers (0-9), dot (.), comma (,) and negative (-)?

                            Thanks

                             

                            JFB

                            • 11. Re: Textinput component questions
                              jfb00 Level 3

                              Done,

                              Thanks for everyone reply and help.

                              If someone wants to use this component or make it better.

                              Best,

                               

                              JFB

                               

                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="right" creationComplete="init()" >
                                  <mx:Script>
                                      <![CDATA[
                                          import mx.formatters.NumberFormatter;
                                          import mx.controls.listClasses.*;
                                          
                                          private var _realValue:String;
                                          private const POSITIVE_COLOR:uint = 0x000000; // Black
                                          private const NEGATIVE_COLOR:uint = 0xFF0000; // Red
                                          
                                          private function init():void
                                          {
                                              //init code
                                              super.restrict = '0-9\.\\-';
                                          }
                                          
                                          private function formatDecimal(val:Number):String
                                          {
                                              var decimalFormatter: NumberFormatter = new NumberFormatter();
                                              decimalFormatter.rounding = 'nearest';
                                              decimalFormatter.precision = 2;
                                              decimalFormatter.useNegativeSign = false;
                                              return decimalFormatter.format(val);
                                          }
                                          
                                          public function set realValue(value:String):void
                                          {
                                              //Set real value
                                              _realValue = value;
                                              
                                              // format the number here
                                              super.text = formatDecimal(Number(_realValue));
                                          }
                                          
                                          public function get realValue():String
                                          {
                                              //Return component text real value
                                              return _realValue;
                                          }
                                          
                                          override protected function focusInHandler(event:FocusEvent):void
                                          {
                                              //Update component text real value
                                              super.text = _realValue;
                                          }
                                          
                                          override protected function focusOutHandler(event:FocusEvent):void
                                          {
                                              //Check if the source is blank
                                              if (event.target.text == '')
                                                  _realValue = '0';
                                              else
                                                  _realValue = event.target.text;
                                              
                                              //Update component text value
                                              super.text =  formatDecimal(Number(_realValue));
                                          }
                                          
                                          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                                              super.updateDisplayList(unscaledWidth, unscaledHeight);
                                              
                                              // Set the font color red for negative numbers
                                              setStyle('color', (parseFloat(_realValue) < 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
                                          }
                              
                                      ]]>
                                  </mx:Script>
                              </mx:TextInput>