Render API en Drupal 7

Quedada diciembre Drupal Sevilla

About me

Jose Luis Bellido

Agradecimientos

The Coding Dead

Code Dead: Aprende a identificarlo

  • Sales corriendo cuando lo ves.
  • Te come el cerebro cada vez que pasas cerca.
  • Te come tu tiempo si te paras en el.
  • No se reproduce
  • Es difícil de tocar sin que salgas herido o mueras en el intento.
  global $user;

  $account = user_load($user->uid);
  $output  = '<div class="logged-user-info">';
  // User picture:
  $output .= "<a href='/user/$account->uid'>";
  $output .= "<img src='/sites/default/files/pictures/" . $account->picture->filename ."'>";
  $output .= "</a>";
  // User roles:
  $output .= '<ul>';
  foreach($user->roles as $rid => $role) {
    $output .= '<li>'. $role .'</li>';
  }
  $output .= '</ul>';
  // User achievements:
  $output .= '<div class="user-achievements">';
  $output .= '<span class="user-points">' . t('User points: @points', array('@points' => 4)) . '</span>';
  $output .= '<span class="highlighted-achievement">';
  $output .= t('Highest score: @score', array('@score' => 16));
  $output .= '</span>';
  $output .= '</div>';
  $output .= '</div>';

  return $output;
}

Sujeto nº1: Estado inicial

Sujeto nº1 : Características y síntomas

  • No reusable.
  • Muy propenso a fallos.
  • Muy propenso al ctrl+c ctrl+v.
  • Reinventa la rueda.
  • No usa estructuras ya hechas.
  • Los themes no actuarán en tu output.
  • No harás amigos entre los themers.

Aplicación del tratamiento : "themes"

  global $user;

  $output  = '<div class="logged-user-info">';
  // User picture:
  $output .= theme('user_picture', array('account' => $user));
  // User roles:
  $output .= theme('item_list', array('items' => $user->roles));
  // User achievements:
  $output .= theme('user_achievements', array('points' => 4,'score' => 16));
  $output .= '</div>';

  // Add custom css & js:
  drupal_add_js(drupal_get_path('module', 'render_examples') . '/js/user_achievements.js');
  drupal_add_css(drupal_get_path('module', 'render_examples') . '/css/user_achievements.css');

  return $output;

Análisis del tratamiento "Themes"

  • Más legible.
  • Usando estructuras base.
  • Más reusable.
  • Poco flexible.
  • CSS y JS no ligado al theme.
  • No podemos alterar.
  • Drupal 6 way.

Aplicación del tratamiento : Render arrays

 global $user;

  $render = array(
    'user-picture' => array(
      '#theme' => 'user_picture',
      '#account' => $user,
    ),
    'item-list' => array(
      '#theme' => 'item_list',
      '#items' => $user->roles,
    ),
    'user-achievements' => array(
      '#theme' => 'user_achievements',
      '#points' => 4,
      '#score' => 16,
      '#attached' => array(
        'js' => array(drupal_get_path('module', 'render_examples') . '/js/user_achievements.js'),
        'css' => array(drupal_get_path('module', 'render_examples') . '/css/user_achievements.css'),
      ),
    ),
    '#attributes' => array('class' => array('logged-user-info')),
    '#theme_wrappers' => array('container'),
  );

Análisis del tratamiento: Render Arrays

  • Más flexible gracias a 
    • Proccess/preproccess
    • Wrappers
  • CSS y JS ligado al theme.
  • Cache

Render API: ¿Qué es?

  • Sistema para crear un output desde basándose en un array de datos.
  • El heredero del sistema de renderizado de Form API.

¿Ventajas?

  • Los datos pueden ser alterados por otros módulos.
  • Más reusable.
  • Más unificado.

Render API & Forms API

  • Forms API usa render API
  • Render() para renderizar casi todo.

Propiedades

  • #type      hook_element_info() 
  • #access
  • #theme_wrappers
  • #pre_render
  • #attached

Más en Form API Reference

Render API & Theming

  • #theme : Función de render
  • Variable theme => #variable
    'user-achievements' => array(
      '#theme' => 'user_achievements',
      '#points' => 4,
      '#score' => 16,
      '#attached' => array(
        'js' => array(drupal_get_path('module', 'render_examples') . '/js/user_achievements.js'),
        'css' => array(drupal_get_path('module', 'render_examples') . '/css/user_achievements.css'),
      ),
    ),
$themes['user_achievements'] = array(
    'path' => drupal_get_path('module', 'render_examples') . '/templates',
    'template' => 'user-achievements',
    'variables' => array(
      'points' => '',
      'score' => '',
    ),
  );

Render API & Theming

#theme_wrappers

  • Es un array de themes.
  • The themed output => $element['#children']
  • Nos centramos sólo en el contenido
 '#theme_wrappers' => array('container'),
 '#theme_wrappers' => array('container', 'render_array'),

Render API & Theming

Crear nuestro Theme_wrapper

$themes['render_add_span'] = array(
    'render element' => 'element',
  );

1.- Defino el theme

2.- Implementamos

/**
 * Implements theme_THEME().
 */
function theme_render_add_span(&$variables) {
  $element = $variables['element'];
  $output = '<span class="render-wrapper-span">';
  $output .= $element['#children'];
  $output .= '</span>';
  return $output;
}

3.- Lo añadimos

'#theme_wrappers' => array('container', 'render_add_span'),

Render API & Theming

Crear nuestro Theme_wrapper

4.- Lo comprobamos

Attached Libraries, CSS & JS

  • No más drupal_add_js , drupal_add_css
  • No más en hook_init o sitios ocultos.
  • Sólo se carga cuando lo necesitas.
  • Ejemplo de uso AJAX
'#attached' => array(
        'js' => array(drupal_get_path('module', 'render_examples') . '/js/user_achievements.js'),
        'css' => array(drupal_get_path('module', 'render_examples') . '/css/user_achievements.css'),
      ),
drupal_add_js(drupal_get_path('module', 'render_examples') . '/js/user_achievements.js');
drupal_add_css(drupal_get_path('module', 'render_examples') . '/css/user_achievements.css');

Render API : Caching

  • Propiedad : #cache
  • Subpropiedades
    • Keys => the cache_key
    • bin => 
    • expire
    • granularity
      • DRUPAL_CACHE_PER_PAGE
      • ...
  • Podemos cachear a nivel de elementos
  • Cache by permission, role, user..
'element_cached' => array(
      '#markup' => '',
      '#pre_render' => array('render_element_cached_pre_render'),
      '#cache' => array(
        'keys' => array('render_examples', 'cache-element'),
        'bin' => 'cache',
        'expire' => time() + 10,
        'granularity' => DRUPAL_CACHE_PER_PAGE | DRUPAL_CACHE_PER_USER,
      ),
    ),

Render API : Caching example

1.- El elemento

2.- El pre_render

/**
 * Custom pre_render callback for caching example.
 * @param $element
 * @return mixed
 */
function render_element_cached_pre_render($element) {
  $element['#markup'] = render_elements_expensive();
  $element['#children'] = $element['#markup'];
  return $element;
}

Resumiendo

  • No reinventes la rueda: usala!
  • Organiza cómo renderizar tu output.
  • Evita usar theme().
  • Separa en elementos renderables
  • Usa los theme_wrappers para unificar
  • Cachea los elementos con mucha carga.

Resources

Material de esta charla

Fuentes y otros recursos.

Y si después de todo no puedes con el enemigo?

Únete a el

 ¿ Preguntas ?

Drupal community is comming

Global Sprint Weekend

Valencia : http://www.meetup.com/Drupales/events/219173581/

Cáceres : http://www.meetup.com/Drupales/events/219170420/

Madrid : http://www.meetup.com/Drupales/events/219038959/

17 & 18 de Enero 2015

Global Sprint Weekend

17 & 18 de Enero 2015

Sevilla

Drupal Dev Days 2015

Montpellier, 13-19 Abril 2015

Render API

By jlbellido

Render API

  • 2,371
Loading comments...

More from jlbellido