Pular para o conteúdo
CrossFly é 100% open sourceSiga no GitHub
CrossFlyCrossFly
Começar

Como criar um campo de senha com mostrar/ocultar

Propósito. Criar um campo que oculta os caracteres (exibindo ••••) e, opcionalmente, um ícone à direita que alterna entre mostrar e ocultar a senha.

APIs usadas

  • campo.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD) — liga o modo senha. Os caracteres são exibidos como passwordChar (padrão '*'; altere com .passwordChar('•')).
  • campo.<TextFieldStyle>getStyle().passwordToggle(true) — adiciona automaticamente o botão de mostrar/ocultar no ícone direito. Se passwordToggle estiver ligado, o campo já assume PASSWORD por padrão e injeta os ícones padrão de olho ( fechado / aberto) via ensurePasswordToggleIcons().
  • campo.<TextFieldStyle>getStyle().passwordHiddenIcon(icon) / .passwordVisibleIcon(icon) — personaliza os ícones (opcional).
  • TextField.isPassword() — retorna true enquanto o modo for PASSWORD (útil para lógica condicional).
  • TextField.getText() — retorna a senha em texto puro (o mascaramento é só visual).

O toggle é tratado internamente em onTouchUp: ao tocar o ícone direito, o modo alterna entre PASSWORD e NORMAL nos estilos default e focused, e o ícone é trocado. Você não precisa registrar rightIconAction — não sobrescreva o ícone direito se quiser o comportamento automático.

Exemplo completo (copiar, colar e rodar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // TextFieldStyle (config no estilo)

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Senha simples (sem botão de mostrar)
      TextField senha = new TextField("");
      senha.caption("Senha");
      senha.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD);

      // Senha com botão mostrar/ocultar
      TextField senhaToggle = new TextField("");
      senhaToggle.caption("Confirmar senha");
      senhaToggle.<TextFieldStyle>getStyle()
         .mode(EditMode.PASSWORD)
         .passwordToggle(true);   // injeta o ícone de olho automaticamente

      Label resultado = new Label("");

      Button entrar = new Button("Entrar");
      entrar.onAction(o ->
      {
         String pwd = senha.getText();          // texto real, não mascarado
         String pwd2 = senhaToggle.getText();
         if (!pwd.equals(pwd2))
         {
            Hint.show("As senhas não coincidem", 2000);
            return;
         }
         resultado.setText("Senha confirmada (" + pwd.length() + " caracteres)");
      });

      add(LAY_FILL, senha);
      add(LAY_FILL, senhaToggle);
      add(LAY_AUTO, entrar);
      add(LAY_FILL, resultado);
   }
}

O trecho abaixo mostra só o miolo. Para rodar, coloque-o no esqueleto MainWindow acima.

Trecho mínimo

import dev.crossfly.ui.*;
import dev.crossfly.ui.style.*;
import static dev.crossfly.ui.UIConstants.EditMode;

// Senha simples (sem botão de mostrar)
TextField senha = new TextField("");
senha.caption("Senha");
senha.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD);

// Senha com botão mostrar/ocultar
TextField senhaToggle = new TextField("");
senhaToggle.caption("Senha");
senhaToggle.<TextFieldStyle>getStyle()
   .mode(EditMode.PASSWORD)
   .passwordToggle(true);   // injeta o ícone de olho automaticamente

Button entrar = new Button("Entrar");
entrar.onAction(o ->
{
   String pwd = senhaToggle.getText(); // texto real, não mascarado
   // ... autentica
});

Aprofunde-se

Esta página foi útil?