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.
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.
Otimo componente Fabio, é com pessoas assim que a comunidade Flex cresce no Brasil. Parabens cara e muito obrigado.
ResponderExcluirObrigado Jonas.
ResponderExcluirSe precisar estamos aí.
[]s
Magnífico! To fazendo um projetinho piloto para mostrar a uns amigos. Não vou apagar o teu nome ;) .
ResponderExcluirLeandro Sciola
ResponderExcluirOlá Fabio!
Parabéns pela iniciativa.
Excelente componente.
Abraço!
Boa tarde!
ResponderExcluirCara 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?
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.
ResponderExcluir[]s
Ola fabio,
ResponderExcluirestou 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é...
Ficou meio vago a tua situação e vc não deixou alguma forma de contato.
ResponderExcluirMas 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í.
Ola fabio,
ResponderExcluirMe 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.
Oi Fabio, boa tarde.
ResponderExcluirVc 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
Barcat, legal vc estar utilizando.
ResponderExcluirO 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í.
Resumindo, não é um erro do componente, mas sim de cast.
ResponderExcluirValeu demais, Fábio.
ResponderExcluirEstou 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,
Fabio,
ResponderExcluirTestei 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 ?
Ricardo,
ResponderExcluirFiz 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í.
Opa fábio, blz ? Estou utilizando seu componente, e por exemplo:
ResponderExcluirTenho 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
Lúcio, q bom q o componente está sendo útil para vc.
ResponderExcluirDaria para bloquear no handler do change (formatHandler) ou limitar utilizando a propriedade maxChars se não me engano.
boa tarde fabio!
ResponderExcluirja 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?
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.
ResponderExcluirQuanto colocar no DateField não sei lhe dizer, precisaria investigar o fonte do componente.
[]s
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.
ResponderExcluirRafaella Arcoverde
Este comentário foi removido pelo autor.
ResponderExcluirRafaela, tudo bem?
ResponderExcluirMuito 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
Olá Fabio,
ResponderExcluirMuito 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...
Obrigado wagner, fico feliz em saber q esse componente está lhe sendo útil.
ResponderExcluir[]s
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??
ResponderExcluirGabriel, legal saber q gostou do componente, espero q lhe seja muito útil.
ResponderExcluirFaz 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
Bom dia,
ResponderExcluirve 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.
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
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirEmerson,
Excluirvc tinha perguntado: "como faço para o cursor começar da esquerda e vice versa "
Vc irá precisar usar o método setCursor.