1. Desarrollando un componente MVC : Introducción
  2. Desarrollando un componente MVC: Desarrollando un componente básico
  3. Desarrollando un componente MVC: Añadiendo una vista en el frontend
  4. Desarrollando un componente MVC: Añadiendo un tipo de menu al frontend
  5. Desarrollando un componente MVC: Añadiendo un modelo al frontend
  6. Desarrollando un componente MVC : Añadiendo una variable request en el tipo de menu
  7. Desarrollando un componente MVC : Usando la base de datos
  8. Desarrollando un componente MVC : Basic backend
  9. Desarrollando un componente MVC : Añadiendo gestión de idioma
  10. Desarrollando un componente MVC : Añadiendo acciones backend
  11. Desarrollando un componente MVC : Añadiendo adornos al backend
  12. Desarrollando un componente MVC : Añadiendo verificaciones
  13. Desarrollando un componente MVC : Añadiendo categorías
  14. Desarrollando un componente MVC : Añadiendo configuración
  15. Desarrollando un componente MVC : Añadiendo ACL (Access Control Levels)
  16. Desarrollando un componente MVC : Añadiendo un script de instalación-desinstalación-actualización
  17. Desarrollando un componente MVC : Usando la capacidad de filtro
  18. Desarrollando un componente MVC : Añadiendo un servidor de actualización

Basic backend

Designing the backend interface leads us to create at least a Model-View-Controller triptych. We have to modify the administrator entry point of our component, the admin/helloworld.php file

admin/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');
 
// Get the task
$jinput = JFactory::getApplication()->input;
$task = $jinput->get('task', "", 'STR' );
 
// Perform the Request task
$controller->execute($task);
 
// Redirect if set by the controller
$controller->redirect();

Create the general controller

The entry point now gets an instance of a HelloWorld prefixed controller. Let’s create a basic controller for the administrator part:

admin/controller.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
// import Joomla controller library
jimport('joomla.application.component.controller');
 
/**
 * General Controller of HelloWorld component
 */
class HelloWorldController extends JController
{
        /**
         * display task
         *
         * @return void
         */
        function display($cachable = false, $urlparams = false) 
        {
                // set default view if not set
                $input = JFactory::getApplication()->input;
                $input->set('view', $input->getCmd('view', 'HelloWorlds'));
 
                // call parent behavior
                parent::display($cachable);
        }
}

This controller will display the ‘HelloWorlds’ view by default.

Create the view

With your favorite file manager and editor, create a file admin/views/helloworlds/view.html.php containing:

admin/views/helloworlds/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');
 
/**
 * HelloWorlds View
 */
class HelloWorldViewHelloWorlds extends JView
{
        /**
         * HelloWorlds view display method
         * @return void
         */
        function display($tpl = null) 
        {
                // Get data from the model
                $items = $this->get('Items');
                $pagination = $this->get('Pagination');
 
                // Check for errors.
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('<br />', $errors));
                        return false;
                }
                // Assign data to the view
                $this->items = $items;
                $this->pagination = $pagination;
 
                // Display the template
                parent::display($tpl);
        }
}

In Joomla, views display data using layout. With your favorite file manager and editor, put a file admin/views/helloworlds/tmpl/default.php containing

admin/views/helloworlds/tmpl/default.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
 
// load tooltip behavior
JHtml::_('behavior.tooltip');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>" method="post" name="adminForm">
        <table class="adminlist">
                <thead><?php echo $this->loadTemplate('head');?></thead>
                <tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
                <tbody><?php echo $this->loadTemplate('body');?></tbody>
        </table>
</form>

This layout calls several sub-layout (head, foot and body). Each sub-layout corresponds to a file prefixed by the name of the main layout (default), and an underscore.

Put a file admin/views/helloworlds/tmpl/default_head.php containing

admin/views/helloworlds/tmpl/default_head.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
        <th width="5">
                <?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_ID'); ?>
        </th>
        <th width="20">
                <input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo count($this->items); ?>);" />
        </th>                   
        <th>
                <?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING'); ?>
        </th>
</tr>

COM_HELLOWORLD_HELLOWORLD_HEADING_ID and COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING are placeholders which will later be replaced with language-specific text. The JText::_ method translates a string into the current language.

checkAll is a javascript function defined in the Joomla core able to check all items.

Put a file admin/views/helloworlds/tmpl/default_body.php containing

admin/views/helloworlds/tmpl/default_body.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<?php foreach($this->items as $i => $item): ?>
        <tr class="row<?php echo $i % 2; ?>">
                <td>
                        <?php echo $item->id; ?>
                </td>
                <td>
                        <?php echo JHtml::_('grid.id', $i, $item->id); ?>
                </td>
                <td>
                        <?php echo $item->greeting; ?>
                </td>
        </tr>
<?php endforeach; ?>

JHtml::_ is a helper function able to display several HTML output. In this case, it will display a checkbox for the item.

Put a file admin/views/helloworlds/tmpl/default_foot.php containing

admin/views/helloworlds/tmpl/default_foot.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
        <td colspan="3"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>

JPagination is a Joomla class able to manage and display pagination object.

Create the model

The HelloWorlds view asks the model for data. In Joomla, there is a class able to manage a list of data: JModelList. Class JModelList and inherited classes need only one method:

getListQuery which constructs an SQL query and two states:

  • list.start for determining the list offset
  • list.limit for determining the list length

The getItems and getPagination methods are defined in JModelList class. They don’t need to be defined in the HelloWorldModelHelloWorlds class.

admin/models/helloworlds.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// import the Joomla modellist library
jimport('joomla.application.component.modellist');
/**
 * HelloWorldList Model
 */
class HelloWorldModelHelloWorlds extends JModelList
{
        /**
         * Method to build an SQL query to load the list data.
         *
         * @return      string  An SQL query
         */
        protected function getListQuery()
        {
                // Create a new query object.           
                $db = JFactory::getDBO();
                $query = $db->getQuery(true);
                // Select some fields
                $query->select('id,greeting');
                // From the hello table
                $query->from('#__helloworld');
                return $query;
        }
}

The _populateState method is, by default, automatically called when a state is read by the getState method.

Packaging the component

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.xml
site/views/helloworld/tmpl/default.php
site/models/index.html
site/models/helloworld.php
admin/index.html
admin/helloworld.php
admin/controller.php
admin/sql/index.html
admin/sql/install.mysql.utf8.sql
admin/sql/uninstall.mysql.utf8.sql
admin/sql/updates/index.html
admin/sql/updates/mysql/index.html
admin/sql/updates/mysql/0.0.1.sql
admin/sql/updates/mysql/0.0.6.sql
admin/models/index.html
admin/models/fields/index.html
admin/models/fields/helloworld.php
admin/models/helloworlds.php
admin/views/index.html
admin/views/helloworlds/index.html
admin/views/helloworlds/view.html.php
admin/views/helloworlds/tmpl/index.html
admin/views/helloworlds/tmpl/default.php
admin/views/helloworlds/tmpl/default_head.php
admin/views/helloworlds/tmpl/default_body.php
admin/views/helloworlds/tmpl/default_foot.php
admin/tables/index.html
admin/tables/helloworld.php

Create a compressed file of this directory or directly download the archive and install it using the extension manager of Joomla. You can add a menu item of this component using the menu manager in the backend.

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">
        <name>Hello World!</name>
        <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>
        <version>0.0.7</version>
        <description>Description of the Hello World component ...</description>
 
        <install> <!-- Runs on install -->
                <sql>
                        <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
                </sql>
        </install>
        <uninstall> <!-- Runs on uninstall -->
                <sql>
                        <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
                </sql>
        </uninstall>
        <update> <!-- Runs on update; New in 2.5 -->
                <schemas>
                        <schemapath type="mysql">sql/updates/mysql</schemapath>
                </schemas>
        </update>
 
        <files folder="site">
                <filename>index.html</filename>
                <filename>helloworld.php</filename>
                <filename>controller.php</filename>
                <folder>views</folder>
                <folder>models</folder>
        </files>
 
        <administration>
                <menu>Hello World!</menu>
                <files folder="admin">
                        <filename>index.html</filename>
                        <filename>helloworld.php</filename>
                        <filename>controller.php</filename>
                        <folder>sql</folder>
                        <folder>tables</folder>
                        <folder>models</folder>
                        <!-- views files section -->
                        <folder>views</folder>
                </files>                
        </administration>
</extension>

Now you can see in your component hello-world an array with two colums, two rows and checkboxes. You can click the checkboxes in order to select the different options you want.