the Scary Render Array
description
Transcript of the Scary Render Array
![Page 1: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/1.jpg)
1
The Scary Render Array
![Page 2: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/2.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/3.jpg)
Erik Stielstra, Sutharsan, user/73854@sutharsan
www.wizzlern.nl@wizzlern
3
![Page 4: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/4.jpg)
4
What’s the problem?
![Page 5: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/5.jpg)
What’s the problem?
5
Node title
File
Field + field + field
Description
(example 1)
![Page 6: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/6.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/7.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/8.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/9.jpg)
The abstract problem
‣ HTML is generated by modules
‣ Theme layer receives fully build HTML
9
![Page 10: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/10.jpg)
How does Drupal 7 solve your problem?
10
![Page 11: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/11.jpg)
The Render Array
11
![Page 12: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/12.jpg)
12 http://www.funnyanimalpictures.net
![Page 13: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/13.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/14.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/15.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/16.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/17.jpg)
Your RA experiences?
17
![Page 18: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/18.jpg)
Case 1:Hacking the node
18
![Page 19: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/19.jpg)
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&I</div></div>
Don’t change
Don’t change
![Page 20: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/20.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/21.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/22.jpg)
The Render Process
22
![Page 23: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/23.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/24.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/25.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/26.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/27.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/28.jpg)
Case 2:Move that link
28
![Page 29: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/29.jpg)
Summary
29
![Page 30: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/30.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/31.jpg)
31
Maby it was all just a bad dreamMaby it was all just a bad dream
![Page 32: the Scary Render Array](https://reader031.fdocuments.net/reader031/viewer/2022020720/547aea62b379595e2b8b4b7c/html5/thumbnails/32.jpg)
www.wizzlern.nl
This work is licensed under aCreative Commons Attribution 3.0 Unported License.