JLayout for extension developers
3 likes1,268 views
JLayout is Joomla's rendering system that allows for reusable and overridable layouts. It separates data and presentation, making layouts debuggable and extensible. JLayout is used throughout Joomla core to remove dependencies, customize markup, and follow best practices. Developers can use JLayout to render modules, plugins, component views, fields, and more, improving reusability and customization.
![Handy PHP functions: extract()
Avoid things like:
$displayData[‘view’]->doSomething();](https://image.slidesharecdn.com/jlayout-extension-developers-150616013514-lva1-app6892/85/JLayout-for-extension-developers-12-320.jpg)
JLayout for extension developers
- 1. JLayout.. for extension developers Start using future Joomla renderer today
- 2. Dedicated to Manuel Rubio ● Died 15th May 2015 ● Opensource lover ● Joomla spanish magazine contributor ● Spanish translator / coordinator ● JUG Barcelona member @mannuelru
- 3. About me ● PHP / Javascript Freelance ● PHP developer since 2010 ● Joomla! lover & contributor since 2011 ● Top 25 Joomla CMS contributors ● Opensource lover ● Linux user ● Git for everything ● Gulp all the things @phproberto
- 4. ¿What is JLayout? ● Rendering system ● Contributed by Yannick Gaultier ● Initially created to render sidebar ● A renderer that is now better than a lot of other existing renderers ● The future of Joomla! ● Long way to walk
- 5. What can I use JLayout for? ● Render modules ● Render plugins ● Render component views ● Render fields ● Render anything!
- 6. Where can I find it?
- 7. JLayout include paths Enable debug mode to see where your layout is being loaded from JLayout supports overriding by default
- 8. JLayout advantages ● Used in core ● Reusability ● Overridable ● Data / View separation ● Debuggable ● Data & layouts inheritance ● Cacheable ● Extensible
- 9. How is JLayout helping core? ● Remove dependencies (Mootools, Bootstrap2) ● Customise all the markup ● Custom modals ● Follow best practices ● Replaceable renderer ● Extension customisations
- 10. How is it used? Layout to render Example: article.tags Layout Data Example: array(‘article’ => $item) Layouts base path Example: JPATH_SITE . /plugins/content/myplugin/layouts’ Options Example: array(‘debug’ => true)
- 11. Complex usage What should I use? ● In classes instances ● In layouts helpers
- 12. Handy PHP functions: extract() Avoid things like: $displayData[‘view’]->doSomething();
- 13. Handy PHP functions: compact()
- 14. Best practices ● Always pass data to layouts as an array ● Send only required data ● Use global debug mode ● Divide layouts in smaller parts ○ article ○ article.title ○ article.description.introtext
- 15. Best practices: Think JLayout ● An article can be shown in a module like in a view. ● Form layouts can be shared in front & backend ● An article slider can be shown in a category and in a module. ● Same markup can be styled differently depending in container. ○ <div class=”article-box”> ■ <h2 class=”article-title”>Joomla!</h2>
- 16. Best practices: Comment layout vars Templaters don’t know the logic behind your app!
- 17. Best practices: Extend JLayout Not for templaters!
- 18. Best practices: Extend JLayout (II) Helper will use our own renderer
- 22. Best practices: getLayoutData() II Extending data
- 23. JLayout for fields Fields can use a different layout in form settings Same field logic used to render things differently, add JS libraries, etc.
- 24. JLayout for fields II Try to use your own prefix
- 25. JLayout for libraries ● If it outputs HTML it has to be overridable ● If it loads assets templaters need to control it
- 26. JLayout with AJAX ● Return rendered information ● Load more items in a module with lazyload / button click ● Change grid / list view ● Display forms where needed
- 27. JLayout with AJAX: Example
- 28. JLayout for templates ● Same markup. Your standard? ● Your layouts can be used in multiple overrides without changing them. ● Forms wherever you need them ● Layouts for different frameworks
- 29. JLayout for modules ● Debug switcher ● Module layouts inheritance ● Live module layout switcher with com_ajax + JLayout ● AJAX to load more slider images
- 30. JLayout for plugins ● Debug switcher ● Finally your plugin is overridable ● Plugins can be shown differently in different components. ● Plugins can reuse base component layouts to render articles,etc.