Explicamos paso a paso como migrar un módulo Field Formatter de Drupal 7 a Drupal 8. El módulo tomado como ejemplo es Vine https://drupal.org/project/vine
2. Introducción
Índice de temas
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Introducción
¿Qué es Vine?, Importancia en móviles y redes sociales
¿Cómo se usa el módulo Vine para Drupal?
Beneficios al utilizar Formatters
Construcción del módulo para Drupal 7
Migración del módulo a Drupal 8
Enlaces para profundizar en Migración de módulos y Plugins en Drupal 8
Powered by Drupal
3. Mapa Visual de temas
Introducción
Módulo Vine
para Drupal
Vine
¿Cómo
se usa?
¿Qué
es?
Importancia
Profundizar
Powered by Drupal
Construcción
del módulo para
Drupal 7
Migración
del módulo a
Drupal 8
4. Introducción
Migrando un Módulo Simple a Drupal 8
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
¿Por qué se ha elegido un módulo simple?
Para abarcar aspectos puntuales, que son particulares a la funcionalidad de este módulo
¿Qué documentación es necesaria?
Al ser simple, es suficiente con estas diapositivas
Sin embargo, es recomendable entender los conceptos y las implementaciones
• Field Formatter
• Documentación acerca de Migración
• Drupal 8 Plugins
5. Introducción
¿Qué es Vine?
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
•
•
•
•
Powered by Drupal
Es la aplicación de video-microblogging de Twitter.
Tiene interacción social.
Está orientada a smartphones.
Los videos son de 7 segundos.
6. Introducción
Cuando se tuitea un Vine ...
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Se ve el video en
la web de Twitter
y en su aplicación
para móviles.
7. Introducción
Módulo Vine para Drupal
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
¿Qué realiza este módulo?
A partir de la URL de un video en Vine, y una configuración de presentación, lo muestra en el
contenido.
Vine module
https://drupal.org/project/vine
Es un Field Formatter
E implementa sus opciones de configuración.
9. Introducción
I. Utilizar un campo de Texto
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
En cualquier Tipo de Contenido utilizar o crear un Campo del tipo Texto
10. Introducción
2. Escoger el Formato Embedded Vine
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
En el Display, escoger el Formato “Embedded Vine” para el campo utilizado
12. Introducción
1. Copiar la URL de un video en Vine
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
https://vine.co/v/hmpvn259tjt
14. Introducción
Eso es todo
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Ejemplo en vivo
Powered by Drupal
16. Introducción
Customizando: Estilo
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
El módulo provee los tamaños y estilos que sugiere Vine.
Podemos elegir entre dos etilos: Simple y Postcard;
18. Introducción
¿Por qué utilizar Formatters?
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Para:
• Tener una mejor estructura de datos
• No copiar y pegar código HTML en nuestro contenido
• Reutilizar el contenido con flexibilidad
• Aplicar cambios rápidamente
Aumentamos la productividad y seguridad
Mejoramos la administración
19. Introducción
Descarga y activación
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
https://drupal.org/project/vine
drush dl vine
drush en vine
20. Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Creación del Módulo para Drupal 7
22. Introducción
vine.info
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
El archivo .info tiene el siguiente contenido:
name = Vine
description = "Adds a Formatter for text fields to display embedded Vines"
package = Fields
core = 7.x
files[] = vine.module
23. Introducción
vine.module
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
El módulo implementa cuatro hooks, que listamos a continuación:
hook_field_formatter_info()
function vine_field_formatter_info()
hook_field_formatter_settings_form()
function vine_field_formatter_settings_form($field, $instance, $view_mode, $form, &
$form_state)
hook_field_formatter_settings_summary()
function vine_field_formatter_settings_summary($field, $instance, $view_mode)
hook_field_formatter_view()
function vine_field_formatter_view($entity_type, $entity, $field, $instance, $langcode,
$items, $display)
Powered by Drupal
24. Introducción
vine_field_formatter_info()
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Aquí se definen datos del módulo e información puntual:
1 El nombre con el que el sistema de Drupal reconocerá a este formatter.
2 La etiqueta (Label) con la que se identificará a este formatter en la interfaz (ej. configuración de
tipos de contenido).
3 El tipo de campo para el que está disponible este Formatter.
4 Las configuraciones iniciales.
function vine_field_formatter_info() {
return array(
1 'vine_formatter' => array(
2 'label' => t('Embedded Vine'),
3 'field types' => array('text'),
4 'settings' => array(
'size' => '480px',
'style' => 'simple',
),
),
);
}
Documentación: hook_field_formatter_info en Drupal 7 API
Powered by Drupal
25. Introducción
vine_field_formatter_settings_form()
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Aquí se crea el formulario de configuración:
1 Obtiene el view_mode (ej: default, teaser) en el que se almacenan nuestras configuraciones
2 Obtiene las configuraciones propiamente dichas
3 Inicializa la variable element
4 Prepara las listas de selección con las opciones disponibles
function vine_field_formatter_settings_form($field, $instance, $view_mode, $form, &
$form_state) {
1 $display = $instance['display'][$view_mode];
2 $settings = $display['settings'];
3 $element = array();
4 $element['size'] = array(
...
);
4 $element['style'] = array(
...
);
return $element;
}
Documentación: hook_field_formatter_settings_form en Drupal 7 API
Powered by Drupal
26. Introducción
$element[‘size’]
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Este arreglo provee lo necesario para construir el widget de selección de tamaño del Vine.
$element['size'] = array(
'#type'
=> 'select',
// Utiliza una lista de selección
'#title'
=> t('Vine Size'),
// Etiqueta del widget
'#description' => t('Select the size for embedded Vine'), // Texto de ayuda
'#default_value' => $settings['size'], // Obtiene el valor actualmente establecido
'#options'
=> array(
// Ofrece las opciones disponibles
'320px' => 'Small (320px)',
'480px' => 'Medium (480px)',
'600px' => 'Large (600px)',
),
);
27. Introducción
$element[‘style’]
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Este arreglo provee lo necesario para construir el widget de selección del estilo del Vine.
$element['style'] = array(
'#type'
=> 'select',
// Utiliza una lista de selección
'#title'
=> t('Vine Style'),
// Etiqueta del widget
'#description' => t('Select the style for embedded Vine'), // Texto de ayuda
'#default_value' => $settings['style'], // Obtiene el valor actualmente establecido
'#options'
=> array(
// Ofrece las opciones disponibles
'simple' => 'Simple',
'postcard' => 'Postcard',
),
);
28. Introducción
vine_field_formatter_settings_summary()
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Esta función provee el resumen de la configuración establecida para el formatter.
1 Obtiene el view_mode (default, teaser) en el que se almacenan nuestras configuraciones.
2 Obtiene las configuraciones propiamente dichas.
3 Muestra un texto claro. Ejemplos: "Utiliza un tamaño Mediano y estilo Postal", "Utiliza un
tamaño Grande y estilo Simple".
function vine_field_formatter_settings_summary($field, $instance, $view_mode) {
1 $display = $instance['display'][$view_mode];
2 $settings = $display['settings'];
3 $summary = t('Use a @size embedded Vine with "@style" style', array(
'@size' => $settings['size'],
'@style' => $settings['style'],
));
return $summary;
}
Documentación: hook_field_formatter_settings_summary en Drupal 7 API
Powered by Drupal
29. Introducción
vine_field_formatter_view()
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Esta función se encarga de proveer el código HTML que logre la visualización deseada, y considera
las configuraciones establecidas para el formatter.
function vine_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items,
$display) {
$element = array();
$settings = $display['settings']; // Obtenemos las configuraciones
$size = $settings['size'];
// Obtenemos el tamaño establecido
$style = $settings['style'];
// Obtenemos el estilo establecido
foreach ($items as $delta => $item) { // Obtenemos una URL de Vine en el contenido
$safe_value = $item['safe_value'];
}
if (isset($safe_value) ) {
// Construimos el HTML del embed
$element[0]['#markup'] = '<iframe class="vine-embed" src="' . $safe_value . '/embed/' .
$style . '" width="' . $size . '" height="' . $size . '" frameborder="0"></iframe><script async
src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>';
}
return $element;
}
Documentación: hook_field_formatter_view en Drupal 7 API
Powered by Drupal
30. Introducción
Field Formatter
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Así como en un editor de textos le damos formato a una palabra, por ejemplo, a letras cursivas y
en negrita. De la misma manera a un texto ingresado en un campo de un contenido podemos
aplicarle un formato, sencillo o complejo. A continuación un par de ejemplos:
Campo “color”
Ingresamos el valor “rojo”
Mostramos un recuadro de color rojo
Campo “tipo de mascota"
Seleccionamos “gato”
Mostramos imagen referencial de un gato
31. Introducción
Migración del módulo a Drupal 8
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Módulo
en
Drupal 7
Módulo
en
Drupal 8
32. Introducción
Estructura de archivos en D8
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Nos es familiar la
estructura en Drupal 7
La estructura en
Drupal 8 es otra
33. Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
vine.info.yml
El archivo .info en D7 contenía:
name = Vine
description = "Adds a formatter for text fields for display embedded Vines"
package = Fields
core = 7.x
files[] = vine.module
El archivo .info.yml contiene:
name:Vine
type: module
description: 'Adds a formatter for text fields for display embedded Vines.'
package: Fields
version: 8.x-1.0
core: 8.x
dependencies:
- field
hidden: false
Documentación: .info files are now .info.yml files, Writing module .info.yml files (Drupal 8.x)
Powered by Drupal
34. Introducción
VineFormatter.php
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Crear una clase. En una ruta como...
<MODULE>/lib/Drupal/<MODULE>/Plugin/field/formatter/<Formatter>.php
vine
/lib/Drupal/
vine
/Plugin/field/formatter/VineFormatter.php
35. Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Clase Formatter - Encabezado
• namespace
• use
/**
* @file
* Contains DrupalvinePluginfieldformatterVineFormatter
*/
namespace DrupalvinePluginfieldformatter;
// Field formatter annotation class
use DrupalfieldAnnotationFieldFormatter;
// Annotation translation class
use DrupalCoreAnnotationTranslation;
// FormatterBase class
use DrupalfieldPluginTypeFormatterFormatterBase;
// EntityInterface
use DrupalCoreEntityEntityInterface;
// FieldInterface
use DrupalCoreEntityFieldFieldInterface;
36. Introducción
Clase VineFormatter Extends FormatterBase
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
En la mayoría de casos querremos extender
Drupal/field/Plugin/Type/Formatter/FormatterBase
class VineFormatter extends FormatterBase {
....
}
37. Introducción
¿Y los hooks de Drupal 7?
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Se ha removido los hooks:
• hook_field_formatter_info
Es reemplazado por Plugin Discovery basado en anotaciones, utilizando la clase de anotación
Drupal/field/Annotation/FieldFormatter
Las propiedades están documentadas en las anotaciones de la clase
• hook_field_formatter_settings_form
FormatterInterface::settingForm()
• hook_field_formatter_settings_summary
FormatterInterface::settingsSummary()
• hook_field_formatter_prepare_view
FormatterInterface::prepareView()
• hook_field_formatter_view
FormatterInterface::viewElements()
Powered by Drupal
38. Introducción
Bloque de Anotaciones
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
En Drupal 7 declarábamos
propiedades y configuraciones
iniciales en
hook_field_formatter_info
function vine_field_formatter_info()
{
return array(
'vine_formatter' => array(
'label' => t('Embedded Vine'),
2 'field types' => array('text'),
3 'settings' => array(
'size' => '480px',
'style' => 'simple',
),
),
);
}
En Drupal 8, se realiza en una anotación (bloque
comentado)
Drupal/field/Annotation/FieldFormatter 1
/* * *
* Plugin implementation of the
'vine_formatter' formatter
*
* @FieldFormatter( 1
* id = "vine_formatter",
* module = "vine",
* label = @Translation("Embedded Vine"),
* field_types = { 2
* "text",
* },
* settings = { 3
* "size" = "480px",
* "style" = "simple"
* }
*)
* * */
class VineFormatter extends FormatterBase {
....
39. Introducción
FormatterInterface::settingForm()
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
En Drupal 7
hook_field_formatter_settings_form
creaba el formulario de configuración
function
vine_field_formatter_settings_form($field,
$instance, $view_mode, $form, &$form_state)
{
$display = $instance['display'][$view_mode];
$settings = $display['settings'];
$element = array();
1 $element['size'] = array(
...
);
2 $element['style'] = array(
...
);
return $element;
}
En Drupal 8, lo realiza
FormatterInterface::settingForm()
/**
* {@inheritdoc}
*/
public function settingsForm(array $form,
array &$form_state) {
$element = array();
$element['size'] = array(
1
...
);
$element['style'] = array(
2
...
);
return $element;
}
40. Introducción
$element[‘size’]
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Este arreglo provee lo necesario para construir el widget de selección de tamaño del Vine.
D7
$element['size'] = array(
'#type'
=> 'select',
'#title'
=> t('Vine Size'),
'#description' => t('Select the size for
embedded Vine'),
'#default_value' => $settings['size'],
'#options'
=> array(
'320px' => 'Small (320px)',
'480px' => 'Medium (480px)',
'600px' => 'Large (600px)',
),
);
D8
$element['size'] = array(
'#type'
=> 'select',
'#title'
=> t('Vine Size'),
'#description' => t('Select the size for
embedded Vine'),
'#default_value' => $this->getSetting('size'),
'#options'
=> array(
'320px' => 'Small (320px)',
'480px' => 'Medium (480px)',
'600px' => 'Large (600px)',
),
);
41. Introducción
$element[‘style’]
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
Este arreglo provee lo necesario para construir el widget de selección del estilo del Vine.
Análogamente
42. Introducción
FormatterInterface::settingsSummary()
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
En Drupal 7
hook_field_formatter_settings_form
provee el resumen de la configuración
establecida para el formatter
function
vine_field_formatter_settings_summary($field
, $instance, $view_mode) {
$display = $instance['display']
[$view_mode];
$settings = $display['settings'];
$summary = t('Use a @size embedded Vine
with "@style" style', array(
'@size' => $settings['size'],
'@style' => $settings['style'],
));
return $summary;
}
En Drupal 8, lo realiza
FormatterInterface::settingsSummary()
public function settingsSummary() {
$summary = array();
$summary[] = t('Use a @size embedded
Vine with "@style" style', array(
'@size' => $this->getSetting('size'),
'@style' => $this->getSetting('style'),
));
return $summary;
}
43. Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Powered by Drupal
FormatterInterface::viewElements()
Provee el código HTML que logre la visualización deseada, y considera las configuraciones
establecidas para el formatter.
En Drupal 7, lo realiza
hook_field_formatter_view
function
vine_field_formatter_view($entity_type, $entity,
$field, $instance, $langcode, $items, $display) {
$element = array();
$settings = $display['settings'];
$size = $settings['size'];
$style = $settings['style'];
foreach ($items as $delta => $item) {
$safe_value = $item['safe_value'];
}
if (isset($safe_value) ) {
$element[0]['#markup'] = ...
}
return $element;
}
En Drupal 8, lo realiza
FormatterInterface::settingsSummary()
public function viewElements(EntityInterface
$entity, $langcode, FieldInterface $items) {
$elements = array();
$size = $this->getSetting('size');
$style = $this->getSetting('style');
foreach ($items as $delta => $item) {
$elements[$delta] = array(
'#type' => 'markup',
'#markup' => ...
}
}
return $elements;
}
50. Introducción
Documentación acerca de Migración
Vine
D7 to D8 upgrade: fields, widgets and formatters
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
• Converting 7.x modules to 8.x (Índice)
• Upgrade your module to Drupal 8 - Drupalcon Prague 2013
•
más información http://webchick.net/upgrade-modules-d8
D7 to D8 upgrade tutorial: Pants module
Un Google Doc con estilo aceptable
• D7 to D8 tutorial: pathinfo module
Powered by Drupal
51. Introducción
D8 Plugins
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.info.yml
vineFormatter.php
Field formatters are now Plugins
https://drupal.org/node/1805846
Drupal 8 Field API series part 1: field formatters
http://realize.be/drupal-8-field-api-series-part-1-field-formatters
Drupal 8 Field API series part 2: field widgets
http://realize.be/drupal-8-field-api-series-part-2-field-widgets
Why Plugins?
https://drupal.org/node/1637614
Understanding Drupal 8's plugin system
http://previousnext.com.au/blog/understanding-drupal-8s-plugin-system
Powered by Drupal