How to add a Default View to your Joomla 3 Component

This tutorial series, Joomla 3 component development, is currently in progress…

In our last tutorial, we created a very basic Joomla 3 component called helloworld. As we continue our tutorial series on creating components, we will now learn how to add views to a component.

What is a view?

A “view” in Joomla is the set of code that creates the actual HTML for the component that is returned to the user. Views are a part of the MVC, and you can read much more thorough documentation about the MVC here.

Before the View: Setting up your Controller

Like we said, views are apart of the MVC. Before we setup the view we must first setup the controller.

Below, you will find a list of the files you will need to create / modify in order to setup the controller.

/components/com_helloworld/helloworld.php

We previously created this file and placed basic code in it. Remove that code and add the following code:

 <?php // No direct access to this file defined('_JEXEC') or die('Restricted access');   // import joomla controller library jimport('joomla.application.component.controller');   // Get an instance of the controller prefixed by HelloWorld $controller = JControllerLegacy::getInstance('HelloWorld');   // Perform the Request task $input = JFactory::getApplication()->input; $controller->execute($input->getCmd('task'));   // Redirect if set by the controller $controller->redirect();

/components/com_helloworld/controller.php

 <?php // No direct access to this file defined('_JEXEC') or die('Restricted access');   // import Joomla controller library jimport('joomla.application.component.controller');   /**  * Hello World Component Controller  */ class HelloWorldController extends JControllerLegacy { }

How to setup a view

Now that we’ve setup our controller, we are going to setup our default view. The default view is a view named after the component. So, in our case, we are going to show you how to create a view called helloworld.

Below is a list of files you need to create in order to create the helloworld view.

Folder setup

First, create the following folders:

/components/com_helloworld/views/helloworld/view.html.php

 <?php // No direct access to this file defined('_JEXEC') or die('Restricted access');   // import Joomla view library jimport('joomla.application.component.view');   /**  * HTML View class for the HelloWorld Component  */ class HelloWorldViewHelloWorld extends JViewLegacy {         // Overwriting JView display method         function display($tpl = null)          {                 // Assign data to the view                 $this->msg = 'Hello World';                   // Display the view                 parent::display($tpl);         } }

/components/com_helloworld/views/helloworld/tmpl/default.php

 <?php // No direct access to this file defined('_JEXEC') or die('Restricted access'); ?> <h1><?php echo $this->msg; ?></h1>

How does all this work?

Using the sample above, the component will display “Hello World” to the screen. But how did it do that?!

Joomla needs to determine which component, view, and task to execute. It does so by reading the values from the url. As you can see below, we’ve highlighed where exactly the component, view, and task can be set:

https://domain.com/index.php?option=com_helloworld&view=helloworld&task=display

Note however, the task and the view do not need to be included in the url. If they are not, their values will default to the following:

The best way to explain how all of these peices work together is by looking at the following image: