Render API - Pavel Makhrinsky

901 views

Published on

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

No Downloads
Views
Total views
901
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Render API - Pavel Makhrinsky

  1. 1. Render API Pavel Makhrinsky http://donetsk.drupal.ua
  2. 2. Render API Pavel Makhrinsky e-mail: [email_address] skype: gumanista
  3. 3. Overview <ul><li>Form API successor </li></ul><ul><li>Drupal 6 ‘theme’ replacement </li></ul><ul><li>System to build structured arrays into content </li></ul><ul><li>The way to build presentation layer </li></ul>
  4. 4. Theming ways <ul><li>Noob way </li></ul><ul><li>Drupal 6 way </li></ul><ul><li>Drupal 7 way </li></ul>
  5. 5. Noob way <ul><li>Inline </li></ul><ul><li>Inline </li></ul><ul><li>Inline </li></ul><ul><li>Inline </li></ul><ul><li>Inline </li></ul>1 <div class=&quot;nav&quot;> 2 <ul class=&quot;topnav&quot;> 3 <li id=&quot;lefttopnav&quot; <?php if ( $levelone == 'home' ) echo &quot;class= &quot; current &quot; &quot; ; ?> > <?php echo $menu1 ; ?> </li> 4 <li <?php if ( $levelone == &quot;item-2&quot; ) echo &quot;class= &quot; current &quot; &quot; ; ?> > <?php echo $menu2 ; ?> </li> 5 <li <?php if ( $levelone == &quot;item-3&quot; ) echo &quot;class= &quot; current &quot; &quot; ; ?> > <?php echo $menu4 ; ?> </li> 6 <li <?php if ( $levelone == &quot;item-4&quot; ) echo &quot;class= &quot; current &quot; &quot; ; ?> > <?php echo $menu6 ; ?> </li> 7 <li <?php if ( $levelone == &quot;item-5&quot; ) echo &quot;class= &quot; current &quot; &quot; ; ?> > <?php echo $menu5 ; ?> </li> 8 <li <?php if ( $levelone == 'item-6' ) echo &quot;class= &quot; current &quot; &quot; ; ?> > <?php echo $menu7 ; ?> </li> 9 </ul> 10 </div>
  6. 6. Drupal 6 way <ul><li>Use theme functions </li></ul><ul><li>Implement hook_theme </li></ul><ul><li>Move large markup to templates </li></ul>1 $items = array ( 'item-1' , 'item-2' , 'item-3' , 'item-4' , 'item-5' ); 2 $output = theme( 'item_list' , $items );
  7. 7. Drupal 6 way - advantages <ul><li>Common way to render elements </li></ul><ul><li>Reusable functions </li></ul><ul><li>Predictable markup </li></ul><ul><li>Possibility to change generation </li></ul><ul><li>Output altering </li></ul>
  8. 8. Drupal 6 way - disadvantages <ul><li>Slower performance </li></ul><ul><li>Caching difficulties </li></ul><ul><li>Different parameters </li></ul>
  9. 9. Drupal 7 way <ul><li>Use renderable arrays </li></ul><ul><li>Alter content you need </li></ul>1 $items = array ( 'item-1' , 'item-2' , 'item-3' , 'item-4' , 'item-5' ); 2 $output = array ( 3 '#items' => $items , 4 '#theme' => 'item_list' 5 );
  10. 10. Drupal 7 way advantages <ul><li>Content alterable in a common way </li></ul><ul><li>All the renderable elements have preprocess and process functions </li></ul><ul><li>Transparent caching </li></ul><ul><li>Resources could be attached to elements </li></ul>
  11. 11. Render API details <ul><li>hook_theme </li></ul><ul><li>Renderable array structure </li></ul><ul><li>Content altering </li></ul><ul><li>#type, #theme, #theme_wrappers </li></ul><ul><li>#states </li></ul><ul><li>Resources </li></ul><ul><li>Performance and caching </li></ul>
  12. 12. hook_theme() <ul><li>hook_theme </li></ul><ul><ul><li>variables | render element </li></ul></ul><ul><ul><li>file </li></ul></ul><ul><ul><li>path </li></ul></ul><ul><ul><li>template </li></ul></ul><ul><ul><li>function </li></ul></ul><ul><ul><li>preprocess functions </li></ul></ul>
  13. 13. Renderable array structure <ul><li>‘ #’ elements </li></ul><ul><li>system elements </li></ul><ul><ul><li>#children </li></ul></ul><ul><ul><li>#access </li></ul></ul><ul><ul><li>#printed </li></ul></ul><ul><ul><li>#sorted </li></ul></ul>
  14. 14. Content altering <ul><li>#pre_render </li></ul><ul><li>#post_render </li></ul><ul><li>preprocess and process functions </li></ul>
  15. 15. #type <ul><li>Loads defaults from hook_element_info() </li></ul>1 function module_template_element_info() { 2 return array ( 3 'file_template' => array ( 4 '#name' => 'misc' , 5 '#fileinfo' => array ( 6 'filename' => '[module_name].[name].[extension]' , 7 'path' => 'includes' , 8 'extension' => 'inc' 9 ) 10 ) 11 ); 11 } 1 // If the default values for this element have not been loaded yet, populate 2 // them. 3 if ( isset ( $elements [ '#type' ]) && empty ( $elements [ '#defaults_loaded' ])) { 4 $elements += element_info( $elements [ '#type' ]); 5 }
  16. 16. #theme <ul><li>Invokes theme() function </li></ul>1 // Get the children of the element, sorted by weight. 2 $children = element_children( $elements , TRUE ); 3 4 // Initialize this element's #children, unless a #pre_render callback already 5 // preset #children. 6 if (! isset ( $elements [ '#children' ])) { 7 $elements [ '#children' ] = '' ; 8 } 9 // Call the element's #theme function if it is set. Then any children of the 10 // element have to be rendered there. 11 if ( isset ( $elements [ '#theme' ])) { 12 $elements [ '#children' ] = theme( $elements [ '#theme' ], $elements ); 13 } 14 // If #theme was not set and the element has children, render them now. 15 // This is the same process as drupal_render_children() but is inlined 16 // for speed. 17 if ( $elements [ '#children' ] == '' ) { 18 foreach ( $children as $key ) { 19 $elements [ '#children' ] .= drupal_render( $elements [ $key ]); 20 } 21 }
  17. 17. #theme_wrappers <ul><li>Wrap #children element with code </li></ul>1 // Let the theme functions in #theme_wrappers add markup around the rendered 2 // children. 3 if ( isset ( $elements [ '#theme_wrappers' ])) { 4 foreach ( $elements [ '#theme_wrappers' ] as $theme_wrapper ) { 5 $elements [ '#children' ] = theme( $theme_wrapper , $elements ); 6 } 7 }
  18. 18. #states <ul><li>Adds JavaScript to change the state of an element based on another element </li></ul>1 $form [ 'toggle_me' ] = array ( 2 '#type' => 'checkbox' , 3 '#title' => t( 'Tick this box to type' ), 4 ); 5 $form [ 'settings' ] = array ( 6 '#type' => 'textfield' , 7 '#states' => array ( 8 // Only show this field when the 'toggle_me' checkbox is enabled. 9 'visible' => array ( 10 ':input[name=&quot;toggle_me&quot;]' => array ( 'checked' => TRUE ), 11 ), 12 ), 13 );  
  19. 19. Resources <ul><li>#attached property </li></ul><ul><li>Allow attach </li></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>Libraries </li></ul></ul><ul><li>Not cached </li></ul>
  20. 20. Performance and caching <ul><li>Setting cache for renderable arrays </li></ul><ul><li>Some cache usage tips </li></ul>
  21. 21. #cache <ul><li>'keys ' => an array of keys which will be concatenated to form the cache key. </li></ul><ul><li>'bin ' => the name of the cache bin to be used (as in 'cache' or 'cache_page', etc. </li></ul><ul><li>'expire ' => a Unix timestamp indicating the expiration time of the cache. </li></ul><ul><li>'granularity ' => a bitmask indicating the cache type. This should be DRUPAL_CACHE_PER_PAGE , DRUPAL_CACHE_PER_ROLE , or DRUPAL_CACHE_PER_USER </li></ul>
  22. 22. Some cache usage tips <ul><li>Don’t cache small items </li></ul><ul><li>Items from #attached not stored with rendered items </li></ul><ul><li>Use cache targeting </li></ul><ul><li>Cache items will not be expired until cron runs, regardless of the expiration time used </li></ul>Elements 5 100 500 With #cache 3211 3276 3235 Without #cache 747 4257 18336
  23. 23. Summary <ul><li>Don’t use direct call of theme() function </li></ul><ul><li>Generate HTML as later as possible </li></ul>
  24. 24. Links <ul><li>Render API </li></ul><ul><ul><li>http://drupal.org/node/933976 </li></ul></ul><ul><ul><li>http://drupal.org/node/930760 </li></ul></ul><ul><ul><li>http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_render/7 </li></ul></ul><ul><li>States </li></ul><ul><ul><li>http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_process_states/7 </li></ul></ul><ul><li>Drupal API </li></ul><ul><ul><li>http://api.drupal.org </li></ul></ul><ul><li>Examples module </li></ul><ul><ul><li>http://drupal.org/project/examples </li></ul></ul><ul><li>Cache backends </li></ul><ul><ul><li>http://drupal.org/project/apc </li></ul></ul><ul><ul><li>http://drupal.org/project/memcache </li></ul></ul><ul><ul><li>http://drupal.org/project/filecache </li></ul></ul>
  25. 25. Thank you e-mail: [email_address] skype: gumanista

×