Bien vamos a continuar con nuestra aplicación lo que vamos a hacer es agregar nuevos elementos dentro
del Bodhi en la página de clientes JSP.
Vamos a hacer lo siguiente vamos a agregar un cabecero agregamos un comentario
y vamos a agregar un cabecero utilizando vostra vamos a agregar la etiqueta de Jaider de momento no
vamos a dejar las clases para que vayamos viendo cómo se va modificando nuestro código.
Agregamos un Jaider posteriormente agregamos un dip este va a ser el primer tip que va a corresponder
al contenedor que vamos a utilizar posteriormente vamos a agregar otro Dib que va a corresponder a un
renglón también que vamos a agregar demostrar
y finalmente vamos a agregar una columna también de vostra.
Posteriormente vamos a analizar los estilos para que vayamos viendo cómo se van modificando y finalmente
agregamos un título.
El título va a ser control de clientes
de momento vamos a quitar ese otro título.
De momento ya no lo vamos a utilizar.
Y así que ese es el nuevo código que hemos agregado vamos a realizar los cambios en nuestra aplicación
refrescamos la aplicación y podemos observar que es muy similar en este caso tenemos el cabecero de
control de clientes.
Todavía no hemos aplicado ningún estilo.
Vamos a empezar a modificarlo en el Geer vamos a agregar un Heydi para aplicar el estilo me Inger
así que agregamos el identificador de Menger y posteriormente agregamos una clase para aplicar los siguientes
estilos.
P Es de Padín es para modificar el Pallín superior e inferior y dos va a ser el 6 el ancho que vamos
a aplicar a este padre.
En este caso de .5 pero todo esto está en la documentación de vostra posteriormente agregamos el estilo
de Bagram info así que va a aplicar el background aplicando el estilo de info.
También esto lo pueden revisar en la documentación pero vamos a ir viendo cómo se reflejan estos cambios
y el texto va a ser texto en blanco.
Guardamos cambios y vamos a observar
refrescamos y podemos observar que ya tenemos nuestro título control clientes.
Se le ha aplicado un background ya que hemos aplicado estos estilos a nuestro elemento de joder bien
vamos a continuar podemos observar que eso está muy pegado a la izquierda así que vamos a hacer algunos
cambios para corregir esto el siguiente día que vamos a utilizar es el dip de contenedor así que utilizamos
la clase para agregar un container la clase de container.
Guardamos cambios refrescamos y podemos observar que debido a que estamos utilizando ya la clase de
contenedor entonces ya no se carga completamente a la izquierda sino que en automático ya se empiezan
a centrar más estos elementos de nuestra página y de igual manera si empezamos a hacer más pequeña nuestra
página todos los elementos que vayamos agregando se van a ajustar también de manera automática así que
son algunas de las ventajas de utilizar vostra posteriormente definimos que este DIV va a tener un renglón
por lo tanto definimos la clase de Routh y posteriormente también en este Dir. vamos a indicar que esta
columna va a ser una columna M de mediano con el ancho de seis tenemos hasta 12 columnas que podemos
agregar.
Así que en este caso va a abarcar seis columnas.
Esto lo pueden ver en el tema de grit de Bushra refrescamos bien así que podemos observar el resultado
como estamos observando realmente no vemos cambios mayores pero lo que estamos haciendo es configurando
este elemento y preparándolo en dado caso de que tenga más elementos sobre este mismo renglón.
Para ello es necesario realizar estas configuraciones pero simplemente con el dip de conteiner se pudo
haber agregado este elemento así que los demás dips realmente no son necesarios pero lo estamos configurando
para que en un futuro si agregamos más elementos podamos separarlos correctamente bien y ahora dentro
del elemento H1 vamos a utilizar un ícono de fondo son
así que agregamos lo siguiente agregamos la etiqueta de ahí para agregar un ícono
y vamos a indicar la clase en este caso la clase es Olsson y agregamos el ícono de COG que es un engrane
y cerramos este icono guardamos cambios
y podemos ver que ya cargó el ícono de engrane así que con eso ya tenemos completamente configurado
nuestro género.
Sin embargo si empezamos a trabajar así en nuestro JSP rápidamente se va a llenar de código nuestra
página así que vamos a hacer lo siguiente Vamos a separar este código del cabecero y lo vamos a llevar
a un JSP privado así que vamos a hacer lo siguiente dentro de web INF vamos a crear una carpeta que
se llame páginas
damos un en finalizar.
Posteriormente creamos otra carpeta otro folder
que se llame comúnes así que aquí van a estar las páginas comunes a toda la aplicación y después vamos
a crear una página que se llame KDE cero
y damos clic en Finalizar y básicamente lo que va a tener esta página va a ser precisamente la información
del cabecero.
Vamos a quitar todo este código lo cortamos y lo agregamos y quitamos todo este código en la página
de cabecero y agregamos el código que hemos copiado.
Damos un formato y ya tenemos la información del cabecero pero separado en otra página y ahora lo que
vamos a hacer dentro de la página de clientes JSP es incluir la página de cabecera así que para ello
vamos a utilizar la acción de JSP 2.2 includo y posteriormente agregamos el atributo de paso vamos a
acceder a web INF ya que está en las páginas privadas.
Posteriormente accedemos al folder de páginas comunes y finalmente accedemos al JSP de cabecera o JSP
y cerramos este elemento guardamos cambios y vamos a revisar que todo siga funcionando sin problemas.
Podemos observar que se hizo un diploide de manera automática en nuestro servidor regresamos a la página
refrescamos y podemos observar que de nueva cuenta tenemos el título sin ningún problema así que con
esto ya estamos separando nuestro código en nuestra aplicación y así es como vamos a estar trabajando
los elementos que vamos a tener en común en nuestra aplicación.
Los vamos a agregar agotes Sepes dentro de la carpeta de páginas y en la carpeta de comunes todos estos
JSP van a ser privados.
Esto quiere decir que no pueden ser accedidos directamente desde el navegador web solamente elementos
como en este caso componentes del lado del servidor como es un JSP pueden acceder y direccionar a estos
componentes JSP que son privados.
Vamos a dejar hasta aquí este video en el cual ya trabajamos el componente de cabecero y en los siguientes
videos vamos a seguir trabajando con cada uno de los elementos de nuestra página.
Nos vemos en el siguiente video saludos.