deep into drupal theming layer
DESCRIPTION
第二节课:演示(1)商业逻辑与表现逻辑(2)数据细微度(3)主题引擎(4)主题化的两种方式(5)渲染元素(6)主题化的强大之处(7)主题注册(8)主题化一个Drupal视图,Drupal领域,等等TRANSCRIPT
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
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Agenda:1. Business logic vs. Presentation logic2. Data granularity3. Theme engines4. Two ways to theme5. Render elements6. The power of theme()7. Theme registry8. Theming a View, Field, etc
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Business logic vs. Presentation logicDrupal 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.
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Case Study: Beer & Food paring
Live site: http://greatbrewers.com/beer-sommelier
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
How do we do it in a Drupal way?One solution:1. Use Panels to design the 3-column layout2. Put 3 Drupal blocks into the 3 columns3. 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
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Data granularity
Above diagram is from <Drupal 7 module development>
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Theme enginesDrupal 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 markup2. Templates: pass data to a template which is a PHP file
mixed with markup and PHP print statements
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
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.
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
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.
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Template filesTemplates 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.
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Order of preprocess execution1. 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()
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Render elementsA 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 rendered2. Other render elements which are considered "children"
of the element3. An array of structures such as CSS and JavaScript files,
that should be attached to the page when it is rendered4. A list of theme hooks that can be used to theme the
data5. A list of callback functions to run on the element before
and after it is themed
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
The power of theme()
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Theme registry1. Whether it's a theme function or a template2. The list of preprocess functions to run3. The list of process functions to run4. 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 variable7. 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!
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
How to theme a View
Demo Time!
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
How to theme a FieldFor example, use template override:
● field--body--article.tpl.php● field--article.tpl.php● field--body.tpl.php● field.tpl.php
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Questions & Answers
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Thank You/ 谢谢!
王景昇 (Jingsheng Wang)CEO @ INsReady
微博: @王景昇Twitter: @skyredwang
SPECIAL THANKS to 陈刚 & 上海万达信息股份有限公司 for sponsoring this training!