WEBVTT

00:00:01.016 --> 00:00:03.336 align:middle
Bien, equipo, las cosas
tienen buena pinta. Hemos

00:00:03.636 --> 00:00:09.656 align:middle
creado un "tipo de valor" Recipe, una consulta
personalizada para cargarlos, y un convertidor de valores

00:00:09.656 --> 00:00:13.416 align:middle
para ayudar a Layouts a entender
nuestros objetos Recipe.

00:00:14.036 --> 00:00:20.296 align:middle
Lo que aún no hemos hecho es decirle a
Layouts cómo representar un elemento Recipe,

00:00:20.696 --> 00:00:25.666 align:middle
siendo elemento la palabra que Layouts
utiliza para las "cosas" individuales

00:00:25.756 --> 00:00:27.906 align:middle
que los bloques de rejilla
y de lista representan.

00:00:28.396 --> 00:00:34.566 align:middle
Y, de hecho, tenemos que decirle a Layouts cómo representar una
versión de administrador de un elemento de receta, que se mostrará

00:00:34.896 --> 00:00:40.406 align:middle
aquí, así como la versión más
importante del elemento para el frontend.

00:00:41.216 --> 00:00:44.676 align:middle
La forma en que se muestra un elemento
se denomina "vista de elemento".

00:00:45.376 --> 00:00:48.826 align:middle
Para añadir una nueva vista de artículo,
empezaremos en la configuración.

00:00:49.956 --> 00:00:55.876 align:middle
Añade una clave view con
item_view debajo y app debajo.

00:00:56.446 --> 00:01:01.836 align:middle
Añadiré un comentario, porque
en Layouts, app significa "admin".

00:01:02.396 --> 00:01:09.916 align:middle
Así que lo que vamos a definir bajo la clave app será
la vista de administrador para nuestro elemento de receta:

00:01:10.896 --> 00:01:12.596 align:middle
A continuación, añade recipes_app...

00:01:12.596 --> 00:01:17.856 align:middle
con una pequeña nota para decir
que esta clave no es importante:

00:01:18.856 --> 00:01:26.466 align:middle
A diferencia de otras cosas, como latest_recipes,
esta clave interna no se utilizará en ningún sitio.

00:01:27.316 --> 00:01:29.796 align:middle
A continuación, necesitamos
dos cosas importantes.

00:01:30.126 --> 00:01:38.106 align:middle
En primer lugar, template -no incluyas la "s" como he hecho
yo- pon una ruta de acceso a la plantilla, como nglayouts/

00:01:38.406 --> 00:01:43.646 align:middle
-ese es un nombre de directorio estándar para usar en las
plantillas, pero podrías usar cualquier cosa- y luego,

00:01:44.006 --> 00:01:48.446 align:middle
¿qué tal admin/recipe_item.html.twig:

00:01:49.686 --> 00:01:54.336 align:middle
La segunda cosa importante es
la clave muy especial match.

00:01:55.186 --> 00:01:58.696 align:middle
Tenemos que decirle a Layouts que ésta
es la plantilla que debe utilizarse

00:01:58.926 --> 00:02:02.096 align:middle
cuando se está renderizando
un elemento de la receta.

00:02:02.916 --> 00:02:10.346 align:middle
Por ejemplo, imagina que tenemos dos tipos de
valores: recetas y también entradas de blog.

00:02:11.016 --> 00:02:15.966 align:middle
Pues bien, Layouts necesitaría saber que ésta es
la plantilla que debe utilizarse para las recetas...

00:02:16.266 --> 00:02:19.916 align:middle
pero que hay que utilizar una plantilla de
elementos diferente para las entradas del blog.

00:02:20.966 --> 00:02:28.666 align:middle
Para ello, utilizaremos una extraña sintaxis:
item\value_type ajustado a doctrine_recipe:

00:02:29.006 --> 00:02:33.816 align:middle
Donde doctrine_recipe hace referencia al
nombre de nuestro tipo de valor aquí arriba:

00:02:35.136 --> 00:02:39.296 align:middle
Vamos a ver esta clave match
varias veces más en este tutorial.

00:02:40.046 --> 00:02:43.286 align:middle
Layouts tiene un montón de
"emparejadores" incorporados,

00:02:43.746 --> 00:02:48.236 align:middle
que se identifican con
cadenas como item\value_type.

00:02:48.996 --> 00:02:53.976 align:middle
Se utilizan para ayudar a hacer coincidir una
pieza de configuración, como esta plantilla,

00:02:54.136 --> 00:03:00.116 align:middle
con otra pieza de configuración,
como el tipo de valor doctrine_recipe.

00:03:01.246 --> 00:03:04.676 align:middle
Hay un número finito de
estos emparejadores, y vamos a

00:03:05.126 --> 00:03:08.226 align:middle
ver los más importantes a lo largo del camino.

00:03:08.656 --> 00:03:10.966 align:middle
Así que no te preocupes demasiado por ellos.

00:03:11.946 --> 00:03:16.566 align:middle
Ah, pero déjame que corrija mi error
tipográfico: debería ser template sin "s".

00:03:17.666 --> 00:03:22.356 align:middle
De todos modos, quiero mencionar una cosa
rápida sobre la clave de configuración view:

00:03:23.036 --> 00:03:27.576 align:middle
sólo hay un pequeño número de
subclaves que van debajo de ella.

00:03:28.276 --> 00:03:35.156 align:middle
Busca tu terminal y ejecuta: php ./bin/console
debug:config netgen_layouts view Esto volcará

00:03:35.156 --> 00:03:39.026 align:middle
una enorme lista de config, pero no te abrumes

00:03:39.536 --> 00:03:41.956 align:middle
Veremos las partes importantes
de esto más adelante.

00:03:42.926 --> 00:03:45.566 align:middle
Lo que quiero que mires son las
claves raíz que van por debajo de

00:03:45.566 --> 00:03:50.086 align:middle
view, como block_view y layout_view. Resulta

00:03:51.316 --> 00:03:57.156 align:middle
que hay seis claves diferentes que
puedes poner debajo de la clave view

00:03:57.246 --> 00:04:00.756 align:middle
en tu configuración, pero sólo
nos interesan dos de ellas...

00:04:01.116 --> 00:04:03.506 align:middle
por eso lo menciono.

00:04:04.206 --> 00:04:08.166 align:middle
Cuando se trata de personalizar tus
vistas, ¡es realmente muy sencillo!

00:04:08.816 --> 00:04:15.296 align:middle
La primera clave que nos importa es item_view, que controla
las plantillas que se utilizan cuando se representan

00:04:15.476 --> 00:04:19.926 align:middle
"elementos": es decir, cuando se representan
cosas dentro de una cuadrícula o una lista. La

00:04:20.936 --> 00:04:24.916 align:middle
única otra subclave que nos
interesa es block_view , que

00:04:25.366 --> 00:04:30.006 align:middle
es la forma de configurar la plantilla utilizada
para representar diferentes tipos de bloques,

00:04:30.296 --> 00:04:32.906 align:middle
como el bloque title o el bloque text.

00:04:33.686 --> 00:04:38.986 align:middle
Sí, o bien estás renderizando un bloque
y quieres personalizar su plantilla

00:04:39.426 --> 00:04:43.756 align:middle
o bien estás renderizando un
elemento dentro de un bloque y quieres

00:04:43.756 --> 00:04:46.326 align:middle
personalizar la plantilla de ese elemento.

00:04:47.316 --> 00:04:52.876 align:middle
Así que la configuración parece gigantesca,
pero la mayoría de estas cosas son internas

00:04:53.006 --> 00:04:54.826 align:middle
y nunca tendrás que preocuparte por ellas.

00:04:55.686 --> 00:05:01.936 align:middle
Bien: tenemos nuestro item_view para nuestro
doctrine_recipe para el área de administración.

00:05:02.446 --> 00:05:03.706 align:middle
Vamos a añadir esa plantilla.

00:05:04.146 --> 00:05:09.956 align:middle
En el directorio templates/, crea dos
nuevos subdirectorios: nglayouts/admin/.

00:05:09.956 --> 00:05:15.836 align:middle
Y luego, un nuevo archivo
llamado recipe_item.html.twig.

00:05:16.936 --> 00:05:19.766 align:middle
Dentro, escribe Does it work?

00:05:20.146 --> 00:05:26.106 align:middle
y... usemos también la función dump() para
poder ver a qué variables tenemos acceso:

00:05:27.046 --> 00:05:31.446 align:middle
Bien, vuelve a tu navegador, actualiza
el administrador de diseños y...

00:05:32.436 --> 00:05:33.936 align:middle
¡funciona!

00:05:34.416 --> 00:05:38.556 align:middle
Y, aparentemente, tenemos
acceso a varias variables.

00:05:39.206 --> 00:05:41.326 align:middle
La más importante es item.

00:05:42.126 --> 00:05:45.806 align:middle
Se trata de un objeto CmsItem de Layouts...

00:05:46.116 --> 00:05:50.176 align:middle
¡y tiene una propiedad llamada
object establecida a nuestro Recipe!

00:05:50.746 --> 00:05:51.966 align:middle
¡Vamos a utilizarlo!

00:05:52.796 --> 00:05:58.406 align:middle
Digamos {{ item.object.name
}}, luego una tubería, y...

00:05:58.406 --> 00:06:05.246 align:middle
imprimamos también una fecha: {{
item.object.createdAt }} - una de las

00:06:05.246 --> 00:06:10.666 align:middle
otras propiedades de Recipe
canalizada en el filtro date

00:06:11.556 --> 00:06:12.196 align:middle
con Y-m-d:

00:06:12.576 --> 00:06:17.246 align:middle
¡Vamos a comprobarlo! Muévete,

00:06:17.686 --> 00:06:22.986 align:middle
refresca y... ¡ya está! Puedes hacer esto
más elegante si quieres, pero esto nos servirá.

00:06:23.686 --> 00:06:27.116 align:middle
A continuación: vamos a crear la vista 
de artículos del frontend.