1
00:00:00,650 --> 00:00:07,010
Bien vamos a continuar con nuestra aplicación lo que vamos a hacer es agregar nuevos elementos dentro

2
00:00:07,010 --> 00:00:10,040
del Bodhi en la página de clientes JSP.

3
00:00:10,040 --> 00:00:14,780
Vamos a hacer lo siguiente vamos a agregar un cabecero agregamos un comentario

4
00:00:18,770 --> 00:00:26,060
y vamos a agregar un cabecero utilizando vostra vamos a agregar la etiqueta de Jaider de momento no

5
00:00:26,060 --> 00:00:31,630
vamos a dejar las clases para que vayamos viendo cómo se va modificando nuestro código.

6
00:00:31,760 --> 00:00:38,280
Agregamos un Jaider posteriormente agregamos un dip este va a ser el primer tip que va a corresponder

7
00:00:38,280 --> 00:00:45,220
al contenedor que vamos a utilizar posteriormente vamos a agregar otro Dib que va a corresponder a un

8
00:00:45,220 --> 00:00:48,090
renglón también que vamos a agregar demostrar

9
00:00:50,960 --> 00:00:53,990
y finalmente vamos a agregar una columna también de vostra.

10
00:00:54,710 --> 00:01:00,490
Posteriormente vamos a analizar los estilos para que vayamos viendo cómo se van modificando y finalmente

11
00:01:00,490 --> 00:01:02,140
agregamos un título.

12
00:01:02,320 --> 00:01:06,500
El título va a ser control de clientes

13
00:01:09,790 --> 00:01:12,340
de momento vamos a quitar ese otro título.

14
00:01:12,580 --> 00:01:14,460
De momento ya no lo vamos a utilizar.

15
00:01:15,360 --> 00:01:19,690
Y así que ese es el nuevo código que hemos agregado vamos a realizar los cambios en nuestra aplicación

16
00:01:21,170 --> 00:01:26,990
refrescamos la aplicación y podemos observar que es muy similar en este caso tenemos el cabecero de

17
00:01:26,990 --> 00:01:28,160
control de clientes.

18
00:01:28,220 --> 00:01:30,450
Todavía no hemos aplicado ningún estilo.

19
00:01:30,560 --> 00:01:38,940
Vamos a empezar a modificarlo en el Geer vamos a agregar un Heydi para aplicar el estilo me Inger

20
00:01:42,940 --> 00:01:49,500
así que agregamos el identificador de Menger y posteriormente agregamos una clase para aplicar los siguientes

21
00:01:49,500 --> 00:01:50,760
estilos.

22
00:01:50,760 --> 00:01:59,400
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

23
00:01:59,400 --> 00:02:01,210
a aplicar a este padre.

24
00:02:01,320 --> 00:02:08,510
En este caso de .5 pero todo esto está en la documentación de vostra posteriormente agregamos el estilo

25
00:02:08,510 --> 00:02:14,090
de Bagram info así que va a aplicar el background aplicando el estilo de info.

26
00:02:14,090 --> 00:02:18,470
También esto lo pueden revisar en la documentación pero vamos a ir viendo cómo se reflejan estos cambios

27
00:02:18,880 --> 00:02:23,670
y el texto va a ser texto en blanco.

28
00:02:23,770 --> 00:02:25,570
Guardamos cambios y vamos a observar

29
00:02:29,570 --> 00:02:34,310
refrescamos y podemos observar que ya tenemos nuestro título control clientes.

30
00:02:34,310 --> 00:02:39,860
Se le ha aplicado un background ya que hemos aplicado estos estilos a nuestro elemento de joder bien

31
00:02:39,950 --> 00:02:45,020
vamos a continuar podemos observar que eso está muy pegado a la izquierda así que vamos a hacer algunos

32
00:02:45,020 --> 00:02:51,950
cambios para corregir esto el siguiente día que vamos a utilizar es el dip de contenedor así que utilizamos

33
00:02:51,980 --> 00:02:57,230
la clase para agregar un container la clase de container.

34
00:02:57,230 --> 00:03:04,910
Guardamos cambios refrescamos y podemos observar que debido a que estamos utilizando ya la clase de

35
00:03:04,910 --> 00:03:09,950
contenedor entonces ya no se carga completamente a la izquierda sino que en automático ya se empiezan

36
00:03:09,950 --> 00:03:16,040
a centrar más estos elementos de nuestra página y de igual manera si empezamos a hacer más pequeña nuestra

37
00:03:16,040 --> 00:03:22,910
página todos los elementos que vayamos agregando se van a ajustar también de manera automática así que

38
00:03:22,970 --> 00:03:29,910
son algunas de las ventajas de utilizar vostra posteriormente definimos que este DIV va a tener un renglón

39
00:03:32,010 --> 00:03:42,110
por lo tanto definimos la clase de Routh y posteriormente también en este Dir. vamos a indicar que esta

40
00:03:42,110 --> 00:03:52,780
columna va a ser una columna M de mediano con el ancho de seis tenemos hasta 12 columnas que podemos

41
00:03:52,780 --> 00:03:53,370
agregar.

42
00:03:53,500 --> 00:03:56,410
Así que en este caso va a abarcar seis columnas.

43
00:03:56,410 --> 00:04:04,040
Esto lo pueden ver en el tema de grit de Bushra refrescamos bien así que podemos observar el resultado

44
00:04:04,430 --> 00:04:09,080
como estamos observando realmente no vemos cambios mayores pero lo que estamos haciendo es configurando

45
00:04:09,110 --> 00:04:15,260
este elemento y preparándolo en dado caso de que tenga más elementos sobre este mismo renglón.

46
00:04:15,260 --> 00:04:20,240
Para ello es necesario realizar estas configuraciones pero simplemente con el dip de conteiner se pudo

47
00:04:20,240 --> 00:04:26,390
haber agregado este elemento así que los demás dips realmente no son necesarios pero lo estamos configurando

48
00:04:26,630 --> 00:04:32,790
para que en un futuro si agregamos más elementos podamos separarlos correctamente bien y ahora dentro

49
00:04:32,790 --> 00:04:36,750
del elemento H1 vamos a utilizar un ícono de fondo son

50
00:04:40,670 --> 00:04:46,210
así que agregamos lo siguiente agregamos la etiqueta de ahí para agregar un ícono

51
00:04:49,450 --> 00:04:59,950
y vamos a indicar la clase en este caso la clase es Olsson y agregamos el ícono de COG que es un engrane

52
00:05:02,010 --> 00:05:05,070
y cerramos este icono guardamos cambios

53
00:05:10,140 --> 00:05:15,770
y podemos ver que ya cargó el ícono de engrane así que con eso ya tenemos completamente configurado

54
00:05:15,830 --> 00:05:17,030
nuestro género.

55
00:05:17,030 --> 00:05:22,820
Sin embargo si empezamos a trabajar así en nuestro JSP rápidamente se va a llenar de código nuestra

56
00:05:22,820 --> 00:05:28,910
página así que vamos a hacer lo siguiente Vamos a separar este código del cabecero y lo vamos a llevar

57
00:05:28,970 --> 00:05:38,100
a un JSP privado así que vamos a hacer lo siguiente dentro de web INF vamos a crear una carpeta que

58
00:05:38,100 --> 00:05:39,150
se llame páginas

59
00:05:42,040 --> 00:05:43,910
damos un en finalizar.

60
00:05:43,920 --> 00:05:47,840
Posteriormente creamos otra carpeta otro folder

61
00:05:51,540 --> 00:05:58,230
que se llame comúnes así que aquí van a estar las páginas comunes a toda la aplicación y después vamos

62
00:05:58,230 --> 00:06:00,120
a crear una página que se llame KDE cero

63
00:06:07,550 --> 00:06:13,340
y damos clic en Finalizar y básicamente lo que va a tener esta página va a ser precisamente la información

64
00:06:13,340 --> 00:06:14,360
del cabecero.

65
00:06:14,540 --> 00:06:22,080
Vamos a quitar todo este código lo cortamos y lo agregamos y quitamos todo este código en la página

66
00:06:22,080 --> 00:06:25,340
de cabecero y agregamos el código que hemos copiado.

67
00:06:25,380 --> 00:06:33,630
Damos un formato y ya tenemos la información del cabecero pero separado en otra página y ahora lo que

68
00:06:33,630 --> 00:06:41,120
vamos a hacer dentro de la página de clientes JSP es incluir la página de cabecera así que para ello

69
00:06:41,120 --> 00:06:51,250
vamos a utilizar la acción de JSP 2.2 includo y posteriormente agregamos el atributo de paso vamos a

70
00:06:51,250 --> 00:06:55,720
acceder a web INF ya que está en las páginas privadas.

71
00:06:55,820 --> 00:07:03,440
Posteriormente accedemos al folder de páginas comunes y finalmente accedemos al JSP de cabecera o JSP

72
00:07:06,020 --> 00:07:14,140
y cerramos este elemento guardamos cambios y vamos a revisar que todo siga funcionando sin problemas.

73
00:07:14,140 --> 00:07:21,620
Podemos observar que se hizo un diploide de manera automática en nuestro servidor regresamos a la página

74
00:07:23,040 --> 00:07:28,560
refrescamos y podemos observar que de nueva cuenta tenemos el título sin ningún problema así que con

75
00:07:28,560 --> 00:07:34,500
esto ya estamos separando nuestro código en nuestra aplicación y así es como vamos a estar trabajando

76
00:07:34,830 --> 00:07:38,230
los elementos que vamos a tener en común en nuestra aplicación.

77
00:07:38,230 --> 00:07:44,970
Los vamos a agregar agotes Sepes dentro de la carpeta de páginas y en la carpeta de comunes todos estos

78
00:07:44,970 --> 00:07:46,660
JSP van a ser privados.

79
00:07:46,740 --> 00:07:52,230
Esto quiere decir que no pueden ser accedidos directamente desde el navegador web solamente elementos

80
00:07:52,230 --> 00:07:58,290
como en este caso componentes del lado del servidor como es un JSP pueden acceder y direccionar a estos

81
00:07:58,290 --> 00:08:01,150
componentes JSP que son privados.

82
00:08:01,170 --> 00:08:06,390
Vamos a dejar hasta aquí este video en el cual ya trabajamos el componente de cabecero y en los siguientes

83
00:08:06,390 --> 00:08:10,510
videos vamos a seguir trabajando con cada uno de los elementos de nuestra página.

84
00:08:10,770 --> 00:08:12,720
Nos vemos en el siguiente video saludos.