Views

Back to top

1) Introducción

(Vistas) es un módulo que nos da una imprescindible herramienta si queremos crear presentaciones de contenido dinámicas. Así sea en formato de tablas, listas o bien en forma de cuadrícula, vamos a poder enseñar aquellos nodos de contenido que, después de un filtrado adaptado se adapten a las necesidades de una petición de datos.

Entre otras acciones, el módulo Views podrá implementar:

• Una página que muestre todos y cada uno de los nodos de un tipo de contenido determinado. Además, podemos añadir filtros de búsqueda para asistir al usuario a localizar el contenido que pueda ser de su interés.
• Un bloque con un listado de los últimos usuarios registrados en el lugar.
• Una tabla de datos con campos ordenables. Los datos se pueden extraer, por poner un ejemplo, desde un conjunto de nodos de un tipo de contenido determinado.
• Un bloque con los contenidos más visitados.
• Un grid o reja con una colección de imágenes.

Back to top

2) Instalación y configuración

El módulo se compone de dos submódulos dependientes

• Views: Es el módulo primordial, preciso para hacer empleo de las vistas.
• Views UI: Aporta la interfaz de usuario, necesaria para administrar las vistas. Sin este módulo no se pueden crear o editar vistas.

Una vez instalado y activado el módulo accederemos a la próxima ruta para crear una nueva vista:
Administración->Estrutura->Vistas

También es posible accediendo desde:
Administración->Estructura->Vistas->Ajustes->Avanzado
En la ventana que se abre aparecen ciertas vistas ya creadas por el propio módulo o por otros módulos instalados. Estas vistas pueden estar activadas (texto negro)o no (texto gris) según su configuración inicial. Por poner un ejemplo podemos elegir la vista Tracker. Esta vista nos mostrará una tabla con los últimos contenidos publicados en el sitio.

En el caso que el sistema nos devuelva un error del tipo “página no encontrada” se recomienda vaciar todas y cada una de las cachés desde la opción:
Administración->Configuración->Rendimiento

Pero para entender bien su funcionamiento y su potencial nos centraremos en la creación de una nueva vista. Nos ayudaremos siguiendo exactamente el mismo ejemplo que estamos tratando de desarrollar, un portal inmobiliario. Así, se creará una vista para un tipo de contenido y lo filtraremos por el dueño de cada tipo de contenido. Así, des esta forma, cada inmobiliaria podrá acceder y dirigir sus propios inmuebles con independencia de los inmuebles que haya creado otra inmobiliaria, como es lógico.
Para continuar con el ejemplo, será aconsejable que ahora creamos un par más de inmobiliarias y tres o bien cuatro inmuebles para cada inmobiliaria. De esta forma podremos crear una tabla de inmuebles dinámica.

Antes de ver cómo crear Vistas, vamos a acceder a la pestaña Opcionespara repasar algunas de las opciones de configuración generales que afectan a la gestión de las vistas. Ciertas opciones básicas son:

• Mostrar filtros en el listado de vistas.
• Mostrar advertencia de ayuda avanzada: Existe un módulo llamado Advanced help que deja a los desarrolladores de módulos incluir ayuda avanzada en los módulos. Si no instalamos el módulo, Views nos avisará constantemente de su existencia, ya que con Advanced help obtendremos una ayuda más detallada sobre las vistas. Para evitar que se muestre este mensaje de manera continua, tenemos dos opciones, instalar el módulo Advanced help o desactivar esta opción.
• Etiqueta para el valor "cualquier": Es el valor que se muestra en los listados de selección única. El valor <Any> no es traducible, por lo que vamos a deber seleccionar el otro valor libre, - Any - (- Cualquiera -), si queremos que se muestre en español en las listas.
• Configuración de vista previa: Permite configurar el comportamiento de la Vista anterior. Por ejemplo, podemos indicar que se muestre la sentencia SQL generada, muy útil para los desarrolladores.

De las configuraciones avanzadas destacamos:

• Desactivar la caché de datos de vistas: Esta opción puede afectar al desempeño del lugar, con lo que se aconseja no activarla. Sí puede ser útil desactivarla en sitios en desarrollo, ya que evitaremos inconvenientes de actualización de la vista relacionados con la caché.
• Limpiar la caché de vistas: Elimina todos y cada uno de los datos de caché almacenados para agilizar el funcionamiento de las vistas. Utilizaremos esta opción cuando los cambios aplicados a una vista no se vean actualizados en la página final generada por la vista.
• Opciones de depuración: Durante la implementación de las vistas podemos necesitar activar ciertas de estas opciones. La interfaz utiliza JavaScript, que podrá desactivarse desde esta opción. El área de edición de vistas seguirá marchando apropiadamente, si bien sin las funcionalidades auxiliares que ofrece javascript.
• Localización: Permite escoger un método de traducción. Por defecto utilizaremos el facilitado por el núcleo.

Back to top

3) Creación de vistas

Desde el link Administración->Estructura->Vistas pulsaremos sobre el link Agregar nueva vista, que aparece en la parte superior izquierda de la ventana.

A continuación aparece una nueva ventana que nos pedirá una serie de datos. 

En este primer paso deberemos llenar las siguientes opciones:

• Nombre de vista: Es el nombre de la vista que se mostrará en los listados de administración. Puede contener cualquier carácter.
• Nombre de sistema: El nombre de sistema se mostrará al completar el nombre de la vista. Los caracteres especiales, incluyendo las tildes y ñ se sustituirán por guiones bajos, por lo que puede ser necesario editar y reescribir el nombre de sistema.
• Descripción: Añade un texto gráfico.
• Mostrar: En este apartado elegiremos el género de elemento (contenido, archivos, usuarios, etcétera). Según el tipo escogido, podremos construir vistas diferentes, ya que lo que estamos escogiendo es el elemento principal sobre el que la vista realizará la consulta SQL a la base de datos. Esta elección es esencial, ya que las opciones de configuración y campos disponibles dependerán del género de vista escogido. Una vez seleccionado un tipo de vista, no se podrá modificar este valor, así que en el caso de fallo vamos a deber construir la vista desde cero. Algunos de los tipos de vista libres inicialmente son:
  • Contenido. Deja trabajar sobre cualquier tipo de contenido o bien nodo del sitio.
  • Archivos. Deja crear una vista centrada en los archivos subidos al lugar.
  • Comentarios. Deja crear una vista con comentarios publicados en los nodos.
  • Origen de regionalización. Permite crear una vista con textos de traducción.
  • Revisiones de contenido. Deja crear una vista centrada en revisiones de nodos.
  • Términos de taxonomía. Deja crear una vista que utilice términos de taxonomía asociados a los nodos. 
  • Usuarios. Deja crear una vista donde el elemento central sean los usuarios registrados en el sitio.

• Contenido. Permite trabajar sobre cualquier género de contenido o bien nodo del sitio.
• Archivos. Deja crear una vista centrada en los ficheros subidos al sitio.
• Comentarios. Permite crear una vista con comentarios publicados en los nodos.
• Origen de regionalización. Permite crear una vista con textos de traducción.
• Revisiones de contenido. Deja crear una vista centrada en revisiones de nodos.
• Términos de taxonomía. Deja crear una vista que utilice términos de taxonomía asociados a los nodos. 
• Usuarios. Permite crear una vista donde el elemento central sean los usuarios registrados en el sitio.

También vamos a poder seleccionar si lo que queremos crear es una página o un bloque:

• Para Crear una página: Indicaremos si la vista se presentará en una página. Podremos configurar, entre otras cosas, el título, el alias de URL y el formato de presentación. El número de elementos que se mostrará, si se utilizará o no un paginador, link a menú...
• Para Crear un bloque: Indicaremos si la vista se presentará en un bloque. Podremos configurar el título, el formato de presentación y el número de elementos por página.

Como se muestra en la atrapa, hemos configurado una vista en forma de página. Hemos añadido un texto de descripción. A más, hemos preconfigurado que el formato de presentación sea una lista sin formato de resúmenes, con enlaces y sin comentarios. Finalmente hemos escogido que se muestren 10 elementos, que se utilice un paginador en caso preciso y por último  se creará un link de menú en el menú de navegación, donde el texto del link sea “inmuebles”.

Una vez completados estos campos vamos a hacer clic en Continuar y editarpara pasar a la edición de la vista. La vista no se almacenará de forma terminante hasta el momento en que no hagamos click en Guardaren la ventana de edición.

La ventana que se muestra es la columna vertebral de la edición de vistas. Esta, está compuesta por diferentes secciones que analizaremos a continuación:

• Botones de Guardar y Cancelar:(1) Se muestran en la esquina superior derecha. Sólo se mostrarán cuando la vista tenga cambios pendientes por Guardar. El botón Cancelar permite descartar los últimos cambios efectuados y que aún no hayan sido guardados.
• Presentaciones:(2) Se muestran en pestañas las presentaciones disponibles. El botón +Agregar permitirá añadir nuevas presentaciones a la vista. Por servirnos de un ejemplo, una misma vista puede generar una página y un bloque (o varias de estas presentaciones). De hecho, la vista no se podrá emplear si no se crea por lo menos una presentación. Las presentaciones más usadas son página y bloque, si bien dispondremos de otras adicionales, como un canal de noticias RSS. Algunos módulos auxiliares añadirán otro género de presentaciones.
• Editar nombre/descripción de la vista:(tres) Permite modificar el Nombre interno de la vista y el campo Descripción. Además vamos a poder añadir una etiqueta para la categorización de la vista en las páginas de administración. Desplegando este campo vamos a poder efectuar diferentes acciones:
  • Analizar vista: Busca posibles fallos en la vista.
  • Clonar vista. Genera una copia completa de la vista.
  • Exportar vista. Genera el código PHP que vamos a poder emplear para exportar la vista a otro sitio web o incluirla en un módulo
  • Reordenar vistas. Permite reordenar las presentaciones en la vista.
  • Eliminar vista. Esta opción estará libre una vez se haya guardado la vista.
• Detalles de presentación( page):(cuatro) Permite configurar la presentación seleccionada. A la derecha del nombre de la presentación se muestra un nuevo desplegable con funciones que podemos aplicar sobre la vista: ver presentación (view), clonar presentación (clone), quitar presentación (delete) y deshabilitar presentación (disable). Dentro de Detalles de cada presentación encontraremos opciones de configuración, agrupadas en:
  • Opciones básicas:(4.1) Conjunto de opciones que dejan configurar la presentación.
  • Campos:(cuatro.2) Se incorporan aquí aquellos campos que se desean mostrar en la vista.
  • Criterios de filtrado:(cuatro.3) Permiten filtrar los resultados mostrados por la vista. También es posible poner a disposición del usuario elementos de formulario (filtros expuestos) a fin de que pueda elegir los filtros que quiere aplicar a los resultados.
  • Criterios de ordenación:(4.4) Permite delimitar los criterios de ordenación de los elementos mostrados en la vista.
• Vista previa:(5) Debajo del área de edición de la vista se muestra la vista anterior de la presentación actual. Se puede escoger la Previsualización automática, con lo que toda vez que hagamos un campo se mostrará el resultado final actualizado. También podemos ejecutar la vista anterior haciendo click en el botón de Vista anterior.
• Opciones avanzadas:(6) Si  tenemos la opción configurada a fin de que esta sección se despliege automáticamente, entonces se verá como en la presentación, sinó se mostrará como un desplegable..
  • Filtros contextuales. Permite añadir filtros basados en el contexto (campos, parámetros de la URL, usuario actual, etcétera).
  • Relaciones. Permite ampliar las consultas efectuadas en una vista añadiendo campos de otros elementos Drupal que estén relacionados. Por ejemplo para una vista que muestra nodos se puede establecer una relación con el usuario que crea los nodos para mostrar campos relacionados con los usuarios.
  • Comportamientos si no hay resultados: Se puede configurar una presentación en el caso que la vista no genere resultados.
  • Formulario expuesto: Se puede configurar algunos ajustes de formulario.
  • Otras opciones avanzadas. En Otros se presentan otras alternativas de configuración de la presentación.

• Analizar vista: Busca posibles fallos en la vista.
• Clonar vista. Genera una copia completa de la vista.
• Exportar vista. Produce el código PHP que podremos usar para exportar la vista a otro sitio web o bien incluirla en un módulo
• Reordenar vistas. Permite reordenar las presentaciones en la vista.
• Eliminar vista. Esta opción estará libre una vez se haya guardado la vista.

• Opciones básicas:(4.1) Conjunto de opciones que permiten configurar la presentación.
• Campos:(cuatro.2) Se incorporan aquí aquellos campos que se desean mostrar en la vista.
• Criterios de filtrado:(4.3) Permiten filtrar los resultados mostrados por la vista. También es posible poner a disposición del usuario elementos de formulario (filtros expuestos) a fin de que pueda escoger los filtros que desea aplicar a los resultados.
• Criterios de ordenación:(4.4) Permite delimitar los criterios de ordenación de los elementos mostrados en la vista.

• Filtros contextuales. Permite añadir filtros basados en el contexto (campos, parámetros de la URL, usuario actual, etcétera).
• Relaciones. Deja ampliar las consultas efectuadas en una vista añadiendo campos de otros elementos Drupal Trademark que estén relacionados. Por ejemplo para una vista que muestra nodos se puede establecer una relación con el usuario que crea los nodos para mostrar campos relacionados con los usuarios.
• Comportamientos si no hay resultados: Se puede configurar una presentación en el caso que la vista no produzca resultados.
• Formulario expuesto: Se puede configurar algunos ajustes de formulario.
• Otras opciones avanzadas. En Otros se presentan otras alternativas de configuración de la presentación.

Back to top

4) Opciones básicas

En este apartado presentamos las opciones básicas que se podrán aplicar en todos y cada presentación de la vista:
Nombre a enseñar, Título, Formato, Opciones de página, Encabezado, Pie de página y Paginador. También vamos a ver las Opciones de Página y Opciones de Bloque, en función del tipo de presentación que deseemos crear.

• Nombre a mostrar: Es el nombre asociado a la presentación. Sólo se utilizará en la interfaz de administración de la vista. Se recomienda modificar el nombre por defecto y asignarle un nombre relacionado con el contenido de la vista (Listado de últimos inmuebles, Últimos usuarios, etcétera ).

• Título: Es el título que se mostrará en la vista. En función del género de presentación podrá ser un título de página, un título de bloque, etc.

• Formato: Inicialmente dispondremos de los siguientes formatos o estilos: Cuadrícula, Lista HTML, Lista sin formato, Menú saltar y Tabla. Una vez escogido el Formato podremos acceder a su configuración haciendo click en el link Opciones que se muestra a su derecha. A continuación veremos un caso de presentación de cada formato y las opciones disponibles para cada uno de ellos de ellos.

Por ejemplo, si escogimos una lista sin formato, conseguiremos una vista como esta:

En cambio, si elegimos una cuadrícula, conseguiremos una vista como la siguiente:

• Mostrar: Permite escoger entre Campos, contenido, entidad representada o bien envíos devueltos

4.1) Tipos de formato:

A continuación veremos de cada género de formato, las características específicas de cada uno de ellos:

• Formato cuadrícula: Crea una cuadrícula o bien grid de elementos. Es útil para presentar elementos en múltiples columnas/filas.

En el formato cuadrícula podremos configurar el número de columnas y la alineación. Si señalamos alineación horizontal los elementos de la vista se colocarán de izquierda a derecha (y de arriba a abajo), al paso que si indicamos alineación vertical los elementos se colocarán de arriba a abajo (y de izquierda a derecha).
La opción Atestar una sola línea, completa los recuadros de la fila si bien no tenga todos y cada uno de los elementos.
También vamos a poder indicar una clase para cada fila, con lo que podemos aplicar estilos desde la hoja de estilos CSS. Por último el Resumen de la tabla completa el atributo table-summary en el código HTML.

• Formato Lista HTML: Crea una lista de elementos usando las etiquetas HTML correspondientes (<ul>, <li>, etcétera). Se puede indicar si la lista será ordenada (<ol>: 1, dos, tres, ...) o sin ordenar (<ul>). También es posible agrupar los registros a partir de uno de los campos definidos y añadir clases CSS en diferentes elementos (fila, lista y elemento de la lista).

• Lista sin formato: Crea una presentación sin formato, empleando etiquetas <div>. Se podrán aplicar estilos CSS empleando las etiquetas <div> generadas.

• Menú saltar:Muestra un control de selección de elementos con los resultados de la vista. El usuario podrá elegir el elemento al que quiere Ir (o bien saltar).

• Tabla:Crea una tabla donde las columnas se corresponden con campos. Las tablas permiten la ordenación automática, cabecera, etc. Desde las Opciones del formato Tabla vamos a poder configurar:
  • Columna donde se ubica el campo. Esto permitirá agrupar múltiples campos bajo una misma columna. En estos casos vamos a poder indicar el valor del Separador entre campos (por ejemplo una coma, un guión, etcétera).
  • Alineación del campo. Las alineaciones posibles son izquierda, centrado, derecha.
  • Ordenable. Permite indicar si la vista será ordenable por esta columna. Cuando una columna es ordenable, el título se convertirá en un link sobre el que vamos a poder hacer clic para mudar la ordenación (ascendente/descendente).
  • Orden predefinido. Podemos señalar qué columna definirá el orden predefinido de la tabla.
  • Sobrescribir el ordenamiento normal si se emplea la ordenación mediante clicks. Si esta opción no está activada prevalecerá la ordenación definida en la vista.
  • Activar encabezados de tablas fijos. Se trata de un efecto javascript que hace que, aunque movamos el scroll de la pantalla para poder ver las filas de la tabla de más abajo, la cabecera siempre quede fija. Es un efecto afín al que hemos visto en la tabla de administración de permisos del lugar.
  • Método de ordenación predeterminado. Se aplicará el orden indicado, ascendiente o bien descendente, si hemos seleccionado el orden predefinido de ciertas columnas.
  • Clase de la fila. Permite señalar un nombre de clase para aplicar estilos CSS.
  • Resumen de la tabla, completa el atributo table-summary en el código HTML.
  • Show the empty text in the table (muestra el texto vacío en la tabla). Por defecto si la vista no devuelve resultados, la tabla no se mostrará. Activando esta opción se mostrará la tabla con el texto pertinente indicando que no hay resultados.

• Columna donde se ubica el campo. Esto permitirá agrupar varios campos bajo una misma columna. En estos casos vamos a poder indicar el valor del Separador entre campos (por ejemplo una coma, un guión, etcétera).
• Alineación del campo. Las alineaciones posibles son izquierda, centrado, derecha.
• Ordenable. Deja apuntar si la vista será ordenable por esta columna. En el momento en que una columna es ordenable, el título se convertirá en un enlace sobre el que vamos a poder hacer clic para mudar la ordenación (ascendente/descendente).
• Orden predefinido. Podemos apuntar qué columna definirá el orden predefinido de la tabla.
• Sobrescribir el ordenamiento normal si se usa la ordenación a través de clicks. Si esta opción no está activada prevalecerá la ordenación definida en la vista.
• Activar encabezamientos de tablas fijos. Se trata de un efecto javascript que hace que, si bien movamos el scroll de la pantalla para poder ver las filas de la tabla de más abajo, la cabecera siempre y en todo momento quede fija. Es un efecto afín al que hemos visto en la tabla de administración de permisos del sitio.
• Método de ordenación predeterminado. Se aplicará el orden indicado, ascendente o descendente, si hemos seleccionado el orden predefinido de alguna de las columnas.
• Clase de la fila. Deja señalar un nombre de clase para aplicar estilos CSS.
• Resumen de la tabla, completa el atributo table-summary en el código HTML.
• Show the empty text in the table (muestra el texto vacío en la tabla). Por defecto si la vista no devuelve resultados, la tabla no se mostrará. Activando esta opción se mostrará la tabla con el texto pertinente indicando que no hay resultados.

En el instante de crear una vista podemos escoger el tipo de vista que queremos, así sea una página, un bloque o bien los dos. A continuación se explica cada opción comentando en cada una las características:

4.2) Opción de página:

Si hemos seleccionado el tipo de presentación Página, se mostrará el conjunto de Opciones de Página:

• Ruta: Alias de URL de la página donde se mostrará la vista.
• Menú: Podemos hacer que la página se asocie con un elemento de menú.
• Acceso: Se puede establecer el acceso a la vista a través de un permiso o un rol. En función de la opción seleccionada se permitirá escoger el valor correspondiente (un permiso o bien un rol).
• Encabezado y Pie de página: Permite añadir múltiples bloques de encabezado y/o pie de página con diferente contenido y configuración.
• Existen dos tipo:
  • Área de texto. Añade un texto con formato. Se pueden emplear patrones de remplazo.
  • Área de vista. Deja insertar otra vista en el encabezado o bien pie de página de la vista actual.
• Paginador: Permite configurar cómo se paginarán los elementos cuando excedan del número de elementos por página definido. Las opciones de paginador disponibles son:
  • Mostrar todos y cada uno de los elementos. Sin paginador.
  • Mostrar un número específico de elementos. Sin paginador.
  • Salida paginada, mini paginador.
  • Salida paginada, paginador completo.
• Enlace 'más...':Agregará un enlace "más..." en la parte inferior informando que existe más contenido presionando sobre él.

• Área de texto. Añade un texto con formato. Se pueden emplear patrones de reemplazo.
• Área de vista. Deja introducir otra vista en el encabezado o pie de página de la vista actual.

• Mostrar todos y cada uno de los elementos. Sin paginador.
• Mostrar un número específico de elementos. Sin paginador.
• Salida paginada, mini paginador.
• Salida paginada, paginador completo.

4.3) Opción de bloque

Si hemos seleccionado el género de presentación Bloque, se mostrará el conjunto de Opciones de Bloque. Las nuevas opciones con respecto al género de presentación
Página son:

• Nombre del bloque: Será el nombre que se mostrará en el área de administración de bloques.
• Enlace 'más...': Al crear el link más se enlazará con la página de la vista. Generalmente el bloque mostrará un conjunto de resultados más reducido que el de la página, y el link más permitirá al usuario acceder al resto de resultados de la vista. Las opciones de Acceso, Encabezado, Pie de página y Paginador son afines a las del tipo de presentación Página.

4.4) Sobrescribir opciones

En general las opciones comunes que configuremos en la vista afectarán a todas las presentaciones. Si queremos aplicar una configuración diferente en una de las presentaciones, tendremos que escoger la opción "sobrescribir". Así vamos a poder configurar un valor específico para la presentación seleccionada.

Las opciones que hayan sido sobrescritas en la presentación actual se mostrarán en cursiva.

 

 

Back to top