Tricks to start using JLayout in your Joomla! extensions

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

19. Best practices: getRenderer()

20. Best practices: getLayoutPaths()

21. Best practices: getLayoutData()

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.

31. That’s all!
Questions?