3 minutes reading time (533 words)

A Joomla Bug Squad Lesson on JLayouts

A Joomla Bug Squad Lesson on JLayouts

Or... How I learned about JLayouts in 10 minutes, and why contributing to the Joomla Bug Squad can be a valuable learning experience. JLayout solves the problem of hardcoded markup. JLayout provides a simple mechanism for html markup to be moved into a separate file which can then be overriden by templates.

First some background about me. I'm fairly new to Joomla, have only started about a year or two ago with Joomla 1.6 after needing a flexible, Open Source, Content Managment System (CMS) with Access Control (ACL). Soon after this an article was written, by Mark Dexter I think, encouraging people to join the Joomla Bug Squad as a good way of learning Joomla. So that's exactly what I did, and it's been a valuable and rewarding experience.

Once such experience was hearing about and learning about JLayouts, developed by Yannick Gautlier in September 2012 to fix a bug. It started with Jacques Rentzke and a question about Administrator Templates, Bluestork, and Bootstrap. The mention of Bootstrap brought a few other comments on the technical merits and implications for layout markup.

At this point, Michael Babker chimed in with JLayouts as the simple solution to the markup dependencies. With Seth Warburton joining the discussions it's no surprise that the difficulties of hardcoded bootstrap markup received a bit more focus. Michael again mentioning JLayouts,Jacques finding some documentation on JLayouts, agreement that it would be great if JLayouts were everywhere. But... isn't that going to take a LOT of work?

What's required to get JLayout working?

Start the clock, the lesson starts, and Michael says, "gimme 10 and I'll whip up a JToolbar conversion".

Elin Waring started by pointing to existing code examples where JLayouts are used, first the layout (layouts/joomla/edit/details.php), next the invocation (administrator/components/com_contact/view/contact/tmpl/edit.php). The layout can then be overridden in the template (/administrator/templates/hathor/html/layouts/joomla/edit/details.php).

Then, right at 10 minutes, Michael comes back with a fully worked and easily understandable example converting the JToolbarButtonConfirm class to rendering markup using JLayout, delivered as a single github link to a commit showing all the changes. A little later Michael comes back with a more complete JToobar.

And we're all very much the wiser as a result. To give back, I do some testing, I thank the main players for the lesson on JLayouts, and Jacques suggests a JCM article.

The takeaway...

This article hasn't attempted to teach anyone how to use JLayouts, but hopefully it might inspire the reader to read further, and maybe even contribute to the Joomla Bug Squad.

A simple example based on theJLayout documentation.

Create a layout file, /layouts/joomla/content/helloworld.php:

text = $displayData['text']; ?>
<h1>Hello <?php echo $text; ?></h1>

Then in any file, such as components/com_content/views/article/tmpl/default.php add:

$data = array();
$data['text'] = JText::_('World!');

View an article on the front end and you will see Hello World!.

To override, copy the layout file to templates/mytemplate/html/layouts/joomla/content/helloworld.php:

text = $displayData['text'];
<div>Hello <?php echo $text; ?></div>

The JToolbarButtonConfirm example by Michael:

Some complete further expansion of the JToolbar conversion to JLayout:

The JLayout documentation:

Further JLayout enhancements by Roberto Segura to come:

New Look Template Manager - Project Update
Harness The Power of Controversy to Gain More Traf...


Already Registered? Login Here
No comments made yet. Be the first to submit a comment

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/