JLayout..
for extension developers
Start using future Joomla renderer today

Dedicated to Manuel Rubio
● Died 15th May 2015
● Opensource lover
● Joomla spanish magazine contributor
● Spanish translator / coordinator
● JUG Barcelona member
@mannuelru

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

¿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

What can I use JLayout for?
● Render modules
● Render plugins
● Render component views
● Render fields
● Render anything!

Where can I find it?

JLayout include paths
Enable debug mode to see where your
layout is being loaded from
JLayout supports overriding by default

JLayout advantages
● Used in core
● Reusability
● Overridable
● Data / View separation
● Debuggable
● Data & layouts inheritance
● Cacheable
● Extensible

How is JLayout helping core?
● Remove dependencies (Mootools, Bootstrap2)
● Customise all the markup
● Custom modals
● Follow best practices
● Replaceable renderer
● Extension customisations

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)

Complex usage
What should I use?
● In classes instances
● In layouts helpers

Handy PHP functions: extract()
Avoid things like:
$displayData[‘view’]->doSomething();

Handy PHP functions: compact()

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

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>

Best practices: Comment layout vars
Templaters don’t know the logic behind your app!

Best practices: Extend JLayout
Not for templaters!

Best practices: Extend JLayout (II)
Helper will use our own renderer

Best practices: getRenderer()

Best practices: getLayoutPaths()

Best practices: getLayoutData()

Best practices: getLayoutData() II
Extending data

JLayout for fields
Fields can use a different layout in form settings
Same field logic used to render things differently, add JS
libraries, etc.

JLayout for fields II
Try to use your own prefix

JLayout for libraries
● If it outputs HTML it has to be overridable
● If it loads assets templaters need to control it

JLayout with AJAX
● Return rendered information
● Load more items in a module
with lazyload / button click
● Change grid / list view
● Display forms where needed

JLayout with AJAX: Example

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

JLayout for modules
● Debug switcher
● Module layouts inheritance
● Live module layout switcher with
com_ajax + JLayout
● AJAX to load more slider images

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.

That’s all!
Questions?