16 Replies Latest reply on Feb 14, 2013 10:50 AM by marciofermino

    Flex Mobile textinput

    marciofermino Level 1

      Hi, I type from Brazil,

      Please I need example textinput with mask for Flex Mobile,


      Thank's

        • 1. Re: Flex Mobile textinput
          megharajdeepak Level 1

          TextInput is already available for Flex Mobile.

          Not sure if that is what you wanted to ask?

          • 2. Re: Flex Mobile textinput
            marciofermino Level 1

            okay, I need field with mask

             

            example:

             

            Phone

            (55)9901-4416

            (xx)xxxx-xxxx

             

            is possibile?

            • 3. Re: Flex Mobile textinput
              komal harkut Level 1

              Are you talking about validators?

              eg: Phone Number validator.

               

              Also, you can combine Formatter with Validator to get exact format in your textinput.

              • 4. Re: Flex Mobile textinput
                marciofermino Level 1

                ok, bus I would like at runtime...

                 

                Thanks,

                • 5. Re: Flex Mobile textinput
                  komal harkut Level 1

                  I created a sample application.Check if this can help you.

                   

                  <?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">

                            <s:layout>

                                      <s:VerticalLayout/>

                            </s:layout>

                   

                   

                            <fx:Script>

                                      <![CDATA[

                                                import mx.events.ValidationResultEvent;

                   

                                                private var validResult:ValidationResultEvent;

                   

                                                protected function button1_clickHandler(event:MouseEvent):void

                                                {

                                                          validResult= phValidator.validate();

                                                          if (validResult.type == ValidationResultEvent.VALID)

                                                          {

                                                                    readyNum.text=phFormatter.format(phNum.text);

                                                          }

                                                          else

                                                                    readyNum.text="";

                                                }

                   

                                      ]]>

                            </fx:Script>

                            <fx:Declarations>

                                      <mx:PhoneFormatter id="phFormatter" formatString="(###) ###-####" validPatternChars="#-() "/>

                                      <mx:PhoneNumberValidator id="phValidator" property="text" source="{phNum}"  allowedFormatChars=""/>

                            </fx:Declarations>

                   

                            <mx:Form>

                                      <mx:FormItem label="Enter 10-digit Phone Number:">

                                                <s:TextInput id="phNum" text="" width="100%"/>

                                      </mx:FormItem>

                                      <mx:FormItem label="Your Formatted Phone Number: ">

                                                <s:TextInput id="readyNum" text="" width="100%" editable="false"/>

                                      </mx:FormItem>

                                      <mx:FormItem>

                                                <s:Button label="Validate and Format" click="button1_clickHandler(event)"/>

                                      </mx:FormItem>

                            </mx:Form>

                   

                   

                  </s:Application>

                  • 6. Re: Flex Mobile textinput
                    marciofermino Level 1

                    Friend, I need one example, mask in run time

                    EX:

                    (999)9999-9999

                     

                    This, only validator clicked button1, I need in runtime.

                     

                    Thank’s.

                     

                     

                    I type from Brazil and you?

                    • 7. Re: Flex Mobile textinput
                      komal harkut Level 1

                      you can apply the following handler on Change event of textinput phNum :

                       

                      protected function phNum_changeHandler(event:TextOperationEvent):void

                                                    {

                                                              if(phNum.text.length >=10)

                                                              {

                                                                        validResult= phValidator.validate();

                                                                        if (validResult.type == ValidationResultEvent.VALID)

                                                                        {

                                                                                  phNum.text=phFormatter.format(phNum.text);

                                                                        }

                                                                        else

                                                                                  readyNum.text="";

                                                              }

                                                              else

                                                                        readyNum.text= "";

                                                    }

                       

                      But then,after runtime format on the same textinput, it would be giving error message saying 'invalid characters in textinput' because of the round brackets.

                       

                      So, you can apply the formatting on another textinput i.e readyNum  on change event of the previous textinput.

                      Might help you.

                      • 8. Re: Flex Mobile textinput
                        marciofermino Level 1

                        Friend, I could not, the code for FlexMobile

                         

                         

                         

                        <?xml version="1.0" encoding="utf-8"?>

                        <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                                            xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" xmlns:mx="library://ns.adobe.com/flex/mx">

                         

                                  <fx:Script>

                                            <![CDATA[

                                                      import mx.events.ValidationResultEvent;

                         

                                                      import spark.events.TextOperationEvent;

                         

                         

                                                      private var validResult:ValidationResultEvent;

                         

                                                      protected function button1_clickHandler(event:MouseEvent):void

                                                      {

                                                                validResult= phValidator.validate();

                                                                if (validResult.type == ValidationResultEvent.VALID)

                                                                {

                                                                          readyNum.text=phFormatter.format(phNum.text) ;

                                                                }

                                                                else

                                                                          readyNum.text="";

                         

                                                      }

                         

                                                      protected function phNum_changeHandler(event:TextOperationEvent):void

                                                      {

                                                                if(phNum.text.length >9)

                                                                {

                                                                          validResult= phValidator.validate();

                                                                          if (validResult.type == ValidationResultEvent.VALID)

                                                                          {

                                                                                    phNum.text=phFormatter.format(phNum.text);

                                                                          }

                                                                          else

                                                                                    readyNum.text="";

                                                                }

                                                                else

                                                                          readyNum.text= "";

                                                      }

                         

                                            ]]>

                                  </fx:Script>

                         

                         

                                  <fx:Declarations>

                         

                                            <mx:PhoneFormatter id="phFormatter" formatString="####-####" validPatternChars="#-() "/>

                                            <mx:PhoneNumberValidator id="phValidator" property="text" source="{phNum}"  allowedFormatChars=""/>

                                  </fx:Declarations>

                         

                         

                         

                                                      <s:TextInput id="phNum" x="83" y="25" width="274" text="(###) ###-####" change="phNum_changeHandler(event)"/>

                                                      <s:TextInput id="readyNum" x="83" y="66" width="274" editable="false" text=""/>

                         

                                  <s:Button x="33" y="167" width="74" click="button1_clickHandler(event)"/>

                         

                        </s:View>

                         

                        Thanks.

                        • 9. Re: Flex Mobile textinput
                          komal harkut Level 1

                          Replace

                          <mx:PhoneFormatter id="phFormatter" formatString="####-####" validPatternChars="#-() "/>


                          with

                           

                          <mx:PhoneFormatter id="phFormatter" formatString="#####-#####" validPatternChars="#"/>

                          • 10. Re: Flex Mobile textinput
                            marciofermino Level 1

                            still whith error

                            • 11. Re: Flex Mobile textinput
                              komal harkut Level 1

                              Post your error please.

                              • 12. Re: Flex Mobile textinput
                                marciofermino Level 1

                                still whith error

                                Thank's

                                Image.png

                                • 13. Re: Flex Mobile textinput
                                  komal harkut Level 1

                                  add the following property to PhoneNumberValidator

                                  allowedFormatChars="-"

                                   


                                   


                                  • 14. Re: Flex Mobile textinput
                                    marciofermino Level 1

                                    Hi Friend

                                    :-)

                                     

                                    Still with problem mask for input in the Flex Mobile

                                    Any sugestion ? or idea ?

                                    • 15. Re: Flex Mobile textinput
                                      komal harkut Level 1

                                      Can you post your code over here so that I can just check it?

                                      • 16. Re: Flex Mobile textinput
                                        marciofermino Level 1

                                        Friend,I need code example you have ?