Adding a view to component frontend | Joomla 3.x extension development crash course.

We are continuing our work on breeds component and in this step, we are going to add a view to the component frontend(site) part. When you make a request to Joomla, it ends up by displaying an html based page. The component we are going to build will consist of several pages of information that we want to display. Joomla makes it possible for us with the help of views which are independent of each other. It handle views with conjunction with a controller because it is the controller which takes the request from url and actually decides which view to load. This means that we first have to create a controller before start working on views. 

In your Joomla component directory, open com_breedc. In this step, you have to create following files.

Create  controller.php        /site/controller.php

Create  view.html.php       /site/views/breeds/view.html.php

Create  default.php           /site/views/breeds/tmpl/default.php

Create  default.xml           /site/views/breeds/tmpl/default.xml

Update  breed.php          /site/breed.php

Update  en-GB.com_breed.ini        languages/site/en-GB/en-GB.com_breed.ini

Update  breed.xml          /breed.xml

Starting to Update the component:

Starting from updating site/breed.php

<?php

defined('_JEXEC') or die;

jimport('joomla.application.component.controller');

JLoader::registerPrefix('Breed', JPATH_COMPONENT);
JLoader::register('BreedController', JPATH_COMPONENT . '/controller.php');

$controller = JControllerLegacy::getInstance('Breed');
$controller->execute(JFactory::getApplication()->input->get('task'));
$controller->redirect();

In this breed.php file, first we have declared, defined('_JEXEC') or die; to deny the direct access to this file. After this on line 13, we are importing the main controller code through jimport method, so that JController class could be accessed. Then we are getting the instance of our breed controller through JControllerLegacy getInstance method, by passing component name to it as argument. After this, on next line,we are making use of PHP method chaing concept, through which we can call more than one methods by making just a single request. What it will do is, it will get the task from request and pass it to controller for execution. The controller would be the base controller in this case and will reside in the same directory as in which the breed.php file is. When the request has been run succesfully, we call a redirect method, so that controller could redirect the user to a page which is meant to be displayed by the controller and if the request has not been run successfully the controller will display an error and will keep the user on same page, else otherwise overridden in the controller redirect method, in the respective function. 

 

site/controller.php

<?php

defined('_JEXEC') or die;

jimport('joomla.application.component.controller');

class BreedController extends JControllerLegacy
{
	public function display($cachable = false, $urlparams = false)
	{
		$view = JFactory::getApplication()->input->getCmd('view', 'breeds');
		JFactory::getApplication()->input->set('view', $view);

		parent::display($cachable, $urlparams);

		return $this;
	}
}

In the base controller.php file, first we will import the library that has all the controller code through jimport function on line 13. jimport is normally used in joomla to pull in a library. Now coming to the class definition in which the name of the class is Breed, which is the name of our component, along with "Controller", this is how a controller is named in joomla, which it tries to load. This class is extending JController class, which is the base class which joomla makes available for controllers.

On line 14, there is a function definition called "display", which is responsible for pulling the breeds view and sending it to joomla for displaying in browser.

Next in this method, on line 11, we are calling the getApplication() method of JFactory class to get the view and here again we are using the PHP method chaining concept. Through getCmd method, we are trying to get the view from the url are passing it the default value of "breeds", if it didn't find any view request. What this means is, if you are on the component main page by opening it using index.php?option=com_breed and you are not passing it any view, like, view=breeds, still it will load the default provided view, i.e, "breeds". Next we set the view and call the parent display method to display this view. You can set the $cachable = true in the display() the parameter to load the cached version of the view or page, but by default it is set to false.

 

site/breeds/view.html.php

<?php

defined('_JEXEC') or die;

jimport('joomla.application.component.view');

class BreedViewBreeds extends JViewLegacy
{

	function display($tpl = null)
	{
		$this->msg = JText::_('BREEDS_LIST');
 
		parent::display($tpl);
	}

}

     When a request is made in joomla, it ends up displaying html code in browser. Thats why the purpose of developing acomponent is to display the information on the browser which we want our users to see and the component can contain a single to dozens of pages or views. Joomla handles views along with controllers, in the following way.

We will call our breeds component to load in browser by the url, index.php?option=com_breed . When we call our component, it tries to load the default view as declared in the base controller ,like this

$view = JFactory::getApplication()->input->getCmd('view', 'breeds');

Now here you can see that breeds is our default view. So, if we run index.php?option=com_breed or index.php?option=com_breed&view=breeds , it will give same result.

Now coming to the view.html.php file. This is the file which joomla goes through first before calling the actual default.php file in which html code resides. This file allows us to add any data to the view, before displaying it. On line 5, we have imported the view library and after that on line 7, we have declared the actual view class, named BreedViewBreeds, where Breed is the name of component and Breeds is the name of view. Then we have a method called "display". It allows us to add data to the view before it is displayed. Then on the next line we are setting a msg and calling the display function on line 14 which will pull the default.php file from the view tmpl directory.

The JText class

On line 12, you will notice that we are not directly passing the text, but rather we are using the JText class. What this class do is, it passes the string to Joomla’s translation system. We are using the underscrore method of JText class and passing our string to it and joomla is doing the rest for us. It will go for the key in a .ini language file,associated with the component and resides in the Joomla languages folder. It will match the key and if it found any match, its corresponding text is replaced with the string we are passing to JText.

Beside Joomla, PHP also has a translation system which is built in to it by using the gettext method. PHP has a shortcut to it through a function called underscore , so Joomla uses the same approach in its library.

Now let us update the language files we have created in the first step, to hold our language string as a key and its corresponding text as its value. Then I will show you how you can call and display this text in the component default view default.php file.  

 

site/views/breeds/tmpl/default.php

<?php
// No direct access
defined('_JEXEC') or die;
?>

<h1><?php echo $this->msg; ?></h1>

The default.php file, laocated in the views tmpl directory is the file which is going to hold our all future html code for the breeds view to create a tabulated listing of breeds. So, you can say that default.php file acts like an html placeholder and as you can see that, in the above mentioned default.php file, we are getting and displaying the msg from view.html.php file, in h1 tags. This code then will be fetched by view file and will be displayed to the user,using a browser.

 

languages/site/en-GB/en-GB.com_breed.ini

COM_BREED="Breed"
BREEDS_LIST="Breeds List"

Add the language key and string

To add a language string to the language file, first move to the view.html.php file and copy the upper cased key, located in the JText underscore method and paste it in the languages / site / en-GB / en-GB.com_breed.ini file which is our breeds component main language file. One point to understand that, the language keys should always be in uppercase, as proposed by the joomla. After that we have pasted the key, the next step is to give its value, by putting an equal to sign with it and then there would come the actual value, wrapped in double quotes and then save the file. Thats it for now with this language config file. 

breed.xml file will now become

- - - - - -

    </sql>
    </uninstall>

    <files folder="site">
        <filename>index.html</filename>
        <filename>breed.php</filename>
        <filename>controller.php</filename>
        <folder>views</folder>
    </files>
 <languages folder="languages/site">

- - - - - -

  Now that our code for this step is ready, its time to update the breed.xml manifest file. We have to create a new file listing called "controller.php" and secondly a new folder listing, called "views" in the site section, as you can see in the code above, in bold letters. 

Adding a menu type to breeds list view:

Create an xml file in,  site/views/breeds/tmpl/default.xml

File content:

<?xml version="1.0" encoding="utf-8"?>
<metadata>
<layout title="COM_BREED_TITLE_LIST_VIEW_BREEDS" option="View">
        <message>
                        <![CDATA[COM_BREED_TITLE_LIST_VIEW_BREEDS_DESC]]>
        </message>
</layout>
</metadata>

You can link views to a dynamically generated menu at backend, through joomla. To make this work, it is necessary to identify these views in the way it is recognizable to administrators. This process is done through xml file in the component frontend. In this xml file, is a metadata element and the layout element inside it. The title parameter is the title, we are going to use in this view. It is a language string and will be translated through a language file. Then we have a message for the layout. Both of these work together and add a title and description to the view. If we create additional views, we can create additional xml files for the views, we want to be connected to a menu item. 

You have no rights to post comments

Enjoy best web development services at an affordable price. Looking forward to build a good relationship and serve you better...

Copyright © 2017. All rights reserved.