Bien vamos a continuar con nuestra aplicación.
Ahora vamos a agregar el JSP de editar cliente así que sobre nuestras páginas en la carpeta de cliente
vamos a agregar el siguiente JSP damos clic derecho JSP y el nombre va a ser editar cliente damos clic
en Finalizar y este código va a ser muy similar al JSP de clientes debido a que vamos a partir nuevamente
de cero.
Entonces tenemos que definir todos los elementos como es el agregar los caracteres de HTML Get los estilos
de Vostro Up y cada uno de los elementos del Bodhi ya que en este JSP lo que vamos a cambiar en lugar
de mostrar el listado de clientes vamos a mostrar el formulario para editar un cliente así que vamos
a apoyarnos de este código.
Vamos a copiar el contenido del JSP de clientes y vamos a depositarlo en el JSP de editar cliente.
Vamos a reemplazar todo el código y pegamos este contenido.
Ahora ese título en lugar de control de clientes va a ser editar cliente si no quisieran duplicar esta
información.
También se puede agregar en otros JSP y agregarlo a jote Sepes comunes y simplemente lo insertan para
que esta información ya no se duplique así que también pueden realizar esa tarea como una mejora a este
archivo posiblemente agregamos el cabecero
pero en este caso ya no vamos a utilizar la misma barra de navegación ni tampoco el listado de clientes
así que vamos a quitar estos dos códigos estas llamadas únicamente dejamos la llamada del cabecero y
vamos a ver si ya funciona la llamada a este JSP.
Regresamos al inicio de nuestra aplicación y posteriormente damos clic en el botón de Editar en alguno
de los registros y en este caso nos está indicando que no está encontrando la página de cabecero.
Podemos observar que la web real está mal ya que se está duplicando.
Vamos a revisar y básicamente para que no suceda esto debemos de iniciar la carpeta de INF utilizando
diagonal para que parta de esta carpeta.
Así que vamos a hacer estos cambios también en el JSP de clientes.
En este JSP nuevo problema debido a que estamos a nivel raíz pero vamos a hacer también estos cambios
para que no tengamos este problema si es que nos apoyamos de este código hacia otras páginas que estén
dentro de la carpeta de Weddings
bien guardamos cambios
regresamos refrescamos y damos clic en Editar y podemos ver que ya se muestra el JSP de editar cliente.
Todavía no hemos agregado ninguna información pero ya podemos observar el cabecero y el pie de página.
Ahora vamos a empezar a trabajar con el contenido de este JSP
vamos a dar un formato y vamos a incluir ahora otro JSP que va a incluir la barra de navegación de esta
página.
Todavía no lo hemos creado pero vamos a incluir la copiamos este código para apoyarnos
y esos van a ser los botones
de navegación para esta página de editar cliente y el JSP se va a llamar botones navegación edición
así que vamos a crear este JSP
sobre la carpeta de comúnes.
Vamos a dar clic derecho Nioh JSP y vamos a crear JSP de botones navegación edición y damos clic en
Finalizar.
Vamos a quitar este contenido y vamos a agregar el siguiente código a esta página de botones navegación
edición vamos a agregar una sección en primer lugar
esta sección se va a llamar el Heydi va a ser Auctions y asignamos la clase de padre superior e inferior
de 4 posteriormente un margen Bodom de cuatro invadirán con el estilo de Barón light
posteriormente agregamos un dip con la clase de conteiner
ahora agregamos un dip con la clase de Routh
agregamos otro Dip con la clase
con M de tres y posteriormente agregamos un link al JSP de inicio
agregamos una clase botón botón Like
I botón Block
y dentro de este link vamos a agregar un icono indicando el ícono de fondo son F a Harrow
left que nos da la indicación que vamos a ir hacia la izquierda vamos de regreso con el texto regresar
al inicio.
Posteriormente agregamos otro Dip con la clase con mm3
y vamos a agregar un botón de tipo submit
y ese va a ser el botón que va a ser submit del formulario de editar cliente
y la clase va a ser MTN between Success
y veten.
Blog
y posiblemente agregamos un ícono con la clase FAS F.A CHEC
cerramos este icono y agregamos el texto guardar cliente así que este botón va a ejecutar el formulario
de guarda cliente por lo tanto la llamada a este JSP debe de estar dentro de un formulario así que está
llamada al JSP de botones de navegación.
Debe estar dentro de un form así que en este punto vamos a llenar el formulario de editar cliente para
que incluya este botón de Summit y de momento va a hacer todo lo que vamos a agregar a nuestra página
de botones navegación edición.
Aquí tengo un detalle en el nombre del archivo debe de ser botones y puse otro nombre así que vamos
a dar clic derecho.
Reunan y ponemos el nombre correcto que es.
Botones botones navegación edición
y también en la llamada desde la página de cliente verificamos que esté correcto este nombre botones
navegación edición damos un formato y con eso ya tenemos nuestro código para que se desplieguen los
botones de navegación de esta página.
Vamos a verificar refrescamos y Podemos se va que ya tenemos nuestro botón de regresar al inicio y el
botón de guardar cliente.
Si damos clic en regresar al inicio Podemos se va que funciona sin ningún problema y posteriormente
damos clic en Editar nuevamente para ir al detalle de este cliente.
Si damos clic sobre Guardar cliente en este momento todavía no hace nada ya que no hemos agregado el
formulario HTML que va a procesar la llamada de este método guardar cliente así que con esto vamos bien
vamos a continuar podemos cerrar este JSP de botones navegación y edición.
También este JSP de botones navegación agregar al cliente ya no lo vamos a utilizar listado de clientes
también podemos cerrarlo y dejamos solamente estos archivos.
Ahora vamos a continuar en nuestra página de editar cliente punto JSP bien según hemos comentado después
del cabecero y antes de este código de botones navegación edición debemos agregar el formulario.
Vamos a abrir nuestro elemento form y vamos a indicar una acción especificamos el nombre de nuestra
aplicación Voice context punto recuesto punto contextual y posteriormente especificamos el nombre del
componente servlet controlador.
Posteriormente pasamos la acción en este caso la acción va a ser modificada ya que este formulario se
va a encargar de modificar los valores que se hayan cambiado en el formulario de editar cliente así
que la acción se llama modificar y para que no se pierda el dato del cliente podemos pasarlo como parámetro
así que pasamos el valor de Heydi cliente que utilizamos Expression Language para acceder a este valor
cliente punto Heydi cliente.
Recordemos que el servlet lo que hizo en el método de editar cliente
básicamente lo que hicimos fue recuperar el objeto de tipo cliente y lo compartimos en el alcance de
rico esto se llama cliente.
Por lo tanto desde JSP accedemos a este objeto cliente que ha compartido el servlet así que con eso
ya tenemos el wearable completo de nuestro formulario ahora vamos a indicar el tipo de método que se
va a ejecutar
agregamos el atributo de Dot y el tipo de método va a ser post así que la acción de modificar quién
la debe de procesar es el método de post
y finalmente también agregamos la clase de validación tal cual como lo hicimos en el JSP de agregar
cliente was vãlida either.
Y cerramos nuestro formulario
sin embargo aquí no se va a cerrar sino se va a cerrar después de agregar los botones de navegación
damos un formato y con eso cerramos ya correctamente nuestro formulario.
Ahora vamos a empezar a agregar nuestro formulario para modificar los valores de cliente que se ha seleccionado.
Agregamos una sección
con el Heydi
débiles detalles posteriormente agregamos un dip con la clase de conteiner esto va a ser muy similar
al formulario de agregar cliente posteriormente agregamos otro DIV para especificar la clase de Rou
agregamos otro DIV para especificar la clase de QOL de columna y posteriormente vamos a agregar una
tarjeta así que agregamos la clase de Card para especificar el título
agregamos otro Dib con la clase de Car Gelder el título de esa tarjeta
y el título va a ser de tipo H4 y el texto editar cliente guardamos cambios y vemos el resultado refrescamos
y podemos observar que ya tenemos el título Editar cliente.
Esa es una tarjeta y ese es el cabecero de esa tarjeta así que hasta aquí ya tenemos nuestro primer
contenedor.
Ya tenemos el título para editar un cliente y ahora vamos a agregar el cara Bodhi así que después del
DIP de Gelder agregamos la clase de Carboni
cerramos este Dib y aquí podemos reutilizar el código del formulario de agregar cliente así que vamos
a abrir este archivo de agregar cliente
y todo lo que está dentro del dip de moda al Bodhi ya que es el cuerpo de esta ventana modal.
Podemos copiar estos elementos que es el nombre apellido email teléfono y saldo
así que podemos copiar todos estos valores y nos vamos a pegar dentro del dip de Carboni damos un formato
y con eso ya podemos observar cada uno de los elementos.
Pero falta cargar el valor a cada uno de estos elementos de tipo input así que cargamos el valor con
el atributo valio utilizando Expression Language.
Accedemos al objeto cliente y posteriormente a cada uno de los parámetros.
En este caso al nombre y así con los demás elementos accedemos al apellido para que cargue este valor.
En este Computex posteriormente cargamos el valor de ahí mail
posteriormente el valor de teléfono
y finalmente el valor de saldo
bien y debido a que el botón de Submit se encuentra dentro del código de botones navegación edición
aquí se encuentra este botón de Summit.
Entonces ya tenemos todo nuestro formulario listo vamos a comprobarlo.
Guardamos cambios vamos a refrescar y en este caso podemos observar la información del cliente que está
seleccionado.
En este caso se seleccionó el cliente de Juan con el apellido de Pérez el hijo dijo tapires arroba mail
puntocom el teléfono 11 22 33 44 y el saldo de 100.
Podemos hacer un cambio por ejemplo en el saldo vamos a poner el valor de 70 punto 0 2.
Sin embargo no utilizamos centavos en este caso no nos está permitiendo agregar este valor así que para
que podamos aceptar centavos vamos a hacer un cambio sobre nuestro formulario de editar cliente en el
campo de saldo.
Hemos especificado que el input sea de tipo número si lo dejamos así únicamente acepta números enteros.
Por lo tanto tenemos que agregar otro cambio otro atributo y especificamos el atributo de STEPV y con
eso podemos especificar si va a aceptar tipos numéricos solamente o también valores decimales así que
ponemos el valor de Jeny y con eso ya puede aceptar tanto valores enteros como valores decimales y hacemos
lo mismo en la página de agregar cliente en el hipoteque de saldo especificamos que también se pueda
proporcionar valores con decimales bien guardamos cambios regresamos refrescamos y vamos a revisar si
cambiamos el saldo por ejemplo a 70 puntos cero dos.
Podemos observar que ya es un valor válido y podemos observar que incluso nos muestra esos botones que
son precisamente el concepto de stop.
Si presionamos podemos observar que se incrementa en 1 pero respetando en este caso los decimales.
Eso depende del navegador.
Esto no va a existir en todos los navegadores en este caso solamente es en Google Chrome podría existir
en otros navegadores pero no se garantiza que exista esta misma funcionalidad así que hasta aquí ya
tenemos nuestro formulario y ahora sí damos clic sobre el botón de guardar cliente.
Vamos a ver qué sucede en este caso ya está regresando el flujo hacia nuestro JSP de clientes pero no
se actualizó el valor de saldo ya que todavía no hemos agregado la funcionalidad que nos permite guardar
la información en la base de datos.
Hasta el momento solamente hemos desplegado la información del cliente que se ha seleccionado pero si
damos clic en Guardar no se guarda ningún valor así que vamos a agregar estos cambios a nuestro controlador
pero esto lo vamos a hacer en el siguiente video así que vamos a detener hasta aquí este video y nos
vemos en el siguiente.
Saludos.