How to render html in Joomla Extensions

Hello Folks,

This time we are sharing our Joomla related knowledge that we have gained while working in various Joomla extensions over the past years. Many of you might have encountered the case when you wanted to edit the html of any extension or create a new extension which display some html content to end user. However, there are various ways to write html code in extension, but here we have some recommendations for you, which is generally used in Joomla extensions.

 

Components

Joomla is based on MVC pattern and View is considered to have the responsibility to generate and render html of any component. View finds or collects the data, which will be used to generate html. Again there are various way to do this in any component.

  • Default Joomla way

    In the default way these files are stored just inside view’s folder. For example component name is com_f90 and view name is user. Then you can find the tmpl files at views/user/tmpl/default.php. There may be some other files and their name depends on current task. For example, if you are editing any user, in this case view is user and task is edit, then its html should be placed in views/user/tmpl/default_edit.php.

    File structure of joomla componet's tmpl files


    Here default stands for the layout of current page. You can define your custom layout also by giving multiple menu creation option. Layout is used for displaying same page in different way. For example in you have any view and task for displaying list of user. The default layout of view displays 4 users in a row, called horizontal. If you want to display the user list in vertical list, one user in one row, then your must have layout=vertical in url and need to set this layout in view by using setLayout function. Make sure that file name must start with vertical instead of default. e.g. default.php and vertical.php.

    Naming Convenction tmpl file of component view


    Joomla view sets some path to load each tmpl file. The first path in hierarchy is Joomla/templates/yourSelectedTemplate/html/[com_name]/[view_name]/[filename].php for front-end, Joomla/administrator/templates/yourSelectedTempalte/html/[com_name]/[view_name]/[filename].php for back-end and path of your component’s tmpl files come second. If default.php of user view for component com_f90 exists at Joomla/tempaltes/currentTemplate/html/com_f90/user/default.php then this file will be used to display html. If this doesn’t exist then your component’s tmpl file from Joomla/components/com_f90/views/user/tmpl/default.php will be used.

    Override components tmpl file in Joomla website.

  • Inbuilt Multi templates

    You can create multiple templates for your component. You just need to add your custom path in the previous hierarchy. Like : com_f90/templates/default/[]view_name]/[filename].php and com_f90/templates/blue[custom_template_name]/[view_name]/[filename].php For this you need to set a new path in view’s constructor just like Joomla does, but you need to add an extra path.

    Define multiple templates for Joomla component

  • By introducing separate entity

    Another possibility of loading html is using one separate entity. It is usually called template which is mediator between view and tmpl files. In this approach all files are stored at same place and includes the view or entity name in its name itself. com_f90/templates/default/[view].[task].php. In this terminology different template is used instead of layout.

    Render html by using template entity

 

Modules

For modules, html is written in mod_f90/tmpl folder. default.php file used to generate html by default. There may be different layout of module like default.php, horizontal.php, vertical.php etc. You just need to ask a parameter in configuration of module and use below code to load selected layout.

require JModuleHelper::getLayoutPath('mod_f90', $params->get('layout', default));

Tmpl file of any module can also be overrided by the path Joomla/templates/yourSelectedTemplate/html/[mod_name]/[filename].php

Tmpl file structure for modules

 

JLayouts

JLayouts are used to write html code, which is independent of views and can be used anywhere and more than one place. They just need to set some argument and html is defined according to those argument. The Syntax for using layout is

JLayoutHelper::render($layoutFile, $displayData = null, $basePath = '', $options = null)
  • $layoutFile is the name of layout file.
  • $displayData contains the data which will be used in above file.
  • $basePath from where to load layout. It has the highest priority in loading file.
  • $options to set some optional parameters.

Hierarchy of loading JLayouts

  • (1 - lower priority) Frontend base layouts Joomla/layouts
  • (2) Standard Joomla! layouts overridden Joomla/templates/selectedTempalte/html/layouts
  • (3) Component path for front-end Joomla/components/[com_name]/layouts and for back-end Joomla/administrator/components/[com_name]/layouts
  • (4) Component template overrides path Joomla/templates/selectedTempalte/html/layouts/[com_name]
  • (5 - highest priority) Received a custom high priority path depends on $basepath

 

These are some of the ways that we have tried to cover in this blog. We are hoping that this blog will help you in understanding some basic concepts of template and layout in joomla.

 

Connect With Us

follow function90 at twitter follow function90 at facebook connect with function90 at skype


Cron Job Starts