Saltar al contenido
CrossFly es 100% open sourceSíguenos en GitHub
CrossFlyCrossFly
Empezar

Esta página fue traducida automáticamente del portugués y puede contener errores. La versión en portugués es la canónica.

Cómo crear un campo de contraseña con mostrar/ocultar

Propósito. Crear un campo que oculta los caracteres (mostrando ••••) y, opcionalmente, un icono a la derecha que alterna entre mostrar y ocultar la contraseña.

APIs usadas

  • campo.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD) — activa el modo contraseña. Los caracteres se muestran como passwordChar (por defecto '*'; cámbialo con .passwordChar('•')).
  • campo.<TextFieldStyle>getStyle().passwordToggle(true) — añade automáticamente el botón de mostrar/ocultar en el icono derecho. Si passwordToggle está activado, el campo ya asume PASSWORD por defecto e inyecta los iconos por defecto de ojo (cerrado / abierto) vía ensurePasswordToggleIcons().
  • campo.<TextFieldStyle>getStyle().passwordHiddenIcon(icon) / .passwordVisibleIcon(icon) — personaliza los iconos (opcional).
  • TextField.isPassword() — devuelve true mientras el modo sea PASSWORD (útil para lógica condicional).
  • TextField.getText() — devuelve la contraseña en texto plano (el enmascaramiento es solo visual).

El toggle se maneja internamente en onTouchUp: al tocar el icono derecho, el modo alterna entre PASSWORD y NORMAL en los estilos default y focused, y el icono se cambia. No necesitas registrar rightIconAction — no sobrescribas el icono derecho si quieres el comportamiento automático.

Ejemplo completo (copiar, pegar y ejecutar)

package com.exemplo;

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

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Contraseña simple (sin botón de mostrar)
      TextField senha = new TextField("");
      senha.caption("Senha");
      senha.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD);

      // Contraseña con botón mostrar/ocultar
      TextField senhaToggle = new TextField("");
      senhaToggle.caption("Confirmar senha");
      senhaToggle.<TextFieldStyle>getStyle()
         .mode(EditMode.PASSWORD)
         .passwordToggle(true);   // inyecta el icono de ojo automáticamente

      Label resultado = new Label("");

      Button entrar = new Button("Entrar");
      entrar.onAction(o ->
      {
         String pwd = senha.getText();          // texto real, no enmascarado
         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);
   }
}

El fragmento de abajo muestra solo el núcleo. Para ejecutarlo, colócalo en el esqueleto MainWindow de arriba.

Fragmento mínimo

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

// Contraseña simple (sin botón de mostrar)
TextField senha = new TextField("");
senha.caption("Senha");
senha.<TextFieldStyle>getStyle().mode(EditMode.PASSWORD);

// Contraseña con botón mostrar/ocultar
TextField senhaToggle = new TextField("");
senhaToggle.caption("Senha");
senhaToggle.<TextFieldStyle>getStyle()
   .mode(EditMode.PASSWORD)
   .passwordToggle(true);   // inyecta el icono de ojo automáticamente

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

Profundiza

¿Te resultó útil esta página?