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 renderExample: article.tags

Layout DataExample: array(‘article’ => $item)

Layouts base pathExample: JPATH_SITE . /plugins/content/myplugin/layouts’

OptionsExample: 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 fieldsFields 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?