Vistas está en Drupal 8 Core. Todos sabemos eso a estas alturas. Twig es el nuevo motor de plantillas en Drupal 8. Eso también lo sabemos. Pero, ¿sabemos interactuar programáticamente con el primero para tematizar una vista con el segundo? Además de anular las plantillas de vista como cualquier otro subsistema, tenemos una alternativa más potente disponible en forma de complementos de vistas (pantalla, estilo, fila y campo).
En este artículo, veremos cómo podemos crear un complemento de estilo de vista personalizado en Drupal 8. Apuntaremos al marcado de la pestaña Bootstrap e implementaremos una salida con pestañas para los resultados de nuestra vista. En la configuración de la vista, podemos usar la configuración de estilo para especificar qué campo se usa como una copia de la navegación de pestañas, y el resto de los campos se muestran en sus respectivas áreas de pestañas. Básicamente, cada resultado de vista representa una pestaña, por lo que este ejemplo no es adecuado para vistas que tienen más de unos pocos resultados. El objetivo principal es ilustrar cómo podemos crear nuestros propios complementos de estilo de vistas en Drupal 8.
No entraremos en detalles sobre cómo usar Bootstrap en su proyecto. Sin embargo, puede consultar la página de documentación de Activos o incluso este artículo para asegurarse de que los usuarios anónimos puedan beneficiarse de la carga de jQuery en la página. Y si desea obtener una vista previa del código que hemos escrito, puede encontrarlo en este repositorio dentro del módulo de demostración.
¿Qué es el complemento de estilo?
El complemento Views Style es responsable de representar la lista. Ejemplos notables de complementos de estilo central son la lista sin procesar, la lista html, la tabla o la cuadrícula. Son utilizados por el complemento de visualización y, a su vez, utilizan complementos de fila que representan un elemento de la colección.
En Drupal 8, todos los tipos de complementos de Vistas se construyen utilizando el nuevo sistema de complementos y tienen alguna funcionalidad común (siempre se extienden desde la misma base de complementos de Vistas).
Ahora vamos a crear nuestro propio complemento de estilo que pueda ser utilizado por la mayoría de los tipos de anuncios (página, bloque, etc.) y que use el complemento Field Rows.
El complemento de estilo de pestañas de Bootstrap
El primer paso es crear nuestra clase de complemento, ubicada en la carpeta complemento/vistas/estilo de nuestro módulo:
espacio de nombres drupalpruebaenchufarpuntos de vistaestilo;
usar drupalcentroFormaFormularioEstadoInterfaz;
usar drupalpuntos de vistaenchufarpuntos de vistaestiloEstiloPluginBase;
clase Pestañas de arranque expandido EstiloPluginBase {
protegido $usesRowPlugin = CORRECTO;
protegido $usos de agrupación = INCORRECTO;
protegido función definiropciones() {
$opciones = padre::definiropciones();
$opciones[‘tab_nav_field’] = Fila(‘Originalmente’ => »);
devolver $opciones;
}
Publicidad función buildOptionsForm(&$formulario, FormularioEstadoInterfaz $formulario_estado) {
padre::buildOptionsForm($formulario, $formulario_estado);
$opciones = $eso->controlador de pantalla->obtener etiquetas de campo(CORRECTO);
$forma[‘tab_nav_field’] = Fila(
‘#Título’ => $eso->ella(‘El panel de navegación de pestañas’),
‘#Designacion’ => $eso->ella(‘Seleccione el campo para usar como navegación de pestañas. Los campos restantes se muestran en el contenido de la pestaña.’),
‘#Escribe’ => ‘elegir’,
‘#Valor por defecto’ => $eso->opciones[‘tab_nav_field’],
‘#opciones’ => $opciones,
);
}
}
El tipo de complemento de Drupal que instanciaremos es ViewsStyle con alguna configuración básica pasada en la anotación. Además de las obvias, tenemos las teclas theme y display_types que vale la pena mencionar. El primero declara qué función de tema usa este complemento de estilo para representar sus datos, mientras que el segundo declara qué tipos de complementos de visualización pueden usar este estilo (en nuestro caso, todos los tipos de visualización que de otro modo no tienen un tipo de especificación personalizado: normal ). Consulte la clase de anotación DrupalviewsAnnotationViewsStyle para obtener más información sobre todas las configuraciones de anotación disponibles para este tipo de complemento.
Con las dos propiedades de clase, declaramos que nuestro estilo usa complementos de fila pero no permite la agrupación. Asegúrese de consultar las clases principales para obtener más información sobre qué otras opciones se pueden especificar de esta manera. Por ejemplo, la clase que estamos extendiendo ya declara que los campos Vistas se pueden usar con el complemento de estilo.
Como se mencionó anteriormente, al usar los dos métodos, creamos una opción de complemento y un elemento de formulario para especificar qué campo debe actuar como navegación por pestañas. Con el controlador de visualización actual ($this->displayHandler) podemos cargar todos los campos de vista disponibles que agregó el creador del sitio. Y este nuevo elemento de formulario estará disponible en el formulario de configuración de estilo:
Como estamos extendiendo la clase StylePluginBase, no necesitamos hacer nada más. Para la salida de marcado, podemos usar el tema demo_bootstrap_tabs, que obtiene las variables relevantes de la vista ejecutada. Si queremos podemos anular cada uno de los métodos de renderizado y añadir más variables, cambiar el tema o lo que necesitemos. Estamos bien con los valores predeterminados, especialmente porque implementaremos un preprocesador para manejar las variables que recibirá la plantilla.
El tema
Es hora de definir el tema demo_bootstrap_tabs como de costumbre (en nuestro archivo .module):
función tema_demo($ presente, $tipo, $tema, $ruta) {
devolver Fila(
‘demo_bootstrap_tabs’ => Fila(
‘Variables’ => Fila(‘Panorama’ => CERO, ‘filas’ => CERO),
‘Sendero’ => drupal_get_path(‘Módulo’, población) . ‘/Plantillas’,
),
);
}
De forma predeterminada, el complemento de estilo pasa el objeto $view y las $filas resultantes a la plantilla. Depende del preprocesador manipular un poco estas variables (si es necesario) antes de enviarlas a la plantilla:
función template_preprocess_demo_bootstrap_tabs(&$variables) {
$ver = $variables[‘view’];
$filas = $variables[‘rows’];
$variables[‘nav’] = Fila();
$campo = $ver->plugin_estilo->opciones[‘tab_nav_field’];
si (!$campo || !comer($ver->configurar[$field])) {
template_preprocess_views_view_unformatted($variables);
devolver;
}
$nav = Fila();
para cada ($filas as identificación de $ => $fila) {
$nav[$id] = Fila(
‘#Tema’ => ‘views_view_field’,
‘#Panorama’ => $ver,
‘#configurar’ => $ver->configurar[$field],
‘#la línea’ => $fila[‘#row’],
);
}
template_preprocess_views_view_unformatted($variables);
$variables[‘nav’] = $nav;
}
Entonces, ¿qué está pasando aquí? Primero, verifiquemos las opciones del complemento de estilo para usar el nombre del campo (elegido al configurar la vista). Si no hay ninguno, regresamos, pero no sin antes hacer un poco de preprocesamiento estándar, que la función template_preprocess_views_view_unformatted ya hace bien. Así que le delegamos. Luego recorremos los resultados de Vistas y creamos un conjunto de contenido para nuestra navegación por pestañas. Para hacer esto, usamos la función de diseño de vistas estándar, views_view_field, para representar el campo seleccionado. Finalmente, pasamos esta matriz a la plantilla y también ejecutamos el preprocesador de estilo de lista sin procesar predeterminado.
La plantilla
En Drupal 8 ya no hay funciones de temas, ahora todo se maneja en plantillas Twig. Entonces, veamos cómo se ve el archivo demo-bootstrap-tabs.html.twig en la carpeta de plantillas de nuestro módulo:
<departamento>
<!— pestañas de navegación —>
<ul clase=«pestañas de navegación de navegación» role=«Tableta»>
{% hacia pestaña en el sistema de navegación %}
{% Activar = » %}
{% si Cinta.índice0 == 0 %}
{% Activar = ‘activo’ %}
{% final %}
<mi papel=«Presentación» clase=«{{ habilitar }}»><a href=«#tab-{{ loop.index0 }}» aria–control S=«Perfil» role=«pestaña» Datos–Cambiar=«pestaña»>{{ pestaña }}</a></izquierda>
{% fin para %}
</ul>
<!— panes de pestaña —>
<departamento clase=«Contenido de la pestaña»>
{% hacia fila en fila %}
{% Activar = » %}
{% si Cinta.índice0 == 0 %}
{% Activar = ‘activo’ %}
{% final %}
<varios roles=«Panel de pestañas» clase=Pestaña «{{ activo }}» caminar=«pestaña-{{ loop.index0 }}»>{{ la línea.contenido }}</departamento>
{% fin para %}
</departamento>
</departamento>
Como puede ver, este es el marcado necesario para las pestañas de Bootstrap. Por supuesto, no funcionará sin antes asegurarse de que los estilos y scripts de Bootstrap relevantes estén cargados en su tema.
Lo primero que representamos son los elementos de navegación de pestañas (de nuestra variable de navegación). Al iterar sobre esta matriz, también usamos el valor del índice de bucle para establecer el primer elemento como activo de forma predeterminada y poder orientar las áreas de contenido de las pestañas a continuación con ID únicos. Para obtener el valor real de los elementos, simplemente imprimimos la matriz de representación que creamos en nuestro preprocesador y Drupal se encarga de la representación. Dicho esto, probablemente sea una buena idea asegurarse de que el campo que use aquí sea relativamente corto, sin enlace y con un marcado simple. Los títulos probablemente funcionarían bien. Sin embargo, esta es una cuestión de la configuración adecuada de la vista.
Debajo de la navegación, imprimimos las filas de la vista real, usando el mismo índice de bucle para que la primera fila sea predeterminada como la ventana de la pestaña activa e identificándola de manera única para que la navegación sobre ella pueda controlar su visibilidad. En cuanto al contenido, imprimimos toda la variable row.content (que se prepara en template_preprocess_views_view_unformatted) y que contiene todos los campos de nuestra vista. Y si no queremos incluir el campo que usamos para la navegación, simplemente podemos excluirlo de la visualización en la configuración de la vista. Todavía aparece en la navegación (porque lo imprimimos explícitamente allí), pero no en el área de la pestaña principal.
Conclusión
Y ahí lo tenemos. Un complemento de estilo de vistas para mostrar los resultados de la vista como pestañas de arranque. Ahora todo lo que tenemos que hacer es asegurarnos de que los activos de arranque estén cargados y simplemente configurar nuestra vista para usar el nuevo complemento de estilo. Tenga en cuenta que esto no está diseñado para vistas con muchos resultados y es solo un ejemplo para demostrar cómo crear complementos de estilo.
Si tiene alguna pregunta, comentario o sugerencia, ¡déjelos a continuación!
