Developing a Model-View-Controller (MVC) Component for Joomla!1.6 - Part 07

http://docs.joomla.org

Introduction

This tutorial is part of the Developing a Model-View-Controller (MVC) Component for Joomla!1.6 tutorial. You are encouraged to read the previous parts of the tutorial before reading this.

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');     // Perform the Request task  $controller->execute(JRequest::getCmd('task'));     // Redirect if set by the controller  $controller->redirect();

Create the general controller

The entry point now get an instance of a HelloWorld prefixed controller. Let 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)   	{  		// set default view if not set  		JRequest::setVar('view', JRequest::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>

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!1.6, there is a class able to manage list of data: JModelList. Class JModelList and inherited classes needs only one method:

getListQuery which constructs and SQL query

and two states:

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

getItems and getPagination method 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

Create a compressed file of this directory or directly download the archive and install it using the extension manager of Joomla!1.6. 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="1.6.0" method="upgrade">  	<name>Hello World!</name>  	<creationDate>November 2009</creationDate>  	<author>John Doe</author>  	<authorEmail>[email protected]</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 1.6 -->  		<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.