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.

For Example:Included with Joomla is a component called Content, aka com_content. This component is what allows you to write articles and create categories.

When you’re on your Joomla website and you’re viewing an article or you’re viewing the landing page of a category, you’re looking at the “view” for an article and the “view” of a category.

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:

views:/components/com_helloworld/views
view name:/components/com_helloworld/views/helloworld
tmpl:/components/com_helloworld/views/helloworld/tmpl

/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:

Taskdisplay

If the URL does not specify a task, Joomla looks for a default tasked named display. The display task is setup within our view.html.php file.

Viewcomponent’s name

If a view is not specified, the default view is loaded. The default view is the component name. Because our component was named helloworld, the default view helloworld would be run.

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

adding a view to a component

0 thoughts on “How to add a Default View to your Joomla 3 Component

  1. You’ve built the view using JViewLegacy, which is the old style of Joomla Development. Please update this to show the core Joomla 3.x class JViewHtml.  This is illustrated on Joomla’s core com_config component.

  2. you certainly might want to ensure you dont have any typos in your url. correct me if im wrong, but the url your case should be more like:

    https://localhost/joomla/index.php?option=com_helloworld&view=helloworld

    hope this helps!! though aware of the date its been posted, i just wanted to leave the likely solution, so anyone having similar issue might get around this. 

    cheers

  3. I got the sme error as Rakeshwdc (also working in WAMP enviroment).

    Answer to Rakeshwdc is to check the if the view.html file in the folder /components/com_helloworld/views/helloworld/ indeed has the file extention .php In my case notepad++ faild to save it with the propper extention. After fixing it displayd as expected!

    /components/com_helloworld/views/helloworld/

    1. Hello Rakeshwdc,

      Sorry for the problems that you’re having with the Joomla tutorial. We’re not sure what you mean by “slide number 25” – if you could provide a link to that, then we can look to see what you’re talking about. Also, our development and support is for our hosted environment. If you’re running this under WAMP or XAMP, then our assistance will be limited as we do not typically provide support for programs running in those environments. You may need to go back and review your steps carefully – check for differences in Joomla version as these articles were written with an older version of Joomla 3.

      If you have any further questions or comments, please let us know.

      Regards,
      Arnel C.

  4. I follow the same steps but as shown on slide number 25 when I go to admin end it does not shown the hellword under menu item type ? Also when access this on frontend using this url “https://localhost/joomla/index.php/?option=com_helloworld&amp;view=helloworld” it show error “500 Layout default not found. ” . Please help

    1. Hello Himanshu,

      A 404 means that Joomla is looking in the place you told it to, but not finding the file. You will want to carefully go over the information you entered when following the instructions to ensure everything is created and named correctly so that Joomla can find it.

      Kindest Regards,
      Scott M

  5. You certainly don’t want to say that a View ist not a part of MVC, do you? I got confused by “are apart of” which means “are seperated from”. It has to be “are part of”.
    Just to clarify 😉

    1. Hello Blend,

      Good find! It was meant to be written as ‘a part of’ as opposed to ‘ apart of’. One missing space certainly changed the meaning!

      Kindest Regards,
      Scott M

Was this article helpful? Join the conversation!