1
00:00:00,150 --> 00:00:03,720
Nuestro proyecto está desordenado con respecto a las vistas.

2
00:00:03,810 --> 00:00:10,380
Si revisamos en Temperley y vamos a listar y vamos al formulario, vemos que tenemos el menú de navegación,

3
00:00:10,470 --> 00:00:11,640
que lo tenemos repetido.

4
00:00:11,730 --> 00:00:14,460
Se está repitiendo también la hoja de estilo.

5
00:00:14,760 --> 00:00:20,130
Hay varias acciones de nuestro layout que se está repitiendo una y otra vez en las diferentes página

6
00:00:20,220 --> 00:00:20,970
de la aplicación.

7
00:00:21,060 --> 00:00:23,850
Y no solamente podríamos tener el listado con el formulario.

8
00:00:23,880 --> 00:00:29,490
Podríamos tener una aplicación bastante grande con varias vista y no es posible estar repitiendo el

9
00:00:29,490 --> 00:00:31,050
menú, el pie de página.

10
00:00:31,170 --> 00:00:34,680
El getter con la hoja de estilos, con el título al final.

11
00:00:34,770 --> 00:00:39,150
Después, si queremos cambiar algo, se va a transformar en un verdadero dolor de cabeza, ya que habría

12
00:00:39,150 --> 00:00:42,360
que estar cambiando y modificando vista por vista.

13
00:00:42,450 --> 00:00:49,110
Entonces la idea es en esta clase armar una plantilla, un layout global que sea común para toda nuestra

14
00:00:49,120 --> 00:00:54,450
página y así poder reutilizar el menú de navegación, reutilizar las hojas de estilo.

15
00:00:54,580 --> 00:00:58,890
El jefe, el meta, el título y también tener un pié de página.

16
00:00:58,950 --> 00:01:04,260
También podríamos tener un banner, reutilizar un poco más las diferentes secciones o fragmentos de

17
00:01:04,260 --> 00:01:04,770
nuestra vista.

18
00:01:04,920 --> 00:01:07,140
Entonces vamos a partir en templates.

19
00:01:07,350 --> 00:01:09,000
Vamos a crear un directorio.

20
00:01:11,180 --> 00:01:11,350
La?

21
00:01:12,450 --> 00:01:20,610
Vamos a se llama la yat vamos a copiar el listar dentro del layout, vamos a renombrar con redacto Rainey

22
00:01:20,730 --> 00:01:22,520
Le vamos a colocar la YATO.

23
00:01:23,910 --> 00:01:28,260
Entonces dentro del allado vamos a tener nuestra plantilla global layout.

24
00:01:28,350 --> 00:01:30,030
Tenemos que modificar.

25
00:01:30,090 --> 00:01:33,750
Primero vamos a eliminar el contenido principal de la acción.

26
00:01:34,290 --> 00:01:43,020
Vamos a agregar primero un jeeter, una etiqueta semántica HTML5, el encabezado y vamos a tener también

27
00:01:43,110 --> 00:01:46,380
un footer que representa el pie de página.

28
00:01:46,470 --> 00:01:54,360
Ordenamos y acá vamos a tener diferentes fragmento, un fragmento para alquier reutilizable, un fragmento

29
00:01:54,360 --> 00:01:57,450
para acceder o encabezado página que contiene el menú.

30
00:01:57,510 --> 00:02:02,940
Vamos a tener el contenido principal y vamos a tener el fragmento pie de página, el footer.

31
00:02:03,600 --> 00:02:11,610
Lo primero es agregar la etiqueta fragment en cada sección energía, por ejemplo fragment y le damos

32
00:02:11,670 --> 00:02:14,080
un nombre, por ejemplo G.A.

33
00:02:14,970 --> 00:02:21,480
Entonces vamos a tener un fragmento para el GET, vamos a tener un fragmento para el Gierek que sería

34
00:02:21,570 --> 00:02:25,080
nuestro menú y también podríamos tener otra cosa dentro de Gelder.

35
00:02:25,170 --> 00:02:30,990
Vamos a tener un fragmento también para el footer y refute.

36
00:02:31,050 --> 00:02:34,590
Le podríamos agregar la clase container.

37
00:02:34,680 --> 00:02:37,140
Entonces ya nuestro layout está tomando un poco más de forma.

38
00:02:37,170 --> 00:02:43,320
Acá podríamos quitar el título y acá con comillas simple y un signo más para concatenar, le podemos

39
00:02:43,320 --> 00:02:45,930
dar un título global, por ejemplo

40
00:02:50,270 --> 00:02:55,920
Spring Boot MS Time Timeline o Data JPA y el título de cada acción.

41
00:02:56,010 --> 00:03:02,970
Vamos a agregar un poco más contenido al footer, por ejemplo, que contenga un logo, una imagen,

42
00:03:03,030 --> 00:03:09,900
llega un texto con algún tipo de derecho de autor y también agregar lleva a scrip, por ejemplo Vickery

43
00:03:09,960 --> 00:03:11,940
y también el de puta en el pie de página.

44
00:03:12,250 --> 00:03:18,660
Si ya tenemos un poco más armado el layout, acá tenemos una imagen que le vamos a copiar dentro de

45
00:03:18,660 --> 00:03:19,080
static.

46
00:03:19,140 --> 00:03:20,520
Acá están los recursos estatico.

47
00:03:22,520 --> 00:03:24,770
Vamos a crear una carpeta y match.

48
00:03:25,910 --> 00:03:26,540
Finalizar.

49
00:03:26,630 --> 00:03:29,660
Y acá vamos a copiar la imagen del logo de Spring.

50
00:03:32,390 --> 00:03:38,270
Por ejemplo, ahora vamos a ir al listar y vamos a ordenar la plantilla.

51
00:03:38,330 --> 00:03:42,200
La idea es que utilice los fragmento del día y auto.

52
00:03:42,590 --> 00:03:51,890
Vamos a quitar el GET con la etiqueta de diff con TH 2 punto Reckless y acá hacemos referencia a la

53
00:03:51,890 --> 00:03:53,060
plantilla al layout.

54
00:03:53,120 --> 00:04:00,680
Hay que incluir el directorio larch y el nombre de la plantilla, ya que la raíz de nuestras vistas

55
00:04:00,800 --> 00:04:01,460
es template.

56
00:04:01,520 --> 00:04:08,210
Por lo tanto, si está dentro del directorio layout se tiene que incluir el nombre de la plantilla 2.2.2

57
00:04:08,300 --> 00:04:10,190
y el nombre del fragmento.

58
00:04:11,450 --> 00:04:18,200
El mismo nombre que tenemos acá en el fragmento de tenemos nuestro Ogier.

59
00:04:19,190 --> 00:04:21,760
En el allado tenemos el getter.

60
00:04:23,540 --> 00:04:26,470
Entonces vamos a cambiar el menú de navegación.

61
00:04:26,840 --> 00:04:38,210
Getter y acá vamos a hacer lo mismo con TH de Tank li la etiqueta replace layout, la yat 2.2.2 y el

62
00:04:38,210 --> 00:04:39,500
nombre de la sección.

63
00:04:39,590 --> 00:04:42,020
En este caso la sección sería Geddes.

64
00:04:44,300 --> 00:04:50,420
Y hacemos actualmente lo mismo con el pie de página con el pie de página cacería footer.

65
00:04:51,830 --> 00:04:55,670
De que estamos utilizando la etiqueta footer como fragmento.

66
00:04:56,210 --> 00:04:58,520
Y el nombre de Fragmente también se llama footer.

67
00:04:58,790 --> 00:05:00,500
Cambiamos acá y acá.

68
00:05:00,620 --> 00:05:01,300
Y ahí tenemos.

69
00:05:01,940 --> 00:05:04,400
Y replicamos lo mismo para el formulario.

70
00:05:04,670 --> 00:05:06,260
Va a tener un pie de página.

71
00:05:07,490 --> 00:05:09,050
Va a tener un jeeter.

72
00:05:15,270 --> 00:05:17,460
Y va a tener el JEA.

73
00:05:22,390 --> 00:05:23,950
Entonces queda bastante más limpio.

74
00:05:24,070 --> 00:05:29,020
Se reutiliza cualquier cambio que se quiera hacer al menú o álgida, se hace en un solo archivo, en

75
00:05:29,020 --> 00:05:29,500
el layout.

76
00:05:29,560 --> 00:05:36,400
Cualquier cambio afectará a todas las vistas de forma automática, ya que estamos reutilizando los fragmentos

77
00:05:36,520 --> 00:05:37,060
de Tamblin.

78
00:05:37,210 --> 00:05:38,200
Vamos a ejecutar.

79
00:05:51,750 --> 00:06:01,160
Abrimos el navegador Letter, ni tenemos el menú, la sección principal, el contenido principal de

80
00:06:01,170 --> 00:06:03,090
la acción del controlador y el pie de página.

81
00:06:03,120 --> 00:06:09,810
Si vamos al formulario, lo mismo se reutiliza el gelder y el footer y también la hoja de estilo y los

82
00:06:10,410 --> 00:06:11,070
JavaScript.

83
00:06:12,270 --> 00:06:18,060
En la próxima clase vamos a mejorar un poco más nuestro diseño usando vostra quedabamos hasta acá.

84
00:06:18,120 --> 00:06:18,990
Hasta la próxima.