Template overrides and the “MVC” concept Ruth Cheesley Suffolk Computer Services [email_address]

WHAT IS MVC?

What is MVC? M ODEL Manages the behaviour and the data V IEW Manages the graphical and/or textual output Article, Category Blog, Section list C ONTROLLER Interprets mouse/keyboard inputs

M ODEL

Manages the behaviour and the data

V IEW

Manages the graphical and/or textual output

Article, Category Blog, Section list

C ONTROLLER

Interprets mouse/keyboard inputs

Request for a section blog layout content page is sent (by user browsing to the page) Controller analyses the request and passes to appropriate component (com_content) Appropriate data (from the section ID) is pulled from the database and passed to the view View (section) and layout (blog) applied, overrides applied, content is displayed to user

WHY USE TEMPLATE OVERRIDES?

Why use Template Overrides? Avoid editing the core Change how an extension is displayed Greater flexibility If Component/module is 1.5 Native & uses MVC structure (has views/tmpl folder)

Avoid editing the core

Change how an extension is displayed

Greater flexibility

If Component/module is 1.5 Native & uses MVC structure (has views/tmpl folder)

TEMPLATES, VIEWS AND LAYOUTS

Views and Layouts Components display information in different ways (“views”) Most components will have many views com_content Single article Category/Section Archive Front Page The view does not display the output – this is done by a “layout” (e.g. blog, html, RSS feed, PDF)

Components display information in different ways (“views”)

Most components will have many views

com_content

Single article

Category/Section

Archive

Front Page

The view does not display the output – this is done by a “layout” (e.g. blog, html, RSS feed, PDF)

Run that by me again?! Components can have multiple views Each view assembles a fixed set of information (e.g. The Category view in Articles component assembles a number of articles) Each view can have multiple layouts Each layout can display the information in different ways (e.g. The Category view in Articles component can be laid out in blog or list layout)

Components can have multiple views

Each view assembles a fixed set of information (e.g. The Category view in Articles component assembles a number of articles)

Each view can have multiple layouts

Each layout can display the information in different ways (e.g. The Category view in Articles component can be laid out in blog or list layout)

What about modules? Generally only display one thing, one way Don’t really have views, but do support a layout

Generally only display one thing, one way

Don’t really have views, but do support a layout

Templates and Layouts Templates set up a structural framework for the page of the website Positions for modules & components to display What gets displayed is controlled by Module layout Combination of view & layout in the case of a component

Templates set up a structural framework for the page of the website

Positions for modules & components to display

What gets displayed is controlled by

Module layout

Combination of view & layout in the case of a component

Typical layout (rhuk_milkyway) Append ?tp=1 to show module positions over your template E.G. index.php?tp=1

Component Structure Components/  High level folder (contains all components) com_content/  Individual component folder views/  The different views available for that specific component articles/  For when displaying a single article view.html.php (this is the view that outputs the html) view.pdf.php (this is the view that outputs the PDF) tmpl/  Template folder default.php (this is a layout) form.php (this is a layout) category/  For when displaying articles in category view view.html.php (this is the view that outputs the html) view.feed.php (this is the view that outputs RSS feed ) tmpl/  Template folder blog.php (this is a layout) blog_items.php (this is a sub-layout) default.php (this is a layout)

Components/  High level folder (contains all components)

com_content/  Individual component folder

views/  The different views available for that specific component

articles/  For when displaying a single article view.html.php (this is the view that outputs the html)

view.pdf.php (this is the view that outputs the PDF)

tmpl/  Template folder

default.php (this is a layout)

form.php (this is a layout)

category/  For when displaying articles in category view

view.html.php (this is the view that outputs the html)

view.feed.php (this is the view that outputs RSS feed )

tmpl/  Template folder

blog.php (this is a layout)

blog_items.php (this is a sub-layout)

default.php (this is a layout)

HOW TO OVERRIDE

How to override components? Templates/  High level folder (contains all templates) MyTemplate/  My Template folder html/  The template overrides folder com_content /  The component to be overridden articles/  Overrides to apply to single article view default.php (this is a layout) form.php (this is a layout) category/  Overrides to apply to category view blog.php (this is a layout) blog_items.php (this is a sub-layout) default.php (this is a layout) Note: There are three other views for com_content: Archive Section Frontpage It is not possible to customise the PDF or RSS feeds currently

Templates/  High level folder (contains all templates)

MyTemplate/  My Template folder

html/  The template overrides folder

com_content /  The component to be overridden

articles/  Overrides to apply to single article view

default.php (this is a layout)

form.php (this is a layout)

category/  Overrides to apply to category view

blog.php (this is a layout)

blog_items.php (this is a sub-layout)

default.php (this is a layout)

Note:

There are three other views for com_content:

Archive

Section

Frontpage

It is not possible to customise the PDF or RSS feeds currently

How to override components? Copy / components / com_content / views / article / tmpl /default.php To / templates / rhuk_milkyway / html/com_content / article /default.php Make changes to file in template folder (not in the core) Joomla will check for overrides – if there’s a file in the html folder for this component and this view, use it. Else, use default file .

Copy / components / com_content / views / article / tmpl /default.php

To

/ templates / rhuk_milkyway / html/com_content / article /default.php

Make changes to file in template folder (not in the core)

Joomla will check for overrides – if there’s a file in the html folder for this component and this view, use it. Else, use default file .

What about modules? Modules/  High level folder (contains all modules) mod_latestnews/  Individual module folder helper.php (helper file containing data logic) mod_latest_news.php (main module file) mod_latest_news.xml (module installation XML file) tmpl/  The templates for that module (usually only one, but can be more) default.php (this is a layout)

Modules/  High level folder (contains all modules)

mod_latestnews/  Individual module folder

helper.php (helper file containing data logic)

mod_latest_news.php (main module file)

mod_latest_news.xml (module installation XML file)

tmpl/  The templates for that module (usually only one, but can be more)

default.php (this is a layout)

How to override modules? Copy / modules / mod_latestnews / tmpl /default.php To / templates / rhuk_milkyway / html/mod_latestnews /default.php Make changes to file in template folder (not the core)

Copy

/ modules / mod_latestnews / tmpl /default.php

To

/ templates / rhuk_milkyway / html/mod_latestnews /default.php

Make changes to file in template folder (not the core)

What else can I override? Module Chrome Pagination Check out http://docs.joomla.org/Understanding_Output_Overrides for some examples

Module Chrome

Pagination

Check out http://docs.joomla.org/Understanding_Output_Overrides

for some examples

THINGS TO CONSIDER

Things to consider Only override 1.5 NATIVE MVC enabled components/modules (with views/tmpl folder) Can’t override PDF/RSS Feeds (you have to edit the core) File path is essential – get it right!

Only override 1.5 NATIVE MVC enabled components/modules (with views/tmpl folder)

Can’t override PDF/RSS Feeds (you have to edit the core)

File path is essential – get it right!

Ruth Cheesley Suffolk Computer Services [email_address]

References Joomla Docs: http://docs.joomla.org/MVC http://docs.joomla.org/Understanding_Output_Overrides http://docs.joomla.org/Category:Templates http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core Wikipedia: http://en.wikipedia.org/wiki/Model-view-controller

Joomla Docs:

http://docs.joomla.org/MVC

http://docs.joomla.org/Understanding_Output_Overrides

http://docs.joomla.org/Category:Templates

http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

Wikipedia:

http://en.wikipedia.org/wiki/Model-view-controller