A entrada mascarada pode ajudar a orientar os usuários à medida que inserem dados, como adicionar cartão de crédito ou números de telefone aos campos do formulário com a formatação correta. Este controle simples pode melhorar drasticamente a UX do seu aplicativo .NET MAUI de comércio eletrônico!
Como diz um sentimento popular de atendimento ao cliente: “Quanto mais mimados forem seus clientes, mais eles amarão você!”
E é exatamente isso que pretendemos ao desenvolver aplicativos: criar experiências que facilitem a vida dos usuários.
Existem muitos cenários em que podemos conseguir isso, mas um dos mais comuns é quando os usuários precisam inserir dados em um formato específico, como número de telefone/conta, cartão de crédito ou PIN.
E sejamos honestos… Quantas vezes ficamos frustrados por não sabermos digitar esses inputs corretamente?
Por exemplo, imagine um usuário precisando inserir o número do seu cartão de crédito no aplicativo. Esse número geralmente contém 16 dígitos (o que já é bastante) e normalmente segue um formato como 1234-5678-9012-3456. Agora imagine ter que digitar manualmente esses travessões. parece tedioso, sujeito a erros e longe de ser uma experiência tranquila.
Mas tudo muda quando o aplicativo orienta o usuário durante a digitação – formatando automaticamente o número para corresponder ao layout esperado do cartão de crédito. Isso não apenas reduz a chance de erros, mas também faz com que o usuário se sinta mais confortável, mais confiante e com maior probabilidade de ver seu aplicativo como um aliado que facilita sua vida.
Esses pequenos detalhes podem fazer uma grande diferença na experiência geral do usuário. É por isso que neste artigo eu adoraria explicar Controle .NET MAUI MaskedEntry da Progress Telerik UI para .NET MAUIuma ferramenta que ajuda a orientar os usuários, aplicando formatos de entrada desde o primeiro toque.
Então, o que exatamente é o controle MaskedEntry?
.NET MAUI MaskedEntry é um controle da Telerik UI para .NET MAUI que permite aplicar formatos de entrada e validar campos de texto, orientando os usuários a inserir dados corretamente desde o início. Este controle faz parte dos mais de 60 componentes de UI profissionais incluídos na biblioteca Telerik UI para .NET MAUI.
Exemplos de uso no mundo real
Agora vamos falar sobre alguns exemplos do mundo real onde esse tipo de contribuição guiada realmente faz a diferença.
Cartão de crédito e números de conta
Imagine que você está fazendo um pagamento ou transferência bancária a partir do seu aplicativo e chega ao campo onde precisa inserir o número do cartão ou da conta. Requer uma longa sequência de dígitos, normalmente agrupados em blocos – como 16 dígitos para um cartão de crédito ou 12 dígitos para um número de conta, geralmente separados por travessões.
Mas o campo de entrada está completamente em branco. Não mostra um formato, não orienta. Você começa a digitar rapidamente, como sempre, e termina com algo como: 123456789012 ou 1234567890123456.
Notou algo errado? Estão faltando os traços necessários. Agora você tem que parar, voltar e adicionar os separadores que faltam.
Agora imagine uma experiência melhor: no momento em que você começa a digitar, o campo orienta você com o formato esperado. Você nem precisa digitar os travessões – eles já estão lá.
Tudo que você precisa fazer é inserir os números e o MaskedEntry cuida do resto. 😎
É isso que uma entrada mascarada faz. Não se trata apenas de restringir o que o usuário pode digitar – trata-se de orientá-lo para o formato correto sem fazê-lo pensar demais.
Códigos PIN
Imagine isto: você está em um aplicativo tentando alterar sua senha. Ele solicita que você insira um PIN de quatro dígitos para verificar sua identidade. Mas o campo de entrada não tem validação, nem orientação visual.
O que acontece se você inserir acidentalmente cinco dígitos em vez de quatro? Ou se você acertar uma letra sem perceber, mesmo que o PIN deva ser apenas numérico? E você só percebe o erro depois de várias tentativas fracassadas. Isso não é apenas frustrante: afeta a segurança do seu aplicativo.
Agora imagine o oposto: no momento em que você toca no campo, você sabe imediatamente que ele espera quatro números. Um espaço reservado o orienta e o campo não permite que você insira mais ou menos do que o necessário. Demora dois segundos e pronto.
Agora, vamos dar uma olhada na aparência do controle MaskedEntry
Para ajudar você a entender melhor, dê uma olhada no exemplo da imagem. Inclui vários campos (como telefone, IP e email), cada um com validações diferentes com base no que é necessário.
Observe como cada campo possui um formato específico, permitindo uma experiência de entrada mais clara, orientada e personalizada dependendo do tipo de informação inserida.
Configurando o Ambiente para Implementação 🤩
Agora que você explorou seus benefícios, é hora de ver como usá-lo em seu próprio aplicativo. Não se preocupe, começar é muito simples com a avaliação gratuita da Progress Telerik. Primeiro, conclua as seguintes etapas:
- Certifique-se de que seu aplicativo .NET MAUI esteja configurado
- Baixe Telerik UI para .NET MAUI
- Instale o componente Telerik em seu projeto
Após instalar o componente Telerik em seu projeto, você estará totalmente equipado para começar a construir sua solução.
Etapa 1: importar o namespace Telerik
Abra seu arquivo XAML e adicione esta linha para incluir os controles Telerik:
xmlns:telerik="(http://schemas.telerik.com/2022/xaml/maui)(http://schemas.telerik.com/2022/xaml/maui)"
Etapa 2: registrar o Telerik em MauiProgram.cs
Vá até o seu MauiProgram.cs arquivo e dentro do CriarMauiApp método, não se esqueça de adicionar .UseTelerik() para cadastrar a biblioteca. Apenas certifique-se de que isso aconteça antes .UseMauiApp().
using Telerik.Maui.Controls.Compatibility;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseTelerik()
.UseMauiApp()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}
}
Etapa 3: adicionando o namespace
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
Você está pronto para adicionar o controle! Agora vamos para a próxima seção, onde mostrarei um exemplo de como implementá-lo para cada tipo de máscara disponível no controle.
Tipos de entrada mascarada
O controle MaskedEntry permite definir o tipo de máscara de entrada que um campo usará por meio da propriedade Mask. Essa propriedade pode incluir caracteres literais e especiais, dependendo do tipo de entrada que você precisa configurar.
No total, esse controle oferece suporte a cinco tipos de máscaras para cobrir diferentes necessidades do seu aplicativo:
Texto
O texto type valida a entrada de texto geral.
Progress Telerik oferece uma ampla variedade de opções de máscara que permitem controlar o tipo de entrada permitida – desde dígitos e letras até caracteres opcionais e até símbolos. Você pode verificar a lista de referências para veja a tabela completa de opções disponíveis.
Vejamos um exemplo de máscara para número de conta bancária, onde:
▪️ Cada 0 representa um dígito obrigatório no formato.
▪️ Os hífens (-) são fixos e não podem ser movidos ou excluídos – eles sempre permanecem na mesma posição no formato de entrada.
▪️ O resultado é um campo que obriga o usuário a inserir o número da conta bancária no seguinte formato: 1234-5678-9012.
Numérico
O numérico type verifica se apenas valores numéricos são inseridos (podem ser do tipo double ou decimal).
Você pode definir um dos Especificadores de formato numérico padrão.
Agora, com base neste mesmo exemplo, vamos ver como aplicar a máscara percentual.
Agora vejamos outro exemplo – desta vez aplicando a máscara de moeda.
Regex
O expressão regular type é ideal para formatos personalizados, pois valida que a entrada do usuário (geralmente alfanumérica) corresponde a uma expressão regular específica. Isso é meu favorito! ⭐ A propriedade value é uma string. Telerik permite que você use uma variedade de expressões regulares para definir com precisão o que pode ser inserido no campo. (Você pode conferir a lista completa no documentação oficial.)
Vamos tentar o exemplo a seguir, onde o usuário só pode inserir letras e números – sem espaços ou caracteres especiais.
Aqui está o que isso faz:
▪️ A expressão ^(a-zA-Z0-9){6}$ significa que exatamente 6 alfanumérico caracteres são permitidos.
▪️ Se o usuário inserir menos ou mais caracteres, ou incluir algum símbolo especial, o campo apresentará um erro.
Endereço IP
O Endereço IP tipo captura e valida endereços IP com precisão. A propriedade value é uma string.
Vamos dar uma olhada em um exemplo de como fazer isso!
O e-mail type verifica se o usuário digita um endereço de e-mail válido. A propriedade Value é uma string.
Vamos dar uma olhada em um exemplo de como fazer isso!
Conclusão
E isso é tudo! 😎 Em apenas alguns minutos você aprendeu como trabalhar com o Telerik Entrada mascarada controle e todos os recursos que ele oferece – incluindo os diferentes tipos de máscara que você pode usar em seu .NET MAUI aplicações.
Espero que isso tenha sido útil e que você comece a integrá-lo aos seus aplicativos a partir de agora!
Lembre-se, Telerik UI para .NET MAUI vem com uma avaliação gratuita de 30 dias, então vá em frente:
Obrigado por ler! 💚💕