Deep into Drupal Theming Layer

INsReady Inc. Upgrade Your Creat'v'ty
引锐信息科技有限公司升级你的创造力

Deep into Drupal Theming layer

王景昇 (Jingsheng Wang)
CEO @ INsReady
微博: @王景昇
Twitter: @skyredwang

The above QR-Code was
generated by qr.insready.com


Agenda:
1. Business logic vs. Presentation logic
2. Data granularity
3. Theme engines
4. Two ways to theme
5. Render elements
6. The power of theme()
7. Theme registry
8. Theming a View, Field, etc


Business logic vs. Presentation logic
Drupal separates its business logic from its presentation
logic to the extreme.

1. To make the code easier to maintain.
2. To make it possible to easily swap out one layer's
implementation without having to re-write the other
layers.


Case Study: Beer & Food paring

Live site: http:
//greatbrewers.
com/beer-sommelier


How do we do it in a Drupal way?
One solution:
1. Use Panels to design the 3-column layout
2. Put 3 Drupal blocks into the 3 columns
3. 1st block use jQuery/Ajax to retrieve all food content
types from backend (explanation later)
4. 2nd block to retrieve the nodes from sub-food-
content-type based the selection from block 1.
5. 3rd block to retrieve more nodes....
6. The backend is powered by Views with an addon
module called Views Datasource


Data granularity

Above diagram is from <Drupal 7 module development>


Theme engines
Drupal support alternative theme engines. But, we will
only cover the Default Drupal theme engine:
PHPTemplate

Two ways to theme
1. Theme functions: pass data to a PHP function to wrap it
in markup
2. Templates: pass data to a template which is a PHP file
mixed with markup and PHP print statements


Theme functions Rules:
● First, the name of the theme function follows the
pattern:
theme_[theme hook name]

● Second, the theme function will only have a single
parameter, as follows:
function theme_THEME_HOOK_NAME($variables) {...}

● Third, the theme function should return a string that
contains the rendered representation of the data.


The workflow of preprocess functions:
1. Code calls theme('hook_name', $variables).
2. theme() calls preprocess functions for hook_name.
3. Preprocess functions modify variables.
4. theme() calls actual implementation for hook_name with
modified variables.

All preprocess functions take the form of:

[module]_preprocess_[theme hook name](&$variables)

This is extremely handy for module developers as it allows all
sorts of integration with other modules.


Template files
Templates are files primarily containing HTML but with
some PHP statements mixed in using the template's
variables.

Instead of declaring a theme_hook_name() function, a
module would instead create a hook-name.tpl.php file.

All of the PHP in a template should be limited to printing
out variables.


Order of preprocess execution
1. template_preprocess()
2. template_preprocesss_HOOK()
3. MODULE_preprocess()
4. MODULE_preprocess_HOOK()
5. THEME_preprocess()
6. THEME_preprocess_HOOK()
7. template_process()
8. template_processs_HOOK()
9. MODULE_process()
10. MODULE_process_HOOK()
11. THEME_process()
12. THEME_process_HOOK()


Render elements
A Render element is a complex data structure passed as a
single parameter to theme(), as one of its variables. Render
elements are fundamentally nested arrays that can include:

1. The data to be rendered
2. Other render elements which are considered "children"
of the element
3. An array of structures such as CSS and JavaScript files,
that should be attached to the page when it is rendered
4. A list of theme hooks that can be used to theme the
data
5. A list of callback functions to run on the element before
and after it is themed


The power of theme()


Theme registry
1. Whether it's a theme function or a template
2. The list of preprocess functions to run
3. The list of process functions to run
4. The path to the template file (which includes whether the original
module template file is used or a theme version of it.)
5. The theme function name (which indicates if it's the original module
theme function or one overridden by a theme.)
6. The list of variables that should be passed to theme() when this theme
hook is called and a default value for each variable
7. Whether, instead of a list of variables, the theme function expects
a single render element as its parameter, and what that render
element should be named

Clean the theme registry every time you change a
function or a template file in a theme!


How to theme a View

Demo Time!


How to theme a Field
For example, use template override:

● field--body--article.tpl.php
● field--article.tpl.php
● field--body.tpl.php
● field.tpl.php


Questions & Answers


Thank You/ 谢谢！

SPECIAL THANKS to 陈刚
& 上海万达信息股份有限公司
for sponsoring this training!

王景昇 (Jingsheng Wang)
CEO @ INsReady
微博: @王景昇
Twitter: @skyredwang

Deep into Drupal Theming Layer

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Deep into Drupal Theming Layer

Semelhante a Deep into Drupal Theming Layer (20)

Último

Último (20)

Deep into Drupal Theming Layer