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:
| Task |
display
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.
|
| View |
component’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:
