TextInput – Material Design

TextInput es una caja de texto que implementa el estilo de Material Design popular en dispositivos móviles, pero este swing es para aplicaciones de escritorio en java, esta componente viene con su par TextInputPass para contraseñas. La librería es totalmente gratuita y es su «primera versión primera» 🙂 así que es 99% posible que se encuentren errores, si así fuera por favor notificar en los comentarios.

Instalación

Paso 1

Descomprima el archivo RAR en algún sitio de su computadora (Ej.: «C:\Program Files\mis librerias\materialdesign«, «D:\java\librerias\materialdesign«, etc )

En el encontrara 2 archivos:

MDTextInput-1.0.8-bin.jar La librería de Material Design
javadoc\ Documentación

Paso 2

Con Netbeans abierto:

Dirígete al menú Herramientas → Librerias, se abrira una ventana:

1. Presione el botón «new library…» para crear una nueva librería con el nombre de «Material Design»

2. En la pestaña «Ruta de clases», presionar el botón «Archivo JAR/Carpeta…» y buscar en el disco el archivo MDTextInput-1.0.8-bin.jar del paso 1

3. En la Pestaña «Javadoc» , presionar el boton «Archivo ZIP/Carpeta…» y buscar en disco la carpeta «javadoc» del paso 1

4. Presionar «Aceptar» para guardar la libreria

Paso 3

1. En la sección de «Paleta», realizar clic derecho → Administrador de paleta…

2. En la ventana «Administrador de Paleta«, clic en «Nueva categoría…», en nombre de categoría escribir «Material Design»

3. Presionar el botón «Add from Library…» (Agregar desde librería) → buscar y seleccionar la librería creada en el paso 2, presionar siguiente.

4. Seleccionar «TextInput» y «TextInputPass», presionar siguiente

5. Seleccionar la carpeta «Material Design» y presionar «Terminar» «Cerrar»

Si siguió todos los pasos correctamente, en la sección de Paleta , debe tener lo siguiente:

Aplicación de ejemplo

Para este ejemplo desarrollaremos un formulario de login al estilo Google Mail 🙂

Paso 1. Crea un proyecto en Netbeans llamado «Test Material Design» y agrega un JFrame como se ve en la siguiente imagen:

Utiliza el Look and Feel de «Windows«, es el que mejor se acomoda a este estilo minimalista.

Paso 2. En el diseñador de interfaces, agrega 1 textInput y 1 textInputPass, ademas de 1 botón como se ve a continuación:

Paso 3. Tanto textInput como textInputPass tienen las mismas propiedades que un JTextField, ademas de unas propias:

colorPrimary: Para el color del componente cuando este gane foco
counterEnabled: Para mostrar u ocultar el contador de caracteres
error: Para colocar el mensaje de error
errorEnabled: Para mostrar u ocultar el mensaje de error
hint: para el texto de ayuda
maxLength: Para indicar el contador máximo de caracteres

Selecciona textInput1 y cambia las siguientes propiedades:

maxLength = 16
hint = «Nombre de usuario»
colorPrimary = [0,102,255]

Selecciona textInputPass1 y cambia las siguientes propiedades:

counterEnbled = false
hint = «Password»
colorPrimary = [0,102,255]

Paso 4. Doble clic en el botón (jButton1) para abrir en modo código y pegar el siguiente código:

    private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        if (this.textInput1.getText().trim().length() > 0) {
            textInput1.setErrorEnabled(false);
            if (this.textInput1.getText().trim().length() > 16) {
                textInput1.setError("Longitud maxima de " + textInput1.getMaxLength() + " caracteres");
                textInput1.setErrorEnabled(true);
            } else if (this.textInputPass1.getText().trim().length() > 0) {
                textInputPass1.setErrorEnabled(false);
                textInput1.setErrorEnabled(false);
                JOptionPane.showMessageDialog(this, "Usuario: " + textInput1.getText() + "\n"
                        + "Contraseña: " + textInputPass1.getText() + "\ngracias!!!");
            } else {
                textInputPass1.setError("Debe escribir su contraseña");
                textInputPass1.setErrorEnabled(true);
            }
        } else {
            textInput1.setError("Debe escribir su nombre de usuario");
            textInput1.setErrorEnabled(true);
        }
    }