Bien vamos a continuar bien ahora lo que vamos a hacer es modificar nuestro listado de clientes ya tenemos
una página llamada clientes JSP la cual se encuentra a nivel waypoints
así que podemos observar que se encuentra a este nivel al mismo nivel de índex apuntó JSP.
Esto quiere decir que esta página es pública así que podemos acceder sin ningún problema desde el navegador
pero lo que queremos hacer ahora es que esta información que vamos a tener del listado de clientes no
sea pública al menos no toda la información que vamos a recuperar.
Así que dentro de 20 páginas vamos a crear otro folder así que sobre páginas damos clic derecho folder
y creamos la carpeta de cliente para depositar todas las páginas que hagan referencia al uso de la entidad
de cliente.
Y dentro de esa carpeta vamos a crear un JSP llamado el listado clientes puntos JSP TCP
así que agregamos el nombre del listado clientes y en automático se nos abrirá la extensión punto JSP
damos clic en Finalizar y vamos a cerrar algunos elementos cerramos estas páginas que ya no vamos a
utilizar.
También la página de Index y lo que vamos a hacer es que algunos elementos de nuestra página de clientes
vamos a pasarla a nuestra página de listado clientes.
Por ejemplo el Talib ya no lo vamos a utilizar en esta página sino que lo vamos a utilizar en esta página
de clientes así que quitamos estos comentarios y agregamos el Talib para hacer el uso del declive de
Cord y quitamos todo el código.
De momento no nos vamos a utilizar ya que la página que va a tener los elementos HTML únicamente va
a ser la página de clientes JSP todas las demás páginas van a ser componentes dentro de esta página.
Por lo tanto incluso la página del listado de clientes tampoco va a tener toda la información de las
etiquetas de HTML solamente esta página de clientes JSP y posteriormente el contenido.
En este caso el listado de clientes vamos a pasarlo sobre nuestra página del listado clientes guardamos
cambios damos un formato
y ahora vamos a incluir el listado de clientes.
Podemos apoyarnos de esta sintaxis
para incluir ahora la página listado clientes
y el JSP que vamos a incluir dentro de páginas.
Vamos a seleccionar la carpeta de cliente según hemos creado y posteriormente el JSP listado clientes.
Damos un formato
y esta va a ser la versión final de nuestra página de clientes punto JSP así que podemos observar que
esta página ya incluye todos los componentes como es el cabecero botones de navegación listado de clientes
en este momento que hemos creado y también el pie de página y desde esta página se incluyen los elementos
de vostra así como todos los scripts también que vamos a utilizar para que funcione correctamente Bostrom.
Así que cualquier actualización de este freímos de vostra así como el kit de Photoshop tiene que ser
sobre esta página de clientes punto JSP ya que aquí hemos centralizado esta configuración damos un formato
y con eso tenemos entonces la versión final de esta página.
Lo que vamos a empezar a trabajar a partir de este momento es la página del listado clientes punto JSP.
Ahí es donde vamos a tener la mayor cantidad de código de nuestra aplicación web.
Sin embargo también vamos a crear otras páginas.
No todo va a estar dentro de esta página pero esta página de clientes JSP ya la hemos limpiado en su
mayoría y por lo tanto ya podemos empezar a trabajar en el componente de lista de clientes JSP.
Vamos a revisar que siga funcionando nuestra aplicación guardamos cambios refrescamos y podemos observar
que el listado de personas se sigue mostrando sin ningún problema.
Tenemos entonces la sección de cabecero.
Posteriormente la sección de barra de navegación el listado de clientes y finalmente el pie de página
y si hacemos más pequeño el navegador podemos observar que de manera automática se van ajustando los
elementos.
Así que esa es una de las ventajas de utilizar vostra dependiendo del tamaño de la pantalla se va adecuar
cada uno de los elementos bien con eso y ya estamos listos para empezar a trabajar con nuestro componente
de listado clientes así que vamos a esta página y vamos a empezar a agregar lo siguiente De momento
en nuestro listado de clientes ya no lo vamos a utilizar de esta manera ya que únicamente lo hicimos
para que pudiéramos observar que estábamos desplegando correctamente la información que hemos compartido
del servlet.
Sin embargo vamos a empezar a modificar esta página así que vamos a quitar este contenido únicamente
vamos a dejar el Talib Decor agregamos una nueva sección con el Heydi de clientes
posteriormente agregamos un dip
con la clase
de contenedor container
posteriormente agregamos un dip con la clase de Rou para agregar un nuevo renglón posiblemente agregamos
otro Dip con la clase de Cool M de 9 ya que vamos a abarcar más espacio para el listado de personas
que vamos a agregar a continuación.
Pero también necesitamos dejar espacio del lado derecho para agregar algunas tarjetas para desplegar
el total de clientes que tenemos así como el saldo total sumado de todos los clientes que tenemos.
Así que por ello vamos a utilizar con M D9 y posteriormente vamos a agregar otro Dip a esta misma altura
para agregar un cool MP3 y así completar las 12 columnas que tenemos disponibles de vostra cualquier
duda pueden revisar el tema de grit de vostra para que vean cómo se maneja cada una de las columnas.
Bien después que hemos definido este elemento vamos a agregar otro tip con la clase de Kaur que va a
ser una tarjeta
agregamos otro Dip para indicar la tarjeta el cabecero de la tarjeta tarjetero
y dentro de este cabecero de esa tarjeta agregamos un título de tipo H4 llamado listado de clientes.
Vamos a guardar y vamos a visualizar.
Guardamos cambios
refrescamos y podemos observar la información hemos agregado un nuevo renglón pero podemos observar
que ocupa mayor espacio en este caso estamos indicando que va a ser una columna de ancho 9 y posteriormente
vamos a generar otra columna del lado derecho con un ancho de tres columnas.
Para agregar algunas tarjetas para mostrar el total de clientes que tenemos y el saldo total sumado
de cada uno de los clientes
bien así que con eso estamos empezando a formar la salida de nuestro listado de personas.
Después de este Dib del listado de clientes vamos a agregar una tabla
y en esa tabla vamos a agregar los estilos
agregamos el estilo de Taylor y posteriormente Trebol estribe para que aplique un estilo distinto a
cada uno de los renglones de esta tabla.
Posteriormente agregamos un toilet
indicamos el estilo de Toy Bolger
posteriormente agregamos un Borrow
y agregamos las columnas que va a contener nuestro tablet
agregamos la primer columna que se va a mostrar el número por ejemplo para mostrar el Heydi del cliente
posteriormente agregamos otro TDH y Bolger para mostrar el campo de nombre
y nos vamos a mostrar todos los elementos.
En este caso va a ser el nombre el saldo iban a ser todos los elementos que vamos a mostrar
y agregamos una columna más para dejar esta última columna vacía.
Esto es por el tipo de diseño que vamos a agregar
guardamos cambios y vamos a refrescar y podemos observar que ya tenemos nuestro cabecero con el valor
del número donde vamos a agregar el Heydi del cliente.
Posteriormente el nombre pero el nombre vamos a concatenar los valores de nombre y apellido y posteriormente
tenemos la columna de saldo así que ya está formando nuestra tabla.
Vamos a continuar después del té y Bolger lo que vamos a hacer es agregar un Taiba el body la etiqueta
de The Body y dentro de esa etiqueta de The Body vamos a ir agregando cada una de las columnas para
ello vamos a volver a utilizar el elemento de Fortich DJ STL así que queramos
cada elemento de la lista de clientes.
Así que utilizamos la librería DJ STL en este caso la librería Decor y utilizamos Fortich.
Posteriormente la variable que va a almacenar cada uno de los elementos se llama cliente posteriormente
los ítems que es la lista y utilizando expresión Language indicamos el nombre de la lista que nos compartió
el servlet.
Recordemos que el controlador nos compartió esta lista de clientes en el alcance de recuesto requested
H.
Colocó esta variable de clientes que es la lista de clientes que hemos recuperado de la base de datos
así que con esto hemos indicado la lista de clientes y se va a almacenar cada elemento en la variable
de cliente.
Posteriormente abrimos un renglón y vamos a agregando las columnas y volata para cada uno de los elementos.
Primero accedemos al cliente al Heydi del cliente
posteriormente agregamos otro volata para acceder al nombre de cliente cliente punto nombre pero no
va a ser sólo el nombre sino que también vamos a concatenar el apellido
así que esta columna va a mostrar los dos valores
y finalmente agregamos el saldo cliente punto saldo y la última columna.
Si recordamos la hemos dejado en blanco la vamos a utilizar para agregar un botón para editar este registro
así que hacemos lo siguiente agregamos un té de un té y volata pero dentro de ese data vamos a agregar
un link que realmente se va a mostrar como un botón pero es un link a un HR-V y vamos a utilizar Expression
Language.
Para acceder al context Path de nuestra aplicación Paik context posteriomente accedemos al objeto recuesto
y finalmente la variable contextual.
Después de que nos regresa el valor de la variable context Path mandamos a llamar al componente de controlador
pero lo que vamos a hacer es que vamos a indicar una acción así que este se ve controlador va a recibir
todas las peticiones pero vamos a hacer una diferencia para saber qué acción es la que vamos a ejecutar.
Así que enviamos un parámetro utilizamos símbolos de signo de interrogación de cierre para comenzar
con nuestros parámetros y posteriormente pasamos el parámetro de acción con el valor de editar ya que
este botón nos va a servir precisamente para editar este registro y además pasamos el valor del cliente
pasamos el parámetro de cliente con el valor del cliente que estamos alterando.
En este momento y accedemos a su valor de cliente así que con esto estamos configurando todo el link
para que manda llamar el controlador con la acción de editar y además con el valor de cliente con el
valor respectivo del cliente que estamos integrando.
En este momento vamos a continuar.
Todavía no cerramos este link el siguiente elemento que vamos a agregar va a ser el elemento Clas con
las clases de botón BDN y veten.
Secondary ya que va a ser un botón secundario
cerramos este link y agregamos el siguiente texto incluyendo un icono así que agregamos un icono y vamos
a aplicar el icono de fondo son
llamado ãngulo Wright cerramos este icono
y en un momento más vamos a ver cómo se visualiza
bien con eso cerramos el TD y también cuando terminamos nuestra tabla así que guardamos cambios y vamos
a revisar
refrescamos y podemos observar nuestro listado de clientes con un estilo mejor definido podemos observar
el Heydi del cliente.
Posteriormente el nombre en este caso Juan Pérez el saldo y también el link de editar pero en este caso
algo está fallando ya que nos está mostrando como un botón.
Vamos a revisar el código
aquí me equivoqué es veten Secondary de secundario bien guardamos cambios
refrescamos y podemos observar que ya se visualiza el botón.
Ahora un detalle más el saldo queremos que se muestre con un formato distinto es decir con algún signo
por ejemplo de pesos o de dólares dependiendo de la ubicación dependiendo de la localidad y también
Punto cero cero.
Es decir con dos centavos.
Así que vamos a hacer estos cambios
para eso vamos a utilizar otra librería la librería para dar formato así que utilizamos un Talib el
elemento de Talib agregamos el atributo de prefijo y el precio que vamos a utilizar es F Mt de formato.
Posteriormente agregamos una Hory el atributo de Ory y seleccionamos el URI de F.
MT precisamente de continãen las funciones para dar formato a nuestras cadenas guardamos cambios y además
especificar este clip.
También vamos a indicar la localidad.
F MTM set laqueado y agregamos el valor por ejemplo en este caso puede ser inglés guion bajo o s si
estamos en Estados Unidos para indicar la localidad de Estados Unidos pero por ejemplo en este caso
si queremos agregar la localidad de México sería ese guion bajo.
MX y con eso cerramos este elemento de bloqueo y con esto vamos a poder mostrar correctamente nuestro
valor de saldo.
Vamos a quitar este valor y vamos a utilizar la función de f MT 2.2 format nombre podemos observar que
tenemos otros elementos por ejemplo formas daiteke.
Si queremos mostrar una fecha pero en este caso queremos mostrar un número posteriormente agregamos
el atributo de Balio y dentro de Balio especificamos cuál es el valor que queremos mostrar en este caso
queremos mostrar el saldo del cliente y finalmente indicamos el atributo de tipo y en este caso vamos
a indicar que va a ser un tipo moneda por lo tanto agregamos el valor de currency cerramos nuestro Tag
y con esto ya se debe demostrar correctamente el valor de saldo.
Vamos a revisar guardamos cambios refrescamos y podemos observar que ya se agregó el símbolo de pesos
y posteriormente punto cero cero así que con esto ya estamos dando correctamente el valor de saldo.
Bien con esto ya hemos avanzado bastante en nuestro listado de clientes vamos a detener hasta aquí este
video y en el siguiente video vamos a continuar con otros elementos de este listado de clientes nos
vemos en el siguiente video.
Saludos.