domingo, 19 de abril de 2009

FormattedInput

Estou lançando um novo controle.
Inspirado no meu controle anterior NumericInput (tanto que depende deste) e do MaskedTextInput, criei o FormattedInput.

FormattedInput auxilia em campos que só aceitam números preenchidos com zeros a esquerda, tais como: cep, cnpj, cpf, telefone. Na classe há algumas constantes para as entradas mais comuns, mas a propriedade inputFormat permite informar estas ou outras.

Como no NumericInput deve-se usar a propriedade value no lugar de text. Isto foi necessário para evitar o erro de estouro de pilha, pois imagine, é modificado a propriedade text esta por sua vez precisa formatar ela mesma ficando assim num loop perpétuo. Acho mais adequado setar os valores diretamente na propriedade text, mas no momento ficou mais prático criar a propriedade value, quem sabe numa próxima versão. E mesmo assim a propriedade value retorna um Number o que talvez seja útil dependendo da forma que o valor será persistido.

A alteração da propriedade inputFormat em runtime provoca a reformatação do valor.

O código fonte com exemplo pode ser baixado aqui. O fonte também se encontra na seção de arquivos da Lista Flex-Brasil, só que é disponível somente para os membros da lista.

30 comentários:

  1. Otimo componente Fabio, é com pessoas assim que a comunidade Flex cresce no Brasil. Parabens cara e muito obrigado.

    ResponderExcluir
  2. Obrigado Jonas.
    Se precisar estamos aí.

    []s

    ResponderExcluir
  3. Magnífico! To fazendo um projetinho piloto para mostrar a uns amigos. Não vou apagar o teu nome ;) .

    ResponderExcluir
  4. Leandro Sciola

    Olá Fabio!
    Parabéns pela iniciativa.
    Excelente componente.

    Abraço!

    ResponderExcluir
  5. Boa tarde!

    Cara gostaria de saber como dar um borderRadius no campo InputText estou tendo dificuldade para fazer isso tentei outro componente o MasterTextInput mas também não funciona está opção.

    Pode me ajudar?

    ResponderExcluir
  6. Cristian, no Flex 3 Halo vc tem o estilo cornerRadius e no Flex 4 vc usa um Skin e no objeto Rect existe propriedades radiusX, radiusY entre outras.

    []s

    ResponderExcluir
  7. Ola fabio,
    estou começando a trabalhar com flex. já de cara me debato com uma problema. Estou lutando para jogar uma chave estrangeira para um datagrid. Se puder me ajudar agradeço!
    até...

    ResponderExcluir
  8. Ficou meio vago a tua situação e vc não deixou alguma forma de contato.
    Mas vamos lá, digamos q vc está recebendo um objeto cliente e nele tem um objeto endereco e no teu datagrid vc quer mostrar numa coluna a cidade dele. A parti do sdk 3.5 vc pode fazer algo como pessoa.endereco.cidade no dateField da tua coluna. E vc tb tem o atributo labelFunction q vc indica uma função q deve retornar uma string q será utilizada para ser mostrada na coluna.

    Espero ter ajudado.
    Qq coisa estamos aí.

    ResponderExcluir
  9. Ola fabio,
    Me chamo Roney, sou de Siqueira Campos PR, sou aluno de BSI(roney1410@hotmail.com) pela FIO. Foi eu que postei a duvida sob o dataGrid, já tentei utilizar a labelFunction, creio que não consegui montar o metodo certo. Se vc podesse me auxiliar a montar esse metodo desde já agradeço.
    Ate... obrigado por me atender.

    ResponderExcluir
  10. Oi Fabio, boa tarde.

    Vc me deu uma dica sobre o seu componente no GUJ, no final de semana.
    Passei a utiliza-lo agora pela manha, mas estou com um retorno de erro quando uso a propriedade .value
    A mensagem é a seguinte: 1118: Implicit coercion of a value with static type Object to a possibly unrelated type String.

    consegui contornar ela dando um cast no campo assim:
    String(txt_Cpf.value)

    é isso mesmo que eu deveria fazer para inserir o dado no banco?

    Abraço

    ResponderExcluir
  11. Barcat, legal vc estar utilizando.
    O erro é q vc deve estar tentando passar o conteúdo de value q é Object para uma variável do tipo String algo como:
    var myVar:String = txt_Cpf.value;
    Por isso a mensagem, vc fazendo o cast resolve ou:
    var myVar:String = txt_Cpf.value.toString();

    []s
    Qq coisa estamos aí.

    ResponderExcluir
  12. Resumindo, não é um erro do componente, mas sim de cast.

    ResponderExcluir
  13. Valeu demais, Fábio.

    Estou iniciando no flex e migrei do .net para o Java tem apenas 9 meses...
    São 9 meses que eu digo, estou gostando muito...mais do que a antiga tecnologia. (tem suas diferenças).

    Abraço,

    ResponderExcluir
  14. Fabio,
    Testei o exemplo que vc fala e deu os erros: 1046: Type was not found or was not a compile-time constant: FormattedInput. Não mudei nada no exemplo. O que pode estar acontecendo ?

    ResponderExcluir
  15. Ricardo,
    Fiz um teste aqui e tudo ok.
    No src da tua aplicação irá ficar:
    src
    FormattedInputApp.mxml
    fs > controls
    FormattedInput.as
    NumericInput.as

    Faça um refresh no projeto. Se vc colocou como Flex Library Project no Flex Builder 3 veja em botão direito > Properties > Flex Library Build Path > Aba Classes se a classe está marcada.

    []s
    Qq coisa estamos aí.

    ResponderExcluir
  16. Opa fábio, blz ? Estou utilizando seu componente, e por exemplo:

    Tenho um text de cep com a mascara criada. O Problema é, se eu continuo digitando o texto acima dos 8 digitios, ele só vai substituidno, quando deveria travar para não poder mais digitar... sabe me dizer algo sobre isso ? abs

    ResponderExcluir
  17. Lúcio, q bom q o componente está sendo útil para vc.
    Daria para bloquear no handler do change (formatHandler) ou limitar utilizando a propriedade maxChars se não me engano.

    ResponderExcluir
  18. boa tarde fabio!
    ja uso seu componente ha algum tempo, show de bola.
    gostaria de saber como eu coloco a mascara em um datafield, e como eu faço pra quando eu digitar começar da esquerda pra direita?

    ResponderExcluir
  19. Tudo bem Krys, para começar da esquerda tem um style no meu componente setando o textAlign, vc poderia mudar este style mas acho q irá precisar refatorar o componente, pois estou partindo do pressuposto do alinhamento do texto.
    Quanto colocar no DateField não sei lhe dizer, precisaria investigar o fonte do componente.

    []s

    ResponderExcluir
  20. Olá fábio, adorei o trabalho. Gostaria de saber como eu faço pra o componente aceitar números negativos também. Tentei modificar o restrict mais não funcionou.
    Rafaella Arcoverde

    ResponderExcluir
  21. Este comentário foi removido pelo autor.

    ResponderExcluir
  22. Rafaela, tudo bem?
    Muito bom saber q gostou.
    A idéia deste componente formatar conforme caracteres especias sendo o - um deles, com isso o usuário digitaria somente os números.
    Talvez o q vc precise é o outro componente o NumericInput q tem uma propriedade chamada useNegativeSign

    []s

    ResponderExcluir
  23. Olá Fabio,
    Muito bom, Gostei do seu componente.
    Eu estou tentando usar-lo em um projeto, mas não consegui deixa-lo no layout da minha aplicação, tipo: com bordas arredondadas, no caso da mascara de um telefone parar de receber dígitos quando completar o número.
    Esse não foi o primeiro exemplo seu que eu utilizei, muito bom mesmo o seu trabalho...

    ResponderExcluir
  24. Obrigado wagner, fico feliz em saber q esse componente está lhe sendo útil.

    []s

    ResponderExcluir
  25. Olá Fabio, muito legal o componente, comecei a pouco tempo com o FLEX, e sabe gostaria de fazer uma alteração no componente para que o formatedinput não ficasse com o zero no começo antes de ser alterado, e que este campo fosse preenchido da esquerda para a direita, daria pra me dar uma luz??

    ResponderExcluir
  26. Gabriel, legal saber q gostou do componente, espero q lhe seja muito útil.
    Faz tempo q estou para migrar estes componentes para Flex 4 inclusive poder escolher o alinhamento do preenchimento, mas a correria está grande.

    O 0 inicial vc pode controlar pelo atrubuto .text e o preenchimento pelo style textAlign, mas este último terá q controlar o input devido a formaação.

    Fique a vontade para alterá-lo, qq coisa estamos por aí.

    []s

    ResponderExcluir
  27. Bom dia,
    ve se pode me ajudar quero usar NumericInput so que nao assim,
    0.00 e digitando valores. Quero o seguinte ir digitando tanto como 1.00 como 1,00.

    ResponderExcluir
  28. Usei i18n então irá obedecer a máscara numérica conforme o locale da sua app, se en-US 1.00 se pt-BR 1,00

    ResponderExcluir
  29. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Emerson,
      vc tinha perguntado: "como faço para o cursor começar da esquerda e vice versa "

      Vc irá precisar usar o método setCursor.

      Excluir