the scary render array

1

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

Erik Stielstra, Sutharsan, user/73854@sutharsan

www.wizzlern.nl@wizzlern

3

4

What’s the problem?

What’s the problem?

5

Node title

File

Field + field + field

Description

(example 1)

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)

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

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

The abstract problem

‣ HTML is generated by modules

‣ Theme layer receives fully build HTML

9

How does Drupal 7 solve your problem?

10

The Render Array

11

12 http://www.funnyanimalpictures.net

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()

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

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

Disadvantages of the RA

‣ It is soo complex.

‣ It still requires lots of PHP knowledge.

‣ It potentially violates the MVC/PAC model.

16

Your RA experiences?

17

Case 1:Hacking the node

18

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

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

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

The Render Process

22

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

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.

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

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

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

Case 2:Move that link

28

Summary

29

Summary

30

‣ Problems: Vertical stack, Content awareness

‣ Solutions:

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

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

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

31

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

www.wizzlern.nl

This work is licensed under aCreative Commons Attribution 3.0 Unported License.