Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Java / TextInput – Material Design

TextInput – Material Design

Autor jc mouse Jueves, Junio 1, 2017

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

swing

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

library

Paso 3

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

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.

install library

4. Seleccionar “TextInput” y “TextInputPass”, presionar siguiente

java beans

5. Seleccionar la carpeta “Material Design” y presionar “Terminar” “Cerrar”

material ista

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

swing ganbatte

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:

design project

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:

gui minimalista

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

properties propiedades

  • 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);
        }
    }    

Ejecutar

google interface

Enlace de descarga

ACTUALIZADO 02/06/2017 v1.0.8

  • Soporte para Look and Feel

Tamaño 69kb

<<LINK ECONÓMICO>>

Enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Facturación electrónica: El Código de Control

Facturación electrónica: El Código de Control

¿Que es la facturación electrónica? Una factura es un documento que sirve para describir el costo de los servicios y des...

Imprimir Swing

Imprimir Swing

Java Printing nos permite hacer uso de las impresoras del sistema para, valga la redundancia 🙂 imprimir los gráficos de...

SOAP .:. Servicio Web en c#

SOAP .:. Servicio Web en c#

SOAP (Simple Object Access Protocol) es un protocolo estándar que define cómo dos objetos en diferentes procesos pueden...

Empaquetado de texturas en LibGDX

Empaquetado de texturas en LibGDX

Continuando con los tutoriales sobre LibGDX (Librería para el desarrollo de videojuegos), en esta ocasión veremos como e...

Blog MVC – Iniciando el proyecto [p2]

Blog MVC – Iniciando el proyecto [p2]

Segunda parte del tutorial [Crea tu blog con el patrón MVC y php]. En esta 2da parte toca ver lo que es la creación del...

3 en raya java con MVC y Netbeans

3 en raya java con MVC y Netbeans

Modelo Vista Controlador (MVC) es un patrón de arquitectura de software que separa los datos de una aplicación, la inter...

3 comentarios en “TextInput – Material Design”

  1. Leandro dice:

    El mensaje de error no podría aumentar el tamaño de la fuente? Me gustaría saber esto. Gracias

    1. Mouse dice:

      No se puede por el momento, el tamaño es fijo, pero no es una mala idea para una nueva versión, si tienes más sugerencias estamos listos para escucharte

  2. David dice:

    Hola, deberían dar el código fuente libre del MDTextInput aunque es muy fácil de descompilar con diversos programas, me parece que le falta algunas funciones de los Textfield como el arrow posicionado al llamar al método requestfocus y el KeyListener que simplemente no funciona por que se le da al componente y no al jtextfiled que ustedes crean en su clase TextInput, se podría implementar mas fácilmente si dieran acceso a su código o pondrían un get a su jtextfiled, espero puedan implementar esas funciones que creo que ahorraría tiempo a muchos, para no estar descompilando el código y modificarlo para que esten disponibles esas funciones.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

En este post aprenderemos lo que es un JSON Web Token, como crear nuestro propio token de acceso y como usarlo en un Ser...

En este post crearemos un cliente android para consumir un recurso de un REST API utilizando las librerías GSON y Volley...

Slim es un micro framework para PHP que nos ayuda a escribir rápidamente aplicaciones Web y APIs sencillas pero poderosa...

Es recomendable tener actualizado la Maquina Virtual Java de nuestro equipo para poder disfrutar de las mejoras que trae...

Android Bolivia

Bandera en Alto