domingo, 12 de junio de 2022

Modificación Primer APP - Eventos y captura de datos.

En la entrada sobre la creación del primer proyecto en Android, posteriormente vimos como crear nuestra aplicación básica, revisamos la estructura de proyectos y diferentes conceptos como el SDK, Manifest y las actividades y su ciclo de vida, ahora continuaremos modificando el proyecto actual con el fin de ir produndizando en la creación de aplicaciones.


Como se mencionó vamos a modificar la aplicación creada en esta entrada donde construimos el primer proyecto Android, allí nos quedamos en esta pantalla

ahí podemos ver que la app por defecto crea un componente TextView con el texto "Hello World", desde la vista Split. (si hasta este punto no sabes como crear la aplicación, te recomeniendo que revises la entrada mencionada más arriba.)

estando aquí, vamos a modificar esta vista agregando nuevos componentes, si pasamos entonces a la vista de diseño, podemos modificar la pantalla a nuestro gusto, en este caso crearemos la siguiente interfaz.

Como vemos agregamos un componente PlainText qué en realidad corresponde a un campo de edición o <EditText/> el cual puede tener propiedades como texto plano, password, Teléfono, Correo entre otros, así mismo el Layout definido nos permite modificar el tamaño de los componentes y asignarle una posición relativa, en este caso el campo de texto tiene una posición relativa al textView del titulo.

Si pasamos a la vista Split vemos entonces el código xml generado y desde aquí podemos modificar las propiedades de forma manual, en este caso se agregó un color al titulo y un tamaño de 25sp, nótese que cada componente tiene una propiedad id, así como propiedades para controlar la ubicación del componente en la pantalla.

Encontramos otros componentes como el hint que corresponde a un placeHolder el cual se muestra mientras el campo esté vacío, se podrían agregar de la misma manera otras propiedades para estilizar el componente.

Ahora se agrega un componente de tipo <Button/> el cual también tiene la propiedad id la cual es relativa al componente del campo de texto, para este caso modificamos el identificador.

Lógica de Aplicación.

Para realizar la lógica y procesamiento de información, vamos a la clase MainActivity.kt, desde allí obtenemos los componentes gráficos por medio de su id utilizando el método findViewById()

Agregamos el evento clic del botón y creamos una función llamada onClick() (Puede ser llamada de cualquier forma)

En esta función se agrega la lógica para capturar el valor del campo de texto el cual se referencia igual que el botón pero en este caso creando un componente de tipo EditText que referencia el id del campo de texto.

Posteriormente se obtiene el valor del campo y se agrega a una variable String que luego se muestra en un componente de tipo Toast el cual permite mostrar un mensaje temporal en pantalla.

Cuando ejecutamos la aplicación se lanza el emulador y podemos probar el sistema agregando el nombre del usuario y presionando el botón “ingresar”, vemos entonces como se muestra el Toast el cual dura algunos segundos.


Luego de esto modificamos la pantalla agregando otro componente TextView sin texto, el cual servirá para mostrar la información del nombre ingresado pero ahora directamente en la pantalla.

Para realizar esta lógica, regresamos a la clase MainActivity.kt y en la función referenciamos el componente EditText con el id asignado y luego enviamos el mensaje que queremos presentar.

Posteriormente lanzamos otra vez la aplicación y tenemos el siguiente resultado.


Otra alternativa para la captura de los datos es declarando los componentes de forma global evitando así tener que declararlos en cada función:


Importante usar !! para evitar que se puedan tener referencias nulas.

Nota:

En las líneas 11 y 12 se utiliza nullsafety, esta es una característica de kotlin que permite controlar los valores nulos dentro de la aplicación, evitando que cargue el popular NullPointerException, directamente no podemos asignar valores nulos, pero de esta manera cuando indicamos EditText? estamos diciéndole al compilador que ese campo podría tener una referencia null y que permita procesarla.

en la línea 26 y 27 se hace uso de !! para indicar al compilador que no compruebe si el valor es null y por lo tanto puede compilar sin problemas pero en caso de ser null, lanzar la excepción en consola, esto es en caso de que sepamos que puede llegar un valor null y aún así lo queremos procesar.

Otra alternativa recomendada seria realizar llamadas seguras, así cuando se intente llamar al objeto, si este es null, no se lanzará la excepción sino que se almacenará el valor null sin terminar el proceso, por esta razón la variable tiene que ser nullable para que compile correctamente.

Y listo, ya con esto tenemos nuestra primer aplicación funcional con captura de datos y eventos de botones.

 

También te podría Interesar.

 
¿Hay algo que quieras anexar o comentar sobre esta entrada?  no dudes en hacerlo.....y si te gustó...... te invito a compartir y Suscribirte ingresando al botón "Participar en este sitio" para darte cuenta de mas entradas como esta ;)


No hay comentarios:

Publicar un comentario

Eres libre de realizar cualquier comentario, desde que pueda ayudar con gusto lo atenderé, y si es un critica, bienvenida sea!!!