Bien vamos a continuar.
Ahora según lo hemos comentado del lado derecho vamos a agregar dos tarjetas en la cual vamos a mostrar
por un lado el total de clientes que tenemos y por otro lado el saldo total de todos los clientes así
que por ello hemos especificado que del lado izquierdo esta columna va a abarcar nueve espacios de los
12 disponibles y de este lado vamos a ocupar tres espacios de los 12 disponibles así que en total vamos
a tener los dos espacios ocupados cualquier duda con el manejo de grit de estas columnas pueden revisar
la documentación de vostra.
En el tema de greet pero por ello lo estamos haciendo paso a paso para que todo sea absolutamente desde
cero y así puedan detenerse en cualquier paso que tengan duda así que vamos a continuar
dentro de nuestra página de listado de clientes
podemos observar que en este DIV hemos definido que vamos a ocupar 9 elementos de los 12 disponibles.
Por lo tanto vamos a este Dib al cierre de este Dib si nos posicionamos sobre este Dip nos va a indicar
cuál es el DIB que cierra así que en este día de cierre vamos a dar un enter y vamos a agregar otros
elementos que van a ser las tarjetas que vamos a utilizar las tarjetas para mostrar el total de clientes
y el total de saldo así que vamos a hacer lo siguiente.
Vamos a dar las tarjetas para los totales que van a hacernos tarjetas laterales así que vamos a definir
un dip y en este caso vamos a completar nuestros dos espacios que tenemos disponibles con QOL MD 3 y
agregamos otro comentario para que no perdamos esta configuración y sepamos en qué momento también se
cierra.
Aquí va a ser el inicio de las tarjetas de los totales y aquí va a ser el fin aquí va a cerrar bien
vamos a continuar agregando el código.
Vamos a llegar otro DIV vamos a llegar a un Clas indicando que va a ser una tarjeta con el estilo de
Teck Center con el background de Tánger para aplicar el color rojo de fondo el texto blanco
y un Margie un botón de tres cerramos este elemento este Dip vamos a dar otro tip
con la clase de Carboni cerramos este elemento y dentro de este elemento vamos a agregar un H3 un título
que se llame saldo total
y mostramos el saldo total con un título de tamaño H4 también con la clase display cuatro
íbamos a mostrar el saldo total para mostrar el saldo total.
También vamos a utilizar el Talib de formato FNMT
utilizamos la función de forma nombre indicamos el valor y en este caso para recuperar el valor vamos
a compartir una variable desde el servlet que se va a llamar saldo total.
Eso todavía no lo hemos compartido vamos a hacerlo a continuación pero es la variable que vamos a compartir
desde el servlet y posteriormente indicamos el tipo el tipo va a ser el tipo moneda currency bien guardamos
cambios y vamos a revisar
podemos observar del lado derecho una tarjeta con el nombre saldo total.
Sin embargo todavía no tenemos el valor eso lo vamos a agregar en nuestro servlet.
Posteriormente vamos a regresar a nuestro código y antes de cerrar este dip de MP3 vamos a agregar otro
DIV aquí vamos a abrir otro elemento de tipo que va a ser la segunda tarjeta así que agregamos otro
Dip damos un formato y dentro de este vamos a llegar a la clase también va a ser la clase de Kaur con
la clase de texto entero el Bagram de Success para que se vea en verde
con el texto en blanco y el margen botón de tres damos un formato y dentro de este DIV vamos a agregar
también lo siguiente el dip para especificar el Carboni el cuerpo de esa tarjeta.
Agregamos un título el título de total clientes
y de manera muy similar vamos a desplegar el total de clientes pero en este caso no tenemos que darle
formato ya que simplemente es un número.
Así que especificamos la clase que se llama display 4
y dentro de este título agregamos un icono el icono de Photoshop F.A y users cerramos este icono y desde
el servlets vamos a compartir una variable que se va a llamar total clientes también eso todavía no
lo hemos compartido.
Lo vamos a hacer a continuación.
Y con eso terminamos de configurar nuestras tarjetas tanto la tarjeta de salud total como la tarjeta
de total clientes.
Guardamos cambios y vamos a visualizar
y podemos observar la tarjeta de clientes con el icono de fondo o son de usuarios bien.
Ahora vamos a compartir la información para que se pueda visualizar el saldo total y el total de clientes
así que en este caso vamos a regresar a nuestra clase de serie controlador y vamos a hacer lo siguiente
para compartir el total de clientes.
Es muy sencillo ya que el total de clientes es el largo de nuestro listado así que simplemente con solicitar
el método 6 sabemos cuántos clientes tenemos así que para ello vamos a compartir otro atributo llamado
Total clientes según hemos especificado este debe ser exactamente el mismo nombre que vamos a buscar
en nuestro listado de clientes.
En este caso esta variable total clientes y para saber el total de clientes utilizamos nuestro listado
de clientes la lista y mandamos a llamar el método 6 y con eso sabemos cuántos clientes tenemos en nuestro
listado de clientes pero para calcular el total del saldo no es tan directo tenemos que hacer una función
así que vamos a crear una función que va a recibir el listado de clientes.
La función va a ser tipo privado va a regresar un valor de tipo doble y se va a llamar la función calcular
saldo total
y va a recibir una lista la lista de clientes
y la variable.
El argumento se va a llamar clientes y básicamente lo que vamos a hacer es iterar nuestro listado de
clientes para obtener el saldo total así que hacemos lo siguiente saldo total iniciamos esta variable
en cero.
Posteriormente recorremos cada uno de los elementos de nuestro listado
declaramos la variable que va a apuntar a cada uno de los elementos de nuestro listado de clientes y
posteriormente indicamos la lista de la cual vamos a obtener todos los clientes y con eso lo que hacemos
es simplemente ir sumando el saldo de cada uno de los clientes así que usamos nuestra variable cliente
punto guetto saldo y así por cada cliente que tengamos se va sumando a la variable saldo total.
Vamos a iniciar en cero y conforme vayamos integrando los elementos se va a ir sumando el saldo.
Finalmente para tenerlo en la variable el saldo total y por último regresamos el valor de nuestra variable
saldo total ahora vamos a compartir esta información en alguno de los alcances en este caso en el alcance
de recuesto vamos a agregar otra atributo que vamos a compartir llamado saldo total con té mayuscula
tal cual como lo hemos declarado en nuestro listado de clientes saldo total.
Así se debe de llamar la variable que vamos a compartir y lo que vamos a hacer es mandar a llamar.
El método disputo calcular saldo y le pasamos como parámetro el listado de clientes para que pueda realizar
la suma de cada uno de los saldos de cada cliente.
Así que con esto guardamos cambios y deberemos de visualizar el total de clientes y también el saldo
total de todos los clientes bien guardamos cambios y vamos a refrescar y podemos observar que el saldo
total es de 350.
Podemos observar que es la suma del saldo del usuario Juan Pérez son 100 más Karla Gómez 250.
Así que el total es de 350 y tenemos el total de clientes que en este caso son dos clientes pero obviamente
conforme vayamos agregando más información a nuestro listado de clientes esto ya se va a ir modificando
dinámicamente así que toda esta información ya está programada y cualquier cambio se va actualizar de
manera automática y también parte de lo interesante de esta aplicación.
En este momento como ya tenemos más elementos si hacemos más pequeña la pantalla en automático se van
a ir ajustando los elementos así que podemos observar el título de nuestra página control clientes.
Posteriormente los botones de la navegación en este caso agrega el cliente posteriormente nuestro listado
de clientes con cada uno de los elementos y finalmente las tarjetas.
Como ya se adecuaron también el saldo total y el total de clientes y finalmente el pie de página así
cada uno de los elementos ya se adecuó según el tamaño de nuestra pantalla así que con esto ya tenemos
completo nuestro listado de clientes y ahora vamos a empezar a trabajar en los siguientes vídeos en
el tema de agregar un nuevo cliente.
Posteriormente vamos a editarlo y también dentro de la edición vamos a trabajar con la eliminación para
completar el flujo de nuestra aplicación y tener control total sobre cada uno de los clientes.
Bien vamos a tener hasta aquí este vídeo y nos vemos en el siguiente.
Saludos.