Developing a MVC Component/Adding a view to the site part
From Joomla! Documentation
< Archived:Developing a MVC Component
This page has been archived. This page contains information for an unsupported Joomla! version or is no longer relevant. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.
Articles in this Series
- Introduction
- Developing a Basic Component
- Adding a view to the site part
- Adding a menu type to the site part
- Adding a model to the site part
- Adding a variable request in the menu type
- Using the database
- Basic backend
- Adding language management
- Adding backend actions
- Adding decorations to the backend
- Adding verifications
- Adding categories
- Adding configuration
- Adding ACL
- Adding an install/uninstall/update script file
- Using the language filter facility
- Adding an update server
- Example of a Frontend Update Function
- Example of Menu Parameters & Stylesheets
Introducción[edit]
Este tutorial es parte del tutorial de Desarrollando un Componente Modelo-Vista-Controlador para Joomla!2.5. Lo invitamos a leer la parte previa de este tutorial antes de continuar leyendo este.
In the Joomla!2.5 framework, third party component authors divide their code into three main parts:
- models They manage the data
- controllers They perform tasks, set and get the states of the models and ask the views to display
- views They display the content according to the type (error, feed, html, json, raw, xml) and the layout chosen by the controllers
Setting the controller[edit]
In the core code of Joomla, there is a class able to manage controllers: JController. This class has to be extended to be used in our component. In the file site/helloworld.php (entry point of our Hello World component), put these lines
site/helloworld.php
<?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 = JController::getInstance('HelloWorld');
// Perform the Request task
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));
// Redirect if set by the controller
$controller->redirect();
The getInstance static method of the JController class will create a controller. In the code above, it will instantiate a controller object of a class named HelloWorldController. Joomla will look for the declaration of that class in an aptly named file called controller.php (it's a default behavior).
Now, controller.php needs to be created and HelloWorldController needs to be declared and defined. So with your favorite file manager and editor, create a site/controller.php file containing
site/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 JController
{
}
When no task is given in the request variables, the default task will be executed. It's the display task by default. The JController class has such a task. In our example, it will display a view named HelloWorld.
Setting the view[edit]
When JController wants to display a view, it will look for certain files in the component/com_[component_name]/views/[name of view]/ folder.
The name of the folder of the default view is the name of the component itself. In our case the path is component/com_helloworld/views/helloworld/.
The file that will contain the code of the view is called view.[view_mode].php. The default view mode, and probably the only view a component might need is the html mode. So this give us our file name which is view.html.php.
With your favorite file manager and editor, create a file site/views/helloworld/view.html.php able to display the default view and containing
site/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 JView
{
// Overwriting JView display method
function display($tpl = null)
{
// Assign data to the view
$this->msg = 'Hello World';
// Display the view
parent::display($tpl);
}
}
The display method of the JView class is called with the display task of the JController class. In our case, this method will display data using the tmpl/default.php file. With your favorite file manager and editor, create a file site/views/helloworld/tmpl/default.php able to display the default view and containing
site/views/helloworld/tmpl/default.php
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
?>
<h1><?php echo $this->msg; ?></h1>
This template file will be included by the JView class. Therefore, here, $this refers to the HelloWorldViewHelloWorld class.
Packaging the component[edit]
Content of your code directory
- helloworld.xml
- site/index.html
- site/helloworld.php
- site/controller.php
- site/views/index.html
- site/views/helloworld/index.html
- site/views/helloworld/view.html.php
- site/views/helloworld/tmpl/index.html
- site/views/helloworld/tmpl/default.php
- admin/index.html
- admin/helloworld.php
- admin/sql/index.html
- admin/sql/updates/index.html
- admin/sql/updates/mysql/index.html
- admin/sql/updates/mysql/0.0.1.sql
Create a compressed file of this directory or directly download the archive and install it using the extension manager of Joomla. You can test this basic component by putting index.php?option=com_helloworld in your browser address.
helloworld.xml
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">
<name>Hello World!</name>
<!-- The following elements are optional and free of formatting constraints -->
<creationDate>November 2009</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<!-- The version string is recorded in the components table -->
<version>0.0.2</version>
<!-- The description is optional and defaults to the name -->
<description>Description of the Hello World component ...</description>
<update> <!-- Runs on update; New in 2.5 -->
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
</schemas>
</update>
<!-- Site Main File Copy Section -->
<!-- Note the folder attribute: This attribute describes the folder
to copy FROM in the package to install therefore files copied
in this section are copied from /site/ in the package -->
<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
</files>
<administration>
<!-- Administration Menu Section -->
<menu>Hello World!</menu>
<!-- Administration Main File Copy Section -->
<!-- Note the folder attribute: This attribute describes the folder
to copy FROM in the package to install therefore files copied
in this section are copied from /admin/ in the package -->
<files folder="admin">
<!-- Admin Main File Copy Section -->
<filename>index.html</filename>
<filename>helloworld.php</filename>
<!-- SQL files section -->
<folder>sql</folder>
</files>
</administration>
</extension>
Result: You will see by default the message contained in the variable $this->msg in the view.html.php file.
[edit]
Prev: Developing a Basic Component Next: Adding a menu type to the site part