Extension Updates

Supporting 3.0 Part 1 - New Layouts

Details

Created: August 04, 2012

Joomla! 3.0 is fast approaching. With that brings about a good bit of work for extension developers to get their code ready for the new version, if they choose to support it. I'm crazy enough to do just that, and I'm ready to share with you the biggest part in getting my biggest extension, Podcast Manager, ready for 3.0; embracing the new Bootstrap based layouts.

Bootstrap in Core

The biggest change that anyone who uses Joomla! will see immediately is the new templates and layouts. Twitter's Bootstrap framework has been integrated into the CMS, along with jQuery, and both have been embraced quite nicely by the new templates, Isis and Protostar.

Native Interfaces for All Versions

Thanks to some neat installer tricks I will be sharing soon (psst... they're already in my repo if you can't wait), I have methods to provide layouts designed to work natively with Joomla! 2.5's Bluestork and Hathor templates as well as 3.0's Isis. This allows me to design a common interface for all templates without having to do the design work myself. I'm allowed to focus in on where the bulk of my attention should truly go, the code powering the extensions to make everything better for users.

Podcast Manager Control Panel

Users of Podcast Manager will be familiar with the control panel that they land on when first accessing the admin interface. This view is easily the most changed view of any of the admin views and really highlights some of the changes coming about with Bootstrap's integration. Overall, this view is probably the most improved, as you can see in the screenshots below.

Podcast Manager Feeds View

The feeds view is one of the two list views in the admin interface, and at a quick glance, it doesn't look like much has changed. Overall, the table has remained fairly similar across both versions with the biggest changes being the location of the filters and changing the sort method (which is how the behavior is across all components. The screenshots below highlight the table in an empty state, so they don't really show everything, but you do get a rough idea.

Front-end Feed View

To make a more consistent interface for the front end feed listing view, Bootstrap has been integrated into that view for both the 2.5 and 3.0 versions. The minimal CSS is used in 2.5 to handle this while in 3.0, the full framework is available. No screenshots to show the comparison for this view, but trust me when I say that it looks pretty good even on the 2.5 default Beez template.

More to come

This is just a small preview. A lot of work has been done thus far just on the layouts, and there's still some finalization to be done. And this doesn't even take into consideration other code features for Podcast Manager or what I'm planning for the next versions of my other extensions.