the scary render array

32
1 The Scary Render Array

Upload: wizzlern

Post on 29-Nov-2014

150 views

Category:

Documents


1 download

DESCRIPTION

The Render Array is a theming tool in Drupal 7 which gives the themer more power than he ever imagined.Presented by Erik Stielstra at Drupal Design Camp Berlin 2011

TRANSCRIPT

Page 1: the Scary Render Array

1

The Scary Render Array

Page 2: the Scary Render Array

2

‣ What is the problem?

‣ The Theming Process

‣ The Render Array

‣ Cases:

‣ Swap between regions

‣ Hacking the node

‣ Re-ordering, inserting

Outline

Page 3: the Scary Render Array

Erik Stielstra, Sutharsan, user/73854@sutharsan

www.wizzlern.nl@wizzlern

3

Page 4: the Scary Render Array

4

What’s the problem?

Page 5: the Scary Render Array

What’s the problem?

5

Node title

File

Field + field + field

Description

(example 1)

Page 6: the Scary Render Array

What’s the problem?

6

Move a node link to the top of the node or to the site-bar. E.g. ‘Tell a friend link’

(example 2)

Page 7: the Scary Render Array

The abstract problem

7

‣ Young Hahn (http://bitly.com/cIYWkt)Limitations of the Drupal Theme Layer:

‣ Move something out of its ‘vertical stack’

‣ Change the formatting of an element

Page 8: the Scary Render Array

The abstract problem

‣ Parents knows little of their children

‣ Children know little of their parent (context)

‣ Siblings don’t know each other at all.

8

Page 9: the Scary Render Array

The abstract problem

‣ HTML is generated by modules

‣ Theme layer receives fully build HTML

9

Page 10: the Scary Render Array

How does Drupal 7 solve your problem?

10

Page 11: the Scary Render Array

The Render Array

11

Page 12: the Scary Render Array

12 http://www.funnyanimalpictures.net

Page 13: the Scary Render Array

13

The Render Array

‣ Render Array is similar to Form Array

‣ Modules return a structured array (instead of HTML)

‣ Full array available in hook_page_alter()

Page 14: the Scary Render Array

Advantages of Render Array

‣ Everything is possible in the theme layer:

‣ Move (parts of) content to other region.

‣ Duplicate existing content.

‣ Change theme function of a single item.

‣ Change field wrapper.

‣ etc.

14

Page 15: the Scary Render Array

More Drupal 7 goodies

‣ All theme functions have a preprocess.e.g. THEME_preprocess_item_list(&$variables)

‣ Template functions:render(&$element)show(&$element)hide(&$element)

‣ Crazy form/render array properties:#attached, #maxlength, #state, #theme_wrappers,

#title_display

15

Page 16: the Scary Render Array

Disadvantages of the RA

‣ It is soo complex.

‣ It still requires lots of PHP knowledge.

‣ It potentially violates the MVC/PAC model.

16

Page 17: the Scary Render Array

Your RA experiences?

17

Page 18: the Scary Render Array

Case 1:Hacking the node

18

Page 19: the Scary Render Array

Node layout: A case

19

Node title

Description

<div class="report"> <div class="report-file"><a href="http://...">Report ...</a></div> <div class="report-meta"><span class="icon pdf">PDF document</span> | 154 KB<br />Report | 21-03-2011 | Min EL&amp;I</div></div>

Don’t change

Don’t change

Page 20: the Scary Render Array

Node layout: The problem

20

‣ Drupal 6: Node preprocess + node.tpl.php override

‣ Hard coded fields in tpl.php gives you

‣ Drupal 7: Node preprocess

Page 21: the Scary Render Array

Demo: Hacking the node

‣ Find the renderable part: In template: the part processed by render().

‣ Use kpr() to print the $variables content.

‣ Modify the array.

21

Page 22: the Scary Render Array

The Render Process

22

Page 23: the Scary Render Array

Drupal 7 Theme process

23

1. Bootstrap

2. Handle URL

3. Get page content

4. Return HTML?

5. Last call for changes

6. Render output

Page 24: the Scary Render Array

Render process

24

‣ Traversing down from the page to the 'leaves'.

hook_page_build() // Last call to modules to ADD items to the page array.hook_page_alter() // For both modules and themes to alter the page array.THEME_preprocess_page() // $variables['page'] holds page render array + childrenTHEME_process_page() // Every ‘preprocess’ is followed by a ‘process’ function.page.tpl.phpTHEME_preprocess_node() // $variables['content'] holds node render array + childrennode.tpl.php// Next: comment-wrapper, comment, etc.

Page 25: the Scary Render Array

drupal_render()

‣ #type = set of default properties

‣ #theme = theme function.Render children too.

‣ #prefix, #suffix = wrapped around HTML result.

‣ More details of #properties in FAPI docs.

25

Page 26: the Scary Render Array

To render or not to render

‣ #theme : The theme function use to render the element.

‣ #type : Set of default propeties and theme function.

‣ Without #theme or #type : child element.

26

Page 27: the Scary Render Array

Usefull RA properties

‣ #weight : Determines the sort order.

‣ #sorted : If FALSE forces sorting.

‣ #print : If TRUE element is not rendered. Better: use hide(), show().

‣ #attached : Attach CSS and JS to the element.

‣ #state : ‘JS without JS’.

‣ #prefix, #suffix : Element pre- and suffix HTML

27

Page 28: the Scary Render Array

Case 2:Move that link

28

Page 29: the Scary Render Array

Summary

29

Page 30: the Scary Render Array

Summary

30

‣ Problems: Vertical stack, Content awareness

‣ Solutions:

‣ Render Array, hook_page_alter(), *_preprocess_*()

‣ render(), show(), hide()

‣ #weight, #prefix, #suffix, #state

Page 31: the Scary Render Array

31

Maby it was all just a bad dreamMaby it was all just a bad dream