The Scary Render Array

1
donderdag 23 juni 2011

Outline

What is the problem? The Render Array Case: Change the User Prole page

2
donderdag 23 juni 2011

Sutharsan @sutharsan Skilip @skilip

@wizzlern www.wizzlern.nl
3
donderdag 23 juni 2011

Whats the problem?

4
donderdag 23 juni 2011

Whats the problem?

5
donderdag 23 juni 2011

The abstract problem

HTML is generated by modules Theme layer receives fully build HTML

6
donderdag 23 juni 2011

The abstract problem

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

7
donderdag 23 juni 2011

The abstract problem

Parents knows little of their children Children know little of their parent (context) Siblings dont know each other.
8
donderdag 23 juni 2011

How does Drupal 7 solve your problem?

9
donderdag 23 juni 2011

Render Array

10
donderdag 23 juni 2011

11
donderdag 23 juni 2011

http://www.funnyanimalpictures.net

The Render Array

12
donderdag 23 juni 2011

Render example
Array ( [user_picture] => Array ( [#markup] => '<div class="user-picture"> ... </div>' [#weight] => -10 ) [summary] => Array ( ... ) )

Renderable element $user_prole from userprole.tpl.php 2 elements: user_picture and summary. #markup = HTML

13
donderdag 23 juni 2011

Render example
Array ( ... [summary] => Array ( [#type] => user_profile_category [#attributes] => Array ( ... ) [#weight] => 5 [#title] => History [member_for] => Array ( ... ) [#access] => 1 ) )

#type = Set of default properties. Dened in hook_element_info() #attributes, #weight, #title, #access: See FAPI Without # = Children. Will be rendered too.
14
donderdag 23 juni 2011

Render example
Array ( ... [summary] => Array ( ... [member_for] => Array ( [#type] => user_profile_item [#title] => Member for [#markup] => 2 weeks 5 days ) ) )

Children rendered by drupal_render() recursively.

15
donderdag 23 juni 2011

Advantages of Render Array

Everything is possible in the theme layer Change theme function of a single item. Change eld wrapper. Move (parts of) content to other region. Duplicate existing content. etc.

16
donderdag 23 juni 2011

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

17
donderdag 23 juni 2011

But still a bit scary ...

18
donderdag 23 juni 2011

The Render Process

19
donderdag 23 juni 2011

Drupal 7 Theme process

1. Bootstrap 2. Handle URL 3. Get page content 4. Return HTML? 5. Last call for changes 6. Render output

20
donderdag 23 juni 2011

Render process
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 + children THEME_process_page() // Every preprocess is followed by a process function. page.tpl.php THEME_preprocess_node() // $variables['content'] holds node render array + children node.tpl.php // Next: comment-wrapper, comment, etc.

21
donderdag 23 juni 2011

Practice

22
donderdag 23 juni 2011

Practice

23
donderdag 23 juni 2011

(Pre)process functions

template_preprocess $variables Attributes (#weight, #access, #attached)

24
donderdag 23 juni 2011

hook_form_FORMID_alter

#states attribute Vertical tabs element_children(), render(), hide() #theme attribute

25
donderdag 23 juni 2011

Summary

26
donderdag 23 juni 2011

Summary
Problems: Vertical stack, Content awareness Solutions: Render Array, hook_page_alter() render(), show(), hide(), form #properties

27
donderdag 23 juni 2011

Maby it was all just a bad dream

28
donderdag 23 juni 2011

www.wizzlern.nl

This work is licensed under a Creative Commons Attribution 3.0 Unported License.

donderdag 23 juni 2011