Migrando un Field
Formatter a Drupal 8
DrupalCamp Perú 2013
Introducción

Índice de temas

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• A...
Mapa Visual de temas

Introducción

Módulo Vine
para Drupal

Vine
¿Cómo
se usa?
¿Qué
es?

Importancia

Profundizar

Powere...
Introducción

Migrando un Módulo Simple a Drupal 8

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.mo...
Introducción

¿Qué es Vine?

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Arc...
Introducción

Cuando se tuitea un Vine ...

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vin...
Introducción

Módulo Vine para Drupal

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x...
Introducción

Configuración

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Arch...
Introducción

I. Utilizar un campo de Texto

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vi...
Introducción

2. Escoger el Formato Embedded Vine

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.mod...
Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.inf...
Introducción

1. Copiar la URL de un video en Vine

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.mo...
Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.inf...
Introducción

Eso es todo

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archi...
Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.inf...
Introducción

Customizando: Estilo

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1....
Introducción

Customizando: Tamaño

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1....
Introducción

¿Por qué utilizar Formatters?

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vi...
Introducción

Descarga y activación

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1...
Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.inf...
Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.inf...
Introducción

vine.info

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivo...
Introducción

vine.module

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archi...
Introducción

vine_field_formatter_info()

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine ...
Introducción

vine_field_formatter_settings_form()

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.mod...
Introducción

$element[‘size’]

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• ...
Introducción

$element[‘style’]

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
•...
Introducción

vine_field_formatter_settings_summary()

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine....
Introducción

vine_field_formatter_view()

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine ...
Introducción

Field Formatter

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• A...
Introducción

Migración del módulo a Drupal 8

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
...
Introducción

Estructura de archivos en D8

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vin...
Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.inf...
Introducción

VineFormatter.php

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
•...
Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.inf...
Introducción

Clase VineFormatter Extends FormatterBase

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vi...
Introducción

¿Y los hooks de Drupal 7?

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8...
Introducción

Bloque de Anotaciones

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1...
Introducción

FormatterInterface::settingForm()

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.modul...
Introducción

$element[‘size’]

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• ...
Introducción

$element[‘style’]

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
•...
Introducción

FormatterInterface::settingsSummary()

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.m...
Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.inf...
Introducción
Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archivos
• vine.inf...
Agregando un campo de texto en Drupal 8

Powered by Drupal
Configurando el Display Format

Powered by Drupal
Así se ve en el Nodo

Powered by Drupal
Configurando los settings para el Teaser

Powered by Drupal
Así se ve en el Home

Powered by Drupal
Introducción

Documentación acerca de Migración

Vine
D7 to D8 upgrade: fields, widgets and formatters

Módulo Vine
Uso
Con...
Introducción

D8 Plugins

Vine
Módulo Vine
Uso
Construcción en D7
• Archivos
• vine.info
vine.module
vine 8.x-1.0
• Archiv...
A todos

Gracias

Powered by Drupal
Upcoming SlideShare
Loading in …5
×

Migrando un módulo Field Formatter a Drupal 8

1,644 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,644
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Migrando un módulo Field Formatter a Drupal 8

  1. 1. Migrando un Field Formatter a Drupal 8 DrupalCamp Perú 2013
  2. 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. 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. 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. 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. 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. 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.
  8. 8. Introducción Configuració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 1. Utilizar un campo de Texto 2. Escoger el Formato “Embedded Vine”
  9. 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. 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
  11. 11. 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 Es sencillo de utilizar
  12. 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
  13. 13. 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 Pegar la URL
  14. 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
  15. 15. 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 Opciones del Embed
  16. 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;
  17. 17. Introducción Customizando: Tamaño 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 y entre tres tamaños: Large (600px), Medium (480px) y Small (320px)
  18. 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. 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. 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
  21. 21. 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 Estructura de archivos
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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; }
  44. 44. 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 #markup En Drupal 7 '<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>'; En Drupal 8 '<iframe class="vine-embed" src="' . $item->value . '/embed/' . $style . '" width="' . $size . '" height="' . $size . '" frameborder="0"></iframe><script async src="//platform.vine.co/static/ scripts/embed.js" charset="utf-8"></script>';
  45. 45. Agregando un campo de texto en Drupal 8 Powered by Drupal
  46. 46. Configurando el Display Format Powered by Drupal
  47. 47. Así se ve en el Nodo Powered by Drupal
  48. 48. Configurando los settings para el Teaser Powered by Drupal
  49. 49. Así se ve en el Home Powered by Drupal
  50. 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. 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
  52. 52. A todos Gracias Powered by Drupal

×